/*
 * 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;
  --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;
    --rule: rgba(229, 224, 216, 0.1);

    /* The screenshots are light captures, so on a dark ground the frame
     * needs its own edge or the phone reads as a floating white slab. */
    --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);
}

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;
}

.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;
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
  display: block;
}

.tilt {
  transform: rotate(-2deg);
}

.tilt2 {
  transform: rotate(2.5deg);
}

/* ---------- 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 ---------- */

.hero-timer {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(4rem, 11vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  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;
}

.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 protocol list, lifted from the app ---------- */

.protocols {
  border-top: 1px solid var(--rule);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.protocols .mk {
  font-size: 1rem;
  line-height: 1;
  justify-self: center;
}

.protocols .nm {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.protocols .vl {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}

.vl-green {
  color: var(--green);
}

.vl-gold {
  color: var(--gold);
}

.tick {
  color: var(--green);
  font-weight: 700;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.dot-grey {
  background: var(--ink4);
}

/* ---------- 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;
}

/* ---------- 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(4.5rem, 10vw, 9rem);
  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(3.4rem, 16vw, 5rem);
  }

  .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 .protocols {
  border-top: 0;
}

.ledger .protocols li {
  padding: 1.15rem 0;
}

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

.ledger .protocols .nm {
  font-size: 1.25rem;
}

.ledger .protocols .vl {
  font-size: 0.9rem;
}

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

  /* Names hold one line on a narrow screen; the values may wrap instead. */
  .ledger .protocols .nm {
    font-size: 1.1rem;
    white-space: nowrap;
  }

  .ledger .protocols .vl {
    font-size: 0.8rem;
    text-align: right;
  }
}

/* ---------- The quiet: header split and shape cards ---------- */

.quiet-head {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: 4rem;
  align-items: end;
  margin-bottom: 3.5rem;
}

.home .shapes {
  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-head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .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;
  }

  .tilt,
  .tilt2 {
    transform: none;
  }
}

/* ---------- 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 ---------- */

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

.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;
  }

  /* The ledger settles, then its checkmark lands. */
  html.js .home .ledger[data-reveal] .tick,
  html.js .home .ledger[data-reveal] .vl-green {
    opacity: 0;
    transition: opacity 0.4s ease 0.35s;
  }
  html.js .home .ledger[data-reveal].in .tick,
  html.js .home .ledger[data-reveal].in .vl-green {
    opacity: 1;
  }
}