/* The public side: landing page, sign-up, the small legal pages.
   Phase 6 (2026-09-14): light, like every reference — Buffer's marketing
   and onboarding pages, Linear's restraint. White page, big plain display
   type, generous whitespace, no dark bands, no gradients. Inherits the
   tokens from ledger.css and only adds what the signed-out pages need.
   Nothing here is used behind the login. */

/* G9 (fix round 2): the only colours this file names — Google's own
   sign-in button (brand-required ink and ground), as two tokens. */
:root { --google-ink: #1F1F1F; --google-bg: #FFFFFF; }

.pub { background: var(--panel); color: var(--hi); }

/* ---- nav ---- */
.pubnav { display: flex; align-items: center; gap: 20px; padding: 14px 32px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30;
  background: var(--panel); flex-wrap: wrap; }
.pubnav .brand { font-size: var(--fs-3); font-weight: 500; letter-spacing: -.035em; color: var(--hi); }  /* the wordmark: Outfit 500, -0.035em (brand/BRAND.md §9) */
.pubnav .spacer { flex: 1; }
.pubnav-l { font-size: var(--fs-3); color: var(--mid); transition: color var(--motion); }
.pubnav-l:hover { color: var(--hi); }
/* M6 (fold-in, Harsha 25 Sep): on a desktop the menu is just the inline links
   and the menu button is hidden; at 760px and under see the block below. */
.pubnav-menu { display: flex; align-items: center; gap: 20px; }
.pubnav-burger { display: none; }

/* ---- hero (Buffer marketing): one big plain line, one grey paragraph,
   one accent button, an 8-pt rhythm on every band ---- */
.hero { padding: 80px 32px 56px; }
.hero-in { max-width: 860px; margin: 0 auto; }
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.03em; font-weight: 500;
  margin: 0 0 20px; }
.lede { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: var(--mid);
  max-width: 560px; margin: 0 0 28px; }
.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-note { font-size: var(--fs-2); color: var(--low); }
.btn-lg { font-size: var(--fs-4); padding: 13px 22px; border-radius: 10px; font-weight: 500; }
.btn-block { display: block; width: 100%; text-align: center; box-sizing: border-box; }

/* 27 Sep 2026: ledger.css has an APP rule `.hero` (the two Roadmap cards,
   a grid). The public pages load ledger.css too, so every public hero was
   being laid out as that grid: the words in the left column and an EMPTY
   right column (Harsha saw it on the first fold). The public hero is a
   block; the landing page's split below is the only public two-column hero. */
.pub .hero { display: block; margin: 0; }

/* the landing first fold: words left, the example roadmap card right, on the
   same 1040px measure as the columns and the footer; one column under 1000px
   with the card under the button */
.pub .hero.hero-split { display: block; padding-bottom: 64px; }
.hero-split-in { max-width: 1040px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hero-split .hero-in { max-width: none; margin: 0; min-width: 0; }
.hero-vis { min-width: 0; }
.hero-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: 20px 24px 16px; }
.hero-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hero-card-t { font-size: var(--fs-4); font-weight: 600; color: var(--hi); letter-spacing: -.01em; }
.hero-card-s { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--low); white-space: nowrap; }
.hero-card-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--good); flex: none; }
.hero-card .ex-tasks { max-width: none; margin-top: 10px; }
.hero-card .ex-row:last-child { border-bottom: 0; }
.hero-card-foot { margin: 8px 0 0; font-size: var(--fs-1); color: var(--low); }
@media (max-width: 1000px) {
  .hero-split-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-split .hero-in { max-width: 640px; }
}
@media (max-width: 640px) {
  .pub .hero.hero-split { padding-bottom: 40px; }
  .hero-split-in { gap: 28px; }
  .hero-card { padding: 16px 16px 12px; }
}
/* the two plan cards fill the band's measure instead of stopping at 640px
   with a bare right third beside them */
.pub .plan-grid { max-width: none; }

/* ---- bands: white, or the off-white ground for the alternate ones —
   never a dark band ---- */
.band { padding: 56px 32px; border-top: 1px solid var(--line); }
.band.alt { background: var(--bg); }
.band-in { max-width: 860px; margin: 0 auto; }
.band-in.narrow { max-width: 640px; }
.band h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; letter-spacing: -.025em; font-weight: 500;
  margin: 0 0 12px; }
.band-p { font-size: var(--fs-3); line-height: 1.65; color: var(--mid); max-width: 640px; margin: 0 0 20px; }

/* ---- three columns ---- */
.cols { padding: 56px 32px; border-top: 1px solid var(--line); }
.cols-in { max-width: 1040px; margin: 0 auto; display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.col-ico { width: 24px; height: 24px; color: var(--note); margin-bottom: 12px; }
.col h3 { font-size: var(--fs-4); margin: 0 0 8px; font-weight: 600; letter-spacing: -.01em; }
.col p { font-size: var(--fs-3); line-height: 1.6; color: var(--mid); margin: 0; }

/* ---- product crops (B4, 2026-09-03) — static mocks for how-it-works,
   plain HTML/CSS so there is no screenshot to keep in sync ---- */
.pstill-label { font-size: var(--fs-1); font-weight: 500; color: var(--low); margin-bottom: 6px; }
.pstill-title { font-size: var(--fs-3); font-weight: 600; color: var(--hi); margin-bottom: 10px; }
.pstill-chips { display: flex; gap: 6px; margin-bottom: 14px; }
.pstill-chip { font-size: var(--fs-1); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--mid); }
.pstill-chip-warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.pstill-btn { display: block; width: 100%; font-size: var(--fs-2); font-weight: 500;
  color: var(--accent-ink); background: var(--accent); border: none; border-radius: 8px; padding: 9px;
  margin-bottom: 16px; cursor: default; }
.pstill-chart { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.pstill-chart span { flex: 1 1 auto; background: var(--ch-1); opacity: .75; border-radius: 2px 2px 0 0; min-width: 4px; }
.pstill-chart-l { font-size: var(--fs-1); color: var(--low); margin-top: 6px; }

/* small step crops for how-it-works: white cards on the band */
.stepcrop { border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 12px 14px; max-width: 280px; }
.stepcrop-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--fs-2); }
.stepcrop-row:not(:last-child) { border-bottom: 1px solid var(--soft); }
.stepcrop-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.stepcrop-t { flex: 1; color: var(--mid); }
.stepcrop-p { color: var(--hi); font-weight: 500; }
.stepcrop-lanes { display: flex; gap: 10px; }
.stepcrop-lane { flex: 1; text-align: center; font-size: var(--fs-2); color: var(--hi); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 8px; line-height: 1.5; background: var(--panel); }
.stepcrop-lane span { font-size: var(--fs-1); color: var(--low); }

/* ---- how-it-works: numbered rail ---- */
.rail-steps { display: flex; flex-direction: column; gap: 8px; }
.rail-step { display: grid; grid-template-columns: 36px 1fr auto; gap: 20px; align-items: start;
  padding: 24px 0; border-top: 1px solid var(--line); }
.rail-step:first-child { border-top: 0; padding-top: 0; }
.rail-step-n { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-3); font-weight: 600; color: var(--hi); }
.rail-step-b h2 { font-size: clamp(18px, 2.2vw, 22px); margin: 0 0 8px; }
.rail-step-c { flex-shrink: 0; padding-top: 4px; }
@media (max-width: 760px) {
  /* fold-in M6 UAT: `1fr` has an auto minimum, so the example task rows in
     step 3 pushed the column (and the whole phone page) to 392px at 360 */
  .rail-step { grid-template-columns: 32px minmax(0, 1fr); }
  .rail-step-c { grid-column: 2; }
}

/* ---- what we need: icon list ---- */
.need-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.need-list li { display: flex; gap: 14px; align-items: flex-start; }
.need-ico { width: 20px; height: 20px; color: var(--note); flex-shrink: 0; margin-top: 2px; }
.need-list div { font-size: var(--fs-3); line-height: 1.6; color: var(--mid); }
.need-list b { color: var(--hi); font-weight: 600; }

/* ---- the two lanes ---- */
.lanes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0 0 24px; }
.lane { border: 1px solid var(--line); border-radius: 10px; padding: 20px; background: var(--panel); }
.lane-h { font-size: var(--fs-4); font-weight: 600; margin-bottom: 8px; }
.lane p { font-size: var(--fs-3); line-height: 1.6; color: var(--mid); margin: 0; }

/* ---- forms (Buffer's Create account): one centred column, a small
   bold label over each white input, ONE accent button ---- */
.form-wrap { padding: 56px 24px 88px; }
.form-in { max-width: 480px; margin: 0 auto; }
.form-in h1 { font-size: clamp(24px, 3vw, 28px); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 0 0 10px; }
.form-in .lede { font-size: var(--fs-3); margin-bottom: 24px; }
.signup { margin-top: 20px; }
.fld { margin-bottom: 20px; }
.fld > label { display: block; font-size: var(--fs-2); font-weight: 600; margin-bottom: 6px; }
.fld input[type=text], .fld input[type=email], .fld input[type=password], .fld textarea, .fld input {
  width: 100%; box-sizing: border-box; background: var(--panel); color: var(--hi);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font: inherit; font-size: var(--fs-3); }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--mid); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--low); }
.fld .comp { margin-bottom: 8px; }
.fld.two { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
/* Phase 7 (P0-5): the three competitor inputs in a row on desktop (stack on phones) */
.fld-three { display: grid; gap: 8px; grid-template-columns: 1fr 1fr 1fr; }
.fld-three .comp { margin-bottom: 0; }
/* P0-3 / P0-4: an inline field error under its own field */
.fld-err { color: var(--crit); font-size: var(--fs-2); margin: 6px 0 0; }
.fld.has-err input, .fld.has-err textarea, .has-err input { border-color: var(--crit); }
.hint-again { color: var(--hi); }
.support-offer > summary { cursor: pointer; }
.hint { font-size: var(--fs-2); line-height: 1.55; color: var(--low); margin: 8px 0 0; }
.hint.centered { text-align: center; }
.hint.legal { margin-top: 16px; }
.hint a { color: var(--note); text-decoration: underline; text-decoration-color: var(--line); }
.fdiv { border: none; border-top: 1px solid var(--line); margin: 28px 0 24px; }
.form-err { border: 1px solid var(--crit); border-radius: 8px; padding: 12px 14px;
  color: var(--crit); font-size: var(--fs-3); margin-bottom: 20px; background: var(--crit-bg); }

/* ---- /start: the wizard (Buffer onboarding): progress dots centred over
   one question; the "2 of 3" text stays for a screen reader ---- */
.wiz-dots { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 0 0 24px; padding: 0; }
.wiz-dots li { width: 8px; height: 8px; border-radius: 999px; background: var(--raise); }
.wiz-dots li.on { background: var(--hi); }
.wiz-progress { font-size: var(--fs-1); font-weight: 500; color: var(--low); letter-spacing: .04em; text-align: center; margin: 0 0 8px; }
.form-in .wiz-progress + h1, .form-in .wiz-dots + h1 { text-align: center; }
.form-in .wiz-dots + h1 + .lede, .form-in .wiz-dots ~ .lede { text-align: center; margin-inline: auto; }
.form-in .wiz-dots ~ .lede { max-width: 440px; }
/* the wait state: same page shape, the three named steps ticking, then the
   two connect cards */
.wait-in { text-align: center; }
.wait-steps { list-style: none; margin: 28px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 12px; text-align: left; max-width: 320px; margin-inline: auto; }
.ws { display: flex; align-items: center; gap: 12px; font-size: var(--fs-3); color: var(--low); }
.ws-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line);
  flex-shrink: 0; position: relative; background: var(--panel); }
.ws.active .ws-dot { border-color: var(--warn); }
.ws.active .ws-dot::after { content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--warn); animation: ws-pulse 1.1s ease-in-out infinite; }
.ws.done { color: var(--hi); }
.ws.done .ws-dot { border-color: var(--good); background: var(--good); }
.ws.done .ws-dot::after { content: '✓'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 11px; color: var(--panel); animation: none; }
@keyframes ws-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.wait-skel { max-width: 440px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 8px; }
.wait-skel-row { height: 44px; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--line); position: relative; overflow: hidden; }
.wait-skel-row::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--panel), transparent);
  animation: skel-sheen 1.6s ease-in-out infinite; }
@keyframes skel-sheen { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
.wait-google { max-width: 520px; margin: 32px auto 0; padding: 0; border: 0; background: transparent; }
.wait-google .label { text-align: center; }
.wait-google-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wait-google-btns form { margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 16px; display: flex; }
.wait-google-btns form .btn-primary { width: 100%; }
@media (max-width: 480px) { .wait-google-btns { grid-template-columns: 1fr; } }

.orline { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--low); font-size: var(--fs-1); }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--google-bg); color: var(--google-ink); border: 1px solid var(--line); border-radius: 8px; padding: 11px 20px;
  font-size: var(--fs-3); font-weight: 500; }
.btn-google:hover { background: var(--panel2); }
.btn-google svg { width: 18px; height: 18px; }

/* ---- the "we are working on it" page ---- */
.wait { padding: 80px 24px; text-align: center; }
.wait-in { max-width: 560px; margin: 0 auto; }
.wait h1 { font-size: clamp(24px, 3vw, 28px); margin: 0 0 12px; }
.wait p { font-size: var(--fs-3); line-height: 1.6; color: var(--mid); }

/* ---- legal pages ---- */
.doc { padding: 56px 24px 80px; }
.doc-in { max-width: 680px; margin: 0 auto; }
.doc-in h1 { font-size: clamp(24px, 3vw, 28px); margin: 0 0 10px; }
.doc-in h2 { font-size: var(--fs-4); margin: 32px 0 8px; }
.doc-in p, .doc-in li { font-size: var(--fs-3); line-height: 1.65; color: var(--mid); }
.doc-in ul { padding-left: 20px; }

/* ---- pricing page: the shared plan cards; the old table rules stay for
   the legal/staff tables that still use them ---- */
.ptable { width: 100%; border-collapse: collapse; margin: 24px 0; }
.ptable th, .ptable td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-3); vertical-align: top; }
.ptable th { font-size: var(--fs-1); color: var(--low); font-weight: 500; }
.ptable tr:nth-child(even) { background: var(--bg); }
.ptable .pr { font-size: var(--fs-4); font-weight: 600; color: var(--hi); white-space: nowrap; }

/* ---- Phase 4 / Phase 6: the dual-impact example rows drawn with the
   roadmap's OWN macro — as real light rows, hairlines, no card per row ---- */
.ex-tasks { max-width: 640px; margin-top: 12px; border-top: 1px solid var(--line); container-type: inline-size; }
.ex-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 4px 20px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--line); }
.ex-title { font-size: var(--fs-3); font-weight: 500; color: var(--hi); grid-column: 1; }
.ex-chips { display: flex; gap: 8px; align-items: center; font-size: var(--fs-1); color: var(--low); grid-column: 1; }
.ex-row .impbars { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; gap: 5px; margin: 0; }
.ex-tasks .impbars-legend { margin: 8px 0 4px; }
@media (max-width: 560px) {
  .ex-row { grid-template-columns: 1fr; }
  .ex-row .impbars { grid-column: 1; grid-row: auto; margin-top: 6px; }
}
/* G8 (fix round 2): the how-it-works step card is 320px wide — an explicit
   width, because a size container's inline size may not come from its
   content; the container query stacks the bars under the title below
   480px of ROW width, so the title never squeezes to 92px. Placed AFTER
   the base .ex-row rule: same specificity, the later one wins. */
.rail-step-c.ex-tasks { width: 320px; max-width: 100%; }
@container (max-width: 480px) {
  .ex-row { grid-template-columns: 1fr; }
  .ex-row .impbars { grid-column: 1; grid-row: auto; margin-top: 6px; }
}
/* the four steps after sign-up: four white cards */
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.step4 { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; font-size: var(--fs-2); line-height: 1.6;
  color: var(--mid); border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--panel); }
.step4 b { color: var(--hi); font-weight: 600; display: block; margin-bottom: 2px; font-size: var(--fs-3); }
.step4-n { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: var(--fs-2); font-weight: 600; color: var(--hi); }
/* the shared plan table on a public band */
.plan-table { margin-top: 6px; }
.plan-table .plan-cadence-note { margin: 0 0 12px; }
.plan-table .plan-foot { margin-top: 14px; max-width: 700px; }
.pub .plan-card { background: var(--panel); }
/* pricing FAQ */
.faq { margin: 0; }
.faq dt { font-size: var(--fs-3); font-weight: 600; color: var(--hi); margin: 20px 0 6px; }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 0; font-size: var(--fs-3); line-height: 1.6; color: var(--mid); }

/* ---- footer ---- */
.pubfoot { border-top: 1px solid var(--line); padding: 24px 32px 48px; background: var(--panel); }
.pubfoot-in { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pubfoot-in .brand { font-size: var(--fs-3); font-weight: 500; letter-spacing: -.035em; }
.pubfoot-in .spacer { flex: 1; }
.pubfoot-in a { font-size: var(--fs-2); color: var(--low); }
.pubfoot-in a:hover { color: var(--hi); }

@media (max-width: 640px) {
  .hero { padding: 48px 20px 40px; }
  .band, .cols { padding: 40px 20px; }
  .fld.two { grid-template-columns: 1fr; }
  .fld-three { grid-template-columns: 1fr; }
  /* G10 is superseded by M6 (fold-in, below): the phone bar is the lockup,
     the one button and the menu button; the links are in the menu panel */
  .form-wrap { padding: 40px 20px 72px; }
}

/* Ben fold-in 2 (M5): "I'll do this later" on the wait state is a plain
   secondary text button (Buffer's "Skip") — mid grey, no underline, 13px —
   not a blue underlined link. */
.hint a.wait-later, .wait-later { color: var(--mid); text-decoration: none; font-size: var(--fs-2); font-weight: 500; }
.hint a.wait-later:hover { color: var(--hi); text-decoration: none; }

/* The chosen mark in the public shell, shipped 2026-09-17. Same size and gap
   as the app shell so the two headers read as one product. */
.pubnav .brand { display: inline-flex; align-items: center; gap: 8px; }
/* Phase 15 (A2): the orbital S sits bare, no tile, so no radius */
/* P15 fold-in: its size comes from the one lockup pair (ledger.css, the
   compact lockup), never a second number here */
.pubnav .brand-mark { border-radius: 0; display: block; flex: none; }

/* Visual QA, 19 Sep 2026: on a phone the header and footer links were 20px
   tall and the two links under the sign-in form 15px: fine to read, hard to
   hit with a thumb. 44px is the house floor for anything tappable. */
@media (max-width: 760px) {
  .pubnav-l, .pubfoot-in a, .tap-link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .pubfoot-in { gap: 4px 20px; }
}

/* ---- M6 (Phase 16/17 fold-in; Harsha 25 Sep: "The main button needs to be
   visible, sticky up top, and everything else moved into a hamburger menu. So
   the only things visible on mobile should be logo, button and hamburger.")
   At 760px and under: ONE row, never wrapping (the old 760px tap-size rule
   used to beat the 640px hide and wrapped the bar to three lines at 390). The
   bar stays sticky (.pubnav, above); the panel drops from its bottom edge,
   over the page, on the same ground with the same hairline. This block comes
   AFTER the 760px tap-size block on purpose, so nothing later undoes it. */
@media (max-width: 760px) {
  .pubnav { padding: 10px 16px; gap: 10px; flex-wrap: nowrap; }
  /* Harsha, 25 Sep (UAT round 2): "The button needs to be sized and the anchor
     text needs to fit in the same line", "hamburger menu needs no border".
     Lockup 24px mark + 18px word, button 40px high with its label on one line,
     menu button a bare three-line icon on a 44px tap target: all three fit a
     360px screen with 16px gutters. */
  .pubnav .brand { flex: none; }
  .pubnav .brand-word { font-size: calc(var(--lockup-word) * 3 / 4); }
  .pubnav .btn-primary.pubnav-main { flex: none; margin-left: auto; height: 40px; min-height: 40px; padding: 0 14px;
    font-size: var(--fs-3); white-space: nowrap; }
  .pubnav-burger { display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; padding: 0; margin-right: -10px; border: 0; border-radius: var(--radius-ctl);
    background: none; color: var(--hi); cursor: pointer; }
  .pubnav-burger svg { width: 24px; height: 24px; }
  .pubnav .spacer { display: none; }
  .pubnav-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pubnav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 4px 16px 12px;
    background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .pubnav.is-open .pubnav-menu { display: flex; animation: pubnav-drop var(--motion); }
  .pubnav-menu .pubnav-l { min-height: 44px; font-size: var(--fs-3); border-bottom: 1px solid var(--line); }
  .pubnav-menu .pubnav-l:last-child { border-bottom: 0; }
}
@keyframes pubnav-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pubnav.is-open .pubnav-menu { animation: none; } }

/* ---- Phase 17 (V2): "See inside", the landing walkthrough video. The band
   sits on the app's own ground (--bg, the .alt band), so the video's edges
   fade into the same colour the app is painted on: a mask on the video, not
   a box round it (the clip's reference fades its frame into a dark page; this
   is the light-page version). Wider than the text column on desktop, the full
   width less a 16px gutter on a phone. Reduced motion: the poster only. ---- */
.inside-frame { position: relative; left: 50%; transform: translateX(-50%);
  width: min(1120px, calc(100vw - 64px)); margin-top: 28px; }
.inside-video, .inside-poster { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, black 7%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, black 7%, black 88%, transparent 100%);
  mask-composite: intersect; }
.inside-poster { display: none; }
.inside-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 12px; }
.inside-note { font-size: var(--fs-2); color: var(--low); }
.inside-toggle { min-height: 44px; padding: 0 16px; border-radius: var(--radius-ctl); cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--hi);
  font: inherit; font-size: var(--fs-2); font-weight: 500; transition: border-color var(--motion); }
.inside-toggle:hover { border-color: var(--mid); }
.inside-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .inside-frame { width: calc(100vw - 32px); margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .inside-video, .inside-toggle { display: none; }
  .inside-poster { display: block; }
}


/* ======================================================================
   The brand, 18 Oct 2026 (brand/BRAND.md). Outfit, ink on white, one blue.
   ====================================================================== */

/* the first screen: the headline, the one idea beside it (the tag that
   becomes a task), three facts under the button, each true on the record */
.hero-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-3); color: var(--mid); }
.hero-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: none; }
.hero-cta .pubnav-l { font-size: var(--fs-4); color: var(--hi); font-weight: 500; }

/* ---- the one idea: the tag that becomes a task ----
   A line of the demo site's own code on top; the task it becomes, in the
   roadmap's own row (the same macro the app draws), underneath. The code
   types itself, the closing-tag mark stamps it, the row fills in. Three pairs
   loop, 4.6 s each, driven by landing.html's small script; reduced motion
   shows the first pair still. The card is white on the ground, one shadow. */
.tag-demo { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: 22px 24px 18px; min-width: 0; }
.tag-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tag-demo-t { font-size: var(--fs-2); color: var(--low); }
.tag-demo-t b { color: var(--hi); font-weight: 500; }
.tag-code { position: relative; background: var(--bg); border-radius: 12px; padding: 16px 18px 14px; min-height: 92px; }
.tag-file { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--low); margin-bottom: 8px; }
.tag-pair { display: none; }
.tag-pair.on { display: block; }
.tag-line { margin: 0; font-family: var(--font-mono); font-size: 15px; line-height: 1.5; color: var(--hi); white-space: pre; overflow: hidden; }
.tag-line b { font-weight: 500; color: var(--accent); }
.tag-note { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--crit); margin-top: 4px; }
.tag-stamp { position: absolute; right: 14px; bottom: 12px; width: 26px; height: 26px; }
.tag-demo.is-live .tag-stamp { opacity: 0; transform: scale(.6); }
.tag-demo .tag-arrow { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: var(--fs-2); color: var(--low); }
.tag-demo .tag-arrow::before { content: ""; width: 2px; height: 18px; background: var(--line); margin-left: 12px; }
.tag-demo .ex-tasks { border-top: 0; margin-top: 0; max-width: none; }
.tag-demo .ex-row { border-bottom: 0; padding: 6px 0 0; display: none; }
.tag-demo .ex-row.on { display: grid; }
.tag-demo .ex-row .impbar-f { transform-origin: left; }
.tag-demo-foot { margin: 14px 0 0; font-size: var(--fs-1); color: var(--low); }
@media (prefers-reduced-motion: no-preference) {
  .tag-demo.is-live .tag-pair.on .tag-line { width: 0; animation: tag-type 1.4s steps(var(--n, 34), end) .2s forwards; }
  .tag-demo.is-live .tag-pair.on .tag-note { opacity: 0; animation: tag-fade .3s ease 1.7s forwards; }
  .tag-demo.is-live .tag-stamp { animation: tag-stamp .35s cubic-bezier(.2,.9,.3,1.3) 1.9s forwards; }
  .tag-demo.is-live .ex-row.on { opacity: 0; transform: translateY(6px); animation: tag-fade .4s ease 2.3s forwards; }
  .tag-demo.is-live .ex-row.on .impbar-f { transform: scaleX(0); animation: tag-fill .9s cubic-bezier(.2,.7,.2,1) 2.6s forwards; }
}
@keyframes tag-type { from { width: 0; } to { width: 100%; } }
@keyframes tag-fade { to { opacity: 1; transform: none; } }
@keyframes tag-stamp { to { opacity: 1; transform: none; } }
@keyframes tag-fill { to { transform: scaleX(1); } }
@media (max-width: 640px) {
  .tag-demo { padding: 16px 16px 14px; }
  .tag-line { font-size: 13px; }
}

/* ---- the sign-off: the name set large at the foot of every public page,
   in ink, with the brand's blue full stop. The links sit above it. ---- */
.pubfoot { padding: 28px 32px 24px; }
.pubfoot-name { max-width: 1040px; margin: 36px auto 0; font-weight: 500; letter-spacing: -.045em; line-height: .9;
  font-size: clamp(44px, 18.5vw, 200px); color: var(--hi); user-select: none; overflow: hidden; white-space: nowrap; }
.pubfoot-name img { display: inline-block; height: 1em; vertical-align: -.26em; }
.pubfoot-name .pf-lt { width: .531em; margin-right: .02em; }
.pubfoot-name .pf-gt { width: .9375em; margin-left: .03em; }
.pubfoot-legal { max-width: 1040px; margin: 16px auto 0; font-size: var(--fs-1); color: var(--low); }
@media (max-width: 760px) { .pubfoot { padding: 20px 16px 16px; } .pubfoot-name { font-size: clamp(40px, 17.5vw, 130px); margin-top: 24px; } }

/* no numbered circles (brand/BRAND.md §6): the step number is a plain blue
   numeral, the title carries the weight */
.step4-n, .rail-step-n { width: auto; height: auto; border: 0; border-radius: 0; justify-content: flex-start;
  font-size: var(--fs-3); font-weight: 500; color: var(--accent); }
.rail-step { grid-template-columns: 28px 1fr auto; }

/* ---- the comparison page (/seo-audit-tool-australia, 22 Oct 2026) ---- */
.eyebrow { margin: 0 0 10px; font-size: var(--fs-2); font-weight: 500; color: var(--low); }
.pick-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; }
.pick h3 { font-size: var(--fs-4); margin: 0 0 8px; font-weight: 600; letter-spacing: -.01em; }
.pick p { font-size: var(--fs-3); line-height: 1.6; color: var(--mid); margin: 0; }
.pick b, .tool b, .ask-list b { color: var(--hi); font-weight: 600; }
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -8px; padding: 0 8px; }
.ptable.cmp { min-width: 760px; margin: 8px 0 12px; }
.ptable.cmp td { font-size: var(--fs-2); line-height: 1.5; color: var(--mid); vertical-align: top; }
.ptable.cmp td.pr { font-size: var(--fs-3); white-space: normal; }
.src-note { font-size: var(--fs-1); line-height: 1.6; color: var(--low); max-width: 700px; margin: 0; }
.tools .tool { padding: 22px 0; border-top: 1px solid var(--line); }
.tools .tool:first-of-type { border-top: 0; padding-top: 6px; }
.tool h3 { font-size: clamp(18px, 2.2vw, 22px); margin: 0 0 10px; font-weight: 600; letter-spacing: -.01em; }
.tool p { font-size: var(--fs-3); line-height: 1.65; color: var(--mid); margin: 0 0 10px; }
.ask-list { margin: 0; padding-left: 22px; }
.ask-list li { font-size: var(--fs-3); line-height: 1.6; color: var(--mid); margin: 0 0 14px; }
@media (max-width: 760px) {
  .pick-grid { grid-template-columns: 1fr; }
}