:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.4rem, 1rem + 4vw, 4.5rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --color-bg: #f5f3fb;
  --color-surface: #ffffff;
  --color-surface-2: #ebe6fb;
  --color-surface-dark: #2a1468;
  --color-border: #e4def2;
  --color-text: #1f1640;
  --color-text-muted: #5c5574;
  --color-text-inverse: #ffffff;
  --color-primary: #5a2fc2;
  --color-primary-hover: #4723a3;
  --color-primary-soft: #ece6ff;
  --color-mint: #2ed3a8;
  --color-mint-ink: #0e7a5f;
  --color-amber: #c2255c;
  --color-amber-soft: #fde7ef;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(36,27,56,.06);
  --shadow-lg: 0 24px 60px -24px rgba(58,28,140,.28);

  --font-display: 'Newsreader', Georgia, serif;
  --color-accent: #ff5fa2;
  --color-cyan: #39c9e0;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --wrap: 1180px;
}

body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; }
.wrap { width: min(100% - 2 * var(--space-5), var(--wrap)); margin-inline: auto; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; color: var(--color-text); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; }
p { text-wrap: pretty; }
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-4); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: var(--space-2); background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 100; }
.skip:focus { left: var(--space-2); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-3) var(--space-6); border-radius: 999px; background: var(--color-primary); color: var(--color-text-inverse); font-weight: 600; font-size: var(--text-sm); text-decoration: none; border: 1px solid var(--color-primary); transition: background .2s, transform .2s; cursor: pointer; }
.btn:hover { background: var(--color-primary-hover); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-primary-soft); }
.btn-sm { min-height: 44px; padding: var(--space-2) var(--space-5); }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; padding-top: var(--space-3); }
.site-header .header-inner { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border: 1px solid var(--color-border); border-radius: 999px; padding-inline: var(--space-3) var(--space-2); box-shadow: 0 6px 24px -14px rgba(29,25,48,.25); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); text-decoration: none; font-family: var(--font-body); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand span { color: var(--color-text); }
.nav-links { display: none; gap: var(--space-8); list-style: none; padding: 0; margin: 0; }
.nav-links a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.nav-links a:hover { color: var(--color-text); }
@media (min-width: 860px) { .nav-links { display: flex; } }

/* hero */
.hero { padding-block: clamp(var(--space-10), 6vw, var(--space-20)) clamp(var(--space-12), 7vw, var(--space-24)); }
.hero-grid { display: grid; gap: var(--space-10); align-items: center; }
.hero h1 { font-size: clamp(2.75rem, 1.2rem + 5.5vw, 5.75rem); line-height: 1; margin-bottom: var(--space-5); max-width: 10ch; }
.lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 44ch; line-height: 1.5; margin-bottom: var(--space-8); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.hero-points { list-style: none; padding: 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.hero-points li { display: flex; gap: var(--space-3); align-items: flex-start; }
.hero-points svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--color-primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-media { margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.4; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.hero { padding-top: var(--space-6); }
@media (min-width: 960px) {
  .hero-grid { position: relative; display: block; min-height: 640px; border-radius: 36px; overflow: hidden; background: #e8e5f6; }
  .hero-media { position: absolute; top: 0; bottom: 0; right: 0; left: max(36%, 470px); z-index: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .hero-media::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 18%; background: linear-gradient(90deg, #e8e5f6, transparent); z-index: 1; }
  .hero-media img { object-position: 85% 50%; }
  .hero-copy { position: relative; z-index: 2; max-width: 540px; padding: var(--space-16) var(--space-12); }
}


/* who */
.who { background: var(--color-surface-dark); color: var(--color-text-inverse); padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
.who-grid { display: grid; gap: var(--space-10); }
.who h2 { font-size: var(--text-xl); max-width: 20ch; }
.who-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: w; }
.who-list li { counter-increment: w; padding-block: var(--space-6); border-top: 1px solid oklch(1 0 0 / 0.14); display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--space-4); }
.who-list li::before { content: "0" counter(w); font-family: var(--font-body); font-weight: 700; color: #2ed3a8; font-size: var(--text-sm); padding-top: 3px; grid-row: span 2; }
.who-list h3 { margin-bottom: var(--space-2); }
.who-list p { color: #d9d2ea; max-width: 52ch; }
@media (min-width: 960px) { .who-grid { grid-template-columns: 1fr 1.4fr; gap: var(--space-16); } }

/* how / phone flow */
.how { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.section-head { max-width: 640px; margin-bottom: var(--space-12); }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head p:not(.eyebrow) { color: var(--color-text-muted); }
.flow { display: grid; gap: var(--space-10); align-items: start; }
.flow-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.flow-steps button { width: 100%; display: flex; gap: var(--space-4); align-items: flex-start; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radius-lg); padding: var(--space-4); cursor: pointer; color: inherit; font: inherit; transition: background .2s, border-color .2s; }
.flow-steps button:hover { background: var(--color-surface); }
.flow-steps button[aria-selected="true"] { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.flow-steps .n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: var(--text-sm); border: 1.5px solid var(--color-border); color: var(--color-text-muted); }
.flow-steps button[aria-selected="true"] .n { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.flow-steps strong { display: block; font-weight: 600; font-size: var(--text-base); }
.flow-steps small { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }
@media (min-width: 900px) { .flow { grid-template-columns: 1fr 380px; gap: var(--space-16); } .flow-steps { gap: var(--space-1); } }

.phone { justify-self: center; width: min(100%, 340px); aspect-ratio: 9 / 18.5; background: #1c1430; border-radius: 46px; padding: 12px; box-shadow: var(--shadow-lg); position: sticky; top: 96px; }
.phone-screen { height: 100%; background: var(--color-surface); border-radius: 36px; overflow: hidden; padding: var(--space-5) var(--space-5) var(--space-6); display: flex; flex-direction: column; font-size: var(--text-sm); }
.ps-bar { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-family: var(--font-body); color: var(--color-primary); padding: var(--space-2) var(--space-1) var(--space-4); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); }
.ps-kit { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: var(--color-text-muted); }
.ps-panel { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; animation: fade .35s ease; }
.ps-panel[hidden] { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ps-step { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.ps-panel h3 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.ps-note { color: var(--color-text-muted); font-size: var(--text-xs); }
.ps-btn { margin-top: auto; background: var(--color-primary); color: #fff; text-align: center; padding: var(--space-3); border-radius: 999px; font-weight: 600; }
.ps-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.ps-field { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: #fff; }
.ps-check { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--color-border); flex: none; position: relative; }
.box.on { background: var(--color-primary); border-color: var(--color-primary); }
.box.on::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ps-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; background: #fff; }
.ps-seg span { text-align: center; padding: var(--space-2); border-radius: 999px; color: var(--color-text-muted); }
.ps-seg .on { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.viewfinder { position: relative; aspect-ratio: 1; margin: var(--space-2) var(--space-6); border-radius: var(--radius-lg); background: #2a1f47; display: grid; place-items: center; }
.viewfinder span { position: absolute; inset: 14%; border: 3px solid #2ed3a8; border-radius: 14px; clip-path: polygon(0 0,30% 0,30% 6%,6% 6%,6% 30%,0 30%,0 70%,6% 70%,6% 94%,30% 94%,30% 100%,70% 100%,70% 94%,94% 94%,94% 70%,100% 70%,100% 30%,94% 30%,94% 6%,70% 6%,70% 0,100% 0,100% 100%,0 100%); }
.qr { width: 46%; aspect-ratio: 1; background: conic-gradient(from 90deg at 2px 2px, #fff 90deg, #0000 0) 0 0 / 12% 12%, #f7f5fb; border-radius: 6px; opacity: .92; mask: repeating-linear-gradient(90deg, #000 0 8%, #0006 8% 13%), repeating-linear-gradient(0deg, #000 0 11%, #0008 11% 15%); }
.video { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #2b3a31; aspect-ratio: 16 / 10; }
.video-art { width: 100%; height: 100%; }
.play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; background: oklch(1 0 0 / 0.9); }
.play::after { content: ""; position: absolute; left: 19px; top: 14px; border-left: 15px solid var(--color-primary); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.vbar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 4px; border-radius: 4px; background: oklch(1 0 0 / 0.3); }
.vbar i { display: block; height: 100%; background: #fff; border-radius: 4px; }
.ps-tips { padding-left: var(--space-5); display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.photo { position: relative; border-radius: var(--radius-lg); background: #ece6f4; aspect-ratio: 16 / 10; overflow: hidden; }
.ruler { position: absolute; left: 8%; right: 8%; bottom: 18%; height: 22%; background: #f7f6f2 repeating-linear-gradient(90deg, #241b38 0 1px, transparent 1px 8%) bottom / 100% 40% no-repeat; border-radius: 4px; box-shadow: var(--shadow-sm); }
.hairs { position: absolute; left: 12%; width: 62%; top: 30%; height: 14%; background: repeating-linear-gradient(0deg, #3a2e22 0 1px, transparent 1px 3px); border-radius: 2px 40px 40px 2px; }
.hairs::before { content: "ROOT"; position: absolute; left: -2px; top: -20px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--color-primary); }
.checks { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.checks li { display: flex; gap: var(--space-2); align-items: center; }
.checks .ok::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; flex: none; }
.track { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: 0; }
.track li { position: relative; padding: 0 0 var(--space-5) var(--space-8); }
.track li::before { content: ""; position: absolute; left: 6px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-surface); }
.track li::after { content: ""; position: absolute; left: 11px; top: 18px; bottom: 0; width: 2px; background: var(--color-border); }
.track li:last-child::after { display: none; }
.track .done::before { background: var(--color-primary); border-color: var(--color-primary); }
.track .done::after { background: var(--color-primary); }
.track .now::before { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.track strong { display: block; font-weight: 600; }
.track small { color: var(--color-text-muted); font-size: var(--text-xs); }
.ps-result { background: var(--color-primary-soft); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-2); }
.badge { justify-self: start; background: var(--color-primary); color: #fff; font-size: var(--text-xs); font-weight: 600; padding: 2px var(--space-3); border-radius: 999px; }

/* results */
.results { background: var(--color-surface-2); padding-block: clamp(var(--space-16), 9vw, var(--space-24)); }
.results-grid { display: grid; gap: var(--space-10); align-items: start; }
.results-copy h2 { margin-bottom: var(--space-5); }
.results-copy p:not(.eyebrow) { color: var(--color-text-muted); margin-bottom: var(--space-4); max-width: 52ch; }
.toggle { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.toggle button { min-height: 44px; padding: var(--space-2) var(--space-5); border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; color: var(--color-text); }
.toggle button.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.report { background: var(--color-surface); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 4vw, var(--space-10)); box-shadow: var(--shadow-lg); }
.report-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.report-tag { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-primary); }
.verdict { font-family: var(--font-body); font-weight: 700; font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.01em; padding-bottom: var(--space-5); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.verdict.neg { color: var(--color-primary); }
.verdict.pos { color: var(--color-amber); }
.report dl { margin: 0; }
.report dl div { padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); display: grid; gap: var(--space-1); }
.report dt { font-weight: 600; font-size: var(--text-sm); }
.report dd { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.report-foot { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); }
.ex[hidden] { display: none; }
.ex { animation: fade .35s ease; }
@media (min-width: 960px) { .results-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-16); } .results-copy { position: sticky; top: 112px; } }

/* compare */
.compare { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.compare h2 { max-width: 18ch; margin-bottom: var(--space-10); }
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 600; }
thead th:nth-child(2) { color: var(--color-primary); }
tbody th { font-weight: 600; width: 32%; }
tbody td:nth-child(2) { color: var(--color-text); font-weight: 500; background: #f6f2fd; }
tbody td:nth-child(3) { color: var(--color-text-muted); }

/* price */
.price { padding-block: clamp(var(--space-8), 4vw, var(--space-16)) clamp(var(--space-16), 8vw, var(--space-24)); }
.price-grid { display: grid; gap: var(--space-8); align-items: stretch; }
.price-media { margin: 0; border-radius: var(--radius-xl); overflow: hidden; min-height: 280px; }
.price-media img { width: 100%; height: 100%; object-fit: cover; }
.price-card { background: var(--color-surface-dark); color: var(--color-text-inverse); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-12)); }
.price-card .eyebrow { color: #2ed3a8; }
.price-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.amount { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.03em; margin-bottom: var(--space-6); display: flex; align-items: baseline; gap: var(--space-3); }
.amount .sep { color: oklch(1 0 0 / 0.3); font-weight: 500; }
.incl { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2) var(--space-6); margin-bottom: var(--space-8); font-size: var(--text-sm); color: #e3ddf0; }
.incl li { display: flex; gap: var(--space-2); }
.incl li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc2ac' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.notify label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-3); color: var(--color-text-inverse); }
.notify-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.notify input { flex: 1 1 200px; min-height: 48px; padding: 0 var(--space-4); border-radius: 999px; border: 1px solid oklch(1 0 0 / 0.2); background: oklch(1 0 0 / 0.06); color: #fff; font: inherit; font-size: var(--text-sm); }
.notify input::placeholder { color: oklch(1 0 0 / 0.5); }
.notify .btn { background: var(--color-bg); color: var(--color-primary); border-color: var(--color-bg); }
.notify .btn:hover { background: #fff; }
.form-msg { min-height: 1.5em; margin-top: var(--space-3); font-size: var(--text-sm); color: #2ed3a8; }
.form-msg.err { color: #f3b38a; }
@media (min-width: 960px) { .price-grid { grid-template-columns: 1fr 1.15fr; } }

/* court */
.court { padding-block: clamp(var(--space-12), 6vw, var(--space-16)); border-block: 1px solid var(--color-border); }
.court-inner { display: grid; gap: var(--space-4); }
.court h2 { font-size: var(--text-xl); }
.court p { color: var(--color-text-muted); max-width: 70ch; }
@media (min-width: 900px) { .court-inner { grid-template-columns: 1fr 2fr; gap: var(--space-16); } }

/* faq */
.faq { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.faq-grid { display: flex; flex-direction: column; }
.faq-head { display: contents; }
.faq-list { order: 2; display: grid; gap: var(--space-8); margin-top: var(--space-6); }
.faq-help { order: 3; margin-top: var(--space-8); }
.faq h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
.faq .eyebrow { margin-bottom: var(--space-3); }
.faq-lede { color: var(--color-text-muted); margin-top: var(--space-4); max-width: 36ch; font-size: 1.0625rem; }
.faq-chips { display: flex; gap: var(--space-2); margin-top: var(--space-6); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); padding-bottom: 2px; }
.faq-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--color-text); background: #fff; border: 1px solid #e2dcf3; border-radius: 999px; padding: 0.6rem 1.05rem; min-height: 44px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--color-primary); }
.chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.faq-group { display: grid; gap: var(--space-3); }
.faq-group[hidden] { display: none; }
.faq-gh { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.faq-gh span { font-size: .75rem; letter-spacing: 0; background: #ece6ff; color: var(--color-primary); border-radius: 999px; padding: .1rem .5rem; }
.faq-item { background: #fff; border-radius: 20px; border: 1px solid #ebe6f7; box-shadow: 0 1px 2px rgba(31,22,64,.04); transition: box-shadow .25s, border-color .25s; }
.faq-item:hover { border-color: #d9d0f3; }
.faq-item[open] { border-color: #d4c8f5; box-shadow: 0 14px 34px -18px rgba(90,47,194,.35); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 1.15rem 1.25rem 1.15rem 1.4rem; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; min-height: 64px; border-radius: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus { outline: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.faq-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #f1edfc; display: grid; place-items: center; transition: background .25s, transform .3s; }
.faq-ic svg { stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; fill: none; }
.faq-ic .v { transition: transform .3s; transform-origin: center; }
.faq-item[open] .faq-ic { background: var(--color-primary); }
.faq-item[open] .faq-ic svg { stroke: #fff; }
.faq-item[open] .faq-ic .v { transform: scaleY(0); }
.faq-a { padding: 0 1.4rem 1.35rem; color: var(--color-text-muted); max-width: 64ch; line-height: 1.6; }
.faq-a p + p { margin-top: var(--space-3); }
.faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { .faq { interpolate-size: allow-keywords; } }
.faq-help { position: relative; overflow: hidden; border-radius: 24px; padding: var(--space-6); color: #fff; background: radial-gradient(90% 90% at 100% 0%, rgba(255,95,162,.45), transparent 60%), radial-gradient(80% 90% at 0% 100%, rgba(57,201,224,.35), transparent 60%), #2a1468; }
.faq-help-t { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; margin-bottom: var(--space-2); }
.faq-help p:not(.faq-help-t) { color: rgba(255,255,255,.82); max-width: 30ch; }
.faq-help-b { margin-top: var(--space-5); background: #fff; color: var(--color-primary); }
.faq-help-b:hover { background: #f1edfc; }
@media (min-width: 900px) {
  .faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-16); align-items: start; }
  .faq-head { display: block; position: sticky; top: 110px; }
  .faq-list { margin-top: 0; }
  .faq-help { margin-top: var(--space-10); }
  .faq-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .faq-item summary { padding: 1.3rem 1.4rem 1.3rem 1.6rem; }
  .faq-a { padding: 0 1.6rem 1.5rem; }
}

/* footer */
.site-footer { background: var(--color-surface-dark); color: #d0c8e3; padding-block: var(--space-12); }
.site-footer .brand { color: #2ed3a8; margin-bottom: var(--space-3); }
.site-footer .brand span { color: var(--color-text-inverse); }
.footer-inner { display: grid; gap: var(--space-6); font-size: var(--text-sm); }
.site-footer .small { font-size: var(--text-xs); color: #b1a7c9; max-width: 70ch; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1.2fr 2fr 1fr; align-items: start; } }

@media (max-width: 899px) {
  .phone { position: relative; top: 0; }
}
@media (max-width: 899px) {
  .phone { order: -1; width: min(100%, 320px); }
  .flow-steps { grid-template-columns: 1fr 1fr; }
  .flow-steps button { padding: var(--space-3); gap: var(--space-3); align-items: center; }
  .flow-steps small { display: none; }
  .flow-steps strong { font-size: var(--text-sm); line-height: 1.25; }
}
.ps-btn { cursor: pointer; border: 0; font: inherit; font-weight: 600; }
@media (max-width: 899px) { .phone { aspect-ratio: 9 / 16; } }
html { scroll-padding-top: 80px; }

/* detection window (adapted from NIVHA explorer) */
.dw-section { padding-block: clamp(var(--space-16), 9vw, var(--space-24)) 0; }
.dw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.dw-chip { min-height: 44px; padding: var(--space-2) var(--space-5); border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-weight: 600; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.dw-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dw-chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.dw-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 4vw, var(--space-10)); box-shadow: var(--shadow-sm); }
.dw-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.dw-sample { font-size: var(--text-xs); font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .08em; }
.dw-window { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); }
.dw-desc { color: var(--color-text-muted); max-width: 64ch; min-height: 4.8em; }
.dw-track-wrap { margin: var(--space-8) 0 var(--space-2); }
.dw-track { position: relative; height: 18px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; }
.dw-bar, .dw-bar-ext { position: absolute; top: 0; bottom: 0; left: 2.1%; width: 0; border-radius: 0 999px 999px 0; transition: width .7s cubic-bezier(.16,1,.3,1); }
.dw-bar { background: var(--color-primary); }
.dw-bar-ext { background: repeating-linear-gradient(135deg, rgba(75,42,143,.32) 0 6px, rgba(75,42,143,.16) 6px 12px); }
.dw-gap { position: absolute; top: 0; bottom: 0; left: 0; width: 2.1%; background: repeating-linear-gradient(135deg, #cfc6e2 0 3px, transparent 3px 6px); }
.dw-seg { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.9); opacity: 0; transition: opacity .4s; }
.dw-seg.show { opacity: 1; }
.dw-scale { position: relative; height: 22px; margin-top: var(--space-2); }
.dw-scale span { position: absolute; transform: translateX(-50%); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.dw-scale span:first-child { transform: none; }
.dw-scale span:last-child { transform: translateX(-100%); }
.dw-dates { margin-top: var(--space-5); font-weight: 600; }
.dw-dates:empty { display: none; }
.dw-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.dw-tag { font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); }
.dw-tag.mint { background: #dcf7ef; color: var(--color-mint-ink); }
.dw-note { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); max-width: 72ch; }
@media (max-width: 599px) { .dw-scale span.hide-sm { display: none; } }

/* report explained */
.rx { background: var(--color-surface-2); padding-block: clamp(var(--space-16), 9vw, var(--space-24)); margin-top: clamp(var(--space-16), 9vw, var(--space-24)); }
.rx-head { max-width: 720px; margin-bottom: var(--space-10); }
.rx-head h2 { margin-bottom: var(--space-5); }
.rx-lede { color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.5; margin-bottom: var(--space-6); }
.rx-report { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.rx-top { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); padding: var(--space-6) clamp(var(--space-5), 3vw, var(--space-8)); border-bottom: 1px solid var(--color-border); }
.rx-title { font-weight: 700; }
.rx-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.rx-cols { display: none; }
.rx-row { display: grid; border-bottom: 1px solid var(--color-border); }
.rx-row:last-child { border-bottom: 0; }
.rx-lab, .rx-pe { padding: var(--space-6) clamp(var(--space-5), 3vw, var(--space-8)); }
.rx-lab { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--color-text); }
.rx-sec { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.lab-kv { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); border-top: 1px dashed var(--color-border); }
.lab-kv:first-of-type { border-top: 0; }
.lab-kv span { color: var(--color-text-muted); }
.lab-kv b { font-weight: 600; text-align: right; }
.lab-table { min-width: 0; width: 100%; font-size: 0.8125rem; border-collapse: collapse; }
.lab-table th, .lab-table td { padding: 6px 0; border-bottom: 1px dashed var(--color-border); font-weight: 400; text-transform: none; letter-spacing: 0; background: none !important; color: var(--color-text); width: auto; }
.lab-table thead th { color: var(--color-text-muted); font-size: 0.75rem; }
.lab-table td:last-child, .lab-table th:last-child { text-align: right; }
.lab-table tr.hit td { color: var(--color-amber); font-weight: 700; }
.lab-note { color: var(--color-text-muted); line-height: 1.55; }
.etg-scale { position: relative; display: grid; grid-template-columns: 11% 56% 33%; height: 28px; margin: var(--space-3) 0 var(--space-2); border-radius: 6px; overflow: visible; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; }
.etg-scale span { display: grid; place-items: center; white-space: nowrap; }
.etg-scale .b1 { background: #dcf7ef; color: var(--color-mint-ink); border-radius: 6px 0 0 6px; }
.etg-scale .b2 { background: #f1ecfa; color: var(--color-text-muted); }
.etg-scale .b3 { background: var(--color-amber-soft); color: var(--color-amber); border-radius: 0 6px 6px 0; }
.etg-scale i { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: var(--color-text); border-radius: 2px; }
.rx-pe { background: #faf8fe; }
.rx-pe-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); margin-bottom: var(--space-3); }
.rx-pe p:not(.rx-pe-label) { margin-bottom: var(--space-3); max-width: 56ch; }
.rx-pe p:last-child { margin-bottom: 0; }
.rx-pe strong { font-weight: 700; }
.rx-pe a { color: var(--color-primary); }
.rx-next .rx-lab { display: none; }
.rx-disclaimer { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); max-width: 72ch; }
.rx-disclaimer a { color: var(--color-primary); }
@media (min-width: 900px) {
  .rx-row { grid-template-columns: 1fr 1fr; }
  .rx-cols { display: none; grid-template-columns: 1fr 1fr; width: 50%; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
  .rx-cols span:last-child { color: var(--color-primary); padding-left: clamp(var(--space-5), 3vw, var(--space-8)); }
  .rx-cols span:first-child { visibility: hidden; }
  .rx-next .rx-lab { display: block; }
}
/* plan picker */
.plans { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-5); }
.plans button { min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.plans button:hover { border-color: #fff; }
.plans button[aria-checked="true"] { background: #fff; color: var(--color-surface-dark); border-color: #fff; }
.plan-what { color: #d9d2ea; font-size: var(--text-sm); margin: calc(-1 * var(--space-3)) 0 var(--space-6); min-height: 3em; max-width: 46ch; }

/* legal page */
.legal { padding-block: var(--space-12) var(--space-24); }
.legal-inner { max-width: 760px; }
.legal h1 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.legal h2 { font-size: var(--text-xl); margin: var(--space-12) 0 var(--space-4); scroll-margin-top: 100px; }
.legal h3 { font-size: var(--text-base); margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal li { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.legal ol, .legal ul { padding-left: var(--space-6); }
.legal strong { color: var(--color-text); }
.draft-banner { background: var(--color-amber-soft); color: var(--color-amber); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-8); }
.legal .ai-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 4vw, var(--space-10)); margin-top: var(--space-6); }
.legal .ai-box h2 { margin-top: 0; }

/* Voy-style refinements */
.hero h1 { font-weight: 400; letter-spacing: -0.03em; }
.who h2, .price-card h2, .court h2, .ai h2 { color: inherit; }
.price-card h2, .who h2 { color: #fff; }
.site-header .header-inner { background: rgba(255,255,255,.95); }
.card-like { background: #fff; border-radius: 22px; }
/* app showcase */
.appshow { padding-block: clamp(var(--space-16), 9vw, var(--space-24)); background: var(--color-surface-2); margin-top: clamp(var(--space-16), 9vw, var(--space-24)); }
.appshow-grid { display: grid; gap: var(--space-12); align-items: center; }
.appshow-copy h2 { margin-bottom: var(--space-5); }
.appshow-copy > p:not(.eyebrow) { color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.5; max-width: 46ch; margin-bottom: var(--space-8); }
.appshow-steps { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; gap: var(--space-3); }
.appshow-steps li { display: flex; gap: var(--space-4); align-items: center; background: #fff; border-radius: 18px; padding: var(--space-4) var(--space-5); }
.appshow-steps .d { width: 20px; height: 20px; border-radius: 50%; flex: none; background: #22c493; }
.appshow-steps .d.w { background: #ffb648; }
.appshow-steps b { display: block; color: var(--color-text); }
.appshow-steps small { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }
.appshow .toggle { margin: 0; }
.app-phone { justify-self: center; width: min(100%, 390px); aspect-ratio: 390 / 820; border-radius: 48px; padding: 12px; background: #1f1640; box-shadow: 0 40px 80px -30px rgba(29,25,48,.45); position: relative; }
.app-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 38px; background: #f5f3fb; display: block; }
p.appshow-note, .appshow-copy > p.appshow-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-5); max-width: 60ch; }
.appshow-note a { color: var(--color-primary); }
@media (min-width: 960px) { .appshow-grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-16); } }

/* bright accents (Thriva-inspired) */
.who, .price-card { background: radial-gradient(90% 70% at 100% 0%, rgba(255,95,162,.35), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(57,201,224,.28), transparent 60%), var(--color-surface-dark); }
.appshow { background: radial-gradient(60% 60% at 85% 20%, rgba(255,95,162,.16), transparent 70%), radial-gradient(50% 60% at 10% 90%, rgba(57,201,224,.16), transparent 70%), var(--color-surface-2); }
.hero h1 { color: var(--color-text); }

/* ===== Mobile-first polish (≤ 899px) ===== */
.pl-short { display: none; }
@media (max-width: 899px) {
  .wrap { width: min(100% - 2.5rem, var(--wrap)); }
  h2 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3rem); line-height: 1.06; }
  .section-head { margin-bottom: var(--space-8); }
  .section-head p:not(.eyebrow) { font-size: 1.0625rem; line-height: 1.55; }
  .eyebrow { margin-bottom: var(--space-3); }

  /* hero: image-led lilac card */
  .hero { padding: var(--space-4) 0 var(--space-12); }
  .hero-grid { gap: 0; background: #e8e5f6; border-radius: 32px; overflow: hidden; width: min(100% - 1.5rem, var(--wrap)); }
  .hero-media { order: -1; border-radius: 0; box-shadow: none; aspect-ratio: 1 / 1; position: relative; }

  .hero-media img { object-position: 50% 50%; }
  .hero-media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 12%; background: linear-gradient(0deg, #e8e5f6, rgba(232,229,246,0)); }
  .hero-copy { padding: 0 var(--space-6) var(--space-8); margin-top: calc(-1 * var(--space-6)); position: relative; }
  .hero h1 { font-size: clamp(3.1rem, 2rem + 6vw, 4rem); line-height: .98; letter-spacing: -0.035em; max-width: 9ch; margin-bottom: var(--space-4); }
  .lede { font-size: 1.0625rem; margin-bottom: var(--space-6); }
  .hero-cta { flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
  .hero-cta .btn { width: 100%; min-height: 54px; font-size: 1rem; }
  .hero-cta .btn-ghost { background: rgba(255,255,255,.6); border-color: transparent; }
  .hero-points { gap: var(--space-2); }
  .hero-points li { background: rgba(255,255,255,.55); border-radius: 14px; padding: var(--space-3) var(--space-4); align-items: center; color: var(--color-text); }
  .hero-points svg { margin-top: 0; }

  /* who */
  .who { padding-block: var(--space-16); }
  .who-grid { gap: var(--space-6); }
  .who h2 { font-size: 2.1rem; line-height: 1.08; }
  .who-list li { padding-block: var(--space-5); }
  .who-list h3 { font-size: 1.15rem; }

  /* detection window */
  .dw-section { padding-top: var(--space-16); }
  .dw-chips { display: grid; grid-template-columns: 1fr 1fr; }
  .dw-chip { padding-inline: var(--space-3); }
  .dw-panel { border-radius: 24px; padding: var(--space-6) var(--space-5); }
  .dw-desc { min-height: 0; }

  /* how: swipeable steps above phone */
  .how { padding-block: var(--space-16); }
  .flow { gap: var(--space-6); }
  .flow-steps { display: flex; grid-template-columns: none; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.25rem; padding: 2px 1.25rem var(--space-2); scrollbar-width: none; }
  .flow-steps::-webkit-scrollbar { display: none; }
  .flow-steps li { flex: none; scroll-snap-align: start; }
  .flow-steps button { width: auto; white-space: nowrap; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); min-height: 48px; }
  .flow-steps button[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: none; }
  .flow-steps button[aria-selected="true"] .n { background: #fff; color: var(--color-primary); border-color: #fff; }
  .flow-steps .n { width: 30px; height: 30px; }
  .phone { order: 0; width: min(100%, 330px); aspect-ratio: 9 / 17; }

  /* results app demo: phone straight after the intro */
  .appshow { padding-block: var(--space-16); margin-top: var(--space-4); }
  .appshow-grid { gap: 0; }
  .appshow-copy { display: contents; }
  .appshow-copy .eyebrow { order: 1; }
  .appshow-copy h2 { order: 2; margin-bottom: var(--space-4); }
  .appshow-copy > p:not(.eyebrow):not(.appshow-note) { order: 3; font-size: 1.0625rem; margin-bottom: var(--space-6); }
  .appshow .toggle { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-6); }
  .appshow .toggle button { padding-inline: var(--space-2); font-size: .875rem; }
  .app-phone { order: 5; width: min(100%, 330px); }
  .appshow-note { order: 6; text-align: center; margin: var(--space-5) auto var(--space-8); }
  .appshow-steps { order: 7; margin: 0; }

  /* compare as cards */
  .compare { padding-block: var(--space-16); }
  .compare h2 { margin-bottom: var(--space-6); }
  .table-wrap { overflow: visible; border: 0; background: transparent; }
  .compare table { min-width: 0; display: block; }
  .compare thead { display: none; }
  .compare tbody { display: grid; gap: var(--space-3); }
  .compare tr { display: grid; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; padding: var(--space-5); gap: var(--space-3); }
  .compare tbody th, .compare tbody td { display: block; width: auto; padding: 0; border: 0; background: none !important; }
  .compare tbody th { font-size: 1.05rem; }
  .compare tbody td { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-3); font-size: .9375rem; line-height: 1.45; }
  .compare tbody td::before { content: attr(data-label); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-top: 2px; }
  .compare tbody td:nth-child(2) { color: var(--color-text); }
  .compare tbody td:nth-child(2)::before { color: var(--color-primary); }
  .compare tbody td:nth-child(3)::before { color: var(--color-text-muted); }

  /* price: card first, then mood image */
  .price { padding-block: var(--space-4) var(--space-16); }
  .price-grid { gap: var(--space-4); }
  .price-card { order: -1; padding: var(--space-8) var(--space-6); border-radius: 28px; }
  .price-card h2 { font-size: 2rem; }
  .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.1); }
  .plans button { border: 0; min-height: 46px; padding: 0 var(--space-2); }
  .pl-long { display: none; }
  .pl-short { display: inline; }
  .amount { font-size: 3.4rem; }
  .incl { grid-template-columns: 1fr; }
  .notify-row { flex-direction: column; }
  .notify input, .notify .btn { width: 100%; flex: none; min-height: 52px; }
  .price-media { min-height: 0; aspect-ratio: 4 / 3; border-radius: 28px; }

  /* court + faq */
  .court { border: 0; padding-block: 0; }
  .court-inner { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 28px; padding: var(--space-8) var(--space-6); }
  .court h2 { font-size: 2rem; }
  .faq { padding-block: var(--space-16); }
}
@media (min-width: 900px) {
  .court-inner { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 32px; padding: var(--space-12); }
  .court { border: 0; }
}
.site-footer a { color: #fff; }
@media (max-width: 899px) { .hide-sm { display: none; } }

/* Nelka wordmark */
.brand img { display: block; height: 30px; width: auto; }
.site-footer .brand img { height: 34px; }
@media (max-width: 899px) { .brand img { height: 28px; } }

/* what we test for */
.hero-points a { color: inherit; text-decoration: underline; text-decoration-color: rgba(90,47,194,.35); text-underline-offset: 3px; font-weight: 600; }
.tests { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.tests-head { max-width: 640px; margin-bottom: var(--space-8); }
.tests-head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
.tests-head p:not(.eyebrow) { color: var(--color-text-muted); margin-top: var(--space-3); font-size: 1.0625rem; }
.tests-grid { display: grid; gap: var(--space-4); }
.tg-alc { position: relative; overflow: hidden; border-radius: 28px; padding: var(--space-6); color: #fff; background: radial-gradient(90% 80% at 100% 0%, rgba(255,95,162,.55), transparent 60%), radial-gradient(80% 80% at 0% 100%, rgba(57,201,224,.4), transparent 60%), #3b1c96; display: flex; flex-direction: column; }
.tg-kicker { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.tg-alc h3 { font-family: var(--font-display); font-weight: 400; font-size: 3.25rem; line-height: 1; margin: var(--space-2) 0 var(--space-3); }
.tg-alc > p:not(.tg-kicker):not(.tg-in) { color: rgba(255,255,255,.88); max-width: 34ch; }
.tg-zones { display: grid; grid-template-columns: 3fr 4fr 3fr; gap: 4px; margin-top: var(--space-6); font-size: .75rem; font-weight: 700; }
.tg-zones span { padding: .45rem .6rem; border-radius: 999px; background: rgba(255,255,255,.16); }
.tg-zones span:nth-child(1) { background: #22c493; }
.tg-zones span:nth-child(2) { background: #ffb648; color: #1f1640; }
.tg-zones span:nth-child(3) { background: #ff6b6b; }
.tg-in { font-size: .8125rem; font-weight: 600; margin-top: var(--space-5); opacity: .8; }
.tg-drugs { background: #fff; border: 1px solid #ebe6f7; border-radius: 28px; padding: var(--space-6); }
.tg-drugs-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.tg-big { font-family: var(--font-display); font-size: 3.25rem; line-height: 1; color: var(--color-text); }
.tg-big span { font-size: 1.5rem; color: var(--color-text-muted); }
.tg-drugs .tg-in { margin-top: 0; color: var(--color-text-muted); opacity: 1; }
.tg-list { display: grid; gap: var(--space-3); }
.tg { background: #f6f3fd; border-radius: 20px; padding: var(--space-4) var(--space-5); }
.tg h3 { font-family: var(--font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.tg h3 span { letter-spacing: 0; background: #fff; border-radius: 999px; padding: .05rem .5rem; font-size: .75rem; }
.tg ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.tg li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.35; }
.tg li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: #22c493; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tg li b { font-weight: 600; color: var(--color-text); }
.tg li i { font-style: normal; color: var(--color-text-muted); font-size: .9375rem; }
.tg li i::before { content: "· "; }
.tests-foot { margin-top: var(--space-5); color: var(--color-text-muted); font-size: .9375rem; }
.tests-foot a { color: var(--color-primary); font-weight: 600; }
@media (min-width: 700px) { .tg-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .tests-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: stretch; }
  .tg-alc { padding: var(--space-8); }
  .tg-alc .tg-in { margin-top: auto; padding-top: var(--space-6); }
  .tg-drugs { padding: var(--space-8); }
}
.ps-bar img { height: 19px; width: auto; display: block; }
.price-media img { object-position: 93% 50%; }
.tg h3 { display: block; }
.tg h3 span { display: inline-block; margin-left: .35rem; vertical-align: 1px; }
@media (max-width: 999px) {
  .tg-alc { order: 2; }
  .tg-drugs { background: transparent; border: 0; padding: 0; }
  .tg-drugs-h { margin-bottom: var(--space-4); }
  .tg { background: #fff; border: 1px solid #ebe6f7; }
}
@media (max-width: 699px) {
  .tg ul { gap: .45rem; }
  .tg li i { font-size: .875rem; }
}

/* waitlist form extras */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notify-note { font-size: .8125rem; color: rgba(255,255,255,.7); margin-top: var(--space-3); }
.notify-note a { color: inherit; }
.notify .btn[disabled] { opacity: .7; cursor: progress; }

/* ===== Footer link columns ===== */
.footer-links .footer-h { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b1a7c9; margin-bottom: var(--space-3); }
.footer-links .footer-h a { color: inherit; text-decoration: none; }
.footer-links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer-links a { color: #fff; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-4 { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); row-gap: var(--space-8); }
.footer-4 > :first-child, .footer-4 > :last-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-4 { grid-template-columns: 1.2fr .9fr 1.1fr 1.5fr; } .footer-4 > :first-child, .footer-4 > :last-child { grid-column: auto; } }

/* ===== Guide cards (home strip + hub) ===== */
.guides-strip { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
.guides-strip-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.guides-strip-head h2 { font-size: var(--text-2xl); }
.guide-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .guide-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .guide-cards-4 { grid-template-columns: repeat(4, 1fr); } .guides-hub .guide-cards { grid-template-columns: repeat(3, 1fr); } }
.guide-card { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); text-decoration: none; color: var(--color-text); transition: border-color .2s, box-shadow .2s, transform .2s; }
.guide-card:hover { border-color: #cbbcf3; box-shadow: 0 14px 30px -18px rgba(90,47,194,.45); transform: translateY(-2px); }
.guide-card-t { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.15; letter-spacing: -.01em; }
.guide-card-b { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; }
.guide-card-go { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.guide-card-go svg, .guide-related svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guides-hub { padding-block: clamp(var(--space-10), 6vw, var(--space-16)) clamp(var(--space-16), 8vw, var(--space-24)); }
.guides-hub h1 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.guides-hub .guide-lede { margin-bottom: var(--space-10); }

/* ===== Guide / landing article ===== */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-primary); }
.guide-hero { background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-bg) 100%); padding-block: clamp(var(--space-8), 5vw, var(--space-12)) clamp(var(--space-8), 5vw, var(--space-12)); }
.guide-hero-inner { max-width: 820px; }
.guide-hero h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); margin-bottom: var(--space-4); }
.guide-lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); max-width: 60ch; }
.guide-meta { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); }
.guide-meta a { color: inherit; }
.guide-grid { display: grid; gap: var(--space-10); padding-block: var(--space-8) clamp(var(--space-16), 8vw, var(--space-24)); }
@media (min-width: 1000px) { .guide-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-16); } .guide-side { position: sticky; top: 104px; align-self: start; } }
.guide-body { max-width: 720px; min-width: 0; }
.guide-facts { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-10); }
.guide-facts-h { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); }
.guide-facts ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.guide-facts li { color: var(--color-text); }
.guide-facts a { color: var(--color-primary); }
.prose h2 { font-size: var(--text-xl); margin: var(--space-10) 0 var(--space-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-2); }
.prose p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.prose p strong, .prose li strong { color: var(--color-text); }
.prose a, .faq-a a { color: var(--color-primary); text-underline-offset: 3px; }
.tick-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.tick-list li { position: relative; padding-left: var(--space-8); color: var(--color-text-muted); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%235a2fc2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.steps-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); counter-reset: st; display: grid; gap: var(--space-3); }
.steps-list li { counter-increment: st; position: relative; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 40px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-muted); }
.steps-list li::before { content: counter(st); position: absolute; left: var(--space-4); top: var(--space-4); width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; font-size: var(--text-sm); display: grid; place-items: center; }
.guide-faqs { margin-top: var(--space-12); }
.guide-faqs h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.guide-faqs .faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-2); }
.guide-sources { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.guide-sources h2 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; margin-bottom: var(--space-3); }
.guide-sources ol { padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.guide-sources a { color: var(--color-text-muted); overflow-wrap: anywhere; }
.guide-cta { background: var(--color-surface-dark); color: #d9d1ef; border-radius: var(--radius-xl); padding: var(--space-6); }
.guide-cta-t { font-family: var(--font-display); font-size: var(--text-xl); color: #fff; line-height: 1.1; margin-bottom: var(--space-3); }
.guide-cta p { font-size: var(--text-sm); }
.guide-cta-p { margin: var(--space-4) 0; color: #fff; font-weight: 700; font-size: var(--text-base) !important; }
.guide-cta-b { width: 100%; background: #fff; color: var(--color-primary); border-color: #fff; }
.guide-cta-b:hover { background: var(--color-primary-soft); }
.guide-related { margin-top: var(--space-6); }
.guide-related-h { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.guide-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.guide-related a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.guide-related a:hover { border-color: #cbbcf3; color: var(--color-primary); }
.guide-related svg { flex: none; color: var(--color-primary); }

/* EtG bands */
.band-table { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.band-row { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-left-width: 6px; color: var(--color-text-muted); }
@media (min-width: 560px) { .band-row { grid-template-columns: 170px 1fr; gap: var(--space-4); align-items: center; } }
.band-v { font-weight: 700; color: var(--color-text); }
.band-low { border-left-color: #22c493; } .band-mid { border-left-color: #ffb648; } .band-high { border-left-color: #ff6b6b; }

/* comparison table */
.ht-compare { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-4); background: var(--color-surface); }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: var(--text-sm); }
.cmp-row > * { padding: var(--space-3) var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.cmp-row > :first-child { font-weight: 600; color: var(--color-text); }
.cmp-row > :last-child { background: #f7f4ff; color: var(--color-text); }
.cmp-head > * { border-top: 0; font-weight: 700; color: var(--color-text); background: var(--color-primary-soft); }
.cmp-head > :last-child { background: var(--color-primary); color: #fff; }
@media (min-width: 600px) { .cmp-row { grid-template-columns: 1.1fr 1.2fr 1.2fr; } .cmp-row > * { padding: var(--space-3) var(--space-4); } }

/* growth timeline */
.timeline { margin: var(--space-2) 0 var(--space-6); }
.tl-bar, .tl-lab { display: grid; grid-template-columns: repeat(4, 1fr); font-size: var(--text-xs); }
.tl-bar { height: 40px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, var(--color-primary) 0%, #8b6ae0 45%, var(--color-primary-soft) 100%); color: #fff; font-weight: 700; align-items: center; }
.tl-bar span { padding-left: var(--space-3); border-left: 1px solid rgba(255,255,255,.45); }
.tl-bar span:first-child { border-left: 0; }
.tl-bar span:last-child { color: var(--color-primary); }
.tl-lab { margin-top: var(--space-2); color: var(--color-text-muted); }
.tl-lab span { padding-left: var(--space-3); }

/* drug groups */
.drug-groups { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
@media (min-width: 640px) { .drug-groups { grid-template-columns: 1fr 1fr; } }
.drug-group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.drug-group h3 { color: var(--color-primary); }
.drug-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.drug-group strong { color: var(--color-text); font-weight: 600; }

/* ===== Header basket ===== */
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.basket-link { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-text); text-decoration: none; transition: background .2s; }
.basket-link:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.basket-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.basket-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.basket-count[hidden] { display: none; }

/* ===== Region picker ===== */
.region-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
.region-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.region-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--color-surface-2); }
.region-seg button { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); cursor: pointer; }
.region-seg button[aria-checked="true"] { background: #fff; color: var(--color-text); box-shadow: 0 1px 4px rgba(31,22,64,.12); }
.region-cur { opacity: .55; font-weight: 500; margin-left: 2px; }
.region-dark .region-label { color: #cfc6ea; }
.region-dark .region-seg { background: rgba(255,255,255,.1); }
.region-dark .region-seg button { color: #e5defa; }
.region-dark .region-seg button[aria-checked="true"] { background: #fff; color: var(--color-surface-dark); }

/* ===== Price card buy area ===== */
.amount[data-region="uk"] #p-eur, .amount[data-region="ie"] #p-gbp { opacity: .45; font-size: .62em; }
.amount[data-region="ie"] #p-eur { order: -1; }
.amount[data-region="ie"] .sep { order: 0; }
.buy { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.14); }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.buy-add { flex: 1 1 220px; min-height: 52px; background: #fff; color: var(--color-primary); border-color: #fff; font-size: var(--text-base); }
.buy-add:hover { background: var(--color-primary-soft); }
.buy-more { color: #fff; font-weight: 600; font-size: var(--text-sm); text-underline-offset: 3px; }
.buy-msg { min-height: 1.5em; margin-top: var(--space-3); font-size: var(--text-sm); color: #2ed3a8; }
.buy-msg a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.pdp .buy-msg, .shop .buy-msg { color: var(--color-mint-ink); }
.pdp .buy-msg a { color: var(--color-primary); }

/* ===== Quantity stepper ===== */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; height: 48px; }
.qty button { width: 44px; height: 46px; border: 0; background: transparent; font-size: 1.25rem; color: var(--color-primary); cursor: pointer; border-radius: 999px; }
.qty button:disabled { color: #c5bedb; cursor: default; }
.qty button:not(:disabled):hover { background: var(--color-primary-soft); }
.qty output { min-width: 28px; text-align: center; font-weight: 700; }

/* ===== Product page ===== */
.pdp { padding-block: var(--space-6) clamp(var(--space-10), 6vw, var(--space-16)); }
.pdp-grid { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .pdp-grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-12); align-items: start; } .pdp-media { position: sticky; top: 104px; } }
.pdp-media { margin: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface-2); aspect-ratio: 4 / 3; }
.pdp-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.pdp h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); margin-bottom: var(--space-3); }
.pdp-sum { color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.5; margin-bottom: var(--space-5); }
.pdp-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--color-surface-2); margin-bottom: var(--space-6); }
.pdp-switch a { display: grid; place-items: center; min-height: 44px; padding: 0 var(--space-2); border-radius: 999px; text-decoration: none; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; text-align: center; line-height: 1.2; }
.pdp-switch a[aria-current="page"] { background: var(--color-primary); color: #fff; }
.pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.pdp-price [data-price] { font-family: var(--font-display); font-size: 3rem; line-height: 1; letter-spacing: -.03em; }
.pdp-price-note { font-size: var(--text-sm); color: var(--color-mint-ink); font-weight: 600; }
.pdp-actions { display: flex; gap: var(--space-3); align-items: center; }
.pdp-add { flex: 1; min-height: 52px; font-size: var(--text-base); }
.pdp-trust { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.pdp-trust li { position: relative; padding-left: var(--space-6); }
.pdp-trust li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--color-mint-ink); border-bottom: 2px solid var(--color-mint-ink); transform: rotate(-45deg); }
.pdp-legal { font-size: var(--text-xs); color: var(--color-text-muted); }
.pdp-legal a { color: inherit; }
.pdp-detail { padding-block: clamp(var(--space-10), 6vw, var(--space-16)); background: var(--color-surface); border-block: 1px solid var(--color-border); }
.pdp-cols { display: grid; gap: var(--space-10); }
@media (min-width: 960px) { .pdp-cols { grid-template-columns: 1.2fr 1fr; gap: var(--space-16); } }
.pdp-detail .drug-group, .pdp-detail .band-row, .pdp-detail .steps-list li { background: var(--color-bg); }
.pdp-h3 { font-size: var(--text-lg) !important; margin-top: var(--space-8); }
.pdp-others { padding-block: clamp(var(--space-10), 6vw, var(--space-16)); }
.pdp-others h2 { font-size: var(--text-xl); margin-bottom: var(--space-6); }

/* ===== Basket / checkout shared ===== */
.shop { padding-block: var(--space-8) clamp(var(--space-16), 8vw, var(--space-24)); min-height: 60vh; }
.shop-h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); margin-bottom: var(--space-6); }
.shop-note { background: var(--color-amber-soft); color: #7d1840; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-6); font-size: var(--text-sm); }
.shop-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) { .shop-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-10); } .shop-grid .sum { position: sticky; top: 104px; } }
.shop-empty { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-6); text-align: center; display: grid; justify-items: center; gap: var(--space-4); }
.shop-empty p { color: var(--color-text-muted); }
.shop-back { display: inline-block; margin-top: var(--space-4); color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); text-underline-offset: 3px; }
.bl { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.bl-item { display: grid; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
@media (min-width: 600px) { .bl-item { grid-template-columns: 1fr auto; align-items: center; } }
.bl-t { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); text-decoration: none; line-height: 1.15; }
.bl-t:hover { color: var(--color-primary); }
.bl-d { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 var(--space-2); }
.bl-rm { border: 0; background: none; padding: var(--space-2) 0; min-height: 36px; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bl-rm:hover { color: var(--color-amber); }
.bl-side { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.bl-p { font-weight: 700; font-size: var(--text-lg); min-width: 64px; text-align: right; }
.bl-save { margin-top: var(--space-3); background: var(--color-primary-soft); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); justify-items: start; font-size: var(--text-sm); }
.sum { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); }
.sum-h { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.sum-rows { margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
.sum-rows > div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.sum-rows dd { margin: 0; color: var(--color-text); font-weight: 600; }
.sum-total { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-2); }
.sum-total dt, .sum-total dd { font-size: var(--text-lg); color: var(--color-text) !important; font-weight: 700; }
.sum-go, .co-btn { width: 100%; min-height: 54px; font-size: var(--text-base); }
.sum-small { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.sum-small a { color: var(--color-primary); }
.sum-lines { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.sum-lines li { display: flex; justify-content: space-between; gap: var(--space-4); }
.sum-lines li span:last-child { font-weight: 600; white-space: nowrap; }

/* ===== Checkout form ===== */
.co { display: grid; gap: var(--space-4); }
.co-set { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-5); margin: 0; min-width: 0; display: grid; gap: var(--space-4); }
.co-set legend { float: left; width: 100%; padding: 0; font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-1); }
.co-set legend + * { clear: both; }
.co-help { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: calc(var(--space-2) * -1); }
.co-row2 { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .co-row2 { grid-template-columns: 1fr 1fr; } }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld label { font-size: var(--text-sm); font-weight: 600; }
.fld .opt { font-weight: 400; color: var(--color-text-muted); }
.fld input { width: 100%; min-height: 50px; padding: 0 var(--space-4); border: 1px solid #d3cbe8; border-radius: var(--radius-md); background: #fff; font: inherit; font-size: 16px; color: var(--color-text); }
.fld input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.fld input[aria-invalid="true"] { border-color: var(--color-amber); background: #fffafb; }
.fld-pc input { max-width: 200px; text-transform: uppercase; }
.fld-err { min-height: 0; font-size: var(--text-sm); color: var(--color-amber); font-weight: 600; }
.fld-err:empty { display: none; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.choice-opt { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4); border: 1px solid #d3cbe8; border-radius: var(--radius-md); cursor: pointer; }
.choice-opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }
.choice-opt input, .check input { accent-color: var(--color-primary); width: 20px; height: 20px; flex: none; margin: 0; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.check input { margin-top: 2px; }
.check a { color: var(--color-primary); }
.co-pay { display: grid; gap: var(--space-2); }
.co-err { background: var(--color-amber-soft); color: #7d1840; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 600; }
.co-btn:disabled { opacity: .7; cursor: progress; }
@media (max-width: 959px) { .shop-grid:has(.co) .sum { order: -1; } }

/* ===== Order confirmed ===== */
.conf { max-width: 720px; }
.conf-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); margin-bottom: var(--space-8); }
.conf-tick { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #dff7ef; margin-bottom: var(--space-5); }
.conf-tick svg { width: 30px; height: 30px; fill: none; stroke: var(--color-mint-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.conf-lede { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.conf-lede strong { color: var(--color-text); }
.conf-lines { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.conf-total { font-size: var(--text-lg); text-align: right; }
.conf-next h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.conf-next .btn { margin-top: var(--space-4); }
.conf-k { color: var(--color-text-muted); }
/* hidden must always win over component display rules */
[hidden] { display: none !important; }
.choice-opt { padding: 0 var(--space-3); gap: var(--space-2); white-space: nowrap; }
.co-set legend.sr-only { float: none; width: 1px; margin: -1px; }
/* Logo needs clearance from the pill's curved end; the round button on the right follows the curve already */
.site-header .header-inner { padding-left: 22px; }
@media (max-width: 899px) { .site-header .header-inner { padding-left: 18px; } }
/* Preview-only kit code on the confirmation page */
.conf-dev { margin-top: 22px; padding: 16px 18px; border: 1.5px dashed #c8bde6; border-radius: 18px; background: #fbfaff; text-align: left; font-size: .95rem; }
.conf-dev-codes { font-weight: 700; font-size: 1.25rem; letter-spacing: .06em; color: #1f1640; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.conf-dev .btn { margin-top: 10px; }
.site-footer .footer-app { color: #2ed3a8; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Republic of Ireland interest form */
.ie-interest { margin: var(--space-10) 0 0; padding: var(--space-6); background: var(--lilac, #ece6ff); border-radius: 24px; }
.ie-interest h2 { margin-top: 0; }
.ie-form label { display: block; font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.ie-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ie-row input { flex: 1 1 220px; min-height: 52px; padding: 0 16px; border: 1px solid #d6cdf2; border-radius: 14px; font: inherit; font-size: 16px; background: #fff; }
.ie-row .btn { flex: 0 0 auto; min-height: 52px; }
@media (max-width: 520px) { .ie-row .btn { flex: 1 1 100%; } }
.ie-small { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-3) 0 0; }
.ie-msg { margin: var(--space-3) 0 0; font-weight: 600; color: #1d7a5c; }
.ie-msg:empty { display: none; }
.ie-msg.err { color: #b42318; }
.ie-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.region-note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-5); }
.region-note.region-dark { color: #cfc6ea; }
.ie-interest h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.15; }
.ie-msg { margin-top: 0; }
.co-help a { color: #5a2fc2; font-weight: 600; text-underline-offset: 3px; }
.check.check-quiet span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Mobile menu */
.menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--color-text); cursor: pointer; place-items: center; }
.menu-btn:hover { background: var(--color-primary-soft); }
.menu-btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.menu-ic { position: relative; width: 20px; height: 14px; display: block; }
.menu-ic i { position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.menu-ic i:nth-child(1) { top: 0; } .menu-ic i:nth-child(2) { top: 6px; } .menu-ic i:nth-child(3) { top: 12px; }
.menu-btn[aria-expanded="true"] .menu-ic i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ic i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-ic i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (max-width: 859px) {
  .menu-btn { display: grid; }
  .header-actions { gap: 2px; }
  .header-actions .btn-sm { padding-inline: var(--space-4); }
}
@media (max-width: 380px) {
  .site-header .brand img { width: 100px; height: auto; }
  .header-actions .btn-sm { padding-inline: 14px; }
}
.site-menu { position: fixed; inset: 0; z-index: -1; background: var(--color-bg); padding-top: 92px; overflow-y: auto; overscroll-behavior: contain; animation: menuIn .22s ease; }
.site-menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-menu { animation: none; } .menu-ic i { transition: none; } }
.menu-inner { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); }
.menu-main, .menu-tests { list-style: none; margin: 0; padding: 0; }
.menu-main a { display: block; padding: 14px 4px; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.menu-main a:active, .menu-tests a:active { color: var(--color-primary); }
.menu-h { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-xs, .75rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }
.menu-tests a { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; padding: 14px 18px; margin-bottom: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; color: var(--color-text); text-decoration: none; font-weight: 600; }
.menu-tests b { color: var(--color-primary); }
.menu-foot { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.menu-foot .btn { width: 100%; }
html.menu-open, html.menu-open body { overflow: hidden; }
@media (min-width: 860px) { .site-menu { display: none !important; } }

/* How it works phone: keep the scan box square and centred in Safari */
.viewfinder { flex: none; align-self: center; width: min(78%, 240px); margin: var(--space-2) auto; }

/* Phone crops: square images framed on the kit, centred */
.hero-media picture, .price-media picture, .pdp-media picture { display: contents; }
@media (max-width: 899px) {
  .price-media { aspect-ratio: 1 / 1; }
  .price-media img { object-position: 50% 50%; }
}
@media (max-width: 959px) {
  .pdp-media { aspect-ratio: 1 / 1; }
  .pdp-media img { object-position: 50% 50%; }
}