/* ============================================================
   Faas marketing site stylesheet.
   Built on the Mono Notion tokens, set in Plus Jakarta Sans, (see .claude/skills/faas-design-system/faas.css).
   Flat: no box-shadow. Hairline borders. Green (token) is the call-to-action colour.
   No JavaScript: every effect is CSS (scroll-driven animations degrade to static content).
   ============================================================ */
:root{
  --bg:#f7f7f5; --surface:#ffffff; --chrome:#fbfbfa;
  --ink:#37352f; --muted:#6b6a67; --muted2:#9b9a97;
  --line:#ebebea; --accent:#37352f; --soft:#f1f1ef; --active:#ececeb;
  --r:10px; --r-sm:8px; --r-xs:6px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --green:#047857; --green-s:#e7f3ec; --amber:#b45309; --amber-s:#fdf1e3;
  --red:#be123c; --red-s:#fdeaee; --blue:#1d4ed8; --blue-s:#e8eefb;
  --ease:cubic-bezier(.22,.8,.24,1);
  --hh:68px;
}
/* Plus Jakarta Sans (OFL, assets/fonts/plus-jakarta-sans-OFL.txt), one variable file per script */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
@property --p{syntax:'<integer>';inherits:false;initial-value:0}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px)}
html,body{margin:0}
/* Safety net only: the real causes of sideways scroll are fixed where they start (see the reveal
   animations below). clip, unlike hidden, makes no scroll container, so the sticky header and the
   sticky table of contents keep working; browsers without clip keep the hidden fallback. */
html,body{overflow-x:hidden;overflow-x:clip}
body{font-family:var(--font);background:var(--surface);color:var(--ink);line-height:1.55;-webkit-text-size-adjust:100%}
main{overflow-x:clip}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
svg.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hid{position:absolute;opacity:0;pointer-events:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
.narrow{max-width:820px;margin:0 auto;padding:0 28px}
.mut{color:var(--muted)} .mut2{color:var(--muted2)}
.lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);font-weight:700}
.mono{font-family:var(--mono)}
.r{text-align:right}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--green-s);color:var(--ink)}

/* ---------- scroll progress + header ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--green);transform-origin:0 50%;transform:scaleX(0);z-index:60}
@supports (animation-timeline:scroll()){
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}
}
.promo{background:var(--soft);font-size:13px;text-align:center;padding:9px 16px;color:var(--ink);border-bottom:1px solid var(--line)}
.promo a{font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-left:6px}
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;animation:drop .6s var(--ease) both}
@keyframes drop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@supports (animation-timeline:scroll()){
  header.nav{animation:drop .6s var(--ease) both,hline linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 120px}
  @keyframes hline{to{border-bottom-color:var(--line)}}
}
.nav .row{display:flex;align-items:center;gap:8px;height:var(--hh);position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.02em;margin-right:18px}
.brand{color:var(--ink)}
.mark{width:30px;height:30px;flex:none;color:var(--green);transition:transform .5s var(--ease)}
.brand:hover .mark{transform:translateX(3px)}
.menu{display:flex;align-items:center;gap:2px;flex:1}
.mi{position:static}
.mi > a,.mi > button{display:flex;align-items:center;gap:5px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:none;border:0;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;position:relative}
.mi > a::after,.mi > button::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.mi:hover > a::after,.mi:hover > button::after,.mi:focus-within > button::after,.mi.on > a::after,.mi.on > button::after{transform:scaleX(1)}
.mi svg.ic{width:13px;height:13px;transition:transform .3s var(--ease)}
.mi:hover > button svg.ic,.mi:focus-within > button svg.ic{transform:rotate(180deg)}
.mega{position:absolute;left:28px;top:calc(100% - 2px);width:max-content;max-width:calc(100vw - 56px);min-width:560px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:grid;gap:8px 28px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s linear .2s}
.mi:hover .mega,.mi:focus-within .mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega.c2{grid-template-columns:1fr 1fr}
.mega.c3{grid-template-columns:1fr 1fr 1fr;min-width:760px}
.mega h5{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);margin:0 0 6px}
.mega a{display:flex;gap:11px;align-items:flex-start;padding:8px 10px;margin:0 -10px;border-radius:var(--r-sm);font-size:14px;font-weight:600;transition:background .2s,transform .25s var(--ease)}
.mega a:hover{background:var(--soft);transform:translateX(3px)}
.mega a small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:1px}
.mega a .ci{width:30px;height:30px;border-radius:8px;background:var(--soft);display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.mega a:hover .ci{background:var(--green-s);color:var(--green)}
.mega .all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:12px;color:var(--green);font-weight:700}
.mi:hover .mega a,.mi:focus-within .mega a{animation:mitem .4s var(--ease) both}
.mega a:nth-child(2){animation-delay:.02s}.mega a:nth-child(3){animation-delay:.04s}.mega a:nth-child(4){animation-delay:.06s}.mega a:nth-child(5){animation-delay:.08s}.mega a:nth-child(6){animation-delay:.1s}.mega a:nth-child(7){animation-delay:.12s}.mega a:nth-child(8){animation-delay:.14s}
@keyframes mitem{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.acts{display:flex;align-items:center;gap:10px;margin-left:auto}
.acts .login{font-size:15px;font-weight:700;padding:9px 14px;border-radius:var(--r-sm);border:1px solid var(--line);transition:background .2s}
.acts .login:hover{background:var(--soft)}
.burger{display:none;cursor:pointer;box-sizing:border-box;width:41px;height:41px;padding:0;align-items:center;justify-content:center;flex:none;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface,#fff);color:var(--ink)}
.burger svg{display:block;width:20px;height:20px}
/* The open menu is a solid sheet from under the header bar to the bottom of the screen and scrolls on
   its own. While it is open the page behind it does not scroll and the promo strip steps aside, so the
   header sits at the very top and the sheet below it fills the rest of the screen exactly. */
.mpanel{display:none;position:absolute;left:0;right:0;top:100%;height:calc(100vh - var(--hh));height:calc(100dvh - var(--hh));border-top:1px solid var(--line);background:var(--surface);padding:6px 28px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mpanel details{border-bottom:1px solid var(--line)}
.mpanel summary{font-weight:700;padding:14px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.mpanel summary::-webkit-details-marker{display:none}
.mpanel details a,.mpanel > a{display:block;padding:9px 0 9px 12px;color:var(--muted);font-weight:600;font-size:15px}
.mpanel > a{padding-left:0;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line);padding-top:14px;padding-bottom:14px}
#menu:checked ~ .mpanel{display:block;animation:fadein .2s var(--ease)}
.mpanel .mauth{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:20px}
.mpanel .mauth .btn{width:100%;padding-left:12px;padding-right:12px}
html:has(#menu:checked){overflow:hidden}
body:has(#menu:checked) .promo{display:none}
header.nav:has(#menu:checked){background:var(--surface)}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:inherit;font-size:15px;font-weight:700;padding:12px 22px;border-radius:var(--r-sm);cursor:pointer;transition:transform .3s var(--ease),background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn:hover{background:var(--soft);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.pri{background:var(--green);border-color:var(--green);color:#fff}
.btn.pri:hover{background:var(--green);filter:brightness(.92)}
.btn.pri::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 5s var(--ease) 1.5s infinite}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn.dark{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.dark:hover{background:var(--accent);filter:brightness(1.15)}
.btn.inv{background:#fff;color:var(--ink);border-color:#fff}
.btn.ghost-inv{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn.ghost-inv:hover{background:rgba(255,255,255,.12)}
.btn.sm{padding:8px 14px;font-size:14px}
.btn.xs{padding:5px 10px;font-size:12px;border-radius:var(--r-xs)}
.btn.block{width:100%}
.btn svg.ic{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg.ic{transform:translateX(4px)}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--green);position:relative}
.link svg.ic{width:15px;height:15px;transition:transform .3s var(--ease)}
.link:hover svg.ic{transform:translateX(4px)}
.bdg{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--muted)}
.bdg.green{background:var(--green-s);color:var(--green)}.bdg.amber{background:var(--amber-s);color:var(--amber)}.bdg.blue{background:var(--blue-s);color:var(--blue)}.bdg.red{background:var(--red-s);color:var(--red)}

/* ---------- entrance + scroll-driven reveal ---------- */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s var(--ease) both;animation-delay:calc(var(--d,0) * 90ms)}
.popin{animation:pop .9s var(--ease) both;animation-delay:calc(var(--d,0) * 90ms)}
@supports (animation-timeline:view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
  .reveal.l{animation-name:slideL}.reveal.rr{animation-name:slideR}.reveal.s{animation-name:pop}
  .reveal[style*="--i"]{animation-range:entry calc(var(--i) * 5%) entry calc(38% + var(--i) * 5%)}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:76px 0 70px;overflow:hidden;background:var(--surface)}
.hero.tint{background:var(--green-s)} .hero.tint-b{background:var(--blue-s)} .hero.tint-a{background:var(--amber-s)} .hero.tint-g{background:var(--bg)}
.hero .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero.center .grid{grid-template-columns:1fr;text-align:center;justify-items:center}
.hero.center .sub{margin-left:auto;margin-right:auto}
.hero.center .cta{justify-content:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;background:var(--surface);border:1px solid var(--line);padding:5px 14px 5px 6px;border-radius:999px;margin-bottom:22px}
.eyebrow b{background:var(--green);color:#fff;border-radius:999px;font-size:11px;padding:2px 9px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.hero h1{font-size:clamp(36px,5.2vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.03em}
.hero .sub{font-size:19px;color:var(--muted);margin-top:22px;max-width:540px}
.hero.tint .sub,.hero.tint-b .sub,.hero.tint-a .sub{color:#4f4e4a}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fine{font-size:13px;color:var(--muted);margin-top:16px;display:flex;align-items:center;gap:8px}
.fine svg.ic{width:15px;height:15px;color:var(--green)}
.blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.blobs i:nth-child(1){width:380px;height:380px;background:var(--blue-s);left:-120px;top:-100px;animation:drift 18s ease-in-out infinite alternate}
.blobs i:nth-child(2){width:320px;height:320px;background:var(--green-s);right:-80px;bottom:-120px;animation:drift 22s ease-in-out -6s infinite alternate-reverse}
.hero.tint .blobs i:nth-child(1),.hero.tint-b .blobs i:nth-child(1){background:var(--surface)}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}

/* stage = tinted organic panel that holds a person image + floating UI cards */
.stage{position:relative;padding:0}
.stage .shape{position:relative;aspect-ratio:1/1.02;border-radius:42% 58% 55% 45% / 46% 42% 58% 54%;overflow:hidden;background:var(--blue-s);animation:morph 14s ease-in-out infinite alternate}
@keyframes morph{0%{border-radius:42% 58% 55% 45% / 46% 42% 58% 54%}50%{border-radius:55% 45% 42% 58% / 54% 56% 44% 46%}100%{border-radius:46% 54% 60% 40% / 42% 52% 48% 58%}}
.stage .shape.rect{aspect-ratio:4/3;border-radius:28px;animation:none}
.fcard{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px;z-index:3;animation:float 6s ease-in-out infinite;transition:transform .4s var(--ease)}
.fcard b{display:block;font-size:20px;letter-spacing:-.02em;margin-top:2px}
.fcard.a{left:-4%;top:12%} .fcard.b{right:-2%;top:30%;animation-delay:-2s;animation-duration:7s} .fcard.c{left:4%;bottom:6%;animation-delay:-4s;animation-duration:8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.fcard .row{display:flex;align-items:center;gap:10px}
.fcard .ok{width:26px;height:26px;border-radius:50%;background:var(--green-s);color:var(--green);display:grid;place-items:center}
.fcard .ok svg.ic{width:14px;height:14px;stroke-dasharray:24;stroke-dashoffset:24;animation:draw 1.2s var(--ease) 1.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.toast{position:absolute;right:3%;bottom:-16px;z-index:4;background:var(--accent);color:#fff;border-radius:12px;padding:11px 14px;font-size:13px;display:flex;gap:10px;align-items:center;animation:toast 9s var(--ease) 2s infinite}
@keyframes toast{0%{opacity:0;transform:translateY(20px) scale(.96)}6%,40%{opacity:1;transform:none}46%,100%{opacity:0;transform:translateY(-12px)}}

/* ---------- image placeholders ---------- */
.ph{position:relative;display:block;width:100%;background:var(--soft);overflow:hidden;border-radius:18px}
.ph.r-1x1{aspect-ratio:1/1}.ph.r-4x3{aspect-ratio:4/3}.ph.r-3x2{aspect-ratio:3/2}.ph.r-16x9{aspect-ratio:16/9}.ph.r-3x4{aspect-ratio:3/4}.ph.r-4x5{aspect-ratio:4/5}.ph.r-21x9{aspect-ratio:21/9}
.ph.fill{height:100%;aspect-ratio:auto;border-radius:0}
.ph .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(55,53,47,.035) 14px 15px);color:var(--muted)}
.ph .in::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 4.5s ease-in-out infinite}
.ph .in svg.ic{width:30px;height:30px;stroke-width:1.4}
.ph .in b{font-size:12px;color:var(--ink);font-family:var(--mono);font-weight:600;word-break:break-all}
.ph .in span{font-size:11.5px;max-width:34ch;line-height:1.4}
.ph .kind{position:absolute;left:10px;top:10px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--muted);z-index:2}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ph:hover img{transform:scale(1.04)}

/* ---------- sections ---------- */
section.s{padding:96px 0}
section.s.tint-g{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.s.tint-green{background:var(--green-s)} section.s.tint-blue{background:var(--blue-s)} section.s.tint-amber{background:var(--amber-s)}
section.s.dark{background:var(--accent);color:#fff}
section.s.dark .mut,section.s.dark p{color:rgba(255,255,255,.74)}
.sh{max-width:760px;margin:0 auto 52px;text-align:center}
.sh.left{margin-left:0;text-align:left}
.sh h2,.h2{font-size:clamp(28px,3.6vw,44px);line-height:1.1;font-weight:800;letter-spacing:-.025em}
.sh p{font-size:18px;color:var(--muted);margin-top:16px}
.kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.statement{padding:84px 0;text-align:center}
.statement h2{font-size:clamp(28px,3.8vw,48px);line-height:1.12;font-weight:800;letter-spacing:-.025em;max-width:900px;margin:0 auto}
.statement p{font-size:19px;color:var(--muted);margin:16px auto 0;max-width:640px}

/* marquee */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);padding:20px 0;overflow:hidden}
.trust .lbl{display:block;text-align:center;margin-bottom:14px}
.mq{display:flex;gap:12px;width:max-content;animation:mq 38s linear infinite}
.trust:hover .mq{animation-play-state:paused}
.mq-wrap{mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
@keyframes mq{to{transform:translateX(calc(-50% - 6px))}}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;white-space:nowrap}
.chip svg.ic{color:var(--green)}

/* card grids */
.cgrid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.cgrid.c2{grid-template-columns:repeat(2,1fr)}.cgrid.c4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--surface);display:flex;flex-direction:column;gap:10px;transition:transform .4s var(--ease),border-color .3s,background .3s}
.card:hover{transform:translateY(-6px);border-color:var(--ink)}
.card .fi{width:50px;height:50px;border-radius:14px;background:var(--soft);display:grid;place-items:center;margin-bottom:6px;transition:background .3s,color .3s,transform .5s var(--ease)}
.card:hover .fi{background:var(--green);color:#fff;transform:rotate(-6deg) scale(1.08)}
.fi svg.ic{width:23px;height:23px}
.card h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:15.5px}
.card .link{margin-top:auto;padding-top:10px}
a.card{color:inherit}

/* split rows */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center;padding:30px 0}
.split.rev{grid-template-columns:1.05fr 1fr}
.split.rev .txt{order:2}
.split h2,.split h3{font-size:clamp(26px,3vw,38px);line-height:1.12;font-weight:800;letter-spacing:-.02em}
.split .lead{font-size:17.5px;color:var(--muted);margin:16px 0 22px}
.ticks li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:16px}
.ticks svg.ic{color:var(--green);margin-top:4px}
.panel{border-radius:28px;padding:32px;background:var(--blue-s);position:relative;overflow:hidden}
.panel.green{background:var(--green-s)}.panel.amber{background:var(--amber-s)}.panel.soft{background:var(--soft)}.panel.blue{background:var(--blue-s)}
.panel.pad0{padding:0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:24px;position:relative;counter-reset:st}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:25px;height:2px;background:var(--line);z-index:0}
.steps::after{content:"";position:absolute;left:8%;right:8%;top:25px;height:2px;background:var(--green);transform-origin:left;transform:scaleX(0);z-index:0}
@supports (animation-timeline:view()){.steps::after{animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 45%}}
.step{position:relative;z-index:1;counter-increment:st}
.step .no{width:50px;height:50px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);display:grid;place-items:center;font-weight:800;font-size:18px;margin-bottom:18px;transition:background .3s,color .3s,transform .4s var(--ease)}
.step:hover .no{background:var(--ink);color:#fff;transform:scale(1.1)}
.step h3{font-size:19px;font-weight:800;margin-bottom:8px}
.step p{color:var(--muted);font-size:15.5px}

/* before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ba .col{border-radius:22px;padding:30px;border:1px solid var(--line);background:var(--surface)}
.ba .col.after{background:var(--green-s);border-color:#cfe7d9}
.ba h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.ba li{display:flex;gap:11px;padding:9px 0;border-top:1px solid rgba(55,53,47,.1);font-size:16px}
.ba li:first-child{border-top:0}
.ba .before li svg.ic{color:var(--red)} .ba .after li svg.ic{color:var(--green)}

/* plain words */
.plain{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pw{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .3s}
.pw:hover{transform:translateY(-5px);border-color:var(--ink)}
.pw .t{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted2)}
.pw h4{font-size:21px;font-weight:800;margin:6px 0 4px;letter-spacing:-.01em}
.pw .say{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:15px;color:var(--muted)}
.pw .say b{color:var(--green);font-size:12px;letter-spacing:.06em;text-transform:uppercase;flex:none;padding-top:2px}
.pw .eg{margin-top:10px;font-size:14px;background:var(--bg);border-radius:var(--r);padding:10px 12px;color:var(--muted)}

/* stats */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden}
.stat{padding:34px 28px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-size:clamp(34px,4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat b.cnt::before{content:counter(num);counter-reset:num var(--n)}
.stat b.cnt::after{content:attr(data-suf)}
.stat b.cnt{animation:count 1.8s var(--ease) both}
@keyframes count{from{--n:0}}
@supports (animation-timeline:view()){.stat b.cnt{animation-timeline:view();animation-range:entry 10% entry 80%}}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:15px}

/* compare table */
.tablecard{border:1px solid var(--line);border-radius:20px;overflow:auto;background:var(--surface)}
table.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
table.cmp th{text-align:left;padding:18px 20px;font-size:14px;border-bottom:1px solid var(--line);background:var(--chrome);position:sticky;top:0}
table.cmp td{padding:15px 20px;border-bottom:1px solid var(--line)}
table.cmp tr:last-child td{border-bottom:0}
table.cmp td:not(:first-child),table.cmp th:not(:first-child){text-align:center}
table.cmp tr.grp td{background:var(--bg);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.cmp tbody tr{transition:background .2s}
table.cmp tbody tr:not(.grp):hover{background:var(--chrome)}
.yes{color:var(--green)} .no{color:var(--muted2)}

/* pricing */
.billseg{display:flex;justify-content:center;gap:4px;background:var(--soft);border-radius:999px;padding:4px;width:max-content;max-width:100%;margin:0 auto 36px}
.billseg label{font-size:14px;font-weight:700;color:var(--muted);padding:9px 22px;border-radius:999px;cursor:pointer;transition:background .3s var(--ease),color .3s}
#b-m:checked ~ .billseg label[for=b-m],#b-y:checked ~ .billseg label[for=b-y]{background:var(--accent);color:#fff}
.py{display:none}
.cta-y{display:none}
#b-y:checked ~ .plans .cta-y{display:block}
#b-y:checked ~ .plans .cta-m:not(.cta-only){display:none}
#b-y:checked ~ .plans .py{display:inline;animation:pop .4s var(--ease)}
#b-y:checked ~ .plans .pm{display:none}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{border:1px solid var(--line);border-radius:24px;padding:28px 24px;background:var(--surface);display:flex;flex-direction:column;position:relative;transition:transform .4s var(--ease),border-color .3s}
.plan:hover{transform:translateY(-6px)}
.plan.hot{border:2px solid var(--accent)}
.plan h3{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px}
.plan .for{color:var(--muted);font-size:15px;margin:8px 0 22px;min-height:48px}
.price{font-size:36px;font-weight:800;white-space:nowrap;letter-spacing:-.03em;line-height:1}
.price small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan .sst{color:var(--muted);font-size:13px;margin-top:8px}
.plan .btn{margin:20px 0 24px}
.plan .ticks li{font-size:14px;padding:5px 0}
.note{text-align:center;color:var(--muted2);font-size:13px;margin-top:24px}
.note b{color:var(--ink);font-weight:700}

/* faq */
.faq{max-width:860px;margin:0 auto}
details.q{border-top:1px solid var(--line)}
details.q:last-child{border-bottom:1px solid var(--line)}
details.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 4px;font-size:18px;font-weight:700;transition:color .2s}
details.q summary:hover{color:var(--green)}
details.q summary::-webkit-details-marker{display:none}
details.q summary svg.ic{transition:transform .4s var(--ease)}
details.q[open] summary svg.ic{transform:rotate(180deg)}
details.q .a{padding:0 4px 26px;color:var(--muted);font-size:16.5px;max-width:720px;line-height:1.65}
details.q[open] .a{animation:rise .5s var(--ease)}

/* band cta */
.band{background:var(--accent);color:#fff;padding:96px 0;position:relative;overflow:hidden}
.band .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.band h2{font-size:clamp(28px,3.8vw,46px);line-height:1.1;font-weight:800;letter-spacing:-.025em}
.band p.lead{font-size:18px;color:rgba(255,255,255,.76);margin:18px 0 28px;max-width:520px}
.final{background:var(--green-s);text-align:center;padding:108px 0;position:relative;overflow:hidden}
.final h2{font-size:clamp(34px,5vw,58px);line-height:1.06;font-weight:800;letter-spacing:-.03em;max-width:820px;margin:0 auto}
.final p{font-size:18px;color:#4f4e4a;margin:18px auto 34px;max-width:560px}
.final .cta{justify-content:center;margin-top:0}
.final .checks{display:flex;justify-content:center;gap:10px 28px;flex-wrap:wrap;margin-top:28px;font-size:14px;color:#4f4e4a}
.final .checks span{display:flex;gap:8px;align-items:center}
.final .checks svg.ic{color:var(--green);width:16px;height:16px}

/* article / long text */
.artwrap{display:grid;grid-template-columns:240px 1fr;gap:64px;padding:64px 0 96px;align-items:start}
.toc{position:sticky;top:calc(var(--hh) + 24px);font-size:14px}
.toc b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-bottom:12px}
.toc a{display:block;padding:7px 0 7px 14px;color:var(--muted);border-left:2px solid var(--line);transition:color .2s,border-color .2s,padding .3s var(--ease)}
.toc a:hover{color:var(--ink);border-color:var(--green);padding-left:20px}
.art h2{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:48px 0 14px;line-height:1.15}
.art h2:first-child{margin-top:0}
.art h3{font-size:21px;font-weight:800;margin:30px 0 10px}
.art p{font-size:17.5px;line-height:1.75;color:#45443f;margin:0 0 16px}
.art ul,.art ol{margin:0 0 18px 0;padding-left:0}
.art li{font-size:17px;line-height:1.7;color:#45443f;padding:5px 0 5px 28px;position:relative}
.art ul li::before{content:"";position:absolute;left:6px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.art ol{counter-reset:ol}
.art ol li{counter-increment:ol}
.art ol li::before{content:counter(ol);position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;background:var(--soft);font-size:12px;font-weight:800;display:grid;place-items:center}
.callout{display:flex;gap:14px;background:var(--green-s);border-radius:16px;padding:20px 22px;margin:24px 0}
.callout.blue{background:var(--blue-s)}.callout.amber{background:var(--amber-s)}
.callout svg.ic{width:22px;height:22px;color:var(--green);margin-top:3px}
.callout.blue svg.ic{color:var(--blue)}.callout.amber svg.ic{color:var(--amber)}
.callout p{margin:0;font-size:16.5px}
.callout b{display:block;margin-bottom:2px}
.eg-box{border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:22px 0;background:var(--chrome)}
.eg-box .lbl{display:block;margin-bottom:8px}
.eg-box table{width:100%;border-collapse:collapse;font-size:15.5px}
.eg-box td{padding:8px 0;border-top:1px solid var(--line)}
.eg-box tr:first-child td{border-top:0}
.eg-box td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.eg-box tr.tot td{font-weight:800;border-top:2px solid var(--ink)}
.meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-top:20px}
.meta span{display:flex;gap:6px;align-items:center}

/* glossary */
.az{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:34px}
.az a{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;transition:background .2s,color .2s,transform .3s var(--ease)}
.az a:hover{background:var(--accent);color:#fff;transform:translateY(-3px)}
.gl{display:grid;gap:14px}
.gl .g{border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:var(--surface);transition:border-color .3s,transform .4s var(--ease)}
.gl .g:hover{border-color:var(--ink);transform:translateX(4px)}
.gl h3{font-size:20px;font-weight:800;margin-bottom:6px}
.gl p{color:var(--muted);font-size:16px;line-height:1.65}
.gl .eg{margin-top:10px;font-size:14.5px;background:var(--bg);border-radius:var(--r);padding:10px 12px;color:var(--muted)}
.gl .letter{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--green);margin:22px 0 4px}

/* forms */
.formcard{border:1px solid var(--line);border-radius:24px;padding:36px;background:var(--surface)}
.formcard h2{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface);color:var(--ink);transition:border-color .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:var(--chrome)}
.field textarea{min-height:120px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.legalnote{font-size:13px;color:var(--muted);margin-top:14px}
.authgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:calc(100vh - var(--hh) - 40px)}
.authgrid .side{background:var(--green-s);padding:64px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.authgrid .main{padding:64px;display:flex;align-items:center;justify-content:center}
.authgrid .main > div{width:100%;max-width:430px}

/* mini UI (product mocks) */
.mock{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;font-size:13px;position:relative}
.device{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.dtop{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--chrome)}
.dots{display:flex;gap:6px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--active)}
.dtop .url{font-size:11.5px;color:var(--muted2);background:var(--soft);border-radius:999px;padding:3px 12px;margin-left:6px}
.dbody{padding:16px;font-size:13px}
.kp3{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:12px}
.kp{border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;background:var(--surface)}
.kp b{display:block;font-size:15px;font-weight:800;margin-top:3px;letter-spacing:-.01em;white-space:nowrap}
.mc{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface)}
.mc .pt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.rowi{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.rowi:first-of-type{border-top:0}
.rowi .tx{flex:1;min-width:0;font-size:13px;line-height:1.35}
.rowi .tx small{display:block;color:var(--muted2);font-size:12px}
.sq{width:30px;height:30px;border-radius:8px;background:var(--soft);display:grid;place-items:center;flex:none;color:var(--muted)}
.sq.in{background:var(--green-s);color:var(--green)}.sq.out{background:var(--red-s);color:var(--red)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line)}
table.t th.r,table.t td.r{text-align:right}
table.t td.r{font-variant-numeric:tabular-nums}
table.t tfoot td{font-weight:800;border-bottom:0;background:var(--chrome)}
.inv-line{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}
.inv-line.tot{font-weight:800;font-size:15px}
.sched{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);margin-top:8px;gap:8px}
.sched.now{border-color:var(--accent)}
.conf{height:7px;border-radius:99px;background:var(--soft);overflow:hidden;margin-top:6px}
.conf i{display:block;height:100%;background:var(--green);width:98%;transform-origin:left;animation:fillbar 3.6s var(--ease) infinite}
@keyframes fillbar{0%{transform:scaleX(0)}35%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mbox{border:1px solid var(--line);border-radius:var(--r);padding:12px}
.mbox.hi{border-color:#b7dcc7;background:var(--green-s);animation:glow 3.6s ease-in-out infinite}
@keyframes glow{0%,100%{border-color:#b7dcc7}50%{border-color:var(--green)}}
.drop{border:1.5px dashed var(--muted2);border-radius:var(--r);padding:14px;display:flex;gap:12px;align-items:center;margin-bottom:12px;position:relative;overflow:hidden}
.drop::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--green);animation:scanline 2.8s ease-in-out infinite}
@keyframes scanline{0%{top:0;opacity:0}15%,85%{opacity:1}100%{top:100%;opacity:0}}
.fld{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}
.fld b{animation:typein 8s steps(1) infinite}
.fld:nth-of-type(2) b{animation-delay:.3s}.fld:nth-of-type(3) b{animation-delay:.9s}.fld:nth-of-type(4) b{animation-delay:1.5s}.fld:nth-of-type(5) b{animation-delay:2.1s}
@keyframes typein{0%,8%{opacity:0}9%,92%{opacity:1}100%{opacity:0}}
.bars{display:flex;align-items:flex-end;gap:9px;height:130px;padding:6px 4px 0;border-bottom:1px solid var(--line)}
.bars i{flex:1;background:var(--soft);border-radius:6px 6px 0 0;height:var(--h);transform-origin:bottom;animation:grows 1.2s var(--ease) both;animation-delay:calc(var(--k,0) * 70ms)}
.bars i.on{background:var(--accent)}
@keyframes grows{from{transform:scaleY(0)}}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.blink{animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.phone{width:210px;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:18px 16px;font-size:12px;position:relative}
.phone::before{content:"";display:block;width:56px;height:5px;border-radius:9px;background:var(--active);margin:0 auto 12px}
.phone .amt{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:2px 0 10px}
.phone .sr{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.stack{display:flex;flex-direction:column;gap:12px}
.seg2{display:flex;gap:4px;background:var(--soft);border-radius:var(--r-sm);padding:3px;margin-left:auto}
.seg2 label{font-size:12px;font-weight:700;color:var(--muted);padding:5px 12px;border-radius:var(--r-xs);cursor:pointer;transition:background .25s,color .25s}
#m-easy:checked ~ .stage-d label[for=m-easy],#m-full:checked ~ .stage-d label[for=m-full]{background:var(--accent);color:#fff}
.p-easy,.p-full{display:none}
#m-easy:checked ~ .stage-d .p-easy,#m-full:checked ~ .stage-d .p-full{display:block;animation:rise .5s var(--ease)}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.logos .l{border:1px solid var(--line);border-radius:14px;height:84px;display:grid;place-items:center;color:var(--muted2);font-weight:800;font-size:13px;letter-spacing:.04em;transition:border-color .3s,color .3s}
.logos .l:hover{border-color:var(--ink);color:var(--ink)}

/* tab panels (home) */
.tabbar{display:flex;justify-content:center;gap:8px;margin-bottom:44px;overflow-x:auto;padding:3px}
.tabbar label{white-space:nowrap;cursor:pointer;font-size:15px;font-weight:700;color:var(--muted);padding:11px 22px;border:1px solid var(--line);border-radius:999px;background:var(--surface);transition:background .3s var(--ease),color .3s,transform .3s var(--ease)}
.tabbar label:hover{transform:translateY(-2px)}
#t1:checked ~ .tabbar label[for=t1],#t2:checked ~ .tabbar label[for=t2],#t3:checked ~ .tabbar label[for=t3],#t4:checked ~ .tabbar label[for=t4]{background:var(--accent);border-color:var(--accent);color:#fff}
.tp{display:none;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
#t1:checked ~ .tps .tp1,#t2:checked ~ .tps .tp2,#t3:checked ~ .tps .tp3,#t4:checked ~ .tps .tp4{display:grid;animation:rise .6s var(--ease)}

/* footer */
footer.ft{background:var(--bg);border-top:1px solid var(--line);padding:72px 0 36px}
.ftgrid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:32px}
footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);margin-bottom:14px}
footer li{padding:5px 0;font-size:14px;color:var(--muted)}
footer li a{position:relative;transition:color .2s}
footer li a:hover{color:var(--ink)}
footer li a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
footer li a:hover::after{transform:scaleX(1)}
.ftbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:52px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted2)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface);transition:transform .3s var(--ease),background .2s,color .2s}
.social a:hover{transform:translateY(-4px);background:var(--accent);color:#fff}

/* sitemap */
.smap{columns:3;column-gap:40px}
.smap section{break-inside:avoid;margin-bottom:28px}
.smap h3{font-size:15px;margin-bottom:8px}
.smap li{padding:4px 0}
.smap a{color:var(--muted)} .smap a:hover{color:var(--ink);text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .menu{display:none}
  .burger{display:inline-flex}
  .acts .login{display:none}
  /* single column: reveal upwards only. A sideways slide starts 40px past the screen edge and,
     with scroll-driven animations (Chrome, Safari 26), every block still below the fold sat there,
     which made the whole page wider than the phone and draggable sideways. */
  .reveal.l,.reveal.rr{animation-name:rise}
  .hero .grid,.split,.split.rev,.band .grid,.tp{grid-template-columns:1fr;gap:44px}
  .split.rev .txt{order:0}
  .cgrid,.plain,.plans{grid-template-columns:1fr 1fr}
  .cgrid.c4{grid-template-columns:1fr 1fr}
  .sgrid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}
  .ftgrid{grid-template-columns:1fr 1fr 1fr}.ftgrid > div:first-child{grid-column:1/-1}
  .artwrap{grid-template-columns:1fr;gap:28px}.toc{position:static}
  .steps{grid-template-columns:1fr 1fr}.steps::before,.steps::after{display:none}
  .authgrid{grid-template-columns:1fr}.authgrid .side{display:none}
  .smap{columns:2}
  .logos{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .wrap,.narrow{padding:0 18px;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  section.s{padding:64px 0}
  .hero{padding:44px 0 48px}.hero .sub{font-size:17px}
  .cgrid,.cgrid.c2,.cgrid.c4,.plain,.plans,.ba,.frow,.match{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .fcard{display:none}.toast{display:none}
  .panel{padding:16px;border-radius:20px}
  .ftgrid{grid-template-columns:1fr 1fr}
  .stat b{font-size:34px}.stat{padding:22px 18px}
  .cta .btn{width:100%}
  .acts .btn{padding:9px 14px;font-size:14px}
  .mpanel{padding:6px 18px calc(28px + env(safe-area-inset-bottom))}
  .smap{columns:1}
  .formcard,.authgrid .main{padding:24px}
  .band{padding:64px 0}.final{padding:72px 0}
  details.q summary{font-size:16px}
}
/* iOS Safari zooms the page when a form control below 16px gets focus */
@media (max-width:1040px),(pointer:coarse){
  input,select,textarea,.field input,.field select,.field textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* grid children may shrink below their content; wide tables scroll inside their card */
.split > *,.hero .grid > *,.band .grid > *,.tp > *,.cgrid > *,.plans > *,.ba > *,.match > *{min-width:0}
.mock,.mc,.eg-box{max-width:100%;overflow-x:auto}
.mock::-webkit-scrollbar,.mc::-webkit-scrollbar{height:6px}

/* production build: a quiet panel until the real photo exists */
.ph.blank .in{background:var(--soft)}
.ph.blank .in::after{display:none}