/*
 * lovelacemeasurement.com: Lovelace's own default identity (apps/lovelace/docs/brand-lovelace/final/BRAND.md and
 * apps/lovelace/repo/docs/design-system.md). Warm paper and charcoal ink, navy for every control and link, Rose only
 * for the mark and display accents, Night for the dark identity surface, Literata for display and Inter for text,
 * both self-hosted. Hairlines, not shadows; one elevation level for the product screens.
 */

@font-face {
  font-family: "Literata Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/assets/fonts/literata-latin-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  /* Product neutrals (light) */
  --page: #f6f3ed;
  --surface: #f9f7f4;
  --sunken: #f2efe8;
  --wash: #f0ece5;
  --ink: #312f2b;
  --ink-2: #55524e;
  --ink-muted: #6a6761;
  --line: rgba(49, 47, 43, 0.12);
  --line-strong: rgba(49, 47, 43, 0.2);
  /* Pixel & Shelf navy: every control, link and focus ring */
  --brand: #112d4e;
  --brand-hover: #0b2140;
  /* Lovelace identity */
  --rose: #a62f63;
  --rose-on-dark: #f5adc1;
  --identity-ink: #112d4e;
  --night: #0b1a2b;
  --night-2: #12263c;
  --blush: #f7d6df;
  --thread: #f0c3cf;
  --thread-night: #4a2a3a;
  --endorse: #4f6178;
  --endorse-night: #b9c4d2;
  --on-night: #ffffff;
  --on-night-2: #c3c2b7;
  --on-night-muted: #a9a79f;

  --font-display: "Literata Variable", "Literata", ui-serif, Georgia, "Times New Roman", serif;
  --font-text: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 12px;
  --gutter: 16px;
  --max: 1200px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }
}

/* ------------------------------------------------------------------ */
/* Type                                                                 */
/* ------------------------------------------------------------------ */

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--identity-ink);
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--identity-ink);
}

h3 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-display);
  font-weight: 430;
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.5;
  color: var(--ink);
}

.kicker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--rose);
  margin-bottom: 12px;
}

.muted {
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------ */
/* Header                                                               */
/* ------------------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--page);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand .logo {
  display: block;
  width: 137px;
  height: 26px;
}

.brand .endorse {
  font-size: 13px;
  font-weight: 500;
  color: var(--endorse);
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
  line-height: 20px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}

.site-nav ul a {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}

.site-nav ul a:hover {
  color: var(--brand);
  background: var(--wash);
}

@media (min-width: 960px) {
  .site-nav ul {
    display: flex;
  }

  .site-nav .btn {
    margin-left: 12px;
  }
}

@media (max-width: 479px) {
  .header-inner {
    gap: 12px;
  }

  .brand {
    gap: 8px;
  }

  .brand .logo {
    width: 116px;
    height: 22px;
  }

  .brand .endorse {
    padding-left: 8px;
  }

}

/* Under 400 px the endorsement sits under the lockup, so the header fits a 320 px screen. */
@media (max-width: 399px) {
  .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .brand .endorse {
    padding-left: 0;
    border-left: 0;
    line-height: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.btn-sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
}

/* Small phones: a long button label wraps inside the button rather than running off the screen. */
@media (max-width: 479px) {
  .btn {
    white-space: normal;
    text-align: center;
    padding-block: 10px;
  }

  .btn-sm {
    white-space: nowrap;
    padding-block: 0;
  }
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--brand);
  border: 1px solid rgba(17, 45, 78, 0.3);
}

.btn-secondary:hover {
  background: var(--wash);
  border-color: var(--brand);
}

.btn .arrow {
  font-weight: 500;
}

/* On Night the primary action turns white with navy words (13.9:1). */
.night .btn-primary {
  background: #fff;
  color: var(--brand);
}

.night .btn-primary:hover {
  background: #e7ecf2;
}

.night :focus-visible {
  outline-color: #fff;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(48px, 7vw, 96px);
}

/* The signature thread, written once across the identity surface. Words never sit on it: the loop rides in the
   right-hand column, clear of the copy, and phones leave it out. */
.hero-thread {
  display: none;
}

@media (min-width: 1024px) {
  .hero-thread {
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    right: max(-140px, calc((100vw - 1440px) / 2 - 140px));
    width: 760px;
    height: 600px;
    pointer-events: none;
    background-image: linear-gradient(var(--thread), var(--thread));
    -webkit-mask: url("/assets/brand/lovelace-thread-panel.svg") no-repeat 100% 0 / 1080px auto;
    mask: url("/assets/brand/lovelace-thread-panel.svg") no-repeat 100% 0 / 1080px auto;
  }
}

/* Narrow desktops: the loop moves right so its lead-in stays clear of the hero's buttons. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .hero-thread {
    right: -300px;
  }
}

.hero-copy {
  max-width: 720px;
}

.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rose);
}

.hero-copy h1 {
  margin-bottom: 22px;
}

.hero-copy .lede {
  max-width: 640px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.price-note {
  margin-top: 18px;
  font-size: 15px;
  color: var(--ink-2);
}

.price-note strong {
  color: var(--ink);
  font-weight: 600;
}

.hero .hero-shot {
  margin-top: clamp(40px, 6vw, 64px);
}

/* ------------------------------------------------------------------ */
/* Product screens                                                      */
/* ------------------------------------------------------------------ */

.shot {
  margin: 0;
}

.shot-frame {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(49, 47, 43, 0.06), 0 18px 40px -22px rgba(17, 45, 78, 0.35);
}

.shot-frame img {
  width: 100%;
  height: auto;
}

.shot figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.demo-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-2);
}

.shot-hint {
  display: none;
}

/* Phones: the screens keep their full width inside a scrollable frame, so the words in them stay legible. */
@media (max-width: 719px) {
  .shot-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .shot-scroll img {
    width: 760px;
    max-width: none;
  }

  .shot-scroll.tall img {
    width: 640px;
  }

  .shot-hint {
    display: inline;
  }
}

/* Illustration of Lovelace's channel chart (DotInterval), drawn in HTML with made-up numbers. Marks in the
   identity navy: Rose, blush and the thread never appear in a chart. Positions are on a $0 to $200 scale. */
.range-chart {
  --ceil: 35%;
  padding: 22px 20px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(49, 47, 43, 0.06), 0 18px 40px -22px rgba(17, 45, 78, 0.35);
}

.rc-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.rc-window {
  margin: 2px 0 14px;
  font-size: 13px;
  color: var(--ink-muted);
}

.rc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-2);
}

.rc-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.k {
  display: inline-block;
  flex-shrink: 0;
}

.k-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
}

.k-mid {
  width: 20px;
  height: 10px;
  border-radius: 4px;
  background: rgba(17, 45, 78, 0.3);
}

.k-range {
  width: 20px;
  height: 2px;
  background: rgba(17, 45, 78, 0.5);
}

.k-ceil {
  width: 0;
  height: 14px;
  border-left: 2px dashed rgba(49, 47, 43, 0.6);
}

.rc-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label value" "track track";
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 0 6px;
  border-top: 1px solid var(--line);
}

.rc-label {
  grid-area: label;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.rc-grade {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}

.rc-value {
  grid-area: value;
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.rc-value b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.rc-track,
.rc-axis-track {
  position: relative;
  display: block;
}

.rc-track {
  grid-area: track;
  height: 30px;
}

/* The 6-month ceiling runs through every row. */
.rc-track::before {
  content: "";
  position: absolute;
  left: var(--ceil);
  top: -6px;
  bottom: -6px;
  border-left: 2px dashed rgba(49, 47, 43, 0.6);
}

.rc-range,
.rc-mid,
.rc-dot {
  position: absolute;
  top: 50%;
}

.rc-range {
  left: var(--lo);
  right: calc(100% - var(--hi));
  height: 2px;
  margin-top: -1px;
  background: rgba(17, 45, 78, 0.5);
}

.rc-mid {
  left: var(--q1);
  right: calc(100% - var(--q3));
  height: 10px;
  margin-top: -5px;
  border-radius: 4px;
  background: rgba(17, 45, 78, 0.3);
}

.rc-dot {
  left: var(--est);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--surface);
}

/* Grade A (tested) draws a diamond. */
.rc-dot.tested {
  border-radius: 2px;
  transform: rotate(45deg);
}

.rc-r1 { --lo: 16.5%; --q1: 20%; --est: 23%; --q3: 27%; --hi: 32%; }
.rc-r2 { --lo: 19.5%; --q1: 24.5%; --est: 29%; --q3: 35%; --hi: 44%; }
.rc-r3 { --lo: 18%; --q1: 25%; --est: 33%; --q3: 45%; --hi: 64%; }
.rc-r4 { --lo: 22.5%; --q1: 31.5%; --est: 41%; --q3: 55%; --hi: 76%; }
.rc-r5 { --lo: 41%; --q1: 52%; --est: 64%; --q3: 79%; --hi: 96%; }

.rc-axis {
  padding-top: 6px;
  border-top: 1px solid var(--line-strong);
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.rc-axis-track {
  height: 18px;
}

.rc-axis-track span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.rc-axis-track .t0 {
  left: 0;
  transform: none;
}

.rc-axis-track .t50 {
  left: 50%;
}

.rc-axis-track .t100 {
  right: 0;
  transform: none;
}

@media (min-width: 720px) {
  .range-chart {
    padding: 26px 28px 18px;
  }

  .rc-row {
    grid-template-columns: 230px 1fr 170px;
    grid-template-areas: "label track value";
    align-items: center;
    column-gap: 24px;
    padding: 12px 0;
  }

  .rc-track::before {
    top: -13px;
    bottom: -13px;
  }

  .rc-axis {
    display: grid;
    grid-template-columns: 230px 1fr 170px;
    column-gap: 24px;
  }

  .rc-axis-track {
    grid-column: 2;
  }
}

/* ------------------------------------------------------------------ */
/* Principles strip                                                     */
/* ------------------------------------------------------------------ */

.principles {
  margin-top: clamp(40px, 6vw, 64px);
  padding-block: 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.principles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .principles ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .principles ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

.principles li strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.principles li span {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ */
/* Sections                                                             */
/* ------------------------------------------------------------------ */

.section {
  padding-block: clamp(64px, 9vw, 112px);
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section-head {
  display: grid;
  gap: 18px 56px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

@media (min-width: 960px) {
  .section-head.split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: end;
  }
}

.section-head .intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 62ch;
}

.section-head .intro + .intro {
  margin-top: 12px;
}

/* Three questions */
.questions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  counter-reset: q;
}

@media (min-width: 900px) {
  .questions {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.questions li {
  counter-increment: q;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
}

.questions li::before {
  content: counter(q);
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}

.questions h3 {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--identity-ink);
  margin-bottom: 12px;
}

.questions p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* Feature blocks */
.feature + .feature {
  margin-top: clamp(72px, 10vw, 128px);
}

.feature .shot + .shot {
  margin-top: 32px;
}

.feature .between {
  max-width: 62ch;
  margin-block: 40px 28px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}

.points {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 28px 40px;
}

@media (min-width: 840px) {
  .points {
    grid-template-columns: repeat(3, 1fr);
  }
}

.points li {
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
}

.points h3 {
  margin-bottom: 8px;
}

.points p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* Anatomy of a study (a structure, not data) */
.anatomy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

@media (min-width: 720px) {
  .anatomy {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .anatomy {
    grid-template-columns: repeat(5, 1fr);
  }
}

.anatomy li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 18px 20px;
}

.anatomy .step {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.anatomy strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

.anatomy span:last-child {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.anatomy-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------ */
/* Night (the dark identity surface)                                    */
/* ------------------------------------------------------------------ */

.night {
  background: var(--night);
  color: var(--on-night-2);
}

.night h2,
.night h3 {
  color: var(--on-night);
}

.night .kicker {
  color: var(--rose-on-dark);
}

.night .section-head .intro,
.night p {
  color: var(--on-night-2);
}

.night a:not(.btn) {
  color: #fff;
}

.night-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .night-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.night-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  background: var(--night-2);
}

.night-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.006em;
  margin-bottom: 12px;
}

.night-card p + p {
  margin-top: 12px;
}

.night-card ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.night-card li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-night-2);
}

.night-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--endorse-night);
  border-bottom: 2px solid var(--endorse-night);
  transform: rotate(-45deg);
}

.night-card .templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.night-card .templates li {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 13px;
  color: var(--on-night);
}

.night-card .templates li::before {
  content: none;
}

/* ------------------------------------------------------------------ */
/* Who and how                                                          */
/* ------------------------------------------------------------------ */

.two-col {
  display: grid;
  gap: 48px 72px;
}

@media (min-width: 960px) {
  .two-col {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.who-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.who-list li {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.who-list strong {
  color: var(--ink);
  font-weight: 600;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 30px 56px;
}

.steps li:last-child {
  padding-bottom: 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* The thread between steps: one navy line with a knot per step, like a receipt. */
.steps li::after {
  content: "";
  position: absolute;
  left: 16.25px;
  top: 40px;
  bottom: 6px;
  width: 1.5px;
  background: var(--brand);
  opacity: 0.35;
}

.steps li:last-child::after {
  content: none;
}

.steps h3 {
  margin: 4px 0 6px;
}

.steps p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ */
/* Pricing                                                              */
/* ------------------------------------------------------------------ */

.price-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px 64px;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 20px;
  background: var(--blush);
  color: var(--ink);
}

@media (min-width: 960px) {
  .price-panel {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

.price-panel .kicker {
  color: var(--rose);
}

.price-figure {
  margin: 8px 0 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 10.5vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--identity-ink);
}

@media (min-width: 720px) {
  .price-figure {
    font-size: clamp(40px, 5.6vw, 60px);
  }
}

.price-figure small {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
}

.price-panel p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

.price-panel .cta-row {
  margin-top: 26px;
}

.price-panel .btn-secondary {
  border-color: rgba(17, 45, 78, 0.35);
}

.price-panel .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.45);
}

.includes {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(17, 45, 78, 0.12);
  border-radius: 14px;
  padding: 24px 24px 26px;
}

.includes h3 {
  margin-bottom: 4px;
}

.includes > p {
  font-size: 14.5px;
}

.includes ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.includes li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.includes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ */
/* FAQ                                                                  */
/* ------------------------------------------------------------------ */

.faq {
  border-top: 1px solid var(--line-strong);
}

.faq details {
  border-bottom: 1px solid var(--line-strong);
}

.faq summary {
  position: relative;
  display: block;
  padding: 20px 44px 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* The disclosure cue: a plus that turns into a minus when open. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--brand);
}

@media (prefers-reduced-motion: no-preference) {
  .faq summary::before,
  .faq summary::after {
    transition: transform 150ms ease-out;
  }
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq summary:hover {
  color: var(--brand);
}

.faq .answer {
  padding: 0 44px 22px 0;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

.faq .answer p + p {
  margin-top: 10px;
}

/* ------------------------------------------------------------------ */
/* Closing band and footer                                              */
/* ------------------------------------------------------------------ */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 104px);
}

.closing-thread {
  display: none;
}

@media (min-width: 1024px) {
  .closing-thread {
    display: block;
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    width: 46%;
    pointer-events: none;
    background-image: linear-gradient(var(--thread-night), var(--thread-night));
    -webkit-mask: url("/assets/brand/lovelace-thread-panel.svg") no-repeat 100% 50% / 1100px auto;
    mask: url("/assets/brand/lovelace-thread-panel.svg") no-repeat 100% 50% / 1100px auto;
  }
}

.closing h2 {
  max-width: 18ch;
  margin-bottom: 18px;
}

.closing p {
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.65;
}

.site-footer {
  background: var(--night);
  color: var(--on-night-2);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 36px 44px;
  font-size: 14px;
}

.footer-inner {
  display: grid;
  gap: 22px;
}

@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-brand .logo {
  display: block;
  width: 126px;
  height: 24px;
}

.footer-brand .endorse {
  color: var(--endorse-night);
  font-weight: 500;
}

.footer-brand .endorse a {
  color: var(--endorse-night);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .footer-links {
    justify-content: center;
  }
}

.site-footer a {
  color: #fff;
}

.footer-note {
  color: var(--on-night-muted);
}

@media (min-width: 900px) {
  .footer-note {
    max-width: 44ch;
  }
}

/* ------------------------------------------------------------------ */
/* 404                                                                  */
/* ------------------------------------------------------------------ */

body:has(.notfound) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.notfound {
  flex: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding-block: 72px;
}

.notfound-thread {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--thread), var(--thread));
  -webkit-mask: url("/assets/brand/lovelace-thread-panel.svg") no-repeat 50% 50% / cover;
  mask: url("/assets/brand/lovelace-thread-panel.svg") no-repeat 50% 50% / cover;
}

@media (max-width: 639px) {
  .notfound-thread {
    -webkit-mask-size: 250% auto;
    mask-size: 250% auto;
    -webkit-mask-position: 88% 0;
    mask-position: 88% 0;
  }
}

.notfound-card {
  max-width: 520px;
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.notfound-card svg {
  color: var(--rose);
  margin-bottom: 22px;
}

.notfound-card h1 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin-bottom: 12px;
}

.notfound-card p {
  color: var(--ink-2);
}

.loose-track {
  opacity: 0.14;
}

/* ------------------------------------------------------------------ */
/* Forced colors and print                                              */
/* ------------------------------------------------------------------ */

@media (forced-colors: active) {
  .hero-thread,
  .closing-thread,
  .notfound-thread {
    display: none;
  }

  .notfound-card svg path {
    stroke: CanvasText;
  }

  /* The lockups follow the user's palette: the mark and the name use CanvasText (BRAND.md). */
  .logo path {
    fill: CanvasText;
  }

  .range-chart .rc-range,
  .range-chart .k-range {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .range-chart .rc-mid,
  .range-chart .k-mid {
    forced-color-adjust: none;
    background: Canvas;
    border: 2px solid CanvasText;
  }

  .range-chart .rc-dot,
  .range-chart .k-dot {
    forced-color-adjust: none;
    background: CanvasText;
    box-shadow: 0 0 0 2px Canvas;
  }

  .range-chart .rc-track::before,
  .range-chart .k-ceil {
    border-left-color: CanvasText;
  }

  .btn {
    border: 1px solid ButtonText;
  }
}

@media print {
  .site-header nav,
  .hero-thread,
  .closing-thread {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Helpers                                                              */
/* ------------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Heading levels that keep the outline sequential but take another level's look. */
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--identity-ink);
}

h4.h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}

.feature .points + .shot {
  margin-top: 48px;
}

.two-col h2 {
  margin-bottom: 8px;
}

.steps-title {
  margin-bottom: 30px;
}