/* The landing page: the pitch beside an application that Told fills in, then the four steps
   of an application form, each one selling what Told does at that step. Everything is set
   in Archivo, upright, including what the applicant writes; only the logo has its own face.
   Blue is Told's brand. Purple is only ever Told's "check this" mark, drawn as the extension
   draws it. Form fields have 3px corners and Told's own UI has 8px. */
:root {
  --paper: #f2f3f6;
  --field: #ffffff;
  --print: #1b1c21;
  --muted: #5a5f6e;
  --rule: #c8cfe2;
  --brand: #1f3fc4;
  --on-brand: #ffffff;
  --check: #6d28d9;
  --on-check: #ffffff;
  --req: #c2410c;
  --lift: rgba(20, 22, 40, 0.22);
  --ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wordmark: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14151b; --field: #1c1e26; --print: #e8e9ef; --muted: #a1a5b5; --rule: #343951;
    --brand: #8eaaff; --on-brand: #14151b; --check: #b69bfb; --on-check: #14151b;
    --req: #fb923c; --lift: rgba(0, 0, 0, 0.6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #14151b; --field: #1c1e26; --print: #e8e9ef; --muted: #a1a5b5; --rule: #343951;
  --brand: #8eaaff; --on-brand: #14151b; --check: #b69bfb; --on-check: #14151b;
  --req: #fb923c; --lift: rgba(0, 0, 0, 0.6); color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--print);
  font: 400 18px/1.55 var(--ui);
  font-variation-settings: "wdth" 100;
}
h1, h2, p, ul { margin: 0; }
h1, h2 { text-wrap: balance; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.req { color: var(--req); }
.lead { font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 30em; }
.note { font-size: 15px; color: var(--muted); }

/* Buttons, squared like a form's */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 24px;
  border: 2px solid var(--brand); border-radius: 3px;
  background: var(--brand); color: var(--on-brand);
  font-weight: 700; font-size: 17px; line-height: 1;
  font-variation-settings: "wdth" 110;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.button:hover { background: transparent; color: var(--brand); }
.button.line { background: transparent; color: var(--print); border-color: var(--print); }
.button.line:hover { background: var(--print); color: var(--paper); }
.button.small { padding: 10px 16px; font-size: 15px; }

/* Masthead */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; border-bottom: 2px solid var(--print); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--wordmark); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -0.02em; text-decoration: none; }
.logo svg { width: 34px; height: 34px; }
.masthead nav { display: flex; align-items: center; gap: 28px; font-weight: 600; font-size: 16px; }
.masthead nav a:not(.button) { text-decoration: none; }
.masthead nav a:not(.button):hover { text-decoration: underline; text-underline-offset: 4px; }

/* Hero: the pitch, and Told filling in an application beside it */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; padding-block: 88px 112px; }
.hero h1 { font-weight: 800; font-variation-settings: "wdth" 110; font-size: clamp(44px, 5vw, 68px); line-height: 0.98; letter-spacing: -0.025em; }
.hero .lead { margin-top: 24px; }
.hero .buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.hero .note { margin-top: 16px; }

.demo { background: var(--field); border: 1.5px solid var(--rule); border-radius: 8px; box-shadow: 0 30px 60px -36px var(--lift); }
.demo-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 16px 22px; border-bottom: 1.5px solid var(--rule); font-size: 15px; color: var(--muted); }
.demo-top b { color: var(--print); font-size: 17px; font-weight: 800; font-variation-settings: "wdth" 110; }
.demo-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; padding: 20px 22px 26px; }
.demo-status { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1.5px solid var(--rule); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-status svg { width: 20px; height: 20px; flex: none; }

/* Fields, as Told fills them */
.f { display: grid; gap: 6px; min-width: 0; align-content: start; }
.f.wide { grid-column: 1 / -1; }
.l { font-size: 14px; font-weight: 600; }
.v {
  position: relative;
  min-height: 44px; padding: 10px 12px;
  background: var(--field); border: 1.5px solid var(--rule); border-radius: 3px;
  font-size: 16px; overflow-wrap: anywhere;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.v.select { padding-right: 38px; }
.v.select::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-75%) rotate(45deg); }
.v.draft { min-height: 8em; line-height: 1.55; outline: 2px dashed transparent; outline-offset: 5px; transition: outline-color 0.35s, border-color 0.15s, box-shadow 0.15s; }
.v.draft.marked { outline-color: var(--check); }
.ph { color: var(--muted); }
.filling { border-color: var(--brand) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.pills { display: flex; gap: 8px; }
.pill { padding: 9px 16px; border: 1.5px solid var(--rule); border-radius: 3px; background: var(--field); font-weight: 600; font-size: 15px; transition: background 0.15s, color 0.15s; }
.pill.on { border-color: var(--print); background: var(--print); color: var(--paper); }
.tag {
  position: absolute; right: 12px; bottom: -13px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  height: 24px; padding: 0 10px 0 8px; border-radius: 12px;
  background: var(--check); color: var(--on-check);
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: opacity 0.35s;
}
.tag b { font-weight: 500; padding-right: 7px; border-right: 1px solid currentColor; opacity: 0.9; }
.gone { opacity: 0; }

/* How it works, as the steps of a form */
.application { border-top: 2px solid var(--print); }
.stepper { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1.5px solid var(--rule); }
.stepper ol { display: flex; margin: 0; padding: 14px 0; list-style: none; }
.stepper li { flex: 1 1 0; min-width: 0; }
.stepper a { display: flex; align-items: center; gap: 9px; padding-right: 10px; color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.stepper li:not(:last-child) a::after { content: ""; flex: 1 1 12px; min-width: 8px; height: 1.5px; background: var(--rule); }
.stepper .dot { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--field); font-size: 13px; font-weight: 800; }
.stepper .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper li.done .dot { background: var(--print); border-color: var(--print); color: var(--paper); }
.stepper li.current a { color: var(--print); }
.stepper li.current .name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.stepper .mini { display: none; }
.bar { height: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--brand); transition: width 0.3s; }

.step {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center;
  padding-block: 120px;
  scroll-margin-top: 58px;
}
.step + .step { border-top: 1.5px solid var(--rule); }
.step .of { font-size: 15px; font-weight: 600; color: var(--muted); }
.step h2 { margin-top: 12px; font-weight: 800; font-variation-settings: "wdth" 112; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.02em; }
.step .lead { margin-top: 20px; }

/* Step 1: everywhere it works */
.sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }
.sites li { padding: 16px 18px; background: var(--field); border: 1.5px solid var(--rule); border-radius: 3px; font-weight: 700; font-size: 17px; font-variation-settings: "wdth" 106; overflow-wrap: anywhere; }
.caption { margin-top: 16px; font-size: 16px; color: var(--muted); }

/* Step 2: the interview */
.chat { display: grid; gap: 14px; padding: 26px 28px; background: var(--field); border: 1.5px solid var(--rule); border-radius: 8px; }
.chat p { max-width: 85%; font-size: 18px; line-height: 1.45; }
.chat .told { font-weight: 650; }
.chat p:not(.told, .saved) { justify-self: end; padding: 10px 14px; border-radius: 8px; background: var(--paper); }
.chat .saved { display: flex; align-items: center; gap: 10px; max-width: none; margin-top: 8px; padding-top: 16px; border-top: 1.5px solid var(--rule); font-size: 16px; color: var(--muted); }
.chat .saved b { color: var(--print); }
.chat svg { width: 20px; height: 20px; flex: none; }

/* Step 3: Told's draft beside a generic one */
.compare { display: grid; gap: 28px; }
.who { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.compare .v.draft { min-height: 0; padding: 18px 20px; font-size: 19px; }
.generic p:not(.who) { padding: 18px 20px; border: 1.5px dashed var(--rule); border-radius: 3px; font-size: 19px; line-height: 1.55; color: var(--muted); }

/* Step 4: what it adds up to */
.stats { border: 1.5px solid var(--rule); border-radius: 3px; background: var(--field); }
.stat { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 24px 26px; }
.stat + .stat { border-top: 1.5px solid var(--rule); }
.stat b { color: var(--brand); font-weight: 800; font-variation-settings: "wdth" 118; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.stat span { font-size: 17px; line-height: 1.4; color: var(--muted); }

/* Closing */
.closing { background: var(--brand); color: var(--on-brand); }
.closing .page { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; padding-block: 96px; }
.closing h2 { font-weight: 800; font-variation-settings: "wdth" 116; font-size: clamp(38px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.02em; }
.closing .button { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); }
.closing .button:hover { background: transparent; color: var(--on-brand); }
.closing .note { margin-top: 10px; color: var(--on-brand); opacity: 0.85; }

/* The waitlist, while Told is invite-only */
.waitlist .page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: end; padding-block: 88px; border-bottom: 2px solid var(--print); }
.waitlist h2 { font-weight: 800; font-variation-settings: "wdth" 110; font-size: clamp(30px, 4vw, 48px); line-height: 1.02; letter-spacing: -0.02em; }
.waitlist .lead { margin-top: 16px; }
.waitlist form { display: grid; gap: 8px; }
.waitlist-row { display: flex; flex-wrap: wrap; gap: 10px; }
.waitlist-row input { flex: 1 1 220px; min-width: 0; font: inherit; color: var(--print); }
.waitlist-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
@media (max-width: 860px) { .waitlist .page { grid-template-columns: minmax(0, 1fr); } }

footer .page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 28px 36px; font-size: 15px; color: var(--muted); }

@media (max-width: 980px) {
  .hero, .step { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero { padding-block: 56px 80px; }
  .step { padding-block: 80px; }
  .stepper ol { display: none; }
  .stepper .mini { display: grid; gap: 8px; padding-block: 12px; font-size: 15px; font-weight: 600; }
  .masthead nav a:not(.button) { display: none; }
  .closing .page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .demo-fields { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
  .demo-top, .demo-status { padding-inline: 16px; }
  .sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sites li { padding: 12px 14px; font-size: 16px; }
  .chat { padding: 20px 18px; }
  .stat { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .masthead .button { padding: 9px 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tag, .v, .bar span { transition: none; }
}