/* Streamlined sales page (Owner, 24 Oct 2026). Used by the English home page (src/site/landing.html)
   and the Spanish one (public/es.html). Same structure as every other app page Parker approved:
   sticky nav, hero with a live iPhone demo, the problem, how it works (with the live approval checks
   card), features by role, trust, pricing, questions, final call, footer.
   Light by default, dark when the phone or computer is in dark mode, using the app's own dark tokens
   (the same values public/dark.css maps the demo screens to). Every class starts with sl- so nothing
   here touches the demo screens, and this page does not load dark.css. */

:root{
  color-scheme:light dark;
  --ground:#F7F8FA;--card:#FFFFFF;--raised:#EEF0F4;--line:#E4E6EB;--line2:#D5D9E0;
  --ink:#14161B;--body:#3A404C;--muted:#5B6270;
  --accent:#2E55E6;--accent-hover:#1E3FB8;--accent-text:#2E55E6;--on-accent:#FFFFFF;
  --tint:#EAF0FF;--deep:#1E3FB8;--ok:#17603C;--ok-bg:#E8F5EE;--err:#A42020;--err-bg:#FDECEC;--warn:#7A4E00;--warn-bg:#FFF2D9;
  --logo-rect:#14161B;--logo-curve:#FFFFFF;--logo-mid:#7C9BFF;--sel-bg:#14161B;--sel-fg:#FFFFFF;
  --band:#14161B;--band-ink:#FFFFFF;--band-muted:#C9CED8;--band-line:#2E323B;
  --nav-bg:rgba(247,248,250,.86);--shadow:rgba(20,22,27,.16);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0F1115;--card:#16181D;--raised:#22262E;--line:#2A2E37;--line2:#353A45;
    --ink:#ECEEF2;--body:#C4C9D2;--muted:#A3A9B5;
    --accent:#2E55E6;--accent-hover:#4366F0;--accent-text:#8FA8FF;--on-accent:#FFFFFF;
    --tint:#1A2547;--deep:#A9BDFF;--ok:#7FD6A5;--ok-bg:#12301F;--err:#FF8E8E;--err-bg:#3A1717;--warn:#F2BD6B;--warn-bg:#33240D;
    --logo-rect:#FFFFFF;--logo-curve:#14161B;--logo-mid:#2E55E6;--sel-bg:#ECEEF2;--sel-fg:#0F1115;
    --band:#16181D;--band-ink:#ECEEF2;--band-muted:#A3A9B5;--band-line:#2A2E37;
    --nav-bg:rgba(15,17,21,.84);--shadow:rgba(0,0,0,.55);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.5 Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}
img,svg{display:block}
a{color:var(--accent-text)}
h1,h2,h3{font-family:Manrope,Inter,sans-serif;font-weight:800;margin:0}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:6px}
.sl-skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--ground);padding:12px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.sl-skip:focus{top:12px}
.sl-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sl-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.sl-sec{padding-top:104px;padding-bottom:104px}
.sl-center{text-align:center}
[id]{scroll-margin-top:84px}

/* logo (same mark as the app header; colors flip in dark mode) */
.sl-logo rect{fill:var(--logo-rect)}.sl-logo .c{stroke:var(--logo-curve)}.sl-logo .m{stroke:var(--logo-mid)}
.sl-word{font:800 20px/1 Manrope,Inter,sans-serif;letter-spacing:-.02em}

/* nav */
.sl-nav{position:sticky;top:0;z-index:30;background:var(--nav-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.sl-nav-in{min-height:68px;display:flex;align-items:center;gap:12px}
.sl-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px;margin-right:auto}
.sl-nav nav{display:flex;align-items:center;gap:2px;font-size:15px;font-weight:600}
.sl-nav nav a{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;color:var(--body);text-decoration:none;border-radius:10px}
.sl-nav nav a:hover{color:var(--ink);background:var(--raised)}
.sl-nav nav a.sl-signin{color:var(--accent-text)}
.sl-nav nav a.sl-btn{margin-left:6px;color:var(--on-accent)}
.sl-nav nav a.sl-btn:hover{background:var(--accent-hover)}
.sl-short{display:none}

/* buttons */
.sl-btn{min-height:56px;padding:0 26px;border-radius:14px;background:var(--accent);color:var(--on-accent)!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 17px/1 Inter,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:background .2s,transform .2s}
.sl-btn:hover{background:var(--accent-hover)}
.sl-btn:active{transform:scale(.98)}
.sl-btn.sl-sm{min-height:44px;padding:0 18px;border-radius:12px;font-size:15px}
.sl-btn.sl-ghost{background:var(--card);color:var(--ink)!important;border:1.5px solid var(--line2);font-weight:700}
.sl-btn.sl-ghost:hover{border-color:var(--accent-text)}
.sl-btn.sl-white{background:#FFFFFF;color:#1E3FB8!important}
.sl-btn.sl-white:hover{background:#EAF0FF}
.sl-btn.sl-outline{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#FFFFFF!important;font-weight:700}
.sl-btn.sl-outline:hover{background:rgba(255,255,255,.1)}
.sl-ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;align-items:center}
.sl-fine{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.sl-fine a{font-weight:600}

/* hero */
.sl-hero{display:flex;flex-direction:column;gap:56px;padding-top:72px;padding-bottom:96px}
.sl-hero-copy{min-width:0}
.sl-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--tint);color:var(--deep);font-size:13px;font-weight:800;line-height:1.2}
.sl-pill i{width:7px;height:7px;border-radius:50%;background:#2fb36b;flex-shrink:0}
.sl-hero h1{margin-top:22px;font-size:clamp(38px,6vw,62px);line-height:1.04;letter-spacing:-.035em;max-width:660px;text-wrap:balance}
.sl-lede{margin:20px 0 0;font-size:20px;line-height:1.55;color:var(--body);max-width:570px}
.sl-wins{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.sl-wins li{display:flex;gap:14px;align-items:flex-start}
.sl-wins b{display:block;font-size:17px;letter-spacing:-.01em}
.sl-wins .t{display:block;font-size:15px;line-height:1.5;color:var(--muted)}
.sl-ic{width:40px;height:40px;border-radius:12px;background:var(--accent);color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media (min-width:960px){.sl-hero{flex-direction:row;align-items:center;gap:72px}.sl-hero-copy{flex:1 1 0}.sl-phone-col{flex:0 0 300px}}

/* phone */
.sl-phone-col{flex:none;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}
.sl-frame{width:300px;height:620px;border-radius:50px;background:#0B0B0D;padding:11px;box-shadow:0 40px 80px -30px var(--shadow),0 0 0 1px rgba(255,255,255,.06) inset}
.sl-screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:var(--ground);color:var(--ink);display:flex;flex-direction:column;font-family:Inter,system-ui,sans-serif}
.sl-screen button{font:inherit;cursor:pointer;color:inherit}
.sl-island{width:90px;height:26px;border-radius:999px;background:#000;margin:10px auto 0;flex-shrink:0}
.sl-ptop{height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sl-ptop .sl-brand-s{display:flex;align-items:center;gap:7px;font:800 15px/1 Manrope,Inter,sans-serif;letter-spacing:-.02em}
.sl-ptag{font-size:10px;font-weight:600;padding:4px 8px;border-radius:999px;background:var(--raised);color:var(--muted)}
.sl-ph{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.sl-scroll{flex:1;min-height:0;overflow:hidden;position:relative}
.sl-ph.manual .sl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
.sl-scroll-in{padding:4px 14px 18px;display:flex;flex-direction:column;gap:9px;transition:transform 1.1s cubic-bezier(.25,.8,.25,1)}
.sl-ph-h{font:800 22px/1.2 Manrope,Inter,sans-serif;letter-spacing:-.02em}
.sl-ph-sub{font-size:12px;color:var(--muted);margin-top:-5px}
.sl-chips{display:flex;gap:6px}
.sl-chip{height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:11px;font-weight:600;white-space:nowrap}
.sl-chip[aria-pressed=true]{background:var(--sel-bg);border-color:var(--sel-bg);color:var(--sel-fg)}
.sl-row{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;width:100%}
.sl-row-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;font-weight:700}
.sl-row-m{font-size:11px;color:var(--muted)}
.sl-tag{align-self:flex-start;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--tint);color:var(--deep)}
.sl-tag.g{background:var(--ok-bg);color:var(--ok)}.sl-tag.r{background:var(--err-bg);color:var(--err)}
.sl-pipe{flex:1;display:flex;flex-direction:column;gap:8px;padding:6px 14px 18px;min-height:0}
.sl-req{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.sl-hang{width:40px;height:54px;border-radius:7px;background:#1C2B4A;border-top:8px solid #E8674A;flex-shrink:0;position:relative}
.sl-hang::after{content:"";position:absolute;left:50%;top:5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--ground)}
.sl-req-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sl-req-t b{font-size:14px}.sl-req-t span{font-size:11px;color:var(--muted)}
.sl-stp{display:flex;align-items:center;gap:10px;border-radius:14px;padding:9px 12px;background:var(--card);border:1px solid var(--line);transition:border-color .4s,background .4s}
.sl-stp.act{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,85,230,.14)}
.sl-stp.fin{background:#14161B;color:#FFFFFF;border-color:#14161B}
.sl-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .4s,border-color .4s}
.sl-stp.act .sl-dot{border-color:var(--accent)}
.sl-stp.ok .sl-dot{background:#1F7A4D;border-color:#1F7A4D}
.sl-stp.fin .sl-dot{background:#7C9BFF;border-color:#7C9BFF}
.sl-stp-t{display:flex;flex-direction:column}.sl-stp-t b{font-size:13px}.sl-stp-t span{font-size:11px;opacity:.82}
.sl-note{border-radius:12px;padding:9px 11px;background:var(--warn-bg);color:var(--ink);font-size:11px;line-height:1.4;display:flex;gap:8px;align-items:center}
.sl-note.done{background:var(--ok-bg)}
.sl-note>span{flex:1}
.sl-note s{color:var(--muted)}
.sl-note button{flex-shrink:0;height:30px;padding:0 10px;border-radius:8px;border:0;background:var(--ink);color:var(--ground)!important;font-size:11px;font-weight:700}
.sl-outs{display:flex;flex-wrap:wrap;gap:6px}
.sl-outs span{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--deep);animation:sl-up .5s ease both}
.sl-outs span:nth-child(2){animation-delay:.15s}.sl-outs span:nth-child(3){animation-delay:.3s}
@keyframes sl-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sl-pfoot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.sl-pfoot .two{display:flex;gap:8px}
.sl-pfoot .two button{flex:1;height:40px;border-radius:10px;border:1px solid var(--line2);background:var(--card);font-size:13px;font-weight:600}
.sl-pfoot .two .rej{color:var(--err)}
.sl-main{height:48px;border:0;border-radius:12px;background:var(--accent);color:#FFFFFF!important;font-size:14px;font-weight:700}
.sl-panel{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px}
.sl-panel label{font-size:11px;font-weight:700;color:var(--body)}
.sl-panel textarea{width:100%;min-height:64px;border:1px solid var(--line2);border-radius:8px;padding:8px;font:400 13px/1.4 Inter,sans-serif;background:var(--ground);color:var(--ink);resize:none}
.sl-panel span{font-size:11px;color:var(--muted)}
.sl-back{border:0;background:none;color:var(--accent-text)!important;font-size:12px;font-weight:700;padding:0;min-height:28px;align-self:flex-start}
.sl-tap{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(140,140,150,.35);border:2px solid rgba(255,255,255,.75);pointer-events:none;z-index:10;animation:sl-tap 1.2s ease-out both}
@keyframes sl-tap{0%{transform:scale(.5);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(1.25);opacity:0}}
.sl-cap{min-height:44px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sl-cap button{border:0;background:none;color:var(--muted);font:700 13px/1 Inter,sans-serif;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 4px;cursor:pointer}
.sl-live{width:7px;height:7px;border-radius:50%;background:#2fb36b;animation:sl-live 1.6s ease-in-out infinite}
@keyframes sl-live{0%,100%{opacity:1}50%{opacity:.35}}
.sl-seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--raised)}
.sl-seg button{border:0;min-height:44px;padding:0 14px;border-radius:9px;background:transparent;color:var(--muted);font:600 13px/1 Inter,sans-serif;cursor:pointer}
.sl-seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* section headings */
.sl-kick{display:block;margin-bottom:10px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.sl-h2{font-size:clamp(32px,4.4vw,48px);line-height:1.07;letter-spacing:-.03em;max-width:780px;text-wrap:balance}
.sl-center .sl-h2{margin-inline:auto}
.sl-sub{margin:18px 0 0;max-width:640px;font-size:19px;line-height:1.6;color:var(--body)}
.sl-center .sl-sub{margin-inline:auto}

/* problem */
.sl-band{background:var(--card);border-block:1px solid var(--line)}
.sl-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:40px}
.sl-pain{border-radius:20px;background:var(--ground);padding:24px}
.sl-pain s{display:inline-block;font-size:14px;color:var(--err);text-decoration-thickness:2px}
.sl-pain b{display:block;font-size:19px;margin-top:12px;letter-spacing:-.01em}
.sl-pain p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}

/* how it works */
.sl-how{display:grid;gap:48px;margin-top:48px;align-items:start}
@media (min-width:960px){.sl-how{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.sl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sl-steps li{border-radius:20px;background:var(--card);border:1px solid var(--line);padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.sl-steps li>span{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#FFFFFF;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sl-steps b{display:block;font-size:18px;letter-spacing:-.01em}
.sl-steps p{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.sl-proof{display:flex;flex-direction:column;gap:20px;min-width:0}
.sl-proof .stage{flex:none;width:100%}
.sl-proof-h{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--muted)}
/* the live approval checks card itself comes from /pipeline.css (shared with the demo). On this page its
   waiting-step text is darkened to pass 4.5:1 contrast (pipeline.css's #8A909C is 3.2:1). */
.st small{color:#5B6270}
/* Its dark look: */
@media (prefers-color-scheme:dark){
  .stage:before{background:radial-gradient(closest-side,rgba(92,125,255,.30),transparent 70%)}
  .pipe{background:rgba(22,24,29,.9);border-color:#2A2E37;color:#ECEEF2;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}
  .pt span{color:#A3A9B5}
  .live{background-color:#12301F;color:#7FD6A5}.live:before{background:#7FD6A5}
  .rail{background:#2A2E37}
  .st{background-color:#1D2027;border-color:#2A2E37;color:#ECEEF2}
  .st .nd{background-color:#22262E;border-color:#3A404C}
  .st small{color:#A3A9B5}
  .st.ok .nd{background-color:#1F7A4D;border-color:#1F7A4D}
  .st.act{border-color:#5C7DFF;box-shadow:0 0 0 4px rgba(92,125,255,.22)}
  .st.act .nd{background-color:#16181D;border-color:#5C7DFF}
  .st.fin{background-color:#ECEEF2;color:#14161B;border-color:#ECEEF2}
  .st.fin small{color:#5B6270}
  .st.fin .nd{background-color:#2E55E6;border-color:#2E55E6}
  .st.fin .nd svg path{stroke:#FFFFFF}
  .out{background-color:#1A2547;color:#A9BDFF}
  .sl-stp.fin{background:#ECEEF2;color:#14161B;border-color:#ECEEF2}
  .sl-stp.fin .sl-dot{background:#2E55E6;border-color:#2E55E6}
}
/* the checks behind each approval (sample data from the approver screen) */
.sl-checks{border-radius:22px;background:var(--card);border:1px solid var(--line);padding:20px;display:grid;gap:16px}
@media (min-width:560px){.sl-checks{grid-template-columns:1fr 1fr}}
.sl-checks h3{font:700 13px/1.2 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sl-checks ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sl-checks li{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600;padding:9px 11px;border-radius:10px;background:var(--ok-bg);color:var(--ok)}
.sl-checks li.no{background:var(--warn-bg);color:var(--warn)}
.sl-checks li svg{flex-shrink:0}
.sl-voice{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:14px;padding:12px 14px;border-radius:12px;background:var(--tint);color:var(--ink)}
.sl-voice b{color:var(--deep)}
.sl-voice s{color:var(--muted)}
.js .sl-checks li{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.js .sl-checks.seen li{opacity:1;transform:none}
.sl-checks.seen li:nth-child(2){transition-delay:.25s}.sl-checks.seen li:nth-child(3){transition-delay:.5s}

/* roles */
.sl-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:48px}
.sl-role{border-radius:26px;background:var(--card);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:6px}
.sl-role h3{font-size:24px;letter-spacing:-.02em;margin-top:14px}
.sl-role>p{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.sl-role ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.sl-role li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:var(--body)}
.sl-role li b{color:var(--ink)}
.sl-tick{width:22px;height:22px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.sl-not{margin-top:40px;border-radius:22px;padding:24px 26px;background:var(--tint);display:flex;gap:16px;align-items:flex-start}
.sl-not b{display:block;font-size:19px;color:var(--ink)}
.sl-not p{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--body)}

/* trust and size */
.sl-dark{background:var(--band);color:var(--band-ink);border-block:1px solid var(--band-line)}
.sl-dark .sl-kick{color:#A9BDFF}
.sl-dark .sl-sub{color:var(--band-muted)}
.sl-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:40px}
.sl-trust div{border:1px solid var(--band-line);border-radius:18px;padding:22px}
.sl-trust b{display:block;font:700 18px/1.25 Manrope,Inter,sans-serif}
.sl-trust p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--band-muted)}
.sl-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:40px}
.sl-size{border-radius:20px;background:var(--card);border:1px solid var(--line);padding:24px}
.sl-size b{display:block;font-size:19px;margin-top:14px}
.sl-size p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.sl-tiers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px;font-size:14px;font-weight:700}
.sl-tiers span{padding:9px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.sl-tiers i{font-style:normal;color:var(--muted)}

/* pricing (prices and wording exactly as before) */
.sl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:48px;align-items:stretch}
.sl-plan{border-radius:22px;background:var(--card);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:14px}
.sl-plan.top{background:#14161B;color:#FFFFFF;border-color:#14161B}
@media (prefers-color-scheme:dark){.sl-plan.top{background:#1D2027;border-color:#3A404C}}
.sl-plan-h b{display:block;font:800 20px/1.2 Manrope,Inter,sans-serif}
.sl-plan-h span,.sl-per{font-size:14px;color:var(--muted)}
.sl-plan.top .sl-plan-h span,.sl-plan.top .sl-per{color:#C9CED8}
.sl-price{font:800 38px/1 Manrope,Inter,sans-serif;letter-spacing:-.02em}
.sl-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4}
.sl-plan li{display:flex;gap:8px;align-items:flex-start}
.sl-plan li svg{flex-shrink:0;margin-top:2px}
.sl-plan .sl-btn{margin-top:auto;min-height:50px;font-size:15px}
.sl-plan.top .sl-btn{background:#7C9BFF;color:#14161B!important}
.sl-plan.top .sl-btn:hover{background:#A9BDFF}
.sl-pnote{margin:20px auto 0;max-width:780px;font-size:14px;line-height:1.6;color:var(--muted)}

/* questions */
.sl-faq{max-width:820px}
.sl-faq .sl-h2{margin-bottom:28px}
.sl-faq details{border-bottom:1px solid var(--line)}
.sl-faq details:first-of-type{border-top:1px solid var(--line)}
.sl-faq summary{min-height:64px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:18px;font-weight:700;cursor:pointer;list-style:none;padding:8px 0}
.sl-faq summary::-webkit-details-marker{display:none}
.sl-faq summary::after{content:"+";font-size:24px;font-weight:500;color:var(--accent-text);flex-shrink:0}
.sl-faq details[open] summary::after{content:"\2212"}
.sl-faq p{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--body)}

/* final call */
.sl-final{padding-bottom:104px}
.sl-final>div{border-radius:32px;background:#2E55E6;color:#FFFFFF;padding:72px 32px;text-align:center}
.sl-final .sl-h2{margin:0 auto;color:#FFFFFF}
.sl-final p{margin:16px auto 0;max-width:560px;font-size:18px;line-height:1.6;color:#EAF0FF}
.sl-final .sl-ctas{justify-content:center}

/* footer */
.sl-foot{border-top:1px solid var(--line)}
.sl-foot-in{padding-top:28px;padding-bottom:40px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.sl-foot nav{display:flex;gap:4px 18px;flex-wrap:wrap}
.sl-foot a{color:var(--body);min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.sl-foot a:hover{color:var(--ink);text-decoration:underline}
.sl-foot small{display:block;margin-top:4px;font-size:13px}

/* scroll reveal */
.js .sl-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .sl-rv.seen{opacity:1;transform:none}

/* phones */
@media (max-width:820px){.sl-nav nav a.sl-link{display:none}}
@media (max-width:640px){
  .sl-wrap{padding:0 16px}
  .sl-sec{padding-top:72px;padding-bottom:72px}
  .sl-hero{padding-top:36px;padding-bottom:64px;gap:44px}
  .sl-lede{font-size:18px}
  .sl-nav-in{min-height:60px;gap:6px}
  .sl-nav nav a.sl-lang{display:none}
  .sl-nav nav a{padding:0 10px}
  .sl-nav nav a.sl-btn{margin-left:2px;padding:0 14px}
  .sl-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sl-short{display:inline}
  .sl-final>div{padding:56px 22px;border-radius:26px}
  .sl-ctas .sl-btn{flex:1 1 auto}
  .sl-not{flex-direction:column}
}
@media (max-width:420px){.sl-word{font-size:18px}}
@media (max-width:370px){.sl-word{font-size:17px}.sl-brand svg{width:28px;height:28px}.sl-nav nav a{padding:0 8px;font-size:14px}.sl-nav nav a.sl-btn{padding:0 12px}}

@media (prefers-reduced-motion:reduce){
  .sl-tap,.sl-live,.sl-outs span{animation:none}
  .sl-scroll-in,.sl-stp,.sl-dot,.sl-btn{transition:none}
  .js .sl-rv,.js .sl-checks li{opacity:1;transform:none;transition:none}
}

/* How it compares (Owner, 25 Oct 2026): same idea as Plumbline's chart. Uses the page tokens, so it follows light and dark. */
.sl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sl-cmp-scroll{margin-top:32px;overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--card);-webkit-overflow-scrolling:touch}
.sl-cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:14px;color:var(--ink)}
.sl-cmp th,.sl-cmp td{padding:13px 10px;border-bottom:1px solid var(--line)}
.sl-cmp thead th{font-weight:800;text-align:center;vertical-align:bottom;line-height:1.25}
.sl-cmp tbody th{text-align:left;font-weight:600;max-width:15rem;line-height:1.35}
.sl-cmp td{text-align:center}
.sl-cmp .sl-cmp-lab{position:sticky;left:0;z-index:1;background:var(--card);box-shadow:1px 0 0 var(--line)}
.sl-cmp .us{background:var(--tint)}
.sl-cmp thead .us,.sl-cmp-price .us{color:var(--accent-text)}
.sl-cmp-price th,.sl-cmp-price td{font-weight:800;border-bottom:0!important;border-top:2px solid var(--line2)}
.sl-cm{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;vertical-align:middle}
.sl-cm svg{display:block}
.sl-cm.y{background:var(--accent);color:var(--on-accent)}
.sl-cm.p{border:2px solid var(--accent);background:linear-gradient(90deg,var(--accent) 50%,transparent 50%)}
.sl-cm.n{background:var(--raised)}
.sl-cm.n i{width:10px;height:2px;border-radius:2px;background:var(--muted)}
.sl-cmp-key{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted)}
.sl-cmp-key span{display:inline-flex;align-items:center;gap:7px}
.sl-cmp-key .sl-cm{width:16px;height:16px}.sl-cmp-key .sl-cm svg{width:9px;height:9px}.sl-cmp-key .sl-cm.n i{width:7px}
.sl-cmp-src{margin-top:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:16px 18px;font-size:15px;color:var(--body)}
.sl-cmp-src summary{cursor:pointer;font-weight:800;color:var(--ink)}
.sl-cmp-src ul{margin:12px 0 0;padding-left:20px;line-height:1.55;color:var(--muted)}
.sl-cmp-src li+li{margin-top:8px}.sl-cmp-src b{color:var(--ink)}
.sl-cmp-src a{color:var(--accent-text);text-underline-offset:3px}