/* ============================================================================
   SolAuth — marketing site
   Tokens come from theme.css. Every side-by-side band leads with the product
   or the mark and answers with the copy — the mirror of the usual arrangement.
   Restrained type, hairline rules, and the mark is the only thing that moves.
   ========================================================================== */

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:min(920px, 93vw)}


/* ── Nav ──────────────────────────────────────────────────────────────────────
   Fixed rather than sticky: fixed can't be undone by an ancestor's overflow or
   transform, so the bar holds at the top of the page and at the foot of the
   footer alike. body padding-top reserves its height. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:color-mix(in srgb,var(--bg0) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
body{padding-top:66px}
section[id]{scroll-margin-top:84px}

/* Three tracks, with the outer two equal — so the link row sits on the true
   centre of the bar no matter how wide the brand or the actions get, instead of
   being pushed off-centre by whichever side is heavier. */
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:700;letter-spacing:-.4px;justify-self:start}
.brand img{width:32px;height:32px;object-fit:contain;display:block}

.nav-links{display:flex;align-items:center;gap:2px;justify-self:center}
.nav-links a{
  font-size:13.5px;font-weight:500;color:var(--t2);padding:8px 13px;border-radius:var(--radius-sm);
  transition:color .14s,background .14s;
}
.nav-links a:hover{color:var(--t1);background:var(--bg3)}
.nav-links a.on{color:var(--brand);font-weight:600}
.nav-right{display:flex;align-items:center;gap:10px;justify-self:end;grid-column:3}
.tlink{font-size:13.5px;font-weight:600;color:var(--t1);padding:8px 6px}
.tlink:hover{color:var(--brand)}
/* Links gone: two tracks, brand left and actions right, still balanced. */
@media(max-width:1080px){
  .nav-links{display:none}
  .nav-in{grid-template-columns:auto 1fr}
  .nav-right{grid-column:2}
}
@media(max-width:420px){.tlink{display:none}}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:var(--brand);color:var(--on-accent);
  cursor:pointer;transition:background .14s,border-color .14s,color .14s;white-space:nowrap;
}
.btn:hover{background:var(--brand-deep)}
.btn svg{width:15px;height:15px}
.btn-ghost{background:transparent;border-color:var(--line2);color:var(--t1)}
.btn-ghost:hover{background:var(--bg3);border-color:var(--line3)}
.btn-lg{font-size:14.5px;padding:12px 22px}
.btn-block{display:flex;width:100%;margin-top:22px}
.dc-btn{background:#5865f2}
.dc-btn:hover{background:#4752c4}
.dc{width:18px;height:18px;flex:0 0 auto}

/* ── Hero ─────────────────────────────────────────────────────────────────────
   The one band that takes the extra room — it is carried by the mark and the
   product preview rather than by paragraphs. */
.hero > .wrap{max-width:var(--container-wide)}
.hero{padding:clamp(36px, 6vh, 76px) 0 clamp(44px, 7vh, 92px)}
.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px, 4vw, 64px);align-items:center}
.hero-art{order:-1}
@media(max-width:980px){.hero-art{order:0}}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:36px;text-align:center;justify-items:center}
}
.hero-copy h1{font-size:clamp(34px,4.4vw,56px);font-weight:800;letter-spacing:-2.1px;line-height:1.06;max-width:17ch}
.hero-copy p{font-size:16px;color:var(--t2);line-height:1.75;margin-top:22px;max-width:52ch}
@media(max-width:980px){.hero-copy h1,.hero-copy p{max-width:none;margin-left:auto;margin-right:auto}}
.cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
@media(max-width:980px){.cta{justify-content:center}}

.hero-art{display:grid;place-items:center}
.hero-art img{width:min(380px,86%);height:auto;display:block}
@media(max-width:980px){.hero-art img{width:min(200px,52%)}}

/* The mark breathes — slow enough to read as alive, not as animation. */
.float{animation:float 7s ease-in-out infinite}
.float.slow{animation-duration:9s}
@keyframes float{
  0%,100%{transform:translateY(-10px)}
  50%    {transform:translateY(10px)}
}

/* ── Hero product preview ─────────────────────────────────────────────────────
   A scale model of the dashboard, built from the same tokens as the product so
   it can't drift into advertising a UI that doesn't exist. */
.preview{
  margin-top:clamp(32px, 5vh, 60px);background:var(--bg2);border:1px solid var(--line2);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
}
@media(max-width:760px){.preview{margin-top:36px}}
.pv-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg1)}
.pv-dots{display:flex;gap:5px}
.pv-dots i{width:9px;height:9px;border-radius:50%;background:var(--bg4);display:block}
.pv-url{
  flex:1;text-align:center;font-family:var(--mono);font-size:11px;color:var(--t3);
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:4px 10px;max-width:280px;margin:0 auto;
}
.pv-body{display:grid;grid-template-columns:188px 1fr;min-height:300px}
@media(max-width:760px){.pv-body{grid-template-columns:1fr}}
.pv-side{border-right:1px solid var(--line);background:var(--bg1);padding:16px 12px;display:flex;flex-direction:column;gap:3px}
@media(max-width:760px){.pv-side{display:none}}
.pv-brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;letter-spacing:-.3px;padding:0 8px 14px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.pv-brand img{width:22px;height:22px;object-fit:contain}
.pv-side span{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--t3);padding:8px 10px;border-radius:7px}
.pv-side span svg{width:15px;height:15px}
.pv-side span.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.pv-main{padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:560px){.pv-stats{grid-template-columns:1fr 1fr}}
.pv-stat{background:var(--bg3);border:1px solid var(--line);border-radius:9px;padding:12px}
.pv-stat span{display:block;font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px}
.pv-stat b{display:block;font-size:19px;font-weight:700;letter-spacing:-.6px;margin-top:5px;font-variant-numeric:tabular-nums}
.pv-stat i{display:block;height:3px;border-radius:3px;background:var(--brand);margin-top:9px;opacity:.85}
.pv-chart{background:var(--bg3);border:1px solid var(--line);border-radius:9px;padding:10px;height:132px}
.pv-chart svg{width:100%;height:100%;display:block}
.pv-line{fill:none;stroke:var(--brand);stroke-width:2.5;vector-effect:non-scaling-stroke}
.pv-fill{fill:var(--brand);opacity:.12}
.pv-rows{display:flex;flex-direction:column;gap:7px}
.pv-row{display:flex;align-items:center;gap:10px;font-size:12px;background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.pv-row b{font-weight:600}
.pv-row code{font-family:var(--mono);font-size:11px;color:var(--t3)}
.pv-row .ok,.pv-row .bad{margin-left:auto;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.pv-row .ok{color:var(--ok)}
.pv-row .bad{color:var(--err)}

/* ── Bands ────────────────────────────────────────────────────────────────── */
.band{padding:clamp(52px, 7.5vh, 96px) 0;border-top:1px solid var(--line)}
.band.alt{background:var(--bg1)}
.band-h{margin-bottom:clamp(28px, 4vh, 46px);max-width:62ch}
.band-h.center{margin-left:auto;margin-right:auto;text-align:center}
.band-h h2{font-size:clamp(24px,2.9vw,31px);font-weight:700;letter-spacing:-1px;line-height:1.2}
.band-h p{font-size:14.5px;color:var(--t2);line-height:1.75;margin-top:15px}

/* ── Split bands: copy one side, product the other ────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* Product panel first, copy second — the mirror of the usual arrangement. */
.split > .split-art{order:-1}
@media(max-width:980px){.split > .split-art{order:0}}
@media(max-width:980px){
  .split{grid-template-columns:1fr;gap:40px}
  .split.reverse .split-art{order:2}
}
.split-copy h2{font-size:clamp(24px,2.9vw,31px);font-weight:700;letter-spacing:-1px;line-height:1.2;max-width:20ch}
.split-copy > p{font-size:14.5px;color:var(--t2);line-height:1.78;margin-top:16px;max-width:52ch}
.split-copy .after{font-size:14px;color:var(--t3);margin-top:22px}

.ticks{list-style:none;margin-top:26px;padding-top:26px;border-top:1px solid var(--line2);
       display:flex;flex-direction:column;gap:15px}
.ticks li{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:500;color:var(--t1)}
.ticks svg{
  width:20px;height:20px;padding:4px;border-radius:50%;flex:0 0 auto;
  background:var(--brand);color:var(--on-accent);stroke-width:3;
}

/* ── Product modules (the execution panel and friends) ────────────────────── */
.split-art{display:flex;flex-direction:column;gap:16px;min-width:0}
.module{
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.module-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.module-t{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.9px;color:var(--t3)}
.module-s{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--t3)}
.module-f{font-size:12px;color:var(--t3);line-height:1.65;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}

.log{display:flex;flex-direction:column;gap:8px}
.lr{
  display:flex;align-items:center;gap:10px;font-size:12.5px;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
}
.lr b{font-weight:600;white-space:nowrap}
.lr code{font-family:var(--mono);font-size:11.5px;color:var(--t3)}
.lr .dim{color:var(--t3);font-size:11.5px}
.lr .ok,.lr .bad{margin-left:auto;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.lr .ok{color:var(--ok)}
.lr .bad{color:var(--err)}
.lr time{font-size:11px;color:var(--t3);min-width:52px;text-align:right;margin-left:auto}
.lr .ok ~ time,.lr .bad ~ time{margin-left:0}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips code{
  font-family:var(--mono);font-size:11.5px;color:var(--t3);
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:7px 10px;
}
.chips code.live{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-line)}

/* ── Feature cards: picture first, then the words ─────────────────────────── */
.band-h h2 em{font-style:normal;color:var(--brand)}
.fcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1020px){.fcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.fcards{grid-template-columns:minmax(0,1fr)}}
.fc{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
/* Fixed-height shot keeps every card's heading on the same line across the row */
.fc-shot{
  height:148px;overflow:hidden;border-radius:9px;padding:12px;
  background:var(--bg3);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px;justify-content:center;
}
.fc-h{display:flex;align-items:center;gap:10px;margin-top:16px}
.fc-ic{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand-soft);border:1px solid var(--brand-line);
}
.fc-ic svg{width:15px;height:15px;color:var(--brand)}
.fc h3{font-size:14.5px;font-weight:600;letter-spacing:-.2px}
.fc p{font-size:12.5px;color:var(--t2);line-height:1.68;margin-top:11px}

/* mock: discord thread */
.fc-shot .msg{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--t2);line-height:1.5}
.fc-shot .msg .av{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-style:normal;font-size:9.5px;font-weight:700;background:var(--bg4);color:var(--t2);
}
.fc-shot .msg.bot .av{background:var(--brand);color:var(--on-accent)}
.fc-shot .msg span{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.fc-shot .msg b{color:var(--t1);font-weight:600}
.fc-shot .msg code{font-family:var(--mono);font-size:10.5px;color:var(--brand)}
/* mock: key list */
.keyrow{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:7px 9px}
.keyrow code{font-family:var(--mono);font-size:10.5px;color:var(--t2)}
.keyrow span{margin-left:auto;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.keyrow .ok{color:var(--ok)}
.keyrow .bad{color:var(--err)}
.keyrow .dim{color:var(--t3)}
/* mock: toggles */
.toggles{display:flex;flex-direction:column;gap:11px}
.tg{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--t2)}
.tg .sw{width:26px;height:15px;border-radius:20px;background:var(--bg4);position:relative;flex:0 0 auto}
.tg .sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--t3)}
.tg .sw.on{background:var(--brand)}
.tg .sw.on::after{left:13px;background:#fff}
/* mock: code */
.fc-code{font-family:var(--mono);font-size:10.5px;line-height:1.85;color:var(--t2);white-space:pre-wrap;word-break:break-word;margin:0}
.fc-code .c{color:var(--t3);font-style:italic}
.fc-code .k{color:var(--t1);font-weight:600}
.fc-code .s{color:var(--ok)}
.fc-code .f{color:var(--brand-2)}

/* ── Stats (mark beside a 2×2 of claims) ──────────────────────────────────── */
.stats-art{display:grid;place-items:center;order:2}
@media(max-width:980px){.stats-art{order:0}}
.stats-art img{width:min(260px,66%);height:auto;display:block}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:34px 30px}
@media(max-width:560px){.stats{grid-template-columns:1fr;gap:26px}}
.stat-ic{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;margin-bottom:13px;
  background:var(--brand-soft);border:1px solid var(--brand-line);
}
.stat-ic svg{width:18px;height:18px;color:var(--brand)}
.stat b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.4px}
.stat span{display:block;font-size:13px;color:var(--t3);line-height:1.65;margin-top:6px}

/* ── Access ───────────────────────────────────────────────────────────────────
   Cards stretch to equal height and every row is the same height in all three,
   so the dividers read as one continuous grid across the block. The button is
   pushed to the bottom by the list, never floated mid-card. */
.access{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;max-width:1120px;margin:0 auto}
@media(max-width:900px){.access{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.ac{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--line2);
  border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-sm);
}
/* The recommended tier is marked by one clean accent ring (a blue border plus a
   1px shadow ring that both follow the corner radius) and the "Most popular" chip
   on the tier-name line. A separate ::before top bar used to sit here, but its
   rounded top corners didn't line up with the border/ring arc, so the outline
   read as broken at the top corners. The uniform ring closes cleanly on all sides. */
.ac.mid{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow)}
.ac-n{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ac-tag{
  font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;
  color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);
  padding:4px 9px;border-radius:100px;white-space:nowrap;flex:0 0 auto;
}
/* Fixed-height header block keeps the price line level across the three cards
   even when one description wraps to an extra line. */
.ac-h{min-height:150px;display:flex;flex-direction:column}
.ac-n{font-size:19px;font-weight:700;letter-spacing:-.5px;min-height:26px}
.ac-d{font-size:12.5px;color:var(--t3);line-height:1.65;margin-top:9px}
.ac-p{display:flex;align-items:baseline;gap:5px;margin-top:auto;padding-top:16px}
.ac-p b{font-size:34px;font-weight:800;letter-spacing:-1.6px;line-height:1}
.ac-p span{font-size:13px;color:var(--t3);font-weight:500}

.ac ul{list-style:none;display:flex;flex-direction:column;margin-top:22px}
.ac li{
  display:flex;align-items:center;gap:11px;min-height:46px;
  font-size:13px;color:var(--t2);border-top:1px solid var(--line);
}
.ac li:last-child{border-bottom:1px solid var(--line)}
.ac li b{color:var(--t1);font-weight:600}
.ac li svg{width:15px;height:15px;color:var(--ok);flex:0 0 auto;stroke-width:3}
.ac li.off{color:var(--t3)}
.ac li.off svg{color:var(--t3);opacity:.7}
.ac li.off span{text-decoration:line-through;text-decoration-color:var(--line3)}
.ac .btn-block{margin-top:auto}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start}
@media(max-width:820px){.faq{grid-template-columns:1fr;gap:0}}
.faq details{border-bottom:1px solid var(--line2)}
.faq details:first-child{border-top:1px solid var(--line2)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:21px 2px;font-size:14.5px;font-weight:600;cursor:pointer;list-style:none;
  transition:color .14s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand)}
.faq summary svg{width:18px;height:18px;color:var(--t3);flex:0 0 auto;transition:transform .2s,color .2s}
.faq details[open] summary svg{transform:rotate(180deg);color:var(--brand)}
.fa{padding:0 2px 24px}
.fa p{font-size:14px;color:var(--t2);line-height:1.78;max-width:74ch}
.fa p + p{margin-top:12px}
.fa code{font-family:var(--mono);font-size:12.5px;color:var(--brand)}
.faq-code-box{
  margin:14px 0;background:var(--bg2);border:1px solid var(--line2);
  border-radius:var(--radius-sm);padding:14px 16px;overflow-x:auto;
}
:root[data-theme="light"] .faq-code-box{background:var(--bg3)}
.faq-code-box pre{margin:0}
.faq-code-box code{font-family:var(--mono);font-size:12px;color:var(--t1);white-space:pre;display:block;line-height:1.85}

/* ── Help ─────────────────────────────────────────────────────────────────── */
.help{border-top:1px solid var(--line);padding:clamp(48px, 6.5vh, 80px) 0}
.help-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.help-art{order:-1}
@media(max-width:860px){.help-art{order:0}}
@media(max-width:860px){.help-in{grid-template-columns:1fr;gap:32px;text-align:center;justify-items:center}}
.help-copy h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-.9px}
.help-copy p{font-size:14.5px;color:var(--t2);line-height:1.75;margin:14px 0 26px;max-width:54ch}
@media(max-width:860px){.help-copy p{margin-left:auto;margin-right:auto}}
.help-art{display:grid;place-items:center}
.help-art img{width:min(190px,52%);height:auto;display:block}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--bg1);padding:clamp(40px, 5vh, 60px) 0 34px}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
/* Brand column first and left-aligned — the standard footer shape. It used to be
   pushed right (order:4/text-align:right), which left the logo stranded at the
   left of that column while the tagline and status hugged the right edge. */
.foot-brand{text-align:left}
.foot-brand .brand{justify-content:flex-start}
.foot-brand p{margin-left:0}
@media(max-width:860px){.foot-cols{grid-template-columns:1fr 1fr;gap:30px}.foot-brand{grid-column:1 / -1}}
@media(max-width:520px){.foot-cols{grid-template-columns:1fr}}
.foot-brand .brand{font-size:16px}
.foot-brand .brand img{width:26px;height:26px}
.foot-brand p{font-size:13px;color:var(--t3);margin:13px 0 15px;max-width:34ch}
.foot-status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2)}
.foot-h{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--t3);margin-bottom:15px}
.foot-cols a:not(.brand){display:block;font-size:13.5px;color:var(--t2);padding:5px 0;transition:color .14s}
.foot-cols a:not(.brand):hover{color:var(--t1)}

/* Legal — the small print, kept legible rather than hidden */
.legal{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.legal-note{font-size:12px;color:var(--t3);line-height:1.8;max-width:96ch}
.legal-note a{color:var(--t2);text-decoration:underline;text-underline-offset:2px}
.legal-note a:hover{color:var(--brand)}
.foot-copy{font-size:12.5px;color:var(--t3);margin-top:18px}