/* AdVenture Media — Claude Code Builder Program
   Palette taken from adventuremedia.ai: cream paper, charcoal ink, deep teal
   accent, and the three-square mark in purple / red / black. */

:root {
  --paper: #f9f9f2;
  --panel: #fffffb;
  --panel-2: #f2f1e7;
  --line: #e2e0d2;
  --line-soft: #edebe0;
  --ink: #141414;
  --ink-2: #413c34;
  --ink-3: #6b6558;          /* 5:1 on --paper, readable at small sizes */
  --terra: #2e5855;
  --terra-soft: rgba(46, 88, 85, .08);
  --terra-line: rgba(46, 88, 85, .24);
  --purple: #5832d1;
  --purple-soft: rgba(88, 50, 209, .08);
  --red: #e0433e;
  --done: #2e7d54;
  --done-soft: rgba(46, 125, 84, .10);
  --warn: #7a5a10;
  --radius: 12px;
  --rail-w: 250px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--terra); }
em { font-style: normal; font-weight: 600; color: var(--ink); }

/* ---------- brand mark ---------- */
.mark { position: relative; flex: none; }
.mark i { position: absolute; display: block; }
.mark i:nth-child(1) { top: 0; left: 0; background: var(--purple); }
.mark i:nth-child(2) { top: 0; right: 0; background: var(--red); }
.mark i:nth-child(3) { bottom: 0; left: 0; background: #000; }
.wordmark { font-size: 1.35rem; font-weight: 500; letter-spacing: -.03em; color: #050529; line-height: 1; }

/* ---------- top bar ---------- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
.topbar-in {
  max-width: 1200px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .sub {
  display: block;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 3px;
}
.top-right { display: flex; align-items: center; gap: 14px; }
.whoami { font-size: 12.5px; color: var(--ink-2); text-align: right; line-height: 1.4; }
.whoami b { color: var(--ink); font-weight: 600; }

/* ---------- common ---------- */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 10px;
}
h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.12; }
.lead { color: var(--ink-2); margin-top: 14px; font-size: 1.12rem; max-width: 62ch; }
.muted { color: var(--ink-3); font-size: .9rem; }
.row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

.btn {
  font-family: var(--font); font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--ink);
  padding: 9px 16px; cursor: pointer; transition: all .14s ease;
  text-decoration: none; display: inline-block;
}
.btn:hover { border-color: var(--terra); color: var(--terra); }
.btn.primary { background: var(--terra); border-color: var(--terra); color: #fff; }
.btn.primary:hover { filter: brightness(1.12); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
.btn.big { padding: 14px 22px; font-size: 15.5px; border-radius: 10px; }
.flash { font-size: 13px; color: var(--done); font-weight: 600; }

.pill {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; color: var(--ink-3);
}
.pill.done { color: var(--done); border-color: rgba(46,125,84,.4); background: var(--done-soft); }
.pill.next { color: var(--terra); border-color: var(--terra-line); background: var(--terra-soft); }

input[type=text], input[type=email], input[type=password], textarea {
  width: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-family: var(--font); font-size: 15px;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px var(--terra-soft); }
textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.field .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.field textarea.field-in { min-height: 0; resize: vertical; line-height: 1.45; }

/* ---------- home ---------- */
.page { max-width: 880px; margin: 0 auto; padding: 44px 24px 110px; }
.hero-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.words { scroll-margin-top: 90px; }
#words { scroll-margin-top: 80px; }
.block { margin-top: 60px; }
.block h2 { font-size: 1.4rem; font-weight: 650; letter-spacing: -.015em; }
.block-sub { color: var(--ink-2); margin-top: 6px; max-width: 66ch; }

.outcomes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.outcomes li {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 14px 44px; position: relative; color: var(--ink-2);
}
.outcomes li::before {
  content: "✓"; position: absolute; left: 15px; top: 14px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--done); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}



.path { list-style: none; margin-top: 18px; }
.pathrow {
  display: flex; gap: 16px; align-items: center; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; margin-bottom: 8px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .14s ease, transform .14s ease;
}
.pathrow:hover { border-color: var(--terra); transform: translateY(-1px); }
.pathrow.up { border-color: var(--terra); box-shadow: 0 0 0 3px var(--terra-soft); }
.pathnum {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--ink-3);
}
.pathrow.up .pathnum { border-color: var(--terra); color: var(--terra); background: var(--panel); }
.pathrow.done .pathnum { background: var(--done); border-color: var(--done); color: #fff; }
.pathtext { flex: 1; min-width: 0; }
.pathlabel { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pathtext b { display: block; font-size: 1.05rem; font-weight: 600; }
.pathwhy { display: block; font-size: .9rem; color: var(--ink-2); margin-top: 1px; }

.words { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.words div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; }
.words dt { font-weight: 650; }
.words dd { color: var(--ink-2); font-size: .92rem; margin-top: 2px; }

/* ---------- session layout ---------- */
.layout {
  max-width: 1200px; margin: 0 auto; padding: 0 24px 110px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: 56px;
  align-items: start;
}
.main { min-width: 0; max-width: 800px; padding-top: 40px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.upgrade, .when {
  display: inline-block; font-size: .93rem; color: var(--ink-2);
  border-radius: 99px; padding: 5px 14px;
}
.upgrade { background: var(--terra-soft); border: 1px solid var(--terra-line); }
.upgrade b { color: var(--terra); }
.when { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }

.intro { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; margin-top: 26px; }
.intro-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.intro-card h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 7px;
}
.intro-card p, .intro-card li { color: var(--ink-2); font-size: .94rem; }
.intro-card ul { padding-left: 18px; }
.intro-card li + li { margin-top: 5px; }

.note {
  margin-top: 16px; background: #fdf7e8; border: 1px solid #e8dcbd;
  border-radius: var(--radius); padding: 13px 16px; font-size: .95rem; color: #5e4a14;
}

.section-h { font-size: 1.4rem; font-weight: 650; letter-spacing: -.015em; margin-top: 52px; margin-bottom: 18px; }

/* the step timeline */
.steps { list-style: none; position: relative; }
.step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 18px; position: relative; padding-bottom: 30px; }
.step::before {
  content: ""; position: absolute; left: 18px; top: 40px; bottom: 0; width: 2px; background: var(--line);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::before { display: none; }
.step-num {
  width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.step-body { min-width: 0; padding-top: 5px; }
.step-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.step-body h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.step-text { color: var(--ink-2); margin-top: 5px; max-width: 66ch; }
.step-body > p { margin-top: 10px; }

.where {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 99px; padding: 2px 9px; border: 1px solid var(--line); color: var(--ink-3); background: var(--panel);
}
.where-code { color: var(--terra); border-color: var(--terra-line); background: var(--terra-soft); }




/* prompt cards */
.prompt {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-top: 14px;
}
.prompt-title { font-size: 1rem; font-weight: 650; margin-bottom: 10px; }
.prompt-lead { color: var(--ink-3); font-size: .9rem; margin: -6px 0 10px; }
.prompt.short { padding: 12px 14px; margin-top: 8px; background: var(--paper); }
.prompt.short .prompt-box { font-size: 12.5px; padding: 10px 12px; }
.prompt.short .row { margin-top: 8px; }
.prompt-box.collapsed.mini { max-height: 5.2em; }
.prompt-fields { margin-bottom: 2px; }
.prompt-box {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 14px 16px; position: relative;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; color: #2f2b24;
}
.prompt-box.collapsed { max-height: 8.6em; overflow: hidden; }
.prompt-box.collapsed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4em;
  background: linear-gradient(rgba(242,241,231,0), var(--panel-2));
}
.prompt-box .ph { color: var(--warn); background: #f7edd4; border-radius: 3px; padding: 0 3px; }
.ph.soft { font-style: italic; color: var(--warn); }

/* how to read the plan */
.guide { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.guide summary { cursor: pointer; padding: 13px 18px; font-weight: 650; font-size: .98rem; color: var(--terra); }
.guide[open] summary { border-bottom: 1px solid var(--line-soft); }
.verdicts { list-style: none; padding: 6px 18px 0; }
.verdict { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.verdict:last-child { border-bottom: 0; }
.verdict-body p { font-size: .95rem; color: var(--ink-2); }
.vreply { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; }
.vreply q { font-size: .9rem; color: var(--ink-3); font-style: italic; quotes: "\201C" "\201D"; flex: 1 1 260px; }
.guide-foot { padding: 4px 18px 16px; font-size: .95rem; color: var(--ink-2); }
.vtag {
  display: inline-block; justify-self: start; text-align: center; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  border-radius: 5px; padding: 2px 7px; margin-top: 2px; color: #fff; background: var(--ink-3);
}
@media (max-width: 640px) {
  .verdict { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.ph-filled { color: var(--terra); font-weight: 600; }
.gets {
  margin-top: 14px; font-size: .92rem; color: var(--ink-2);
  border-left: 3px solid var(--terra); padding: 2px 0 2px 12px;
}
.gets b { color: var(--ink); }

/* profile paste-back */
.paste { margin-top: 14px; }
.paste textarea { min-height: 150px; font-family: var(--mono); font-size: 13px; background: var(--panel); }
.profile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-top: 16px; }
.profile .muted { margin: -4px 0 14px; }

/* done-when checklist */
.donewhen .muted { margin: -8px 0 14px; }
.check {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 8px;
  cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit;
  transition: border-color .14s ease;
}
.check:hover { border-color: var(--terra); }
.check.on { border-color: rgba(46,125,84,.4); background: var(--done-soft); }
.box {
  flex: none; width: 21px; height: 21px; border-radius: 6px; margin-top: 1px;
  border: 1.5px solid #c9c6b6; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; font-weight: 700;
}
.check.on .box { background: var(--done); border-color: var(--done); }
.check b { display: block; font-size: .98rem; font-weight: 600; }
.check.on b { color: var(--ink-2); }
.check p { font-size: .88rem; color: var(--ink-2); margin-top: 2px; }
.installed-bar {
  margin-top: 14px; border: 1px solid rgba(46,125,84,.35); background: var(--done-soft);
  border-radius: var(--radius); padding: 14px 18px;
}
.installed-bar p { font-size: .9rem; color: var(--ink-2); }

.stepnav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; }

/* ---------- the rail ---------- */
.rail { position: sticky; top: 76px; padding-top: 40px; }
.rail-home {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--terra);
  background: none; border: 0; cursor: pointer; padding: 0; margin-bottom: 18px;
}
.rail-head {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}
.rail-list { list-style: none; position: relative; }
.rail-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 8px 10px; border-radius: 9px;
  cursor: pointer; text-align: left; width: 100%;
  background: none; border: 0; font: inherit; color: inherit;
}
.rail-item:hover { background: var(--panel-2); }
.rail-item.current { background: var(--terra-soft); }
.rail-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--panel);
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.rail-item.current .rail-num { border-color: var(--terra); color: var(--terra); }
.rail-item.done .rail-num { background: var(--done); border-color: var(--done); color: #fff; }
.rail-text { min-width: 0; }
.rail-name { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.rail-item.current .rail-name { color: var(--terra); }
.rail-sub { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.rail-status { display: block; font-size: 11px; color: var(--terra); font-weight: 600; margin-top: 2px; }
.rail-short { display: none; }
.rail-foot {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.rail-foot b { color: var(--ink-2); }
.rail-bar { height: 4px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin-bottom: 8px; }
.rail-bar i { display: block; height: 100%; background: var(--terra); border-radius: 99px; transition: width .35s ease; }

/* ---------- login ---------- */
.login-wrap { min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 400px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 38px 34px; text-align: center;
}
.login-card .mark { margin: 0 auto 20px; }
.login-card h1 { font-size: 1.45rem; }
.login-sub { color: var(--ink-2); font-size: .95rem; margin: 8px 0 24px; }
.login-card .code-in { text-align: center; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.err { color: var(--red); font-size: 13px; margin-top: 12px; }

/* ---------- admin ---------- */
.adminbar {
  background: var(--terra-soft); border: 1px solid var(--terra-line);
  border-radius: 10px; padding: 11px 16px; margin: 0 0 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px;
}
.clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 20px; }
.ccard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px 19px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .14s ease;
}
.ccard:hover { border-color: var(--terra); }
.ccard h3 { font-size: 1rem; font-weight: 600; }
.ccard .co { color: var(--ink-2); font-size: .88rem; }
.ccard code { font-family: var(--mono); font-size: 12px; color: var(--terra); }

.spinner { padding: 90px 0; text-align: center; color: var(--ink-3); }

/* ---------- tablet and phone ---------- */
@media (max-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail {
    position: static; order: -1; min-width: 0; padding-top: 18px; padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .rail-home { margin-bottom: 12px; }
  .rail-head, .rail-foot, .rail-text { display: none; }
  .rail-list { display: flex; justify-content: space-between; }
  .rail-list::before {
    content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: var(--line);
  }
  .rail-list li { position: relative; z-index: 1; }
  .rail-item { flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; background: none !important; }
  .rail-num { width: 30px; height: 30px; font-size: 13px; background: var(--paper); }
  .rail-item.current .rail-num { box-shadow: 0 0 0 3px var(--terra-soft); background: var(--panel); }
  .rail-short { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); }
  .rail-item.current .rail-short { color: var(--terra); }
  .main { padding-top: 26px; max-width: none; }
  .intro { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .topbar-in { padding: 12px 16px; }
  .brand .sub { display: none; }
  .whoami { display: none; }
  .page { padding: 28px 16px 80px; }
  .layout { padding: 0 16px 80px; }
  .block { margin-top: 44px; }
  .outcomes, .words, .modes, .yb { grid-template-columns: 1fr; }
  .step { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  .step::before { left: 14px; top: 32px; }
    .step-num { width: 30px; height: 30px; font-size: 13px; }
  .step-body { padding-top: 2px; }
  .prompt, .profile { padding: 15px; }
  .pathrow { padding: 13px 14px; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .pathrow .pill { margin-left: 48px; }
  .stepnav .btn { width: 100%; text-align: center; }
}

/* ---------- the 2-minute tour ---------- */
.tour-btn { background: var(--panel); border-color: var(--terra-line); color: var(--terra); }
body.tour-open { overflow: hidden; }
#tourRoot { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tour-back { position: absolute; inset: 0; background: rgba(20, 20, 20, .55); }
.tour {
  position: relative; width: 100%; max-width: 720px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--paper); border-radius: 16px; padding: 18px 22px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.tour-head { display: flex; align-items: center; gap: 10px; }
.tour-head b { font-size: 1.05rem; }
.tour-head .muted { font-size: .85rem; }
.tour-x { margin-left: auto; font: inherit; font-size: 24px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--ink-3); padding: 2px 6px; }
.tour-x:hover { color: var(--ink); }
.tour-bar { display: flex; gap: 4px; margin: 12px 0 14px; }
.tour-bar i { flex: 1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; position: relative; }
.tour-bar i.done { background: var(--terra); }
.tour-bar i.now::after { content: ""; position: absolute; inset: 0; background: var(--terra); width: 100%; }
.tour-bar i.now.run::after { animation: tourfill var(--d) linear forwards; }
@keyframes tourfill { from { width: 0; } to { width: 100%; } }
.tour-cap { margin-top: 14px; }
.tour-cap h3 { font-size: 1.2rem; font-weight: 650; }
.tour-cap p { color: var(--ink-2); margin-top: 4px; }
.tour-ctrl { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tour-ctrl .btn.primary { margin-left: auto; }
.tour-note { font-size: .82rem; color: var(--ink-3); margin-top: 12px; }

/* the sketch: a plain drawing, no logos, labels from the official guide */
.sk {
  background: #fff; border: 1.5px solid #cfccbf; border-radius: 12px; overflow: hidden;
  font-size: 13px; color: #3a3a3a; display: flex; flex-direction: column; min-height: 300px;
}
.sk-top { position: relative; display: flex; align-items: center; justify-content: center; height: 42px; border-bottom: 1px solid #e6e3d8; background: #faf9f5; }
.sk-dots { position: absolute; left: 12px; display: flex; gap: 5px; }
.sk-dots i { width: 9px; height: 9px; border-radius: 50%; background: #dcd9ce; display: block; }
.sk-tabs { display: flex; gap: 2px; background: #efede6; border-radius: 8px; padding: 3px; }
.sk-tabs b { font-weight: 600; font-size: 12.5px; padding: 3px 12px; border-radius: 6px; color: #777; }
.sk-tabs b.on { background: #fff; color: #222; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sk-body { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.sk-lines { display: grid; gap: 8px; margin-top: 6px; }
.sk-lines i { display: block; height: 8px; border-radius: 4px; background: #f0eee7; }
.sk-lines i:nth-child(1) { width: 70%; } .sk-lines i:nth-child(2) { width: 85%; } .sk-lines i:nth-child(3) { width: 50%; }
.sk-card { border: 1px solid #e3e0d5; border-radius: 10px; padding: 12px 14px; }
.sk-card-h { font-weight: 600; margin-bottom: 8px; }
.sk-diff { font-family: var(--mono); font-size: 11.5px; display: grid; gap: 2px; }
.sk-diff i { font-style: normal; color: #2e7d54; background: #eef7f1; padding: 1px 6px; border-radius: 3px; }
.sk-btns { display: inline-flex; gap: 6px; margin-top: 10px; border-radius: 8px; padding: 2px; }
.sk-b { border: 1px solid #d6d3c8; border-radius: 6px; padding: 3px 12px; font-weight: 600; font-size: 12px; background: #fff; }
.sk-b.ok { background: #2f2f2f; border-color: #2f2f2f; color: #fff; }
.sk-msg { background: #f5f4ef; border-radius: 10px; padding: 9px 12px; line-height: 1.5; border: 1.5px solid transparent; }
.sk-msg.me { align-self: flex-end; background: #ecebe4; max-width: 80%; }
.sk-prompt { border-top: 1px solid #e6e3d8; padding: 10px 12px 12px; background: #faf9f5; }
.sk-box {
  position: relative; background: #fff; border: 1.5px solid #dcd9ce; border-radius: 10px; padding: 10px 12px; min-height: 42px;
  font-family: var(--mono); font-size: 12px; color: #333; white-space: nowrap; text-overflow: ellipsis;
}
.sk-ph { font-family: var(--font); color: #aaa; }
.sk-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: nowrap; }
.sk-sp { flex: 1; }
.sk-chip { position: relative; border: 1.5px solid #dcd9ce; border-radius: 7px; padding: 2px 9px; font-size: 12px; font-weight: 600; background: #fff; white-space: nowrap; }
.sk-send { width: 26px; height: 26px; border-radius: 50%; background: #2f2f2f; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.sk-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 2; min-width: 130px;
  background: #fff; border: 1px solid #d6d3c8; border-radius: 9px; padding: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.12);
  display: grid; gap: 1px; font-family: var(--font);
}
.sk-menu-modes { left: auto; right: 0; }
.sk-menu i { font-style: normal; font-weight: 500; padding: 4px 9px; border-radius: 6px; color: #444; }
.sk-menu i.on { background: var(--terra); color: #fff; }
.hl { border-color: var(--terra) !important; box-shadow: 0 0 0 3px rgba(46,88,85,.25); animation: skpulse 1.6s ease-in-out infinite; }
.sk-tabs.hl { border: 1.5px solid var(--terra); }
.sk-tabs b.hl { color: var(--terra); background: #fff; }
@keyframes skpulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(46,88,85,.25); } 50% { box-shadow: 0 0 0 7px rgba(46,88,85,.12); } }
@media (prefers-reduced-motion: reduce) { .hl { animation: none; } .tour-bar i.now.run::after { animation: none; } }
.sk-program { padding: 0; }
.sk-prog-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #e6e3d8; font-weight: 600; background: var(--paper); }
.sk-prog-b { padding: 18px; }
.sk-prog-t { font-weight: 650; font-size: 15px; margin-bottom: 10px; color: var(--ink); }
.sk-check { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; margin-bottom: 8px; font-weight: 600; }
.sk-check span { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #c9c6b6; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.sk-check.hl span { background: var(--done); border-color: var(--done); }
@media (max-width: 640px) {
  .tour { padding: 14px 14px 12px; }
  .sk { min-height: 260px; font-size: 12px; }
  .sk-chip { padding: 2px 6px; font-size: 11px; }
  .tour-ctrl .btn { flex: 1; text-align: center; }
  .tour-ctrl .btn.primary { margin-left: 0; }
}

/* ---------- the build flow ---------- */
.hero-links { margin-top: 14px; font-size: .92rem; color: var(--ink-3); }
.linkbtn { font: inherit; background: none; border: 0; padding: 0; color: var(--terra); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.yourbuild { background: var(--panel); border: 1px solid var(--terra-line); border-radius: 14px; padding: 20px 22px; }
.yb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.yb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 14px; }
.yb dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.yb dd { margin: 2px 0 0; color: var(--ink); font-size: .95rem; }
.builds [hidden] { display: none; }
.builds h3 { margin: 22px 0 8px; font-size: 1rem; }
.builds .login-form { max-width: 460px; margin-top: 12px; }
.build-msg { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--terra-line); }
.pastbuilds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pastbuild { border: 1px solid var(--terra-line); border-radius: 12px; padding: 12px 16px; background: var(--panel); }
.pastbuild summary { cursor: pointer; overflow-wrap: anywhere; }
.pastbuild summary .muted { display: block; margin-top: 2px; }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 16px; }
.flow-step { flex: 1 1 150px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.flow-step b { font-family: var(--mono); font-weight: 500; font-size: .9rem; color: var(--terra); }
.flow-step span { font-size: .9rem; color: var(--ink-2); }
.flow-step small { font-size: .78rem; color: var(--ink-3); font-weight: 600; }
.flow-arrow { align-self: center; color: var(--ink-3); font-weight: 700; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.mode { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.mode.pick { border-color: var(--terra-line); box-shadow: inset 0 0 0 1px var(--terra-line); }
.mode h3 { font-size: 1.02rem; font-weight: 650; }
.mode p { color: var(--ink-2); font-size: .92rem; margin-top: 3px; }
.mode .mode-use { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.mode.pick .mode-use { color: var(--done); }
.group-h { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 24px 0 -8px; }
.dolist2 { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.dolist2 li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; }
.dolist2 li.star { border-color: var(--terra-line); box-shadow: inset 0 0 0 1px var(--terra-line); }
.dolist2 b { display: block; }
.dolist2 p { color: var(--ink-2); font-size: .93rem; margin-top: 2px; }
.mk { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.mk.ok { color: var(--done); background: var(--done-soft); }
.mk.no { color: var(--red); background: rgba(224, 67, 62, .09); }
.dont-h { margin-top: 36px; }
.where-mode { color: var(--purple); border-color: rgba(88,50,209,.25); background: var(--purple-soft); }
.alt { margin-top: 14px; border: 1px dashed var(--terra-line); border-radius: var(--radius); padding: 14px 16px; background: var(--terra-soft); }
.alt-h { font-weight: 650; }
.alt > p { color: var(--ink-2); font-size: .93rem; margin-top: 3px; }
.alt .prompt { background: var(--panel); }
.vtag.v-0 { background: var(--done); }
.vtag.v-1 { background: #9a6b12; }
.vtag.v-2 { background: var(--purple); }
.verdicts { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; }
.verdict { grid-template-columns: 150px minmax(0, 1fr); }
.sk-plus { font-weight: 700; padding: 2px 8px; }
.sk-att { display: inline-block; font-family: var(--font); font-size: 11.5px; background: #eef3f2; border: 1px solid #cfe0dd; border-radius: 6px; padding: 1px 7px; color: #2e5855; }
.sk-diffmark { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 11.5px; border: 1.5px solid #cfccbf; border-radius: 6px; padding: 0 6px; }
.sk-diffmark { color: #2e7d54; }
@media (max-width: 640px) {
  .modes, .yb { grid-template-columns: minmax(0, 1fr); }
  .yourbuild { padding: 16px; }
  .flow-arrow { display: none; }
  .verdict { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- round 3: the guide page, typed replies, the sidebar sketch ---------- */
.nowrap { white-space: nowrap; }
.rail-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; }
.rail-links .rail-home { margin-bottom: 0; }
@media (max-width: 980px) { .rail-links { margin-bottom: 12px; } }
.guide-hero { margin-top: 18px; }
.guidecard .row { margin-top: 16px; }
.vtag.v-look { background: var(--terra); }
.sk-split { flex: 1; display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.sk-main { display: flex; flex-direction: column; min-width: 0; }
.sk-side { border-right: 1px solid #e6e3d8; background: #faf9f5; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.sk-new { border: 1.5px solid #dcd9ce; border-radius: 7px; padding: 4px 9px; font-weight: 600; font-size: 12px; background: #fff; white-space: nowrap; }
.sk-side-h { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #999; margin-top: 8px; }
.sk-side i { font-style: normal; font-size: 12px; color: #666; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .sk-split { grid-template-columns: 112px minmax(0, 1fr); }
  /* with the sidebar showing there is only room for the folder */
  .sk-split .sk-env, .sk-split .sk-modechip, .sk-split .sk-sp { display: none; }
  .sk-split .sk-send { margin-left: auto; }
  .sk-new { padding: 3px 6px; font-size: 11px; }
  /* the status pill gets its own line under the text instead of squeezing it */
  .pathtext { flex-basis: calc(100% - 60px); }
  .pathrow .pill { order: 3; }
}

/* ---------- the office story ---------- */
.office { display: block; width: 100%; height: auto; border-radius: 12px; border: 1.5px solid #cfccbf; background: #f1ede1; }
.office text { font-family: var(--font); }
.o-sign { font-size: 11px; font-weight: 800; letter-spacing: .1em; fill: #fff; }
.o-card { font-size: 8px; font-weight: 700; fill: #6b6558; }
.o-label { font-family: var(--mono) !important; font-size: 10.5px; font-weight: 600; fill: #163300; }
.o-col { font-size: 9px; font-weight: 700; fill: #8a8578; letter-spacing: .04em; }
.o-item { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; fill: #5a4410; }
.o-light { fill: #fff; }
.o-small { font-size: 8.5px; letter-spacing: .03em; }
.o-plate { font-family: var(--mono) !important; font-size: 10px; font-weight: 600; fill: #5a4410; }
.o-mono { font-family: var(--mono) !important; letter-spacing: 0; font-weight: 600; font-size: 10.5px; }
.o-say-t { font-size: 12px; font-weight: 600; fill: #141414; }
.o-stamp-t { font-size: 18px; font-weight: 800; letter-spacing: .08em; fill: #157a3c; }

.o-drop { animation: o-drop .7s cubic-bezier(.2, .8, .3, 1.15) var(--d, 0s) both; }
.o-pop, .o-stamp, .o-ring { transform-box: fill-box; transform-origin: center; }
.o-pop { animation: o-pop .5s cubic-bezier(.2, .8, .3, 1.4) var(--d, 0s) both; }
.o-walk { animation: o-walk 1.3s ease-out var(--d, 0s) both; }
.o-slidein { animation: o-slidein .8s ease-in-out var(--d, 0s) both; }
.o-out { animation: o-out .25s ease var(--d, 0s) both; }
.o-say { transform-box: fill-box; transform-origin: 10% 100%; animation: o-say .35s ease-out var(--d, 0s) both; }
.o-temp, .o-say.o-temp { animation: o-temp 2.4s ease var(--d, 0s) both; }
.o-ring { transform-origin: 50% 100%; animation: o-ring .9s ease-in-out var(--d, 0s) 1 both; animation-iteration-count: var(--n, 1); }
.o-spin { transform-box: view-box; animation: o-spin 1.2s ease-in-out var(--d, 0s) both; }
.o-stamp { animation: o-stamp .45s cubic-bezier(.2, .8, .3, 1.2) var(--d, 0s) both; }
@keyframes o-drop { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes o-pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes o-walk { from { transform: translateX(var(--dx)); opacity: 0; } 20% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes o-slidein { 0% { transform: translateX(var(--dx)); opacity: 0; } 4% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes o-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes o-say { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes o-temp { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes o-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 45% { transform: rotate(13deg); } 70% { transform: rotate(-7deg); } }
@keyframes o-spin { from { transform: rotate(-720deg); } to { transform: none; } }
@keyframes o-stamp { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
/* waits until it is on screen; a still scene or reduced motion shows the end */
.office:not(.play) * { animation-play-state: paused !important; }
.office.still * { animation: none !important; }
.office.still .o-temp, .office.still .o-out { display: none; }
@media (prefers-reduced-motion: reduce) {
  .office * { animation: none !important; }
  .office .o-temp, .office .o-out { display: none; }
}

.office-card { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 22px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.office-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); }
.office-line { font-size: 1.05rem; font-weight: 600; margin-top: 4px; }
.cast { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cast li { font-size: 13px; background: var(--terra-soft); border: 1px solid var(--terra-line); color: var(--terra); border-radius: 99px; padding: 3px 10px; font-weight: 600; }
.office-was { font-size: .88rem; color: var(--ink-3); margin-top: 10px; }
.office-card .row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tour-cap .cast { margin-top: 10px; }
.home-office { margin-top: 18px; }
@media (max-width: 980px) {
  .office-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .office-card { padding: 12px; }
  .cast li { font-size: 12.5px; }
}
.tour-story .tour-stage .office { max-width: 560px; margin: 0 auto; }

/* ---------- round 4 ---------- */
.prompt-hint { font-size: .85rem; color: var(--ink-3); margin: 8px 0 2px; }
.reply-hint { font-size: .85rem; color: var(--ink-3); padding: 2px 0 12px; }
.hero-note { margin-top: 12px; max-width: 62ch; font-size: .95rem; color: var(--ink-2); border-left: 3px solid var(--terra-line); padding-left: 12px; }

/* ---------- signing in, and your account ---------- */
.login-program { color: var(--ink-3); font-size: .9rem; margin-top: 4px; }
.login-h { font-size: 1.2rem; font-weight: 650; margin-top: 22px; }
.login-card .login-sub { margin: 6px 0 16px; }
.login-form { display: grid; gap: 6px; text-align: left; }
.login-form label { font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.login-form .btn { margin-top: 12px; width: 100%; }
.login-alt { margin-top: 16px; font-size: .92rem; }
.login-fine { margin-top: 10px; font-size: .82rem; color: var(--ink-3); }
.login-msg { background: var(--terra-soft); border: 1px solid var(--terra-line); color: var(--terra); border-radius: 8px; padding: 9px 12px; font-size: .9rem; margin-bottom: 12px; text-align: left; }
.login-card .err { margin: 0 0 12px; text-align: left; }
.ccard-login { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.ccard-login.on { color: var(--done); font-weight: 600; }
/* What they are building: the line the coach actually scans the roster for. */
.ccard-build {
  margin-top: 10px; font-size: .9rem; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ccard-meta { margin-top: 8px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.adminbar .row { display: flex; gap: 8px; flex-wrap: wrap; }
.account .acct { max-width: 560px; }
.danger { margin-top: 48px; max-width: 560px; border: 1px solid rgba(224, 67, 62, .35); border-radius: var(--radius); padding: 18px 20px; background: var(--panel); }
.danger h2 { font-size: 1.1rem; font-weight: 650; color: var(--red); }
.danger p { color: var(--ink-2); font-size: .93rem; margin: 6px 0 10px; }
.btn.danger-btn { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- the iPhone app ---------- */
.offline-bar { background: #fff4c9; color: #5a4410; font-size: .88rem; padding: 8px 16px; text-align: center; border-bottom: 1px solid #e8d48a; }
.reminder { margin-top: 18px; background: var(--panel); border: 1px solid var(--terra-line); border-radius: var(--radius); padding: 14px 16px; }
.reminder p { color: var(--ink-2); font-size: .92rem; margin: 4px 0 10px; }
.reminder .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reminder input[type=datetime-local] { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
/* keep clear of the notch and the home bar */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.topbar { padding-top: env(safe-area-inset-top); }
.page, .layout { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
#tourRoot { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ---------- fill in with AI ---------- */
.btn.ai-btn { background: var(--purple-soft); border-color: rgba(88, 50, 209, .3); color: var(--purple); }
.btn.ai-btn:disabled { opacity: .7; cursor: progress; }
.ai-msg { margin: -14px 0 22px; padding: 10px 14px; border-radius: 10px; font-size: .92rem; background: #fdecec; border: 1px solid rgba(224, 67, 62, .3); color: #8a2320; }
.ai-msg.ok { background: var(--purple-soft); border-color: rgba(88, 50, 209, .25); color: var(--purple); }

/* ---------- Lesson 7: finished builds, backwards ---------- */
.ex-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.ex-card { display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: inherit; text-decoration: none; transition: border-color .14s ease, transform .14s ease; }
.ex-card:hover { border-color: var(--terra); transform: translateY(-1px); }
.ex-card b { font-size: 1.05rem; }
.ex-card p { color: var(--ink-2); font-size: .92rem; margin-top: 4px; }
.ex-kind { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); background: var(--purple-soft); border-radius: 99px; padding: 2px 9px; }
.ex-biz { font-size: .9rem; color: var(--ink-3); }
.ex-open { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--terra); font-size: .92rem; }
.page.ex-page { max-width: 1240px; }
.ex-head { margin: 18px 0 20px; }
.ex-head h1 { margin-top: 8px; }
.ex-head .ex-biz { margin-top: 4px; }
.ex-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ex-left { position: sticky; top: 84px; }
.ex-tabs, .ex-order { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-tab { font: inherit; font-size: 13px; font-weight: 600; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; cursor: pointer; color: var(--ink-2); }
.ex-tab.on { background: var(--terra); border-color: var(--terra); color: #fff; }
.ex-pane { margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ex-frame { display: block; width: 100%; height: 620px; border: 0; background: #fff; }
.ex-filetext { margin: 0; padding: 16px 18px; max-height: 620px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ex-openfull { margin-top: 8px; font-size: .9rem; color: var(--ink-3); }
.ex-right-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ex-right-h h2 { font-size: 1.25rem; }
.ex-session { border-left: 3px solid var(--terra-line); padding-left: 14px; margin-bottom: 22px; }
.ex-session-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 8px; }
.ex-session-h b { color: var(--terra); }
.ex-session-h span { font-size: 12px; color: var(--ink-3); font-weight: 600; letter-spacing: .03em; }
.ex-msg { border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--line); }
.ex-msg.ex-you { background: var(--purple-soft); border-color: rgba(88, 50, 209, .18); }
.ex-msg.ex-claude { background: var(--panel); }
.ex-who { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.ex-you .ex-who { color: var(--purple); }
.ex-text { white-space: pre-wrap; word-break: break-word; font-size: .92rem; color: var(--ink); }
.ex-you .ex-text { font-family: var(--mono); font-size: 12.5px; }
.ex-text code { font-family: var(--mono); font-size: .88em; background: var(--panel-2); border-radius: 4px; padding: 0 4px; }
.ex-text.ex-md { white-space: normal; }
.ex-md p { margin: 0 0 .6em; }
.ex-md p:last-child { margin-bottom: 0; }
.ex-md .ex-h { font-weight: 700; margin-top: .9em; }
.ex-md hr { border: 0; border-top: 1px solid var(--line); margin: .8em 0; }
.ex-code { font-family: var(--mono); font-size: 12px; background: var(--panel-2); border-radius: 8px; padding: 8px 10px; margin: 0 0 .6em; white-space: pre; overflow-x: auto; }
.ex-tablewrap { overflow-x: auto; margin: 0 0 .6em; }
.ex-table { border-collapse: collapse; font-size: .85rem; min-width: 100%; }
.ex-table th, .ex-table td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.ex-table th { background: var(--panel-2); font-weight: 700; }
.ex-text.folded { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.ex-more { font-size: .88rem; margin-top: 4px; }
.ex-made { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ex-file { font: inherit; font-family: var(--mono); font-size: 12px; background: var(--terra-soft); border: 1px solid var(--terra-line); color: var(--terra); border-radius: 6px; padding: 1px 7px; cursor: pointer; }
@media (max-width: 980px) {
  .ex-grid { grid-template-columns: minmax(0, 1fr); }
  .ex-left { position: static; }
  .ex-frame { height: 480px; }
}

/* The Cheat Sheet */
.cheat-credit { font-size: .92rem; color: var(--ink-3); margin-top: 10px; }
.cheat-credit a { color: var(--terra); }
.cheat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.cheats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 760px; }
.cheat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cheat h3 { font-size: 1.08rem; line-height: 1.35; }
.cheat p { font-size: .95rem; color: var(--ink-2); }
.cheat .prompt.short { margin-top: 2px; }
.cheat .prompt-box { max-height: 12em; overflow: auto; }
.cheat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cheat-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--terra); background: var(--terra-soft); border-radius: 99px; padding: 2px 9px; }
.cheat-tag.setup { color: var(--warn); background: #f7edd4; }
.cheat-tag.builtin { color: var(--ok, #2f6b3a); background: rgba(47, 107, 58, .09); }
.cheat-step { border-top: 1px solid var(--line-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cheat-step h4 { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.cheat-steps { padding-left: 1.3em; display: grid; gap: 4px; font-size: .93rem; color: var(--ink-2); }
.cheat-other { font-size: .88rem !important; color: var(--ink-3) !important; }
.cheat-other b { color: var(--ink-2); }
.cheat-why b, .cheat-care b { color: var(--ink); }
.cheat-care { font-size: .9rem !important; border-left: 3px solid var(--warn); padding-left: 10px; }
.cheat-links { padding-top: 4px; font-size: .9rem; }
.cheat-links a { color: var(--terra); }
.cheat-foot { margin-top: 22px; font-size: .9rem; color: var(--ink-3); }
.cheat-peek { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.cheat-peek li { font-size: .95rem; color: var(--ink-2); }
.cheat-peek b { color: var(--ink); }
.cheatcard .row { margin-top: 16px; }

/* =====================================================================
   2026-09 refresh: calmer surfaces, clearer hierarchy, instant feedback.
   Principles: depth over borders, type that tightens as it grows,
   feedback on press, one obvious primary action per view.
   ===================================================================== */
:root {
  --paper: #f7f6f1;
  --panel: #ffffff;
  --line: #e6e3d8;
  --line-soft: #eeece4;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, .04), 0 1px 1px rgba(20, 20, 20, .03);
  --shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 6px 20px -6px rgba(20, 20, 20, .08);
  --shadow-lg: 0 2px 4px rgba(20, 20, 20, .04), 0 18px 40px -12px rgba(20, 20, 20, .14);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(88, 50, 209, .05), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(46, 88, 85, .05), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  font-feature-settings: "ss01", "cv11";
}

/* type: tighter as it grows, looser as it shrinks */
h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }
.block h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); font-weight: 680; letter-spacing: -.022em; line-height: 1.2; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.18rem); line-height: 1.6; color: var(--ink-2); }
.eyebrow { font-size: 11.5px; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--purple); box-shadow: 9px 0 0 var(--red); margin-right: 9px; }

/* the bar at the top: a translucent layer the page scrolls under */
.topbar {
  background: rgba(247, 246, 241, .72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(20, 20, 20, .06);
}
.topbar-in { padding: 12px 24px; }
.topnav { display: flex; gap: 4px; background: rgba(20, 20, 20, .045); padding: 4px; border-radius: 99px; }
.topnav a {
  position: relative; text-decoration: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 99px; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.topnav a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.topnav a.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }
.navdot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper); }

/* buttons: pills that answer the press straight away */
.btn {
  border-radius: 99px; padding: 9px 18px; background: var(--panel); border-color: var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .1s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { border-color: rgba(46, 88, 85, .45); color: var(--terra); box-shadow: var(--shadow); }
.btn:active { transform: scale(.97); box-shadow: var(--shadow-sm); }
.btn.primary {
  background: linear-gradient(180deg, #356663, var(--terra)); border-color: var(--terra);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -6px rgba(46, 88, 85, .55);
}
.btn.primary:hover { filter: none; background: linear-gradient(180deg, #3b706c, #325f5b); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 10px 22px -8px rgba(46, 88, 85, .6); }
.btn.big { padding: 14px 24px; border-radius: 99px; }
.btn.small { padding: 6px 13px; }
.btn.ghost { box-shadow: none; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 8px; }
.btn:focus-visible, .topnav a:focus-visible, .ql:focus-visible { outline-offset: 3px; border-radius: 99px; }
.linkbtn { text-underline-offset: 3px; }

/* surfaces: white, soft depth, fewer hard lines */
.prompt, .office-card, .cheat, .ex-card, .profile, .guidecard, .cheatcard, .yourbuild,
.mode, .card, .login-card, .donewhen, .notebox, .ex-left .ex-pane, .ex-right .ex-timeline .ex-msg.ex-claude {
  border-color: var(--line-soft);
}
.prompt, .office-card, .cheat, .ex-card, .login-card, .mode { background: var(--panel); box-shadow: var(--shadow); border-radius: var(--radius); }
.mode { padding: 16px 18px; }
.mode.pick { border-color: rgba(46, 125, 84, .35); box-shadow: inset 0 0 0 1px rgba(46, 125, 84, .35), var(--shadow); }
.cheat { transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.cheat:hover { box-shadow: var(--shadow-lg); }
.prompt-box { border-radius: 12px; background: #f4f3ec; border-color: var(--line-soft); }
.prompt.short { background: #fbfaf6; box-shadow: none; }

/* home: a hero with room to breathe, then three clear doors */
.page { padding-top: 56px; }
.hero h1 { max-width: 20ch; }
.hero-note { border-left: 0; padding: 12px 16px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line-soft); border-radius: 12px; font-size: .93rem; }
.quicklinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.ql {
  font: inherit; text-align: left; cursor: pointer; color: var(--ink);
  background: rgba(255, 255, 255, .78); border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform .1s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.ql:hover { box-shadow: var(--shadow); border-color: var(--terra-line); }
.ql:active { transform: scale(.98); }
.ql-ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; color: var(--terra); background: var(--terra-soft); }
.ql b { font-size: .95rem; font-weight: 650; }
.ql span:last-child { font-size: .84rem; color: var(--ink-3); line-height: 1.35; }

/* lesson rail: a quiet glass column */
@media (min-width: 981px) {
  .rail { background: rgba(255, 255, 255, .55); border: 1px solid var(--line-soft); border-radius: 18px; padding: 18px 16px; margin-top: 40px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.rail-links { display: none; }

/* the Cheat Sheet */
.cheat-hero h1 { max-width: 16ch; }
.cheat-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cheat-meta span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: rgba(255, 255, 255, .75); border: 1px solid var(--line-soft); border-radius: 99px; padding: 5px 12px; }
.cheat-live { display: inline-flex; align-items: center; gap: 7px; color: var(--done) !important; }
.cheat-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--done); box-shadow: 0 0 0 3px var(--done-soft); animation: livepulse 2.4s ease-in-out infinite; }
@keyframes livepulse { 50% { box-shadow: 0 0 0 6px rgba(46, 125, 84, 0); } }
.cheat-tools { margin: 26px 0 8px; display: grid; gap: 10px; max-width: 760px; }
.cheat-search { width: 100%; font: inherit; font-size: 15px; padding: 11px 16px 11px 40px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b6558' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 15px 50%; box-shadow: var(--shadow-sm); }
.cheat-search:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 4px var(--terra-soft); }
.cheat-filter { margin: 0; }
.cheat-filter .ex-tab span { opacity: .6; font-weight: 600; margin-left: 2px; }
.cheat-sec { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }
.cheat-sec span { font-size: 12px; color: #fff; background: var(--red); border-radius: 99px; padding: 1px 8px; }
.cheat { padding: 20px 22px; gap: 10px; }
.cheat h3 { font-size: 1.14rem; letter-spacing: -.012em; }
.cheat-what { color: var(--ink-2); }
.cheat-tag.new { color: #fff; background: var(--red); }
.cheat-stars { font-size: 12px; font-weight: 700; color: var(--ink-2); background: #f4f3ec; border-radius: 99px; padding: 2px 9px; }
.cheat-toggle {
  align-self: flex-start; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--terra); cursor: pointer;
  background: var(--terra-soft); border: 0; border-radius: 99px; padding: 7px 14px; display: inline-flex; gap: 8px; align-items: center;
  transition: transform .1s var(--ease), background .18s var(--ease);
}
.cheat-toggle:hover { background: rgba(46, 88, 85, .14); }
.cheat-toggle:active { transform: scale(.97); }
.cheat.open { box-shadow: var(--shadow-lg); }
.cheat-body { display: flex; flex-direction: column; gap: 10px; animation: cheatin .28s var(--ease); }
@keyframes cheatin { from { opacity: 0; transform: translateY(-4px); } }
.cheat-empty { color: var(--ink-3); padding: 24px 4px; }
.cheatcard { background: linear-gradient(135deg, rgba(88, 50, 209, .06), rgba(46, 88, 85, .06)); border: 1px solid var(--line-soft); border-radius: 20px; padding: 26px 26px 24px; }
.cheat-peek li { display: flex; gap: 8px; align-items: center; }

@media (max-width: 1180px) {
  .topbar-in { flex-wrap: wrap; row-gap: 10px; }
  .topnav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { flex: 1 0 auto; text-align: center; }
}
@media (max-width: 720px) {
  .quicklinks { grid-template-columns: minmax(0, 1fr); }
  .cheat-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px 2px; }
  .cheat-filter::-webkit-scrollbar { display: none; }
  .cheat-filter .ex-tab { flex: none; }
  .page { padding-top: 34px; }
  .cheat-tools { margin: 20px 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .ql, .cheat, .cheat-toggle, .topnav a { transition: none; }
  .btn:active, .ql:active, .cheat-toggle:active { transform: none; }
  .cheat-body { animation: none; }
  .cheat-live i { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .cheat-tools, .rail { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Cheat Sheet tags */
.cheat-tagrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cheat-tagrow-h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.cheat-tagrow a, .cheat-hashtags a {
  font-size: 12.5px; font-weight: 600; color: var(--purple); text-decoration: none;
  background: var(--purple-soft); border-radius: 99px; padding: 3px 10px; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), transform .1s var(--ease);
}
.cheat-tagrow a span { opacity: .6; margin-left: 2px; }
.cheat-tagrow a:hover, .cheat-hashtags a:hover { background: rgba(88, 50, 209, .15); }
.cheat-tagrow a:active, .cheat-hashtags a:active { transform: scale(.96); }
.cheat-tagrow a.on, .cheat-hashtags a.on { background: var(--purple); color: #fff; }
.cheat-hashtags { display: flex; flex-wrap: wrap; gap: 6px; }
.cheat-hashtags a { font-size: 12px; padding: 2px 9px; }
.cheat-sec b { color: var(--purple); }
.cheat-clear { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--terra); }
@media (max-width: 720px) {
  .cheat-tagrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px 2px; }
  .cheat-tagrow::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cheat-tagrow a, .cheat-hashtags a { transition: none; } .cheat-tagrow a:active, .cheat-hashtags a:active { transform: none; } }

/* ---------- voice typing: the Speak button under a box ---------- */
.voice-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; min-height: 32px; }
.voice-msg { flex: 1; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.mic {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: transform .12s var(--ease, ease), background .15s, color .15s, border-color .15s;
}
.mic svg { color: var(--purple); }
.mic:hover { border-color: var(--purple); }
.mic:active { transform: scale(.97); }
.mic.on { background: var(--red); border-color: var(--red); color: #fff; }
.mic.on svg { color: #fff; animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .mic.on svg { animation: none; } }

/* ---------- part 2: after you build ---------- */
.flow.flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow-grid .flow-step b { overflow-wrap: anywhere; }
@media (max-width: 700px) { .flow.flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topnav .nav-short { display: none; }
@media (max-width: 800px) {
  .topnav .nav-long { display: none; }
  .topnav .nav-short { display: inline; }
}
@media (max-width: 560px) {
  .topnav a { padding-left: 10px; padding-right: 10px; }
}
.login-legal { margin-top: 18px; font-size: .85rem; }
.login-legal a { color: var(--ink-3); }

/* ---------- round 5 review fixes ---------- */
/* Plan and Accept edits look different, so switching modes is hard to miss. */
.where-mode.mode-plan { color: #7a4d00; border-color: rgba(176, 116, 0, .35); background: #fff3d6; }
.where-mode.mode-edits { color: #1f5b3f; border-color: rgba(31, 91, 63, .3); background: #e4f2ea; }
/* Small labels a little bigger, replies in plain dark type. */
.where { font-size: 12px; }
.pathlabel { font-size: 12px; }
.vreply q { color: var(--ink-2); font-style: normal; }
/* Skip to the steps */
.chips .jump { margin-left: auto; }
/* Stuck? */
.stuck { margin: 26px 0 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 18px; }
.stuck summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style-position: outside; }
.stuck[open] summary { border-bottom: 1px solid var(--line-soft, var(--line)); margin-bottom: 10px; }
.stuck-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 14px; }
.stuck-item b { display: block; }
.stuck-item p { margin: 4px 0 0; color: var(--ink-2); }
.stuck-coach { margin: 6px 0 14px; font-weight: 600; }
/* Part 2: what you need */
.needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.needs div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.needs dt { font-weight: 700; }
.needs dd { margin: 2px 0 0; color: var(--ink-2); }
@media (max-width: 700px) { .needs { grid-template-columns: minmax(0, 1fr); } .chips .jump { margin-left: 0; } }
.cheat-midbuild { margin-top: 12px; }
#steps-h { scroll-margin-top: 96px; }
@media (max-width: 1180px) { #steps-h { scroll-margin-top: 140px; } }

/* ---------- round 6 review fixes ---------- */
/* Where you do it: bigger, with an icon and a colour per place. */
.where { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 10px; }
.where i { font-style: normal; font-size: 13px; line-height: 1; }
.where-code { color: var(--terra); border-color: var(--terra-line); background: var(--terra-soft); }
.where-here { color: #1d4ed8; border-color: rgba(29, 78, 216, .28); background: #eaf0ff; }
.where-you { color: #3f3a33; border-color: #d9d3c4; background: #f1ede2; }
.where-mode.mode-switch { box-shadow: 0 0 0 3px rgba(176, 116, 0, .16); }
.where-mode.mode-switch.mode-edits { box-shadow: 0 0 0 3px rgba(31, 91, 63, .14); }
/* Lesson header: shorter, so step 1 is on the first screen. */
.intro.intro-compact { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
.intro-more { margin-top: 10px; }
.intro-more summary { cursor: pointer; font-weight: 600; color: var(--terra); font-size: .93rem; }
.intro-more h4 { margin-top: 12px; }
.office-card { padding-top: 14px; padding-bottom: 14px; }
.office-card .office-stage svg { max-height: 230px; }
/* Help looks like help: tinted, with an icon. */
.stuck { background: #fff8e8; border-color: #f0dfb4; }
.stuck summary { display: flex; align-items: center; gap: 10px; list-style: none; }
.stuck summary::-webkit-details-marker { display: none; }
.stuck summary::after { content: '+'; margin-left: auto; font-size: 1.2rem; color: var(--ink-3); }
.stuck[open] summary::after { content: '\2212'; }
.stuck-ic { width: 26px; height: 26px; border-radius: 50%; background: #b07400; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.hero-note, .when { background: #f3efe3; border: 0; border-left: 3px solid var(--terra-line); border-radius: 10px; }
/* Pick one */
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.choice-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm, none); }
.choice-card b { display: block; margin: 4px 0 6px; }
.choice-card p { font-size: .95rem; color: var(--ink-2); margin: 0 0 10px; }
.choice-or { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 760px) { .choice { grid-template-columns: minmax(0, 1fr); } }
/* Navigation: Next leads; on a phone it comes first. */
@media (max-width: 720px) { .stepnav { flex-direction: column-reverse; } }
.rail-bar { height: 6px; background: #e3dfd2; }
/* Easier to tap on touch screens. */
@media (pointer: coarse) { .btn.small { min-height: 40px; } }
.vreply { align-items: flex-start; }
/* Scene on lesson pages: smaller, so the steps start sooner. The full story keeps every detail. */
.office-card .office-was { display: none; }
.office-card .office-stage svg { max-height: 200px; }
@media (max-width: 720px) {
  .office-card .cast { display: none; }
  .office-card .office-stage svg { max-height: 160px; }
  .office-card .office-line { font-size: 1rem; }
  .chips .when { font-size: .86rem; }
}
.office-card .office-stage svg { max-height: 170px; }
@media (max-width: 720px) {
  .office-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px 12px; align-items: center; }
  .office-card .office-stage svg { max-height: 120px; }
  .office-card .office-eyebrow { font-size: 11px; }
  .office-card .office-line { font-size: .92rem; margin-top: 2px; }
  .office-card .row { margin-top: 8px; }
  .office-card .row [data-replay] { display: none; }
}

/* ---------- round 7 review fixes ---------- */
.vtag { font-size: 12.5px; padding: 3px 9px; letter-spacing: .03em; }
.box { border-color: #a8a192; border-width: 2px; }
.outcomes li::before { content: '\2192'; background: var(--terra-soft); color: var(--terra); }
.btn.danger-btn { background: #fff; border-color: var(--red); color: var(--red); }
.btn.danger-btn:hover { background: var(--red); color: #fff; }
.tour-cap { min-height: 128px; }
@media (max-width: 720px) {
  .cheat-filter, .cheat-tagrow { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
.guide-later { margin-top: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 18px; }
.guide-later summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
.guide-later[open] summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.rail-group { list-style: none; margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.path-advanced .pathnum { font-size: .85rem; }
@media (max-width: 980px) { .rail-group { display: none; } }

/* ---- what to expect, and emailing the coach ---- */
.expect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.expect > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.expect b { display: block; }
.expect p { margin: 4px 0 0; color: var(--ink-2); }
.coach-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; }
.coach-line span { font-size: .88rem; color: var(--ink-3); overflow-wrap: anywhere; }
.coach-btn { text-decoration: none; }
.acct-coach { margin-top: 28px; }
.acct-coach p { color: var(--ink-2); }
.stuck .coach-line { margin: -6px 0 14px; }
@media (max-width: 820px) { .expect { grid-template-columns: minmax(0, 1fr); } }

/* ---- idea of the week ---- */
.idea-h { font-size: 1.05rem; margin: 22px 0 10px; }
.block > .idea-h:first-child { margin-top: 0; }
.idea-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.idea-latest .idea-card { max-width: 760px; }
.idea-card.big { padding: 20px 22px; border-color: var(--terra-line); }
.idea-card.big b { font-size: 1.25rem; line-height: 1.3; }
.idea-card.big p { font-size: 1rem; }
.idea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .82rem; color: var(--ink-3); }
.idea-meta .pill { font-size: .74rem; }
.idea { max-width: 760px; }
.idea h1 { margin-top: 10px; }
.idea .lead { margin-top: 10px; }
.idea-admin { margin-top: 12px; align-items: center; }
.idea-body { margin-top: 22px; }
.idea-body p, .idea-legal p { margin: 0 0 12px; line-height: 1.65; }
.idea-body h3 { font-size: 1.1rem; margin: 22px 0 8px; }
.idea-body ul, .idea-body ol, .idea-legal ul, .idea-legal ol { margin: 0 0 14px; padding-left: 22px; line-height: 1.6; }
.idea-body li, .idea-legal li { margin-bottom: 4px; }
.idea-prompts, .idea-legal, .idea-links { margin-top: 28px; }
.idea-prompts h2, .idea-legal h2, .idea-links h2 { font-size: 1.15rem; margin-bottom: 10px; }
.idea-prompt { margin-bottom: 16px; }
.idea-prompt h3 { font-size: 1rem; margin-bottom: 6px; }
.idea-legal { background: #f6efdf; border-left: 3px solid var(--warn); border-radius: 10px; padding: 14px 18px 4px; }
.idea-coach { margin-top: 28px; }
.idea-empty { padding: 8px 0; }
.idea-edit { max-width: 760px; }
.idea-form { margin-top: 18px; }
.idea-form .hint { margin: -2px 0 6px; }
.idea-form input[type=date], .idea-form select { width: 100%; max-width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.idea-pset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 16px; margin: 0 0 14px; min-width: 0; }
.idea-pset legend { font-size: 13.5px; font-weight: 600; padding: 0 6px; }
.idea-prow { border-bottom: 1px dashed var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.idea-prow label { display: block; font-size: 13px; font-weight: 600; margin: 8px 0 4px; }
.idea-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 14px; }
.idea-edit .danger { margin-top: 28px; }
@media (max-width: 560px) { .idea-when { grid-template-columns: minmax(0, 1fr); } }
/* five menu items on a phone: equal columns, a long name may take two lines */
@media (max-width: 560px) {
  .topnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; border-radius: 16px; overflow: visible; }
  .topnav a { padding: 7px 2px; white-space: normal; line-height: 1.2; border-radius: 12px; display: flex; align-items: center; justify-content: center; min-height: 36px; }
  .navdot { top: 3px; right: 3px; }
}
.idea h1, .idea-body, .idea-legal, .idea-card b, .idea-card p { overflow-wrap: anywhere; }
.idea-pset > .hint { font-size: 12.5px; color: var(--ink-3); margin: 0 0 4px; }

/* ---- reasons to come back: kinds on the Cheat Sheet, what's new ---- */
.cheat-filter .ex-tab.kind { border-style: dashed; }
.cheat-tag.kind { background: rgba(88, 50, 209, .08); color: var(--purple); border-color: rgba(88, 50, 209, .25); }
.cheat-tag.ours { background: var(--ink); color: #fff; border-color: var(--ink); }
.whatsnew-cheats { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; max-width: 760px; }
.whatsnew-cheats ul { margin: 6px 0 10px; padding-left: 20px; color: var(--ink-2); }
.whatsnew-cheats li { margin-bottom: 2px; }

/* ---- monthly membership ---- */
.member-box { margin-top: 28px; max-width: 560px; background: var(--panel); border: 1px solid var(--terra-line); border-radius: var(--radius); padding: 18px 20px; }
.member-box.on { border-color: rgba(46, 125, 84, .4); background: var(--done-soft); }
.member-box h2 { font-size: 1.1rem; }
.member-box p { color: var(--ink-2); margin: 6px 0 10px; }
.member-state { font-size: .9rem; color: var(--ink-3); margin: 0 0 8px; }
.member-state.on { color: var(--done); font-weight: 600; }
.member-admin input { max-width: 100%; }
.ccard .pill { margin-top: 8px; display: inline-block; }

/* ---- starred cards (amcc_tips.featured) ---- */
.cheat-tag.featured { color: #7a5200; background: #fbe9b7; }
.cheat-sec.featured { color: #7a5200; }
.cheat:has(.cheat-tag.featured) { border-color: #e7c66a; box-shadow: 0 0 0 1px #f1dc9e inset; }

/* =====================================================================
   2026-09-26 design-studio pass (look only; no words or layout change).
   Design read: a warm editorial workbook. AdVenture's cream, charcoal and
   teal stay; teal is the one accent for actions, purple is kept for the
   mark and the AI helpers; hairlines and light warm shadows instead of
   heavy grey ones; a typeface served from this site (Geist) instead of
   Google Fonts. Dials: variance 3, motion 3, density 5.
   ===================================================================== */
@font-face { font-family: "Geist"; src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --ink: #1b1a16;
  --shadow-sm: 0 1px 2px rgba(38, 33, 20, .05);
  --shadow: 0 1px 2px rgba(38, 33, 20, .04), 0 4px 14px -6px rgba(38, 33, 20, .10);
  --shadow-lg: 0 2px 4px rgba(38, 33, 20, .04), 0 14px 32px -12px rgba(38, 33, 20, .16);
}
body {
  background: radial-gradient(1000px 520px at 100% -12%, rgba(46, 88, 85, .06), transparent 62%), var(--paper);
  background-attachment: fixed;
  font-feature-settings: normal;
}

/* type: settled headlines, no lonely last words */
h1 { font-weight: 650; letter-spacing: -.032em; }
.block h2, .section-h { font-weight: 620; letter-spacing: -.02em; }
.step-body h3, .cheat h3, .pathtext b, .ql b { font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }
p, .lead, .step-text, .cheat-what { text-wrap: pretty; }
.pathnum, .rail-num, .step-num, .rail-foot, .cheat-filter .ex-tab span, .cheat-tagrow a span, .cheat-stars { font-variant-numeric: tabular-nums; }
.wordmark { font-weight: 560; letter-spacing: -.035em; }

/* the main button: flat teal, a darker teal on hover, no glow */
.btn.primary { background: var(--terra); border-color: var(--terra); box-shadow: 0 1px 2px rgba(38, 33, 20, .14); }
.btn.primary:hover { background: #244744; border-color: #244744; color: #fff; box-shadow: 0 4px 12px -4px rgba(46, 88, 85, .45); }
.btn.primary:active { box-shadow: 0 1px 2px rgba(38, 33, 20, .14); }

/* surfaces: a hairline carries the edge, the shadow only whispers */
.prompt, .office-card, .ex-card, .login-card, .mode { box-shadow: var(--shadow-sm); }
.cheat { box-shadow: var(--shadow-sm); }
.cheat:hover, .cheat.open { box-shadow: var(--shadow); }
.pathrow:hover { box-shadow: var(--shadow); }

/* one accent: tags and filters speak teal, like every other action */
.cheat-tagrow a, .cheat-hashtags a { color: var(--terra); background: var(--terra-soft); }
.cheat-tagrow a:hover, .cheat-hashtags a:hover { background: rgba(46, 88, 85, .14); }
.cheat-tagrow a.on, .cheat-hashtags a.on { background: var(--terra); color: #fff; }
.cheat-sec b { color: var(--terra); }
.cheat-tag.kind { background: var(--panel-2); color: var(--ink-2); border-color: var(--line); }
:focus-visible { outline-color: var(--terra); }

/* starred cards: a calmer gold edge */
.cheat:has(.cheat-tag.featured) { border-color: #ecd596; box-shadow: var(--shadow-sm); }
.cheat:has(.cheat-tag.featured):hover, .cheat.open:has(.cheat-tag.featured) { box-shadow: var(--shadow); }
/* Geist sets a little wider than Inter: keep lines near 70 characters */
.lead { max-width: 58ch; }
.block-sub, .step-text { max-width: 62ch; }

/* =====================================================================
   2026-09-28 "Bold" pass (look only; no words, links, order or
   behaviour). Spiros picked look 2 of the five getdesign.md styles,
   after finding the dark one too dark. Design read of wise.md: white
   pages with pale sage bands, headlines set very heavy and uppercase in
   Archivo, one bright lime that carries every main action, and corners
   rounded far more than usual. Archivo is served from this site, like
   Geist; lime never carries white text, always near-black.
   ===================================================================== */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --display: "Archivo", "Geist", -apple-system, "Segoe UI", sans-serif;

  /* paper and the two bands that break it up */
  --paper: #ffffff;
  --panel: #ffffff;
  --sage: #e8ebe6;
  --panel-2: #e8ebe6;
  --line: #d6dbd4;
  --line-soft: #e4e8e2;
  --line-hi: #b9c0b6;

  --ink: #0e0f0c;
  --ink-2: #454745;
  --ink-3: #62655f;            /* 5.6:1 on white */

  /* one accent: --terra reads as text, --terra-fill is the lime, always under near-black */
  --terra: #163300;
  --terra-fill: #9fe870;
  --terra-hover: #8bd95c;
  --terra-soft: #e2f6d5;
  --terra-line: #c5edab;

  --done: #106630;
  --done-soft: rgba(16, 102, 48, .10);
  --warn: #8a5a00;
  --warn-soft: #fff4d6;
  --red: #e0433e;              /* the mark keeps the brand red */
  --red-ink: #b3252b;
  --purple: #5832d1;           /* and the brand purple */
  --purple-soft: rgba(88, 50, 209, .08);

  --radius: 24px;
  --radius-sm: 16px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 18px 44px -14px rgba(14, 15, 12, .22);
  --t-press: 90ms;
  --t-fast: 150ms;
  --t-base: 200ms;
}

body { background: var(--paper); color: var(--ink); }
a { color: var(--terra); }
::selection { background: var(--terra-fill); color: var(--ink); }

/* type: heavy uppercase headlines, calm Geist for reading */
h1, .block h2, .section-h, .cheat-sec, .idea-prompts h2, .idea-legal h2, .idea-links h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; line-height: .94; overflow-wrap: break-word;
}
h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); }
.block h2, .section-h { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem); }
.login-card h1, .cheat-sec, .idea-prompts h2, .idea-legal h2, .idea-links h2 { font-size: 1.4rem; line-height: 1; }
.hero h1 { max-width: 19ch; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
.cheat-hero h1 { max-width: 13ch; }
.lead { font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem); color: var(--ink); line-height: 1.5; max-width: 56ch; }
.step-body h3, .cheat h3, .mode h3, .ex-card b, .choice-card b { font-weight: 800; letter-spacing: -.015em; }
.step-body h3 { font-size: 1.3rem; }
.wordmark { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.eyebrow, .office-eyebrow, .intro-card h4 { color: var(--terra); font-weight: 700; }
@media (max-width: 400px) { h1 { font-size: 2rem; } .block h2, .section-h { font-size: 1.5rem; } }

/* the bar at the top */
.topbar { background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); }
.topnav { background: var(--sage); border-radius: 999px; padding: 4px; }
.topnav a { color: var(--ink-2); font-weight: 600; border-radius: 999px; }
.topnav a:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.topnav a.on { background: var(--panel); color: var(--ink); box-shadow: none; }
.navdot { box-shadow: 0 0 0 2px var(--sage); }

/* buttons: big pills with a drawn edge; lime is the one action */
.btn {
  border: 2px solid var(--ink); border-radius: 999px; background: none; color: var(--ink);
  font-weight: 700; padding: 10px 22px; box-shadow: none;
}
.btn:hover { background: var(--sage); border-color: var(--ink); color: var(--ink); box-shadow: none; }
.btn.big { padding: 15px 30px; font-size: 1rem; border-radius: 999px; }
.btn.small { padding: 7px 16px; border-width: 2px; border-radius: 999px; }
.btn.ghost { border-color: var(--line-hi); }
.btn.primary, .btn.primary:hover, .btn.primary:active { box-shadow: none; color: var(--ink); }
.btn.primary { background: var(--terra-fill); border-color: var(--terra-fill); }
.btn.primary:hover { background: var(--terra-hover); border-color: var(--terra-hover); }
.tour-btn { background: none; border-color: var(--ink); color: var(--ink); }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }

/* forms */
input[type=text], input[type=email], input[type=password], input[type=search], textarea,
.reminder input[type=datetime-local], .idea-form input[type=date], .idea-form select {
  background: var(--panel); border: 2px solid var(--ink); border-radius: 14px; color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus,
.cheat-search:focus, .idea-form select:focus, .idea-form input[type=date]:focus {
  outline: 3px solid var(--terra); outline-offset: 1px; border-color: var(--ink); box-shadow: none;
}

/* home: the welcome sits on a sage band */
.page { padding-top: 28px; }
.hero { background: var(--sage); border-radius: 28px; padding: 40px 36px 42px; }
.hero-note { background: var(--panel); border: 0; border-radius: 16px; padding: 14px 18px; font-size: .95rem; }
.quicklinks { gap: 12px; margin-top: 24px; }
.ql { background: var(--panel); border: 0; border-radius: var(--radius); padding: 20px 22px;
  grid-template-columns: minmax(0, 1fr); row-gap: 8px; align-content: space-between; min-height: 150px; box-shadow: none; }
.ql:nth-child(2) { background: var(--terra-soft); }
.ql:nth-child(3) { background: var(--ink); color: var(--panel); }
.ql:nth-child(3) span:last-child { color: #cfd3cc; }
.ql:hover { border-color: transparent; box-shadow: none; transform: translateY(-2px); }
.ql-ic { grid-row: auto; justify-self: start; margin-bottom: 14px; width: 38px; height: 38px; border-radius: 999px; background: var(--sage); color: var(--terra); font-size: 16px; }
.ql:nth-child(2) .ql-ic { background: var(--panel); }
.ql:nth-child(3) .ql-ic { background: var(--terra-fill); color: var(--ink); }
.ql b { font-size: 1.05rem; font-weight: 800; }
.ql span:last-child { font-size: .9rem; color: var(--ink-2); }
@media (max-width: 720px) { .ql { min-height: 0; } }

/* what you will be able to do: a lime tick on each line */
.outcomes { gap: 14px 28px; margin-top: 22px; }
.outcomes li { background: none; border: 0; border-radius: 0; padding: 0 0 0 46px; color: var(--ink); font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.outcomes li::before {
  content: "\2713"; width: 30px; height: 30px; left: 0; top: 0; border-radius: 999px;
  background: var(--terra-fill); color: var(--ink); font-size: 14px; font-weight: 800;
}

/* your path: white rows on a sage band, the next one filled lime */
.path { background: var(--sage); border-radius: var(--radius); padding: 14px; display: grid; gap: 8px; margin-top: 20px; }
/* The "Advanced" heading between the two lists on the overview's Part 2 card. */
.path-h { margin: 26px 0 0; font-size: 1.05rem; }
.pathrow { background: var(--panel); border: 0; border-radius: 20px; padding: 16px 20px; margin-bottom: 0; gap: 16px; }
.pathrow:hover { background: var(--panel); border-color: transparent; box-shadow: none; transform: translateY(-1px); }
.pathrow.up { background: var(--terra-fill); border-color: transparent; box-shadow: none; }
.pathnum {
  width: 46px; height: 46px; border: 0; border-radius: 999px; background: var(--sage);
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--ink);
}
.pathrow.up .pathnum { background: var(--ink); color: var(--terra-fill); }
.pathrow.done .pathnum { background: var(--ink); border-color: var(--ink); color: var(--terra-fill); }
.pathtext b { font-size: 1.1rem; font-weight: 800; }
.pathlabel { color: var(--ink-2); font-weight: 700; font-size: 12px; }
.pathwhy { color: var(--ink-2); font-size: .9rem; }
.pathrow.up .pathlabel, .pathrow.up .pathwhy { color: var(--terra); }
.pill { border: 0; background: var(--terra-soft); color: var(--terra); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.pill.done { background: var(--sage); color: var(--ink-2); border: 0; }
.pill.next { background: var(--ink); color: var(--terra-fill); border: 0; }

/* what to expect, and the other card grids */
.expect > div, .needs div, .words div, .mode, .flow-step, .dolist2 li, .intro-card, .choice-card,
.ex-card, .cheat, .prompt, .office-card, .login-card, .profile, .yourbuild, .guide, .guide-later,
.stuck, .verdicts, .whatsnew-cheats, .member-box, .idea-pset, .ccard, .reminder, .build-msg, .pastbuild {
  border-radius: var(--radius); box-shadow: none;
}
.expect > div, .needs div, .words div, .flow-step, .intro-card { background: var(--sage); border: 0; }
.mode, .dolist2 li, .choice-card, .ex-card, .cheat, .ccard { background: var(--panel); border: 2px solid var(--line); }
.mode.pick { border-color: var(--terra-fill); box-shadow: inset 0 0 0 2px var(--terra-fill); }
.ex-card:hover, .cheat:hover, .cheat.open, .ccard:hover { border-color: var(--ink); box-shadow: none; }
.flow-step b { color: var(--terra); }

/* the Cheat Sheet block on home: one near-black panel */
.cheatcard { background: var(--ink); border: 0; border-radius: var(--radius); padding: 34px 34px 32px; color: var(--panel); }
.cheatcard h2 { color: var(--terra-fill); }
.cheatcard .block-sub { color: #cfd3cc; }
.cheat-peek b { color: var(--panel); }
.cheat-peek li { color: #cfd3cc; }
.cheatcard .btn { background: var(--terra-fill); border-color: var(--terra-fill); color: var(--ink); }
.cheatcard .btn:hover { background: var(--terra-hover); border-color: var(--terra-hover); }
.cheatcard .cheat-tag.new { background: var(--terra-fill); color: var(--ink); }
.cheatcard .btn:focus-visible { outline-color: var(--terra-fill); }

/* lessons: a lime number, then the step */
.step { padding-bottom: 34px; }
.step::before { background: var(--line); left: 22px; top: 50px; }
.step-num {
  width: 46px; height: 46px; border-radius: 999px; background: var(--terra-fill); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
}
.step { grid-template-columns: 46px minmax(0, 1fr); gap: 20px; }
@media (max-width: 640px) {
  .step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .step-num { width: 38px; height: 38px; font-size: 1rem; }
  .step::before { left: 18px; top: 42px; }
  .hero { padding: 26px 20px 28px; border-radius: 22px; }
  .path { padding: 10px; }
  .pathrow { padding: 14px 16px; }
  .pathnum { width: 40px; height: 40px; font-size: .95rem; }
}

/* small chips */
.where, .upgrade, .when, .cheat-meta span, .chips > span { border-radius: 999px; }
.where { background: var(--sage); border: 0; color: var(--ink-2); font-weight: 700; padding: 4px 12px; }
.where-code { background: var(--terra-soft); color: var(--terra); border: 0; }
.where-here { background: var(--purple-soft); color: var(--purple); border: 0; }
.where-you { background: var(--sage); color: var(--ink-2); border: 0; }
.where-mode { background: var(--purple-soft); color: var(--purple); border: 0; }
.where-mode.mode-plan { background: var(--warn-soft); color: var(--warn); border: 0; }
.where-mode.mode-edits { background: var(--terra-soft); color: var(--terra); border: 0; }
.where-mode.mode-switch { box-shadow: 0 0 0 3px rgba(138, 90, 0, .16); }
.where-mode.mode-switch.mode-edits { box-shadow: 0 0 0 3px var(--terra-line); }
.upgrade { background: var(--terra-soft); border: 0; color: var(--terra); }
.upgrade b { color: var(--terra); }
.when { background: var(--sage); border: 0; border-left: 0; color: var(--ink-2); }
.cheat-meta span { background: var(--sage); border: 0; color: var(--ink-2); }

/* prompts: a drawn box, sage inside */
.prompt { background: var(--panel); border: 2px solid var(--ink); }
.prompt.short { background: var(--sage); border: 0; }
.prompt-box { background: var(--sage); border: 0; border-radius: 16px; color: var(--ink); }
.prompt.short .prompt-box { background: var(--panel); }
.prompt-box.collapsed::after { background: linear-gradient(rgba(232, 235, 230, 0), var(--sage)); }
.prompt.short .prompt-box.collapsed::after { background: linear-gradient(rgba(255, 255, 255, 0), var(--panel)); }
.prompt-box .ph { color: var(--warn); background: var(--warn-soft); }
.ph.soft { color: var(--warn); }
.ph-filled { color: var(--terra); }
.gets { border-left: 4px solid var(--terra-fill); }

/* you are done when */
.check { background: var(--panel); border: 2px solid var(--line); border-radius: 20px; }
.check:hover { border-color: var(--ink); }
.check.on { background: var(--terra-soft); border-color: var(--terra-line); }
.box { width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 8px; background: var(--panel); color: var(--ink); }
.check.on .box { background: var(--terra-fill); border-color: var(--ink); color: var(--ink); }
.installed-bar { background: var(--terra-soft); border: 0; border-radius: var(--radius); }

/* the rail beside a lesson */
@media (min-width: 981px) {
  .rail { background: var(--sage); border: 0; border-radius: var(--radius); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.rail-num { background: var(--panel); border: 0; color: var(--ink); font-family: var(--display); font-weight: 800; }
.rail-item:hover { background: rgba(255, 255, 255, .6); }
.rail-item.current { background: var(--panel); }
.rail-item.current .rail-num { background: var(--terra-fill); color: var(--ink); }
.rail-item.done .rail-num { background: var(--ink); border-color: var(--ink); color: var(--terra-fill); }
.rail-bar { background: var(--panel); height: 8px; }
.rail-bar i { background: var(--terra-fill); }
.rail-foot b { color: var(--ink); }
@media (max-width: 980px) {
  .rail { border-bottom: 1px solid var(--line); }
  .rail-num { background: var(--sage); }
  .rail-list::before { background: var(--line); }
  .rail-item.current .rail-num { background: var(--terra-fill); box-shadow: none; }
}

/* the Cheat Sheet page */
.cheat-search { background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2362655f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 15px 50%; border: 2px solid var(--ink); box-shadow: none; }
.cheat-toggle { background: var(--terra-fill); color: var(--ink); font-weight: 700; }
.cheat-toggle:hover { background: var(--terra-hover); }
.cheat-stars { background: var(--sage); color: var(--ink-2); }
.cheat-tag { background: var(--terra-soft); color: var(--terra); font-weight: 700; }
.cheat-tag.new { background: var(--red-ink); color: #fff; }
.cheat-tag.setup { background: var(--warn-soft); color: var(--warn); }
.cheat-tag.builtin { background: var(--done-soft); color: var(--done); }
.cheat-tag.kind { background: var(--sage); color: var(--ink-2); border-color: var(--sage); }
.cheat-tag.ours { background: var(--ink); color: var(--terra-fill); border-color: var(--ink); }
.cheat-tag.featured { background: #fbe9b7; color: #6b4a00; }
.cheat:has(.cheat-tag.featured) { border-color: #e2c36a; box-shadow: none; }
.cheat:has(.cheat-tag.featured):hover, .cheat.open:has(.cheat-tag.featured) { border-color: #b8952f; box-shadow: none; }
.cheat-sec.featured { color: #6b4a00; }
.cheat-sec span { background: var(--red-ink); color: #fff; }
.cheat-sec b { color: var(--terra); }
.cheat-step { border-top: 2px solid var(--line-soft); }
.cheat-care { border-left: 4px solid var(--warn); }
.cheat-credit a, .cheat-links a, .cheat-clear { color: var(--terra); }
.cheat-live i { background: var(--done); box-shadow: 0 0 0 3px var(--done-soft); }
.cheat-tagrow a, .cheat-hashtags a { background: var(--terra-soft); color: var(--terra); }
.cheat-tagrow a:hover, .cheat-hashtags a:hover { background: var(--terra-line); }
.cheat-tagrow a.on, .cheat-hashtags a.on { background: var(--ink); color: var(--terra-fill); }
.ex-tab { background: var(--panel); border: 2px solid var(--line); color: var(--ink-2); border-radius: 999px; }
.ex-tab:not(.on):hover { border-color: var(--ink); color: var(--ink); }
.ex-tab.on { background: var(--ink); border-color: var(--ink); color: var(--panel); }

/* tints that carry a meaning */
.note, .stuck { background: var(--warn-soft); border: 0; }
.stuck-ic { background: var(--warn); color: #fff; }
.idea-legal { background: var(--warn-soft); border-left: 4px solid var(--warn); }
.offline-bar { background: var(--warn-soft); color: var(--warn); border-bottom: 0; }
.ai-msg { background: #fdecec; border: 0; color: #8a2320; }
.ai-msg.ok { background: var(--purple-soft); border: 0; color: var(--purple); }
.btn.ai-btn { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); }
.ex-kind { background: var(--purple-soft); color: var(--purple); border-radius: 999px; }
.ex-msg { border-radius: 18px; }
.ex-msg.ex-you { background: var(--purple-soft); border: 0; }
.ex-msg.ex-claude { background: var(--sage); border: 0; }
.mk.ok { color: var(--done); background: var(--done-soft); }
.mk.no { color: var(--red-ink); background: rgba(179, 37, 43, .09); }
.flash { color: var(--done); }
.err, .danger h2 { color: var(--red-ink); }
.danger { background: var(--panel); border: 2px solid rgba(179, 37, 43, .4); }
.btn.danger-btn { background: none; border-color: var(--red-ink); color: var(--red-ink); }
.btn.danger-btn:hover { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }
.ccard-login.on, .member-state.on, .mode.pick .mode-use { color: var(--done); }
.member-box.on { background: var(--terra-soft); border-color: var(--terra-line); }
.mic { background: var(--panel); border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); }
.mic svg { color: var(--purple); }
.mic.on { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }
.mic.on svg { color: #fff; }
.vtag { background: var(--sage); color: var(--ink); border-radius: 999px; font-weight: 700; }
.vtag.v-0 { background: var(--terra-fill); color: var(--ink); }
.vtag.v-1 { background: var(--warn-soft); color: var(--warn); }
.vtag.v-2 { background: var(--purple-soft); color: var(--purple); }
.vtag.v-look { background: var(--ink); color: var(--terra-fill); }
.adminbar { background: var(--terra-soft); border: 0; border-radius: var(--radius); }
.login-msg { background: var(--terra-soft); border: 0; color: var(--terra); }

/* the 2-minute tour keeps its drawing of Claude Code as it is */
.tour { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.tour-bar i { background: var(--line); }
.tour-bar i.done, .tour-bar i.now::after { background: var(--terra-fill); }
.sk-b.ok, .sk-send { background: var(--ink); color: var(--panel); }
.sk-menu i.on { background: var(--terra-fill); color: var(--ink); }
.hl { border-color: var(--ink) !important; box-shadow: 0 0 0 3px var(--terra-line); }
.sk-tabs b.hl { color: var(--ink); background: var(--terra-soft); }
@keyframes skpulse { 0%, 100% { box-shadow: 0 0 0 3px var(--terra-line); } 50% { box-shadow: 0 0 0 7px rgba(159, 232, 112, .45); } }
.office { border: 0; border-radius: var(--radius); background: var(--sage); }
.cast li { background: var(--terra-soft); border: 0; color: var(--terra); }

/* rhythm */
.block { margin-top: 76px; }
@media (max-width: 640px) { .block { margin-top: 54px; } }
.section-h { margin-top: 56px; }

/* nothing lands under the sticky bar */
html { scroll-padding-top: calc(84px + env(safe-area-inset-top)); }
@media (max-width: 1180px) { html { scroll-padding-top: calc(132px + env(safe-area-inset-top)); } }

/* thumb-sized targets on touch screens, 16px text on phones */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.small { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .topnav a, .ex-tab, .cheat-toggle, .mic { min-height: 44px; }
  .topnav a { display: inline-flex; align-items: center; justify-content: center; }
  .cheat-tagrow a, .cheat-hashtags a { display: inline-flex; align-items: center; min-height: 32px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  input[type=text], input[type=email], input[type=password], input[type=search], textarea,
  .paste textarea, .cheat-search, .reminder input[type=datetime-local] { font-size: 16px; }
}

/* reading lines near 70 characters */
.intro-card p, .cheat p, .idea-body p, .idea-body li, .mode p, .check p, .stuck-item p, .verdict-body p { max-width: 62ch; }

/* press feedback */
.pathrow, .ex-card, .ccard, .check { transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.box, .rail-num { transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.pathrow:active, .ex-card:active, .ccard:active, .check:active { transform: scale(.99); transition-duration: var(--t-press); }
.check:active .box { transform: scale(.88); transition-duration: var(--t-press); }
.rail-item { transition: background-color var(--t-fast) var(--ease); }
.rail-item:active .rail-num { transform: scale(.9); transition-duration: var(--t-press); }
.topnav a { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-press) var(--ease); }
.topnav a:active { transform: scale(.97); }
.ex-tab { transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-press) var(--ease); }
.ex-tab:active { transform: scale(.96); }
.cheat-body { animation-duration: var(--t-base); }
.cheat-tools:focus-within ~ #cheatList .cheat-body { animation: none; }
.cheat-live i { animation: none; }

/* "Copied" comes out of its button and fades before it is cleared (app.js clears it at 1600ms) */
.flash[data-flash]:not(:empty) { animation: flash-life 1600ms both; }
@keyframes flash-life {
  0%   { opacity: 0; transform: translateX(-4px); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  12%  { opacity: 1; transform: none; }
  84%  { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  100% { opacity: 0; transform: none; }
}
@keyframes flash-fade { 0% { opacity: 0; } 12%, 84% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pathrow, .ex-card, .check, .ccard, .mic, .rail-bar i, .box, .rail-num, .rail-item, .topnav a, .ex-tab, .ql { transition: none; }
  .pathrow:hover, .ex-card:hover, .ql:hover, .pathrow:active, .ex-card:active, .ccard:active, .check:active,
  .check:active .box, .rail-item:active .rail-num, .topnav a:active, .ex-tab:active, .mic:active { transform: none; }
  .flash[data-flash]:not(:empty) { animation-name: flash-fade; }
  .hl { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =====================================================================
   2026-09-29 the public homepage (`.lp`).

   Spiros pointed at latent-spaces.github.io/brag and asked for that
   look, so this is a straight read of it: a full orange first screen,
   one huge lowercase headline with a word knocked out in a black block,
   every small label in monospace, a near-black band for the finished
   builds, an orange band to close. Colours are built from one hue the
   way that page does it, so the whole page moves together if we change
   it. Geist and Geist Mono are already served from this site.

   Everything is under `.lp`, and `body.lp-on` paints the page behind
   it, so none of this reaches the signed-in app.
   ===================================================================== */

/* ---------------------------------------------------------------------------
   The colourway. Every colour on this page comes from the block below, so
   changing the look means changing these eleven lines and nothing else.

   The roles, not the colours:
     --o        the big colour field (first screen and last)
     --o-ink    the main text on that field
     --o-ink-2  the quieter text on it
     --o-tint   the pale band in the middle
     --block    the knocked-out highlight behind one word, and --block-ink in it
     --solid    the filled button and the terminal box, and --solid-ink in them
     --d ...    the near-black band that holds the finished builds
     --d-hot    the one bright colour that reads on that band
   --------------------------------------------------------------------------- */
.lp {
  /* Sage: the app's own hero band, run full bleed, with the lime as a
     highlighter behind one word. Every colour here is one a client already
     sees once they are signed in. Worst pairing on the page is 6.4:1. */
  --o: #e8ebe6;                         /* the field */
  --o-ink: #0e0f0c;
  --o-ink-2: #454745;
  --o-tint: #ffffff;                    /* the pale band in the middle */
  --q-ink: #0e0f0c;                     /* and its own ink */
  --q-ink-2: #454745;
  --block: #9fe870;                     /* the highlight behind one word */
  --block-ink: #0e0f0c;
  --solid: #0e0f0c;                     /* the filled button and the terminal */
  --solid-ink: #ffffff;
  --solid-hot: #9fe870;                 /* the $ and > inside it */
  --cta: #9fe870;                       /* the "your build here" card: always
                                           the action colour, so it stands out
                                           on whichever band it lands on */
  --cta-stripe: #8bd95c;
  --cta-ink: #0e0f0c;
  --phone: #2a2d28;                     /* the handset, a step off the field */
  --phone-edge: #454a42;
  --phone-notch: #14170f;
  --d: #0e0f0c;                         /* the band that holds the builds */
  --d-up: #1a1c18;
  --d-ink: #ffffff;
  --d-ink-2: #cfd3cc;
  --d-rule: #2a2d28;
  --d-hot: #9fe870;
  --r: 12px;
  --out: cubic-bezier(.16, 1, .3, 1);
  --page: 1420px;

  background: var(--o);
  color: var(--o-ink);
  font-family: var(--font);
  line-height: 1.4;
}
body.lp-on { background: var(--o, #e8580f); }
.lp img, .lp video { display: block; max-width: 100%; height: auto; }
.lp a { color: inherit; }
.lp ::selection { background: var(--block); color: var(--block-ink); }

/* ---- the words ---- */
.lp-h1 {
  margin: 0; font-weight: 900; text-transform: lowercase;
  font-size: clamp(52px, 11vw, 168px); line-height: .86; letter-spacing: -.04em;
}
.lp-h2 {
  margin: 0; font-weight: 800; text-transform: lowercase;
  font-size: clamp(36px, 5.6vw, 84px); line-height: .94; letter-spacing: -.03em;
}
.lp-emph {
  font-style: italic; background: var(--block); color: var(--block-ink);
  padding: 0 .06em; white-space: nowrap;   /* one block, never split over two lines */
}
.lp-em { font-style: italic; color: var(--d-hot); }
.lp-sub {
  margin: clamp(24px, 3vw, 40px) 0 0; max-width: 40ch; font-weight: 500;
  font-size: clamp(18px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -.015em;
  color: var(--o-ink-2);
}
.lp-said { margin: 0; font-size: 15px; line-height: 1.55; max-width: 46ch; color: var(--o-ink-2); }
.lp-eyebrow, .lp-label, .lp-meta, .lp-cap, .lp-n, .lp-cat, .lp-colophon, .lp-screen-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: -.005em; text-transform: lowercase;
}
.lp-eyebrow { margin: 0 0 18px; color: var(--o-ink-2); }
.lp-what .lp-eyebrow, .lp-what .lp-label { color: var(--q-ink-2); }
.lp-label { display: block; margin-bottom: 8px; color: var(--o-ink-2); }

/* ---- 1. the orange first screen ---- */
.lp-hero {
  min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(32px, 5vw, 72px); padding: clamp(18px, 3vw, 38px);
  padding-top: calc(clamp(18px, 3vw, 38px) + env(safe-area-inset-top));
}
.lp-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lp-mark { display: flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--mono); font-weight: 700; font-size: 14px; }
.lp-bar nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); font-family: var(--mono); font-size: 13px; }
.lp-bar nav a, .lp-bar nav button {
  color: var(--o-ink); text-decoration: none; background: none; border: 0; padding: 4px 0;
  font: inherit; cursor: pointer; border-bottom: 2px solid transparent;
}
.lp-bar nav a:hover, .lp-bar nav button:hover { border-bottom-color: var(--o-ink); }
.lp-bar nav button { font-weight: 700; }

.lp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .42fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.lp-say { min-width: 0; }
.lp-slot { display: flex; justify-content: flex-end; }
/* the phone in the hero: a real handset holding the launch video */
.lp-phone {
  /* the frame is shaped to the video (9:16) plus its bezel, so nothing is
     cropped and there are no black bars */
  position: relative; width: min(330px, 100%); aspect-ratio: 9 / 16.55;
  max-height: 76vh;
  background: var(--phone); border-radius: 42px; padding: 9px;
  box-shadow: 0 0 0 2px var(--phone-edge), 0 34px 70px -26px rgba(0, 0, 0, .6);
  transform: rotate(1.6deg);
}
.lp-phone::before {            /* the notch */
  content: ""; position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 8px; border-radius: 999px; background: var(--phone-notch); z-index: 2;
}
.lp-vid { position: absolute; inset: 9px; width: auto; height: auto; object-fit: cover; border-radius: 34px; background: #0e0f0c; display: block; }

.lp-vctl { position: absolute; left: 14px; right: 14px; bottom: 18px; display: flex; gap: 8px; align-items: center; z-index: 3; }
.lp-vbtn {
  border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 12px; border-radius: 999px;
  background: rgba(10, 8, 6, .62); color: var(--o-tint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 11px; text-transform: lowercase;
  transition: background-color 160ms var(--out);
}
.lp-vbtn:hover { background: rgba(10, 8, 6, .85); }
.lp-vbtn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.lp-vbtn.lp-vsound[aria-pressed="false"] { background: var(--o); color: var(--o-ink); }
.lp-phone .i-pause { display: none; }
.lp-phone[data-playing="1"] .i-play { display: none; }
.lp-phone[data-playing="1"] .i-pause { display: block; }

.lp-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end; }
.lp-stack { min-width: 0; }
.lp-term {
  margin: 0; background: var(--solid); color: var(--solid-ink); border-radius: var(--r);
  padding: 16px 20px; font-family: var(--mono); font-size: 13.5px; line-height: 1.75;
  overflow-x: auto; max-width: 560px;
}
.lp-term code { font: inherit; white-space: pre; }
.lp-p { color: var(--solid-hot); }
.lp-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lp-go, .lp-quiet {
  font-family: var(--font); font-size: 15px; font-weight: 700; text-transform: lowercase;
  border-radius: 999px; padding: 13px 26px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: transform var(--t-press, 90ms) var(--out), background-color 160ms var(--out), color 160ms var(--out);
}
.lp .lp-go { background: var(--solid); color: var(--solid-ink); border: 2px solid var(--solid); }
.lp .lp-go:hover { background: transparent; color: var(--o-ink); border-color: var(--o-ink); }
.lp .lp-quiet { background: transparent; color: var(--o-ink); border: 2px solid var(--o-ink); }
.lp .lp-quiet:hover { background: var(--solid); color: var(--solid-ink); }
.lp-go:active, .lp-quiet:active { transform: scale(.97); }
/* What the free call is, under the button that books it. */
.lp-callnote { margin: 14px 0 0; max-width: 54ch; color: var(--o-ink-2); line-height: 1.6; }
/* The address under the button. A mailto opens nothing when the browser has no
   mail app set up, and it fails silently, so the address is on screen to copy. */
.lp-mail { margin: 10px 0 0; color: var(--o-ink-2); font-size: 14px; }
.lp-mail a { color: var(--o-ink); text-decoration: underline; text-underline-offset: 3px; }
/* In the closing band something follows it, and it would otherwise touch. */
.lp-mail:not(:last-child) { margin-bottom: 26px; }

/* The "ask about joining" panel. A bare mailto opens nothing on a browser with
   no mail app, and says nothing about it, so the click opens this instead:
   the message on screen, Gmail one tab away, and a copy button that needs no
   mail software at all. Every colour is one the page already uses. */
.join { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
/* `display: grid` above outranks the hidden attribute's own rule, so say it. */
.join[hidden] { display: none; }
.join-veil { position: absolute; inset: 0; background: rgba(14, 15, 12, .55); }
.join-card {
  /* The card sits on the pale band's colours, so the page's own ink is
     repointed at that band's ink for everything inside it. Without this, a
     label or the quiet button keeps the dark-colourway ink on a pale card and
     falls under AA. */
  --o-ink: var(--q-ink);
  --o-ink-2: var(--q-ink-2);
  position: relative; width: min(560px, 100%); max-height: min(86vh, 760px); overflow-y: auto;
  background: var(--o-tint); color: var(--q-ink); border: 2px solid var(--q-ink);
  border-radius: 18px; padding: 26px 24px 22px;
}
.join-x {
  position: absolute; top: 10px; right: 12px; width: 40px; height: 40px;
  background: transparent; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--q-ink-2);
}
.join-x:hover { background: var(--o); color: var(--q-ink); }
.join-h { margin: 0 34px 8px 0; font-size: 24px; text-transform: lowercase; }
.join-intro { margin: 0 0 16px; color: var(--q-ink-2); line-height: 1.55; }
.join-to { margin: 0 0 18px; }
.join-to a { color: var(--q-ink); text-decoration: underline; text-underline-offset: 3px; }
.join-sub { display: block; margin-bottom: 14px; }
.join-sub .lp-label { margin-bottom: 6px; }
.join-field {
  width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 15px;
  color: var(--q-ink); background: var(--o-tint); border: 2px solid var(--q-ink);
  border-radius: 10px; padding: 11px 13px; line-height: 1.55;
}
.join-body { resize: vertical; min-height: 180px; }
.join .lp-acts { margin-top: 18px; }
.join-alt { margin: 14px 0 0; font-size: 14px; }
.join-alt a { color: var(--q-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.join-said { margin: 12px 0 0; min-height: 1.4em; font-size: 14px; color: var(--q-ink-2); }
@media (max-width: 460px) {
  .join { padding: 12px; }
  .join-card { padding: 22px 18px 18px; }
  /* so the whole panel fits a phone without anyone having to scroll it.
     The height beats the textarea's own rows; dragging it bigger still works. */
  .join-body { min-height: 118px; height: 118px; }
}

.lp-meta { margin: 0; text-align: right; color: var(--o-ink-2); max-width: 34ch; line-height: 1.6; }
.lp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--o-ink); margin-right: 7px; vertical-align: 1px; }

/* ---- 2. the cream band: what you walk away with ---- */
.lp-what { background: var(--o-tint); color: var(--q-ink); padding: clamp(56px, 8vw, 120px) clamp(18px, 3vw, 38px); }
.lp-in { max-width: var(--page); margin: 0 auto; }
.lp-what .lp-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lp-outcomes { list-style: none; margin: clamp(26px, 3vw, 40px) 0; padding: 0; display: grid; gap: 14px; }
.lp-outcomes li { position: relative; padding-left: 30px; font-size: 17px; font-weight: 600; line-height: 1.35; max-width: 46ch; }
.lp-outcomes li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 14px;
  border-radius: 3px; background: var(--o);
}
.lp-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 28px; }
.lp-file { background: #fff; border-radius: var(--r); padding: 14px 16px; display: grid; gap: 3px; }
.lp-file b { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--q-ink); overflow-wrap: anywhere; }
.lp-file span { font-size: 13px; color: var(--q-ink-2); line-height: 1.35; }
.lp-file small { font-family: var(--mono); font-size: 11px; color: var(--q-ink-2); }
.lp-note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--q-ink-2); max-width: 54ch; }

.lp-list { margin: 0; background: var(--d); color: var(--d-ink); border-radius: 18px; padding: clamp(22px, 2.6vw, 32px); }
.lp-list .lp-label { color: var(--d-hot); margin-bottom: 14px; }
.lp-list ol { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-list li { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--d-rule); }
.lp-list li:first-child { border-top: 0; }
.lp-list .lp-n { color: var(--d-hot); flex: 0 0 auto; }
.lp-list .lp-t { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }

/* ---- 3. the dark band: the finished builds ---- */
.lp-builds { background: var(--d); color: var(--d-ink); padding: clamp(56px, 8vw, 120px) clamp(18px, 3vw, 38px); }
.lp-builds .lp-eyebrow, .lp-builds .lp-said { color: var(--d-ink-2); }
.lp-head { max-width: var(--page); margin: 0 auto clamp(30px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end; }
.lp-head .lp-said { text-align: right; max-width: 34ch; font-family: var(--mono); font-size: 12px; line-height: 1.7; }
/* the cards after the feature one fit as many across as they comfortably can,
   so the row never leaves an odd card stranded on its own */
.lp-grid { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.lp-card { display: grid; gap: 12px; align-content: start; }
.lp-shot {
  display: block; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden;
  background: var(--d-up); border: 1px solid var(--d-rule);
  transition: transform 300ms var(--out), border-color 300ms var(--out);
}
.lp-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lp-shot:hover { transform: translateY(-3px); border-color: var(--d-hot); }
.lp-cap { display: flex; align-items: baseline; gap: 12px; color: var(--d-ink-2); }
.lp-cap .lp-n { color: var(--d-hot); }
.lp-cap .lp-name { color: var(--d-ink); font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.lp-cap .lp-cat { margin-left: auto; }
.lp-blurb { margin: 0; font-size: 14px; line-height: 1.55; color: var(--d-ink-2); max-width: 46ch; }
.lp-who { margin: 2px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--d-hot); }
/* the first build runs the full width and gets a wider crop: it is the one
   that shows best at a glance */
.lp-feature { grid-column: 1 / -1; }
.lp-feature .lp-shot { aspect-ratio: 21 / 9; }
.lp-feature .lp-name { font-size: 17px; }
.lp-feature .lp-blurb { max-width: 60ch; }
@media (max-width: 560px) { .lp-feature .lp-shot { aspect-ratio: 16 / 10; } }

.lp-yours { grid-column: 1 / -1; }
.lp-yours .lp-shot {
  aspect-ratio: 24 / 5;
  background-color: var(--cta);
  background-image: repeating-linear-gradient(-45deg, var(--cta), var(--cta) 14px, var(--cta-stripe) 14px, var(--cta-stripe) 28px);
  border-color: transparent; display: grid; place-items: center;
}
.lp-yours .lp-shot span {
  font-weight: 900; text-transform: lowercase; font-size: clamp(26px, 3.4vw, 46px);
  line-height: .95; letter-spacing: -.03em; color: var(--cta-ink); text-align: center;
}

/* ---- 4. the orange band that closes ---- */
.lp-end { background: var(--o); color: var(--o-ink); padding: clamp(64px, 10vw, 150px) clamp(18px, 3vw, 38px) clamp(30px, 4vw, 48px); }
.lp-endh { margin-bottom: clamp(32px, 4vw, 56px); }
.lp-endgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.lp-end .lp-acts { margin-top: 0; margin-bottom: 26px; }
.lp-after { display: grid; gap: 10px; }
.lp-after div { background: var(--o-tint); border-radius: var(--r); padding: 13px 16px; display: grid; gap: 3px; }
.lp-after b { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: lowercase; color: var(--q-ink); }
.lp-after span { font-size: 13.5px; line-height: 1.45; color: var(--q-ink-2); }
.lp-colophon { margin: clamp(40px, 6vw, 80px) 0 0; color: var(--o-ink-2); }
.lp-colophon a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- narrower screens ---- */
@media (max-width: 1000px) {
  .lp-main { grid-template-columns: minmax(0, 1fr); }
  .lp-slot { justify-content: center; }
  .lp-phone { transform: none; width: min(300px, 78vw); }
  .lp-what .lp-in { grid-template-columns: minmax(0, 1fr); }
  .lp-endgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lp-hero { min-height: 0; padding-bottom: clamp(32px, 6vw, 48px); }
  .lp-foot { grid-template-columns: minmax(0, 1fr); }
  .lp-meta { text-align: left; }
  .lp-head { grid-template-columns: minmax(0, 1fr); }
  .lp-head .lp-said { text-align: left; max-width: 52ch; }
  .lp-bar nav { gap: 14px; font-size: 12px; }
}
@media (max-width: 560px) {
  .lp-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-acts { flex-direction: column; align-items: stretch; }
  .lp-go, .lp-quiet { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-shot, .lp-go, .lp-quiet { transition: none; }
  .lp-shot:hover, .lp-go:active, .lp-quiet:active { transform: none; }
}

/* ---------------------------------------------------------------------------
   Colourways. Each sets the same roles as the block above, so nothing else
   on the page moves. `data-look` on .lp picks one.

   All four are built only from the colours a client already sees once they
   are signed in -- white, sage #e8ebe6, near-black #0e0f0c, dark green
   #163300 and the lime #9fe870 -- so the front door and the inside of the
   app are the same place. Every pairing below was measured, and the worst
   of them is 6.4:1.
   --------------------------------------------------------------------------- */

/* Near-black and lime. The Cheat Sheet panel from inside the app, run full
   bleed. The builds band goes dark green so the two still separate. */
.lp[data-look="ink"] {
  --o: #0e0f0c;
  --o-ink: #ffffff;
  --o-ink-2: #cfd3cc;
  --o-tint: #e8ebe6;
  --q-ink: #0e0f0c;
  --q-ink-2: #454745;
  --block: #9fe870;
  --block-ink: #0e0f0c;
  --solid: #9fe870;
  --solid-ink: #0e0f0c;
  --solid-hot: #163300;
  --cta: #9fe870;
  --cta-stripe: #8bd95c;
  --cta-ink: #0e0f0c;
  --phone: #24271f;
  --phone-edge: #3c4136;
  --phone-notch: #14170f;
  --d: #163300;
  --d-up: #1d4204;
  --d-ink: #ffffff;
  --d-ink-2: #cfe8bb;
  --d-rule: #2a4a18;
  --d-hot: #9fe870;
}

/* Lime. The accent from every button in the app, turned into the whole
   first screen. The loudest, and unmistakably ours. */
.lp[data-look="lime"] {
  --o: #9fe870;
  --o-ink: #0e0f0c;
  --o-ink-2: #163300;
  --o-tint: #ffffff;
  --q-ink: #0e0f0c;
  --q-ink-2: #454745;
  --block: #0e0f0c;
  --block-ink: #9fe870;
  --solid: #0e0f0c;
  --solid-ink: #ffffff;
  --solid-hot: #9fe870;
  --cta: #9fe870;
  --cta-stripe: #8bd95c;
  --cta-ink: #0e0f0c;
  --phone: #24271f;
  --phone-edge: #3c4136;
  --phone-notch: #14170f;
  --d: #0e0f0c;
  --d-up: #1a1c18;
  --d-ink: #ffffff;
  --d-ink-2: #cfd3cc;
  --d-rule: #2a2d28;
  --d-hot: #9fe870;
}

/* Dark green and lime. The green the app uses for text, turned into the
   field. Deep and warm, with the lime doing the pointing. */
.lp[data-look="forest"] {
  --o: #163300;
  --o-ink: #ffffff;
  --o-ink-2: #cfe8bb;
  --o-tint: #e8ebe6;
  --q-ink: #0e0f0c;
  --q-ink-2: #454745;
  --block: #9fe870;
  --block-ink: #163300;
  --solid: #9fe870;
  --solid-ink: #163300;
  --solid-hot: #163300;
  --cta: #9fe870;
  --cta-stripe: #8bd95c;
  --cta-ink: #0e0f0c;
  --phone: #20301a;
  --phone-edge: #3a5230;
  --phone-notch: #0f1a0b;
  --d: #0e0f0c;
  --d-up: #1a1c18;
  --d-ink: #ffffff;
  --d-ink-2: #cfd3cc;
  --d-rule: #2a2d28;
  --d-hot: #9fe870;
}