/* ==========================================================================
   XTALLO.COM — black and white only.

   The app keeps its status colours because a live call needs to be seen. The
   marketing site does not: a page that is entirely ink and paper is the one
   visual choice nobody else in this category has made, and next to a row of
   purple-gradient competitors it reads as the serious one.

   Scale is the other decision. This is a landing site, not a dashboard: one
   idea per screen, and the whitespace between them is doing work.
   ========================================================================== */
:root{--paper:#fff;--sunk:#f6f6f5;--sunk-2:#efefee;--line:#e6e6e4;--line-strong:#cfcfcc;--line-faint:#f0f0ee;
--ink:#0a0a0a;--ink-2:#5a5a58;--ink-3:#8a8a87;--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--r:8px;--rc:16px;--pill:999px;--wrap:1160px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.035em;font-weight:600}
h1{font-size:clamp(38px,5.6vw,64px)}h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em}h3{font-size:20px;letter-spacing:-.015em}
h4{font-size:13px;letter-spacing:.01em;color:var(--ink-3);font-weight:500;margin-bottom:10px}
p{margin:0}a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--line-strong)}a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r)}
.btn{display:inline-block;font:inherit;font-size:15px;font-weight:500;padding:12px 22px;border-radius:var(--pill);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{background:#262624}
.btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--line-strong)}.btn-secondary:hover{background:var(--sunk)}
.btn-invert{background:#fff;color:var(--ink)}.btn-invert:hover{background:#eee}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}.btn-outline:hover{border-color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--wrap);margin:0 auto;padding:22px 24px;position:sticky;top:0;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);z-index:10}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.035em;font-size:19px;text-decoration:none;color:var(--ink)}
.brand svg{fill:currentColor}
.nav nav{display:flex;align-items:center;gap:24px;font-size:15px}
.nav nav a{text-decoration:none;color:var(--ink-2)}.nav nav a:hover{color:var(--ink)}.nav nav a.btn{color:#fff;padding:9px 18px}
.eyebrow{font-size:13px;color:var(--ink-3);letter-spacing:.01em;margin-bottom:18px}.eyebrow a{color:var(--ink-3);text-decoration:none}
.hero{max-width:var(--wrap);margin:0 auto;padding:64px 24px 80px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:start}
.hero.single{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}.hero.single .hero-copy{max-width:640px}
.hero-copy .lead{margin-top:22px;color:var(--ink-2);font-size:19px;max-width:34em}
.cta{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}.fineprint{margin-top:14px;font-size:14px;color:var(--ink-3)}
.transcript{margin:0;border:1px solid var(--line);border-radius:var(--rc);padding:24px;background:var(--paper)}.transcript.small{align-self:start}
.t-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--line-faint)}
.t-name{font-weight:500;font-size:15px}.t-meta{font-size:13px;color:var(--ink-3);margin-top:2px}
.t-score{text-align:right;font-variant-numeric:tabular-nums}.t-score span{display:block;font-size:38px;font-weight:600;letter-spacing:-.04em;line-height:1}.t-score small{font-size:12px;color:var(--ink-3)}
.turns{display:grid;gap:14px;margin-top:18px;font-size:15px}.turns p{color:var(--ink)}.turns p.them{color:var(--ink-2)}
.turns b{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-bottom:3px}
.checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-faint)}
.checks span{font-size:12.5px;padding:4px 11px 4px 9px;border-radius:var(--pill);background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:7px}
.checks span::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
.t-foot{font-size:12.5px;color:var(--ink-3);margin-top:14px}
.sample{display:grid;gap:0;margin-top:14px}
.s-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line-faint);font-size:15px}.s-row:first-child{border-top:0}
.s-l{font-size:12.5px;color:var(--ink-3);padding-top:2px}
.band .sample{max-width:760px;border:1px solid var(--line);border-radius:var(--rc);padding:8px 22px;background:var(--paper)}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:center;flex-wrap:wrap}
.strip span{padding:16px 26px;font-size:14px;color:var(--ink-2);border-right:1px solid var(--line)}.strip span:last-child{border-right:0}
.band{max-width:var(--wrap);margin:0 auto;padding:88px 24px}.band.alt{background:var(--sunk);max-width:none}.band.alt>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.band h2{margin-bottom:34px}.band h1{margin-bottom:14px}.gh{font-size:22px;margin:56px 0 18px}
.wide{color:var(--ink-2);max-width:64ch;font-size:18px}.note{margin-top:28px;color:var(--ink-3);font-size:15px;max-width:64ch}.note a{margin-right:14px}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.role{border-top:2px solid var(--ink);padding-top:18px;text-decoration:none;color:inherit;display:block}
.role:hover h3{text-decoration:underline;text-underline-offset:4px}.role h3{margin-bottom:8px}.role p{color:var(--ink-2);font-size:15.5px}
.role .instead{display:block;color:var(--ink-3);font-size:14px;margin-top:10px}
.role.big{border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:var(--rc);padding:22px}
.loop,.honest{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px}
.loop h3,.honest h3{margin-bottom:8px;font-size:18px}.loop p,.honest p{color:var(--ink-2);font-size:15.5px}
.honest article{border-left:2px solid var(--line-strong);padding-left:16px}
.indcloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.indcloud a{font-size:14px;padding:7px 14px;border:1px solid var(--line);border-radius:var(--pill);text-decoration:none;color:var(--ink-2)}.indcloud a:hover{border-color:var(--ink);color:var(--ink)}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.icard{border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;color:inherit;display:grid;gap:4px;transition:border-color .12s}.icard:hover{border-color:var(--ink)}
.icard b{font-weight:500;font-size:15px}.icard span{font-size:13px;color:var(--ink-3)}
.steps{counter-reset:s;display:grid;gap:44px;max-width:760px;margin-top:48px}
.step{counter-increment:s;position:relative;padding-left:56px}
.step::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:15px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.step h3{font-size:22px;margin-bottom:6px}.step .time{font-size:13px;color:var(--ink-3);margin-bottom:10px}.step p{color:var(--ink-2)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:start;margin-top:44px}
.plan{border:1px solid var(--line);border-radius:var(--rc);padding:22px;background:var(--paper)}.plan.featured{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plan h3{margin-bottom:4px}.plan .price{font-size:30px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:12px}
.plan .per{font-size:14px;color:var(--ink-3);font-weight:400}.plan .usd,.plan .mins{font-size:13px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
.plan p.for{color:var(--ink-2);font-size:14.5px;margin-top:14px;min-height:44px}.plan .btn{margin-top:18px;width:100%;text-align:center}
.plan ul{margin:16px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}.plan li{padding:6px 0;border-top:1px solid var(--line-faint)}
table.compare{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
table.compare th{text-align:left;font-weight:500;color:var(--ink-3);font-size:13px;padding:0 12px 10px;border-bottom:1px solid var(--line)}
table.compare td{padding:14px 12px;border-bottom:1px solid var(--line-faint);vertical-align:top;color:var(--ink-2)}
table.compare td:first-child{font-weight:500;color:var(--ink)}table.compare.big td{font-size:15.5px}
.faq{display:grid;gap:26px;max-width:72ch}.faq h3{font-size:17px;margin-bottom:6px}.faq p{color:var(--ink-2);font-size:15.5px}
.cta-block{background:var(--ink);color:#fff;padding:96px 24px;text-align:center}
.cta-block h2{color:#fff;margin-bottom:16px;max-width:22ch;margin-left:auto;margin-right:auto}
.cta-block p{color:rgba(255,255,255,.7);max-width:62ch;margin:0 auto;font-size:17px}.cta-block .cta{justify-content:center}
footer{max-width:var(--wrap);margin:0 auto;padding:56px 24px 48px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.fgrid a{display:block;font-size:14px;color:var(--ink-2);text-decoration:none;padding:4px 0}.fgrid a:hover{color:var(--ink)}
.fsub{font-size:14px;color:var(--ink-3);margin-top:12px;max-width:34ch}
.fine{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
@media (max-width:920px){.hero,.hero.single{grid-template-columns:1fr;gap:40px;padding-top:40px}.nav nav a:not(.btn){display:none}.band{padding:60px 24px}.fgrid{grid-template-columns:1fr 1fr}.s-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ══════════════════ MOTION LAYER ══════════════════ */
.rv{opacity:0;transform:translateY(8px);transition:opacity .22s ease-out,transform .22s ease-out}
.rv.in{opacity:1;transform:none}

/* live call */
.livecall{border:1px solid var(--line);border-radius:var(--rc);padding:22px;background:var(--paper)}
.lc-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line-faint)}
.lc-who{display:flex;align-items:center;gap:12px}
.lc-orb{width:38px;height:38px;flex:none}
.lc-orb circle.core{fill:var(--ink);transform-origin:50% 50%;transition:transform .18s}
.lc-orb circle.halo{fill:var(--ink);opacity:.06;transform-origin:50% 50%;transition:transform .18s,opacity .18s}
.lc-orb[data-state=speaking] circle.core{animation:lc-sp .55s ease-in-out infinite}
.lc-orb[data-state=speaking] circle.halo{animation:lc-hl .55s ease-in-out infinite}
.lc-orb[data-state=listening] circle.halo{animation:lc-ls 2.2s ease-in-out infinite}
@keyframes lc-sp{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes lc-hl{0%,100%{transform:scale(1);opacity:.06}50%{transform:scale(1.6);opacity:.16}}
@keyframes lc-ls{0%,100%{opacity:.06}50%{opacity:.14}}
.lc-name{font-weight:500;font-size:15px}.lc-state{font-size:12.5px;color:var(--ink-3)}
.lc-time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-3)}
.lc-turns{display:grid;gap:12px;margin-top:16px;font-size:15px;min-height:270px;max-height:270px;overflow:hidden;align-content:start}
.lc-turns p{color:var(--ink)}.lc-turns p.them{color:var(--ink-2)}
.lc-turns b{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-bottom:3px}
.lc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-faint)}
.lc-checks{display:flex;flex-wrap:wrap;gap:6px}
.lc-checks span{font-size:12px;padding:4px 10px 4px 8px;border-radius:var(--pill);border:1px solid var(--line);color:var(--ink-3);display:inline-flex;align-items:center;gap:6px;transition:background .25s,color .25s,border-color .25s}
.lc-checks span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-strong);transition:background .25s}
.lc-checks span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.lc-checks span.on::before{background:#fff}
.lc-score{font-size:38px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.lc-score-l{font-size:11px;color:var(--ink-3);text-align:right}

/* player */
.player{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--rc);padding:12px 16px;background:var(--paper)}
.p-btn{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;flex:none}
.p-btn:disabled{background:var(--line-strong);cursor:not-allowed}
.p-pause{display:none}.player.playing .p-play{display:none}.player.playing .p-pause{display:block}
.p-meta{min-width:120px}.p-name{font-weight:500;font-size:14px}.p-sub{font-size:12px;color:var(--ink-3)}
.p-wave{flex:1;height:40px;min-width:0}.p-time{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
.players{display:grid;gap:10px;max-width:760px}

/* charts */
.chart-bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:150px 1fr 60px;gap:14px;align-items:center;font-size:14px}
.bar-l{color:var(--ink-2)}.bar-t{height:10px;background:var(--sunk-2);border-radius:999px;overflow:hidden}
.bar-f{height:100%;background:var(--ink);border-radius:999px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.bar-v{font-variant-numeric:tabular-nums;font-weight:500;text-align:right}
.line-svg{width:100%;height:auto;display:block}
.dist{display:flex;gap:10px;align-items:flex-end;height:160px}
.dist-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
.dist-bars{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.dist-b{width:40%;border-radius:3px 3px 0 0;transition:height .8s cubic-bezier(.2,.7,.2,1)}
.dist-b.before{background:var(--line-strong)}.dist-b.after{background:var(--ink)}
.dist-l{font-size:12px;color:var(--ink-3)}
.dist-key{display:flex;gap:20px;margin-top:12px;font-size:13px;color:var(--ink-2)}
.dist-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.dist-key i.before{background:var(--line-strong)}.dist-key i.after{background:var(--ink)}
.chart{border:1px solid var(--line);border-radius:var(--rc);padding:22px;background:var(--paper)}
.chart h3{font-size:16px;margin-bottom:4px}.chart .hint{font-size:12.5px;color:var(--ink-3);margin-bottom:18px;display:block}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}

/* fix loop */
.fixloop{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.fx-card{border:1px solid var(--line);border-radius:var(--rc);padding:20px;background:var(--paper)}
.fx-score{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fx-score.low{color:var(--ink)}
.fx-input{min-height:64px;border:1px solid var(--line-strong);border-radius:var(--r);padding:10px 12px;font-size:14px;margin-top:12px;color:var(--ink)}
.fx-input:empty::before{content:"What should it have said?";color:var(--ink-3)}
.fx-prop{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.fx-prop.on{opacity:1;transform:none}
.fx-prop b{display:block;font-size:12px;color:var(--ink-3);font-weight:500;margin-bottom:6px}
.fx-next{opacity:.35;transition:opacity .3s}.fx-next.on{opacity:1}
.fx-next b{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;display:block}
@media(max-width:760px){.fixloop{grid-template-columns:1fr}.bar-row{grid-template-columns:110px 1fr 50px}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.lc-orb *{animation:none!important}.bar-f,.dist-b,.fx-prop,.fx-next{transition:none}}

/* ══════════════════ RICH BLACK ══════════════════
   Not one black. A page section in #000 reads as a hole; a section in #0a0a0a
   next to it reads as a surface. The site alternates paper and ink, and the
   ink has depth: a base, a raised surface, a hairline, and text at two
   levels — the same system as the light side, inverted. */
:root{--ink-0:#000;--ink-1:#0a0a0a;--ink-2s:#141413;--ink-3s:#1e1e1c;--ink-line:rgba(255,255,255,.1);--ink-line-strong:rgba(255,255,255,.2);
--on-ink:#fff;--on-ink-2:rgba(255,255,255,.66);--on-ink-3:rgba(255,255,255,.42)}
.band.dark{background:linear-gradient(180deg,var(--ink-1) 0%,var(--ink-0) 100%);color:var(--on-ink);max-width:none}
.band.dark>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.band.dark h2,.band.dark h3{color:var(--on-ink)}
.band.dark .wide,.band.dark .loop p,.band.dark .honest p{color:var(--on-ink-2)}
.band.dark .note,.band.dark .hint{color:var(--on-ink-3)}
.band.dark .note a{color:var(--on-ink)}
.band.dark .honest article{border-left-color:var(--ink-line-strong)}
/* dark surfaces */
.band.dark .chart,.band.dark .player,.band.dark .fx-card,.band.dark .icard,.band.dark .role.big{background:var(--ink-2s);border-color:var(--ink-line);color:var(--on-ink)}
.band.dark .icard:hover,.band.dark .role.big:hover{border-color:var(--ink-line-strong)}
.band.dark .icard span,.band.dark .role .instead,.band.dark .p-sub,.band.dark .p-time,.band.dark .fx-card .hint,.band.dark .dist-l,.band.dark .dist-key,.band.dark .bar-l{color:var(--on-ink-3)}
.band.dark .role{border-top-color:var(--on-ink)}
.band.dark .role p{color:var(--on-ink-2)}
.band.dark .p-btn{background:#fff;color:var(--ink-0)}
.band.dark .bar-t{background:var(--ink-3s)}.band.dark .bar-f{background:#fff}.band.dark .bar-v{color:#fff}
.band.dark .dist-b.before{background:rgba(255,255,255,.22)}.band.dark .dist-b.after{background:#fff}
.band.dark .dist-key i.before{background:rgba(255,255,255,.22)}.band.dark .dist-key i.after{background:#fff}
.band.dark .line-svg line{stroke:var(--ink-line)}
.band.dark .line-svg path[stroke="#0a0a0a"]{stroke:#fff}.band.dark .line-svg path[stroke="#cfcfcc"]{stroke:rgba(255,255,255,.3)}
.band.dark .line-svg text[fill="#0a0a0a"]{fill:#fff}.band.dark .line-svg text[fill="#8a8a87"]{fill:rgba(255,255,255,.45)}
.band.dark .fx-input{border-color:var(--ink-line-strong);color:#fff;background:var(--ink-3s)}
.band.dark .fx-input:empty::before{color:var(--on-ink-3)}
.band.dark .fx-prop{border-color:var(--ink-line);background:var(--ink-3s)}.band.dark .fx-prop b{color:var(--on-ink-3)}
.band.dark .fx-score,.band.dark .fx-next b{color:#fff}
.band.dark .btn-primary{background:#fff;color:var(--ink-0)}.band.dark .btn-primary:hover{background:#e8e8e8}
.band.dark .btn-secondary{background:transparent;color:#fff;border-color:var(--ink-line-strong)}.band.dark .btn-secondary:hover{border-color:#fff}
.band.dark .indcloud a{border-color:var(--ink-line);color:var(--on-ink-2)}.band.dark .indcloud a:hover{border-color:#fff;color:#fff}
.band.dark .faq p{color:var(--on-ink-2)}
.band.dark table.compare th{color:var(--on-ink-3);border-color:var(--ink-line)}
.band.dark table.compare td{color:var(--on-ink-2);border-color:var(--ink-line)}.band.dark table.compare td:first-child{color:#fff}
/* the live call on dark hero */
.hero.dark{background:linear-gradient(180deg,var(--ink-0),var(--ink-1));color:#fff;max-width:none;padding:72px 24px 88px}
.hero.dark>*{max-width:calc(var(--wrap) / 2 - 32px)}
.hero.dark .hero-copy .lead{color:var(--on-ink-2)}.hero.dark .fineprint,.hero.dark .eyebrow{color:var(--on-ink-3)}
.hero.dark .btn-primary{background:#fff;color:var(--ink-0)}.hero.dark .btn-secondary{background:transparent;color:#fff;border-color:var(--ink-line-strong)}
.hero.dark .livecall{background:var(--ink-2s);border-color:var(--ink-line)}
.hero.dark .lc-head,.hero.dark .lc-foot{border-color:var(--ink-line)}
.hero.dark .lc-orb circle.core,.hero.dark .lc-orb circle.halo{fill:#fff}
.hero.dark .lc-name{color:#fff}.hero.dark .lc-state,.hero.dark .lc-time,.hero.dark .lc-turns b,.hero.dark .lc-score-l{color:var(--on-ink-3)}
.hero.dark .lc-turns p{color:#fff}.hero.dark .lc-turns p.them{color:var(--on-ink-2)}
.hero.dark .lc-checks span{border-color:var(--ink-line);color:var(--on-ink-3)}.hero.dark .lc-checks span::before{background:var(--ink-line-strong)}
.hero.dark .lc-checks span.on{background:#fff;color:var(--ink-0);border-color:#fff}.hero.dark .lc-checks span.on::before{background:var(--ink-0)}
.hero.dark .lc-score{color:#fff}
.hero-wrap{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:start}
@media(max-width:920px){.hero-wrap{grid-template-columns:1fr;gap:40px}}
/* nav over dark hero */
.nav.on-dark{background:rgba(0,0,0,.72);color:#fff}
.nav.on-dark .brand,.nav.on-dark nav a{color:#fff}.nav.on-dark nav a:hover{color:#fff}
.nav.on-dark nav a.btn{background:#fff;color:var(--ink-0)}

/* pricing: currency + free tier */
.cur{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:28px}
.cur button{border:1px solid var(--line);background:#fff;border-radius:var(--pill);padding:6px 12px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.cur button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cur .hint{margin-left:8px;font-size:12.5px;color:var(--ink-3)}
.plan.free{background:var(--sunk)}
.plan .crm{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-faint);font-size:13px;color:var(--ink-2)}
.plan .crm b{display:block;font-size:12px;color:var(--ink-3);font-weight:500;margin-bottom:2px}
/* solutions */
.sol{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.sol a{border:1px solid var(--line);border-radius:var(--rc);padding:22px;text-decoration:none;color:inherit;display:grid;gap:6px;transition:border-color .12s}
.sol a:hover{border-color:var(--ink)}
.sol .prob{font-size:13px;color:var(--ink-3)}.sol h3{font-size:19px}.sol p{color:var(--ink-2);font-size:14.5px}
.sol .n{font-size:32px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:6px}
/* legal */
.legal{max-width:760px}.legal h2{font-size:22px;margin:40px 0 12px}.legal p,.legal li{color:var(--ink-2);font-size:15.5px}
.legal ul{padding-left:20px}.legal .draft{border:1px solid var(--line-strong);background:var(--sunk);border-radius:var(--r);padding:12px 14px;font-size:14px;color:var(--ink-2);margin:20px 0 32px}