/*
 * Ahonui marketing site.
 *
 * The palette is lifted verbatim from the app so the site and the product
 * read as one thing: light values from app/Ahonui/Theme.swift, dark values
 * from app/Shared/AhonuiPalette.swift. If a colour changes in the app,
 * change it here too.
 */

:root {
  --ground: #f5f0ea;
  --surface: #ebe6df;
  --sunk: #e2dcd3;
  --ink: #1c1a17;
  --ink2: #46423c;
  --ink3: #9b958d;
  --ink4: #c4beb6;
  --green: #5b8a72;
  --red: #b54e42;
  --gold: #96803e;
  --fat: #716374;
  --rule: rgba(28, 26, 23, 0.12);

  --bezel: #15130f;
  --bezel-ring: transparent;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 34rem;
  --page: 68rem;
  /* Landing page only: the wide canvas and the section rhythm. The legal
   * pages keep --page and their own rhythm. */
  --page-wide: 86rem;
  --sect: clamp(5rem, 9vw, 8rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1c1a17;
    --surface: #26231f;
    --sunk: #2f2b26;
    --ink: #e5e0d8;
    --ink2: #b8b1a7;
    --ink3: #706a60;
    --ink4: #3d3830;
    --green: #7db497;
    --red: #d4706a;
    --gold: #c4a85a;
    --fat: #a896ab;
    --rule: rgba(229, 224, 216, 0.1);

    /* The screens are drawn from the same variables, so they go dark with
     * the page; the ring keeps the bezel's edge off the dark ground. */
    --bezel: #0c0a08;
    --bezel-ring: #3d3830;
  }
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* The landing canvas. Legal pages never carry it. */
.wrap.wide {
  max-width: var(--page-wide);
}

@media (min-width: 60rem) {
  .wrap.wide {
    padding: 0 2.5rem;
  }
}

section {
  padding: 4.5rem 0;
  border-top: 1px solid var(--rule);
}

section:first-of-type {
  border-top: 0;
}

.prose {
  max-width: var(--measure);
}

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

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(3rem, 7.5vw, 5rem);
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.8rem);
  line-height: 1.05;
  margin-bottom: 1.25rem;
  max-width: 18ch;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

p {
  margin: 0 0 1.1rem;
  color: var(--ink2);
}

p:last-child {
  margin-bottom: 0;
}

p.lead {
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--ink2);
  max-width: 28rem;
}

a {
  color: var(--ink);
  text-decoration-color: var(--ink4);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: var(--green);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

strong {
  font-weight: 600;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 1.5rem;
}

.eyebrow-gold {
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.hawaiian {
  font-style: italic;
}

/* ---------- Header ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* padding-block, not the shorthand: these elements also carry .wrap, whose
   * horizontal padding is the only thing keeping text off the screen edge. */
  padding-block: 1.75rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: block;
}

.masthead nav {
  display: flex;
  gap: 1.4rem;
  font-size: 0.9rem;
}

.masthead nav a {
  color: var(--ink2);
  text-decoration: none;
  white-space: nowrap;
}

.masthead nav a:hover {
  color: var(--ink);
}

/* Below this the brand and three links fight for the same line and the last
 * one ends up flush against the edge, so stack them instead. */
@media (max-width: 30rem) {
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding-block: 1.5rem 1.25rem;
  }

  .masthead nav {
    gap: 1.25rem;
  }
}

/* ---------- The device ---------- */

.phone {
  position: relative;
  width: 278px;
  max-width: 100%;
  aspect-ratio: 1260 / 2736;
  border-radius: 44px;
  padding: 9px;
  background: var(--bezel);
  box-shadow:
    0 0 0 1px var(--bezel-ring),
    0 2px 6px rgba(28, 26, 23, 0.14),
    0 40px 70px -30px rgba(28, 26, 23, 0.55);
  flex: none;
  justify-self: center;
}

/* ---------- The screens, drawn ----------
 *
 * Each phone holds a .screen: the app's UI redrawn in HTML from the shared
 * palette, so it renders crisp at any size and goes dark with the page.
 * Everything inside is sized in cqw against the screen's own width, so one
 * set of rules fits every phone width on the page. Content is decorative
 * (aria-hidden); the phone itself carries role="img" and the description. */

.phone .screen {
  width: 100%;
  height: 100%;
  border-radius: 36px;
  background: var(--ground);
  color: var(--ink);
  overflow: hidden;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  /* Percent, not cqw: an element cannot query itself, so cqw on the screen's
   * own box would fall back to the viewport. The children query the screen. */
  padding: 4% 7% 7%;
  line-height: 1.35;
}

.s-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 4.4cqw;
  font-weight: 600;
  padding: 1.5cqw 1cqw 0;
}

.s-glyphs {
  width: 15cqw;
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 0;
}

.s-glyphs rect[stroke] {
  stroke-width: 1;
}

.s-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 5cqw;
  padding-bottom: 2.5cqw;
  border-bottom: 0.6cqw solid var(--ink);
}

.s-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 8.5cqw;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}

.s-date {
  font-size: 3.8cqw;
  color: var(--ink3);
  margin: 0.5cqw 0 0;
}

.s-headtools {
  font-size: 4.4cqw;
  color: var(--ink3);
  margin: 0;
}

.s-label {
  font-family: var(--mono);
  font-size: 3.4cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 5cqw 0 0;
}

.s-gold-label {
  color: var(--gold);
}

.s-count {
  color: var(--green);
}

.s-timer {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13.5cqw;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin: 1cqw 0 0;
}

.s-past {
  font-family: var(--mono);
  font-size: 3.6cqw;
  color: var(--ink3);
  margin: 0.5cqw 0 0;
}

.s-past strong {
  font-weight: 700;
  color: var(--gold);
}

.s-bar-icons {
  font-size: 3.2cqw;
  text-align: right;
  margin: 2.5cqw 0 1cqw;
  letter-spacing: 0.4em;
}

.s-bar {
  height: 1.2cqw;
  border-radius: 1cqw;
  background: var(--ink4);
  overflow: hidden;
}

.s-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--green);
}

.s-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 3.2cqw;
  color: var(--ink3);
  margin: 2cqw 0 0;
}

.s-meta strong {
  font-weight: 700;
  color: var(--ink);
}

.s-hist {
  font-family: var(--mono);
  font-size: 3.2cqw;
  color: var(--ink3);
  margin: 2.5cqw 0 0;
}

.s-rows-label {
  display: flex;
  justify-content: space-between;
  margin-top: 6cqw;
}

.s-rows {
  list-style: none;
  margin: 1cqw 0 0;
  padding: 0;
}

.s-rows li {
  display: grid;
  grid-template-columns: 5.5cqw 1fr auto;
  align-items: baseline;
  padding: 2.7cqw 0;
  border-bottom: 1px solid var(--rule);
}

.s-rows li:last-child {
  border-bottom: 0;
}

.s-rows b {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 4.7cqw;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.s-rows span {
  font-family: var(--mono);
  font-size: 3.4cqw;
  color: var(--ink3);
}

.s-rows em {
  grid-column: 2 / -1;
  font-style: normal;
  font-size: 3.1cqw;
  color: var(--red);
  margin-top: 0.6cqw;
}

/* The row marker is a ring that fills as the protocol progresses, exactly
 * as the app draws it: an ink track, the tint arc at --p of the way round,
 * and, once met, a solid green ring with the check inside. Shielded rows
 * fill in red, the accent of the blocking line beneath them. */
.s-mk {
  align-self: center;
  font-style: normal;
  width: 3.8cqw;
  height: 3.8cqw;
  border-radius: 50%;
  background: conic-gradient(
    var(--tint, var(--green)) calc(var(--p, 0) * 1turn),
    var(--ink4) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1cqw), #000 calc(100% - 0.8cqw));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1cqw), #000 calc(100% - 0.8cqw));
}

.s-mk-red {
  --tint: var(--red);
}

.s-mk-done {
  background: none;
  -webkit-mask: none;
  mask: none;
  border: 0.6cqw solid var(--green);
  display: grid;
  place-items: center;
  color: var(--green);
  font-weight: 700;
  font-size: 2cqw;
  line-height: 1;
}

.s-actions {
  display: flex;
  gap: 2.6cqw;
  margin-top: 3cqw;
}

.s-btn {
  flex: 1;
  text-align: center;
  font-size: 4cqw;
  font-weight: 600;
  padding: 3cqw 0;
  border-radius: 2.6cqw;
  border: 0.4cqw solid var(--ink);
  color: var(--ink);
}

.s-btn-fill {
  background: var(--ink);
  color: var(--ground);
}

.s-foot {
  margin-top: 6cqw;
}

.s-tl {
  list-style: none;
  margin: 1cqw 0 0;
  padding: 0;
}

.s-tl li {
  display: flex;
  gap: 3cqw;
  align-items: baseline;
  padding: 2.4cqw 0;
  border-bottom: 1px solid var(--rule);
}

.s-tl span {
  font-family: var(--mono);
  font-size: 3.1cqw;
  color: var(--ink3);
  white-space: nowrap;
}

.s-tl b {
  font-weight: 400;
  font-size: 3.4cqw;
  color: var(--ink2);
}

/* The eating state: daily intake and macros. */

.s-cal {
  font-family: var(--mono);
  margin: 2cqw 0 0;
  color: var(--ink3);
  font-size: 3.6cqw;
}

.s-cal strong {
  font-weight: 700;
  font-size: 7.5cqw;
  color: var(--ink);
}

.s-track {
  height: 0.6cqw;
  border-radius: 0.6cqw;
  background: var(--ink4);
  overflow: hidden;
  margin-top: 3cqw;
}

.s-track i {
  display: block;
  height: 100%;
  background: var(--ink2);
}

.s-macros {
  display: flex;
  gap: 4cqw;
  margin-top: 5cqw;
}

.s-macro {
  flex: 1;
}

.s-macro .s-mname {
  font-family: var(--serif);
  font-size: 3.9cqw;
  color: var(--ink);
  margin: 0 0 2cqw;
}

.s-macro .s-track {
  margin-top: 0;
}

.s-macro .s-mval {
  font-family: var(--mono);
  font-size: 3cqw;
  color: var(--ink3);
  margin: 1.6cqw 0 0;
}

.s-macro .s-mval strong {
  font-weight: 600;
  color: var(--ink2);
}

.s-fill-gold { background: var(--gold); }
.s-fill-green { background: var(--green); }
.s-fill-fat { background: var(--fat); }

.s-link {
  text-align: center;
  font-size: 3.4cqw;
  font-weight: 600;
  color: var(--ink3);
  margin: 3cqw 0 0;
}

/* The Protocols screen. */

.s-head-center {
  align-items: center;
}

.s-back,
.s-new {
  font-size: 4.4cqw;
  color: var(--ink3);
  margin: 0;
}

.s-title-page {
  font-size: 7cqw;
}

.s-card {
  background: var(--surface);
  border-radius: 4cqw;
  padding: 4cqw 4.5cqw;
  margin-top: 3.5cqw;
}

.s-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2cqw;
}

.s-card-head b {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5.2cqw;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.s-toggle {
  width: 10cqw;
  height: 6cqw;
  border-radius: 3cqw;
  background: var(--green);
  position: relative;
  flex: none;
}

.s-toggle i {
  position: absolute;
  top: 0.7cqw;
  right: 0.7cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: var(--ground);
}

.s-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  margin: 2cqw 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 2cqw;
}

.s-field span {
  font-size: 2.9cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
}

.s-field b {
  font-weight: 400;
  font-size: 3.5cqw;
  color: var(--ink);
}

.s-field-note {
  font-family: var(--mono);
  font-size: 2.9cqw;
  color: var(--ink3);
  text-align: right;
  margin: 0.6cqw 0 0;
}

.s-chip {
  background: var(--sunk);
  border-radius: 1.4cqw;
  padding: 0.6cqw 2cqw;
}

.s-card-foot {
  font-family: var(--mono);
  font-size: 3.1cqw;
  color: var(--ink3);
  text-align: right;
  margin: 3cqw 0 0;
}

/* A card in its edit state: the weekday pills and the Delete/Cancel/Save
 * footer, as ProtocolSettingsView lays them out. */
.s-days {
  display: flex;
  gap: 1.6cqw;
  margin: 2.5cqw 0 0;
}

.s-day {
  flex: 1;
  text-align: center;
  font-size: 3cqw;
  font-weight: 600;
  padding: 2cqw 0;
  border-radius: 2cqw;
  color: var(--ink3);
  border: 1px solid var(--rule);
}

.s-day-on {
  background: var(--green);
  color: var(--ground);
  border-color: transparent;
}

.s-card-actions {
  display: flex;
  align-items: baseline;
  gap: 4.5cqw;
  margin-top: 3.5cqw;
  font-size: 3.2cqw;
  font-weight: 600;
}

.s-card-actions .s-del {
  color: var(--red);
  margin-right: auto;
}

.s-card-actions .s-cancel {
  color: var(--ink3);
}

.s-card-actions .s-save {
  color: var(--green);
}

/* The shield, over a blocked app. Drawn in the shield's own palette
 * outright, cream ground with true ink, in every appearance: the extension
 * renders on light material whatever the system theme, because dark
 * material with light ink read as murky grey over an arbitrary app. The
 * doubled selector outweighs the `.phone .screen` ground. */
.phone .screen.s-shield {
  background: #f5f0ea;
  color: #1c1a17;
}

.s-shield .s-glyphs {
  fill: #1c1a17;
  stroke: #1c1a17;
}

.s-shield-body {
  margin: auto 0;
  text-align: center;
  padding: 0 4cqw;
}

.s-shield-ring {
  width: 26cqw;
  height: 26cqw;
  margin: 0 auto 6cqw;
  display: block;
}

.s-shield-title {
  font-size: 5cqw;
  font-weight: 700;
  color: #1c1a17;
  margin: 0 0 2.5cqw;
}

.s-shield-sub {
  font-size: 3.8cqw;
  line-height: 1.5;
  color: #46423c;
  margin: 0;
}

.s-shield-btn {
  display: block;
  margin: 8cqw auto 0;
  width: 60%;
  padding: 3.4cqw 0;
  text-align: center;
  border-radius: 3cqw;
  background: #49705c;
  color: #f5f0ea;
  font-size: 4cqw;
  font-weight: 600;
}

/* The onboarding screen. */

.s-center .s-welcome {
  margin: auto 0;
  text-align: center;
  padding: 0 3cqw;
}

.s-wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 8.5cqw;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4cqw;
}

.s-meaning {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.9cqw;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.s-hr {
  border: 0;
  border-top: 1px solid var(--rule);
  width: 12cqw;
  margin: 4cqw auto;
}

.s-tagline {
  font-size: 3.7cqw;
  line-height: 1.5;
  color: var(--ink3);
  margin: 0;
}

.s-btn-wide {
  flex: none;
  display: block;
  border: 0;
  padding: 3.6cqw 0;
  border-radius: 3.2cqw;
}

/* ---------- The rule and the band ---------- */

/* The almanac's signature: a heavy ink rule with a gold kapa niho band
 * beneath it. Used exactly twice per page: below the masthead and above
 * the footer. Interior separators stay hairlines. */
.masthead-outer {
  border-bottom: 2px solid var(--ink);
}

.band {
  height: 12px;
  background-image:
    linear-gradient(-45deg, var(--gold) 25%, transparent 25%),
    linear-gradient(45deg, var(--gold) 25%, transparent 25%);
  background-size: 14px 14px;
  background-repeat: repeat-x;
}

.close {
  text-align: center;
  padding-bottom: 5.5rem;
}

.close .cta {
  justify-content: center;
}

.close-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto 1.5rem;
}

.clock-line {
  flex-basis: 100%;
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink3);
}

@media (max-width: 30rem) {
  .clock-line {
    text-align: left;
  }
}

/* ---------- Hero: the living day ---------- */

/* The hero number is set exactly as the app sets it: monospace, gold past
 * goal. The serif never carries the timer, there or here. */
.hero-timer {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin: 0 0 1rem;
}

.stateline {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink3);
  margin: 1.5rem 0 0;
}

/* The connected-tools exchange: one small conversation, set like a card. */
.chat {
  margin: 2.2rem 0;
  max-width: var(--measure);
  background: var(--surface);
  border-radius: 12px;
  padding: 1.2rem 1.4rem 1.35rem;
}

.chat p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink2);
}

.chat p + p {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.chat p span {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
}

.chat .chat-tool {
  color: var(--ink);
}

/* ---------- Coming soon badge ---------- */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* The one live action on the page. */
.cta-mail {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.4rem;
  border-radius: 11px;
  background: var(--ink);
  color: var(--ground);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
}

.cta-mail:hover {
  background: var(--ink2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--ink4);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink3);
  font-size: 0.95rem;
  cursor: default;
}

.badge svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: none;
}

.badge .badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.badge .badge-text small {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
}

.badge .badge-text span {
  font-size: 1rem;
  color: var(--ink2);
}

.cta-note {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink3);
  margin: 0;
}

/* ---------- The day as a timeline ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}

.timeline .tw {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink3);
  white-space: nowrap;
}

.timeline .tw-now {
  color: var(--gold);
  font-weight: 700;
}

.timeline .tx {
  font-size: 0.95rem;
  color: var(--ink2);
}

/* ---------- Numbered list ---------- */

.shapes {
  list-style: none;
  counter-reset: shape;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 2.5rem;
}

.shapes li {
  counter-increment: shape;
  position: relative;
  padding-top: 2rem;
}

.shapes li::before {
  content: counter(shape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--gold);
}

.shapes h3 {
  font-size: 1.15rem;
}

.shapes p {
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- The plates ---------- */

.plates {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.5rem 2rem;
}

.plate svg {
  display: block;
  margin-bottom: 0.6rem;
}

.plate h3 {
  font-size: 1.2rem;
  margin-bottom: 0.1rem;
}

.figcap {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 0.4rem;
}

.plate p {
  margin: 0;
  font-size: 0.94rem;
}

/* SVG palette: classes so the figures adapt to dark mode. */
.k-ink { stroke: var(--ink); }
.k-mid { stroke: var(--ink3); }
.k-faint { stroke: var(--ink4); }
.k-gold { stroke: var(--gold); }
.k-red { stroke: var(--red); }
.k-ink-fill { fill: var(--ink); }
.k-mid-fill { fill: var(--ink3); }
.k-green-fill { fill: var(--green); }
.k-water { fill: var(--green); fill-opacity: 0.45; }
.k-label { fill: var(--ink); font-family: var(--mono); font-size: 9px; }

/* Motion: hidden initial states exist only when JS is present and motion
 * is welcome; the resting state is always the fully drawn figure. */
@media (prefers-reduced-motion: no-preference) {
  html.js .plate .draw {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
  }
  html.js .plate.draw-now .draw {
    animation: plate-draw 1.3s ease forwards;
  }
  html.js .plate .rise {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  html.js .plate.draw-now .rise {
    animation: plate-rise 0.9s ease forwards;
  }
  html.js .plate.draw-now :nth-child(2 of .rise) { animation-delay: 0.15s; }
  html.js .plate.draw-now :nth-child(3 of .rise) { animation-delay: 0.3s; }
  html.js .plate.draw-now :nth-child(4 of .rise) { animation-delay: 0.45s; }

  /* The one figure that never fully rests. */
  .plate .breathe {
    transform-origin: bottom;
    animation: water-breathe 4s ease-in-out infinite alternate;
  }
}

@keyframes plate-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes plate-rise {
  to { transform: scaleY(1); }
}

@keyframes water-breathe {
  from { transform: scaleY(0.4); }
  to { transform: scaleY(0.95); }
}

/* ---------- Legal / long-form pages ---------- */

/* These pages share the stylesheet but not the landing page's display scale,
 * so their headings are pinned back to reading sizes. */

.legal {
  padding-block: 3rem 4rem;
}

.legal .prose {
  max-width: 38rem;
}

.legal h1 {
  font-size: clamp(2.2rem, 6vw, 3rem);
  letter-spacing: -0.02em;
}

.legal h2 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: none;
  margin-top: 2.75rem;
}

.legal h3 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-top: 1.75rem;
}

.legal .lead {
  max-width: 38rem;
}

.legal ul {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
  color: var(--ink2);
}

.legal li {
  margin-bottom: 0.45rem;
}

.legal p {
  margin-bottom: 1.1rem;
}

.updated {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink3);
  margin-bottom: 2.5rem;
}

.callout {
  background: var(--surface);
  border-left: 2px solid var(--green);
  padding: 1.1rem 1.35rem;
  margin: 0 0 1.5rem;
  border-radius: 0 8px 8px 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
}

th,
td {
  text-align: left;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink2);
}

th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  font-weight: 400;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: 2rem;
  max-width: 38rem;
  margin-top: 2rem;
}

.faq h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.faq p {
  margin: 0;
  font-size: 0.95rem;
}

.faq p + p {
  margin-top: 0.75rem;
}

/* ---------- Footer ---------- */

footer {
  border-top: 0;
  padding-block: 2.5rem 3.5rem;
  font-size: 0.88rem;
  color: var(--ink3);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

footer nav a {
  color: var(--ink2);
  text-decoration: none;
}

footer nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

footer p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink3);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .hero-copy > *:nth-child(2) {
    animation-delay: 0.06s;
  }
  .hero-copy > *:nth-child(3) {
    animation-delay: 0.12s;
  }
  .hero-copy > *:nth-child(4) {
    animation-delay: 0.18s;
  }
  .hero-copy > *:nth-child(5) {
    animation-delay: 0.24s;
  }
  .hero-copy > *:nth-child(6) {
    animation-delay: 0.3s;
  }
  html.js .hero-phone {
    animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
 * The landing layer. Everything below is scoped to body.home and exists
 * only for index.html; the legal pages never reach it.
 * ===================================================================== */

.home main > section {
  padding: var(--sect) 0;
  border-top: 0;
}

.home h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  max-width: 16ch;
  text-wrap: balance;
}

/* Full-bleed background bands. The background is the separator, so banded
 * sections carry no hairline. */
.home .band-surface {
  background: var(--surface);
}

.home .band-sunk {
  background: var(--sunk);
}

/* Hairlines only where ground meets ground. */
.home #claude,
.home #close {
  border-top: 1px solid var(--rule);
}

/* ---------- Hero ---------- */

.home .hero {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 4rem;
  align-items: start;
}

.hero-copy .hero-timer {
  font-size: clamp(3.4rem, 7vw, 6.5rem);
  margin-bottom: 1.5rem;
}

.hero-copy h1 {
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  max-width: 18ch;
  text-wrap: balance;
}

.hero-copy .lead {
  font-size: 1.25rem;
}

/* The product bridges into the Saturday band below: the one overlap that
 * keeps the page from reading as stacked slabs. */
.hero-phone {
  position: relative;
  z-index: 1;
  justify-self: end;
}

.phone-hero {
  width: clamp(300px, 27vw, 400px);
  margin-bottom: -6rem;
}

.home #day {
  padding-top: calc(var(--sect) + 2rem);
}

@media (max-width: 60rem) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-copy .hero-timer {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .hero-phone {
    justify-self: center;
  }

  .phone-hero {
    width: min(78vw, 320px);
    margin-bottom: -3rem;
  }
}

/* ---------- One Saturday: the ledger ---------- */

.day-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: 5rem;
  align-items: center;
}

.ledger {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.75rem 2rem 0.75rem;
}

.ledger-head {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink3);
  margin: 0 0 0.5rem;
}

.ledger .timeline li:last-child {
  border-bottom: 0;
}

@media (max-width: 60rem) {
  .day-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .timeline li {
    grid-template-columns: 5.5rem 1fr;
    gap: 0.75rem;
  }

  .timeline .tw {
    font-size: 0.7rem;
  }
}

/* ---------- The quiet: copy, the shield itself, and shape cards ---------- */

.quiet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3.5rem 6rem;
  align-items: center;
}

.phone-shield {
  width: min(300px, 78vw);
}

.home .shapes {
  grid-column: 1 / -1;
  margin-top: 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.home .shapes li {
  background: var(--surface);
  border-radius: 14px;
  padding: 2rem 2rem 2.25rem;
}

.home .shapes li::before {
  position: static;
  display: block;
  margin-bottom: 1.25rem;
}

.home .shapes h3 {
  font-size: 1.4rem;
}

@media (max-width: 60rem) {
  .quiet-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .quiet-grid .phone-shield {
    justify-self: center;
  }

  .home .shapes {
    grid-template-columns: 1fr;
  }
}

/* ---------- Protocols showcase ---------- */

.center-head {
  text-align: center;
  margin-bottom: 4rem;
}

.center-head h2 {
  margin-inline: auto;
  max-width: 22ch;
  text-wrap: balance;
}

.center-head .prose {
  margin-inline: auto;
}

.showcase {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: flex-start;
}

.showcase .phone {
  width: clamp(280px, 24vw, 360px);
  box-shadow:
    0 0 0 1px var(--bezel-ring),
    0 2px 6px rgba(28, 26, 23, 0.16),
    0 60px 90px -35px rgba(28, 26, 23, 0.6);
}

.showcase .phone:last-child {
  margin-top: 2.5rem;
}

@media (max-width: 60rem) {
  .showcase {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    gap: 1.5rem;
  }

  .showcase .phone {
    width: min(75vw, 300px);
    scroll-snap-align: center;
  }

  .showcase .phone:last-child {
    margin-top: 0;
  }
}

/* ---------- The plates, re-gridded ---------- */

.home .plates {
  margin-top: 3.5rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 3rem;
}

@media (max-width: 60rem) {
  .home .plates {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }
}

@media (max-width: 40rem) {
  .home .plates {
    grid-template-columns: 1fr;
  }
}

/* ---------- Tell Claude ---------- */

.claude-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: 5rem;
  align-items: center;
}

.home .chat {
  margin: 0;
  max-width: none;
  border-radius: 16px;
  padding: 1.5rem 2rem 1.85rem;
}

.home .chat p {
  font-size: 1.05rem;
}

.chat-head {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink3);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.9rem;
}

.home .chat .chat-head + p {
  border-top: 0;
}

.claude-stateline {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}

@media (max-width: 60rem) {
  .claude-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ---------- The name ---------- */

/* Narrower than the canvas: two columns sit as one centred composition
 * rather than a phone stranded at the left edge. */
.name-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
  max-width: 66rem;
  margin-inline: auto;
}

.phone-name {
  width: min(320px, 80vw);
}

@media (max-width: 60rem) {
  .name-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .name-grid .phone-name {
    order: 2;
  }
}

/* ---------- Principles ---------- */

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 2.5rem;
}

.principles p {
  font-size: 0.97rem;
  margin: 0;
}

.principles-link {
  margin-top: 2.5rem;
  font-size: 0.95rem;
}

@media (max-width: 60rem) {
  .principles {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------- The close, bigger ---------- */

.home .close-line {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

/* ---------- Scroll reveals ---------- */

/* Hidden states exist only with JS present and motion welcome; the resting
 * state is always the fully visible page. */
@media (prefers-reduced-motion: no-preference) {
  html.js .home [data-reveal] {
    opacity: 0;
    transform: translateY(1rem);
    transition:
      opacity 0.6s ease,
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.js .home [data-reveal].in {
    opacity: 1;
    transform: none;
  }

  /* Card rows settle one beat apart. */
  html.js .home .shapes[data-reveal].in li {
    animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  html.js .home .shapes[data-reveal].in li:nth-child(2) {
    animation-delay: 0.1s;
  }
  html.js .home .shapes[data-reveal].in li:nth-child(3) {
    animation-delay: 0.2s;
  }

}