/* Legwork landing page. Tokens and fonts live in base.css.
   Frame: the product page of an answer engine. A bar with the section links as a segmented
   control, then one centred column: the ask box with a sample question and, right under it,
   the answer card. Sentences arrive one by one, each with its citation chips; the sources are
   cards under the answer; the last sentence is locked and carries the download offer.
   Below: the five steps as numbered cards, the three rules as cards with a specimen each,
   the questions as a chat thread, and the ask box again to close.
   Flat colour only. The highlighter is for marks and citation chips, nothing else. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 var(--sans); word-spacing: .05em; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
mark { padding: 0 .16em; border-radius: .22em; background: var(--mark); color: var(--mark-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: #fff; color: var(--bg); font-weight: 600; }
.skip:focus { left: 12px; }
:root {
  --pad: max(24px, calc((100vw - 1200px) / 2));
  --line-2: rgba(255, 255, 255, .16);
  --mark-dim: #432C3A;   /* the highlighter at 18% on a panel: the fill of a citation chip */
  --ghost: #403D47;      /* a step not taken yet */
}

/* ---------- small pieces ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--text); color: var(--bg); font: 600 16px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, transform .15s ease-out; }
.btn:hover { background: #fff; }
.btn:active { transform: scale(.97); }
.btn svg { flex: none; width: 18px; height: 18px; }
.btn--ghost { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, .07); }
.btn--sm { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.note { font-size: 13px; color: var(--text-2); }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--panel-2); font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.caret { display: inline-block; width: max(2px, .07em); height: 1em; margin-left: .1em; vertical-align: -.14em; border-radius: 1px; background: var(--mark); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* A citation chip: the number of a source. */
.cite { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--mark-dim); color: var(--mark); font: 600 12px/1 var(--mono); letter-spacing: 0; transition: background-color .15s ease-out, color .15s ease-out; }
.cite.is-hot { background: var(--mark); color: var(--mark-ink); }
.cite--locked { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }

/* ---------- nav: logo, the links as a segmented control, download ---------- */

.nav { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 var(--pad); background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s ease-out; }
.nav.is-stuck { border-bottom-color: var(--line); }
.logo { display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-height: 40px; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.nav .btn { justify-self: end; }
.seg { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.seg a { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: background-color .2s ease-out, color .2s ease-out; }
.seg a:hover { color: var(--text); }
.seg a[aria-current] { background: var(--panel-2); color: var(--text); }

/* ---------- first screen: pitch, ask box, answer card ---------- */

.hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 32px var(--pad) 0; text-align: center; }
h1, h2, h3 { word-spacing: .08em; }
h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
h1 mark { display: inline-block; padding: .02em .13em .05em; line-height: 1; }
.lede { max-width: 35em; margin-top: 12px; font-size: 18px; color: var(--text-2); text-wrap: pretty; }
.stage { width: min(880px, 100%); margin-top: 28px; text-align: left; }

.ask { padding: 18px 14px 14px 22px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); }
.ask__q { min-height: 30px; font-size: 21px; line-height: 30px; font-weight: 500; letter-spacing: -.005em; }
.ask__q, .src__at, .others button { font-kerning: none; }   /* johndoe.example: keep the full stop clear of its neighbours */
.ask__bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ask__bar .note { flex: 1; min-width: 0; }
.send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: 12px; background: var(--text); color: var(--bg); cursor: pointer; transition: background-color .15s ease-out, transform .15s ease-out; }
.send:hover { background: #fff; }
.send:active { transform: scale(.94); }
.send svg { width: 18px; height: 18px; }

.reply { margin-top: 12px; padding: 20px 24px 24px; border-radius: 18px; background: var(--panel); }
.reply__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 26px; font-size: 14px; }
.reply__head > b { margin-left: -2px; font-weight: 600; }
.reply__head .tag { margin-left: auto; }
.walk { flex: none; width: 22px; height: 22px; fill: var(--text); }
.walk rect + rect { fill: var(--mark); }
.js .reply:not(.is-done) .walk rect { animation: step .7s steps(1) infinite; }
.js .reply:not(.is-done) .walk rect + rect { animation-delay: -.35s; }
@keyframes step { 50% { opacity: .22; } }
.tally { color: var(--text-2); font-variant-numeric: tabular-nums; }
.tally b { font-weight: 600; color: var(--text); }
#citedWrap { transition: opacity .3s ease-out; }
.reply.is-busy #citedWrap { opacity: 0; }

/* The answer. A sentence that has not arrived yet is a bar the shape of its words. */
.answer { min-height: 4.8em; margin-top: 14px; font-size: 20px; line-height: 1.6; font-weight: 500; letter-spacing: -.005em; }   /* three lines, whichever sample is asked */
.line { border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .35s ease-out, background-color .35s ease-out; }
.js .line:not(.is-in) { background: var(--panel-2); color: transparent; }
.nb { white-space: nowrap; }
.answer .cite, .lock__line .cite { margin-left: 5px; vertical-align: 3px; }
.answer .cite { transition: opacity .3s ease-out .15s, background-color .15s ease-out, color .15s ease-out; }
.js .line:not(.is-in) .cite { opacity: 0; transition: none; }
/* The highlighter stroke: a flat colour swept in from the left. */
.hl { padding: 0 .14em; border-radius: 5px; background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 0 / 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.line.is-in .hl { background-size: 100% 100%; color: var(--mark-ink); transition: background-size .55s cubic-bezier(.3, .7, .2, 1) .3s; animation: ink .85s ease-out; }
@keyframes ink { 0% { color: transparent; } 35%, 60% { color: var(--text); } 90% { color: var(--mark-ink); } }

.reply__k { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.sources { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.src { display: grid; gap: 5px; align-content: start; padding: 10px 12px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: background-color .35s ease-out, border-color .2s ease-out; }
.src > * { transition: opacity .35s ease-out; }
.src b { font-size: 14px; line-height: 1.3; font-weight: 600; }
.src__at { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.src__at .cite { flex: none; }
.src.is-hot { border-color: var(--mark); }
.js .src:not(.is-in) { border-style: dashed; background: none; }
.js .src:not(.is-in) > * { opacity: 0; }

/* The cliffhanger: the sentence that answers the question, held back, with the offer under it. */
.lock { margin-top: 18px; padding: 16px 20px 20px; border: 1px solid transparent; border-radius: 14px; background: var(--panel-2); transition: background-color .4s ease-out, border-color .4s ease-out; }
.js .lock:not(.is-in) { border: 1px dashed var(--line); background: none; }
.js .lock:not(.is-in) .sheet { opacity: 0; translate: 0 8px; visibility: hidden; transition: none; }
.lock__line { font-size: 20px; line-height: 1.6; font-weight: 500; letter-spacing: -.005em; }
.redact { display: inline-block; width: 7.4em; height: 1.1em; margin-left: .1em; border-radius: 6px; background: var(--bg); vertical-align: -.22em; transition: opacity .35s ease-out; }
.js .line:not(.is-in) .redact { opacity: 0; transition: none; }
.sheet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 12px; transition: opacity .45s ease-out, translate .5s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.sheet[hidden] { display: none; }
html:not(.js) .reply__k, html:not(.js) .lock { display: none; }   /* without the script there is no sample to show */
.sheet h2 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
.sheet p { margin-top: 2px; font-size: 14px; color: var(--text-2); }
.sheet__go { display: flex; flex-wrap: wrap; gap: 8px; }

.others { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 100%; margin-top: 18px; }
.others__k { margin-right: 6px; font-size: 14px; color: var(--text-2); }
.others button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 12px; background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font: 500 14px/1.25 var(--sans); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.others button:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.others button[aria-pressed="true"] { background: var(--panel-2); box-shadow: none; color: var(--text); }

/* ---------- section heads ---------- */

h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
.trail, .rules, .faq { padding: 128px var(--pad) 0; }
.head { text-align: center; }
.head p { margin-top: 12px; font-size: 18px; color: var(--text-2); }

/* ---------- five steps: five numbered cards, each with its count from the sample ---------- */

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 12px; margin-top: 48px; counter-reset: step; }
.steps li { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding: 20px; border-radius: 18px; background: var(--panel); counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--panel-2); font-size: 14px; font-weight: 600; }
.steps h3, .steps li > p, .stat { grid-column: 1 / -1; }
.steps h3 { margin-top: 26px; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; font-weight: 600; }
.steps li > p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.stat { display: grid; gap: 6px; margin-top: 20px; padding: 14px 16px 15px; border-radius: 12px; background: var(--bg); }
.stat b { font-size: 40px; line-height: 1; letter-spacing: -.03em; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { font-size: 14px; line-height: 1.3; color: var(--text-2); }
/* A shoe print in the corner of each card: left foot, right foot. The last one is highlighted. */
.print { position: relative; justify-self: end; width: 15px; height: 32px; margin: -1px 5px 0 0; rotate: -10deg; color: var(--ghost); transition: color .3s ease-out; }
.print::before, .print::after { content: ''; position: absolute; left: 0; background: currentColor; }
.print::before { top: 0; width: 15px; height: 20px; border-radius: 7.5px 7.5px 3px 3px; }
.print::after { left: 1.5px; bottom: 0; width: 12px; height: 9px; border-radius: 2px 2px 6px 6px; }
.steps li:nth-child(even) .print { rotate: 10deg; }
.steps.is-in .print, html:not(.js) .print { color: var(--text); }
.steps.is-in li:nth-child(2) .print { transition-delay: .25s; }
.steps.is-in li:nth-child(3) .print { transition-delay: .5s; }
.steps.is-in li:nth-child(4) .print { transition-delay: .75s; }
.steps.is-in li:nth-child(5) .print, html:not(.js) .steps li:nth-child(5) .print { color: var(--mark); transition-delay: 1s; }

/* ---------- three rules: three cards, the specimen at the foot of each ---------- */

.rules__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 12px; margin-top: 48px; }
.rules__grid > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: 28px; border-radius: 18px; background: var(--panel); }
.rules h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
.rules li > p { margin-top: 10px; font-size: 16px; color: var(--text-2); text-wrap: pretty; }
.spec { margin-top: 24px; padding: 16px 18px 18px; border: 1px solid transparent; border-radius: 12px; background: var(--bg); }
.spec__k { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.spec__t { margin-top: 10px; font-size: 16px; line-height: 1.35; font-weight: 600; }
.spec__q { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: balance; }
.spec__q span { display: inline-block; }   /* break between sentences, not inside one */
.spec--out .spec__t { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--text-3); }
.spec--none { border: 1px dashed var(--line-2); background: none; }

/* ---------- questions: a thread. Yours on the right, the answers on the left ---------- */

.chat { display: grid; gap: 28px; width: min(760px, 100%); margin: 48px auto 0; }
.qa { display: grid; gap: 10px; }
.qa h3 { justify-self: end; max-width: 86%; padding: 12px 18px 13px; border-radius: 18px 18px 6px 18px; background: var(--panel-2); font-size: 17px; line-height: 1.35; letter-spacing: 0; word-spacing: .05em; font-weight: 600; }
.qa__a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; max-width: 92%; }
.qa__a img { margin-top: 12px; border-radius: 22%; box-shadow: 0 0 0 1px var(--line-2); }
.qa__a p { justify-self: start; padding: 16px 20px 18px; border-radius: 6px 18px 18px 18px; background: var(--panel); font-size: 17px; line-height: 1.55; text-wrap: pretty; }

/* ---------- closing: the ask box again; its button is the download ---------- */

.final { padding: 136px var(--pad) 0; }
.ask--big { width: min(880px, 100%); margin: 0 auto; padding: 32px 24px 24px 36px; }
.ask--big h2 { min-height: 2.2em; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.1; letter-spacing: -.03em; text-wrap: wrap; }
.ask--big .ask__bar { margin-top: 16px; }
.ask--big .caret { height: .92em; vertical-align: -.1em; }

.foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 32px; padding: 96px var(--pad) 48px; font-size: 13px; color: var(--text-3); }
.foot .logo { color: var(--text); }
.foot__links { display: flex; flex-wrap: wrap; justify-self: end; gap: 0 24px; font-size: 14px; color: var(--text-2); }
.foot__links a { display: inline-flex; align-items: center; min-height: 40px; }
.foot__links a:hover { color: var(--text); }
.foot p { grid-column: 1 / -1; max-width: 76ch; }

.js [data-reveal] { opacity: 0; translate: 0 18px; transition: opacity .7s ease-out, translate .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
.js .rules__grid li:nth-child(2) { transition-delay: .08s; }
.js .rules__grid li:nth-child(3) { transition-delay: .16s; }

/* ---------- smaller screens ---------- */

@media (max-width: 1000px) {
  .steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .steps li { grid-row: auto; grid-template-rows: auto 1fr; grid-template-columns: 30px minmax(0, 1fr) 132px; gap: 0 12px; padding: 16px 16px 16px 18px; }
  .steps li::before { grid-column: 1; grid-row: 1; align-self: center; }
  .steps h3 { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  .steps li > p { grid-column: 1 / 3; grid-row: 2; margin-top: 10px; }
  .steps .stat { grid-column: 3; grid-row: 1 / 3; align-content: center; margin-top: 0; }
  .steps .stat b { font-size: 34px; }
  .print { display: none; }
  .rules__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .rules__grid > li { display: block; grid-row: auto; padding: 24px 22px 22px; }
}
@media (max-width: 900px) {
  .sources { display: flex; flex-wrap: wrap; }
  .src { flex: 1 1 30%; }
}
@media (max-width: 760px) {
  :root { --pad: 16px; }
  html { scroll-padding-top: 84px; }
  /* The first row scrolls away; the segmented control stays as a tab bar. */
  .nav { top: -52px; grid-template-columns: 1fr auto; grid-template-rows: 60px 48px; height: auto; padding-bottom: 8px; }
  .seg { grid-column: 1 / -1; grid-row: 2; }
  .seg a { flex: 1; padding: 0 8px; }
  .nav .btn { grid-column: 2; grid-row: 1; }
  .hero { padding-top: 20px; }
  .lede { font-size: 17px; }
  .stage { margin-top: 24px; }
  .ask { padding: 16px 12px 12px 16px; }
  .ask__q { min-height: 28px; font-size: 18px; line-height: 28px; }
  .ask__bar { flex-wrap: wrap; gap: 10px 12px; }
  .ask__bar .note { flex: 1 0 100%; order: 3; font-size: 12.5px; text-wrap: balance; }
  .reply { padding: 16px; }
  .reply__head .tally { order: 3; flex: 1 0 100%; }
  .answer, .lock__line { font-size: 18px; }
  .answer { min-height: 0; }
  .src { flex-basis: 40%; }
  .lock { padding: 14px 16px 16px; }
  .redact { width: 6.4em; }
  .sheet__go { flex: 1 0 100%; flex-direction: column-reverse; }
  .sheet__go .btn { padding: 0 12px; }
  .others { flex-direction: column; align-items: stretch; width: 100%; }
  .others__k { margin: 0 0 2px; text-align: center; }
  .trail, .rules, .faq { padding-top: 88px; }
  .steps, .rules__grid, .chat { margin-top: 32px; }
  .chat { gap: 22px; }
  .qa__a { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; max-width: none; }
  .qa__a img { width: 28px; height: 28px; }
  .qa__a p { padding: 14px 16px 16px; font-size: 16px; }
  .final { padding-top: 96px; }
  .ask--big { padding: 22px 12px 12px 16px; }
  .ask--big h2 { min-height: 0; }
  .ask--big .ask__bar { margin-top: 28px; }
  .ask--big .btn { flex: 1 0 100%; order: 4; }
  .foot { grid-template-columns: minmax(0, 1fr); padding-top: 72px; }
  .foot__links { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret, .walk rect, .line.is-in .hl { animation: none !important; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .line, .hl, .line.is-in .hl, .answer .cite, .redact, .src, .src > *, .lock, .sheet, .print { transition: none; }
  .print { color: var(--text); }
  .steps li:nth-child(5) .print { color: var(--mark); }
}

/* ---------- every screen size (added 2026-11-13) ---------- */
@media (min-width: 1600px) { :root { --pad: max(24px, calc((100vw - min(1200px + (100vw - 1600px) * 0.98, 1740px)) / 2)); } }
@media (min-width: 1600px) {
  h1 { font-size: clamp(48px, 19.2px + 1.8vw, 60px); }
  h2 { font-size: clamp(44px, 24.2px + 1.238vw, 52.8px); }
  .lede { font-size: clamp(18px, 12.6px + 0.3375vw, 20.7px); }
}

@media (min-width: 1600px) { .stage, .ask--big { width: min(clamp(880px, 55vw, 1120px), 100%); } .chat { width: min(clamp(760px, 47vw, 960px), 100%); } }
/* ---------- end every screen size ---------- */