/*
  Knockout List landing page. Colors and type from docs/marketing/brand-guide.md, by name.
  Phone first: the plain rules are for a phone; the @media blocks widen it for bigger screens.
  Rules the brand sets: black (Ink) text on white or Concrete; orange (Flag) only for the one
  button per section and one underlined word; never white text on orange; no shadows, no
  gradients; nothing smaller than 15 pixels; tap targets 48 pixels or more (56 for the form).
*/

/* The heading font ships with the page (fonts/, free under the SIL Open Font License).
   "swap": the headings show at once in a narrow bold the phone already has (see --font-head),
   then change to Barlow Semi Condensed when the file arrives. Most visitors come once, from a
   shared link, so they should see the brand's lettering on that first visit; the stand-in fonts
   are narrow too, so the change barely moves the text. */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/BarlowSemiCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --flag: #F2762E;
  --ink: #111318;
  --paper: #FFFFFF;
  --concrete: #F2F3F5;
  --steel: #4A5058;
  --line: #C9CDD3;
  --blueprint: #0F3D5C;
  --done: #157A40;
  --done-tint: #D7F0DF;
  --hold: #B45309;
  --hold-tint: #FFE9DB;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* If the font file is not there yet: a narrow bold the phone already has, then any bold. */
  --font-head: "Barlow Semi Condensed", "Avenir Next Condensed", "sans-serif-condensed", "Arial Narrow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 var(--font-body);
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--blueprint);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1, h2, h3 { margin: 0; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* Focus: a thick Blueprint ring on whatever the keyboard is on. Older browsers that do not know
   :focus-visible keep the ring on every focus, which is the safe side. */
a:focus, button:focus, summary:focus, .text-input:focus {
  outline: 3px solid var(--blueprint);
  outline-offset: 3px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Page frame ---------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
/* Text-only sections: lines no wider than 720 pixels, but on the same left edge as every other
   section, so the page reads as one column on a wide screen. */
.wrap.narrow > * { max-width: 720px; }
.wrap.narrow > .waitlist { max-width: 520px; } /* the second form, as wide as the first */

.band { padding: 48px 0; }
.band-paper { background: var(--paper); }
.band-concrete { background: var(--concrete); }

/* On a phone each section is at least one screen tall, its content in the middle. */
@media (max-width: 719px) {
  .band {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ---------- Type ---------- */

h1, h2, .step h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.05;
}
h1 { font-size: 44px; margin-bottom: 16px; }
h2 { font-size: 36px; margin-bottom: 20px; }

/* The small label over a section ("How it works"): body font, capitals, letterspaced. */
.eyebrow, h2.eyebrow {
  font: 700 15px/1.3 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
  margin: 0 0 12px;
}
h2.eyebrow { margin-bottom: 24px; }

.lead { font-size: 19px; }

/* The one highlighted word per section: Ink letters on a thick Flag underline. Orange letters
   on white would fail contrast (2.8 to 1, brand guide section 2), so the orange is the line. */
.hl {
  text-decoration-line: underline;
  text-decoration-color: var(--flag);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius);
  font: 600 18px/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Orange with black text, never white (brand guide: white on Flag fails). */
.btn-flag { background: var(--flag); color: var(--ink); }
.btn-flag:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.btn-flag:active { box-shadow: inset 0 0 0 3px var(--ink); }
.btn-small { min-height: 48px; padding: 0 16px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; box-shadow: none; }

/* ---------- 1. Top bar ---------- */

.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  color: var(--ink);
  text-decoration: none;
}
.brand img { width: 32px; height: 32px; flex: none; }
/* Written like the logo: capitals in Barlow Semi Condensed. */
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.topbar .btn-small { flex: none; font-size: 15px; padding: 0 14px; }

/* Small phones: a little tighter, so the button keeps its 16-pixel edge. */
@media (max-width: 399px) {
  .brand-name { font-size: 19px; }
  .topbar .btn-small { padding: 0 12px; }
}

/* The smallest phones: the name on two lines, KNOCKOUT over LIST, like the stacked logo, so the
   mark, the name and the button still fit on one bar. */
@media (max-width: 359px) {
  .topbar-in { gap: 8px; }
  .brand { gap: 6px; }
  .brand img { width: 28px; height: 28px; }
  .brand-name {
    font-size: 17px;
    line-height: 0.95;
    white-space: normal;
    width: min-content;
  }
  .topbar .btn-small { padding: 0 10px; }
}

/* ---------- Phone pictures ---------- */

/* The drawn screens, in a plain black phone edge so they read as a phone on either band.
   The width and height in the page keep the space while the picture loads (no jump). */
.phone-pic {
  width: 280px;
  max-width: 100%;
  height: auto;
  margin: 36px auto 0;
  border: 8px solid var(--ink);
  border-radius: 36px;
  background: var(--paper);
}

/* ---------- 2. Opening ---------- */

.hero { padding-top: 32px; }

/* ---------- The waitlist form (both copies) ---------- */

.waitlist {
  max-width: 520px;
  margin: 28px 0 0;
  scroll-margin-top: 16px;
}
.field { margin: 0 0 20px; }
.field-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
}

.text-input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border: 2px solid var(--steel);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.3 var(--font-body); /* 16 or more, so the iPhone does not zoom in */
  -webkit-appearance: none;
  appearance: none;
}
.text-input::placeholder { color: var(--steel); opacity: 1; }
.text-input[aria-invalid="true"] { border-color: var(--hold); }

/* The role: four big buttons, two by two. They are real radio buttons underneath, so the
   keyboard's arrow keys and screen readers work as usual; the native circle is invisible but
   sits over the whole button, so a tap anywhere on it picks it. */
.roles {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* The label fills its grid cell and the face fills the label, so the two buttons in a row are
   always the same height, even when one name wraps onto two lines. */
.seg-opt { position: relative; display: flex; }
.seg-opt input,
.consent-label input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.seg-face {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px;
  border: 2px solid var(--steel);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.seg-opt:hover .seg-face { border-color: var(--ink); }
.seg-opt input:checked + .seg-face {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
/* A check mark on the chosen one, so the choice does not rest on color alone. */
.seg-opt input:checked + .seg-face::before {
  content: "";
  flex: none;
  width: 7px;
  height: 13px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.seg-opt input:focus + .seg-face,
.consent-label input:focus + .box {
  outline: 3px solid var(--blueprint);
  outline-offset: 3px;
}
.seg-opt input:focus:not(:focus-visible) + .seg-face,
.consent-label input:focus:not(:focus-visible) + .box {
  outline: none;
}
.roles[data-invalid] .seg-face { border-color: var(--hold); }

/* The consent box: a large square, never ticked in advance. */
.consent-label {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 2px 0;
  cursor: pointer;
}
.box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
}
.consent-label input:checked + .box { background: var(--ink); }
.consent-label input:checked + .box::after {
  content: "";
  width: 9px;
  height: 16px;
  margin-top: -3px;
  border: solid var(--paper);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.consent[data-invalid] .box { border-color: var(--hold); }
.consent-text { padding-top: 3px; }
.consent-read { margin: 6px 0 0 44px; }

/* The answer after the button, read aloud by screen readers when it changes. It stays in the
   page while empty (an empty live region that appears later is sometimes not announced). */
.msg { margin: 0; font-weight: 600; }
.msg.is-ok,
.msg.is-error {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 6px solid;
  border-radius: 6px;
}
.msg.is-ok { background: var(--done-tint); border-left-color: var(--done); }
.msg.is-error { background: var(--hold-tint); border-left-color: var(--hold); }
.msg .preview { display: block; margin-top: 8px; font-weight: 400; }

.notice,
.small-line {
  font-size: 15px;
  color: var(--steel);
}
.notice { margin: 14px 0 0; }
.small-line { margin: 20px 0 0; max-width: 520px; }

/* ---------- 3. How it works ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 64px;
}
.step h3 { font-size: 28px; margin-bottom: 8px; }

/* ---------- 4, 7. Lists with Done check marks ---------- */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 34px;
}
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.2em;
  width: 8px;
  height: 15px;
  border: solid var(--done);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ---------- 7. Price ---------- */

.price-year { font-size: 20px; font-weight: 600; margin: -8px 0 24px; }

.tiers { margin-top: 10px; }
.tiers summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.tiers summary::-webkit-details-marker { display: none; }
.tiers summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tiers[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.tiers-body { margin-top: 12px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
th, td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
thead th { font-size: 15px; color: var(--steel); }
td { text-align: right; }
/* "Up to 10" and "More than 10" each stay on one line, even on the narrowest phone. */
tbody th { font-weight: 600; white-space: nowrap; }
/* "Contact us" is a button-sized tap of its own (48 pixels), not a word in a sentence. */
td.contact { padding-top: 0; padding-bottom: 0; }
td.contact a { display: inline-flex; align-items: center; min-height: 48px; }
/* The narrowest phones: the open table uses the whole column (out from under the list's check
   mark) with tighter cells, so the rows stay on one line without making the page wider. */
@media (max-width: 359px) {
  .tiers-body { margin-left: -34px; }
  th, td { padding-left: 8px; padding-right: 8px; }
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------- 8. Questions ---------- */

.faq { display: grid; gap: 28px; }
.qa h3 { font: 700 19px/1.3 var(--font-body); margin-bottom: 6px; }

/* ---------- 10. Footer ---------- */

.footer {
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--steel);
  font-size: 15px;
}
.footer-addr {
  display: flex;
  flex-direction: column;
  font-style: normal;
}
.footer-addr span { padding: 4px 0; }
.footer-addr a,
.footer-nav a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 48px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  margin-top: 8px;
}
/* The dots between footer items: only on a wide screen, where the footer is one line.
   They are hidden from screen readers in the page itself. */
.sep { display: none; }

/* ---------- Wider screens ---------- */

@media (min-width: 720px) {
  body { font-size: 18px; }
  h1 { font-size: 60px; }
  h2 { font-size: 46px; }
  .lead { font-size: 21px; }
  .band { padding: 96px 0; }
  .hero { padding-top: 64px; }
  .faq { grid-template-columns: 1fr 1fr; gap: 40px 56px; }

  /* The footer on one line with dots between, as marketing wrote it. */
  .footer-addr { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .footer-addr span { padding: 0; }
  .footer .sep { display: inline; padding: 0 10px; }
  .footer-nav { gap: 0; }
}

@media (min-width: 900px) {
  .two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 72px;
    align-items: center;
  }
  .two-col .phone-pic { width: 300px; margin: 0 auto; }

  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .step { display: flex; flex-direction: column; }
  .step-text { flex: 1; }
  .step .phone-pic { width: 280px; }
}

@media (min-width: 1100px) {
  h1 { font-size: 68px; }
}

/* ---------- Motion and contrast settings on the phone ---------- */

/* Motion only for people who have not asked their phone for less of it. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .seg-face, .box { transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; }
}

/* Windows high-contrast mode drops background colors; keep the chosen role visible. */
@media (forced-colors: active) {
  .seg-opt input:checked + .seg-face { outline: 3px solid CanvasText; outline-offset: 2px; }
  .hl { text-decoration-color: CanvasText; }
}