/* Landing-page stylesheet. Loads after site.css (tokens + nav). Mirrors the
   home page's design language so the use-case pages feel like the same site. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;520;540;560;600&family=JetBrains+Mono:wght@400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap");

:root{
  --poll:#1d4ed8;
  --classroom:#e8590c;
  --share:#7c3aed;
  --updates:#0f766e;
  --mode: var(--accent);
  --section-pad: 88px;
}
body[data-mode="poll"]{ --mode: var(--poll); }
body[data-mode="classroom"]{ --mode: var(--classroom); }
body[data-mode="share"]{ --mode: var(--share); }
body[data-mode="updates"]{ --mode: var(--updates); }

html{ scroll-behavior:smooth; }
html,body{ margin:0;padding:0; }
body{
  background:var(--bg);color:var(--ink);
  font-family:"Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
}
a{ color:inherit;text-decoration:none; }
img{ max-width:100%;display:block; }
a.inline{ color:var(--accent);border-bottom:1px solid color-mix(in oklab,var(--accent) 40%,transparent);padding-bottom:1px; }
a.inline:hover{ border-bottom-color:var(--accent); }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.ld-wrap{ max-width:1100px;margin:0 auto;padding:0 32px; }

/* ─── type ─────────────────────────────────────────────────── */
.ld-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mode);
}
.ld-kicker::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--mode);box-shadow:0 0 0 3px color-mix(in oklab, var(--mode) 18%, transparent);
}
.ld-h1{
  font-weight:520;font-size:clamp(36px,5.4vw,70px);line-height:1;letter-spacing:-.035em;
  margin:16px 0 20px;text-wrap:balance;max-width:16ch;
}
.ld-h1 em, .ld-h2 em, .ld-cta-h em{
  font-style:normal;font-family:"EB Garamond",Garamond,Georgia,serif;
  font-weight:500;color:var(--mode);letter-spacing:-.01em;font-size:1.06em;
}
.ld-h2{
  font-weight:520;font-size:clamp(26px,3.2vw,42px);line-height:1.05;letter-spacing:-.028em;
  margin:12px 0 0;text-wrap:balance;
}
.ld-h3{ font-weight:540;font-size:18.5px;line-height:1.25;letter-spacing:-.015em;margin:0 0 8px; }
.ld-lede{ font-size:clamp(17px,1.9vw,20px);line-height:1.5;color:var(--ink-3);max-width:56ch;margin:0 0 28px;text-wrap:pretty; }
.ld-body{ font-size:15.5px;line-height:1.6;color:var(--ink-3);margin:0;text-wrap:pretty; }
.ld-section-lede{ font-size:17px;line-height:1.55;color:var(--ink-3);max-width:46ch;margin:0;text-wrap:pretty; }

/* ─── hero ─────────────────────────────────────────────────── */
.ld-hero{ padding:72px 0 28px; }
.ld-actions{ display:flex;gap:14px;align-items:center;flex-wrap:wrap; }
.ld-btn-lg{ padding:16px 24px;font-size:16px;border-radius:calc(var(--radius) - 1px); }
.ld-note{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
.ld-badges{ display:flex;gap:8px;flex-wrap:wrap;margin-top:26px; }
.ld-badge{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;color:var(--ink-3);
  border:1px solid var(--rule-2);background:color-mix(in oklab, var(--card) 60%, transparent);
}

/* ─── demo strip (a glimpse of the room) ───────────────────── */
.ld-demo{
  margin-top:40px;border:1px solid var(--rule);border-radius:calc(var(--radius) + 6px);
  background:var(--card);overflow:hidden;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 20px 50px -36px rgba(15,23,42,.35);
}
.ld-demo::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--mode); }
.ld-demo-inner{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding:28px;align-items:center; }
.ld-demo-side{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:stretch; }
.ld-demo-panel{
  border:1px solid var(--rule-2);border-radius:10px;background:var(--bg-2);padding:16px;
  display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:150px;
  pointer-events:none;user-select:none;
}
.ld-demo-label{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4); }
.ld-demo-val{ font-size:20px;font-weight:520;letter-spacing:-.01em;color:var(--ink);line-height:1.2; }
.ld-demo-val.mono{ font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;letter-spacing:0;font-size:17px; }
.ld-demo-line{ display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0; }
.ld-demo-line+.ld-demo-line{ border-top:1px dashed var(--rule-2); }
.ld-demo-copy{ font-size:11.5px;font-weight:520;padding:4px 9px;border-radius:6px;border:1px solid var(--rule);background:var(--card);color:var(--ink-2);white-space:nowrap; }
.ld-demo-bar{
  position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 10px;border-radius:6px;background:var(--card);border:1px solid var(--rule-2);
  font-size:13px;color:var(--ink-2);overflow:hidden;
}
.ld-demo-bar::before{ content:"";position:absolute;inset:0;width:var(--pct,0%);background:color-mix(in oklab, var(--mode) 18%, transparent); }
.ld-demo-bar.lead::before{ background:color-mix(in oklab, var(--mode) 34%, transparent); }
.ld-demo-bar>*{ position:relative; }
.ld-demo-bar b{ font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:11.5px;color:var(--ink-3); }
.ld-demo-q{ font-size:14px;font-weight:540;color:var(--ink);margin-bottom:2px; }
.ld-demo-bubbles{ flex-direction:row;flex-wrap:wrap;gap:8px;align-content:center;justify-content:center;background:linear-gradient(160deg,#eaf4ff 0%,#fdf1f7 55%,#fff9e8 100%); }
.ld-bubble{ padding:6px 12px;border-radius:999px;border:1.5px solid var(--mc);background:color-mix(in oklab, var(--mc) 10%, #fff);font-size:13px;font-weight:520;color:var(--ink); }
.ld-demo-boxes{ flex-direction:row;gap:8px;align-items:stretch; }
.ld-box{ flex:1;min-width:0;border:1px solid color-mix(in oklab, var(--mc) 35%, var(--rule));border-top:3px solid var(--mc);border-radius:8px;background:var(--card);padding:8px;display:flex;flex-direction:column;gap:5px; }
.ld-box b{ font-size:11.5px;font-weight:700;color:var(--mc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ld-box i{ display:block;height:4px;border-radius:99px;background:color-mix(in oklab, var(--ink) 12%, transparent);width:var(--w,80%); }
.ld-qr{ display:grid;place-items:center;align-content:center;border:1px solid var(--rule-2);border-radius:10px;background:var(--card);padding:14px; }
.ld-qr svg{ width:96px;height:96px;display:block; }
.ld-qr-cap{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-top:8px;text-align:center; }
.ld-demo-text .ld-h3{ margin-top:4px; }
.ld-demo-text ul{ list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px; }
.ld-demo-text li{ font-size:14px;color:var(--ink-2);padding-left:18px;position:relative;line-height:1.45; }
.ld-demo-text li::before{ content:"";position:absolute;left:0;top:10px;width:10px;height:1.5px;background:var(--mode); }

/* ─── sections ─────────────────────────────────────────────── */
.ld-section{ padding:var(--section-pad) 0 0; }
.ld-section-hd{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end;
  margin-bottom:40px;padding-bottom:22px;border-bottom:1px solid var(--rule-2);
}

/* steps */
.ld-steps{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2);border-radius:var(--radius);overflow:hidden;
}
.ld-step{ background:var(--bg-2);padding:30px 26px 32px; }
.ld-step-n{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:46px;font-weight:300;color:var(--mode);line-height:1;letter-spacing:-.04em;margin-bottom:14px; }

/* feature grid */
.ld-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.ld-grid-2{ grid-template-columns:repeat(2,1fr); }
.ld-card{
  padding:22px 22px 20px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 8px 28px -22px rgba(0,0,0,.18);
}
.ld-card .ld-kicker-xs{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mode);display:block;margin-bottom:10px; }
a.ld-card{ display:block;transition:transform .15s, border-color .15s; }
a.ld-card:hover{ transform:translateY(-2px);border-color:color-mix(in oklab, var(--mode) 40%, var(--rule)); }
a.ld-card::after{ content:"→";display:inline-block;margin-top:12px;color:var(--mode);font-weight:500; }

/* comparison */
.ld-vs{ display:grid;grid-template-columns:repeat(2,1fr);gap:16px; }
.ld-vs-col{ border:1px solid var(--rule);border-radius:var(--radius);padding:22px;background:var(--card); }
.ld-vs-col.good{ border-color:color-mix(in oklab, var(--mode) 40%, var(--rule));background:color-mix(in oklab, var(--mode) 4%, var(--card)); }
.ld-vs-col ul{ margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px; }
.ld-vs-col li{ font-size:15px;color:var(--ink-2);padding-left:22px;position:relative;line-height:1.5; }
.ld-vs-col li::before{ content:"×";position:absolute;left:0;top:0;color:var(--ink-4);font-weight:600; }
.ld-vs-col.good li::before{ content:"✓";color:var(--mode); }

/* faq */
.ld-faq{ border:1px solid var(--rule-2);border-radius:calc(var(--radius) - 2px);padding:16px 20px;background:var(--card);margin:8px 0; }
.ld-faq[open]{ border-color:var(--rule); }
.ld-faq summary{ cursor:pointer;font-weight:540;font-size:17px;letter-spacing:-.01em;color:var(--ink);list-style:none;display:flex;align-items:center;gap:12px; }
.ld-faq summary::-webkit-details-marker{ display:none; }
.ld-faq summary::after{ content:"+";margin-left:auto;color:var(--mode);font-size:22px;font-weight:300;line-height:1; }
.ld-faq[open] summary::after{ content:"−"; }
.ld-faq[open] summary{ margin-bottom:10px; }
.ld-faq p{ margin:0;color:var(--ink-3);font-size:15.5px;line-height:1.6;max-width:68ch; }

/* closing cta */
.ld-cta{ margin-top:var(--section-pad); }
.ld-cta-inner{
  background:var(--ink);color:var(--bg-2);border-radius:calc(var(--radius) + 4px);
  padding:64px 40px;text-align:center;position:relative;overflow:hidden;
}
.ld-cta-inner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(500px 300px at 20% 100%, color-mix(in oklab, var(--mode) 38%, transparent), transparent 60%),
    radial-gradient(400px 200px at 80% 0%, color-mix(in oklab, var(--mode) 22%, transparent), transparent 60%);
}
.ld-cta-inner>*{ position:relative; }
.ld-cta-h{ font-size:clamp(28px,4vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:0 0 24px;color:var(--bg-2); }
.ld-cta-h em{ color:color-mix(in oklab, var(--mode) 55%, var(--bg-2)); }
.ld-cta-inner .qn-btn-primary{ background:var(--bg-2);color:var(--ink);border-color:var(--bg-2); }
.ld-cta-inner .qn-btn-primary:hover{ background:#fff; }
.ld-cta-sub{ margin:14px 0 0;color:color-mix(in oklab, var(--bg-2) 65%, transparent);font-size:14px; }

/* footer */
.ld-footer{ margin-top:72px;border-top:1px solid var(--rule-2);padding:40px 0 28px; }
.ld-footer-grid{ display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:40px;margin-bottom:32px; }
.ld-footer-tag{ color:var(--ink-4);font-size:14px;margin:12px 0 0;max-width:32ch;line-height:1.55; }
.ld-footer-col ul{ list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px; }
.ld-footer-col a{ color:var(--ink-2);font-size:14px; }
.ld-footer-col a:hover{ color:var(--accent); }
.ld-kicker-xs{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3); }
.ld-footer-bot{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--rule-2);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3); }
.ld-footer-bot a{ color:inherit;border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent); }

/* responsive */
@media (max-width:980px){
  :root{ --section-pad:64px; }
  .ld-section-hd{ grid-template-columns:1fr;gap:14px; }
  .ld-demo-inner{ grid-template-columns:1fr; }
  .ld-steps{ grid-template-columns:1fr; }
  .ld-grid{ grid-template-columns:1fr 1fr; }
  .ld-footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .ld-wrap{ padding:0 20px; }
  .ld-hero{ padding:44px 0 20px; }
  .ld-h1{ max-width:none; }
  .ld-grid, .ld-grid-2, .ld-vs{ grid-template-columns:1fr; }
  .ld-demo-inner{ padding:20px; }
  .ld-demo-side{ grid-template-columns:1fr; }
  .ld-cta-inner{ padding:44px 22px; }
  .ld-footer-grid{ grid-template-columns:1fr;gap:24px; }
}