/* Marketing/funnel components (services, AGA order page, thank-you) -
   layered on top of shared-base.css, same design tokens (--ink, --bg,
   --surface, --line, --gold, --cobalt, --success, --danger, fonts). */
.container{max-width:1120px;margin-inline:auto;padding-inline:24px;box-sizing:border-box;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:10px 16px;z-index:100;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}
code,.mono{font-family:var(--font-mono);font-size:0.92em;}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:2px;}
.visually-hidden{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;}

.section{padding-block:48px;}
.section--tight{padding-block:32px;}
/* Permanently dark section (see .hero comment below) - fixed literals,
   not the theme-flipping --ink/--bg/--surface-2 tokens, so it doesn't
   invert to a light panel in dark mode. */
.section--dark{background:#14181F;color:#F4F6F8;}
.section--dark h2{color:#F4F6F8;}
.section--dark p{color:#C2C9D3;}
.section--dark .eyebrow{color:#D9AE55;}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
h1,h2,h3{font-family:var(--font-display);}
.note{font-size:12px;color:var(--ink-3);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 24px;border-radius:8px;border:1px solid transparent;font-family:var(--font-display);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;}
.btn--gold{background:var(--gold);color:var(--ink);}
.btn--gold:hover{filter:brightness(1.08);}
.btn--outline-light{border-color:var(--line-2);color:var(--bg);background:transparent;}
.btn--outline-light:hover{border-color:var(--gold);}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink);}
.btn--ghost:hover{border-color:var(--ink);}
.btn--block{width:100%;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;}
@media (prefers-reduced-motion: no-preference){.btn--gold:active{transform:translateY(1px);}}

/* Hero - a permanently dark panel, independent of the site's light/dark
   toggle (like the original pre-redesign hero always was). --ink/--bg
   FLIP with the toggle, so using them here would invert this panel to a
   light background with dark text in dark mode - use fixed literals
   instead, matching --ink/--bg/--ink-2's own LIGHT-mode values. */
.hero{background:#14181F;color:#F4F6F8;padding-block:56px;}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:40px;align-items:center;}
.hero h1{color:#F4F6F8;margin-bottom:16px;font-size:clamp(28px,4vw,44px);line-height:1.15;}
.hero__support{font-size:16px;color:#C2C9D3;max-width:34rem;line-height:1.6;}
.hero__trust{font-size:13px;color:#D9AE55;font-family:var(--font-mono);margin-bottom:20px;}
.hero__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-bottom:20px;}
.hero__price-current{font-family:var(--font-mono);font-size:32px;font-weight:700;color:#F4F6F8;}
.hero__price-note{font-size:14px;color:#C2C9D3;}
.hero__price-crossed{font-family:var(--font-mono);color:#C2C9D3;text-decoration:line-through;}
.hero__price-crossed[hidden]{display:none;}
.asin-slot{background:#181D27;color:#EEF1F5;border:1px solid #333B4A;border-radius:10px;padding:24px;box-shadow:0 2px 4px rgba(0,0,0,.08),0 16px 40px rgba(0,0,0,.14);}
.asin-slot__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#D9AE55;margin-bottom:12px;}
.asin-slot__row{display:flex;gap:12px;}
.asin-slot input{flex:1;min-width:0;min-height:44px;background:#0B0E13;border:1px solid #333B4A;border-bottom:2px solid #D9AE55;border-radius:6px 6px 0 0;color:#EEF1F5;font-family:var(--font-mono);font-size:16px;padding:10px 14px;}
.asin-slot input::placeholder{color:#838C99;}
.asin-slot__hint{font-size:12px;color:#838C99;margin:12px 0 0;}

/* Cards */
.cards-3,.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);}
.card h3{font-size:18px;margin-bottom:8px;}
.card p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.6;}
.card__marker{font-family:var(--font-mono);color:var(--gold);font-size:12px;letter-spacing:.14em;display:block;margin-bottom:12px;}

/* Steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;padding:0;margin:0;list-style:none;}
.steps li{counter-increment:step;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;position:relative;}
.steps li::before{content:counter(step, decimal-leading-zero);font-family:var(--font-mono);color:var(--gold);font-size:14px;letter-spacing:.1em;display:block;margin-bottom:8px;}
.steps h3{font-size:16px;margin-bottom:4px;}
.steps p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.6;}

/* Order form */
.order-panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);padding:32px;}
.order-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:start;}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:4px;}
.field input,.field select,.field textarea{width:100%;min-height:44px;border:1px solid var(--line-2);border-radius:6px;padding:10px 12px;font:inherit;color:var(--ink);background:var(--bg);}
.field textarea{min-height:96px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cobalt);}
.field--error input,.field--error select,.field--error textarea{border-color:var(--danger);}
.field__error{color:var(--danger);font-size:12px;margin-top:4px;display:none;}
.field--error .field__error{display:block;}
.field__hint{font-size:12px;color:var(--ink-3);margin-top:4px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
fieldset{border:0;padding:0;margin:0 0 24px;}
legend{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);padding:0;margin-bottom:16px;}

.preview-card{display:flex;gap:16px;border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--surface-2);align-items:center;}
.preview-card img{width:84px;height:84px;object-fit:contain;background:var(--surface);border-radius:6px;border:1px solid var(--line);flex-shrink:0;}
.preview-card__title{font-weight:600;font-size:14px;margin:0 0 4px;}
.preview-card__meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin:0;overflow-wrap:anywhere;}
.status-line{font-size:14px;margin:8px 0;}
.status-line--error{color:var(--danger);}
.status-line--ok{color:var(--success);}

.package-cards{display:grid;gap:16px;}
.package-card{position:relative;border:2px solid var(--line);border-radius:10px;padding:24px;background:var(--surface);cursor:pointer;transition:border-color .15s ease;}
.package-card:has(input:checked){border-color:var(--gold);box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);}
.package-card input{position:absolute;opacity:0;inset:0;cursor:pointer;}
.package-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
.package-card__name{font-family:var(--font-display);font-weight:700;color:var(--ink);}
.package-card__price{font-family:var(--font-mono);font-weight:600;font-size:18px;color:var(--ink);}
.package-card ul{margin:12px 0 0;padding-left:1.1rem;font-size:14px;color:var(--ink-2);}
.package-card li{margin-bottom:2px;}

/* Also a permanently dark panel (see .hero comment above) - fixed
   literals, not the theme-flipping --ink/--bg/--surface-2 tokens. */
.order-summary{background:#14181F;color:#F4F6F8;border-radius:10px;padding:24px;position:sticky;top:84px;}
.order-summary h3{color:#F4F6F8;font-size:18px;}
.order-summary dl{margin:0 0 16px;font-size:14px;}
.order-summary dt{color:#C2C9D3;margin-top:12px;}
.order-summary dd{margin:0;font-weight:600;overflow-wrap:anywhere;}
.order-summary .mono{font-family:var(--font-mono);}
.order-summary .note{color:#C2C9D3;}
.order-summary__total{border-top:1px solid #333B4A;padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:18px;margin-bottom:16px;}
.consents{font-size:12px;color:#C2C9D3;}
.consents label{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;cursor:pointer;}
.consents input{width:18px;height:18px;margin-top:1px;flex-shrink:0;accent-color:#D9AE55;}
.consents a{color:#D9AE55;}

.review-banner{background:var(--surface-2);border:1px solid var(--gold);color:var(--ink-2);padding:16px;border-radius:6px;font-size:14px;margin-bottom:16px;}
.mock-pay{border:2px dashed #D9AE55;border-radius:10px;padding:16px;background:#181D27;margin-top:16px;}
.mock-pay h4{margin:0 0 8px;font-size:14px;color:#D9AE55;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;}
.mock-pay .note{color:#C2C9D3;}
.mock-pay .btn{margin-right:8px;margin-bottom:8px;}

/* About */
.about-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start;}
.portrait{border-radius:10px;overflow:hidden;border:1px solid #333B4A;background:#14181F;aspect-ratio:4/5;display:grid;place-items:center;}
.portrait--placeholder{color:#C2C9D3;font-family:var(--font-mono);font-size:12px;text-align:center;padding:16px;}

/* FAQ accordion */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;padding:16px 32px 16px 0;font-weight:600;color:var(--ink);list-style:none;position:relative;min-height:44px;display:flex;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';position:absolute;right:8px;font-family:var(--font-mono);color:var(--gold);font-size:1.2rem;}
.faq details[open] summary::after{content:'\2212';}
.faq .faq__body{padding:0 0 16px;color:var(--ink-2);font-size:14px;max-width:60ch;line-height:1.6;}

/* Consent banner */
.consent-banner{position:fixed;inset-inline:0;bottom:0;z-index:60;background:var(--surface);border-top:2px solid var(--gold);box-shadow:0 -8px 30px rgba(0,0,0,.18);padding:16px;}
.consent-banner__inner{display:flex;gap:16px;align-items:center;flex-wrap:wrap;max-width:1120px;margin:0 auto;}
.consent-banner p{margin:0;font-size:14px;flex:1 1 320px;color:var(--ink-2);}
.consent-banner .btn{min-height:44px;}
.consent-banner label{font-size:14px;display:inline-flex;gap:4px;align-items:center;margin-right:12px;}

/* Thank-you */
.receipt{max-width:560px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);padding:32px;}
.receipt dl{font-size:14px;}
.receipt dt{color:var(--ink-3);margin-top:12px;}
.receipt dd{margin:0;font-weight:600;}
.badge{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;padding:4px 10px;border-radius:999px;border:1px solid;}
.badge--paid{color:var(--success);border-color:var(--success);background:#DEF3E4;}
.badge--pending{color:var(--gold);border-color:var(--gold);background:var(--surface-2);}
.badge--failed{color:var(--danger);border-color:var(--danger);background:#FFE9E1;}

@media (max-width:900px){
  .hero__grid,.order-grid,.about-grid{grid-template-columns:minmax(0,1fr);}
  .order-summary{position:static;}
}
@media (max-width:600px){
  .section{padding-block:32px;}
  .form-row{grid-template-columns:minmax(0,1fr);}
  .order-panel{padding:20px;}
}