/* Afnihi storefront layout — built on tokens.css.
   The header/nav/.micro base rules below are shared with track.html and must stay as they are.
   Storefront-only refinements are scoped to body.storefront (index.html). */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.nav-row{display:flex;align-items:center;gap:32px;height:76px}
.main-nav{display:flex;gap:28px;margin-left:12px}
.main-nav a{color:var(--ink);font-weight:600;font-size:var(--fs-sm)}
.main-nav a:hover{color:var(--violet);text-decoration:none}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.mobile-menu{display:none}
.menu-open .mobile-menu{display:flex;flex-direction:column;padding:8px var(--gutter) 20px;border-top:1px solid var(--border)}
.mobile-menu a{padding:14px 0;color:var(--ink);font-weight:600;border-bottom:1px solid var(--border)}
.micro{font-size:var(--fs-xs);color:var(--muted)}

/* ================= Storefront tokens (scoped; tokens.css stays untouched) ================= */
.storefront{
  --muted:#666C8A;                 /* 5.15:1 on white (was #8A90AB, 3.15:1) */
  --platform:#7F849E;              /* platform names, 3.69:1 at 19px bold */
  --border-strong:#C9CDDD;
  --mint-600:#0B9478;              /* mint icons on white / mint-50 */
  --mint-800:#087A64;              /* mint text, 5.28:1 */
  --mint-border:#CDEFE6;
  --gradient:linear-gradient(120deg,#5B2EFF 0%,#6A3BFF 55%,#3D1FC2 100%);
  --fs-display:clamp(2.25rem,1.2rem + 3.6vw,4rem);
  --fs-h2:clamp(1.75rem,1.1rem + 2vw,2.5rem);
  --fs-h3:1.25rem;                 /* plan names */
  --fs-h4:1.125rem;                /* card, step and value titles */
  --fs-lead:1.1875rem;
  --fs-note:.875rem;               /* reassurance & disclaimer lines */
  --card-pad:28px;
  --gap:24px;
  --section-bg:#fff;
}

/* Type details */
.storefront p,.storefront li{text-wrap:pretty}
.storefront h1,.storefront h2,.storefront h3,.storefront summary{text-wrap:balance}
.storefront h2{line-height:1.15}
.storefront h3,.storefront h4{line-height:1.3}
.punct{margin-left:-.1em}
.storefront p a:not(.btn){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(91,46,255,.4)}
.storefront p a:not(.btn):hover{text-decoration-color:currentColor}

/* Icons: one rendered stroke weight (~1.75–2px) whatever the icon size */
.storefront .i{stroke-width:2.2}
.storefront .i-sm{stroke-width:2.4}
.storefront .i-lg{stroke-width:1.75}

/* Focus: visible on every control, including primary buttons */
.storefront :focus-visible{outline:2px solid var(--violet);outline-offset:3px;box-shadow:none}
.storefront .btn-primary:focus-visible{box-shadow:0 8px 20px -8px rgba(91,46,255,.6)}
.storefront .hero-search input:focus-visible{outline:none}
.storefront .cta-inner :focus-visible{outline-color:#fff}

/* Buttons & elevation: lift only on devices that can hover */
.storefront .btn-primary:hover,.storefront .card-hover:hover{transform:none}
.storefront .card-hover:hover{box-shadow:none;border-color:var(--border)}
.storefront .card-hover:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .storefront .btn-primary:hover{transform:translateY(-1px)}
  .storefront .card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
}
.storefront .btn-secondary{border-color:var(--border-strong)}
.storefront .btn-secondary:hover{border-color:var(--ink)}
.storefront .btn-white:hover{background:var(--violet-50)}
@media (hover:hover) and (pointer:fine){.storefront .btn-white:hover{transform:translateY(-1px)}}

/* Header (storefront) */
.storefront .site-header .logo{flex:none}
.storefront .nav-actions .btn{height:42px;padding:0 20px;font-size:var(--fs-sm)}
.storefront .nav-actions .btn-primary{box-shadow:0 4px 12px -6px rgba(91,46,255,.45)}
.storefront .nav-actions .btn-primary:focus-visible{box-shadow:0 4px 12px -6px rgba(91,46,255,.45)}
.mm-links,.mm-actions{display:flex;flex-direction:column}
.storefront .mm-links a:last-child{border-bottom:0}
.storefront .mm-actions{display:grid;gap:10px;margin-top:24px}
.storefront .mobile-menu a.btn{height:48px;width:100%;padding:0 22px;border:1.5px solid transparent;font-size:1rem}
.storefront .mobile-menu a.btn-secondary{border-color:var(--border-strong)}
.storefront .mobile-menu a.btn-primary{color:#fff}
@media (min-width:960px){.storefront .mobile-menu{display:none}}

/* ================= Hero ================= */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,72px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero-copy{max-width:600px}
.display{font-size:var(--fs-display);letter-spacing:-.035em;margin-bottom:20px;text-wrap:balance}
.hl{color:var(--violet);white-space:nowrap}
.lead{font-size:var(--fs-lead);margin-bottom:32px}
.hero-search{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #D3D6E2;border-radius:var(--r-pill);padding:8px 8px 8px 22px;box-shadow:0 12px 32px -16px rgba(14,19,48,.18);transition:border .15s,box-shadow .15s}
.hero-search:focus-within{border-color:var(--violet);box-shadow:0 12px 32px -16px rgba(14,19,48,.18),0 0 0 4px rgba(91,46,255,.35)}
.hero-search>.i{color:var(--muted)}
.hero-search input{flex:1;min-width:0;border:0;outline:none;font-size:1.05rem;height:50px;background:transparent}
.hero-search input::placeholder{color:var(--muted);opacity:1}
.hero-search input:focus{box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:28px 0 12px}
.storefront .chip{background:var(--mint-50);font-size:var(--fs-note);height:34px;padding:0 14px}
.storefront .chip .i{color:var(--mint-600);stroke-width:2.6}
.storefront .micro{font-size:var(--fs-note);color:var(--text);text-wrap:balance}
.hero-status{margin:12px 0 0;font-size:var(--fs-note);font-weight:600;color:var(--mint-800)}
.hero-status:empty{display:none}

.hero-art{position:relative;justify-self:end;width:100%;max-width:540px}
.hero-art svg{display:block;width:100%;height:auto}
@keyframes float-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero-art .float{animation:float-sm 7s ease-in-out infinite}
.hero-art .float-b{animation-delay:-3.5s}
.hero-badge{position:absolute;top:var(--badge-top,22%);left:var(--badge-left,52%);height:auto;gap:8px;padding:8px 16px 8px 8px;font-size:14px;line-height:1;box-shadow:var(--shadow-md);animation-delay:-1.75s}
.storefront .hero-badge{color:var(--mint-800)}
.hero-badge .hb-dot{width:22px;height:22px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center}
.hero-badge .hb-dot .i{width:14px;height:14px;stroke-width:3.4}

/* ================= Platforms strip ================= */
.platforms{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px 0}
.platforms-title{text-align:center;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:16px}
.platform-names{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;list-style:none;padding:0;margin:0 0 16px}
.platform-names li{font-size:1.2rem;font-weight:700;color:var(--platform);letter-spacing:-.01em}
.platforms-note{display:block;text-align:center;font-size:var(--fs-note);color:var(--muted);margin:0 auto;text-wrap:balance}
.platforms-note .i{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:6px}

/* ================= Sections ================= */
.section{padding:var(--section) 0}
.surface{background:var(--surface);--section-bg:var(--surface)}
.section-head{max-width:640px;margin-bottom:48px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head.center p{max-width:52ch;margin-inline:auto}
.section-head h2{font-size:var(--fs-h2)}
.section-head p{text-wrap:balance}
.section-head p:last-child{margin-bottom:0}

/* Icon tiles: one size, one radius, two colour pairs (violet = what we do, mint = trust & outcome) */
.svc-icon,.v-icon,.h-icon{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.storefront .svc-icon .i,.storefront .v-icon .i,.storefront .h-icon .i{width:24px;height:24px;stroke-width:2}
.svc-icon{background:var(--violet-50);color:var(--violet)}
.svc-icon.mint,.v-icon,.h-icon{background:var(--mint-50);color:var(--mint-800)}

/* ================= Services ================= */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.service{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.service h3{font-size:var(--fs-h4);margin:16px 0 8px}
.service p{font-size:var(--fs-sm);margin-bottom:16px}
.more{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:var(--fs-sm)}
.more .i{transition:transform .15s}
.more:hover{text-decoration:none}
.more:hover .i{transform:translateX(3px)}
.service .more{margin-top:auto}
.service .more::after{content:"";position:absolute;inset:0;border-radius:inherit}
.service-wide{grid-column:span 3;flex-direction:row;gap:20px;background:var(--mint-50);border-color:var(--mint-border)}
.storefront .service-wide.card-hover:hover{border-color:var(--mint-border)}
.service-wide .svc-icon.mint{background:#fff}
.service-wide>div:last-child{display:flex;flex-direction:column;align-items:flex-start}
.service-wide h3{margin:0 0 8px}
.service-wide .more{margin-top:0}

/* ================= How it works ================= */
.stepper{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);position:relative}
.stepper::before{content:"";position:absolute;top:167px;left:12%;right:12%;border-top:2px dashed var(--border-strong)}
.stepper li{position:relative;text-align:center}
.step-art{background:#fff;border-radius:var(--r-lg);height:130px;display:grid;place-items:center;border:1px solid var(--border);margin-bottom:20px}
.step-art svg{width:140px}
.step-n{position:relative;z-index:1;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--violet);border:1.5px solid var(--violet-100);font-weight:800;margin:0 0 14px;box-shadow:0 0 0 6px var(--section-bg)}
.stepper li:last-child .step-n{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.stepper h3{font-size:var(--fs-h4);margin:0 0 8px}
.stepper p{font-size:var(--fs-sm)}

/* ================= Why ================= */
.why-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.why-intro{position:sticky;top:110px;margin-bottom:0}
.why-intro p{margin-bottom:24px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.value{padding:var(--card-pad);border-radius:var(--r-lg);background:#fff;border:1px solid var(--border)}
.value h3{font-size:var(--fs-h4);margin:16px 0 8px}
.value p{font-size:var(--fs-sm);margin:0}

/* ================= Pricing (the one tinted band) ================= */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
.price-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:32px 28px;display:flex;flex-direction:column}
.price-card.featured{border:2px solid var(--violet);box-shadow:var(--shadow-md);padding:31px 27px}
.popular{position:absolute;top:-13px;left:27px;background:var(--violet);color:#fff;font-size:13px;padding:0 12px}
.price-card h3{font-size:var(--fs-h3);margin-bottom:4px}
.p-desc{font-size:var(--fs-sm);color:var(--muted);margin-bottom:0}
.price{display:flex;align-items:baseline;gap:6px;margin:20px 0 24px}
.amt{font-size:2.4rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.per{color:var(--muted);font-size:var(--fs-sm)}
.price-note{font-size:var(--fs-note);color:var(--muted);margin:-12px 0 20px}
.feat{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px;font-size:var(--fs-sm)}
.feat li{display:flex;gap:10px;align-items:flex-start}
.storefront .feat .i{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--mint-50);color:var(--mint-600);stroke-width:3;margin-top:2px}
.pricing-note{text-align:center;font-size:var(--fs-note);color:var(--muted);margin-top:28px}

/* How ordering works (Telegram) */
.order-flow{margin-top:40px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 28px}
.order-title{font-size:var(--fs-h4);margin:0 0 16px}
.order-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.order-steps li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.45}
.order-steps a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(91,46,255,.4)}
.os-n{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--violet-100);background:#fff;color:var(--violet);display:grid;place-items:center;font-size:13px;font-weight:800;margin-top:-3px}
.order-steps li:last-child .os-n{background:var(--mint);border-color:var(--mint);color:var(--ink)}

/* ================= Proof ================= */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-bottom:var(--gap)}
.testimonials{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.stat,.quote{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--card-pad);color:var(--ink)}
.stat{min-height:140px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px}
.stat-n{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.quote{min-height:180px;display:flex;flex-direction:column;justify-content:center;gap:8px;font-size:1.125rem;line-height:1.6}
#proof small{font-size:var(--fs-note);font-weight:500;color:var(--text);line-height:1.5}

/* ================= Straight talk (light mint card) ================= */
.honesty{padding:0}
.honesty-inner{display:grid;grid-template-columns:48px 1fr;grid-template-areas:"icon head" ". cols";column-gap:24px;row-gap:16px;align-items:center;background:var(--mint-50);border:1px solid var(--mint-border);border-radius:var(--r-lg);padding:clamp(24px,4vw,48px)}
.honesty .h-icon{grid-area:icon;background:#fff}
.honesty-head{grid-area:head}
.honesty-head .eyebrow{color:var(--mint-800);margin-bottom:4px}
.honesty h2{font-size:1.75rem;margin:0}
.honesty-cols{grid-area:cols;display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}
.honesty-cols p{margin:0}
.honesty strong{color:var(--ink)}

/* ================= FAQ ================= */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;grid-template-areas:"head faq" "safe faq";grid-template-rows:auto 1fr;gap:32px 64px}
.faq-wrap .section-head{grid-area:head}
.faq{grid-area:faq}

/* Stay safe from impersonators */
.safety{grid-area:safe;align-self:start;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
.safety-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.safety-icon{flex:none;width:40px;height:40px;border-radius:var(--r-md);background:var(--amber-50);color:var(--amber-700);display:grid;place-items:center}
.storefront .safety-icon .i{width:22px;height:22px;stroke-width:2.2}
.safety h3{font-size:var(--fs-h4);margin:0}
.safety ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--fs-sm)}
.safety li{position:relative;padding-left:18px}
.safety li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.safety a{font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(91,46,255,.4)}
.faq-wrap .section-head{margin-bottom:0}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;padding:24px 48px 24px 0;font-weight:700;color:var(--ink);font-size:1.125rem;line-height:1.4;position:relative}
.faq details:first-child summary{padding-top:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--violet)}
.faq-chev{position:absolute;right:4px;top:calc(24px + .7em);transform:translateY(-50%);color:var(--ink);transition:transform .2s}
.faq details:first-child .faq-chev{top:.7em}
.faq details[open] .faq-chev{transform:translateY(-50%) rotate(180deg)}
.faq details p{padding:0 48px 24px 0;margin:0;max-width:62ch}

/* ================= Final CTA (the one gradient band) ================= */
.final-cta{padding:0 0 var(--section)}
.cta-inner{background:var(--gradient);border-radius:var(--r-xl);padding:clamp(36px,6vw,72px);display:flex;justify-content:space-between;align-items:center;gap:32px;color:var(--violet-50)}
.cta-inner h2{color:#fff;font-size:var(--fs-h2)}
.cta-inner p{margin:0;font-size:var(--fs-lead)}
.cta-inner>div:first-child{flex:1;min-width:0}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none}
.cta-ghost{color:#fff;border-color:rgba(255,255,255,.75)}
.cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ================= Footer ================= */
.site-footer{border-top:1px solid var(--border);padding:64px 0 28px;font-size:var(--fs-sm)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-grid h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:11px 0 14px}
.footer-grid a:not(.logo){display:block;color:var(--text);padding:5px 0}
.footer-grid a:not(.logo):hover{text-decoration:none;color:var(--violet)}
.f-brand p{margin:14px 0}
.f-contact{display:grid;gap:8px}
.f-contact span{display:flex;align-items:center;gap:8px}
.footer-grid .f-contact a{display:inline;padding:0;color:var(--text);font-weight:600}
.footer-grid .f-contact a:hover{color:var(--violet)}
.f-safe{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-note);color:var(--muted);margin:16px 0 0;max-width:38ch}
.f-safe .i{flex:none;color:var(--amber-700);margin-top:2px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--border);margin-top:48px;padding-top:24px;color:var(--muted);font-size:var(--fs-note);flex-wrap:wrap}
.lang{position:relative;display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--r-pill);padding:0 12px;height:40px}
.lang:focus-within{border-color:var(--violet)}
.lang>.i{color:var(--muted)}
.storefront .lang select{appearance:none;-webkit-appearance:none;border:0;background:none;outline:none;cursor:pointer;color:var(--ink);font-weight:600;font-size:var(--fs-sm);height:100%;padding:0 22px 0 0}
.lang .lang-chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
@media (pointer:coarse){.storefront .lang select{font-size:16px}}

/* ================= Shared header behaviour (unchanged; track.html relies on it) ================= */
@media (max-width:1024px){
  .main-nav{display:none}
  .nav-toggle{display:block}
}
@media (max-width:640px){
  .hide-sm{display:none}
  .nav-row{height:64px;gap:12px}
}

/* ================= Storefront: small laptops (960–1100) ================= */
@media (min-width:960px){
  .storefront .main-nav{display:flex}
  .storefront .nav-toggle{display:none}
}
@media (min-width:960px) and (max-width:1100px){
  .storefront{--fs-display:calc(5.9vw - 6px)}   /* keeps "Get harmful content" on one line in the narrower copy column */
  .storefront .main-nav{gap:20px;margin-left:0}
  .storefront .nav-row{gap:20px}
  .hero-grid{gap:32px}
  .why-grid,.faq-wrap{gap:40px}
}
@media (max-width:1100px){
  .platform-names{max-width:600px;margin:0 auto 16px}
}
/* Pricing keeps three columns down to 1000px */
@media (min-width:1000px) and (max-width:1100px){
  .pricing-grid{gap:16px}
  .price-card{padding:28px 22px}
  .price-card.featured{padding:27px 21px}
}
@media (max-width:999px){
  .pricing-grid{grid-template-columns:1fr;max-width:720px;margin:0 auto}
  .price-card{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;column-gap:32px;align-content:start}
  .price-card>:not(.feat):not(.popular){grid-column:1}
  .feat{grid-column:2;grid-row:1/span 5;margin:0;align-self:center}
  .order-flow{max-width:720px;margin-inline:auto}
  .order-steps{grid-template-columns:1fr;gap:12px}
}

/* ================= Storefront: tablet (≤959) ================= */
@media (max-width:959px){
  .storefront .nav-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;margin-right:-14px}
  .storefront .nav-toggle .i{display:block}
  .storefront.menu-open{overflow:hidden}
  .storefront.menu-open .site-header{background:#fff;box-shadow:var(--shadow-md)}
  .storefront.menu-open .mobile-menu{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - 100%);overflow-y:auto;background:#fff;padding:8px var(--gutter) 32px}

  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-copy{max-width:640px}
  .hero-art{justify-self:start;max-width:360px;margin-top:8px}
  .platforms-note{max-width:34ch}
  .services-grid{grid-template-columns:1fr 1fr}
  .service-wide{grid-column:span 2}
  .stepper{grid-template-columns:1fr 1fr}
  .stepper::before{display:none}
  .step-art{height:160px}
  .step-art svg{width:180px}
  .why-grid,.faq-wrap{grid-template-columns:1fr;gap:32px}
  .faq-wrap{grid-template-areas:"head" "faq" "safe";grid-template-rows:auto}
  .safety{max-width:720px}
  .why-intro{position:static;max-width:600px}
  .faq{max-width:720px}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .f-brand{grid-column:1/-1}
  .lang{height:44px}
}

/* ================= Storefront: phones (≤640) ================= */
@media (max-width:640px){
  .storefront{--card-pad:20px;--gap:16px}
  .storefront .nav-actions{gap:4px}
  .storefront .nav-actions .btn{height:44px;padding:0 16px;font-size:14px}

  .hero-grid{gap:24px}
  .hero-art{max-width:300px}
  .display{letter-spacing:-.025em;line-height:1.08}
  .lead{font-size:1.125rem}
  .hero-search{flex-direction:column;align-items:stretch;border:0;box-shadow:none;background:none;padding:0;gap:10px;border-radius:0}
  .hero-search:focus-within{box-shadow:none}
  .hero-search>.i{display:none}
  .hero-search input{flex:none;height:56px;background:#fff;border:1.5px solid var(--border-strong);border-radius:var(--r-pill);padding:0 20px;box-shadow:var(--shadow-md)}
  .hero-search input:focus{border-color:var(--violet);box-shadow:var(--ring)}
  .hero-search .btn{width:100%;height:56px}

  .platforms{padding:24px 0}
  .platform-names{gap:6px 18px}
  .platform-names li{font-size:.95rem;color:var(--muted)}   /* below large-text size, so it needs 4.5:1 */

  .section-head.center{text-align:left;margin-left:0}
  .section-head.center p{margin-inline:0}
  .pricing-note{text-align:left}

  .services-grid{grid-template-columns:1fr}
  .service{display:grid;grid-template-columns:48px 1fr;column-gap:16px;padding:20px}
  .service .svc-icon{grid-row:span 3}
  .service h3{margin:2px 0 4px}
  .service p{margin-bottom:8px}
  .service .more{margin-top:0}
  .service-wide{grid-column:auto;row-gap:0}
  .service-wide .svc-icon{grid-row:auto;align-self:start}

  .stepper{grid-template-columns:1fr;gap:24px}
  .stepper li{display:grid;grid-template-columns:88px 1fr;column-gap:16px;text-align:left;align-items:start}
  .step-art{grid-row:span 3;height:88px;margin:0}
  .step-art svg{width:76px}
  .step-n{justify-self:start;width:28px;height:28px;font-size:14px;margin:0 0 6px;box-shadow:none}
  .stepper h3{margin-bottom:4px}
  .stepper p{margin:0}

  .values{grid-template-columns:1fr;gap:12px}
  .value{display:grid;grid-template-columns:48px 1fr;column-gap:14px;padding:20px}
  .value .v-icon{grid-row:span 2}
  .value h3{margin:2px 0 4px}
  .why-intro .btn{width:100%}

  .price-card{display:flex;padding:24px 20px}
  .price-card.featured{padding:23px 19px}
  .price{margin:16px 0 16px}
  .amt{font-size:2rem}
  .feat{margin-top:18px;gap:8px;align-self:stretch}

  .stats{grid-template-columns:1fr;gap:8px}
  .stat{min-height:0;padding:16px 20px;flex-direction:row;justify-content:space-between;align-items:center;text-align:left;gap:12px}
  .stat-n{font-size:1.125rem;white-space:nowrap}
  #proof .stat small{text-align:right}
  .testimonials{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;scroll-padding-inline:var(--gutter)}
  .quote{flex:0 0 85%;min-height:140px;scroll-snap-align:start}

  .honesty-inner{grid-template-areas:"icon head" "cols cols";column-gap:16px}
  .honesty-cols{grid-template-columns:1fr}

  .cta-inner{padding:32px 24px;border-radius:var(--r-lg)}
  .order-flow{padding:20px}
  .safety{padding:20px}
  .cta-actions,.cta-actions .btn{width:100%}

  .footer-grid{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:32px}
  .f-brand,.footer-grid>div:last-child{grid-column:1/-1}
  .footer-grid>div:last-child a{display:inline-block;margin-right:20px}
}
@media (max-width:400px){
  .hero{padding-top:16px}
  .lead{margin-bottom:24px}
  .service{grid-template-columns:40px 1fr;column-gap:14px;padding:16px}
  .service .svc-icon{width:40px;height:40px;border-radius:12px}
  .service h3{font-size:1.05rem}
}
/* Landscape phones: give the first screen to the headline and the input */
@media (orientation:landscape) and (max-height:500px){
  .hero{padding-top:24px}
  .hero-art{display:none}
}