/* Feeling Lucky prebuild funnel: one shared shell, four themes.
   Colour comes from <slug>/theme.css. Everything structural lives here so the
   four concepts cannot drift apart. Mobile first; the desktop rules only widen
   what is already correct at 390px. */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3.5rem;
  --space-10: 4.5rem;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1.0625rem;
  --text-md: 1.125rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --display: clamp(1.9375rem, 8.2vw, 2.875rem);
  --display-sm: clamp(1.625rem, 6.4vw, 2.25rem);

  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.375rem;
  --radius-xl: 1.75rem;
  --radius-pill: 62rem;

  --measure: 34rem;
  --measure-wide: 68rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 480ms;

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-numeric: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Tight, layered shadows. A single wide blur is what makes an interface
     look washed out on a phone screen in daylight. */
  --shadow-sm: 0 1px 1px color-mix(in srgb, var(--ink) 5%, transparent),
    0 2px 6px -2px color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-md: 0 1px 1px color-mix(in srgb, var(--ink) 5%, transparent),
    0 8px 20px -10px color-mix(in srgb, var(--ink) 26%, transparent);
  --shadow-lg: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent),
    0 22px 44px -22px color-mix(in srgb, var(--ink) 40%, transparent);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.internal-mode-badge {
  position: fixed;
  z-index: 10000;
  right: max(0.55rem, env(safe-area-inset-right));
  bottom: max(0.55rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgb(17 24 39 / 18%);
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 0.15rem 0.75rem rgb(17 24 39 / 12%);
  color: #17211b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
  backdrop-filter: blur(0.4rem);
}

.internal-mode-badge > span {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #22a06b;
  box-shadow: 0 0 0 0.16rem rgb(34 160 107 / 16%);
}

/* Only these can contain a token with no break opportunity. */
.ref,
.receipt dd,
.disclosures p,
input {
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 680;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

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

figure,
dl,
dd,
blockquote {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* iOS zooms the viewport when a focused field is under 16px. Every field here
   is at least that, and the grey flash on tap is replaced by real states. */
input,
select,
textarea {
  font-size: max(1rem, var(--text-base));
}

button,
a,
summary,
label,
input,
[role="radio"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a {
  color: var(--primary-strong);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.22em;
}

[tabindex="-1"]:focus {
  outline: none;
}

:where(a, button, input, summary, label):focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 3px;
  border-radius: 8px;
}

.ack:has(input:focus-visible) {
  outline: 2.5px solid var(--primary);
  outline-offset: 3px;
}

::selection {
  background: var(--primary-soft);
}

/* -------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (max-width: 22.5rem) {
  .wrap {
    padding-inline: var(--space-4);
  }
}

.wrap-wide {
  max-width: var(--measure-wide);
}

.section {
  padding-block: var(--space-9);
}

.section-tight {
  padding-block: var(--space-8);
}

.stack > * + * {
  margin-top: var(--gap, var(--space-4));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--primary-strong);
}

.eyebrow::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--accent);
}

.lede {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--muted);
}

.fine {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
}

.hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--space-7);
}

/* ------------------------------------------------------------- controls */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3.5rem;
  padding: 0.9rem 1.6rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 640;
  letter-spacing: -0.015em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--ink) 14%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--primary) 86%, transparent);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) linear,
    box-shadow var(--dur-fast) linear;
}

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

.btn:active {
  transform: scale(0.978);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--ink) 14%, transparent);
}

.btn[disabled] {
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* The secondary action is a text button in the brand colour, not a second
   bordered slab competing with the primary. */
.btn-ghost {
  background: transparent;
  color: var(--primary-strong);
  border: 0;
  box-shadow: none;
  font-family: var(--font-ui);
  font-weight: 620;
  font-size: var(--text-base);
  min-height: 3.25rem;
}

.btn-ghost:hover {
  background: var(--tint);
}

.btn-quiet {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 560;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.btn-quiet:hover {
  color: var(--ink);
}

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.card-flush {
  padding: 0;
  overflow: hidden;
}

.card-quiet {
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  box-shadow: none;
}

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--canvas);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) linear, background var(--dur) linear;
}

.site-header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 680;
  letter-spacing: -0.026em;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.6rem;
}

.brand svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}

.header-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--text-xs);
  font-weight: 660;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.header-note svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
}

/* ----------------------------------------------------------------- hero */
.hero {
  padding-block: var(--space-8) var(--space-7);
  position: relative;
}

/* A quiet wash behind the hero so the page opens with depth rather than a
   flat field of one colour. */
.hero::before {
  content: "";
  position: absolute;
  inset: -9rem 0 auto;
  height: 42rem;
  background: radial-gradient(
    78% 46% at 88% 12%,
    color-mix(in srgb, var(--accent) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent) 9%, transparent) 42%,
    transparent 74%
  );
  pointer-events: none;
  z-index: -1;
}

.hero h1 {
  font-size: var(--display);
  margin-top: var(--space-4);
}

.hero .lede {
  margin-top: var(--space-5);
}

.hero-cta {
  margin-top: var(--space-7);
}

.landing-tint {
  background: var(--tint);
}

.hero-figure {
  margin-top: var(--space-7);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  background: var(--primary-soft);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}

.hero-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: none;
}

.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figure-caption {
  position: absolute;
  inset-inline: var(--space-4);
  bottom: var(--space-4);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 76%, transparent);
  color: #fff;
  font-size: var(--text-xs);
  line-height: 1.4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Cost, timing and the most useful differentiator stay compact enough that the
   lived outcome remains visible in the first phone viewport. */
.hero-pills {
  list-style: none;
  margin-top: var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hero-pills li {
  padding: 0.3rem 0.62rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary-soft) 72%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-strong);
  font-size: var(--text-xs);
  line-height: 1.35;
  font-weight: 650;
}

.hero-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted);
}

.result-preview-caption {
  display: grid;
  gap: 0.15rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 650;
}

.result-preview-caption p:first-child {
  color: var(--primary-strong);
}

.result-preview-caption p:last-child {
  font-weight: 540;
}

.result-preview-card {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(
      80% 58% at 100% 0%,
      color-mix(in srgb, var(--accent-soft) 82%, transparent),
      transparent 72%
    ),
    var(--surface);
  box-shadow: var(--shadow-lg);
}

.result-preview-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.25rem;
  background: linear-gradient(var(--primary), var(--accent));
}

.result-preview-card .result-label {
  margin-top: var(--space-3);
  font-size: clamp(1.65rem, 7.5vw, 2.25rem);
}

.result-preview-body {
  margin-top: var(--space-4);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.5;
}

.result-preview-action {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: color-mix(in srgb, var(--tint) 68%, #fff);
  box-shadow: none;
}

.result-preview-action p {
  font-size: var(--text-base);
}

.offer-support {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--muted);
}

.first-week {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--tint);
  display: grid;
  gap: 0.3rem;
}

.first-week-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary-strong);
}

.first-week-body {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.paid-links {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-base);
  font-weight: 560;
}

.meta-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.meta-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.62rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 580;
  white-space: nowrap;
  color: var(--muted);
}

.meta-row li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--primary);
}

/* --------------------------------------------------------------- proofs */
.rowlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.rowlist li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.rowlist .num {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rowlist h3 {
  font-size: var(--text-md);
  font-weight: 660;
}

.rowlist p {
  margin-top: 0.3rem;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.checklist li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--text-base);
  line-height: 1.45;
}

.checklist li::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--primary-soft);
  background-image: var(--tick);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.7rem;
}

.crosslist li::before {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  background-image: var(--cross);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.62rem;
}

.split {
  display: grid;
  gap: var(--space-4);
}

.split .card h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------------ pull note */
.note {
  border-left: 3px solid var(--accent);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  font-size: var(--text-base);
  line-height: 1.5;
}

.note strong {
  font-weight: 660;
}

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

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

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: 620;
  min-height: 3rem;
}

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

.faq summary::after {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--primary-soft) var(--plus) no-repeat center / 0.65rem;
  transition: transform var(--dur) var(--ease);
}

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

.faq details p {
  padding-bottom: var(--space-5);
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.55;
}


/* Canonical photo-led landing structure. Placeholder metadata is available
   to design tooling but is never painted as visitor copy. */
.landing-outcome-copy {
  margin-top: auto;
}

.landing-outcome-copy .lede,
.landing-status {
  margin-top: var(--space-4);
}

.landing-scroll-cue {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
}

.landing-scroll-cue svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.photo-slot {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  box-shadow: none;
}

.photo-slot-reserve {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.photo-slot-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.photo-slot-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-section {
  scroll-margin-top: var(--space-6);
  padding-block: var(--space-9);
}

.landing-section > .wrap {
  display: grid;
  gap: var(--space-7);
}

.landing-section-content {
  align-self: center;
}

.landing-section-body,
.landing-section-items,
.landing-section-cta {
  margin-top: var(--space-6);
}

.landing-section-items {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
}

.landing-section-item {
  padding-block: var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.landing-section-item:first-child {
  border-top: 1px solid var(--line);
}

.landing-section-item h3 + p {
  margin-top: var(--space-2);
}


/* ---------------------------------------------- landing breathing room
   Nothing sits flush against an edge or against its neighbour. The gutter
   and the block rhythm are set here once so every concept inherits the same
   resting space and only overrides colour. */
.landing-story .wrap { padding-inline: var(--space-6); }

@media (max-width: 22.5rem) {
  .landing-story .wrap { padding-inline: var(--space-5); }
}

.landing-story .landing-section { padding-block: var(--space-10); }

.landing-story .landing-section[data-section-position="1"] {
  padding-top: calc(var(--space-10) + var(--space-4));
}

.landing-story .landing-section-items { margin-top: var(--space-7); }

/* ------------------------------------------------------- hero rating row
   The only gold on the page. It is the brightest element by intent, because
   it is the one thing a cold visitor is looking for before they commit. */
/* The hero sits on a photograph, so the eyebrow needs its own contrast
   contract rather than the light-surface primary colour. */
.landing-outcome-copy .eyebrow {
  color: rgb(255 255 255 / 82%);
}

.landing-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}

.landing-rating-stars,
.landing-quote-stars {
  display: inline-flex;
  gap: 0.16rem;
}

.landing-rating-stars i,
.landing-quote-stars i {
  display: block;
  width: 0.78rem;
  height: 0.78rem;
  background: #f4c66e;
  clip-path: polygon(
    50% 0, 61% 34%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 34%
  );
}

.landing-rating-stars i {
  filter: drop-shadow(0 0 0.35rem rgb(244 198 110 / 38%));
}

.landing-rating-score {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.landing-rating-count { opacity: 0.78; }

/* ------------------------------------------------------ testimonial cards
   Cards are for people, hairline rows are for facts. A person needs a face,
   a name and a rating before the sentence is worth anything. */
.landing-quotes {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.landing-quote {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.landing-quote-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.landing-quote-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--text-sm);
  font-weight: 700;
}

.landing-quote-who {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.landing-quote-who cite {
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 650;
  color: var(--ink);
}

.landing-quote-detail {
  font-size: var(--text-xs);
  color: var(--muted);
}

.landing-quote-stars { margin-left: auto; }

.landing-quote-text { margin: var(--space-4) 0 0; }

.landing-quote-text p {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--ink);
}

/* Personalized result recommendation. It is visually separate from the
   diagnosis so the visitor can scan "what we found" before "what changes." */
.journey-result-action {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.45;
}

@media (min-width: 48rem) {
  .landing-quotes { gap: var(--space-5); }
}

@media (min-width: 48rem) {
  .landing-section > .wrap {
    max-width: var(--measure-wide);
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
  }

  .landing-section[data-section-position="2"] .landing-section-photo,
  .landing-section[data-section-position="4"] .landing-section-photo,
  .landing-section[data-section-position="6"] .landing-section-photo,
  .landing-section[data-section-position="8"] .landing-section-photo {
    order: 2;
  }
}

/* --------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-8) calc(var(--space-10) + env(safe-area-inset-bottom));
  font-size: var(--text-sm);
  color: var(--muted);
}

.quiz-footer {
  padding-block: var(--space-6) calc(var(--space-7) + env(safe-area-inset-bottom));
}

.quiz-footer .footer-links {
  margin-top: 0;
  justify-content: center;
  font-size: var(--text-xs);
}

/* ---------------------------------------------------- quiz-first entry */
.quiz-entry {
  background: var(--tint);
  padding-bottom: var(--space-8);
}

.entry-hero {
  min-height: 28rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
}

.entry-scene {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -2;
}

.entry-scene-media {
  display: block;
  width: 100%;
  height: 100%;
}

.entry-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(8 13 31 / 72%) 0%, rgb(8 13 31 / 47%) 42%, rgb(8 13 31 / 88%) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary-strong) 72%, #070912) 0%, transparent 88%);
}

.entry-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quiz-entry--baby_sleep .entry-scene img {
  object-position: 56% center;
}

.quiz-entry--no_contact .entry-scene img {
  object-position: 58% center;
}

.entry-hero > .wrap {
  min-height: 28rem;
  display: flex;
  flex-direction: column;
  padding-top: max(var(--space-5), env(safe-area-inset-top));
  padding-bottom: 2.75rem;
  position: relative;
  z-index: 1;
}

.entry-product {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 680;
  text-shadow: 0 1px 16px rgb(0 0 0 / 24%);
}

.entry-product svg {
  width: 1.75rem;
  height: 1.75rem;
}

.entry-kicker {
  margin-top: var(--space-7);
  color: color-mix(in srgb, var(--accent) 82%, #fff);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.8vw, 1.35rem);
  font-weight: 760;
  letter-spacing: -0.015em;
}

.quiz-entry h1 {
  max-width: 39rem;
  margin-top: 0.32rem;
  color: #fff;
  font-size: clamp(2.25rem, 10vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgb(0 0 0 / 32%);
}

.entry-lede {
  max-width: 37rem;
  margin-top: var(--space-3);
  color: rgb(255 255 255 / 86%);
  font-size: clamp(1rem, 4.1vw, 1.18rem);
  line-height: 1.42;
  text-shadow: 0 1px 18px rgb(0 0 0 / 32%);
}

.entry-signal {
  width: max-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0.15rem 0.65rem;
  margin-top: var(--space-4);
  padding: 0.55rem 0.78rem;
  border: 1px solid rgb(255 255 255 / 27%);
  border-radius: 0.85rem;
  background: rgb(7 9 21 / 55%);
  box-shadow: 0 10px 28px rgb(0 0 0 / 18%);
  backdrop-filter: blur(12px);
}

.entry-signal > span {
  grid-column: 1 / -1;
  color: rgb(255 255 255 / 66%);
  font-size: 0.65rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.entry-signal strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1;
}

.entry-signal small {
  color: color-mix(in srgb, var(--accent) 74%, #fff);
  font-size: 0.75rem;
  font-weight: 710;
}

.entry-preview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: auto;
  padding: 0.68rem 0.38rem;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 94%);
  color: var(--ink);
  box-shadow: 0 18px 50px rgb(0 0 0 / 28%);
  backdrop-filter: blur(14px);
}

.quiz-entry--no_contact .entry-preview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.entry-preview-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  padding: 0.05rem 0.36rem;
  text-align: center;
}

.entry-preview-item + .entry-preview-item {
  border-left: 1px solid var(--line);
}

.entry-preview-item > span:first-child {
  min-width: 0;
}

.entry-preview-item strong,
.entry-preview-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-preview-item strong {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 3.1vw, 0.88rem);
  line-height: 1.15;
}

.entry-preview-item small {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 690;
}

.entry-preview-state {
  flex: none;
  color: #239b69;
  font-size: 1rem;
  font-weight: 800;
}

.entry-preview-state svg {
  width: 0.92rem;
  height: 0.92rem;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry-question-section {
  position: relative;
  z-index: 2;
  margin-top: -1.15rem;
}

.entry-question-card {
  padding: 1.35rem 1rem 2rem;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 1.35rem;
  background: #fff;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--primary-strong) 16%, transparent);
}

.entry-step {
  text-align: left;
  color: var(--primary);
}

.entry-question-card .question-prompt {
  margin-top: var(--space-3);
  font-size: clamp(1.7rem, 7.5vw, 2.25rem);
  line-height: 1.03;
  text-wrap: balance;
}

.entry-question-card .options {
  margin-top: var(--space-6);
}

/* The Baby Sleep welcome is a single phone-height composition. Once the flow
   opens, normal document scrolling takes over for any screen taller than the
   available Safari viewport. */
body[data-page="landing"]:has(.quiz-entry--journey):not([data-flow-open="true"]) {
  overflow: hidden;
  overscroll-behavior: none;
}

.quiz-entry--journey {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: #070b1d;
}

.quiz-entry--journey + .quiz-footer {
  display: none;
}

.quiz-entry--journey .entry-hero,
.quiz-entry--journey .entry-hero > .wrap {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

.quiz-entry--journey .entry-scene::after {
  background:
    radial-gradient(circle at 75% 22%, rgb(234 157 91 / 16%), transparent 28%),
    linear-gradient(180deg, rgb(5 8 24 / 56%) 0%, rgb(5 8 24 / 34%) 35%, rgb(5 8 24 / 78%) 66%, rgb(5 8 24 / 98%) 100%);
}

.quiz-entry--journey .entry-scene img {
  object-position: 53% center;
  transform: scale(1.025);
  filter: saturate(0.88) contrast(1.05);
  animation: journey-scene-breathe 12s ease-in-out infinite alternate;
}

@keyframes journey-scene-breathe {
  to {
    transform: scale(1.06) translate3d(-0.4%, -0.3%, 0);
  }
}

.quiz-entry--journey .entry-hero > .wrap {
  width: min(100%, 31rem);
  display: grid;
  grid-template-rows: auto minmax(3rem, 0.85fr) auto auto minmax(3rem, 1.15fr) auto;
  align-content: stretch;
  gap: 0;
  padding: max(1.4rem, calc(env(safe-area-inset-top) + 0.85rem)) 1.35rem
    max(0.85rem, calc(env(safe-area-inset-bottom) + 0.7rem));
}

.quiz-entry--journey .entry-product {
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.entry-welcome-spacer {
  min-height: 3rem;
}

.entry-welcome-copy {
  align-self: center;
}

.entry-status {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  margin: clamp(1.8rem, 4vh, 2.5rem) 0 0;
  color: rgb(255 255 255 / 70%);
}

.entry-status .entry-status-stars {
  color: #ffc45f;
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  line-height: 1;
}

.entry-status span {
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.entry-welcome-copy h1 {
  max-width: 19rem;
  margin: 0;
  font-size: clamp(2.55rem, 11.8vw, 3.35rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.entry-welcome-prompt {
  max-width: 20rem;
  margin: clamp(1.1rem, 2.7vh, 1.45rem) 0 0;
  color: rgb(255 255 255 / 88%);
  font-size: clamp(1.14rem, 5.3vw, 1.35rem);
  line-height: 1.38;
  text-wrap: balance;
}

.entry-welcome-cta {
  position: relative;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-self: end;
  width: auto;
  min-width: 9.7rem;
  min-height: 3.55rem;
  margin: clamp(1rem, 2.5vh, 1.4rem) 0 0;
  padding: 0.44rem 0.48rem 0.44rem 1.2rem;
  border-radius: 999px;
  color: #080b18;
  background: #fff;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 24%);
  font-size: 0.98rem;
}

.entry-welcome-cta span:last-child {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  color: #fff;
  background: #080b18;
  font-size: 1.2rem;
}

@media (min-width: 48rem) {
  .quiz-entry--journey .entry-hero,
  .quiz-entry--journey .entry-hero > .wrap {
    min-height: 0;
  }
}

@media (min-width: 48rem) {
  .entry-hero,
  .entry-hero > .wrap {
    min-height: 35rem;
  }

  .entry-hero > .wrap {
    padding-top: var(--space-7);
    padding-bottom: var(--space-8);
  }

  .entry-kicker {
    margin-top: var(--space-9);
  }

  .quiz-entry h1 {
    font-size: clamp(3.6rem, 7vw, 4.8rem);
  }

  .entry-question-section .wrap {
    max-width: 48rem;
  }

  .entry-question-card {
    padding: 2rem 2.25rem 2.5rem;
  }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
}

.footer-links a {
  color: var(--muted);
  display: inline-block;
  padding-block: 0.8rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 660;
  color: var(--ink);
  font-size: var(--text-base);
}

.footer-brand svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---------------------------------------------------------- sticky bar */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
  transform: translateY(115%);
  transition: transform var(--dur) var(--ease);
}

.sticky-cta[data-visible="true"] {
  transform: translateY(0);
}

/* Reserve the bar's height so the closing card is never covered on a phone. */
body[data-page="landing"] #landing {
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

@media (min-width: 48rem) {
  body[data-page="landing"] #landing {
    padding-bottom: 0;
  }
}

.sticky-cta .wrap {
  padding-inline: 0;
}

.sticky-cta .btn {
  min-height: 3.25rem;
}

/* =========================================================== the funnel */
/* The funnel replaces the landing in normal flow rather than floating over it.
   A fixed overlay measures itself against the visual viewport, which drifts from
   the layout viewport inside embedded browsers and on iOS zoom. */
.flow {
  display: none;
  background: var(--canvas);
}

.flow[data-open="true"] {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
}

body[data-flow-open="true"] #landing,
body[data-flow-open="true"] .site-header,
body[data-flow-open="true"] .site-footer,
body[data-flow-open="true"] .sticky-cta {
  display: none;
}

.flow-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--canvas);
  padding-top: env(safe-area-inset-top);
  transition: background var(--dur) linear;
}

body[data-scrolled="true"] .flow-bar {
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

body[data-quick-exit="true"] .flow-bar-inner {
  padding-right: 7rem;
}

/* The quick-exit control owns the top right on a concept that offers it, so the
   privacy pill steps aside rather than sitting underneath it. */
body[data-quick-exit="true"] .header-note {
  display: none;
}

/* Screens rendered without a top bar still have to clear the quick-exit control. */
body[data-quick-exit="true"] .flow > .screen:first-child {
  padding-top: 4.75rem;
}

/* Analysis is a deliberate moment of anticipation, not another white form
   screen. Each concept keeps its own colour through the shared theme tokens. */
.flow[data-screen="analysis"] {
  color: #fff;
  background:
    radial-gradient(
      circle at 50% 38%,
      color-mix(in srgb, var(--primary) 38%, transparent) 0,
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--accent) 20%, transparent) 0,
      transparent 28%
    ),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--ink) 84%, var(--primary)),
      color-mix(in srgb, var(--ink) 96%, #000) 58%,
      color-mix(in srgb, var(--ink) 88%, var(--primary))
    );
}

.flow[data-screen="analysis"] .flow-bar,
body[data-scrolled="true"] .flow[data-screen="analysis"] .flow-bar {
  color: #fff;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  border-color: color-mix(in srgb, #fff 11%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.flow[data-screen="analysis"] .icon-btn {
  color: #fff;
}

.flow[data-screen="analysis"] .icon-btn:hover {
  background: color-mix(in srgb, #fff 9%, transparent);
}

.flow[data-screen="analysis"] :is(.flow-step, .bar-private) {
  color: color-mix(in srgb, #fff 72%, transparent);
}

.flow-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.icon-btn {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) linear;
}

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

.icon-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.bar-private {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.bar-private svg {
  width: 0.85rem;
  height: 0.85rem;
}

@media (max-width: 24rem) {
  .bar-private-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

.flow-step {
  flex: 1;
  font-size: var(--text-xs);
  font-weight: 640;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.progress {
  height: 3px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  max-width: var(--measure);
  margin-inline: auto;
}

.flow-bar[data-progress="none"] {
  border-bottom: 1px solid var(--line);
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width var(--dur-slow) var(--ease);
}

.screen {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-7) var(--space-5) calc(var(--space-10) + env(safe-area-inset-bottom));
  animation: screen-in var(--dur) var(--ease) both;
}

.screen :is(h1, h2) {
  scroll-margin-top: 5.5rem;
}

@media (max-width: 22.5rem) {
  .screen {
    padding-inline: var(--space-4);
  }
}

/* Viewport safety is a shared funnel invariant. Concept styles may size a
   journey screen to the visual viewport for an app-like composition, but they
   must never trap overflow below that viewport. The document body is locked
   while a journey is open, so the screen itself is the reliable iOS/Android
   scroll container. `!important` deliberately prevents a concept-specific
   decorative overflow rule from disabling this escape hatch. */
.flow[data-journey="true"] > .screen {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

@keyframes screen-in {
  from {
    transform: translateY(10px);
  }
}

.screen[data-back="true"] {
  animation-name: screen-in-back;
}

@keyframes screen-in-back {
  from {
    transform: translateY(-8px);
  }
}

.question-prompt {
  font-size: clamp(1.625rem, 6.1vw, 2.125rem);
  letter-spacing: -0.03em;
  line-height: 1.14;
}

.question-helper {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  color: var(--muted);
}


.answer-feedback {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--primary);
  color: var(--ink);
  font-weight: 570;
}

.answer-feedback[hidden] {
  display: none;
}


/* ------------------------------------------------------------- options */
.options {
  margin-top: var(--space-7);
  display: grid;
  gap: 0.625rem;
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 3.75rem;
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 520;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--dur-fast) linear, background var(--dur-fast) linear,
    transform var(--dur-fast) var(--ease);
}

.option:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
}

.option:active {
  transform: scale(0.99);
}

.option .dot {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 24%, transparent);
  transition: border-color var(--dur-fast) linear, background var(--dur-fast) linear;
}

.option[aria-checked="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
  box-shadow: var(--shadow-sm), 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.option[aria-checked="true"] .dot {
  border-color: var(--primary);
  background: var(--primary) var(--tick-light) no-repeat center / 0.7rem;
}

.question-note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.question-note svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  margin-top: 0.18rem;
  opacity: 0.7;
}

/* ------------------------------------------------------------ analysis */
.analysis {
  min-height: calc(100dvh - 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.analysis-kicker {
  margin-bottom: var(--space-6);
  color: color-mix(in srgb, #fff 62%, var(--primary));
  font-size: var(--text-xs);
  font-weight: 720;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.analysis h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-7);
  color: #fff;
  max-width: 23rem;
}

.analysis-progress {
  --analysis-size: clamp(11rem, 52vw, 13.5rem);
  width: var(--analysis-size);
  height: var(--analysis-size);
}

.analysis-ring {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 3%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
    0 26px 70px color-mix(in srgb, #000 35%, transparent);
}

.analysis-ring::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--primary) 32%, transparent),
    transparent 72%
  );
  filter: blur(8px);
  opacity: 1;
}

.analysis-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.analysis-ring circle {
  fill: none;
  stroke-width: 7;
}

.analysis-ring-track {
  stroke: color-mix(in srgb, #fff 12%, transparent);
}

.analysis-ring-value {
  stroke: color-mix(in srgb, var(--primary) 62%, #fff);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--primary) 58%, transparent));
}

.analysis-percent {
  position: relative;
  z-index: 1;
  min-width: 4ch;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 12vw, 3.5rem);
  font-weight: 720;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.analysis-ring-head {
  position: absolute;
  inset: 6.4%;
  z-index: 2;
  border-radius: 50%;
  transform: rotate(calc(var(--analysis-progress, 0) * 3.6deg));
  transition: transform 90ms linear;
  pointer-events: none;
}

.analysis-ring-head > span {
  position: absolute;
  top: -0.22rem;
  left: 50%;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid rgb(255 255 255 / 88%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 78%, #fff);
  box-shadow:
    0 0 0 0.3rem color-mix(in srgb, var(--primary) 18%, transparent),
    0 0 1.4rem 0.45rem color-mix(in srgb, var(--primary) 58%, transparent);
  transform: translateX(-50%);
  animation: analysis-head-breathe 1.05s ease-in-out infinite alternate;
}

@keyframes analysis-head-breathe {
  to {
    box-shadow:
      0 0 0 0.44rem color-mix(in srgb, var(--primary) 9%, transparent),
      0 0 1.8rem 0.62rem color-mix(in srgb, var(--primary) 72%, transparent);
    transform: translateX(-50%) scale(1.12);
  }
}

.analysis-status {
  width: min(100%, 24rem);
  min-height: 3.5rem;
  margin-top: var(--space-5);
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1px solid color-mix(in srgb, #fff 11%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 7%, transparent);
  box-shadow:
    inset 0 1px color-mix(in srgb, #fff 7%, transparent),
    0 14px 30px color-mix(in srgb, #000 18%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.analysis-status-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 72%, #fff);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent);
  animation: analysis-status-pulse 1.6s ease-out infinite;
}

.analysis-phase {
  min-height: 1.6em;
  color: color-mix(in srgb, #fff 86%, var(--primary));
  font-size: var(--text-sm);
  font-weight: 580;
  line-height: 1.35;
}

.analysis-status-copy {
  min-width: 0;
  text-align: left;
}

.analysis-status-label {
  display: block;
  margin-bottom: 0.12rem;
  color: color-mix(in srgb, var(--accent) 72%, #fff);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.analysis-phase-detail {
  min-height: 1.35em;
  margin-top: 0.12rem;
  overflow: hidden;
  color: color-mix(in srgb, #fff 54%, var(--primary));
  font-size: 0.68rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-phase-detail:empty,
.analysis-status-label:empty,
.analysis-stage-state:empty {
  display: none;
}

.analysis-stage-state {
  flex: none;
  padding: 0.33rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: var(--radius-pill);
  color: color-mix(in srgb, var(--accent) 72%, #fff);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 0.75rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.analysis-signal-rail {
  width: min(100%, 24rem);
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.34rem;
}

.analysis-signal {
  min-width: 0;
  padding: 0.5rem 0.25rem;
  display: grid;
  grid-template-columns: 0.76rem minmax(0, 1fr);
  align-items: center;
  gap: 0.24rem;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 0.75rem;
  color: rgb(255 255 255 / 37%);
  background: rgb(255 255 255 / 3%);
  transition:
    color 320ms var(--ease),
    border-color 320ms var(--ease),
    background 320ms var(--ease),
    box-shadow 320ms var(--ease),
    transform 320ms var(--ease);
}

.analysis-signal i {
  width: 0.76rem;
  height: 0.76rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 50%;
  color: transparent;
  font-size: 0.7rem;
  font-style: normal;
  line-height: 1;
  transition: inherit;
}

.analysis-signal b {
  overflow: hidden;
  font-size: 0.712rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-signal[data-state="active"] {
  border-color: rgb(112 169 255 / 42%);
  color: rgb(229 239 255 / 91%);
  background: rgb(112 169 255 / 10%);
  box-shadow: 0 0.5rem 1.5rem rgb(65 115 220 / 16%);
  transform: translateY(-0.1rem);
}

.analysis-signal[data-state="active"] i {
  border-color: rgb(112 169 255 / 72%);
  background: rgb(112 169 255 / 18%);
  box-shadow: 0 0 0.8rem rgb(112 169 255 / 40%);
  animation: analysis-signal-working 1s ease-in-out infinite alternate;
}

.analysis-signal[data-state="complete"] {
  border-color: rgb(123 222 173 / 28%);
  color: rgb(222 255 239 / 81%);
  background: rgb(74 190 135 / 8%);
}

.analysis-signal[data-state="complete"] i {
  border-color: rgb(123 222 173 / 55%);
  color: #071b14;
  background: #7bdead;
  box-shadow: 0 0 0.75rem rgb(123 222 173 / 22%);
}

@keyframes analysis-signal-working {
  to { transform: scale(0.72); opacity: 0.62; }
}

.analysis-complete-burst,
.analysis-done-check {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.analysis-complete-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.22rem;
  height: 0.9rem;
  border-radius: 1rem;
  background: linear-gradient(#fff, color-mix(in srgb, var(--accent) 75%, #fff));
  opacity: 0;
  transform: rotate(calc(var(--spark) * 30deg)) translateY(-2.8rem) scaleY(0.2);
  transform-origin: 50% 0;
}

.analysis-done-check {
  inset: auto 9% 9% auto;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 82%);
  border-radius: 50%;
  color: #071b14;
  background: #7bdead;
  box-shadow: 0 0 0 0.42rem rgb(123 222 173 / 10%), 0 0 2rem rgb(123 222 173 / 43%);
  font-size: 1.05rem;
  font-weight: 820;
  opacity: 0;
  transform: scale(0.4) rotate(-18deg);
}

.analysis-phase-enter {
  animation: analysis-phase-in 280ms var(--ease) both;
}

@keyframes analysis-phase-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes analysis-status-pulse {
  55%,
  100% {
    box-shadow: 0 0 0 0.55rem transparent;
  }
}

.analysis-progress[data-complete="true"] .analysis-ring {
  animation: analysis-complete 820ms var(--ease) both;
}

.analysis-progress-bump .analysis-ring {
  animation: analysis-phase-bump 430ms var(--ease) both;
}

.analysis-progress[data-complete="true"] .analysis-ring-head {
  opacity: 0;
  transition: opacity 160ms ease;
}

.analysis-progress[data-complete="true"] .analysis-complete-burst i {
  animation: analysis-spark 720ms cubic-bezier(0.15, 0.72, 0.24, 1) both;
  animation-delay: calc(var(--spark) * 12ms);
}

.analysis-progress[data-complete="true"] .analysis-done-check {
  animation: analysis-check-arrive 580ms cubic-bezier(0.14, 0.84, 0.28, 1.2) 240ms both;
}

.analysis[data-complete="true"] .analysis-status-dot {
  background: #7bdead;
  animation: none;
  box-shadow: 0 0 0 0.3rem rgb(123 222 173 / 10%);
}

.analysis[data-complete="true"] .analysis-stage-state {
  border-color: rgb(123 222 173 / 34%);
  color: #bdf3d8;
  background: rgb(123 222 173 / 9%);
}

@keyframes analysis-complete {
  0% { transform: scale(1); }
  55% {
    transform: scale(1.055);
  }
  100% { transform: scale(1); }
}

@keyframes analysis-phase-bump {
  45% { transform: scale(1.018); }
}

@keyframes analysis-spark {
  0% { opacity: 0; }
  20% { opacity: 0.92; }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--spark) * 30deg)) translateY(-6.4rem) scaleY(0.8);
  }
}

@keyframes analysis-check-arrive {
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* -------------------------------------------------------------- result */
.result-screen .result-reveal-item {
  opacity: 0;
  transform: translateY(12px);
}

.result-screen .motif.result-reveal-item {
  transform: scale(0.965);
  transform-origin: center top;
}

.result-screen[data-ready="true"] .result-reveal-item {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease), transform 620ms var(--ease);
  transition-delay: calc(var(--reveal-order, 0) * 90ms);
}

.result-screen[data-ready="true"] .motif svg {
  animation: result-motif-arrive 900ms var(--ease) both;
}

@keyframes result-motif-arrive {
  from {
    transform: scale(0.94);
    transform-origin: center;
  }
}

.result-kicker {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--muted);
}

.result-label {
  font-size: var(--display-sm);
  margin-top: var(--space-5);
}

.bars {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-4);
}

/* Four thin rows, about 120px in total, so the CTA still lands within two
   screenfuls while the calculation stays visible. */
.bars-compact {
  margin-top: var(--space-6);
  gap: 0.5rem;
}

.bars-compact .bar-row {
  gap: 0.2rem;
}

.bars-compact .bar-head {
  font-size: var(--text-xs);
}

.bars-compact .bar-track {
  height: 0.3125rem;
}

.bar-row {
  display: grid;
  gap: 0.4rem;
}

.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 580;
}

.bar-head .tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-strong);
}

.bar-track {
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  transition: width 700ms var(--ease);
}

.bar-row[data-lead="true"] .bar-fill {
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.bar-row[data-lead="true"] .bar-head {
  font-weight: 660;
}

.action-card {
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-md);
}

.action-card .eyebrow {
  color: var(--ink);
}

.action-card p {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.5;
  font-weight: 540;
}

.disclosures {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-2);
}

.disclosures details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.disclosures summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.disclosures summary::after {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--primary-soft) var(--plus) no-repeat center / 0.55rem;
  transition: transform var(--dur) var(--ease);
}

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

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

.disclosures p {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
}

/* A visual anchor above the headline. Every well-optimised onboarding in this
   category opens a step with art before it opens with words. There is no mascot
   here and inventing one would be a lie about the product, so the anchor is the
   concept's own mark drawn large on a soft field. */
.motif {
  position: relative;
  height: 8.5rem;
  margin: calc(var(--space-7) * -1) calc(var(--space-5) * -1) var(--space-6);
  overflow: hidden;
}

.motif svg {
  display: block;
  width: 100%;
  height: 100%;
}

.motif::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3.5rem;
  background: linear-gradient(180deg, transparent, var(--canvas));
}

@media (max-width: 22.5rem) {
  .motif {
    margin-inline: calc(var(--space-4) * -1);
  }
}

/* ------------------------------------------------------- interstitial */
/* Content at the top, action at the bottom edge of the first screenful, the way
   a well-built onboarding step is paced. */
.interstitial {
  /* Fills the first screenful below the sticky bar so the action lands in the
     thumb zone rather than floating in the middle of the page. */
  min-height: calc(100dvh - 3.5rem);
  display: flex;
  flex-direction: column;
}

.interstitial > .btn {
  margin-top: auto;
}

.interstitial h2 {
  font-size: var(--display-sm);
  margin-top: var(--space-4);
}

.interstitial .checklist {
  margin-top: var(--space-7);
}

.interstitial .checklist li {
  font-size: var(--text-md);
  line-height: 1.5;
}

/* --------------------------------------------------------------- offer */
.offer-title {
  font-size: var(--display-sm);
  margin-top: var(--space-4);
  hyphens: none;
}

.plans {
  margin-top: var(--space-7);
  display: grid;
  gap: 0.625rem;
}

.plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  row-gap: 0.4rem;
  align-items: baseline;
  width: 100%;
  min-height: 4.25rem;
  padding: var(--space-5);
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) linear, background var(--dur-fast) linear;
}

.plan[aria-checked="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
  box-shadow: var(--shadow-sm), 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.plan .dot {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 24%, transparent);
}

.plan[aria-checked="true"] .dot {
  border-color: var(--primary);
  background: var(--primary) var(--tick-light) no-repeat center / 0.7rem;
}


.plan-name {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 640;
}

.plan-price {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan-price span {
  font-size: var(--text-sm);
  font-weight: 560;
  letter-spacing: 0;
  color: var(--muted);
}

.plan-sub {
  grid-column: 2 / -1;
  grid-row: 3;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--muted);
}

.plan-sub b {
  font-weight: 620;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

.plan-badge {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  white-space: nowrap;
  padding: 0.14rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--ink) 82%, var(--accent));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.offer-cta {
  position: sticky;
  bottom: 0;
  margin: var(--space-7) calc(var(--space-5) * -1) 0;
  padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--canvas);
  box-shadow: 0 -1px 0 var(--line), 0 -18px 22px -18px color-mix(in srgb, var(--ink) 22%, transparent);
}

.offer-cta::before {
  content: "";
  position: absolute;
  inset: auto 0 100%;
  height: 2rem;
  background: linear-gradient(180deg, transparent, var(--canvas));
  pointer-events: none;
}

@media (max-width: 22.5rem) {
  .offer-cta {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }
}

.preview {
  margin-top: var(--space-7);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.preview-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.preview-list li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.preview-list li:last-child {
  border-bottom: 0;
}

.preview-list .when {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-strong);
}

.preview-list .what {
  font-size: var(--text-base);
  line-height: 1.45;
}

.includes {
  margin-top: var(--space-7);
}

.includes h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------- dimension grid */
.dimension-grid {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dimension-grid li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem var(--space-5);
  background: var(--surface);
  font-size: var(--text-base);
  font-weight: 560;
}

.dimension-grid .idx {
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------- order review */
/* The order review reads in time order down a single rail, so every label
   shares one left edge and every value shares another. */
.timeline {
  margin-top: var(--space-6);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.timeline ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline li {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-7);
}

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

.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--primary);
}

.timeline li:first-child::before {
  background: var(--primary);
}

.timeline li::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 1.3rem;
  bottom: 0.1rem;
  width: 2px;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}

.timeline li:last-child::after {
  display: none;
}

.timeline .when {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary-strong);
}

.timeline .what {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-md);
  font-weight: 660;
  letter-spacing: -0.015em;
}

.timeline .detail {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
}

.ack {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) linear;
}

.ack[data-checked="true"] {
  border-color: var(--primary);
}

.ack input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ack .box {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
  border-radius: 0.4rem;
  border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent);
  transition: background var(--dur-fast) linear, border-color var(--dur-fast) linear;
}

.ack[data-checked="true"] .box {
  border-color: var(--primary);
  background: var(--primary) var(--tick-light) no-repeat center / 0.85rem;
}

.ack span.text {
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* -------------------------------------------------------------- states */
.state {
  min-height: 66vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.state h2 {
  font-size: var(--display-sm);
  margin-top: var(--space-4);
}

.spinner {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-top-color: var(--primary);
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Inline spinner for buttons that wait on the checkout API. Inherits the
   button's text colour so it works on any funnel's action colour. */
.button-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.55em;
  vertical-align: -0.12em;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentcolor 30%, transparent);
  border-top-color: currentcolor;
  animation: spin 700ms linear infinite;
}

.receipt {
  margin-top: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.receipt dl {
  margin: 0;
  display: grid;
  gap: 0;
}

.receipt dl > div {
  display: block;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}

.receipt dl > div:last-child {
  border-bottom: 0;
}

.receipt dt {
  color: var(--muted);
  font-size: var(--text-sm);
}

.receipt dd {
  margin: 0.15rem 0 0;
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.receipt .ref-block {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.receipt .ref {
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------- safety exit */
.safety {
  padding-top: var(--space-7);
}

.safety h2 {
  font-size: var(--display-sm);
  margin-top: var(--space-4);
}

.safety-resources {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.safety-resources li a,
.safety-resources li .static {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.option > span:last-child,
.plan-name,
.checklist li,
.rowlist p {
  min-width: 0;
}

.safety-resources strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 640;
}

.safety-resources span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.45;
}

.quick-exit {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.25rem);
  right: var(--space-4);
  z-index: 70;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--text-sm);
  font-weight: 660;
  cursor: pointer;
  box-shadow: none;
}

/* ------------------------------------------------------------- banners */
.banner {
  background: #fff5da;
  border-bottom: 1px solid #e6cb84;
  color: #6b4e11;
  font-size: var(--text-xs);
  font-weight: 640;
  text-align: center;
  padding: 0.6rem var(--space-5);
  line-height: 1.4;
}

.inline-alert {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: #fff5da;
  border: 1px solid #e6cb84;
  color: #6b4e11;
  font-size: var(--text-sm);
  line-height: 1.5;
}

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

@media (max-width: 26.875rem) {
  .screen {
    padding-top: var(--space-6);
  }

  .question-prompt {
    max-width: 22rem;
    line-height: 1.12;
  }

  .question-helper {
    margin-top: var(--space-3);
    line-height: 1.45;
  }

  .options {
    margin-top: var(--space-6);
    gap: var(--space-2);
  }

  .option {
    min-height: 3.5rem;
    padding: 0.8rem var(--space-4);
    line-height: 1.35;
  }

  .answer-feedback {
    margin-top: var(--space-4);
    padding: var(--space-4);
    line-height: 1.45;
  }
}

/* The local review canvas loads every authored route side by side. Review
   frames must hold one deterministic resting state without changing funnel
   progress, stealing focus, or leaving an entrance animation half-painted. */
html[data-review-mode="true"]:not([data-review-motion="true"]) *,
html[data-review-mode="true"]:not([data-review-motion="true"]) *::before,
html[data-review-mode="true"]:not([data-review-motion="true"]) *::after {
  scroll-behavior: auto !important;
  transition: none !important;
  animation-delay: 0s !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}

/* A document that opens directly on a flow route (deep link, session restore,
   review artboard) renders its first screen without entrance motion. iOS 18
   Safari otherwise composites the load-time animation at its from-state and
   the screen stays invisible even after the animation reports finished. Zero
   duration is not enough; the animation must not exist on that first paint. */
html[data-restore-render="true"] .screen,
html[data-restore-render="true"] .screen *,
html[data-restore-render="true"] .screen *::before,
html[data-restore-render="true"] .screen *::after {
  animation: none !important;
}