/* Afnihi public site layout: built on tokens.css.
   Every public page (templates/public/base.html) carries body.storefront. */
.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:24px;height:56px}
.main-nav{display:flex;gap:22px;margin-left:8px}
.main-nav a{color:var(--ink);font-weight:600;font-size:var(--fs-sm)}
.main-nav a:hover{color:var(--violet);text-decoration:none}
.main-nav a.nav-current{color:var(--violet)}
.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)}
/* Phone menu: a drawer that slides in from the right (js/site.js toggles body.menu-open). */
.mm-scrim{position:fixed;inset:0;z-index:65;overflow:hidden;background:rgba(14,19,48,0);visibility:hidden;transition:background .2s,visibility 0s linear .22s}
.menu-open .mm-scrim{background:rgba(14,19,48,.45);visibility:visible;transition:background .2s}
.mobile-menu{position:absolute;top:0;right:0;bottom:0;width:min(86vw,320px);background:#fff;border-left:1px solid var(--border);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;padding:12px;overflow-y:auto;transform:translateX(104%);transition:transform .22s ease}
.menu-open .mobile-menu{transform:none}
body.menu-open{overflow:hidden}
.mm-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 4px 12px 8px}
.mm-close{flex:none;width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.mm-close:hover{background:var(--surface)}
.mm-links{display:flex;flex-direction:column;gap:2px}
.mm-links a{display:flex;align-items:center;gap:12px;height:46px;padding:0 10px;border-radius:10px;color:var(--ink);font-weight:600;font-size:var(--fs-body)}
.mm-links a:hover{background:var(--surface);text-decoration:none}
.mm-links a .i{color:var(--muted)}
.mm-links a.nav-current{background:var(--violet-50);color:var(--violet)}
.mm-links a.nav-current .i{color:inherit}
.mm-actions{margin-top:auto;display:grid;gap:10px;padding:12px 4px 4px;border-top:1px solid var(--border)}
.mm-actions .btn{width:100%;height:44px;font-size:var(--fs-body)}
.mm-safe{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
.mm-safe .i{flex:none;color:var(--mint-700);margin-top:1px}
@media (min-width:960px){.mm-scrim{display:none}}
.micro{font-size:var(--fs-xs);color:var(--muted)}

/* ================= Storefront tokens (scoped) ================= */
.storefront{
  --muted:#666C8A;                 /* 5.15:1 on white (was #8A90AB, 3.15:1) */
  --platform:#666C8A;              /* platform names: small text, so it needs 4.5:1 */
  --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(1.75rem,1rem + 2.2vw,2.375rem);
  --fs-h2:clamp(1.25rem,.9rem + 1vw,1.5rem);
  --fs-h3:1rem;                    /* plan names */
  --fs-h4:.9375rem;                /* card, step and value titles */
  --fs-lead:1rem;
  --fs-note:.75rem;                /* reassurance & disclaimer lines */
  --card-pad:18px;
  --gap:16px;
  --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.2}
.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 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 4px 12px -6px rgba(91,46,255,.55)}
.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(-3px);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:32px;padding:0 14px;font-size:var(--fs-sm)}
.storefront .nav-actions .btn-primary{box-shadow:0 3px 10px -6px rgba(91,46,255,.45)}
.storefront .nav-actions .btn-primary:focus-visible{box-shadow:0 3px 10px -6px rgba(91,46,255,.45)}
.storefront .mobile-menu a.btn-primary{color:#fff}

/* ================= Hero ================= */
.hero{padding:clamp(32px,4.5vw,56px) 0 clamp(28px,4vw,44px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center}
.hero-copy{max-width:520px}
.display{font-size:var(--fs-display);letter-spacing:-.03em;margin-bottom:12px;text-wrap:balance}
.hl{color:var(--violet);white-space:nowrap}
.lead{font-size:var(--fs-lead);margin-bottom:20px}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:18px 0 10px}
.storefront .chip{background:var(--mint-50);font-size:var(--fs-note);height:26px;padding:0 10px}
.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-art{position:relative;justify-self:end;width:100%;max-width:400px}
.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:6px;padding:5px 12px 5px 5px;font-size:12px;line-height:1;box-shadow:var(--shadow-md);animation-delay:-1.75s}
.storefront .hero-badge{color:var(--mint-800)}
.hero-badge .hb-dot{width:18px;height:18px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center}
.hero-badge .hb-dot .i{width:11px;height:11px;stroke-width:3.4}

/* ================= Platforms strip ================= */
.platforms{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:20px 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:10px}
.platform-names{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;list-style:none;padding:0;margin:0 0 10px}
.platform-names li{font-size:.9375rem;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:12px;height:12px;vertical-align:-2px;margin-right:5px}

/* ================= Sections ================= */
.section{padding:var(--section) 0}
.section-tight{padding-top:clamp(24px,3vw,36px)}
.surface{background:var(--surface);--section-bg:var(--surface)}
.section-head{max-width:560px;margin-bottom:28px}
.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}
.section-head.split{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;margin-bottom:20px}
.section-head.split h2{margin:0}

/* Inner pages: title block */
.page-head{padding:clamp(28px,4vw,48px) 0 0}
.page-head h1,.page-first h1{font-size:var(--fs-h1);margin-bottom:8px}
.page-head .lead{max-width:60ch;margin-bottom:0}
.page-head+.surface{margin-top:clamp(20px,3vw,32px)}
.page-first{padding-top:clamp(28px,4vw,48px)}

/* Icon tiles: one size, one radius, two colour pairs (violet = what we do, mint = trust & outcome) */
.svc-icon,.v-icon,.h-icon{width:36px;height:36px;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:18px;height:18px;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)}

.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)}

/* ================= Home: compact service list ================= */
.svc-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.svc-mini a{display:flex;align-items:center;gap:10px;height:100%;padding:12px;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.svc-mini a:hover{text-decoration:none;border-color:var(--violet-100);box-shadow:var(--shadow-md)}
.svc-mini b{display:block;font-size:var(--fs-sm);font-weight:700;line-height:1.3}
.svc-mini small{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--muted);line-height:1.35;margin-top:2px}
.svc-mini-note a{background:var(--surface);border-style:dashed;border-color:var(--border-strong)}

/* ================= Home: step summary ================= */
.steps-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.steps-mini li{display:flex;gap:10px;align-items:flex-start}
.steps-mini .step-n{flex:none;margin:0;box-shadow:none}
.steps-mini li:last-child .step-n{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.steps-mini h3{font-size:var(--fs-h4);margin:4px 0 2px}
.steps-mini p{font-size:var(--fs-sm);margin:0}

/* ================= Home: client panel preview ================= */
.panel-promo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.panel-copy{margin-bottom:0;max-width:none}
.panel-points{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;font-size:var(--fs-sm)}
.panel-points li{display:flex;gap:10px;align-items:flex-start}
.storefront .panel-points .i{flex:none;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--mint-50);color:var(--mint-600);stroke-width:3;margin-top:2px}
.panel-points b{color:var(--ink)}
.panel-actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin:20px 0 0}
.panel-mock{border:1px solid var(--border-strong);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow-lg);overflow:hidden;font-size:11px;line-height:1.35;user-select:none}
.pm-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
.pm-bar i{width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.pm-bar span{margin-left:8px;flex:1;max-width:220px;background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 10px;color:var(--muted);font-weight:600}
.pm-body{display:grid;grid-template-columns:54px minmax(0,1fr);background:var(--surface)}
.pm-side{background:#fff;border-right:1px solid var(--border);padding:12px 9px;display:grid;gap:7px;align-content:start}
.pm-side b{height:9px;border-radius:5px;background:var(--ink);margin-bottom:6px}
.pm-side span{height:9px;border-radius:5px;background:var(--border)}
.pm-side span.on{background:var(--violet)}
.pm-main{padding:14px;display:grid;gap:10px}
.pm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pm-stats div{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:9px 10px;display:grid;gap:1px}
.pm-stats b{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.pm-stats em{font-style:normal;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0}
.pm-stats small{font-size:10.5px;color:var(--text)}
.pm-stats .pm-wait{background:var(--amber-50);border-color:#F7DDA8}
.pm-stats .pm-wait b{color:var(--amber-700)}
.pm-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:2px 12px}
.pm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0}
.pm-row+.pm-row{border-top:1px solid var(--border)}
.pm-row>span:first-child{display:grid;gap:1px;min-width:0}
.pm-row b{color:var(--ink);font-size:11.5px;font-variant-numeric:tabular-nums lining-nums}
.pm-row small{font-size:10.5px;color:var(--muted)}
.pm-row .badge{height:19px;font-size:10px;padding:0 7px}
.pm-cap{margin:0;text-align:right;font-size:10px;color:var(--muted)}

/* ================= Services page ================= */
.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;scroll-margin-top:72px}
.service h2{font-size:var(--fs-h4);margin:12px 0 6px;line-height:1.3;letter-spacing:-.01em;font-weight:700}
.service p{font-size:var(--fs-sm);margin-bottom:8px}
.service p:first-of-type{color:var(--ink);font-weight:600}
.service p:last-child{margin-bottom:0}
.service-wide{grid-column:span 3;flex-direction:row;gap:14px;background:var(--mint-50);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 h2{margin:0 0 6px}
.services-next{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 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:123px;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:96px;display:grid;place-items:center;border:1px solid var(--border);margin-bottom:14px}
.step-art svg{width:104px}
.step-n{position:relative;z-index:1;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--violet);border:1.5px solid var(--violet-100);font-weight:800;font-size:var(--fs-sm);margin:0 0 10px;box-shadow:0 0 0 5px 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 4px}
.stepper p{font-size:var(--fs-sm)}

/* ================= Why ================= */
.why-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.why-intro{position:sticky;top:80px;margin-bottom:0}
.why-intro p{margin-bottom:16px}
.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:12px 0 6px}
.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:20px 18px;display:flex;flex-direction:column}
.price-card.featured{border:2px solid var(--violet);box-shadow:var(--shadow-md);padding:19px 17px}
.popular{position:absolute;top:-11px;left:17px;background:var(--violet);color:#fff;font-size:11px;padding:0 10px}
.price-card h3{font-size:var(--fs-h3);margin-bottom:2px}
.p-desc{font-size:var(--fs-sm);color:var(--muted);margin-bottom:0}
.price{display:flex;align-items:baseline;gap:6px;margin:14px 0 16px;flex-wrap:wrap}
.amt{font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.amt-quote{font-size:1.125rem;letter-spacing:-.02em;line-height:1.2}
.per{color:var(--muted);font-size:var(--fs-sm)}
.price-note{font-size:var(--fs-note);color:var(--muted);margin:-8px 0 14px}
.feat{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)}
.feat li{display:flex;gap:8px;align-items:flex-start}
.storefront .feat .i{flex:none;width:16px;height:16px;padding:2px;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:18px 0 0}

/* How ordering works (Telegram) */
.order-flow{margin-top:24px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px}
.order-title{font-size:var(--fs-h4);margin:0 0 12px}
.order-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.order-steps li{display:flex;gap:8px;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:22px;height:22px;border-radius:50%;border:1.5px solid var(--violet-100);background:#fff;color:var(--violet);display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:-2px}
.order-steps li:last-child .os-n{background:var(--mint);border-color:var(--mint);color:var(--ink)}

/* ================= Straight talk (light mint card) ================= */
.honesty{padding:0 0 var(--section)}
.honesty-inner{display:grid;grid-template-columns:36px 1fr;grid-template-areas:"icon head" ". cols";column-gap:16px;row-gap:12px;align-items:center;background:var(--mint-50);border:1px solid var(--mint-border);border-radius:var(--r-lg);padding:clamp(18px,3vw,28px)}
.honesty .h-icon{grid-area:icon;background:#fff}
.honesty-head{grid-area:head}
.honesty-head .eyebrow{color:var(--mint-800);margin-bottom:2px}
.honesty h2{font-size:1.25rem;margin:0}
.honesty-cols{grid-area:cols;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.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:24px 40px}
.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:16px}
.safety-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.safety-icon{flex:none;width:32px;height:32px;border-radius:var(--r-md);background:var(--amber-50);color:var(--amber-700);display:grid;place-items:center}
.storefront .safety-icon .i{width:18px;height:18px;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:6px;font-size:var(--fs-sm)}
.safety li{position:relative;padding-left:16px}
.safety li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;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:14px 36px 14px 0;font-weight:700;color:var(--ink);font-size:.9375rem;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(14px + .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 36px 14px 0;margin:0;max-width:62ch}

/* ================= Final CTA (the one gradient band) ================= */
.final-cta{padding:0 0 var(--section)}
.surface+.final-cta{padding-top:var(--section)}
.cta-inner{background:var(--gradient);border-radius:var(--r-xl);padding:clamp(22px,3.5vw,36px);display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--violet-50)}
.cta-inner h2{color:#fff;font-size:var(--fs-h2);margin-bottom:6px}
.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:10px;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:36px 0 20px;font-size:var(--fs-sm)}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:28px}
.footer-grid h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:6px 0 10px}
.footer-grid a:not(.logo){display:block;color:var(--text);padding:3px 0}
.footer-grid a:not(.logo):hover{text-decoration:none;color:var(--violet)}
.f-brand p{margin:10px 0}
.f-contact{display:grid;gap:6px}
.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:12px 0 0;max-width:44ch}
.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:28px;padding-top:16px;color:var(--muted);font-size:var(--fs-note);flex-wrap:wrap}

/* ================= Header behaviour ================= */
@media (max-width:1024px){
  .main-nav{display:none}
  .nav-toggle{display:block}
}
@media (max-width:640px){
  .hide-sm{display:none}
  .nav-row{height:52px;gap:12px}
}

/* ================= Small laptops (960 to 1100) ================= */
@media (min-width:960px){
  .storefront .main-nav{display:flex}
  .storefront .nav-toggle{display:none}
}
@media (min-width:960px) and (max-width:1100px){
  .storefront .main-nav{gap:18px;margin-left:0}
  .storefront .nav-row{gap:18px}
  .hero-grid{gap:24px}
  .why-grid,.faq-wrap{gap:28px}
}
@media (max-width:1100px){
  .platform-names{max-width:520px;margin:0 auto 10px}
}
/* Pricing keeps three columns down to 900px */
@media (max-width:899px){
  .pricing-grid{grid-template-columns:1fr;max-width:640px;margin:0 auto}
  .price-card{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;column-gap:24px;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:640px;margin-inline:auto}
  .order-steps{grid-template-columns:1fr;gap:10px}
}

/* ================= Tablet (≤959) ================= */
@media (max-width:959px){
  .storefront .nav-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;margin-right:-12px}
  .storefront .nav-toggle .i{display:block;width:22px;height:22px}

  .hero-grid{grid-template-columns:1fr;gap:24px}
  .panel-promo{grid-template-columns:1fr}
  .panel-mock{max-width:520px}
  .hero-copy{max-width:560px}
  .hero-art{justify-self:start;max-width:300px;margin-top:4px}
  .platforms-note{max-width:40ch}
  .svc-mini{grid-template-columns:1fr 1fr}
  .steps-mini{grid-template-columns:1fr 1fr}
  .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:120px}
  .step-art svg{width:130px}
  .why-grid,.faq-wrap{grid-template-columns:1fr;gap:24px}
  .faq-wrap{grid-template-areas:"head" "faq" "safe";grid-template-rows:auto}
  .safety{max-width:640px}
  .why-intro{position:static;max-width:560px}
  .faq{max-width:640px}
  .cta-inner{flex-direction:column;align-items:flex-start}
}

/* ================= Phones (≤640) ================= */
@media (max-width:640px){
  .storefront{--card-pad:14px;--gap:12px}
  .storefront .nav-actions{gap:4px}
  .storefront .nav-actions .btn{height:36px;padding:0 14px}

  .hero-grid{gap:20px}
  .hero-art{max-width:240px}
  .display{letter-spacing:-.025em;line-height:1.1}

  .platforms{padding:16px 0}
  .platform-names{gap:4px 14px}
  .platform-names li{font-size:var(--fs-sm)}

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

  .svc-mini{grid-template-columns:1fr;gap:8px}
  .steps-mini{grid-template-columns:1fr}
  .panel-actions .btn{width:100%}
  .pm-row .badge{white-space:normal;height:auto;padding:2px 7px;text-align:right}

  .services-grid{grid-template-columns:1fr}
  .service{display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding:14px}
  .service .svc-icon{grid-row:span 3}
  .service h2{margin:2px 0 4px}
  .service-wide{grid-column:auto;row-gap:0}
  .service-wide .svc-icon{grid-row:auto;align-self:start}
  .services-next .btn{flex:1}

  .stepper{grid-template-columns:1fr;gap:16px}
  .stepper li{display:grid;grid-template-columns:72px 1fr;column-gap:12px;text-align:left;align-items:start}
  .step-art{grid-row:span 3;height:72px;margin:0}
  .step-art svg{width:62px}
  .step-n{justify-self:start;width:24px;height:24px;font-size:var(--fs-xs);margin:0 0 4px;box-shadow:none}
  .stepper h3{margin-bottom:2px}
  .stepper p{margin:0}

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

  .price-card{display:flex;padding:16px 14px}
  .price-card.featured{padding:15px 13px}
  .price{margin:12px 0 14px}
  .amt{font-size:1.375rem}
  .amt-quote{font-size:1.0625rem}
  .feat{margin-top:14px;gap:6px;align-self:stretch}

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

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

  .footer-grid{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:24px}
  .f-brand{grid-column:1/-1}
}
@media (max-width:400px){
  .hero{padding-top:20px}
  .lead{margin-bottom:16px}
}
/* Landscape phones: give the first screen to the headline and the actions */
@media (orientation:landscape) and (max-height:500px){
  .hero{padding-top:20px}
  .hero-art{display:none}
}

/* ================= Phones: reading size and tap targets ================= */
/* Body copy one step larger, and every control at least 40px tall (primary actions 44px), whether
   or not the browser reports a coarse pointer. Desktop is untouched. */
@media (max-width:640px){
  .storefront{--fs-body:.9375rem;--fs-sm:.875rem}
  .storefront .nav-actions .btn{height:40px}
  .nav-row .logo,.mm-head .logo,.f-brand .logo{min-height:40px}
  .storefront main .btn{min-height:44px}
  .storefront main .btn-sm{min-height:40px}
  .storefront .input,.storefront .select{height:44px;font-size:16px}
  .storefront .textarea{font-size:16px}
  .more{min-height:40px}
  .page-head h1,.page-first h1{line-height:1.18}
  .section-head{margin-bottom:20px}
  .faq summary{padding:15px 36px 15px 0}
  .faq details:first-child summary{padding-top:4px}
  .cta-inner h2{font-size:1.375rem}
  .site-footer{padding-top:28px}
  .footer-grid a:not(.logo){padding:10px 0;line-height:1.4}
  .footer-grid h4{margin:0 0 4px}
  .footer-grid .f-contact a{display:inline-block;padding:10px 0}
  .footer-bottom{margin-top:20px}
}