*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;--surface:#fff8f4;--surface2:#fff1ea;
  --glass:rgba(249,115,22,.05);--gb:rgba(0,0,0,.08);--gb2:rgba(0,0,0,.14);
  --accent:#f97316;--accent2:#ef4444;--blue:#ef4444;--green:#10b981;
  --red:#ef4444;--amber:#f59e0b;
  --text:#111827;--text2:#374151;--muted:#6b7280;
  --mono:'Plus Jakarta Sans',sans-serif;--sans:'Plus Jakarta Sans',sans-serif;--body:'Plus Jakarta Sans',sans-serif;
  --transition:all .2s ease;

  /* ── Type scale ── steps chosen to match sizes already in use, so adopting a
     token never changes rendering. Counts are occurrences in this file. */
  --fs-2xs:10px;   --fs-xs:11px;    --fs-sm:12px;    --fs-base:13px;
  --fs-md:14px;    --fs-lg:15px;    --fs-xl:16px;    --fs-2xl:18px;
  --fs-3xl:20px;   --fs-4xl:22px;   --fs-5xl:26px;   --fs-6xl:28px;
  --fs-7xl:36px;

  --fw-light:300;  --fw-regular:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;

  --lh-tight:1.1;  --lh-snug:1.25;  --lh-normal:1.5;
  --lh-relaxed:1.65; --lh-loose:1.75;

  --ls-tighter:-.02em; --ls-tight:-.01em; --ls-wide:.04em; --ls-wider:.07em; --ls-widest:.1em;

  /* ── Spacing ── 4px base grid */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-7:28px;  --space-8:32px;
  --space-10:40px; --space-12:48px; --space-14:56px; --space-16:64px;
  --space-20:80px;

  /* ── Radius ── */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-2xl:20px; --radius-3xl:24px; --radius-4xl:32px;
  --radius-pill:99px; --radius-circle:50%;

  /* ── Elevation ── */
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 2px 16px rgba(0,0,0,.08);
  --shadow-md:0 8px 32px rgba(0,0,0,.1);
  --shadow-lg:0 16px 48px rgba(0,0,0,.12);
  --shadow-accent:0 8px 32px rgba(249,115,22,.45);

  /* ── Motion ── */
  --dur-fast:.15s; --dur-base:.2s; --dur-slow:.3s; --dur-slower:.7s;
  --ease-std:ease;

  /* ── Layering ── */
  --z-base:1; --z-dropdown:100; --z-nav:200; --z-menu:205;
  --z-hamburger:210; --z-modal:400; --z-cursor:9999;

  /* ── State ── */
  --opacity-disabled:.5; --opacity-loading:.65;

  /* ── Safe areas (iPhone notch / Dynamic Island / home indicator) ──
     The meta viewport carries viewport-fit=cover, which lets the page paint
     edge to edge; these insets pull content back out from under the hardware.
     Indirecting through variables does two things: media queries can keep
     setting plain padding values without having to know about env(), and the
     whole system can be simulated on desktop by overriding these four on
     :root — otherwise env() is always 0 outside a notched device and the
     behaviour is untestable until it ships. */
  --sa-top:env(safe-area-inset-top,0px);
  --sa-right:env(safe-area-inset-right,0px);
  --sa-bottom:env(safe-area-inset-bottom,0px);
  --sa-left:env(safe-area-inset-left,0px);
}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw}
body{background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden;cursor:none;max-width:100vw;background-image:none}

/* ── Cursor ── */
.cur{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s;box-shadow:0 0 14px rgba(249,115,22,.5)}
.cur-ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(249,115,22,.35);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .2s,height .2s,border-color .2s}
.cur-ring.h{width:52px;height:52px;border-color:rgba(249,115,22,.7)}
@media(max-width:900px){body{cursor:auto}.cur,.cur-ring{display:none}}
/* ── Focus & Accessibility ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-xs)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}#hero-canvas{display:none}}

/* ── Nav ── */
/* Nav padding is expressed as --nav-py/--nav-px so the breakpoints below can
   keep setting plain values while the safe-area insets are added in one place.
   The bar itself still spans edge to edge; only its contents are inset. */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;--nav-py:22px;--nav-px:56px;
  padding:calc(var(--nav-py) + var(--sa-top)) calc(var(--nav-px) + var(--sa-right)) var(--nav-py) calc(var(--nav-px) + var(--sa-left));
  display:flex;align-items:center;justify-content:space-between;
  /* `padding` is deliberately absent from this list. It used to ride on
     `transition:all .3s`, but now that its value derives from the --nav-* custom
     properties, transitioning it prevents it recomputing when .sc changes those
     properties — the scrolled bar kept the unscrolled padding. Padding now snaps
     while the background, blur and shadow still animate, so the scroll effect
     still reads as smooth. */
  transition:background .3s,backdrop-filter .3s,border-color .3s,box-shadow .3s}
#nav.sc{background:rgba(255,255,255,.97);backdrop-filter:blur(24px);border-bottom:1px solid var(--gb);--nav-py:14px;--nav-px:56px;box-shadow:0 2px 20px rgba(0,0,0,.08)}
.nav-logo{font-family:'Space Grotesk',var(--sans);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px;cursor:pointer}.footer-brand .nav-logo{color:#ffffff}
.nav-logo em{font-style:normal;background:linear-gradient(135deg,var(--accent),#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:var(--fs-md);color:var(--muted);text-decoration:none;transition:color .2s;cursor:pointer}
.nav-links a:hover{color:var(--text)}
.nav-btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 22px;font-size:var(--fs-md);font-weight:700;cursor:pointer;transition:all .2s}
.nav-btn:hover{background:#ea6c0a;transform:translateY(-1px);box-shadow:0 8px 24px rgba(249,115,22,.3)}
/* ── Nav dropdown (Convert menu) ── */
.nav-drop{position:relative}
.nav-drop>a::after{content:"▾";font-size:9px;margin-left:5px;opacity:.7}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;display:none;z-index:220}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block}
.nav-drop-inner{background:#fff;border:1px solid var(--gb);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.12);padding:8px;min-width:230px}
.nav-drop-inner a{display:block;padding:10px 14px;border-radius:9px;font-size:var(--fs-md);color:var(--muted);text-decoration:none;white-space:nowrap;transition:all .15s}
.nav-drop-inner a:hover{background:var(--surface);color:var(--text)}
.nav-drop-inner a b{color:var(--text);font-weight:600}
/* ── Hamburger ── */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--radius-md);z-index:210}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ── Mobile menu drawer ── */
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:205;background:rgba(255,255,255,.99);backdrop-filter:blur(24px);flex-direction:column;align-items:center;justify-content:center;gap:0;padding:calc(80px + var(--sa-top)) calc(32px + var(--sa-right)) calc(40px + var(--sa-bottom)) calc(32px + var(--sa-left));overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu a,.mobile-menu button.mm-link{display:block;width:100%;text-align:center;font-family:var(--sans);font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.01em;color:var(--text);background:none;border:none;border-bottom:1px solid var(--gb);padding:18px 0;cursor:pointer;transition:color .2s}
.mobile-menu a:hover,.mobile-menu button.mm-link:hover{color:var(--accent)}
.mm-close{position:absolute;top:calc(20px + var(--sa-top));right:calc(20px + var(--sa-right));background:rgba(0,0,0,.06);border:1px solid var(--gb2);border-radius:50%;width:44px;height:44px;font-size:var(--fs-3xl);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.mm-close:hover{background:rgba(255,255,255,.15)}
.mm-cta{margin-top:28px;width:100%;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:16px;font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;cursor:pointer;transition:all .2s}
.mm-cta:hover{background:#ea6c0a}
@media(max-width:900px){#nav{--nav-py:16px;--nav-px:24px}#nav.sc{--nav-py:12px;--nav-px:24px}.nav-links{display:none}.nav-btn{display:none}.nav-hamburger{display:flex}}

/* ── Shared ── */
.section{padding:100px 56px;max-width:1200px;margin:0 auto}
@media(max-width:900px){.section{padding:72px 24px}}
.sec-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:var(--radius-pill);padding:5px 14px;font-size:var(--fs-xs);font-family:var(--mono);color:var(--accent2);letter-spacing:.04em;margin-bottom:18px}
.sec-h{font-family:var(--sans);font-size:clamp(1.9rem,3.8vw,2.8rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}
.sec-sub{font-size:var(--fs-xl);color:var(--text2);line-height:1.7;max-width:540px}
.grad-text{background:linear-gradient(135deg,var(--accent),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Scroll reveal ── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:translateY(0)}

/* ── Hero ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:calc(80px + var(--sa-top));background:linear-gradient(145deg,#fff6f2 0%,#ffeae0 45%,#fde3d5 75%,#fbd5c2 100%)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-g1{position:absolute;top:-20%;left:-10%;width:70%;height:70%;background:radial-gradient(ellipse,rgba(249,115,22,.08) 0%,transparent 60%);pointer-events:none;animation:gOrb 9s ease-in-out infinite alternate}
.hero-g2{position:absolute;bottom:-20%;right:-5%;width:55%;height:55%;background:radial-gradient(ellipse,rgba(239,68,68,.06) 0%,transparent 60%);pointer-events:none;animation:gOrb 11s ease-in-out infinite alternate-reverse}
@keyframes gOrb{0%{transform:scale(1)}100%{transform:scale(1.12) translate(30px,-20px)}}
.hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 56px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;width:100%}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:48px;padding:0 24px;padding-top:20px}}
@media(max-width:900px){.hero{padding-top:calc(90px + var(--sa-top))}}
@keyframes rup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes rfr{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}

.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:var(--radius-pill);padding:6px 16px;font-size:var(--fs-sm);font-family:var(--mono);color:var(--accent2);letter-spacing:.04em;margin-bottom:28px;opacity:0;animation:rup .7s .2s ease forwards}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:bl 2s ease-in-out infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
.hero-h1{font-family:var(--sans);font-size:clamp(2.4rem,4.5vw,4rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:20px;opacity:0;animation:rup .7s .35s ease forwards}
.hero-h1 b{display:block;background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 60%,var(--green) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gs 4s ease infinite}
@keyframes gs{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero-sub{font-size:17px;color:var(--text2);line-height:1.75;max-width:440px;margin-bottom:30px;font-weight:300;opacity:0;animation:rup .7s .5s ease forwards}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;opacity:0;animation:rup .7s .55s ease forwards}
.pill{font-size:var(--fs-sm);font-family:var(--mono);color:var(--muted);background:var(--glass);border:1px solid var(--gb);border-radius:var(--radius-pill);padding:4px 12px}

/* URL input */
.url-form{opacity:0;animation:rup .7s .65s ease forwards}
.url-box{display:flex;align-items:center;background:#ffffff;border:1px solid var(--gb2);border-radius:var(--radius-xl);padding:6px 6px 6px 18px;gap:10px;transition:border-color .2s,box-shadow .2s;margin-bottom:16px;box-shadow:0 2px 16px rgba(0,0,0,.08)}
.url-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(249,115,22,.22)}
.url-box input{flex:1;background:none;border:none;outline:none;font-size:var(--fs-lg);color:var(--text);font-family:var(--body);padding:8px 0}
.url-box input::placeholder{color:var(--muted)}
.btn-convert{background:var(--accent);border:none;border-radius:11px;padding:13px 26px;font-size:var(--fs-md);font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s;font-family:var(--sans)}
.btn-convert:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(249,115,22,.45);background:#ea6c0a}
.url-note{font-size:var(--fs-sm);color:var(--muted);font-family:var(--mono)}
.url-note span{color:var(--green)}

.hero-stats{display:flex;gap:28px;margin-top:36px;opacity:0;animation:rup .7s .8s ease forwards}
.stat-val{font-family:var(--sans);font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.01em}
.stat-val em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-lbl{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono);letter-spacing:.07em;margin-top:3px}

/* Phone mockup */
.hero-vis{position:relative;height:600px;opacity:0;animation:rfr 1s .4s ease forwards}
@media(max-width:900px){.hero-vis{height:420px}}
.phone-scene{position:absolute;inset:0;perspective:1100px;display:flex;align-items:center;justify-content:center}
.phone-wrap{transform-style:preserve-3d;transform:rotateY(-16deg) rotateX(4deg);animation:pf 6s ease-in-out infinite;will-change:transform}
@keyframes pf{0%,100%{transform:rotateY(-16deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-16deg) rotateX(4deg) translateY(-18px)}}
.phone{width:252px;height:510px;background:linear-gradient(145deg,#131a38,#0d1324);border-radius:38px;border:1px solid rgba(255,255,255,.09);position:relative;box-shadow:0 40px 80px rgba(0,0,0,.65),inset 0 0 40px rgba(249,115,22,.04)}
.phone::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:76px;height:22px;background:#1e293b;border-radius:0 0 14px 14px;z-index:5}
.phone-screen{position:absolute;inset:7px;border-radius:31px;background:linear-gradient(160deg,#0e1220,#0d1324);overflow:hidden;display:flex;flex-direction:column}
.wv-lines{padding:8px}
.wl{height:5px;border-radius:3px;background:rgba(255,255,255,.06);margin-bottom:7px}
.wl:nth-child(1){width:80%}.wl:nth-child(2){width:55%}.wl:nth-child(3){width:90%}.wl:nth-child(4){width:40%}.wl:nth-child(5){width:70%}
@keyframes sp{to{transform:translate(-50%,-50%) rotate(360deg)}}
.chip{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border:1px solid var(--gb2);border-radius:13px;padding:9px 15px;font-size:var(--fs-xs);font-family:var(--mono);color:var(--text2);display:flex;align-items:center;gap:7px;white-space:nowrap;box-shadow:0 8px 28px rgba(0,0,0,.12)}
.c1{top:55px;right:0;animation:fc1 4s ease-in-out infinite}
.c2{bottom:115px;left:0;animation:fc2 5s ease-in-out infinite}
.c3{top:170px;left:0;animation:fc3 4.5s ease-in-out infinite}
@keyframes fc1{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fc2{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes fc3{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── Flow Section ── */
#flow-section{display:none;padding:0 56px 80px;max-width:1200px;margin:0 auto}
#flow-section.active{display:block}
@media(max-width:900px){#flow-section{padding:0 24px 60px}}

.flow-step{display:none}
.flow-step.active{display:block}

/* Step: Analyzing */
#step-analyzing{padding:80px 0;text-align:center}
.analyzing-spinner{width:72px;height:72px;border-radius:50%;border:3px solid var(--gb);border-top-color:var(--accent);animation:spin 1s linear infinite;margin:0 auto 28px}
@keyframes spin{to{transform:rotate(360deg)}}
.analyzing-title{font-family:var(--sans);font-size:var(--fs-4xl);font-weight:700;margin-bottom:10px}
.analyzing-sub{font-size:var(--fs-md);color:var(--muted);font-family:var(--mono)}
.analyzing-url{display:inline-block;background:var(--glass);border:1px solid var(--gb);border-radius:var(--radius-md);padding:6px 14px;font-size:var(--fs-base);font-family:var(--mono);color:var(--accent2);margin-top:14px;word-break:break-all}

/* Step: Preview */
#step-preview{padding:60px 0}
@media(max-width:900px){}

/* Email wall + App info panel */


/* Email wall */
.btn-build{background:var(--accent);border:none;border-radius:10px;padding:11px 22px;font-size:var(--fs-md);font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s;font-family:var(--sans)}
.btn-build:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(249,115,22,.4);background:#ea6c0a}

/* Step: Building */
#step-building{padding:60px 0}
.build-card{background:var(--surface);border:1px solid var(--gb);border-radius:var(--rl);padding:36px;max-width:680px;margin:0 auto}
.build-card-header{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.build-spinner{width:44px;height:44px;border-radius:50%;border:3px solid var(--gb);border-top-color:var(--accent);animation:spin 1s linear infinite;flex-shrink:0}
.build-card-header h3{font-family:var(--sans);font-size:var(--fs-2xl);font-weight:700;margin-bottom:4px}
.build-card-header p{font-size:var(--fs-base);color:var(--muted)}
.prog-track{height:6px;background:var(--gb);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:10px}
.prog-fill{height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition:width .4s ease}
.prog-row{display:flex;justify-content:space-between;font-size:var(--fs-sm);font-family:var(--mono);color:var(--muted);margin-bottom:22px}
.log-box{background:rgba(0,0,0,.3);border:1px solid var(--gb);border-radius:10px;padding:14px;font-size:var(--fs-sm);font-family:var(--mono);color:var(--text2);height:160px;overflow-y:auto;line-height:1.7}
.log-box p{margin:2px 0}
.steps-row{display:flex;gap:10px;margin-top:22px}
.step-dot{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:var(--fs-xs);font-family:var(--mono);color:var(--muted);transition:color .3s}
.step-dot.active{color:var(--accent)}
.step-dot.done{color:var(--green)}
.sdot{width:28px;height:28px;border-radius:50%;background:var(--gb);border:1px solid var(--gb2);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);transition:all .3s}
.step-dot.active .sdot{background:rgba(249,115,22,.12);border-color:var(--accent)}
.step-dot.done .sdot{background:rgba(34,211,160,.15);border-color:var(--green)}

/* Step: Done */
#step-done{padding:60px 0}
.done-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:900px;margin:0 auto;align-items:start}
@media(max-width:900px){.done-grid{grid-template-columns:1fr}}
.done-main{background:var(--surface);border:1px solid var(--gb);border-radius:var(--rl);padding:32px}
.done-icon{width:64px;height:64px;border-radius:50%;background:rgba(34,211,160,.15);border:2px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:var(--fs-6xl);margin-bottom:20px}
.done-main h2{font-family:var(--sans);font-size:var(--fs-4xl);font-weight:800;margin-bottom:8px}
.done-main p{font-size:var(--fs-md);color:var(--text2);margin-bottom:22px;line-height:1.6}
.btn-dl{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--green);border:none;border-radius:var(--radius-lg);padding:14px 28px;font-size:var(--fs-lg);font-weight:700;color:#022c22;cursor:pointer;width:100%;transition:all .2s;font-family:var(--sans)}
.btn-dl:hover{background:#4ade80;transform:translateY(-1px);box-shadow:0 8px 32px rgba(34,197,94,.35)}
.done-meta{font-size:var(--fs-xs);font-family:var(--mono);color:var(--muted);margin-top:14px;text-align:center}
.done-branding-note{font-size:var(--fs-sm);color:var(--amber);font-family:var(--mono);background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-md);padding:10px 14px;margin-top:12px}

.upgrade-card{background:linear-gradient(135deg,rgba(249,115,22,.08),rgba(239,68,68,.05));border:1px solid rgba(249,115,22,.25);border-radius:var(--rl);padding:28px;position:relative;overflow:hidden}
.upgrade-card::before{content:'✨';position:absolute;top:16px;right:16px;font-size:var(--fs-4xl)}
.upgrade-card h3{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;margin-bottom:6px}
.upgrade-card p{font-size:var(--fs-base);color:var(--text2);margin-bottom:18px;line-height:1.6}
.upgrade-list{list-style:none;margin-bottom:22px}
.upgrade-list li{font-size:var(--fs-base);color:var(--text2);padding:5px 0;display:flex;align-items:center;gap:8px}
.upgrade-list li::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0}
.btn-upgrade{background:var(--accent);border:none;border-radius:11px;padding:12px 24px;font-size:var(--fs-md);font-weight:700;color:#fff;cursor:pointer;width:100%;transition:all .2s;font-family:var(--sans)}
.btn-upgrade:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(249,115,22,.4);background:#ea6c0a}
.upgrade-price{font-size:var(--fs-xs);text-align:center;color:var(--muted);margin-top:10px;font-family:var(--mono)}

/* ── Features ── */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
@media(max-width:1100px){.features-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.features-grid{grid-template-columns:1fr}}
.fc{background:#fff;border:1px solid rgba(17,24,39,.07);border-radius:var(--radius-xl);padding:var(--space-6);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;display:flex;flex-direction:column;gap:var(--space-3)}
.fc:hover{border-color:rgba(249,115,22,.3);box-shadow:0 10px 30px rgba(17,24,39,.06);transform:translateY(-2px)}
.fc:hover .ico-tile{background:var(--accent);border-color:var(--accent);color:#fff}
.fc h3{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;margin-bottom:6px;letter-spacing:-.01em;color:var(--text)}
.fc p{font-size:var(--fs-base);color:var(--muted);line-height:1.6}

/* ── How it works ── */
@media(max-width:900px){}
@media(max-width:900px){}
.hc{text-align:center;padding:0 16px}
.hc h3{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;margin-bottom:8px}
.hc p{font-size:var(--fs-base);color:var(--muted);line-height:1.65}

/* ── Pricing ── */
#pricing{background:var(--surface)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;align-items:start}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}}
.prc{background:var(--surface);border:1px solid var(--gb);border-radius:var(--rl);padding:32px;transition:transform .15s,border-color .2s,box-shadow .2s;position:relative}
.prc:hover{transform:translateY(-4px)}
.prc.pop{border-color:rgba(249,115,22,.35);box-shadow:0 0 60px rgba(249,115,22,.08)}
.pop-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:var(--fs-xs);font-family:var(--mono);font-weight:700;padding:4px 16px;border-radius:var(--radius-pill);white-space:nowrap;letter-spacing:.05em}
.prc-ico{margin-bottom:16px}
.prc-name{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.prc-desc{font-size:var(--fs-base);color:var(--muted);margin-bottom:24px;line-height:1.6}
.prc-features{list-style:none;margin-bottom:28px}
.prc-features li{font-size:var(--fs-base);color:var(--text2);padding:6px 0;border-bottom:1px solid var(--glass);display:flex;align-items:center;gap:9px}
.prc-features li:last-child{border-bottom:none}
.prc-features li .ck{color:var(--green);flex-shrink:0}
.prc-features li .x{color:var(--muted);flex-shrink:0}
.btn-plan{width:100%;border:none;border-radius:11px;padding:13px;font-size:var(--fs-md);font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--sans)}
.btn-plan.free{background:var(--gb);color:var(--text)}
.btn-plan.free:hover{background:var(--gb2)}
.btn-plan.paid{background:var(--accent);color:#fff}
.btn-plan.paid:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(249,115,22,.4);background:#ea6c0a}
.btn-plan.pro{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}
.btn-plan.pro:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(245,158,11,.3)}

/* ── Testimonials ── */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr}}
.tc{background:var(--surface);border:1px solid var(--gb);border-radius:var(--rl);padding:26px;transition:transform .15s,border-color .2s}
.tc:hover{transform:translateY(-2px);border-color:rgba(249,115,22,.2)}
.tc-text{font-size:var(--fs-md);color:var(--text2);line-height:1.7;margin-bottom:18px;font-style:italic}
.tc-author{display:flex;align-items:center;gap:12px}
.tc-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);font-weight:700;font-family:var(--sans);flex-shrink:0}
.tc-name{font-size:var(--fs-md);font-weight:600}
.tc-role{font-size:var(--fs-sm);color:var(--muted)}

/* ── FAQ ── */
.faq-list{margin-top:40px;max-width:720px;margin-left:auto;margin-right:auto}
.faq-item{border-bottom:1px solid var(--gb);overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;cursor:pointer;font-size:var(--fs-lg);font-weight:500;user-select:none;transition:color .2s}
.faq-q:hover{color:var(--accent)}
.faq-arrow{width:20px;height:20px;border-radius:50%;background:var(--gb);display:flex;align-items:center;justify-content:center;transition:transform .3s,background .2s;font-size:var(--fs-xs);flex-shrink:0}
.faq-item.open .faq-arrow{transform:rotate(180deg);background:rgba(249,115,22,.12)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;font-size:var(--fs-md);color:var(--text2);line-height:1.75}
.faq-a-inner{padding-bottom:20px}

/* ── CTA Banner ── */
.cta-banner{background:linear-gradient(135deg,rgba(249,115,22,.08) 0%,rgba(239,68,68,.06) 100%);border:1px solid rgba(249,115,22,.2);border-radius:var(--radius-3xl);padding:64px 56px;text-align:center;position:relative;overflow:hidden;margin:0 56px 80px;max-width:1088px;margin-left:auto;margin-right:auto}
@media(max-width:900px){.cta-banner{margin:0 24px 60px;padding:48px 28px}}
.cta-banner::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;background:radial-gradient(circle,rgba(249,115,22,.1) 0%,transparent 60%);pointer-events:none}
.cta-banner h2{font-family:var(--sans);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-.04em;margin-bottom:14px;position:relative}
.cta-banner p{font-size:var(--fs-xl);color:var(--text2);margin-bottom:32px;position:relative}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.btn-cta-p{background:var(--accent);border:none;border-radius:13px;padding:15px 32px;font-size:var(--fs-lg);font-weight:700;color:#fff;cursor:pointer;transition:all .2s;font-family:var(--sans)}
.btn-cta-p:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(249,115,22,.45);background:#ea6c0a}
.btn-cta-g{background:transparent;border:1px solid var(--gb2);border-radius:13px;padding:15px 24px;font-size:var(--fs-md);font-weight:500;color:var(--text2);cursor:pointer;transition:all .2s}
.btn-cta-g:hover{border-color:var(--accent);color:var(--accent)}

/* ── Footer ── */
/* The footer is the last thing on the page, so its bottom padding is what keeps
   the final row of links clear of the home indicator. */
footer{background:#0f172a;border-top:none;padding:48px calc(56px + var(--sa-right)) calc(48px + var(--sa-bottom)) calc(56px + var(--sa-left));max-width:100%;margin:0;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;gap:40px}
@media(max-width:900px){footer{grid-template-columns:1fr 1fr;padding:40px calc(24px + var(--sa-right)) calc(40px + var(--sa-bottom)) calc(24px + var(--sa-left));gap:28px;margin:0}}
.footer-brand p{font-size:var(--fs-base);color:#94a3b8;margin-top:10px;line-height:1.65;max-width:240px}
.footer-col h4{font-family:var(--sans);font-size:var(--fs-base);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#94a3b8;margin-bottom:14px}
.footer-col a{display:block;font-size:var(--fs-base);color:#94a3b8;text-decoration:none;margin-bottom:9px;transition:color .2s;cursor:pointer}
.footer-col a:hover{color:#ffffff}
.footer-col{background:transparent !important}
.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);color:#94a3b8;font-family:var(--mono)}
@media(max-width:600px){.footer-bottom{flex-direction:column;gap:8px;text-align:center}}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION REDESIGN — showcase, use cases, features
   Replaces emoji-as-iconography, per-card gradient hues and heavy drop shadows
   with one monoline icon system, a single accent hue and hairline borders.
   Motion is functional (reveal, 2px lift) rather than the previous 3D tilt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Monoline icons, drawn in currentColor so a card can recolour its own icon */
.ico{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-tile{width:44px;height:44px;border-radius:var(--radius-lg);display:grid;place-items:center;flex:0 0 auto;
  color:var(--accent);background:rgba(249,115,22,.07);border:1px solid rgba(249,115,22,.15);
  transition:background .18s,border-color .18s,color .18s}

/* Eyebrow: tracked uppercase label with a live dot, no emoji */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-4)}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* Shared card: hairline at rest, accent + lift on hover. No shadow until hover. */
.card-q{position:relative;background:#fff;border:1px solid rgba(17,24,39,.07);border-radius:var(--radius-xl);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.card-q:hover{border-color:rgba(249,115,22,.3);box-shadow:0 10px 30px rgba(17,24,39,.06);transform:translateY(-2px)}
.card-q:hover .ico-tile{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── Example apps ── */
.sc2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);max-width:1100px;margin:0 auto}
.sc2{padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.sc2-name{font-weight:var(--fw-bold);font-size:var(--fs-lg);letter-spacing:var(--ls-tight);color:var(--text)}
.sc2-cat{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.sc2-tag{margin-top:auto;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:rgba(17,24,39,.04);border-radius:var(--radius-pill);padding:4px 10px}
@media(max-width:1000px){.sc2-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sc2-grid{grid-template-columns:repeat(2,1fr)}}
/* Below 560px a 1-column grid makes the section endless; a snap rail keeps it
   browsable in a single gesture instead. */
@media(max-width:560px){
  .sc2-grid{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:var(--space-3);padding:2px var(--space-5) var(--space-3);margin:0 calc(-1 * var(--space-5));
    scrollbar-width:none;-ms-overflow-style:none}
  .sc2-grid::-webkit-scrollbar{display:none}
  .sc2{flex:0 0 62%;scroll-snap-align:center}
}

/* ── Use cases ── */
.uc2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.uc2{padding:var(--space-7) var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.uc2-title{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);color:var(--text)}
.uc2-desc{font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--text2)}
.uc2-tag{margin-top:auto;align-self:flex-start;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent2);background:rgba(249,115,22,.07);
  border:1px solid rgba(249,115,22,.16);border-radius:var(--radius-pill);padding:5px 11px}
@media(max-width:900px){.uc2-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.uc2-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .card-q,.card-q:hover{transform:none;transition:border-color .01ms}
  .sc2-grid{scroll-snap-type:none}
}

/* ── Button system ──
   13 near-duplicate variants are collapsed onto one shared base plus two size
   groups. Placed after the individual rules so it wins on source order without
   needing !important, and before the state block so states still win.

   Deliberately NOT unified: font-weight (.btn-cta-g is 500 as a secondary
   action), border (.btn-cta-g carries a 2px outline), and colour — those encode
   intent rather than duplication. Large-size paddings are also left alone. */
.btn-build,.btn-build-main,.btn-convert,.btn-cta-p,.btn-cta-g,.btn-upgrade,
.btn-plan,.btn-dl,.nav-btn,.nl-btn,.dp-btn,.bw-btn{
  font-family:var(--sans);           /* .nav-btn and .btn-cta-g set none, so they
                                        were falling back to the UA default Arial */
  cursor:pointer;                    /* .bw-btn was cursor:default */
  border-radius:var(--radius-lg);    /* was 10/11/12/13px depending on variant */
}
/* Standard — 12/24 on the 4px grid (was 10/22, 11/22, 13/24, 13/26) */
.btn-build,.btn-convert,.btn-upgrade,.nav-btn,.nl-btn{
  padding:var(--space-3) var(--space-6);
}
.btn-plan{padding:var(--space-3)}    /* was 13px */
/* Small utility — 8/16 (was 7/14 and 9/16) */
.dp-btn,.bw-btn{
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-4);
  font-size:var(--fs-sm);
}

/* ═══════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
═══════════════════════════════════════════════ */

/* ── Tablet 768px ── */
@media(max-width:768px){
  .hero-h1{font-size:clamp(2rem,6.5vw,4.6rem)}
  .sec-h{font-size:clamp(1.8rem,5vw,3rem)}
}

/* ── Standard phones ≤600px ── */
@media(max-width:600px){
  /* Nav — compact */
  #nav{--nav-py:13px;--nav-px:18px}
  /* --nav-px is restated here because #nav.sc outranks the #nav rule in the
     400px block below; without it the scrolled bar would narrow to 14px, which
     is not what the original cascade produced. */
  #nav.sc{--nav-py:10px;--nav-px:18px}
  .nav-logo{font-size:var(--fs-lg);white-space:nowrap;flex-shrink:0}
  .nav-btn{font-size:var(--fs-sm);padding:8px 14px;white-space:nowrap;border-radius:var(--radius-md);flex-shrink:0}

  /* Hero */
  .hero{padding-top:calc(76px + var(--sa-top));min-height:auto;padding-bottom:48px}
  .hero-inner{padding:0 20px;padding-top:12px;gap:32px}
  .hero-h1{font-size:clamp(1.9rem,8.5vw,2.8rem);line-height:1.06}
  .hero-sub{font-size:var(--fs-md);line-height:1.65;margin-bottom:22px;max-width:100%}
  .hero-badge{font-size:var(--fs-xs);padding:5px 13px;margin-bottom:20px}
  .hero-pills{gap:6px;margin-bottom:22px}
  .pill{font-size:var(--fs-xs);padding:3px 10px}

  /* URL input — stack vertically */
  .url-box{flex-direction:column;align-items:stretch;padding:10px 12px;gap:8px;border-radius:14px}
  .url-box input{padding:10px 4px;font-size:var(--fs-md);width:100%}
  .url-icon{display:none}
  .btn-convert{border-radius:10px;width:100%;text-align:center;padding:14px 20px;font-size:var(--fs-lg)}

  /* Stats */
  .hero-stats{gap:16px;margin-top:24px}
  .stat-val{font-size:var(--fs-2xl)}
  .stat-lbl{font-size:var(--fs-2xs)}

  /* Hide phone mockup — recovers 420px vertical space, eliminates chip overflow */
  .hero-vis{display:none!important}

  /* Sections */
  .section{padding:56px 20px}
  .sec-h{font-size:clamp(1.7rem,7vw,2.4rem)}
  .sec-sub{font-size:var(--fs-md)}

  /* Features / HIW / Pricing cards */
  .fc,.hc,.prc{padding:24px 20px}

  /* Pricing */
  
  /* Testimonials */
  .tc-text{font-size:var(--fs-base)}

  /* CTA */
  .cta-banner{padding:40px 22px;margin:0 16px 48px}
  .cta-h{font-size:clamp(1.6rem,7vw,2.4rem)}

  /* Footer */
  footer{grid-template-columns:1fr;gap:20px;padding:32px calc(20px + var(--sa-right)) calc(32px + var(--sa-bottom)) calc(20px + var(--sa-left))}
  .footer-brand{grid-column:1}
  .footer-bottom{font-size:var(--fs-xs);padding:16px 0}

  /* Flow section */
  #flow-section{padding:0 16px 48px}
  .cfg-grid{gap:16px}
  .cfg-row label{font-size:var(--fs-xs)}
  }

/* ── Small phones ≤400px ── */
@media(max-width:400px){
  #nav{--nav-py:12px;--nav-px:14px}
  .nav-logo{font-size:var(--fs-md)}
  .nav-btn{font-size:var(--fs-xs);padding:7px 12px}

  .hero{padding-top:calc(70px + var(--sa-top))}
  .hero-inner{padding:0 16px}
  .hero-h1{font-size:clamp(1.7rem,8vw,2.2rem)}

  .url-box{padding:8px 10px}

  .section{padding:48px 16px}
  .sec-h{font-size:clamp(1.5rem,7.5vw,2rem)}

  footer{padding:28px calc(16px + var(--sa-right)) calc(28px + var(--sa-bottom)) calc(16px + var(--sa-left));gap:16px}
  .footer-bottom span{font-size:var(--fs-2xs)}
}

/* ── Dashboard ── */
/* Bottom sheet — flex-end means its content sits against the bottom edge, which
   is where the home indicator lives. */
#dashboard-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:300;align-items:flex-end;justify-content:center;padding-bottom:var(--sa-bottom)}
#dashboard-overlay.open{display:flex}
.dashboard-panel{background:var(--surface);border:1px solid var(--gb);border-radius:var(--radius-3xl) 24px 0 0;width:100%;max-width:700px;padding:36px;max-height:85vh;overflow-y:auto}
.dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.dp-header h2{font-family:var(--sans);font-size:var(--fs-3xl);font-weight:800}
.dp-close{background:var(--gb);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;color:var(--text);font-size:var(--fs-xl);display:flex;align-items:center;justify-content:center}
.dp-email-badge{background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:var(--radius-md);padding:8px 14px;font-size:var(--fs-base);font-family:var(--mono);color:var(--accent2);margin-bottom:24px}
.dp-apps{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.dp-app{background:var(--glass);border:1px solid var(--gb);border-radius:var(--radius-lg);padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.dp-app-info{display:flex;align-items:center;gap:12px}
.dp-app-icon{width:40px;height:40px;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,var(--accent),var(--blue))}
.dp-app-name{font-size:var(--fs-md);font-weight:600;margin-bottom:2px}
.dp-app-url{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono)}
.dp-app-actions{display:flex;gap:8px;flex-shrink:0}
.dp-btn{font-size:var(--fs-sm);border:none;border-radius:var(--radius-md);padding:7px 14px;cursor:pointer;font-family:var(--mono);transition:all .2s}
.dp-btn.dl{background:rgba(34,211,160,.15);color:var(--green);border:1px solid rgba(34,211,160,.2)}
.dp-btn.dl:hover{background:rgba(34,211,160,.25)}
/* 48px of padding top and bottom put ~100px of nothing around a single line, and
   with no bottom margin the sentence then butted straight into the upgrade row —
   it read as a rendering fault rather than an empty state. Tighter, bounded, and
   spaced off the row below it the same 24px the populated list already uses. */
.dp-empty{text-align:center;padding:28px 24px;margin-bottom:24px;color:var(--muted);
  font-size:var(--fs-md);background:var(--glass);border:1px dashed rgba(249,115,22,.22);
  border-radius:var(--radius-lg)}
.dp-empty .dp-empty-ic{display:block;font-size:28px;line-height:1;margin-bottom:10px;opacity:.5}
.dp-upgrade-row{background:linear-gradient(135deg,rgba(249,115,22,.06),rgba(239,68,68,.04));border:1px solid rgba(249,115,22,.2);border-radius:var(--radius-lg);padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dp-upgrade-row p{font-size:var(--fs-base);color:var(--text2)}
.dp-upgrade-row strong{color:var(--text)}
/* ── Misc responsive ── */
@media(max-width:900px){#faq .section>div{grid-template-columns:1fr!important}}
#hero-section.hidden{display:none}

/* ── Config step ── */
.cfg-grid{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;max-width:860px;margin:0 auto}
@media(max-width:900px){.cfg-grid{grid-template-columns:1fr}}
.cfg-phone{position:sticky;top:100px}
.cfg-phone-frame{width:200px;height:390px;background:linear-gradient(145deg,#131a38,#0d1324);border-radius:var(--radius-4xl);border:1px solid rgba(255,255,255,.09);position:relative;box-shadow:0 28px 56px rgba(0,0,0,.6);margin:0 auto}
.cfg-phone-frame::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:56px;height:16px;background:#1e293b;border-radius:0 0 10px 10px;z-index:5}
.cfg-phone-screen{position:absolute;inset:5px;border-radius:27px;background:#0d1324;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;overflow:hidden}
.cfg-pv-icon{width:52px;height:52px;border-radius:14px;object-fit:cover;background:linear-gradient(135deg,var(--accent),var(--blue));flex-shrink:0}
.cfg-pv-name{font-size:var(--fs-sm);font-weight:700;color:#fff;font-family:var(--sans);text-align:center}
.cfg-pv-url{font-size:8px;font-family:var(--mono);color:rgba(255,255,255,.3);background:rgba(255,255,255,.04);border-radius:5px;padding:4px 8px;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-form{background:var(--surface);border:1px solid var(--gb);border-radius:var(--rl);padding:32px;display:flex;flex-direction:column;gap:20px}
.cfg-row{display:flex;flex-direction:column;gap:6px}
.cfg-row label{font-size:var(--fs-sm);font-family:var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.cfg-row input,.cfg-row select{background:rgba(255,255,255,.04);border:1px solid var(--gb2);border-radius:10px;padding:11px 14px;font-size:var(--fs-md);color:var(--text);font-family:var(--body);outline:none;transition:border-color .2s;width:100%}
.cfg-row input:focus,.cfg-row select:focus{border-color:var(--accent)}
.cfg-row select option{background:var(--surface);color:var(--text)}
.cfg-upload-box{border:1.5px dashed var(--gb2);border-radius:var(--radius-lg);padding:20px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .2s;position:relative}
.cfg-upload-box:hover{border-color:var(--accent)}
.cfg-upload-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.cfg-upload-thumb{width:44px;height:44px;border-radius:11px;object-fit:cover;background:rgba(249,115,22,.1);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-3xl);overflow:hidden}
.cfg-upload-thumb img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.cfg-upload-text strong{font-size:var(--fs-base);display:block;margin-bottom:2px}
.cfg-upload-text span{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono)}
.cfg-row-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.cfg-row-two{grid-template-columns:1fr}}
.btn-build-main{background:var(--accent);border:none;border-radius:var(--radius-lg);padding:15px;font-size:var(--fs-xl);font-weight:700;color:#fff;cursor:pointer;width:100%;transition:all .2s;font-family:var(--sans);display:flex;align-items:center;justify-content:center;gap:10px}
.btn-build-main:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(249,115,22,.4);background:#ea6c0a}

/* ══════════════════════════════════════════
   BROWSER WINDOW MOCKUP  (Big Business Hero)
══════════════════════════════════════════ */
.mock-layer{position:absolute;inset:0;border-radius:var(--radius-2xl);pointer-events:none}
.ml-1{background:linear-gradient(135deg,#f97316,#fb923c);transform:rotate(6deg) translate(-12px,12px);z-index:0;opacity:.9;box-shadow:0 20px 60px rgba(249,115,22,.3)}
.ml-2{background:linear-gradient(135deg,#8b5cf6,#a855f7);transform:rotate(12deg) translate(-22px,22px);z-index:-1;opacity:.8;box-shadow:0 20px 60px rgba(139,92,246,.25)}
.browser-win{position:relative;z-index:2;background:var(--surface);border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 48px 96px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;height:100%;display:flex;flex-direction:column}
.bw-bar{background:var(--surface2);padding:13px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gb);gap:12px;flex-shrink:0}
.bw-dots{display:flex;gap:7px}
.dot-r,.dot-y,.dot-g{display:inline-block;width:12px;height:12px;border-radius:50%}
.dot-r{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.5)}
.dot-y{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.5)}
.dot-g{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.5)}
.bw-addr{flex:1;max-width:260px;margin:0 auto;background:rgba(255,255,255,.05);border:1px solid var(--gb);border-radius:7px;padding:5px 13px;font-size:var(--fs-xs);color:var(--muted);display:flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:500}
.bw-body{padding:20px 24px;display:flex;flex-direction:column;gap:14px;flex:1;overflow:hidden}
.bw-topnav{display:flex;align-items:center;justify-content:space-between}
.bw-logo{font-family:var(--sans);font-weight:800;font-size:var(--fs-md);color:var(--text)}
.bw-logo b{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bw-nav-links{display:flex;gap:16px;font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono);font-weight:600}
.bw-url-row{display:flex;gap:8px;align-items:center}
.bw-input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--gb);border-radius:10px;padding:9px 14px;font-size:var(--fs-sm);color:var(--text2);display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500}
.bw-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);padding:9px 16px;font-size:var(--fs-sm);font-weight:700;font-family:var(--sans);cursor:default;white-space:nowrap;box-shadow:0 4px 14px rgba(249,115,22,.25)}
.bw-prog{background:rgba(255,255,255,.03);border-radius:var(--radius-lg);padding:14px;border:1px solid var(--gb)}
.bw-prog-bar{height:5px;background:var(--gb);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:10px}
.bw-prog-fill{height:100%;width:85%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:var(--radius-pill);animation:bwprog 2.5s ease-in-out infinite alternate}
@keyframes bwprog{0%{width:68%}100%{width:94%}}
.bw-prog-steps{display:flex;gap:14px;font-size:var(--fs-2xs);font-family:var(--mono);font-weight:700}
.bps{color:var(--muted)}.bps.done{color:var(--green)}.bps.active{color:var(--accent2)}
.bw-result{display:flex;align-items:center;gap:12px;background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.22);border-radius:var(--radius-lg);padding:14px}
.bwr-emoji{font-size:var(--fs-4xl);flex-shrink:0}
.bwr-info{flex:1}
.bwr-info strong{display:block;font-size:var(--fs-base);font-family:var(--sans);font-weight:700;color:var(--text)}
.bwr-info span{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono)}
.bwr-dl{background:var(--green);color:#022c22;border:none;border-radius:var(--radius-md);padding:8px 14px;font-size:var(--fs-sm);font-weight:700;font-family:var(--sans);cursor:default;white-space:nowrap}
.bw-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bwf{background:rgba(255,255,255,.04);border:1px solid var(--gb);border-radius:10px;padding:10px 8px;display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--text2);font-family:var(--mono);font-weight:600}
.bwf-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);flex-shrink:0}

/* Floating mini phone (TSX reference style) */
.hero-mini-phone{position:absolute;bottom:-10px;right:-40px;width:92px;height:170px;background:linear-gradient(145deg,#131a38,#0d1324);border-radius:22px;padding:5px;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 48px rgba(0,0,0,.6);animation:mpfloat 6s ease-in-out infinite;z-index:3}
@keyframes mpfloat{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-10px)}}
.hmp-notch{width:32px;height:5px;background:#1e293b;border-radius:0 0 5px 5px;margin:0 auto 5px}
.hmp-screen{background:var(--surface2);border-radius:var(--radius-xl);height:calc(100% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px;overflow:hidden}
.hmp-icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--blue));display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);box-shadow:0 4px 12px rgba(249,115,22,.45)}
.hmp-name{font-size:8px;font-weight:700;font-family:var(--sans);color:var(--text);text-align:center}
.hml{height:3px;background:rgba(255,255,255,.1);border-radius:var(--radius-pill);margin-bottom:4px;width:100%}
.hmp-glow{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);width:60px;height:40px;background:radial-gradient(circle,rgba(249,115,22,.5) 0%,transparent 70%);filter:blur(10px);pointer-events:none}

/* Floating status chips */
.hero-chip{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border:1px solid var(--gb2);border-radius:10px;padding:8px 14px;font-size:var(--fs-xs);font-family:var(--mono);font-weight:700;color:var(--text2);white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.hc-1{top:30px;left:-16px;animation:fc1 4s ease-in-out infinite}
.hc-2{bottom:90px;left:-24px;animation:fc2 5s ease-in-out infinite}

/* ══════════════════════════════════════════
   LIVE COUNTER TICKER
══════════════════════════════════════════ */
.live-ticker{background:var(--surface);border-top:1px solid var(--gb);border-bottom:1px solid var(--gb);padding:22px 56px;overflow:hidden}
.ticker-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ticker-item{display:flex;align-items:center;gap:12px}
.ticker-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:bl 2s ease-in-out infinite;flex-shrink:0}
.ticker-label{font-size:var(--fs-sm);font-family:var(--mono);color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.ticker-val{font-family:var(--sans);font-size:var(--fs-4xl);font-weight:800;color:var(--text)}
.ticker-val em{font-style:normal;color:var(--accent)}
.ticker-divider{width:1px;height:40px;background:var(--gb);flex-shrink:0}
@media(max-width:768px){.live-ticker{padding:18px 24px}.ticker-divider{display:none}.ticker-inner{gap:20px;justify-content:flex-start}}

/* ══════════════════════════════════════════
   USE CASES
══════════════════════════════════════════ */
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:0}
@media(max-width:900px){.uc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.uc-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════
   BLOG / RESOURCES
══════════════════════════════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}
.blog-card{background:var(--surface);border:1px solid var(--gb);border-radius:var(--radius-2xl);overflow:hidden;transition:border-color .25s,transform .25s;cursor:pointer;display:flex;flex-direction:column}
/* Whole-card link: the title anchor is stretched over the card with a
   pseudo-element, so the entire card is clickable without JavaScript and
   without nesting interactive elements. Replaces the old onclick handler. */
.blog-card{position:relative}
.blog-card .blog-title a{color:inherit;text-decoration:none}
.blog-card .blog-title a::after{content:"";position:absolute;inset:0;z-index:1}
.blog-card:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.blog-card .blog-title a:focus-visible{outline:none}
.blog-card:hover .blog-title a{color:var(--accent2)}
.blog-card:hover{border-color:rgba(249,115,22,.25);transform:translateY(-4px)}
.blog-thumb{height:140px;display:flex;align-items:center;justify-content:center;font-size:52px;flex-shrink:0;overflow:hidden}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.blog-card:hover .blog-thumb img{transform:scale(1.05)}
.blog-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.blog-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.blog-cat{font-size:var(--fs-2xs);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-pill);font-weight:700}
.cat-tutorial{background:rgba(249,115,22,.1);color:var(--accent)}
.cat-guide{background:rgba(34,197,94,.1);color:var(--green)}
.cat-comparison{background:rgba(245,158,11,.1);color:var(--amber)}
.cat-news{background:rgba(249,115,22,.1);color:var(--orange)}
.cat-tips{background:rgba(139,92,246,.1);color:var(--purple)}
.blog-date{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono)}
.blog-title{font-family:var(--sans);font-size:17px;font-weight:800;line-height:1.25;color:var(--text);margin-bottom:10px;letter-spacing:-.02em}
.blog-excerpt{font-size:var(--fs-base);color:var(--text2);line-height:1.65;flex:1}
.blog-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--gb)}
.blog-read{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono)}
.blog-arrow{font-size:var(--fs-base);color:var(--accent);font-weight:700;transition:transform .2s}
.blog-card:hover .blog-arrow{transform:translateX(4px)}
/* Blog featured card */
.blog-featured{grid-column:span 2}
@media(max-width:560px){.blog-featured{grid-column:span 1}}
.blog-featured .blog-thumb{height:220px;font-size:72px}
.blog-featured .blog-title{font-size:21px}
/* Blog modal */

/* ══════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════ */
.newsletter-section{background:linear-gradient(135deg,rgba(249,115,22,.07),rgba(239,68,68,.04));border:1px solid rgba(249,115,22,.2);border-radius:28px;padding:56px 48px;max-width:1200px;margin:0 auto 0;text-align:center}
@media(max-width:768px){.newsletter-section{padding:40px 24px;margin:0 16px}}
/* 3-step cards responsive */
@media(max-width:900px){.steps-3-grid{grid-template-columns:1fr!important}}
/* Add-ons category grid responsive */
@media(max-width:900px){.addons-cat-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.addons-cat-grid{grid-template-columns:1fr!important}}
/* Showcase grid responsive */
@media(max-width:1000px){}
@media(max-width:700px){}
@media(max-width:440px){}
/* Orange hero split responsive */
@media(max-width:768px){.orange-hero-split{grid-template-columns:1fr!important}.orange-hero-split>div:first-child{min-height:180px!important;padding:32px 24px!important}}
/* Integration tab grid responsive */
@media(max-width:768px){.itab-grid{grid-template-columns:1fr!important}}
.nl-form{display:flex;gap:12px;max-width:480px;margin:28px auto 0;flex-wrap:wrap;justify-content:center}
.nl-input{flex:1;min-width:220px;background:rgba(255,255,255,.05);border:1px solid var(--gb2);border-radius:var(--radius-lg);padding:13px 18px;font-size:var(--fs-md);color:var(--text);font-family:var(--body);outline:none;transition:border-color .2s}
.nl-input:focus{border-color:var(--accent)}
.nl-input::placeholder{color:var(--muted)}
.nl-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-lg);padding:13px 24px;font-size:var(--fs-md);font-weight:700;cursor:pointer;font-family:var(--sans);transition:all .2s;white-space:nowrap}
.nl-btn:hover{background:#ea6c0a;transform:translateY(-1px)}
.nl-note{font-size:var(--fs-xs);color:var(--muted);margin-top:12px;font-family:var(--mono)}
#nl-success{display:none;color:var(--green);font-family:var(--mono);font-size:var(--fs-base);margin-top:12px}

/* ══════════════════════════════════════════
   CHANGELOG / UPDATES
══════════════════════════════════════════ */
.changelog-list{display:flex;flex-direction:column;gap:0;margin-top:40px;max-width:720px}
.cl-item{display:flex;gap:28px;padding:28px 0;border-bottom:1px solid var(--gb);position:relative}
.cl-item:last-child{border-bottom:none}
.cl-date-col{width:90px;flex-shrink:0;text-align:right}
.cl-ver{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--accent);background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:var(--radius-sm);padding:2px 8px;display:inline-block;margin-bottom:6px}
.cl-date{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono)}
.cl-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:6px;box-shadow:0 0 10px rgba(249,115,22,.5)}
.cl-content h4{font-family:var(--sans);font-size:var(--fs-xl);font-weight:800;color:var(--text);margin-bottom:8px}
.cl-content ul{padding-left:18px;font-size:var(--fs-base);color:var(--text2);line-height:1.75;display:flex;flex-direction:column;gap:4px}
.cl-badge{display:inline-block;font-size:9px;font-family:var(--mono);font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:middle}
.cl-new{background:rgba(34,197,94,.12);color:var(--green)}
.cl-fix{background:rgba(245,158,11,.1);color:var(--amber)}
.cl-imp{background:rgba(249,115,22,.1);color:var(--accent2)}
/* ── Email capture modal ────────────────────────────────────────────────── */
#ecap-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9999;align-items:center;justify-content:center;padding:calc(20px + var(--sa-top)) calc(20px + var(--sa-right)) calc(20px + var(--sa-bottom)) calc(20px + var(--sa-left))}
#ecap-overlay.visible{display:flex}
#ecap-modal{background:#fff;border-radius:var(--radius-3xl);padding:40px 36px;max-width:460px;width:100%;text-align:center;box-shadow:0 32px 80px rgba(0,0,0,.22);animation:ecap-in .25s ease}
@keyframes ecap-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
#ecap-modal .ecap-icon{font-size:40px;margin-bottom:16px}
#ecap-modal h3{font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.02em;margin-bottom:8px;color:var(--text)}
#ecap-modal .ecap-sub{font-size:var(--fs-md);color:var(--muted);line-height:1.65;margin-bottom:28px}
#ecap-modal .ecap-sub b{color:var(--text)}
#ecap-email-input{width:100%;padding:14px 16px;border:2px solid var(--gb2);border-radius:var(--radius-lg);font-size:var(--fs-lg);font-family:var(--body);outline:none;transition:border-color .2s;margin-bottom:12px;color:var(--text)}
#ecap-email-input:focus{border-color:var(--accent)}
#ecap-email-input.error{border-color:var(--red)}
#ecap-submit{width:100%;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-lg);padding:15px;font-size:var(--fs-xl);font-weight:700;cursor:pointer;font-family:var(--sans);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
#ecap-submit:hover{background:#ea6c0a;transform:translateY(-1px);box-shadow:0 8px 28px rgba(249,115,22,.35)}
#ecap-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.ecap-trust{font-size:var(--fs-xs);color:var(--muted);margin-top:14px;line-height:1.6}
.ecap-err{display:none;font-size:var(--fs-base);color:var(--red);margin-bottom:10px}
#ecap-code-input{width:100%;padding:14px 16px;border:2px solid var(--gb2);border-radius:var(--radius-lg);font-size:var(--fs-5xl);font-family:monospace;font-weight:700;letter-spacing:.45em;text-align:center;outline:none;transition:border-color .2s;margin-bottom:12px;color:var(--text)}
#ecap-code-input:focus{border-color:var(--accent)}
#ecap-code-input.error{border-color:var(--red)}
#ecap-verify{width:100%;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-lg);padding:15px;font-size:var(--fs-xl);font-weight:700;cursor:pointer;font-family:var(--sans);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
#ecap-verify:hover{background:#ea6c0a;transform:translateY(-1px);box-shadow:0 8px 28px rgba(249,115,22,.35)}
#ecap-verify:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.ecap-link{color:var(--accent);font-weight:600;text-decoration:none}
.ecap-link:hover{text-decoration:underline}

/* ── Touch targets ──
   Measured at 375px: 9 real controls sat under the 44px minimum. Inline prose
   links are excluded on purpose — WCAG 2.5.8 exempts them, and padding them
   would wreck body copy line spacing.

   min-height is used rather than padding for the showcase CTA because that
   button carries all its styling inline, and inline padding would win.

   Keyed on pointer type as well as width: a 1024x768 iPad is a touch device but
   sits above any sensible width breakpoint, so a width-only query missed it. */
@media(max-width:900px),(pointer:coarse){
  .nav-hamburger{min-width:44px;min-height:44px;padding:10px}  /* was 34x28 — primary mobile nav */
  .url-box input{min-height:44px}                              /* was 38px */
  .btn-plan,.nl-btn,.btn-convert,.bwr-dl{min-height:44px}      /* were 42, 43, 42, 31px */
  .showcase-section button{min-height:44px}                    /* was 38px, styled inline */
  #itab-wp,#itab-sh,#itab-ca{min-height:44px}                  /* tab group, 38px; no shared class to hook */
  .nav-btn{min-height:44px}                                    /* 42px on touch tablets */
  .nav-logo{min-height:44px}
}
/* Footer links were 17px tall, failing the 24px WCAG 2.5.8 minimum. That applies
   at every width, not just on touch, so this sits outside the query. Margin is
   traded for padding to grow the target without inflating the footer. */
.footer-col a{padding:7px 0;margin-bottom:2px}

/* ── Interaction states ──
   The button classes below all previously had :hover only — no pressed, busy,
   success or disabled treatment. These add the missing states without touching
   any resting style, so existing appearance is unchanged until a state applies. */
.btn-build,.btn-build-main,.btn-convert,.btn-cta-p,.btn-cta-g,.btn-upgrade,
.btn-plan,.btn-dl,.nav-btn,.nl-btn,.dp-btn,.bw-btn{
  -webkit-tap-highlight-color:transparent;
}
/* Pressed — tactile confirmation that the tap registered */
.btn-build:active,.btn-build-main:active,.btn-convert:active,.btn-cta-p:active,
.btn-cta-g:active,.btn-upgrade:active,.btn-plan:active,.btn-dl:active,
.nav-btn:active,.nl-btn:active,.dp-btn:active,.bw-btn:active{
  transform:translateY(0) scale(.97);
  transition-duration:var(--dur-fast);
}
/* Busy — blocks re-submission and shows a spinner in place of the label */
.is-loading,[aria-busy="true"]{
  opacity:var(--opacity-loading);
  pointer-events:none;
  cursor:progress;
  position:relative;
  color:transparent!important;
}
.is-loading::after,[aria-busy="true"]::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:1em;height:1em;
  border:2px solid currentColor;
  border-top-color:#fff;
  border-radius:var(--radius-circle);
  animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}
/* Confirmed — success feedback after an action completes */
.is-success{
  background:var(--green)!important;
  border-color:var(--green)!important;
  color:#fff!important;
}
/* Unavailable — audit found only two :disabled rules across the whole file */
:disabled,[disabled],[aria-disabled="true"],.is-disabled{
  opacity:var(--opacity-disabled);
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .btn-build:active,.btn-build-main:active,.btn-convert:active,.btn-cta-p:active,
  .btn-cta-g:active,.btn-upgrade:active,.btn-plan:active,.btn-dl:active,
  .nav-btn:active,.nl-btn:active,.dp-btn:active,.bw-btn:active{transform:none}
  .is-loading::after,[aria-busy="true"]::after{animation-duration:1.8s}
}