/* ============================================================================
   Landing page — implementation of "Landing Page v2" from Claude Design.

   The design was authored in Claude Design's own format: inline styles,
   `style-hover` / `style-focus` attributes, `{{ }}` interpolation, `<sc-if>`
   and an `<image-slot>` custom element, all driven by a React runtime in
   support.js. None of that ships. It is converted here into plain CSS classes
   and plain HTML, so the page has no framework, no build step, and no runtime.

   Fonts are self-hosted rather than linked from Google, so a visitor's browser
   makes no third-party request to load the page. The design's font stack is
   preserved exactly: Alexandria for display, IBM Plex Sans Arabic for body,
   IBM Plex Sans for figures, IBM Plex Mono for technical labels.
   ========================================================================= */

/* ---- fonts ------------------------------------------------------------- */

@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/alexandria-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/alexandria-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/alexandria-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/alexandria-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/alexandria-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/alexandria-latin-700.woff2') format('woff2'); }

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/plex-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/plex-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/plex-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/plex-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/plex-sans-700.woff2') format('woff2'); }

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/plex-mono-500.woff2') format('woff2'); }

/* ---- design tokens ----------------------------------------------------- */

:root {
  --bg: #FBFAF7;
  --ink: #0F1012;
  --ink-2: #45453F;
  --ink-3: #5F5F5A;
  --surface: #FFFFFF;

  --line: #E6E4DD;
  --line-input: #E0DED7;
  --line-soft: #EFEEE9;
  --line-dashed: #D5D3CB;

  --blue: #2340FF;
  --blue-hover: #1A2FC4;
  --blue-lift: #4159FF;
  --blue-tint: #E9EDFF;
  --blue-panel: #F3F4FF;
  --blue-panel-line: #E4E6FF;
  --blue-chip-line: #D7DBFF;

  --teal: #00C2A8;
  --teal-deep: #00A37A;
  --teal-text: #00795C;
  --teal-tint: #E0F7F3;
  --teal-line: #B6E6D8;
  --teal-ink: #06342C;

  --orange: #FF5C39;
  --orange-tint: #FFEDE8;
  --amber: #F5A524;
  --amber-ink: #3D2800;
  --red: #D93A2B;

  --font-display: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  --font-num: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --shell: 1120px;
  --pad: 40px;
}

/* ---- base -------------------------------------------------------------- */

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

/* The decorative glows in the hero are deliberately positioned outside the
   layout, so something has to clip them. Setting overflow on body alone is not
   enough: when html's overflow is visible the value propagates to the viewport
   and body stops clipping its own children — which is why the page could be
   dragged sideways on a phone. Clip at both levels, and again on the hero
   itself so the glows never widen the document. */
html { overflow-x: clip; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--bg);
  /* The faint 34px graph-paper grid the design lays under everything. */
  background-image:
    linear-gradient(rgba(15, 16, 18, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 16, 18, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center top;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* A class that sets `display` beats the browser's rule for [hidden], so the
   conditionally-revealed fields would show anyway. This has to win. */
[hidden] { display: none !important; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.num { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-3); }

/* Figures inside RTL prose keep their own direction, or "12%" and dates
   render reversed. Same isolation the report uses. */
bdi { unicode-bidi: isolate; }

/* ---- animation --------------------------------------------------------- */

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(3deg); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(35, 64, 255, 0.28); }
  70% { box-shadow: 0 0 0 14px rgba(35, 64, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(35, 64, 255, 0); }
}
@keyframes needle { from { transform: rotate(0deg); } }

.reveal { animation: fadeUp 0.6s ease both; }

/* ---- header ------------------------------------------------------------ */

.header { position: sticky; top: 0; z-index: 40; padding: 12px 0; }

.header__inner {
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
}

.brand__mark {
  display: inline-flex; align-items: center; flex: none;
}

.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }

.header__actions { display: flex; align-items: center; gap: 8px; }


.lang {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; overflow: hidden; font-size: 14px; font-weight: 600;
}
.lang__current { padding: 12px 16px; background: var(--ink); color: var(--bg); }
.lang__other { padding: 12px 16px; color: var(--ink-3); }
.lang__other:hover { color: var(--ink); }

/* ---- hero -------------------------------------------------------------- */

.hero {
  position: relative; overflow: clip;
  max-width: var(--shell); margin-inline: auto;
  padding: 48px var(--pad) 72px;
}

.hero__glow {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.hero__glow--blue {
  top: -40px; inset-inline-start: -120px; width: 460px; height: 460px;
  background: radial-gradient(circle at 30% 30%, rgba(35, 64, 255, 0.14), rgba(35, 64, 255, 0) 68%);
  animation: floaty 11s ease-in-out infinite;
}
.hero__glow--teal {
  top: 220px; inset-inline-end: -120px; width: 320px; height: 320px;
  background: radial-gradient(circle at 60% 40%, rgba(0, 194, 168, 0.16), rgba(0, 194, 168, 0) 70%);
  animation: floaty 14s ease-in-out infinite reverse;
}

.hero__grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 452px);
  gap: 52px; align-items: start;
}

.hero__copy { display: flex; flex-direction: column; gap: 22px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 500;
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); display: block; }

.hero h1 { font-size: 54px; line-height: 1.24; text-wrap: pretty; }

/* The hand-drawn underline under the last phrase of the headline. */
.underline { position: relative; display: inline-block; }
.underline > span { position: relative; z-index: 1; }
.underline > svg {
  position: absolute; inset-inline: -6px; bottom: -14px;
  width: calc(100% + 12px); height: 12px; z-index: 0;
}

.lede { margin: 0; font-size: 18px; line-height: 1.8; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }

.stats { display: flex; flex-wrap: wrap; gap: 12px; }
.stat {
  flex: 1; min-width: 150px; border-radius: 20px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line);
}
.stat--dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.stat__value { font-family: var(--font-num); font-size: 40px; font-weight: 700; line-height: 1; color: var(--blue); }
.stat--dark .stat__value { color: var(--bg); }
.stat__label { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.stat--dark .stat__label { color: rgba(251, 250, 247, 0.72); }

/* ---- order card -------------------------------------------------------- */

.order { position: relative; }
.order::before {
  content: ''; position: absolute; inset: -14px; border-radius: 32px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.4);
}

.order__card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 24px; box-shadow: 0 18px 40px rgba(15, 16, 18, 0.07); overflow: hidden;
}

.order__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; background: var(--blue-panel); border-bottom: 1px solid var(--blue-panel-line);
}
.order__title { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.order__chip {
  font-size: 12px; font-weight: 600; color: var(--blue); background: var(--surface);
  border: 1px solid var(--blue-chip-line); border-radius: 999px; padding: 4px 12px;
}

.order__body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.input, .select {
  font-family: inherit; font-size: 16px; padding: 14px 16px; width: 100%;
  border: 1px solid var(--line-input); border-radius: 14px;
  background: var(--bg); color: var(--ink); outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.select { padding-inline: 12px; }
.input:focus, .select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35, 64, 255, 0.12);
}
.input--ltr { font-family: var(--font-num); direction: ltr; text-align: start; }
.input[aria-invalid='true'] { border-color: var(--red); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 600; cursor: pointer; text-align: center;
  border-radius: 999px; border: none; transition: background 0.18s ease, transform 0.18s ease;
}
.btn--primary { background: var(--blue); color: #fff; padding: 17px 32px; font-size: 17px; width: 100%; }
.btn--primary:hover { background: var(--blue-hover); color: #fff; transform: translateY(-2px); }
.btn--primary:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn--pulse { animation: pulseRing 2.6s ease-out infinite; }
.btn--ghost {
  border: 1px solid var(--line-input); background: transparent; color: var(--ink);
  padding: 15px 24px; font-size: 15px; width: 100%;
}
.btn--ghost:hover { border-color: var(--ink); background: var(--bg); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--bg); min-height: 44px; padding-inline: 24px; font-size: 15px; }
.btn--dark:hover { color: var(--bg); transform: translateY(-2px); }
.btn--outline {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  min-height: 44px; padding-inline: 24px; font-size: 15px;
}
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }

.order__fineprint { text-align: center; font-size: 13px; color: var(--ink-3); }
.order__error { margin: 0; font-size: 14px; color: var(--red); min-height: 1.2em; }

/* ---- marquee ----------------------------------------------------------- */

.marquee {
  overflow: hidden; background: var(--ink); border-radius: 999px;
  margin: 0 auto 72px; max-width: 1040px;
  margin-inline: max(var(--pad), calc((100% - 1040px) / 2));
}
.marquee__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee__group {
  display: flex; align-items: center; gap: 34px;
  padding-block: 14px; padding-inline-end: 34px;
  font-family: var(--font-mono); font-size: 13px; color: var(--bg); white-space: nowrap;
}
.marquee__sep--teal { color: var(--teal); }
.marquee__sep--orange { color: var(--orange); }
.marquee__sep--amber { color: var(--amber); }

/* ---- sections ---------------------------------------------------------- */

.section { max-width: var(--shell); margin-inline: auto; padding: 0 var(--pad) 80px; }
.section__title { font-size: 30px; margin-bottom: 8px; }
.section__sub { margin: 0 0 32px; color: var(--ink-3); font-size: 16px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 16, 18, 0.08); }
.card__icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.card__icon--blue { background: var(--blue-tint); }
.card__icon--teal { background: var(--teal-tint); }
.card__icon--orange { background: var(--orange-tint); }
.card__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.card__body { font-size: 15px; line-height: 1.8; color: var(--ink-2); }

/* ---- sample report preview --------------------------------------------- */

.preview {
  margin-top: 24px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 28px; overflow: hidden;
}
.preview__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--ink-3);
}
.preview__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); }

.gaugebox {
  padding: 34px 28px; display: flex; flex-direction: column; align-items: center; gap: 18px;
  background: var(--blue-panel); border-inline-end: 1px solid var(--blue-panel-line);
}
.gauge { position: relative; width: 100%; max-width: 240px; }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge__needle {
  transform-origin: 120px 120px;
  animation: needle 1.1s cubic-bezier(0.34, 1.24, 0.42, 1) both;
}
.gauge__score {
  position: absolute; inset-inline: 0; top: 34%; text-align: center;
  font-family: var(--font-num); font-weight: 700; font-size: 56px; line-height: 1;
  color: var(--ink); pointer-events: none;
}
.gauge__caption { font-family: var(--font-body); font-size: 13px; fill: var(--ink-3); }

.achievable {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--teal-line); border-radius: 999px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--teal-text);
}
.achievable__ring {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700;
}

.verdict { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.verdict__meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.verdict__redacted { width: 62%; height: 26px; border-radius: 8px; background: var(--line-soft); filter: blur(4px); }
.verdict__line { font-size: 16px; line-height: 1.85; color: var(--ink-2); }
.verdict__figure { font-family: var(--font-num); font-weight: 700; color: var(--ink); }
.verdict__figure--bad { color: var(--red); }
.verdict__quote {
  background: var(--ink); color: var(--bg); border-radius: 20px; padding: 18px 22px;
  font-family: var(--font-display); font-size: 17px; line-height: 1.6;
}
.verdict__next { border: 1.5px solid var(--blue); border-radius: 16px; padding: 14px 18px; font-size: 15px; }
.verdict__next b { color: var(--blue); }

/* ---- reserved sample slots --------------------------------------------- */

.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.pill-note {
  font-size: 13px; color: var(--ink-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 720px; }
.slot { border: 1.5px dashed var(--line-dashed); border-radius: 22px; background: var(--surface); padding: 16px; }
.slot__label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-bottom: 10px; }
.slot__box {
  height: 300px; border-radius: 14px; background: var(--bg);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; font-size: 14px; color: var(--ink-3);
}
.section__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---- score breakdown --------------------------------------------------- */

.scorecard { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 30px; }
.bar { display: flex; gap: 6px; height: 52px; margin-bottom: 26px; }
.bar__seg {
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: 16px;
  transform-origin: right center; animation: grow 0.7s cubic-bezier(0.3, 1, 0.4, 1) both;
}
[dir='ltr'] .bar__seg { transform-origin: left center; }
.bar__seg--1 { flex: 3; background: var(--blue); color: #fff; }
.bar__seg--2 { flex: 2; background: var(--teal); color: var(--teal-ink); animation-delay: 0.08s; }
.bar__seg--3 { flex: 2; background: var(--amber); color: var(--amber-ink); animation-delay: 0.16s; }
.bar__seg--4 { flex: 2; background: var(--orange); color: #fff; animation-delay: 0.24s; }
.bar__seg--5 { flex: 1; background: var(--ink); color: var(--bg); animation-delay: 0.32s; }

.legend { display: flex; flex-direction: column; gap: 2px; }
.legend__row {
  display: flex; align-items: center; gap: 14px;
  padding-block: 14px; border-bottom: 1px solid var(--line-soft);
}
.legend__row:last-child { border-bottom: none; }
.legend__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.legend__name { flex: 1; font-size: 16px; }
.legend__points { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.scorecard__note { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

/* ---- pricing ----------------------------------------------------------- */

.pricing {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 32px; overflow: hidden;
}
.pricing__features { padding: 36px; }
.pricing__features h2 { font-size: 28px; margin-bottom: 22px; }
.pricing__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pricing__list li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.pricing__tick { color: var(--teal-deep); font-weight: 700; }

.pricing__panel {
  padding: 36px; background: var(--ink); color: var(--bg);
  display: flex; flex-direction: column; gap: 20px;
}
.price { display: flex; align-items: baseline; gap: 8px; }
.price__amount { font-family: var(--font-num); font-size: 56px; font-weight: 700; line-height: 1; }
.price__currency { font-size: 18px; font-weight: 600; }
.price__alt { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: rgba(251, 250, 247, 0.6); }

.addon {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(251, 250, 247, 0.07); border: 1px solid rgba(251, 250, 247, 0.16);
  border-radius: 16px; padding: 14px 16px; cursor: pointer; font-size: 14px; line-height: 1.7;
}
.addon input { width: 18px; height: 18px; accent-color: var(--teal); margin-top: 2px; flex: none; }
.addon__was { color: rgba(251, 250, 247, 0.55); text-decoration: line-through; white-space: nowrap; }

.pricing__panel .btn--primary:hover { background: var(--blue-lift); }

.paylogos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paylogo {
  border: 1px solid rgba(251, 250, 247, 0.2); border-radius: 999px; padding: 6px 13px;
  font-family: var(--font-num); font-size: 12px; color: rgba(251, 250, 247, 0.75);
}
.paylogo--mada {
  background: var(--bg); color: var(--ink); border-color: var(--bg);
  padding: 7px 16px; font-size: 13px; font-weight: 700;
}
.pricing__note { font-size: 13px; color: rgba(251, 250, 247, 0.7); line-height: 1.7; }

/* The refund promise. Stated plainly and given its own line, because it is
   the thing that makes a first purchase from an unknown seller feel safe. */
.pricing__guarantee {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(251, 250, 247, 0.16);
  font-size: 13.5px; font-weight: 600; color: rgba(251, 250, 247, 0.92);
}

/* The launch counter. Hidden until the count arrives — see landing.js. */
.launch {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0 4px; padding: 9px 13px;
  border: 1px solid rgba(251, 250, 247, 0.2); border-radius: 999px;
  font-size: 13.5px; color: rgba(251, 250, 247, 0.92);
}
.launch[hidden] { display: none; }
.launch strong { font-variant-numeric: tabular-nums; }
.launch__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #38d39f; flex: none;
  box-shadow: 0 0 0 4px rgba(56, 211, 159, 0.18);
}

/* ---- faq --------------------------------------------------------------- */

.faq { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 4px 22px; }
.faq summary {
  cursor: pointer; padding-block: 18px; font-size: 17px; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq__toggle { color: var(--blue); }
.faq details[open] .faq__toggle { transform: rotate(45deg); }
.faq__answer {
  padding-bottom: 18px; font-size: 15px; line-height: 1.85;
  color: var(--ink-2); max-width: 62ch; margin: 0;
}

/* ---- footer ------------------------------------------------------------ */

.footer {
  background: var(--ink); color: rgba(251, 250, 247, 0.7);
  border-radius: 40px 40px 0 0; padding: 48px var(--pad) 110px;
}
.footer__inner { max-width: var(--shell); margin-inline: auto; display: flex; flex-direction: column; gap: 20px; }
.footer__brand { display: flex; align-items: center; gap: 10px; color: var(--bg); }
.footer__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
.footer__privacy { font-size: 13px; color: rgba(251, 250, 247, 0.5); }
.footer__links {
  display: flex; gap: 20px; font-size: 12px; padding-top: 16px;
  border-top: 1px solid rgba(251, 250, 247, 0.12);
}
.footer__links a { color: rgba(251, 250, 247, 0.5); }
.footer__links a:hover { color: var(--bg); }

/* ---- sticky call to action --------------------------------------------- */

.stickybar { position: sticky; bottom: 12px; z-index: 50; height: 0; }
.stickybar__inner {
  position: absolute; inset-inline: 12px; bottom: 0;
  background: rgba(15, 16, 18, 0.97); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 10px 12px 10px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 12px 30px rgba(15, 16, 18, 0.24);
}
.stickybar__label { color: var(--bg); font-size: 14px; font-weight: 600; }
.stickybar__cta {
  background: var(--blue); color: #fff; border-radius: 999px;
  padding-inline: 24px; min-height: 44px; display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.stickybar__cta:hover { background: var(--blue-lift); color: #fff; }

/* ---- mini-check result -------------------------------------------------- */

.result { margin-top: 4px; }
.result[hidden] { display: none; }
.result__verdict { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.result__verdict--present { color: var(--teal-text); }
.result__verdict--absent { color: var(--red); }
.bubble {
  margin: 0 0 12px; padding: 14px 16px; background: var(--bg);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--line);
  border-radius: 14px;
}
.bubble--present { border-inline-start-color: var(--teal-deep); }
.bubble--absent { border-inline-start-color: var(--red); }
.bubble__question { font-size: 13px; color: var(--ink-3); margin: 0 0 8px; }
.bubble__answer { margin: 0; font-size: 15px; line-height: 1.75; }
.bubble__source { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 1040px) {
  :root { --pad: 20px; }
  .hero__grid, .preview__grid, .pricing { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .stat__value, .price__amount { font-size: 44px; }
  .gaugebox { border-inline-end: none; border-bottom: 1px solid var(--blue-panel-line); }
  .slots { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .field--pair { grid-template-columns: 1fr; }
  .header__inner { flex-wrap: wrap; }
  .footer { padding-bottom: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- legal pages ------------------------------------------------------- *
   Terms, refund policy and privacy policy. Plain prose on the same tokens as
   the landing page, so the fonts and colours are already loaded and cached.
   Paddle requires these to be reachable from site navigation before a seller
   account is approved; they are linked from the footer of every page.
   ------------------------------------------------------------------------ */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--pad) 88px;
}

.legal__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
}

.legal__updated {
  font-size: 14px;
  color: var(--ink-3);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}

.legal h2 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink);
  margin: 40px 0 12px;
}

.legal h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 8px;
}

.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}

.legal p { margin: 0 0 16px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-inline-start: 22px; }
.legal li { margin-bottom: 8px; }

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

.legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--blue-hover); }

.legal__note {
  background: var(--blue-panel);
  border: 1px solid var(--blue-panel-line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 24px;
}
.legal__note p:last-child { margin-bottom: 0; }

.legal__contact {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: var(--surface);
  margin-top: 32px;
}
.legal__contact p:last-child { margin-bottom: 0; }

.legal__back {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--ink-3);
  text-decoration: none;
}
.legal__back:hover { color: var(--ink); }

@media (max-width: 640px) {
  .legal { padding: 36px 20px 64px; }
}

/* ---- what actually happens ------------------------------------------ *
 * Four numbered steps. The numbers are real sequence — measurement cannot
 * precede the order, writing cannot precede measurement — so they earn
 * their place rather than decorating it.
 * -------------------------------------------------------------------- */
.how {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.how__step {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px;
}
.how__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--blue); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  margin-bottom: 12px;
}
.how__title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.4; }
.how__body { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
@media (max-width: 720px) { .how { grid-template-columns: 1fr; } }

/* ---- checkout: form + summary rail ---------------------------------- */
.ck {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px; align-items: start; max-width: 1000px;
}
.ck .order__card { margin: 0; }
.ck__group { padding-bottom: 6px; }
.ck__grouphead {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  margin: 4px 0 14px;
}
.ck__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--blue); color: #fff; font-size: 13px; flex: none;
}
.ck__summary {
  position: sticky; top: 86px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px;
}
.ck__sumtitle { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.ck__sumsub { font-size: 13px; color: var(--ink-3); margin: 2px 0 14px; }
.ck__list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ck__list li { font-size: 13.5px; color: var(--ink-2); padding-inline-start: 20px; position: relative; line-height: 1.6; }
.ck__list li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: #00A37A; font-weight: 700; }
.ck__price { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.ck__pricerow { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.ck__pricerow--total { font-weight: 700; font-size: 16px; color: var(--ink); border-top: 1px dashed var(--line); padding-top: 9px; margin-top: 2px; }
.ck__guarantee { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
@media (max-width: 860px) {
  .ck { grid-template-columns: 1fr; }
  .ck__summary { position: static; order: 2; }
}

/* ---- sample report facts -------------------------------------------- */
.samplefacts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
.samplefact { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.samplefact__v { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.samplefact__k { margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 720px) { .samplefacts { grid-template-columns: repeat(2, minmax(0,1fr)); } }