/* ---------- fonts (self-hosted, subset by unicode-range) ---------- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-display:swap;font-weight:160 700;src:url(/assets/fonts/readex-pro-arabic-wght-normal.woff2) format("woff2-variations");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-style:normal;font-display:swap;font-weight:160 700;src:url(/assets/fonts/readex-pro-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-display:swap;font-weight:160 700;src:url(/assets/fonts/readex-pro-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --cobalt:#2B35F5;--cobalt-deep:#1D25C4;--lemon:#FFE24A;
  --paper:#fff;--surface:#fff;--mist:#F0F1FF;--ink:#0E1026;--muted:#565B7E;--line:#E0E2F4;--link:#2B35F5;
  --t-blue-bg:#E3E6FF;--t-blue-fg:#0E1026;
  --t-lemon-bg:#FFE24A;--t-lemon-fg:#0E1026;
  --t-ink-bg:#0E1026;--t-ink-fg:#fff;
  --t-mint-bg:#CBF2E2;--t-mint-fg:#0B2A22;
  --t-coral-bg:#FFD5CD;--t-coral-fg:#3A110C;
  --t-mist-bg:#F0F1FF;--t-mist-fg:#0E1026;
  --shadow:0 24px 48px -24px rgba(14,16,38,.45);
  --r-lg:28px;--r-md:16px;
  --f-display:"Bricolage Grotesque","Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0A0C1E;--surface:#14173A;--mist:#1A1E47;--ink:#EEF0FF;--muted:#A6AACF;--line:#272C60;--link:#9AA2FF;
    --t-blue-bg:#1D2263;--t-blue-fg:#EEF0FF;--t-ink-bg:#05060F;--t-mint-bg:#103A30;--t-mint-fg:#D8FFF0;
    --t-coral-bg:#4A2023;--t-coral-fg:#FFE6E2;--t-mist-bg:#1A1E47;--t-mist-fg:#EEF0FF;--shadow:0 24px 48px -24px rgba(0,0,0,.8)}
}
html[lang=ar]{--f-display:"Readex Pro","Segoe UI",Tahoma,"Noto Naskh Arabic",sans-serif;--f-body:"Readex Pro","Segoe UI",Tahoma,"Noto Naskh Arabic",sans-serif}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);text-rendering:optimizeLegibility}
html[lang=ar] body{line-height:1.9;font-size:1rem}
h1,h2{text-wrap:balance}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin:0}
html[lang=ar] :is(h1,h2,h3){letter-spacing:0;line-height:1.35;font-weight:700}
p{margin:0}
a{color:var(--link);text-underline-offset:3px}
img,svg{display:block}
:focus-visible{outline:3px solid var(--lemon);outline-offset:2px;border-radius:8px}
.stage :focus-visible,.cta :focus-visible,.foot :focus-visible{outline-color:var(--lemon)}
main :focus-visible{outline-color:var(--cobalt)}
@media (prefers-color-scheme:dark){main :focus-visible{outline-color:var(--lemon)}}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
@media (min-width:700px){.wrap{padding-inline:32px}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:50;background:var(--lemon);color:#0E1026;padding:10px 16px;border-radius:10px;font-weight:650}
.skip:focus{top:12px}

/* ---------- stage (cobalt top block, holds header + hero) ---------- */
.stage{position:relative;background:var(--cobalt);color:#fff;overflow:hidden;isolation:isolate}
.stage a{color:#fff}
.deco{position:absolute;inset:0;z-index:-1;pointer-events:none;font-family:system-ui,"Noto Sans Symbols 2","Noto Sans Symbols","Segoe UI Symbol","Apple Symbols",sans-serif;color:rgba(255,255,255,.13);user-select:none}
.deco i{position:absolute;font-style:normal;line-height:1}
.deco i:nth-child(1){font-size:150px;inset-inline-end:3%;top:120px;transform:rotate(12deg)}
.deco i:nth-child(2){font-size:64px;inset-inline-end:38%;bottom:60px}
.deco i:nth-child(3){font-size:110px;inset-inline-end:-10px;bottom:90px;transform:rotate(-14deg)}
.deco i:nth-child(4){font-size:54px;inset-inline-start:44%;bottom:34px}
.deco i:nth-child(5){font-size:90px;inset-inline-start:-14px;bottom:130px;transform:rotate(-8deg)}
@media (max-width:700px){.deco i:nth-child(n+2){display:none}.deco i:nth-child(1){font-size:90px;top:150px;inset-inline-end:-8px}}

.site{position:relative;z-index:5}
.site .wrap{display:flex;align-items:center;gap:14px;padding-block:16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 1.4rem/1 var(--f-display);letter-spacing:-.03em}
html[lang=ar] .brand{letter-spacing:0}
.brand svg{width:34px;height:34px;flex:none}
.sp{flex:1}
.dnav{display:none;gap:2px}
.dnav a{padding:9px 13px;border-radius:999px;text-decoration:none;font-weight:550;font-size:.95rem;color:#fff;opacity:.86}
.dnav a:hover{opacity:1;background:rgba(255,255,255,.14)}
.dnav a[aria-current=page]{opacity:1;background:rgba(255,255,255,.2)}
.lang{font:inherit;font-size:.92rem;font-weight:550;color:#fff;background:rgba(255,255,255,.16);border:0;border-radius:999px;padding:9px 14px;min-height:42px;cursor:pointer;max-width:150px}
.lang option{color:#0E1026;background:#fff}
.menu{position:relative}
.menu summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.16);cursor:pointer;font-size:0}
.menu summary::-webkit-details-marker{display:none}
.menu svg{width:20px;height:20px}
.menu nav{position:absolute;inset-inline-end:0;top:50px;width:min(280px,86vw);background:var(--surface);color:var(--ink);border-radius:20px;padding:8px;box-shadow:var(--shadow);display:grid;z-index:20}
.menu nav a{color:var(--ink);text-decoration:none;padding:12px 14px;border-radius:12px;font-weight:600}
.menu nav a:hover,.menu nav a[aria-current=page]{background:var(--mist)}
@media (min-width:960px){.dnav{display:flex}.menu{display:none}}

.hero{padding:26px 0 56px}
.hero .wrap{display:grid;gap:30px}
.crumbs{font-size:.9rem;opacity:.85;margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-underline-offset:3px}
.crumbs span[aria-hidden]{opacity:.6}
.hero h1{font-size:clamp(2.35rem,6.4vw,4.6rem);max-width:15ch}
.hero.tight h1{font-size:clamp(2.1rem,5.2vw,3.4rem);max-width:22ch}
html[lang=ar] .hero h1{max-width:none}
.hero .intro{margin-top:16px;font-size:1.15rem;max-width:52ch;opacity:.92}
.ticks{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:22px 0 0;padding:0;font-weight:600;font-size:.95rem}
.ticks li{display:flex;align-items:center;gap:8px}
.tick{width:20px;height:20px;flex:none;border-radius:50%;background:var(--lemon);display:grid;place-items:center}
.tick svg{width:12px;height:12px}
@media (min-width:960px){
  .hub .hero .wrap{grid-template-columns:1.02fr 1fr;align-items:center;gap:56px}
  .hero{padding:38px 0 84px}
}
.pull{margin-top:-52px;position:relative;z-index:2}

/* ---------- tool surface ---------- */
.tool,.demo{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);min-height:240px}
@media (min-width:700px){.tool{padding:28px}.demo{padding:24px}}
.demo{min-height:0}
.lbl{display:block;font-weight:650;margin:0 0 8px;font-size:.95rem}
.in{width:100%;font:500 1.35rem/1.3 var(--f-body);color:var(--ink);background:var(--mist);border:2px solid transparent;border-radius:var(--r-md);padding:15px 18px;min-height:56px}
.in::placeholder{color:var(--muted)}
.in:focus{outline:none;border-color:var(--cobalt);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--cobalt) 20%,transparent)}
textarea.in{font-size:1.1rem;resize:vertical}
.count{font-size:.85rem;color:var(--muted);margin-top:6px;text-align:end}
.sub{font:800 1.05rem/1.2 var(--f-display);letter-spacing:-.01em;margin:28px 0 6px}
html[lang=ar] .sub{letter-spacing:0}
.note{font-size:.88rem;color:var(--muted);margin:8px 0 0}
.list{margin-top:6px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.txt{font-family:system-ui,"Noto Sans Math","Noto Sans Symbols 2","Noto Sans Symbols","Segoe UI Symbol","Apple Symbols","Segoe UI Emoji",sans-serif;font-size:1.4rem;line-height:1.45;overflow-wrap:anywhere;min-width:0;unicode-bidi:isolate}
.copy,.btn,.more,.use{font:650 .95rem/1 var(--f-body);cursor:pointer;border-radius:999px;min-height:44px;padding:12px 20px;border:0}
.copy{flex:none;min-width:84px;background:var(--mist);color:var(--ink)}
.copy:hover{background:var(--ink);color:var(--paper)}
.copy.done,.sym.done{background:var(--lemon);color:#0E1026}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--cobalt);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--ink);background:transparent;color:var(--ink)}
.btn.done{background:var(--lemon);color:#0E1026}
.more{margin-top:16px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.more:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.use{flex:none;background:var(--mist);color:var(--ink)}
.use:hover{background:var(--ink);color:var(--paper)}
.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.chips,.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{font:600 .92rem/1 var(--f-body);cursor:pointer;color:var(--ink);background:var(--mist);border:0;border-radius:999px;padding:11px 16px;min-height:42px}
.chip:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sym{font-family:system-ui,"Noto Sans Symbols 2","Noto Sans Symbols","Segoe UI Symbol","Apple Symbols","Segoe UI Emoji",sans-serif;font-size:1.5rem;line-height:1;min-height:54px;padding:6px;cursor:pointer;color:var(--ink);background:var(--mist);border:0;border-radius:14px}
.grid.wide .sym{font-size:1rem}
.sym:hover{background:var(--lemon);color:#0E1026}
.ideas{list-style:none;margin:6px 0 0;padding:0}
.ideas li{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}
.ideas li:last-child{border-bottom:0}
.fields{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.result{margin-top:22px}
.big{font-size:1.15rem;margin:0 0 14px}
.big span{font:800 3.2rem/1 var(--f-display);color:var(--link);margin-inline:2px;letter-spacing:-.03em}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:0}
@media (max-width:560px){.facts{grid-template-columns:1fr}}
.facts div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:.95rem}
.facts dd{margin:0;font-weight:650;text-align:end}
.hint{color:var(--muted)}
.err{color:#C0301F;font-weight:600}
@media (prefers-color-scheme:dark){.err{color:#FF9A8C}}
.meter{height:14px;background:var(--mist);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--cobalt);border-radius:99px}
.msg{font:700 1.2rem/1.35 var(--f-display);margin:14px 0 4px}
.demo .more-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:650;color:var(--link)}
.demo .more-link svg{width:16px;height:16px}
[dir=rtl] .demo .more-link svg{transform:scaleX(-1)}

/* ---------- ads (hidden until configured) ---------- */
.adslot{display:none}
.adslot.on{display:block;min-height:100px;margin:28px 0}

/* ---------- sections ---------- */
.sec{padding:72px 0}
.sec h2{font-size:clamp(1.9rem,4.2vw,3rem);max-width:20ch}
html[lang=ar] .sec h2{max-width:none}
.sec .lead{margin-top:14px;color:var(--muted);max-width:56ch;font-size:1.1rem}

/* tools bento */
.bento{display:grid;gap:14px;margin-top:34px;grid-template-columns:1fr}
@media (min-width:640px){.bento{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.bento{grid-template-columns:repeat(6,1fr);gap:16px}.bento .tc{grid-column:span var(--span,3)}}
.tc{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:280px;padding:22px;border-radius:var(--r-lg);text-decoration:none;background:var(--tone-bg);color:var(--tone-fg);position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.tc:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tc:focus-visible{outline:3px solid var(--cobalt)}
@media (prefers-reduced-motion:reduce){.tc{transition:none}.tc:hover{transform:none}}
.t-blue{--tone-bg:var(--t-blue-bg);--tone-fg:var(--t-blue-fg)}
.t-lemon{--tone-bg:var(--t-lemon-bg);--tone-fg:var(--t-lemon-fg)}
.t-ink{--tone-bg:var(--t-ink-bg);--tone-fg:var(--t-ink-fg)}
.t-mint{--tone-bg:var(--t-mint-bg);--tone-fg:var(--t-mint-fg)}
.t-coral{--tone-bg:var(--t-coral-bg);--tone-fg:var(--t-coral-fg)}
.t-cobalt{--tone-bg:var(--cobalt);--tone-fg:#fff}
.t-mist{--tone-bg:var(--t-mist-bg);--tone-fg:var(--t-mist-fg);box-shadow:inset 0 0 0 2px var(--line)}
.tc h3{font-size:1.5rem;margin-bottom:6px}
.tc p{font-size:.98rem;opacity:.86;max-width:46ch}
.pv{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:110px;font-family:system-ui,"Noto Sans Math","Noto Sans Symbols 2","Noto Sans Symbols","Segoe UI Symbol","Apple Symbols",sans-serif}
.pv-lines span{display:block;line-height:1.28;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-lines span:nth-child(1){font-size:2.5rem}
.pv-lines span:nth-child(2){font-size:1.85rem;opacity:.8}
.pv-lines span:nth-child(3){font-size:1.4rem;opacity:.6}
.pv-sym{flex-direction:row;flex-wrap:wrap;align-content:center;gap:4px 12px}
.pv-sym span{line-height:1.1}
.pv-bio{gap:12px;align-items:flex-start}
.pv-bio b{font:800 1.1rem var(--f-display)}
.pv-bio p{font-family:var(--f-body);font-size:1.05rem;line-height:1.45;opacity:1;max-width:32ch}
.pv-bio .bar{width:100%;max-width:240px;height:6px;border-radius:9px;background:rgba(255,255,255,.2);overflow:hidden}
.pv-bio .bar i{display:block;height:100%;width:42%;background:var(--lemon)}
.pv-bio small{font-family:var(--f-body);opacity:.7;font-size:.82rem}
.pv-age b{font:800 4.6rem/.95 var(--f-display);letter-spacing:-.05em}
.pv-age span{font:650 1rem var(--f-body);opacity:.85}
.pv-love b{font:800 4.6rem/.95 var(--f-display);letter-spacing:-.05em}
.pv-love .m{height:12px;border-radius:9px;background:rgba(58,17,12,.15);margin-top:14px;overflow:hidden;max-width:260px}
.pv-love .m i{display:block;height:100%;width:92%;background:#E5483A;border-radius:9px}
@media (prefers-color-scheme:dark){.pv-love .m{background:rgba(255,255,255,.15)}}

/* trust */
.trust{background:var(--mist)}
.trust .cols{display:grid;gap:36px}
@media (min-width:900px){.trust .cols{grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.checks li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.checks li:first-child{padding-top:0}
.checks li:last-child{border-bottom:0;padding-bottom:0}
.checks .tick{width:30px;height:30px;background:var(--cobalt);margin-top:2px}
.checks .tick svg{width:16px;height:16px}
.checks h3{font-size:1.2rem;margin-bottom:4px}
.checks p{color:var(--muted)}

/* how */
.how ol{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:26px}
@media (min-width:800px){.how ol{grid-template-columns:repeat(3,1fr);gap:40px}}
.how li{border-top:3px solid var(--ink);padding-top:16px}
.how .n{font:800 3.4rem/1 var(--f-display);color:var(--link);letter-spacing:-.04em}
.how h3{font-size:1.35rem;margin:10px 0 6px}
.how p{color:var(--muted)}

/* about + faq */
.rows{margin-top:30px;border-top:1px solid var(--line)}
.rows .r{display:grid;gap:10px;padding:26px 0;border-bottom:1px solid var(--line)}
@media (min-width:860px){.rows .r{grid-template-columns:1fr 1.7fr;gap:48px}}
.rows h3{font-size:1.4rem}
.rows p{color:var(--muted);max-width:62ch}
.faqwrap{display:grid;gap:26px}
@media (min-width:860px){.faqwrap{grid-template-columns:1fr 1.7fr;gap:48px}}
details.q{border-bottom:1px solid var(--line)}
details.q:first-of-type{border-top:1px solid var(--line)}
details.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:650;font-size:1.05rem}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B35F5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8h10M8 3v10'/%3E%3C/svg%3E") center/14px no-repeat}
details.q[open] summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B35F5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E")}
details.q p{padding:0 44px 18px 0;color:var(--muted);max-width:62ch}
[dir=rtl] details.q p{padding:0 0 18px 44px}

/* cta */
.cta{padding:0 0 72px}
.cta .box{background:var(--cobalt);color:#fff;border-radius:var(--r-lg);padding:44px 28px;position:relative;overflow:hidden;isolation:isolate}
@media (min-width:800px){.cta .box{padding:64px 56px;display:flex;align-items:center;justify-content:space-between;gap:40px}}
.cta h2{font-size:clamp(1.9rem,4.2vw,3rem);max-width:16ch;color:#fff}
.cta p{margin-top:10px;opacity:.9}
.cta .btn{background:var(--lemon);color:#0E1026;margin-top:24px;padding:16px 26px;font-size:1.02rem}
.cta .btn:hover{background:#fff;color:#0E1026}
@media (min-width:800px){.cta .btn{margin-top:0;flex:none}}

/* tool-page content */
.content{padding:56px 0 24px}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1em;color:var(--ink)}
.steps{list-style:none;counter-reset:s;margin:0 0 8px;padding:0;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
.steps li::before{content:counter(s);width:38px;height:38px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;font:800 1.05rem var(--f-display)}
.steps li span{padding-top:5px}
.legal{max-width:68ch}
.legal h2{font-size:1.5rem;margin:36px 0 10px}
.legal p{margin:0 0 1em}
.related{display:grid;gap:12px;margin-top:6px}
@media (min-width:700px){.related{grid-template-columns:repeat(3,1fr)}}
.related .tc{min-height:0;padding:20px;gap:8px}
.related .tc h3{font-size:1.2rem}
.related .tc p{font-size:.93rem}

/* footer */
.foot{background:#0A0C1E;color:#C9CCEA;padding:56px 0 30px}
.foot a{color:#C9CCEA;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .brand{color:#fff}
.foot .cols{display:grid;gap:34px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.foot .cols{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}}
.foot .about{grid-column:1/-1}
@media (min-width:900px){.foot .about{grid-column:auto}}
.foot .about p{margin-top:14px;max-width:34ch;font-size:.95rem}
.foot h2{font:700 .95rem var(--f-body);letter-spacing:0;color:#fff;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.95rem}
.foot .fine{margin-top:44px;padding-top:22px;border-top:1px solid #23275A;font-size:.88rem;color:#8E93BC}

@media (prefers-reduced-motion:no-preference){
  .copy,.btn,.chip,.sym,.use,.more{transition:background-color .12s,color .12s,box-shadow .12s}
}

.rh{font-size:clamp(1.5rem,3vw,2.1rem);margin:56px 0 18px}
.pull .tool{max-width:900px}