/* bilingoplus.com — the one stylesheet (2026-10-23). Direction 3 "Workspace-native bright", chosen by the
   owner on 23.10 from redesign-2026-10b/. Layers: fonts → tokens (light + dark) → structure (ported from
   redesign-2026-10b/assets/base.css) → direction-3 treatments (redesign-2026-10b/3/theme.css) → content
   pages (guides, help, changelog, legal). No inline styles anywhere on the site; colour means product
   (.p-slides / .p-gridscoop / .p-cardwright / .p-harscope set --accent), the studio is neutral blue. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:optional;src:url("/assets/fonts/figtree-latin.woff2") format("woff2");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:"Figtree";font-style:normal;font-weight:400 800;font-display:optional;src:url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --scheme:light;
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --bg:#ffffff; --bg-2:#f5f7fb; --surface:#ffffff; --surface-2:#eef1f6; --surface-solid:#ffffff;
  --ink:#1f1f1f; --ink-2:#3c4043; --muted:#5f6368; --line:#e3e7ee; --line-2:#d2d8e2;
  --c-studio:#3b5bdb; --c-slides:#5b47e0; --c-grid:#0a7c6e; --c-card:#4a7a0c; --c-har:#c2410c;
  --on-accent:#ffffff; --text-mix:92%; --soft-pct:11%;
  --shadow-sm:0 1px 2px rgba(60,64,67,.15);
  --shadow:0 1px 3px rgba(60,64,67,.12),0 8px 24px -10px rgba(60,64,67,.22);
  --shadow-lg:0 1px 3px rgba(60,64,67,.12),0 24px 60px -24px rgba(60,64,67,.35);
  --hdr-bg:#ffffff;
  --r:16px; --r-lg:22px; --r-btn:999px; --step-r:999px; --label-dot-r:99px;
  --w-head:700; --w-display:750; --track-display:-.025em; --track-tight:-.01em;
  --app-canvas:#f1f3f8; --frame-inner:#f5f7fb; --dot:#d2d8e2;
  --g-blue:#4285f4; --g-red:#ea4335; --g-yellow:#fbbc04; --g-green:#34a853;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --scheme:dark; --bg:#1b1c1f; --bg-2:#202124; --surface:#26272b; --surface-2:#303136; --surface-solid:#26272b;
  --ink:#e8eaed; --ink-2:#c4c7cc; --muted:#a0a4ab; --line:#36383d; --line-2:#45474d;
  --c-studio:#8ab4f8; --c-slides:#a99bff; --c-grid:#4fd1c0; --c-card:#a6d85a; --c-har:#fdab6b; --on-accent:#1b1c1f; --text-mix:100%;
  --hdr-bg:#1b1c1f; --app-canvas:#2a2b30; --frame-inner:#232428; --dot:#4a4c52;
  --shadow-lg:0 1px 3px rgba(0,0,0,.4),0 24px 60px -24px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --scheme:dark; --bg:#1b1c1f; --bg-2:#202124; --surface:#26272b; --surface-2:#303136; --surface-solid:#26272b;
  --ink:#e8eaed; --ink-2:#c4c7cc; --muted:#a0a4ab; --line:#36383d; --line-2:#45474d;
  --c-studio:#8ab4f8; --c-slides:#a99bff; --c-grid:#4fd1c0; --c-card:#a6d85a; --c-har:#fdab6b; --on-accent:#1b1c1f; --text-mix:100%;
  --hdr-bg:#1b1c1f; --app-canvas:#2a2b30; --frame-inner:#232428; --dot:#4a4c52;
  --shadow-lg:0 1px 3px rgba(0,0,0,.4),0 24px 60px -24px rgba(0,0,0,.7);
}

/* ================= structure (from redesign-2026-10b/assets/base.css) ================= */
*,*::before,*::after{box-sizing:border-box}
:root{--check:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M3 8.5l3.2 3L13 4.5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;color-scheme:var(--scheme,light)}
html.lock{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--ink);letter-spacing:var(--track-tight,-.02em);line-height:1.15;font-weight:var(--w-head,650)}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--wrap,1200px) + 48px);margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px}}

/* product accents: the studio is neutral, colour means product */
body,.p-studio{--accent:var(--c-studio);--accent-2:var(--c-studio-2,var(--c-studio))}
.p-slides{--accent:var(--c-slides);--accent-2:var(--c-slides-2,var(--c-slides))}
.p-gridscoop{--accent:var(--c-grid);--accent-2:var(--c-grid-2,var(--c-grid))}
.p-cardwright{--accent:var(--c-card);--accent-2:var(--c-card-2,var(--c-card))}
.p-harscope{--accent:var(--c-har);--accent-2:var(--c-har-2,var(--c-har))}
.p-slides,.p-gridscoop,.p-cardwright,.p-harscope,body{--accent-soft:color-mix(in oklab,var(--accent) var(--soft-pct,10%),transparent);--accent-text:color-mix(in oklab,var(--accent) var(--text-mix,100%),var(--ink))}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-btn,10px);border:1px solid transparent;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.btn-primary{background:var(--btn-bg,var(--accent));color:var(--on-accent,#fff);box-shadow:var(--btn-shadow,none)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--ink-3,var(--muted))}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-lg{min-height:50px;padding:0 22px;font-size:16px}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(2px)}
.cta-touch{display:none}
@media (hover:none) and (pointer:coarse){
  .cta-desk{display:none!important}
  .cta-touch{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .cta-touch .cta-note{flex-basis:100%}
}
.cta-note{margin:0;font-size:13.5px;color:var(--muted)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg,var(--bg));border-bottom:1px solid var(--hdr-line,var(--line));-webkit-backdrop-filter:var(--hdr-blur,none);backdrop-filter:var(--hdr-blur,none)}
.hdr-in{display:flex;align-items:center;gap:28px;height:60px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:-.01em;font-size:16px;color:var(--ink);flex:none}
.logo img{width:28px;height:28px;border-radius:7px}
.nav{display:flex;align-items:center;gap:4px;flex:1}
.nav>a,.nav-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:8px;border:0;background:none;font-size:14.5px;font-weight:500;color:var(--ink-2,var(--ink));text-decoration:none;cursor:pointer}
.nav>a:hover,.nav-btn:hover,.nav-btn[aria-expanded="true"]{background:var(--surface-2)}
.nav-btn svg{width:12px;height:12px;transition:transform .15s}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-prod{position:relative}
.hdr-cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.hcta .l-short{display:none}
.hcta-touch{display:none!important}
@media (hover:none) and (pointer:coarse){.hcta-desk.has-alt{display:none!important}.hcta-touch{display:inline-flex!important}}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);position:relative;content:""}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
@media (max-width:900px){
  .nav{display:none}
  .hdr-in{gap:10px;height:56px}
  .burger{display:inline-flex}
  .hcta{min-height:38px;padding:0 14px;font-size:14px}
  .hcta .l-long{display:none}.hcta .l-short{display:inline}
}

/* products dropdown */
.menu{position:absolute;top:calc(100% + 10px);left:-12px;width:min(600px,calc(100vw - 48px));background:var(--menu-bg,var(--surface-solid,var(--surface)));border:1px solid var(--line-2);border-radius:var(--r-lg,14px);box-shadow:var(--shadow-lg);padding:8px;-webkit-backdrop-filter:var(--menu-blur,none);backdrop-filter:var(--menu-blur,none)}
.menu-list{list-style:none}
.mrow{display:grid;grid-template-columns:44px 1fr auto;gap:2px 14px;align-items:center;padding:12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.mrow:hover,.mrow:focus-visible{background:var(--surface-2)}
.mrow img{grid-row:span 2;width:40px;height:40px;border-radius:10px}
.mrow .m-name{font-weight:600;font-size:15px}
.mrow .m-plat{font-size:12.5px;color:var(--muted);text-align:right;white-space:nowrap}
.mrow .m-what{grid-column:2 / 4;font-size:13.5px;color:var(--muted)}
.menu-foot{display:flex;gap:20px;border-top:1px solid var(--line);margin-top:6px;padding:12px 12px 6px;font-size:13.5px}
.menu-foot a{color:var(--muted);text-decoration:none;font-weight:500}
.menu-foot a:hover{color:var(--ink)}

/* mobile sheet */
.msheet{position:fixed;inset:0;z-index:90;background:var(--sheet-bg,var(--bg));overflow-y:auto;display:flex;flex-direction:column;overscroll-behavior:contain}
.msheet-top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:inherit}
.mclose{width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);font-size:22px;line-height:1;cursor:pointer}
.msheet-body{padding:16px;display:flex;flex-direction:column;gap:18px;flex:1}
.msheet .m-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 4px 12px}
.mlinks{list-style:none;border-top:1px solid var(--line)}
.mlinks a{display:block;padding:14px 12px;font-size:17px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.msheet-cta{margin-top:auto;padding-top:8px}
.msheet-cta .btn{width:100%}

/* ---------- breadcrumbs & product tabs ---------- */
.crumbs{font-size:13.5px;color:var(--muted);padding:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line-2)}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.ptabs{position:relative;margin-top:8px}
.ptabs ul{list-style:none;display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid var(--line)}
.ptabs a{display:block;padding:12px 14px;font-size:14.5px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.ptabs a:hover{color:var(--ink)}
.ptabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
@media (max-width:640px){
  .ptabs ul{border:0;background:var(--surface-2);padding:4px;border-radius:999px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .ptabs ul::-webkit-scrollbar{display:none}
  .ptabs.at-end ul{-webkit-mask-image:none;mask-image:none}
  .ptabs a{border:0;border-radius:999px;padding:8px 14px;margin:0}
  .ptabs a[aria-current="page"]{background:var(--surface);box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.12))}
  .ptabs::after{content:"Swipe for more";position:absolute;right:4px;top:-18px;font-size:11px;color:var(--muted)}
  .ptabs.at-end::after{content:none}
}

/* ---------- passport hero (product overview) ---------- */
.passport{position:relative;padding:44px 0 0;overflow:hidden}
.passport-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:48px;align-items:center}
.pp-id{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.pp-icon{flex:none;width:56px;height:56px;border-radius:14px;background:var(--icon-bg,transparent);display:grid;place-items:center}
.pp-icon img{width:56px;height:56px;border-radius:14px}
.eyebrow{margin:0 0 4px;font-size:13.5px;font-weight:600;color:var(--accent-text);letter-spacing:.01em}
.pp-h1{font-size:clamp(22px,2.1vw,28px);letter-spacing:-.015em}
.promise{font-family:var(--font-display);font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:var(--track-display,-.03em);font-weight:var(--w-display,680);margin:0 0 16px;color:var(--ink)}
.subhead{font-size:17px;color:var(--ink-2,var(--muted));max-width:56ch;margin-bottom:24px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.proof{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;font-size:14px;color:var(--ink-2,var(--muted));margin-bottom:10px}
.proof li{display:flex;gap:6px;align-items:center}
.proof li::before{content:"";width:14px;height:14px;flex:none;background:var(--accent);-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
.meta{font-size:12.5px;color:var(--muted);font-family:var(--font-mono,var(--font));letter-spacing:.01em;margin:0}
.meta span+span::before{content:"·";margin:0 7px}
.pp-visual{position:relative}
.pp-tabs{margin-top:40px}
@media (max-width:1060px){.passport-grid{grid-template-columns:1fr;gap:32px}.subhead{max-width:none}}
@media (max-width:640px){.passport{padding-top:24px}.pp-id{margin-bottom:14px}.pp-icon,.pp-icon img{width:48px;height:48px}.subhead{font-size:16px}.cta-row .btn-lg{width:100%}.cta-touch .btn{flex:1 1 auto}}

/* compact passport on sub-pages */
.passport-sm{padding:6px 0 0}
.pps-row{display:flex;align-items:center;gap:14px;padding:16px 0 4px;flex-wrap:wrap}
.pps-row img{width:36px;height:36px;border-radius:9px}
.pps-name{font-weight:650;font-size:17px;text-decoration:none;color:var(--ink)}
.pps-meta{font-size:13px;color:var(--muted)}
.pps-row .btn{margin-left:auto}
@media (max-width:640px){.pps-row .btn{display:none}}

/* ---------- frames & hero visuals ---------- */
.frame{position:relative;margin:0;background:var(--frame-bg,var(--surface));border:1px solid var(--frame-line,var(--line-2));border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--frame-bar,var(--surface-2))}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--dot,var(--line-2))}
.frame-bar .ft{margin-left:10px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame img{width:100%}
.frame-pad{padding:18px;background:var(--frame-inner,var(--bg-2))}
.frame-pad img{border-radius:8px}
.glow{position:absolute;inset:-12% -8% -14% -8%;z-index:-1;pointer-events:none;background:var(--glow,radial-gradient(60% 55% at 55% 45%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 70%));filter:blur(var(--glow-blur,10px))}
.pp-visual,.home-visual{z-index:0}
.caption{font-size:12.5px;color:var(--muted);margin:10px 2px 0}

/* Slides app mock (built around the real panel screenshot) */
.app{font-family:var(--font)}
.app-menu{display:flex;gap:14px;padding:6px 14px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);background:var(--frame-bg,var(--surface))}
.app-menu .hl{border-radius:4px;padding:0 4px;margin:0 -4px;animation:hl 10s infinite}
.app-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0;background:var(--app-canvas,#eef0f4)}
.slide-wrap{padding:18px;display:flex;align-items:center}
.slide{position:relative;width:100%;aspect-ratio:16/10;background:#fff;color:#151826;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:7% 8%;overflow:hidden}
.slide .lang{position:absolute;top:7%;left:8%;font-size:10.5px;font-weight:600;color:#4b3fd6;background:#efedff;border-radius:99px;padding:2px 9px}
.slide .s-title{margin:12% 0 4%;font-weight:750;font-size:clamp(14px,1.7vw,22px);line-height:1.15;letter-spacing:-.01em}
.slide .s-title b,.slide .s-body b{color:#6d4cff}
.slide .s-body{font-size:clamp(9.5px,1vw,12.5px);margin:0;color:#2b2f3a}
.slide .s-circle{position:absolute;right:9%;bottom:10%;width:27%;aspect-ratio:1;border-radius:50%;background:#9c27b0;color:#fff;display:grid;place-items:center;text-align:center;font-weight:700;font-size:clamp(8.5px,.9vw,11.5px);line-height:1.2;padding:6px}
.swap{display:grid}.swap>*{grid-area:1/1}
.slide .es{opacity:0}
.slide .en,.lang-en{animation:en 10s infinite}
.slide .es,.lang-es{animation:es 10s infinite}
.lang-es{opacity:0}
.scan{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(109,76,255,.16) 50%,transparent 70%);transform:translateX(-100%);animation:scan 10s infinite}
.side{border-left:1px solid var(--line);background:#f6f7fb;position:relative;overflow:hidden}
.side img{width:100%;height:100%;object-fit:cover;object-position:top}
.tap{position:absolute;border-radius:10px;box-shadow:0 0 0 3px var(--tap,#6d4cff);opacity:0;animation:tap 10s infinite}
.tap-slides{left:6%;top:74.6%;width:88%;height:9%}
.toast{position:absolute;left:31%;bottom:14px;transform:translateX(-50%);background:#101318;color:#fff;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:8px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;animation:toast 10s infinite}
.toast b{color:#6ee7b7}
@keyframes hl{0%,4%{background:transparent;color:inherit}8%,18%{background:var(--accent-soft);color:var(--ink)}24%,100%{background:transparent}}
@keyframes tap{0%,22%{opacity:0;transform:scale(1.06)}26%{opacity:1;transform:scale(1)}32%,100%{opacity:0}}
@keyframes scan{0%,32%{transform:translateX(-100%)}46%{transform:translateX(100%)}100%{transform:translateX(100%)}}
@keyframes en{0%,40%{opacity:1}44%,93%{opacity:0}97%,100%{opacity:1}}
@keyframes es{0%,40%{opacity:0}44%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes toast{0%,48%{opacity:0;transform:translate(-50%,6px)}52%,88%{opacity:1;transform:translate(-50%,0)}92%,100%{opacity:0}}

/* GridScoop app mock (data grid + the real popup crop) */
.urlpill{margin-left:10px;flex:1;max-width:260px;height:18px;border-radius:99px;background:var(--bg);border:1px solid var(--line);font-size:10.5px;line-height:16px;padding:0 10px;color:var(--muted);overflow:hidden;white-space:nowrap}
.gbody{position:relative;height:360px;background:var(--app-canvas,#eef0f4);overflow:hidden}
.dgrid{position:absolute;inset:14px 14px 14px 14px;background:#fff;border-radius:8px;border:1px solid #dfe3ea;overflow:hidden;font-size:11px;color:#2b2f3a;font-variant-numeric:tabular-nums}
.drow{display:grid;grid-template-columns:1.1fr 1fr 1.3fr .9fr .7fr .9fr;gap:8px;padding:7px 12px;border-bottom:1px solid #eef0f4;white-space:nowrap}
.dhead{font-weight:700;background:#f6f7f9;position:relative;z-index:1}
.drows{animation:rows 10s infinite}
.drow .ok{color:#0f7a5a}.drow .pd{color:#a16207}
.gpop{position:absolute;right:22px;top:26px;width:min(56%,330px);border-radius:12px;overflow:hidden;box-shadow:0 18px 50px rgba(5,10,20,.45);border:1px solid rgba(255,255,255,.08);animation:pop 10s infinite}
.gpop img{width:100%}
.tap-grid{left:8%;top:74%;width:30%;height:12.5%;--tap:#2dd4bf}
.gcount{position:absolute;left:28px;bottom:24px;font-size:11.5px;font-weight:600;background:#fff;color:#2b2f3a;border:1px solid #dfe3ea;border-radius:99px;padding:4px 10px}
@keyframes rows{0%,30%{transform:translateY(0)}62%{transform:translateY(-62%)}100%{transform:translateY(-62%)}}
@keyframes pop{0%,6%{opacity:0;transform:translateY(8px)}12%,100%{opacity:1;transform:none}}
@media (max-width:640px){.gbody{height:300px}.gpop{width:62%;right:12px;top:16px}.drow{grid-template-columns:1.1fr 1fr 1fr .9fr;}.drow>:nth-child(5),.drow>:nth-child(6){display:none}.app-body{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.slide-wrap{padding:10px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .slide .en,.lang-en{opacity:0}.slide .es,.lang-es{opacity:1}
  .toast{opacity:1;transform:translateX(-50%)}
  .gpop{opacity:1}
}

/* ---------- sections ---------- */
.blk{padding:var(--blk-pad,72px) 0;position:relative}
.blk+.blk{border-top:var(--blk-sep,1px solid var(--line))}
.blk.tint{background:var(--bg-2)}
.label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent-text);margin:0 0 12px;letter-spacing:.01em}
.label::before{content:"";width:8px;height:8px;border-radius:var(--label-dot-r,2px);background:var(--accent)}
.h2{font-size:clamp(26px,3vw,38px);max-width:22ch;margin-bottom:14px}
.lede{font-size:17px;color:var(--ink-2,var(--muted));max-width:62ch;margin-bottom:32px}
.blk-head{margin-bottom:8px}
@media (max-width:640px){.blk{padding:44px 0}.lede{margin-bottom:28px}}

/* how it works */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:s}
.step h3{font-size:18px;margin:18px 0 6px;display:flex;gap:10px;align-items:baseline}
.step p{color:var(--ink-2,var(--muted));font-size:15px;margin:0}
.step-n{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--step-r,7px);font-size:13px;font-weight:700;background:var(--accent-soft);color:var(--accent-text)}
.step .frame{aspect-ratio:16/10}
.step .frame-pad{height:100%;display:flex;align-items:center;justify-content:center}
.step .frame-pad img{max-height:100%;width:auto;max-width:100%}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:36px}}

/* menu mock used in step 1 (Slides) */
.mock-menu{font-size:12.5px;color:#1f2430;background:#fff;border:1px solid #dfe3ea;border-radius:8px;box-shadow:0 10px 30px rgba(10,20,40,.16);width:88%;max-width:300px}
.mock-menu div{padding:8px 12px;display:flex;justify-content:space-between;gap:10px}
.mock-menu .on{background:#eef0ff;font-weight:600}
.mock-menu .sub{padding-left:24px;color:#4b3fd6;font-weight:700}
.mock-bar{display:flex;gap:12px;font-size:12.5px;color:#4a5060;margin-bottom:8px}
.mock-bar b{background:#e8eaf0;border-radius:4px;padding:0 5px;color:#1f2430}

/* proof */
.proof-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:40px;align-items:center}
.proof-points{list-style:none;display:grid;gap:14px}
.proof-points li{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r,10px);background:var(--surface)}
.proof-points b{display:block;font-size:15.5px;margin-bottom:2px}
.proof-points span{font-size:14.5px;color:var(--ink-2,var(--muted))}
.bars{display:grid;gap:18px;padding:28px;border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--surface)}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:end}
.bar-row .bl{font-size:14px;color:var(--ink-2,var(--muted))}
.bar-row .bn{font-weight:700;font-variant-numeric:tabular-nums;font-size:20px}
.bar{grid-column:1/-1;height:12px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--line-2)}
.bar.us i{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr}}

/* features: result cards (frame + H3 + one line), then "And more" */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feat{display:flex;flex-direction:column;gap:16px}
.feat .frame{order:-1;aspect-ratio:4/3;display:flex;box-shadow:var(--shadow)}
.feat .frame>*{flex:1;min-width:0;min-height:0}
.feat .frame>img{width:100%;height:100%;object-fit:cover;object-position:center}
.feat .frame-pad{display:flex;align-items:center;justify-content:center;padding:14px}
.feat .frame-pad img{max-height:100%;width:auto;max-width:100%}
.feat .illo-card{aspect-ratio:auto;height:100%;padding:16px}
.feat h3{font-size:19px;margin-bottom:6px}
.feat p{color:var(--ink-2,var(--muted));font-size:15px;margin:0}
.more{margin-top:48px}
.more h3{font-size:16px;margin-bottom:14px}
.more-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.more-grid li{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r,10px);background:var(--surface);font-size:14.5px;line-height:1.45}
.more-grid li::before{content:"";flex:none;margin-top:3px;width:14px;height:14px;background:var(--accent);-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
@media (max-width:900px){.more-grid{grid-template-columns:1fr 1fr}.feat .frame{aspect-ratio:16/10}}
@media (max-width:560px){.more-grid{grid-template-columns:1fr}.more-grid li{padding:9px 12px}}
.illo-card{display:grid;place-items:center;aspect-ratio:16/10;padding:24px;background:var(--frame-inner,var(--bg-2))}
.illo-card svg{width:min(100%,420px)}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--surface);position:relative}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
.cmp th,.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-size:13px;color:var(--muted);font-weight:600;background:var(--surface-2)}
.cmp tbody th{font-weight:600}
.cmp tr:last-child>*{border-bottom:0}
.cmp .us{background:var(--accent-soft)}
.cmp tbody .us th,.cmp tbody tr.us th{color:var(--ink)}
.table-note{font-size:13.5px;color:var(--muted);margin-top:14px}
.scroll-hint{display:none;font-size:12px;color:var(--muted);margin:0 0 8px}
@media (max-width:760px){.scroll-hint{display:block}}

/* pricing component */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:960px}
.plan{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg,14px);padding:28px;background:var(--surface);display:flex;flex-direction:column}
.plan-pro{border-color:color-mix(in oklab,var(--accent) 55%,var(--line-2));box-shadow:var(--plan-shadow,0 0 0 1px color-mix(in oklab,var(--accent) 35%,transparent),var(--shadow))}
.plan-tag{position:absolute;top:-11px;left:24px;font-size:12px;font-weight:700;background:var(--accent);color:var(--on-accent,#fff);padding:2px 10px;border-radius:99px}
.plan h3{font-size:16px;margin-bottom:12px;color:var(--ink-2,var(--ink))}
.price{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.price b{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;font-family:var(--font-display)}
.price span{color:var(--muted);font-size:15px}
.price-cond{font-size:14px;color:var(--ink-2,var(--muted));margin-bottom:20px;min-height:42px}
.plan ul{list-style:none;display:grid;gap:10px;margin-bottom:24px;font-size:15px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"";flex:none;margin-top:5px;width:14px;height:14px;background:var(--accent);-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
.plan .btn{margin-top:auto;width:100%}
.plan-free .btn{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.how-buy{margin-top:20px;font-size:14px;color:var(--ink-2,var(--muted));max-width:960px}
.how-buy span+span::before{content:"·";margin:0 8px}
.warn{margin-top:14px;max-width:960px;font-size:14px;padding:12px 16px;border-radius:10px;border:1px solid color-mix(in oklab,#d97706 45%,var(--line));background:color-mix(in oklab,#f59e0b 10%,transparent)}
@media (max-width:760px){.plans{grid-template-columns:1fr}}

/* privacy component */
.priv{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px;align-items:start}
.priv-table{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line);border-radius:var(--r-lg,14px);overflow:hidden;background:var(--surface)}
.priv-table th,.priv-table td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.priv-table tr:last-child>*{border-bottom:0}
.priv-table th{width:150px;font-size:14px;color:var(--accent-text);font-weight:700}
.priv-table code{font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;background:var(--surface-2);padding:1px 6px;border-radius:5px;white-space:nowrap}
.priv-side{display:grid;gap:14px;font-size:15px}
.priv-side p{margin:0;color:var(--ink-2,var(--muted))}
.priv-side a{font-weight:600}
.company{display:flex;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:var(--r,10px);background:var(--surface)}
.company img{width:32px;height:32px;border-radius:8px}
@media (max-width:900px){.priv{grid-template-columns:1fr}.priv-table th{width:110px}.priv-table th,.priv-table td{padding:14px}}
@media (max-width:420px){.priv-table th,.priv-table td{display:block;width:auto;border:0}.priv-table td{padding-top:0;border-bottom:1px solid var(--line)}}

/* faq */
.faq{max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 2px;font-weight:600;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:400;font-size:22px;line-height:1;color:var(--muted);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 2px 18px;color:var(--ink-2,var(--muted));max-width:70ch}
.faq .ans p{margin:0}
.more-link{display:inline-flex;margin-top:22px;font-weight:600;color:var(--accent-text);text-decoration:none}
.more-link:hover{text-decoration:underline}

/* guide cards */
.gcards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gcard{position:relative;display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--surface);transition:transform .15s,border-color .15s,box-shadow .15s}
.gcard:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow)}
.gcard .gk{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-text);margin-bottom:10px}
.gcard h3{font-size:17px;line-height:1.3;margin-bottom:8px}
.gcard h3 a{text-decoration:none}
.gcard h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.gcard p{font-size:14.5px;color:var(--ink-2,var(--muted));margin:0 0 14px}
.gcard .go{margin-top:auto;font-size:14px;font-weight:600;color:var(--accent-text)}
@media (max-width:900px){.gcards{grid-template-columns:1fr}}

/* final cta */
.final{text-align:center;overflow:hidden}
.final .h2{margin:0 auto 14px;max-width:24ch}
.final .cta-row{justify-content:center}
.final .proof{justify-content:center}
.final .glow{inset:0;--glow-blur:0px}

/* product cards (home + "more tools") */
.pcards{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pcards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcard{position:relative;display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--card-bg,var(--surface));transition:transform .15s,border-color .15s,box-shadow .15s;overflow:hidden}
.pcard:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--accent) 40%,var(--line-2));box-shadow:var(--shadow)}
.pc-icon{width:48px;height:48px;border-radius:12px;margin-bottom:16px}
.pcard h3{font-size:18px;margin-bottom:6px}
.pcard h3 a{text-decoration:none}
.pcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pc-what{font-size:14.5px;color:var(--ink-2,var(--muted));margin:0 0 14px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.badge{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--surface-2);color:var(--ink-2,var(--muted));border:1px solid var(--line)}
.badge.acc{background:var(--accent-soft);color:var(--accent-text);border-color:transparent}
.pc-price{font-size:13.5px;color:var(--muted);margin:0 0 18px}
.pc-btns{margin-top:auto;display:flex;gap:8px;position:relative;z-index:2}
.pc-btns .btn{flex:1;min-height:40px;padding:0 12px;font-size:14px}
.pcards.three .pc-btns{display:none}
@media (max-width:1060px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pcards,.pcards.three{grid-template-columns:1fr}.pcard{padding:18px}}

/* home */
.home-hero{position:relative;padding:56px 0 48px;overflow:hidden}
.home-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}
.home-hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:var(--track-display,-.03em);font-weight:var(--w-display,680);margin-bottom:18px}
.home-hero .subhead{margin-bottom:26px}
.home-visual{position:relative}
.tools{padding:24px 0 72px}
.tools .h2{max-width:none}
.trust{padding:0}
.trust-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--surface);overflow:hidden}
.trust-in li{list-style:none;display:flex;gap:12px;align-items:center;padding:18px 20px;font-size:14px;color:var(--ink-2,var(--muted))}
.trust-in li+li{border-left:1px solid var(--line)}
.trust-in b{display:block;color:var(--ink);font-size:14.5px}
.trust-in svg{width:22px;height:22px;flex:none;color:var(--accent)}
.home-guides{padding:72px 0 96px}
.row-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}
.row-head .h2{margin:0}
.row-head a{font-weight:600;text-decoration:none;color:var(--accent-text);white-space:nowrap}
@media (max-width:1060px){.home-grid{grid-template-columns:1fr;gap:36px}.trust-in{grid-template-columns:1fr 1fr}.trust-in li:nth-child(3){border-left:0}.trust-in li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:640px){.home-hero{padding:28px 0 32px}.trust-in{grid-template-columns:1fr}.trust-in li+li{border-left:0;border-top:1px solid var(--line)}.home-guides{padding:56px 0 64px}.home-hero .cta-row .btn{flex:1 1 auto}}

/* guide / article */
.article-head{padding:28px 0 8px;max-width:820px}
.article-head h1{font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:var(--track-display,-.03em);margin:10px 0 12px}
.article-meta{font-size:14px;color:var(--muted)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;padding:24px 0 80px;align-items:start}
.prose{max-width:720px;font-size:17px;line-height:1.7}
.prose h2{font-size:clamp(23px,2.4vw,29px);margin:48px 0 14px;scroll-margin-top:90px}
.prose h3{font-size:19px;margin:28px 0 10px}
.prose ol,.prose ul{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin-bottom:.45em}
.prose a{color:var(--accent-text)}
.prose kbd{font-family:var(--font-mono,ui-monospace,monospace);font-size:.85em;padding:1px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--surface)}
.prose .ui{font-weight:600}
.short{padding:20px 22px;border-radius:var(--r-lg,14px);background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 25%,transparent);margin-bottom:28px}
.short p{margin:0}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 1.2em}
.pc>div{padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:15px;line-height:1.55}
.pc b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.toc{position:sticky;top:88px;font-size:14px}
.toc p{font-weight:700;margin-bottom:10px;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.toc ol{list-style:none;display:grid;gap:2px;border-left:1px solid var(--line)}
.toc a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--ink);border-left-color:var(--accent)}
.toc-m{display:none}
.icta{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;border:1px solid color-mix(in oklab,var(--accent) 35%,var(--line));border-radius:var(--r-lg,14px);background:var(--surface);margin:28px 0;box-shadow:var(--shadow)}
.icta img{width:44px;height:44px;border-radius:11px}
.icta b{display:block;font-size:16px}
.icta span{font-size:14px;color:var(--ink-2,var(--muted));line-height:1.45;display:block}
.icta .btn{text-decoration:none;color:var(--on-accent,#fff)}
.related{border-top:1px solid var(--line);margin-top:56px;padding-top:32px}
.related h2{margin-top:0}
.related ul{list-style:none;padding:0;display:grid;gap:10px}
.related li a{font-weight:600}
@media (max-width:1000px){.article-grid{grid-template-columns:1fr;gap:0}.toc{display:none}.toc-m{display:block;margin-bottom:24px;border:1px solid var(--line);border-radius:12px;padding:4px 16px;background:var(--surface)}.toc-m summary{cursor:pointer;padding:10px 0;font-weight:600}.toc-m ol{padding:0 0 12px 1.2em;font-size:15px}}
@media (max-width:640px){.prose{font-size:16.5px}.pc{grid-template-columns:1fr}.icta{grid-template-columns:auto 1fr}.icta .btn{grid-column:1/-1}}

/* footer */
.ftr{border-top:1px solid var(--line);background:var(--ftr-bg,var(--bg-2));padding:56px 0 32px;font-size:14px;margin-top:0}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px}
.ftr h2{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px;font-family:var(--font)}
.ftr ul{list-style:none;display:grid;gap:8px}
.ftr a{color:var(--ink-2,var(--ink));text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr-brand p{color:var(--muted);margin-top:12px;max-width:30ch}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.ftr-base p{margin:0;max-width:80ch}
.theme-btn{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:6px 12px;font-size:13px;cursor:pointer;height:34px}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-brand{grid-column:1/-1}}

/* decorative micro-illustrations: hidden unless a theme turns them on */
.illo{display:none}

/* reveal on scroll (JS adds .rv to <html>; disabled for reduced motion) */
.rv .reveal{transition:opacity .22s ease,transform .22s ease}
.rv .reveal.pending:not(.in){opacity:0;transform:translateY(8px)}

/* bars & inline svg illustrations (no inline styles: CSP-friendly) */
.bar i.w-full{width:100%}.bar i.w-tiny{width:.6%;min-width:4px}
.sv-faint{fill:var(--surface-2);stroke:var(--line-2)}
.sv-main{fill:var(--surface);stroke:var(--line-2);stroke-width:1.5}
.sv-line{fill:var(--line-2)}
.sv-acc{fill:var(--accent)}
.sv-t{fill:var(--ink);font:600 15px var(--font)}
.sv-tf{fill:var(--muted);font:600 12px var(--font)}
.sv-cap{fill:var(--muted);font:500 13px var(--font-mono,var(--font))}
.sv-big{fill:var(--accent);font:800 64px var(--font-display)}
.sv-arrow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.illo-card .mock-menu{max-width:360px;width:100%}
.illo-card .mock-menu div:last-child{line-height:1.5;color:#3a4050}

/* compaction pass: length budget ≤7 desktop / ≤12 phone screens */
.blk-head{margin-bottom:32px}
.blk-head .lede{margin-bottom:0}
@media (min-width:901px){
  .blk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:end}
  .blk-head .label,.blk-head .h2{grid-column:1}
  .blk-head .h2{margin:0}
  .blk-head .lede{grid-column:2;grid-row:1 / 3;align-self:end;font-size:16.5px}
  .faq{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start}
  .faq:not(.cards) details:nth-child(-n+2){border-top:0}
}
.proof-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  .feat .frame,.step .frame{aspect-ratio:2/1}
  .feat{gap:12px}.feats{gap:28px}
  .steps{gap:26px}.step h3{margin-top:12px}
  .more{margin-top:32px}
  .more-grid{gap:0}.more-grid li{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;padding:9px 2px}
  .home-hero .caption,.pp-visual .caption{display:none}
  .faq summary{padding:15px 2px;font-size:16px}
  .final .proof{display:none}
}
.blk{padding:var(--blk-pad,60px) 0}
@media (min-width:641px){.feat .frame{aspect-ratio:16/10}}
.pcards.three .pcard{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-content:start;padding:20px}
.pcards.three .pc-icon{grid-row:1 / 4;margin:0}
.pcards.three .badges{display:none}
.pcards.three .pc-what{margin-bottom:6px}
.pcards.three .pc-price{margin:0}
@media (max-width:640px){
  .blk{padding:40px 0}
  .feat{display:grid;grid-template-columns:42% minmax(0,1fr);gap:14px;align-items:center}
  .feat .frame{aspect-ratio:4/3}
  .feat .frame-pad{padding:6px}
  .feat h3{font-size:16.5px}.feat p{font-size:14px;line-height:1.45}
  .gcard{padding:16px 18px}.gcard p{display:none}.gcard h3{margin-bottom:6px}
  .gcards{gap:12px}
  .pcards.three{gap:12px}.pcards.three .pcard{padding:16px}
  .plan{padding:22px}.price b{font-size:38px}.price-cond{min-height:0;margin-bottom:14px}.plan ul{margin-bottom:18px;gap:8px;font-size:14.5px}
}
.pp-tabs{margin-top:28px}
@media (max-width:640px){
  .step{display:grid;grid-template-columns:42% minmax(0,1fr);gap:4px 14px;align-items:center}
  .step .frame{grid-row:1 / 3;aspect-ratio:4/3}
  .step .frame-pad{padding:6px}
  .step h3{margin:0;font-size:16.5px}.step p{font-size:14px;line-height:1.45;align-self:start}
  .step-n{width:22px;height:22px;font-size:12px}
  .mock-bar{display:none}.mock-menu{font-size:10.5px}.mock-menu div{padding:5px 8px}
  .gbody{height:260px}
  .proof-points{gap:10px}.proof-points li{padding:12px 14px}
  .bars{padding:20px;gap:14px}
}
.slide .s-body{max-width:64%}
.slide .s-circle{width:23%;right:8%;bottom:9%}
.blk-head .label{justify-self:start}
.gpop{z-index:2;top:40px}
.gbody .toast{bottom:62px;left:34%;z-index:3}
.msheet .mrow{grid-template-columns:44px minmax(0,1fr)}
.msheet .mrow img{grid-row:span 3}
.msheet .m-plat,.msheet .m-what{grid-column:2;text-align:left}

/* ================= direction 3 treatments (from redesign-2026-10b/3/theme.css) ================= */
/* friendly shapes */
.btn{font-weight:650}
.btn-primary{box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
.label{background:var(--accent-soft);color:var(--accent-text);padding:4px 12px 4px 10px;border-radius:99px;font-size:13px;font-weight:700}
.label::before{width:8px;height:8px;border-radius:99px}
.eyebrow{display:inline-block;background:var(--accent-soft);padding:2px 10px;border-radius:99px;font-weight:700;font-size:12.5px}
.pp-icon{background:var(--accent-soft);border-radius:18px;width:68px;height:68px}
.pp-icon img{width:48px;height:48px;border-radius:12px}
.frame{border-radius:20px;border-color:var(--line)}
.frame-bar{height:34px;background:var(--surface)}
.frame-bar i:nth-child(1){background:var(--g-red)}.frame-bar i:nth-child(2){background:var(--g-yellow)}.frame-bar i:nth-child(3){background:var(--g-green)}
.blk+.blk{border-top:0}
.blk.tint{background:var(--bg-2)}
.home-hero,.passport{background:radial-gradient(70% 90% at 85% 10%,var(--accent-soft),transparent 70%)}
.glow{--glow:radial-gradient(50% 50% at 55% 50%,color-mix(in oklab,var(--accent) 18%,transparent),transparent 70%);--glow-blur:30px}
/* each product card wears its colour */
.pcard{border:0;box-shadow:var(--shadow);background:var(--surface)}
.pcard::before{content:"";position:absolute;left:0;right:0;top:0;height:76px;background:var(--accent-soft);border-radius:var(--r-lg) var(--r-lg) 0 0;z-index:0}
.pcard>*{position:relative}
.pc-icon{background:var(--surface);padding:6px;border-radius:14px;box-shadow:var(--shadow-sm);width:56px;height:56px}
.gcard{border:0;box-shadow:var(--shadow)}
.gcard::after{content:"";position:absolute;left:22px;top:0;width:36px;height:4px;border-radius:0 0 4px 4px;background:var(--accent)}
.trust-in{border:0;box-shadow:var(--shadow)}
.trust-in svg{padding:6px;width:34px;height:34px;border-radius:99px;background:var(--accent-soft)}
.trust-in li:nth-child(1) svg{color:var(--g-blue)}.trust-in li:nth-child(2) svg{color:var(--g-green)}.trust-in li:nth-child(3) svg{color:var(--g-red)}.trust-in li:nth-child(4) svg{color:#b06000}
.step-n{width:30px;height:30px;background:var(--accent);color:var(--on-accent)}
.plan{border:0;box-shadow:var(--shadow)}
.plan-pro{box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.proof-points li,.more-grid li{border:0;background:var(--surface);box-shadow:var(--shadow-sm)}
.more-grid li::before{width:20px;height:20px;margin-top:1px;border-radius:99px;-webkit-mask:none;mask:none;background:var(--accent-soft) url("/assets/img/check.svg") center/11px no-repeat}
.table-wrap,.priv-table{border:0;box-shadow:var(--shadow)}
.faq{border:0;display:grid;gap:10px}
.faq details{border:0;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-sm);padding:0 18px}
.short{border:0}
.final{background:var(--bg-2)}
.final .wrap{background:var(--surface);border-radius:28px;box-shadow:var(--shadow-lg);padding:56px 24px;position:relative;overflow:hidden}
.final .wrap::before{content:"";position:absolute;inset:auto -60px -80px auto;width:240px;height:240px;border-radius:50%;background:var(--accent-soft)}
.final .wrap::after{content:"";position:absolute;left:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:color-mix(in oklab,var(--g-yellow) 18%,transparent)}
.final .wrap>*{position:relative;z-index:1}
.ptabs a[aria-current="page"]{border-bottom-width:3px;border-radius:2px}
.hdr{box-shadow:0 1px 0 var(--line)}
.hdr{border-bottom:0}
.nav>a,.nav-btn{border-radius:99px}
.menu{border-radius:22px;border:0;box-shadow:0 2px 6px rgba(60,64,67,.15),0 24px 60px -16px rgba(60,64,67,.35)}
.mrow{border-radius:14px}
.mrow img{background:var(--surface-2);padding:4px}
.icta{border:0;box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}

/* micro-illustrations (decorative, aria-hidden) */
.illo{display:block;position:absolute;pointer-events:none}
.illo .i1{fill:var(--g-yellow)} .illo .i2{fill:var(--g-blue)} .illo .i3{fill:var(--g-red)} .illo .i4{stroke:var(--g-green)} .illo .i4f{fill:var(--g-green)}
.illo-spark{width:96px;right:-18px;top:-38px;z-index:2;animation:bob 6s ease-in-out infinite}
.illo-dots{position:static;width:64px;margin-bottom:16px}
.illo-arc{width:200px;left:6%;top:24px;stroke:var(--accent);opacity:.7}
.illo-arc .i1{fill:var(--accent)}
.illo-arc path:first-child{stroke:var(--accent)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(8deg)}}
@media (max-width:640px){.illo-spark{width:64px;right:-6px;top:-30px}.illo-arc{display:none}.final .wrap{padding:40px 18px;border-radius:22px}}

/* ================= site-wide additions (2026-10-23 rebuild) ================= */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-2);border-radius:5px;padding:1px 5px;overflow-wrap:anywhere}
.prose a,.art a{color:var(--accent-text)}
.btn-primary,.btn-primary:visited{color:var(--on-accent)}
.menu-foot{flex-wrap:wrap}

/* compact passport on product sub-pages (guides, help, changelog, privacy) — shell/sub.html */
.passport-sm{background:radial-gradient(60% 120% at 90% 0%,var(--accent-soft),transparent 70%)}
.passport-sm .pps-row{padding-top:18px}
.pps-icon{width:44px;height:44px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm);display:grid;place-items:center;flex:none}
.pps-icon img{width:32px;height:32px;border-radius:8px}
.pps-text{display:flex;flex-direction:column;gap:1px;min-width:0}

/* ---------- content pages: guides, help, changelog, legal (main.art) ---------- */
.art{width:100%;max-width:calc(var(--wrap,1200px) + 48px);margin:0 auto;padding:8px 24px 72px;font-size:17px;line-height:1.7;color:var(--ink)}
.art>*{max-width:760px}
@media (min-width:1180px){
  .art.has-toc{display:grid;grid-template-columns:minmax(0,760px) 250px;column-gap:72px;align-items:start}
  .art.has-toc>*{grid-column:1;min-width:0}
  .art.has-toc>.toc{grid-column:2;grid-row:1 / span 400;position:sticky;top:84px;margin-top:24px;max-height:calc(100vh - 110px);overflow:auto}
}
@media (max-width:640px){.art{padding:4px 16px 56px;font-size:16.5px}}
.art .crumbs{padding:16px 0 0;font-size:13.5px;color:var(--muted)}
.art .crumbs a{color:var(--muted);text-decoration:none}
.art .crumbs a:hover{color:var(--ink);text-decoration:underline}
.art h1{font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:var(--track-display);font-weight:var(--w-display);margin:14px 0 10px}
.art h2{font-size:clamp(23px,2.4vw,29px);line-height:1.2;margin:44px 0 12px;scroll-margin-top:90px}
.art h3{font-size:19px;line-height:1.3;margin:28px 0 8px;scroll-margin-top:90px}
.art p{margin:0 0 1em}
.art ol,.art ul{padding-left:1.3em;margin:0 0 1.1em}
.art li{margin-bottom:.45em}
.art .meta,.art .upd,.art .article-meta{font-size:14px;color:var(--muted);margin:0 0 22px;font-family:var(--font);letter-spacing:0}
.art .lead{font-size:18.5px;color:var(--ink-2)}
.art .ui{font-weight:650}
.art kbd{font-family:var(--font-mono);font-size:.85em;padding:1px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--surface)}
.art .answer,.art .short{padding:18px 22px;border-radius:var(--r-lg);background:var(--accent-soft);border:0;margin:0 0 26px}
.art .answer p:last-child,.art .short p:last-child{margin:0}
.art .toc{background:var(--surface);box-shadow:var(--shadow);border-radius:18px;padding:16px 20px;font-size:15px;line-height:1.5;margin:0 0 8px}
.art .toc b{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 8px}
.art .toc a{display:inline-block;padding:3px 0;color:var(--ink-2);text-decoration:none}
.art .toc a:hover{color:var(--accent-text);text-decoration:underline}
.art .toc br{display:none}
.art .toc a{display:block}
.art .note{background:color-mix(in oklab,var(--g-yellow) 14%,var(--surface));border:0;border-radius:16px;padding:14px 18px;font-size:16px;margin:0 0 1.2em;box-shadow:var(--shadow-sm)}
.art .note p:last-child{margin:0}
.art .tw,.art .table-wrap{overflow-x:auto;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);margin:14px 0 18px;border:0}
.art table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;background:transparent;border:0;margin:0}
.art .tw table,.art table.cmp{min-width:560px}
.art th,.art td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.art thead th{font-size:13px;color:var(--muted);font-weight:650;background:var(--surface-2);text-transform:none;letter-spacing:0}
.art tbody tr:last-child>*{border-bottom:0}
.art .table-note{font-size:14px;color:var(--muted)}
.art .faq{max-width:760px;border:0;display:block}
.art .faq h3{margin-top:22px}
.art .cta,.art .icta{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin:32px 0;padding:18px 20px;border-radius:var(--r-lg);background:var(--surface);border:0;box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}
.art .cta img,.art .icta img{width:48px;height:48px;border-radius:12px;flex:none}
.art .cta .t,.art .icta>div{flex:1 1 300px;min-width:0;line-height:1.45}
.art .cta b,.art .icta b{display:block;font-size:17px}
.art .cta span,.art .icta span{display:block;color:var(--ink-2);font-size:14.5px}
.art .cta a.btn,.art .icta a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:650;font-size:15px;text-decoration:none;white-space:nowrap}
.art .rel,.art .related{margin-top:48px;padding:22px 24px;border-radius:var(--r-lg);background:var(--bg-2);font-size:16px;border:0}
.art .rel b{display:block;margin-bottom:6px}
.art .rel a{display:block;margin:6px 0;font-weight:600}
.art .related h2{margin:0 0 8px;font-size:20px}
.art .related ul{list-style:none;padding:0;margin:0}
.art .rel-entry{border-top:1px solid var(--line);margin-top:28px}
.art .tm{font-size:13px;color:var(--muted)}
.art .pc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 1.2em}
.art .pc>div{padding:14px 16px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);font-size:15px;line-height:1.55}
.art .pc b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;color:var(--accent-text)}
@media (max-width:640px){.art .pc{grid-template-columns:1fr}.art .cta a.btn,.art .icta a.btn{width:100%}}
.art .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0 26px}
.art .facts>div{background:var(--surface);box-shadow:var(--shadow-sm);border-radius:16px;padding:14px 16px;font-size:15px}
.art .facts b{display:block}
.art .back{font-size:14px;margin:18px 0 0}
.art .back a{color:var(--muted)}
.art .small{font-size:13.5px;color:var(--muted)}

/* support form */
.art form.box{background:var(--surface);box-shadow:var(--shadow);border-radius:var(--r-lg);padding:22px;display:grid;gap:14px;margin:18px 0 26px}
.art form.box label{display:grid;gap:6px;font-size:15px;font-weight:600}
.art form.box input,.art form.box select,.art form.box textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;width:100%}
.art form.box textarea{min-height:140px;resize:vertical}
.art form.box .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.art form.box .row{grid-template-columns:1fr}}
.art button.send{justify-self:start;min-height:46px;padding:0 24px;border-radius:999px;border:0;background:var(--accent);color:var(--on-accent);font-weight:650;cursor:pointer}

/* guides hub and simple page heroes */
.page-hero{padding:40px 0 28px;background:radial-gradient(60% 100% at 85% 0%,var(--accent-soft),transparent 70%)}
.page-hero h1{font-size:clamp(32px,4vw,50px);line-height:1.06;letter-spacing:var(--track-display);font-weight:var(--w-display);margin:12px 0 12px;max-width:22ch}
.page-hero .subhead{margin:0}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none}
.jump a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:99px;background:var(--surface);box-shadow:var(--shadow-sm);text-decoration:none;font-weight:600;font-size:14.5px}
.jump img{width:24px;height:24px;border-radius:6px}
.hub-group{padding:28px 0 12px;scroll-margin-top:80px}
.hub-head{display:flex;gap:12px;align-items:center}
.hub-head img{width:40px;height:40px;border-radius:10px;background:var(--surface);box-shadow:var(--shadow-sm);padding:4px}
.hub-group .h2{font-size:clamp(22px,2.4vw,28px);max-width:none}
.gcards.auto{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.hub-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;font-size:14.5px}
.hub-links a{font-weight:600;color:var(--accent-text);text-decoration:none}
.hub-links a:hover{text-decoration:underline}
.hub-end{padding:24px 0 72px}
@media (max-width:640px){.gcards.auto .gcard p{display:block}}

/* product lists (404, about) */
.plist{list-style:none;padding:0!important;display:grid;gap:10px;max-width:640px}
.plist li{margin:0}
.plist a{display:grid;grid-template-columns:40px 1fr;gap:2px 14px;align-items:center;padding:14px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink)!important}
.plist img{grid-row:span 2;width:40px;height:40px;border-radius:10px}
.plist b{font-size:16px}.plist span{font-size:14px;color:var(--muted)}
.plist a:hover{box-shadow:var(--shadow)}

/* HARScope analyzer wrapper: the app frame keeps its own CSP and styles */
.art.wide>*{max-width:none}
.art.wide>p,.art.wide>h2,.art.wide>ul,.art.wide>ol,.art.wide>.faq,.art.wide>.rel{max-width:760px}
.analyzer-frame{margin:18px 0 10px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);background:#0b1220}
.analyzer-frame iframe{display:block;width:100%;height:min(78vh,760px);border:0}

/* Cardwright and HARScope hero visuals (real crops composed on the app canvas) */
.cw-stage{position:relative;background:var(--app-canvas);padding:22px;min-height:360px}
.cw-stage .cw-page{width:66%;border-radius:12px;box-shadow:var(--shadow);background:#fff}
.cw-stage .cw-pop{position:absolute;right:18px;bottom:18px;width:62%;border-radius:12px;overflow:hidden;box-shadow:0 18px 50px rgba(20,30,50,.35);animation:pop 10s infinite}
.cw-stage .toast{left:28%;bottom:26px;z-index:3}
.hs-stage{background:#0f1524}
.feat .frame.dark,.step .frame.dark{background:#0f1524}
.feat .frame.dark .frame-pad,.step .frame.dark .frame-pad{background:#0f1524}
@media (max-width:640px){.cw-stage{min-height:240px;padding:12px}.cw-stage .cw-pop{right:10px;bottom:10px;width:70%}}
@media (prefers-reduced-motion:reduce){.cw-stage .cw-pop{opacity:1}}

/* payment fallback kept from the old product pages (?buy=1 from the extension's Get Pro) */
.buy-alt{margin:12px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.buy-alt button{background:none;border:0;padding:4px 0;min-height:24px;font:inherit;font-weight:650;color:var(--accent-text);text-decoration:underline;cursor:pointer}
.buy-alt button:disabled{color:var(--muted);text-decoration:none;cursor:default}
.buy-note{margin:4px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.tm-line{font-size:13px;color:var(--muted);margin:24px 0 0}

/* bare pages (checkout redirect, success) */
.bare-top{padding:18px 0;border-bottom:1px solid var(--line);background:var(--hdr-bg)}
.keybox{font-family:var(--font-mono);font-size:19px;font-weight:700;letter-spacing:.06em;padding:12px 14px;border-radius:12px;background:var(--surface-2);word-break:break-all;color:var(--ink);display:block}
.plans.one{grid-template-columns:minmax(0,520px)}
.cmp-h{font-size:clamp(19px,2vw,23px);margin:44px 0 14px}
.proof-grid .frame .frame-pad+.frame-pad{padding-top:0}
/* length budget (≤7 desktop screens per product page) */
@media (min-width:901px){.blk{padding:50px 0}.blk-head{margin-bottom:26px}.more{margin-top:32px}.final .wrap{padding:44px 24px}.cmp-h{margin-top:36px}.steps .frame{aspect-ratio:16/9}.feat .frame{aspect-ratio:16/9}}
@media (min-width:901px){.plan{padding:24px 26px}.plan ul{gap:7px;margin-bottom:18px;font-size:14.5px}.price-cond{min-height:0;margin-bottom:14px}.price b{font-size:40px}.how-buy{margin-top:16px}.final .h2{font-size:clamp(24px,2.6vw,32px)}.final .wrap{padding:36px 24px}.pcards.three .pcard{padding:18px}.priv-table th,.priv-table td{padding:14px 18px}.faq summary{padding:14px 2px}.steps{gap:22px}.step h3{margin-top:14px}}
@media (min-width:901px){.bars{gap:12px;padding:22px 24px}.proof-points{gap:10px}.proof-points li{padding:13px 16px}.warn{margin-top:10px}}
.art form.box .row>div{display:grid;gap:6px;font-size:15px;font-weight:600}
.art .facts span{display:block;color:var(--ink-2)}
.art .plist{margin:12px 0 22px}

/* bare pages: purchase confirmation (licence key) and the Paddle payment-link page — no header nav, no analytics */
body.bare{background:var(--bg-2)}
.bare .card,.bare>.wrap{max-width:560px;width:calc(100% - 32px);margin:40px auto;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:32px;text-align:center}
.bare>.wrap{text-align:left}
.bare .bare-top .wrap{max-width:1248px}
.bare .badge{width:56px;height:56px;border-radius:18px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;border:0;padding:0}
.bare h1{font-size:26px;margin-bottom:8px}
.bare p{color:var(--ink-2);font-size:15.5px}
.bare .keybox{margin:22px 0 8px;font-size:20px}
.bare .keybox.pending{font-size:15px;letter-spacing:0;color:var(--muted)}
.bare #stat{font-size:13.5px;color:var(--muted);margin-top:10px;min-height:1.2em}
.bare .copy{margin-top:10px;background:var(--accent);color:var(--on-accent);border:0;font-weight:650;font-size:15px;min-height:44px;padding:0 22px;border-radius:999px;cursor:pointer}
.bare .steps{text-align:left;margin:22px auto 0;max-width:440px;font-size:15px;padding-left:1.3em}
.bare .steps li{margin:8px 0}
.bare .muted{font-size:13.5px;color:var(--muted);margin-top:18px}
.bare a{color:var(--accent-text)}
.ftr-base a,.art p a,.art li a,.art td a,.priv-side p a,.table-note a,.faq .ans a,.warn a{text-decoration:underline;text-underline-offset:3px}
.pc-icon,.pcards.three .pc-icon{align-self:start;object-fit:contain}
/* the EN↔ES swap jumps instead of fading, so the demo text is never half-transparent (contrast) */
.slide .en,.slide .es,.lang-en,.lang-es{animation-timing-function:step-end}

/* home hero (studio level): the four real product shots as one balanced collage, each tile links to its product */
.collage{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0 0 22px}
.ctile{min-width:0}
.ctile:nth-child(even){transform:translateY(22px)}
.ctile a{display:flex;flex-direction:column;height:100%;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.ctile a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.ct-head{display:flex;gap:10px;align-items:center;padding:12px 14px;background:var(--accent-soft);min-width:0}
.ct-head img{width:32px;height:32px;border-radius:9px;flex:none;background:var(--surface);padding:3px}
.ct-head>span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ct-head b{font-size:14px;font-weight:700}
.ct-head small{font-size:12px;color:var(--muted)}
.ct-shot{display:block;aspect-ratio:4/3;background:var(--frame-inner);padding:10px;overflow:hidden}
.ct-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:8px}
.ct-shot.dark{background:#0f1524}
@media (max-width:640px){.collage{gap:10px;padding:0}.ctile:nth-child(even){transform:none}.ct-head{padding:8px 10px;gap:8px}.ct-head img{width:26px;height:26px;border-radius:7px;padding:2px}.ct-head b{font-size:12.5px}.ct-head small{font-size:11px}.ct-shot{padding:6px}}

/* ================= layout hardening (visual QA 2026-10-23, scripts/layout-qa.mjs) =================
   Root causes found at 360–1920 px, light/dark, menus open and 200% text: grid tracks declared as `1fr`
   (= minmax(auto,1fr)) grew to the min-content of a no-wrap button and pushed the whole hero off-screen;
   long words/URLs/code had nowhere to break; <pre> had no scroll container; label pills wrapped into blobs;
   the success page's <ol class="steps"> picked up the 3-column product "steps" grid. */
body{overflow-wrap:break-word}
h1,h2,h3,.promise,.h2,.pp-h1{text-wrap:balance}
p,li,.lede,.subhead,dd,td{text-wrap:pretty}
/* every single-column grid track may shrink below its content's min-content */
@media (max-width:1060px){.passport-grid,.home-grid{grid-template-columns:minmax(0,1fr)}.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.steps,.proof-grid,.priv,.gcards{grid-template-columns:minmax(0,1fr)}.more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.pcards,.pcards.three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.more-grid{grid-template-columns:minmax(0,1fr)}}
.passport-grid>*,.home-grid>*,.proof-grid>*,.priv>*,.plans>*,.steps>*,.feats>*,.gcards>*,.pcards>*,.ftr-grid>*,.art.has-toc>*,.blk-head>*{min-width:0}
/* buttons: one line when it fits, wrap (centred) instead of overflowing when it does not */
.btn{white-space:normal;text-align:center;max-width:100%;text-wrap:balance}
.btn-lg{padding-block:10px}
.hdr .btn,.msheet-top .btn{white-space:nowrap}
.pc-btns{flex-wrap:wrap}.pc-btns .btn{flex:1 1 auto}
.art .cta a.btn,.art .icta a.btn{white-space:normal;text-align:center;max-width:100%}
/* label pills: a 2-line pill stays a tidy rounded box */
.label,.eyebrow{border-radius:14px;max-width:100%;text-wrap:balance}
/* long tokens: links, code, keys */
.art a,.ftr a,.bare a,.priv-side a{overflow-wrap:anywhere}
.priv-table code{white-space:normal;overflow-wrap:anywhere}
.art pre{max-width:100%;overflow-x:auto;margin:0 0 1.2em;padding:14px 16px;border-radius:14px;background:var(--surface-2);font:13.5px/1.55 var(--font-mono);-webkit-overflow-scrolling:touch}
.art pre code{background:none;padding:0;font-size:inherit;overflow-wrap:normal;white-space:pre}
/* guides hub: product head and its "Product overview →" link wrap instead of squeezing the title */
.row-head{flex-wrap:wrap}
.row-head>div{flex:1 1 18rem;min-width:0}
.hub-head>div{min-width:0}
/* success page: its numbered list is not the product "steps" grid */
.bare .steps{display:block;list-style:decimal;counter-reset:none}
.bare .badge{width:auto;height:auto;min-width:56px;min-height:56px;padding:6px}
/* footer: columns fall to one per row when the text is large instead of overflowing */
@media (max-width:900px){.ftr-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5em),1fr))}}
/* header on phones: if the text is enlarged the CTA moves to a second row rather than off-screen */
@media (max-width:900px){.hdr-in{flex-wrap:wrap;height:auto;min-height:56px;row-gap:6px;padding-block:6px}.hdr-cta{min-width:0}}
/* Slides hero mock: the demo slide scales as one picture, so its text never spills out of the circle */
.slide{container-type:inline-size}
.slide .lang{font-size:3.1cqi;padding:.2em .8em}
.slide .s-title{font-size:6.4cqi}
.slide .s-body{font-size:3.7cqi}
.slide .s-circle{font-size:3.3cqi;padding:3%;overflow-wrap:normal;hyphens:none}
.bare .badge{width:max-content}
th,.gcard h3,.pcard h3,.feat h3,.step h3,.faq summary{text-wrap:balance}
.step h3,.feat h3{overflow-wrap:anywhere}
/* focus rings inside scroll containers (product tabs, menu sheet) are drawn inside the element so they are never cut */
.ptabs a:focus-visible,.msheet a:focus-visible,.msheet button:focus-visible,.menu a:focus-visible{outline-offset:-3px}
.faq summary{overflow-wrap:anywhere}
.faq summary{padding-right:8px} /* room for the rotated "+" so it never adds horizontal overflow */