/* Public pages — landing, login, docs. Loads after theme.css. */

.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem)}
/* padding-block, not the shorthand: nearly every section on the page is
   `class="wrap section"`, and `.wrap` supplies the side gutters. A
   shorthand here comes later in the file and wiped them to zero, so on a
   phone every heading, card and paragraph sat flush against both screen
   edges. Desktop hid it: the 1120px max-width leaves space regardless. */
.section{padding-block:clamp(3.5rem,8vw,6rem)}
.band{background:var(--bg-2);border-block:1px solid var(--line)}

/* ─────────────────────────────────────────────────────────────── nav ─── */
.nav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:1.4rem;
  padding:.8rem clamp(1.1rem,4vw,2.2rem);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav .brand{padding:0}
.nav-links{display:flex;gap:1.5rem;margin-left:.8rem}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.89rem;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-actions{margin-left:auto;display:flex;gap:.5rem;align-items:center}
@media (max-width:820px){.nav-links{display:none}}

/* ────────────────────────────────────────── telegram post preview ─── */
.hero-demo{position:relative}
/* the phone sits slightly back from the copy, like it's on a desk beside you */
@media (min-width:881px){
  .hero-demo .tg{transform:perspective(1400px) rotateY(-5deg) rotateX(1.5deg)}
}

.tg{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow);position:relative;
}
.tg-bar{
  display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem;
  border-bottom:1px solid var(--line);background:var(--bg-2);font-size:.86rem;
}
.tg-avatar{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--accent);
  color:var(--accent-ink);display:grid;place-items:center;
  font-family:"DM Mono",monospace;font-size:.68rem;
}
.tg-sub{color:var(--muted);font-size:.74rem}
.tg-body{padding:1rem .85rem;display:flex;flex-direction:column;gap:.75rem}
.tg-msg{
  position:relative;background:var(--bg-2);border:1px solid var(--line-soft);
  border-radius:12px 12px 12px 4px;padding:.75rem .85rem .55rem;max-width:97%;
}
.tg-title{font-size:.95rem;margin-bottom:.1rem;color:var(--ink)}
.tg-title strong{font-weight:700}
.tg-range{font-size:.88rem;color:var(--ink);margin-bottom:.4rem}
.tg-note{font-size:.81rem;color:var(--muted);margin-bottom:.65rem}
.tg-btn{
  text-align:center;padding:.5rem;border-radius:8px;
  background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-line);
  font-size:.85rem;font-weight:600;
}
.tg-time{position:absolute;right:.75rem;bottom:.4rem;font-family:"DM Mono",monospace;font-size:.63rem;color:var(--muted)}
.demo-caption{margin:.9rem 0 0;font-size:.82rem;color:var(--muted);text-align:center}

/* ───────────────────────────────────────────────────────────── faq ─── */
.faq{margin-top:2rem;display:flex;flex-direction:column;gap:.55rem;max-width:780px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:.9rem 1.1rem}
.faq details[open]{border-color:var(--accent-line)}
.faq summary{cursor:pointer;font-weight:600;font-size:.95rem;list-style:none;color:var(--ink);display:flex;gap:.7rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-family:"DM Mono",monospace;font-weight:500;flex:none}
.faq details[open] summary::before{content:"–"}
.faq p{margin:.7rem 0 0 1.4rem;font-size:.9rem;color:var(--muted)}

/* ───────────────────────────────────────────────────────────── cta ─── */
.cta{text-align:center;position:relative;overflow:hidden}

.cta > *{position:relative}
.cta .lede{margin:.8rem auto 0}
/* The closing button sat directly against the line above it, so the two
   read as one block instead of as a sentence and then an action. */
.cta .btn{margin-top:1.5rem}

/* ──────────────────────────────────────────────────────────── foot ─── */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:1.6rem 0}
.foot-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--accent)}

/* ─────────────────────────────────────────────────────────── login ─── */
.login-wrap{min-height:calc(100vh - 62px);display:grid;place-items:center;padding:2.5rem 1rem}
.login-card{width:100%;max-width:410px}
.login-card h1{font-size:1.75rem;margin-bottom:.35rem}
.login-sub{color:var(--muted);font-size:.92rem;margin-bottom:1.5rem}
.tabs{display:flex;gap:1.4rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line)}
.tab{
  padding:.45rem 0;border:0;background:none;color:var(--muted);
  font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ──────────────────────────────────────────────────────────── docs ─── */
.doc{max-width:780px}
.doc h1{margin:.4rem 0 .7rem}
.doc h2{margin:2.6rem 0 .8rem;font-size:1.4rem}
.doc section{scroll-margin-top:88px}
.doc ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem;color:var(--ink-2)}
.doc ul li::marker{color:var(--accent)}
.toc{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:1.8rem 0 .5rem;
  padding:1rem 1.1rem;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);font-family:"DM Mono",monospace;font-size:.8rem;
}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--accent)}
.kv-list{margin:1.1rem 0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.4rem}
.kv-list dt{font-weight:600;color:var(--ink);font-size:.9rem}
.kv-list dd{margin:0;color:var(--muted);font-size:.9rem}
@media (max-width:560px){
  .kv-list{grid-template-columns:1fr;gap:.15rem}
  .kv-list dd{margin-bottom:.7rem}
}

/* ═══════════════════════════════════════════════════════════ hero ═══ */
.hero-full{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(3rem,9vw,6.5rem) clamp(1.1rem,4vw,2.2rem) clamp(2.5rem,6vw,4rem);
}

.hero-full > *{position:relative}
.hero-full h1{margin:1.1rem auto 1.2rem;max-width:16ch}
.hero-full h1 em{font-style:normal;color:var(--accent)}
.hero-lede{margin-inline:auto;text-align:center}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.9rem}

/* measured-behaviour readout */
.ticker{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  max-width:900px;margin:clamp(2.5rem,6vw,4rem) auto 0;
}
.tick{background:var(--surface);padding:1rem .9rem}
.tick-n{
  display:block;font-size:1.5rem;font-weight:750;line-height:1;color:var(--accent);letter-spacing:-.03em;
}
.tick-l{
  display:block;margin-top:.4rem;font-size:.74rem;color:var(--muted);line-height:1.35;
}

/* ══════════════════════════════════════════════════════ pipeline ═══ */
.journey{display:grid;grid-template-columns:1fr 330px;gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-top:2.4rem}
@media (max-width:940px){.journey{grid-template-columns:1fr}}

.pipe{list-style:none;margin:0;padding:0;position:relative}
/* the rail every stage hangs from */
.pipe::before{
  content:"";position:absolute;left:15px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,var(--accent-line),var(--line) 70%,transparent);
}
.pipe-step{position:relative;padding:0 0 1.6rem 3rem}
.pipe-step:last-child{padding-bottom:0}
.pipe-i{
  position:absolute;left:0;top:-2px;width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line);
  font-family:"DM Mono",monospace;font-size:.68rem;color:var(--muted);
}
.band .pipe-i{background:var(--bg-2)}
.pipe-step.is-out .pipe-i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pipe-step h3{margin-bottom:.3rem}
.pipe-step p{font-size:.9rem;color:var(--muted);margin:0}
.pipe-out{position:sticky;top:84px}
@media (max-width:940px){.pipe-out{position:static;max-width:400px;margin:2rem auto 0}}

/* ════════════════════════════════════════════════════════ versus ═══ */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.2rem}
@media (max-width:760px){.versus{grid-template-columns:1fr}}
.vs-col{border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.4rem 1.5rem;background:var(--surface)}
.vs-col h3{margin-bottom:.9rem}
.vs-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.vs-col li{position:relative;padding-left:1.5rem;font-size:.9rem;color:var(--muted)}
.vs-before li::before{
  content:"×";position:absolute;left:0;top:-1px;color:var(--bad);
  font-family:"DM Mono",monospace;
}
.vs-after{border-color:var(--accent-line);background:var(--accent-dim)}
.vs-after li{color:var(--ink)}
.vs-after li::before{
  content:"✓";position:absolute;left:0;top:-1px;color:var(--accent);
  font-family:"DM Mono",monospace;
}
.vs-note{margin:1.1rem 0 0;font-size:.86rem;color:var(--accent)}

/* ══════════════════════════════════════════════════════════ spec ═══ */
.spec{
  margin:2.2rem 0 0;display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.spec > div{background:var(--surface);padding:1.2rem 1.3rem}
.spec dt{font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:.35rem}
.spec dd{margin:0;font-size:.88rem;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════ faq ═══ */
.faq-2col{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-content:start}
@media (max-width:760px){.faq-2col{grid-template-columns:1fr}}
.faq-2col details{align-self:start}

/* ══════════════════════════════════════════════════════════ foot ═══ */
.foot-grid{
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem;align-items:start;
}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:1.6rem}}
/* One column put every link on its own 44px row and made the footer 589px
   tall on an 812px phone — most of a screen of nothing but links. Two
   columns halve it; the brand blurb still wants the full width. */
@media (max-width:420px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
.foot-brand p{margin:.7rem 0 0;max-width:32ch}
.foot-col{display:flex;flex-direction:column;gap:.45rem}
.foot-col h4{
  margin:0 0 .3rem;font-family:"DM Mono",monospace;font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.foot-col a{font-size:.88rem}


/* ═══════════════════════════════════════════════════ public on phone ═══ */
@media (max-width:640px){
  /* Tap targets. Measured on a 375px viewport: FAQ headers came out at 24px,
     guide links at 20px, footer links at 23px — all well under the 44px a
     thumb needs. Padding, not font size, is what fixes it. */
  .faq summary{min-height:44px;align-items:center;padding:.25rem 0}
  .faq details{padding:.35rem 1rem}
  .faq p{margin-left:1.5rem}

  .toc{gap:0;padding:.5rem .6rem;flex-direction:column}
  .toc a{display:flex;align-items:center;min-height:42px;padding:0 .5rem;border-bottom:1px solid var(--line-soft)}
  .toc a:last-child{border-bottom:0}

  .foot-col a{display:inline-flex;align-items:center;min-height:40px}
  .foot-grid{gap:1.2rem}
  .nav .brand,.foot .brand{min-height:44px;align-items:center}

  /* The pipeline rail is tighter on a narrow screen. */
  .pipe::before{left:13px}
  .pipe-step{padding-left:2.6rem;padding-bottom:1.3rem}
  .pipe-i{width:27px;height:27px;font-size:.63rem}

  /* Two up rather than four, so the numbers stay legible. */
  .ticker{grid-template-columns:1fr 1fr}
  .tick{padding:.85rem .8rem}
  .tick-n{font-size:1.3rem}

  .hero-full{padding-top:2.2rem}
  .hero-full h1{max-width:none}
  .section{padding-block:2.6rem}
  .vs-col{padding:1.15rem 1.15rem 1.25rem}
  .spec > div{padding:1rem 1.05rem}
  .login-wrap{min-height:auto;padding:1.6rem .9rem 3rem}
}