/* ============================================================
   ShadeWright home page
   Every color comes from tokens/tokens.css. Every size is stated.
   Type is IBM Plex, self hosted from type/fonts.css.
   ============================================================ */
:root {
  --primary: #2D5F9E;
  --primary-hover: #27548D;
  --on-primary: #FFFFFF;
  --primary-container: #D5E3FF;
  --on-primary-container: #074785;
  --secondary-container: #D9E3F8;
  --on-secondary-container: #3D4758;
  --tertiary-container: #FFDF9F;
  --on-tertiary-container: #5C4300;
  --ink: #003060;
  --surface: #FAF9FD;
  --on-surface: #1A1C1E;
  --on-surface-variant: #43474E;
  --sc-lowest: #FFFFFF;
  --sc-low: #F4F3F7;
  --sc: #EEEDF1;
  --sc-high: #E9E7EB;
  --outline: #74777F;
  --outline-variant: #C4C6CF;
  --brass: #B28B31;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", -apple-system, "SF Pro Text", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: 24px;
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: 400 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--primary); color: var(--on-primary);
  padding: 12px 20px; border-radius: 0 0 12px 0; font: 500 14px/20px var(--sans); z-index: 20;
}
.skip:focus { left: 0; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
}
.topbar .inner {
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lockup { height: 30px; width: auto; display: block; }
.topbar a.signin {
  font: 500 14px/20px var(--sans); letter-spacing: 0.01em;
  color: var(--primary); text-decoration: none;
  height: 40px; padding: 0 20px; border-radius: 20px;
  border: 1px solid var(--outline-variant);
  display: inline-flex; align-items: center;
}
.topbar a.signin:hover { background: var(--sc); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; border-radius: 24px;
  font: 500 16px/24px var(--sans); letter-spacing: 0.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.btn-filled { background: var(--primary); color: var(--on-primary); }
.btn-filled:hover { background: var(--primary-hover); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--outline-variant); }
.btn-outline:hover { background: var(--sc); }
.btn-onblue { background: var(--sc-lowest); color: var(--primary); }
.btn-onblue:hover { background: var(--primary-container); }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
.eyebrow {
  font: 500 11px/16px var(--sans); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--on-surface-variant); margin: 0 0 16px;
}
h1 {
  font: 600 64px/68px var(--sans); letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 24px; max-width: 15ch;
}
h2 {
  font: 600 36px/44px var(--sans); letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 12px; max-width: 22ch;
}
.lede { font: 400 18px/28px var(--sans); color: var(--on-surface-variant); margin: 0; max-width: 52ch; }
.section-head { margin-bottom: 48px; }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 0; text-align: center; }
.hero h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
/* The headline names the company and then states the slogan, and the slogan
   takes its own line. No measure produces that break by wrapping: "ShadeWright.
   Measure" is narrower than "Measure once. Cut once.", so greedy wrapping always
   pulls a slogan word up and splits "Cut once." across two lines. The block is
   the break. The name is prose in the page's heading face, not the wordmark set
   as live type, which rule 1 forbids; the lockup stays the SVG in the topbar. */
.hero h1 .h1-slogan { display: block; }
.hero .lede { margin-left: auto; margin-right: auto; }
.hero .brass-rule { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }
.chip-live {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px; border-radius: 16px;
  background: var(--primary-container); color: var(--on-primary-container);
  font: 500 13px/20px var(--sans); letter-spacing: 0.01em; margin: 0 0 24px;
}
.chip-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
/* The problem leads, the product answers it. Both paragraphs carry full ink
   at the same size, so the hero reads as one two beat statement rather than a
   headline sentence with a footnote. */
.hero .lede { color: var(--ink); margin-bottom: 16px; }
/* The plain statement of what ShadeWright is and who it is for. Second in the
   hero, under the problem, and still visible body text near the top of the
   page, which is what Google's OAuth review reads for the purpose. */
.purpose {
  font: 400 18px/28px var(--sans); color: var(--ink);
  margin: 0 auto 36px; max-width: 56ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.brass-rule { width: 56px; height: 3px; background: var(--brass); border-radius: 2px; margin: 0 0 28px; }

/* ---------- Keypad demo ---------- */
.demo { padding: 56px 0 0; }
.card-demo {
  background: var(--sc-lowest); border-radius: 28px; border: 1px solid var(--outline-variant);
  padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.card-demo > *, .pads > * { min-width: 0; }
.job-head { margin-bottom: 24px; }
.job-head .side-mark { font: 500 22px/28px var(--sans); color: var(--on-surface); margin: 0; }
.job-head .room { font: 400 14px/20px var(--sans); color: var(--on-surface-variant); margin: 4px 0 0; }

.readout { display: flex; align-items: flex-end; gap: 16px; }
.field {
  background: none; border: 0; padding: 0 0 10px; margin: 0; text-align: left; cursor: pointer;
  border-bottom: 3px solid transparent; display: block; color: inherit; font: inherit;
}
.field .flabel {
  display: block; font: 500 11px/16px var(--sans); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--on-surface-variant); margin-bottom: 2px;
}
.field .fval {
  display: block; font: 600 64px/64px var(--cond); font-variant-numeric: tabular-nums;
  color: var(--on-surface); white-space: nowrap;
}
.field[aria-pressed="true"] { border-bottom-color: var(--brass); }
.field[aria-pressed="true"] .flabel { color: var(--on-tertiary-container); }
.times { font: 600 44px/64px var(--cond); color: var(--on-surface-variant); padding-bottom: 13px; }
.frac { font-size: 0.62em; position: relative; top: -0.14em; padding-left: 0.12em; }

.shopline {
  margin-top: 24px; background: var(--sc-low); border-radius: 12px; padding: 14px 16px;
  font: 400 13px/20px var(--mono); color: var(--on-surface); overflow-x: auto; white-space: pre;
}
.shopline-label {
  font: 500 11px/16px var(--sans); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--on-surface-variant); margin: 24px 0 8px;
}

.seg { display: inline-flex; margin-bottom: 20px; }
.seg button {
  height: 40px; padding: 0 18px; border: 1px solid var(--outline); background: transparent;
  font: 500 14px/20px var(--sans); letter-spacing: 0.01em; color: var(--on-surface); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.lbl-short { display: none; }
.seg button:first-child { border-radius: 20px 0 0 20px; padding-left: 20px; }
.seg button:last-child { border-radius: 0 20px 20px 0; padding-right: 20px; border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--secondary-container); color: var(--on-secondary-container); }
.seg button svg { width: 16px; height: 16px; display: none; }
.seg button[aria-pressed="true"] svg { display: block; }

.pads { display: grid; grid-template-columns: auto 1fr; gap: 20px; }
.pad-label {
  grid-column: 1 / -1; font: 500 11px/16px var(--sans); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--on-surface-variant); margin: 0;
}
.pad-digits { display: grid; grid-template-columns: repeat(3, 56px); gap: 8px; }
.pad-eighths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: start; }
.key {
  height: 56px; border-radius: 16px; border: 1px solid var(--outline-variant); background: var(--sc-low);
  font: 500 20px/24px var(--sans); color: var(--on-surface); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.key:hover { background: var(--sc); }
.key:active { background: var(--sc-high); }
.key-eighth { font: 500 16px/20px var(--sans); }
.key-clear { font: 500 14px/20px var(--sans); }
.demo-note { font: 400 14px/20px var(--sans); color: var(--on-surface-variant); margin: 20px 0 0; max-width: 60ch; }

/* ---------- Rules list ---------- */
.rules { border-top: 1px solid var(--outline-variant); }
.rules li {
  list-style: none; padding: 28px 0; border-bottom: 1px solid var(--outline-variant);
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: baseline;
}
.rules ul { margin: 0; padding: 0; }
.rules h3 { font: 500 22px/28px var(--sans); color: var(--on-surface); margin: 0; }
.rules p { font: 400 16px/24px var(--sans); color: var(--on-surface-variant); margin: 0; }

/* ---------- States ---------- */
.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.state { border-radius: 16px; padding: 24px; }
.state .name { font: 500 16px/24px var(--sans); margin: 0 0 8px; }
.state p { font: 400 14px/20px var(--sans); margin: 0; opacity: 0.9; }
.state-progress { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.state-complete { background: var(--primary-container); color: var(--on-primary-container); }
.state-processed { background: var(--secondary-container); color: var(--on-secondary-container); }

/* ---------- Suite ---------- */
.suite { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.module {
  background: var(--sc-lowest); border: 1px solid var(--outline-variant); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.module .verb { font: 600 28px/36px var(--sans); letter-spacing: -0.005em; color: var(--ink); margin: 0; }
.module p { font: 400 14px/20px var(--sans); color: var(--on-surface-variant); margin: 0; flex: 1; }
.status {
  align-self: flex-start; height: 24px; padding: 0 10px; border-radius: 12px;
  font: 500 11px/16px var(--sans); letter-spacing: 0.03em; text-transform: uppercase;
  display: inline-flex; align-items: center;
}
.status-live { background: var(--primary-container); color: var(--on-primary-container); }
.status-coming { background: var(--sc); color: var(--on-surface-variant); }
.module-live { border-color: var(--primary); border-width: 2px; padding: 23px; }

/* ---------- Close ---------- */
.close { background: var(--primary); color: var(--on-primary); text-align: center; }
.close .lockup-w { height: 34px; width: auto; margin: 0 auto 32px; display: block; }
.close p {
  font: 400 28px/40px var(--sans); letter-spacing: -0.005em;
  margin: 0 auto 36px; max-width: 27ch; color: var(--on-primary);
}
/* The sign in note. Quiet, at the end of the page, sized as a note and not as
   a section, because it is there for a reviewer reading the whole page rather
   than for a customer deciding anything. */
.signin-note { padding: 44px 0 12px; text-align: center; }
.signin-note h2 {
  font: 500 15px/22px var(--sans); letter-spacing: 0; color: var(--on-surface);
  margin: 0 auto 8px; max-width: none;
}
.signin-note p {
  font: 400 14px/22px var(--sans); color: var(--on-surface-variant);
  margin: 0 auto; max-width: 62ch;
}
.signin-note a { color: inherit; text-decoration: underline; }
.signin-note a:hover { color: var(--on-surface); }

footer {
  padding: 28px 0; text-align: center; color: var(--on-surface-variant);
  font: 400 13px/20px var(--sans); border-top: 1px solid var(--outline-variant);
}
footer a { color: inherit; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer p { margin: 0; }
footer .legal { margin-top: 10px; }
footer .legal a { text-decoration: underline; }
footer .legal a:hover { color: var(--on-surface); }

/* ---------- Legal pages ---------- */
/* privacy.html and terms.html are generated by build_legal.py from the product
   repo. They are documents, not pitches, so the headings are quieter than a
   section heading and the measure is held near 68 characters. */
.legal-doc h1 { font: 600 40px/46px var(--sans); max-width: none; margin-bottom: 8px; }
.legal-doc .legal-updated {
  font: 400 14px/20px var(--sans); color: var(--on-surface-variant); margin: 0 0 40px;
}
.legal-doc h2 { font: 600 22px/30px var(--sans); max-width: none; margin: 40px 0 8px; }
.legal-doc p {
  font: 400 17px/28px var(--sans); color: var(--on-surface-variant);
  margin: 0 0 16px; max-width: 68ch;
}
.legal-doc a { color: var(--primary); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .card-demo { grid-template-columns: 1fr; gap: 32px; }
  .suite { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  section { padding: 56px 0; }
  .hero { padding: 48px 0 0; }
  .demo { padding: 32px 0 0; }
  h1 { font: 600 40px/46px var(--sans); letter-spacing: -0.015em; max-width: none; }
  h2 { font: 600 28px/36px var(--sans); }
  .lede { font: 400 16px/24px var(--sans); }
  .purpose { font: 400 16px/24px var(--sans); }
  .legal-doc h1 { font: 600 32px/38px var(--sans); }
  .legal-doc h2 { font: 600 20px/28px var(--sans); }
  .legal-doc p { font: 400 16px/26px var(--sans); }
  .card-demo { padding: 24px; border-radius: 24px; }
  .field .fval { font: 600 44px/48px var(--cond); }
  .times { font: 600 32px/48px var(--cond); padding-bottom: 11px; }
  .rules li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .states { grid-template-columns: 1fr; }
  .suite { grid-template-columns: 1fr; }
  .close p { font: 400 22px/32px var(--sans); }
  .pads { grid-template-columns: 1fr; }
  .pad-digits { grid-template-columns: repeat(3, 1fr); }
  .hero-actions .btn { flex: 1 1 100%; }
  .topbar .inner { height: 64px; }
  .lockup { height: 24px; }
  .brk { display: none; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .shopline { font: 400 12px/18px var(--mono); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 480ms cubic-bezier(.2,.7,.2,1) both; }
  .rise-2 { animation-delay: 60ms; }
  .rise-3 { animation-delay: 120ms; }
  .rise-4 { animation-delay: 180ms; }
  .rise-5 { animation-delay: 240ms; }
  .reveal { opacity: 0; transform: translateY(10px); transition: opacity 480ms cubic-bezier(.2,.7,.2,1), transform 480ms cubic-bezier(.2,.7,.2,1); }
  .reveal.seen { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Nav links, two page site ---------- */
.navlinks { display: flex; align-items: center; gap: 8px; }
.navlinks a.page {
  font: 500 14px/20px var(--sans); letter-spacing: 0.01em; text-decoration: none;
  color: var(--on-surface-variant); height: 40px; padding: 0 14px; border-radius: 20px;
  display: inline-flex; align-items: center;
}
.navlinks a.page:hover { background: var(--sc); color: var(--on-surface); }
.navlinks a.page[aria-current="page"] { color: var(--primary); background: var(--sc); }
.navlinks a.page, .topbar a.signin { white-space: nowrap; }
.mark-only { display: none; height: 30px; width: auto; }

/* ---------- Three roles ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.pcard {
  background: var(--sc-lowest); border: 1px solid var(--outline-variant); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.pcard .who { font: 600 22px/28px var(--sans); color: var(--ink); margin: 0; }
.pcard p { font: 400 15px/23px var(--sans); color: var(--on-surface-variant); margin: 0; }

/* ---------- Numbered sequence ---------- */
.steps { counter-reset: step; border-top: 1px solid var(--outline-variant); }
.steps li {
  list-style: none; counter-increment: step; padding: 28px 0;
  border-bottom: 1px solid var(--outline-variant);
  display: grid; grid-template-columns: 56px 1fr 1.3fr; gap: 24px; align-items: baseline;
}
.steps ul { margin: 0; padding: 0; }
.steps li::before {
  content: counter(step); font: 600 28px/32px var(--cond); color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.steps h3 { font: 500 20px/28px var(--sans); color: var(--on-surface); margin: 0; }
.steps p { font: 400 16px/24px var(--sans); color: var(--on-surface-variant); margin: 0; }

/* ---------- Spec pairs ---------- */
.spec { padding: 20px 0; border-bottom: 1px solid var(--outline-variant); }
.spec h3 { font: 500 17px/24px var(--sans); color: var(--on-surface); margin: 0 0 4px; }
.spec p { font: 400 15px/23px var(--sans); color: var(--on-surface-variant); margin: 0; }

/* ---------- One line statement ---------- */
.statement {
  font: 600 36px/46px var(--sans); letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 16px; max-width: 24ch;
}

@media (max-width: 900px) {
  .grid3 { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 760px) {
  .steps li { grid-template-columns: 40px 1fr; gap: 8px 16px; padding: 24px 0; }
  .steps li::before { grid-row: span 2; font: 600 24px/28px var(--cond); }
  .statement { font: 600 26px/34px var(--sans); }
  .navlinks a.page { padding: 0 12px; }
  .navlinks { gap: 4px; }
  .lockup { display: none; }
  .mark-only { display: block; height: 30px; }
}