:root {
    color-scheme: light;
    --paper: #F6F3EC;
    --paper-deep: #EFEADD;
    --card: #FFFFFF;
    --line: #E4DDCE;
    --ink: #2E4258;
    --ink-2: #4A5C6E;
    --ink-3: #7C8A99;
    --gold: #D9A61E;
    --gold-ink: #A08334;
    --rough: #33406A;
    --low: #6E8BC4;
    --okay: #9C978E;
    --good: #D98C4E;
    --great: #E8B52E;
    --serif: Fraunces, Georgia, "Times New Roman", serif;
    --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gutter: clamp(20px, 5vw, 40px);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    background: var(--paper);
    color: var(--ink);
    font: 400 17px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, svg { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

  /* Horizontal frame only. A `padding` shorthand here would silently cancel
     the vertical rhythm each section sets on itself. */
  .wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
  /* Instrument Sans has a wide "0", so 1ch overstates a character by about
     a third: 46ch measures out at roughly 68 characters, which is the line
     length wanted here. Verified in the browser, not assumed. */
  .measure { max-width: 46ch; }

  h1, h2, h3 {
    font-family: var(--serif);
    font-variation-settings: "opsz" 96;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.06;
    text-wrap: balance;
  }
  h1 { font-size: clamp(42px, 6.4vw, 74px); font-weight: 700; letter-spacing: -0.032em; }
  h2 { font-size: clamp(32px, 4.4vw, 50px); }
  h3 { font-size: 20px; letter-spacing: -0.012em; line-height: 1.25; }
  /* The eyebrow / heading / paragraph rhythm is set once, on the elements
     themselves, so a heading outside `.section-head` cannot lose it. */
  .eyebrow + h1, .eyebrow + h2 { margin-top: 15px; }
  h2 + p, h2 + .rule { margin-top: 18px; }
  p { color: var(--ink-2); }

  .eyebrow {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .16em; color: var(--gold-ink);
  }
  .rule { width: 64px; height: 3px; background: var(--gold); border-radius: 2px; }

  /* ---------- Masthead ---------- */
  .masthead { border-bottom: 1px solid var(--line); background: var(--paper); }
  .masthead .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
  .brandmark { display: flex; align-items: center; gap: 11px; text-decoration: none; }
  .brandmark svg { width: 34px; height: 34px; }
  .brandmark b { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
  .masthead-link {
    font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink-2);
    border-bottom: 1px solid var(--line); padding-bottom: 2px;
    transition: color 160ms var(--ease), border-color 160ms var(--ease);
  }
  .masthead-link:hover { color: var(--ink); border-color: var(--gold); }

  /* ---------- The download button ----------
     Apple's black plaque is a foreign object on this paper, and scaling it
     up for the hero only made it heavier (San, three times, 2026-09-05).
     So the page uses its own button in its own navy, with Apple's mark
     kept as the mark, one line of type, and the optical balance set by
     hand: the cap-height of "App Store" centred on the apple, and a hair
     more room on the right than the left because the mark carries visual
     weight into the left edge. */
  .store-badge {
    --s: 1;
    display: inline-flex; align-items: center;
    gap: calc(11px * var(--s));
    height: calc(56px * var(--s));
    padding: 0 calc(24px * var(--s)) 0 calc(21px * var(--s));
    border-radius: calc(28px * var(--s));
    background: var(--ink); color: #FFFFFF; text-decoration: none;
    font-size: calc(16.5px * var(--s)); font-weight: 500;
    letter-spacing: -0.006em; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(46,66,88,.18), 0 14px 30px -16px rgba(46,66,88,.65);
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
  }
  .store-badge svg {
    height: calc(20px * var(--s)); width: auto; fill: #FFFFFF; flex: 0 0 auto;
    margin-top: calc(-2px * var(--s));
  }
  .store-badge--sm { --s: .78; }
  @media (hover: hover) and (pointer: fine) {
    .store-badge:hover {
      background: #24374B; transform: translateY(-2px);
      box-shadow: 0 2px 4px rgba(46,66,88,.2), 0 20px 38px -18px rgba(46,66,88,.7);
    }
  }
  .store-badge:active { transform: translateY(0) scale(.985); }
  .store-note {
    flex: 1 0 100%; margin-top: 4px; max-width: 44ch;
    font-size: 15px; line-height: 1.55; color: var(--ink-2);
  }
  .store-note b { font-weight: 500; color: var(--ink); }

  /* ---------- The phone shell ----------
     Built in CSS rather than dropped in as a device photograph: the bezel is
     ink, the glass is the screenshot, and the only light on it is one soft
     paper shadow. */
  .phone {
    position: relative; width: 100%; max-width: 324px; align-self: center; flex: 0 0 auto;
    /* A titanium rail, not a slab: the light runs down one edge and the
       bezel is a hairline, so the glass is nearly the whole device. */
    padding: 1.05%;
    border-radius: 14.6% / 6.7%;
    background: linear-gradient(148deg, #A7B2BC 0%, #55677A 16%, #33455A 46%, #7A8A98 74%, #2A3846 100%);
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.34),
      0 2px 3px rgba(46,66,88,.16),
      0 30px 64px -24px rgba(46,66,88,.44);
  }
  .phone img { width: 100%; border-radius: 14% / 6.4%; background: var(--paper); display: block; }
  /* The Dynamic Island, drawn at its real proportion so the screen reads as
     a screen behind glass rather than a picture in a frame. */
  .phone::before {
    content: ""; position: absolute; z-index: 2; left: 50%; top: 2.5%;
    transform: translateX(-50%);
    width: 31%; aspect-ratio: 125 / 37; border-radius: 999px; background: #0D141C;
  }
  /* Power on the right, the two volume keys on the left, each a sliver of
     the same rail catching the same light. */
  .phone::after {
    content: ""; position: absolute; inset: 0 -1.1%; pointer-events: none;
    background-image:
      linear-gradient(180deg, #9FAAB5, #46586A),
      linear-gradient(180deg, #9FAAB5, #46586A),
      linear-gradient(180deg, #9FAAB5, #46586A);
    background-repeat: no-repeat;
    background-size: 1.05% 8.4%, 1.05% 5.2%, 1.05% 5.2%;
    background-position: right 23.5%, left 17.6%, left 25.4%;
  }
  .phone-caption { margin-top: 16px; font-size: 13px; color: var(--ink-3); text-align: center; }

  /* ---------- Hero ---------- */
  .hero { padding: clamp(56px, 9vw, 96px) 0 clamp(56px, 8vw, 88px); }
  .hero .wrap {
    display: grid; gap: clamp(44px, 6vw, 72px);
    grid-template-columns: 1fr; align-items: center;
  }
  @media (min-width: 780px) { .hero .wrap { grid-template-columns: 1.08fr 0.92fr; } }
  .hero h1 { margin: 16px 0 20px; }
  .hero .rule { margin-bottom: 24px; }
  .hero p { font-size: clamp(17px, 1.6vw, 19px); }
  .hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
  .hero-art { display: flex; justify-content: center; align-items: center; }
  @media (min-width: 780px) { .hero-art { justify-content: flex-end; } }

  /* ---------- Bands ---------- */
  section { padding: clamp(64px, 8.5vw, 108px) 0; }
  .band { background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .section-head { max-width: 62ch; }
  .section-head h2 { margin: 14px 0 18px; }

  /* ---------- Steps ---------- */
  .steps-layout { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; grid-template-columns: 1fr; }
  @media (min-width: 780px) { .steps-layout { grid-template-columns: 0.92fr 1.08fr; } }
  .steps { list-style: none; margin-top: 40px; display: grid; gap: 2px; }
  .step { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
  .step:last-child { border-bottom: 1px solid var(--line); }
  .step .n {
    font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--gold-ink);
    font-variant-numeric: tabular-nums; padding-top: 3px;
  }
  .step p { margin-top: 5px; font-size: 15.5px; }

  /* ---------- Drop ---------- */
  .drop-layout { display: grid; gap: clamp(40px, 5vw, 64px); grid-template-columns: 1fr; align-items: stretch; }
  @media (min-width: 880px) { .drop-layout { grid-template-columns: 1.05fr 0.95fr; } }
  .drop-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    padding: clamp(24px, 3.4vw, 34px);
    box-shadow: 0 1px 2px rgba(46,66,88,.05), 0 18px 40px -30px rgba(46,66,88,.35);
  }
  .week { display: flex; gap: 10px; margin-bottom: 24px; }
  .day { flex: 1; text-align: center; }
  .dot { width: 100%; aspect-ratio: 1; max-width: 30px; margin: 0 auto 7px; border-radius: 50%; }
  .day span { font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: .05em; }
  .drop-card blockquote {
    font-family: var(--serif); font-size: clamp(21px, 2.3vw, 26px); line-height: 1.32;
    letter-spacing: -0.018em; color: var(--ink); margin-bottom: 18px;
  }
  .cited { font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 14px; }
  .examples { display: grid; gap: 14px; margin-top: 26px; }
  @media (min-width: 560px) { .examples { grid-template-columns: 1fr 1fr; } }
  /* Side by side, the quote and the four examples are one block of the same
     height: the card grows to the grid, and the grid's two rows split it. */
  @media (min-width: 880px) {
    .examples { margin-top: 0; grid-template-rows: 1fr 1fr; }
    .drop-card { height: 100%; display: flex; flex-direction: column; }
    .drop-card blockquote { flex: 1 0 auto; }
  }
  .example { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 19px; }
  .example .eyebrow { display: block; margin-bottom: 8px; }
  .example p { font-size: 14.5px; line-height: 1.5; }
  .footnote { margin-top: 20px; font-size: 13px; color: var(--ink-3); }

  /* ---------- Features ---------- */
  .features { display: grid; gap: 1px; margin-top: 48px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  @media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 980px) { .features { grid-template-columns: repeat(3, 1fr); } }
  .feature { background: var(--card); padding: 28px 26px 30px; }
  .feature h3 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
  .feature p { font-size: 14.5px; line-height: 1.55; }
  .plus {
    font-family: var(--sans); font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .1em; color: var(--gold-ink); background: rgba(217,166,30,.13);
    border-radius: 999px; padding: 3px 8px 4px;
  }

  /* ---------- Privacy band ---------- */
  .privacy { background: var(--ink); border: 0; color: var(--paper); }
  .privacy h2 { color: var(--paper); }
  .privacy .eyebrow { color: var(--great); }
  .privacy p { color: rgba(246,243,236,.78); }
  .privacy .rule { background: var(--great); }
  .promises { list-style: none; margin-top: 44px; display: grid; gap: 1px; background: rgba(246,243,236,.16); border: 1px solid rgba(246,243,236,.16); border-radius: 14px; overflow: hidden; }
  @media (min-width: 720px) { .promises { grid-template-columns: 1fr 1fr; } }
  .promises li { background: var(--ink); padding: 20px 22px; font-size: 15px; color: var(--paper); display: flex; gap: 12px; align-items: baseline; }
  .promises li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--great); transform: translateY(-2px); }

  /* ---------- Pricing ---------- */
  .tiers { display: grid; gap: 20px; margin-top: 48px; align-items: stretch; }
  @media (min-width: 760px) { .tiers { grid-template-columns: 1fr 1fr; } }
  .tier {
    position: relative; background: var(--card); border: 1px solid var(--line);
    border-radius: 18px; padding: 30px 28px 32px; overflow: hidden;
  }
  /* Plus is the one being sold, so it carries the gold: a filled edge at the
     head, a warm ground under the price, and a heading in gold ink. */
  .tier.plus-tier {
    border-color: var(--gold);
    background: linear-gradient(180deg, #FCF6E6 0, var(--card) 148px);
    box-shadow: 0 1px 2px rgba(46,66,88,.06), 0 22px 46px -26px rgba(217,166,30,.55);
  }
  .tier.plus-tier::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gold);
  }
  .tier.plus-tier h3 { color: var(--gold-ink); }
  .tier.plus-tier .price { color: var(--ink); font-size: 19px; }
  /* Fraunces sets a plus sign small and pale, which is the one glyph in the
     name that has to be read. Set it in the sans face at its own weight. */
  .plus-mark {
    font-family: var(--sans); font-weight: 600; font-size: 0.86em;
    color: var(--gold-ink); margin-left: 1px; vertical-align: 1px;
  }
  .tier .price { font-family: var(--serif); font-size: 17px; color: var(--ink-3); margin: 6px 0 20px; font-variant-numeric: tabular-nums; }
  .tier ul { list-style: none; display: grid; gap: 11px; }
  .tier li { font-size: 15px; color: var(--ink-2); padding-left: 20px; position: relative; }
  .tier li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
  .terms-note { margin-top: 24px; font-size: 13.5px; color: var(--ink-3); max-width: 68ch; }

  /* ---------- Closing ---------- */
  .closing { text-align: center; }
  .closing .rule { margin: 0 auto 26px; }
  .closing h2 { margin-bottom: 18px; }
  .closing p { margin: 0 auto; max-width: 54ch; }
  .closing .store-badge { margin-top: 34px; }

  /* ---------- Footer ---------- */
  footer { border-top: 1px solid var(--line); padding: 44px 0 56px; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 30px; justify-content: space-between; align-items: flex-start; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .footer-links a { font-size: 14px; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
  .footer-links a:hover { color: var(--ink); border-color: var(--gold); }
  .fine { font-size: 13px; color: var(--ink-3); max-width: 42ch; }
  .fine span { display: block; }

  /* ---------- Reveal ---------- */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .store-badge, .masthead-link, .footer-links a { transition: none; }
  }

  /* ================================================================
     Document pages — Privacy, Terms, Support, About.
     They share the index's chrome and tokens; what is added here is a
     reading column. San's ask (2026-09-05): the pages that live on
     sanutions.com belong on this domain, in this app's own world.
     ================================================================ */
  .doc-page { padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 9vw, 112px); }
  .doc-head { max-width: 720px; }
  .doc-head h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(38px, 6vw, 58px); line-height: 1.04;
    letter-spacing: -0.022em; color: var(--ink); text-wrap: balance;
  }
  .doc-head .stamp {
    margin-top: 14px; font-size: 13px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .doc-head .rule { margin-top: 26px; }

  .doc { max-width: 48ch; margin-top: clamp(36px, 5vw, 52px); }
  .doc h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(24px, 3vw, 30px); line-height: 1.18;
    letter-spacing: -0.014em; color: var(--ink);
    margin-top: 52px;
  }
  .doc h3 {
    font-family: var(--serif); font-size: 20px; font-weight: 600;
    line-height: 1.25; letter-spacing: -0.008em; color: var(--ink);
    margin-top: 34px;
  }
  .doc p, .doc li { color: var(--ink-2); font-size: 17px; line-height: 1.62; }
  .doc p + p { margin-top: 16px; }
  .doc h2 + p, .doc h3 + p, .doc h2 + ul, .doc h3 + ul { margin-top: 14px; }
  .doc ul, .doc ol { margin-top: 14px; padding-left: 22px; }
  .doc li + li { margin-top: 9px; }
  .doc li::marker { color: var(--gold-ink); }
  .doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
  .doc a:hover { text-decoration-thickness: 2px; }
  .doc strong { color: var(--ink); font-weight: 600; }

  /* The opening paragraph carries the weight of the page, so it is set
     larger and hung on the gold hairline rather than boxed. */
  .doc .lede p {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(20px, 2.4vw, 24px); line-height: 1.42;
    color: var(--ink); letter-spacing: -0.006em;
  }
  .doc .lede { margin-bottom: 8px; }

  /* A card is an aside inside the reading column: a support address, a
     summary, a warning. White on paper, the same object as the Drop card. */
  .doc .card {
    margin-top: 30px; background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; padding: clamp(20px, 3vw, 28px);
    box-shadow: 0 1px 2px rgba(46,66,88,.05), 0 18px 40px -30px rgba(46,66,88,.4);
  }
  .doc .card > :first-child { margin-top: 0; }
  .doc .card h2, .doc .card h3 { margin-top: 0; }

  .doc .fine { margin-top: 48px; font-size: 14px; color: var(--ink-3); line-height: 1.55; }
  .doc .back { display: inline-block; margin-top: 44px; font-size: 15px; color: var(--ink-2); }
  .doc .back:hover { color: var(--ink); }

  /* On a wide screen a single reading column leaves half the page empty, so
     the space becomes navigation: the other three documents, marked with
     where you are. Below 1000px it collapses back above the text. */
  .doc-nav { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .doc-nav a { font-size: 15px; color: var(--ink-3); }
  .doc-nav a:hover { color: var(--ink); }
  .doc-nav a[aria-current] { color: var(--ink); font-weight: 500; }
  @media (min-width: 1000px) {
    .doc-page .wrap { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 72px; }
    .doc-head { grid-column: 1 / -1; }
    .doc-nav {
      grid-column: 1; flex-direction: column; gap: 12px;
      position: sticky; top: 108px; align-self: start;
      margin-top: clamp(36px, 5vw, 52px);
      padding-top: 6px; border-top: 1px solid var(--line);
    }
    .doc { grid-column: 2; }
  }

  /* ---------- Platforms ----------
     The three devices are one object, not three: they overlap at their real
     relative sizes and share a single ground shadow, so the eye reads a desk
     rather than a row of product shots. The rig is sized in percentages of
     its own box and given an aspect ratio, so every piece keeps its place at
     any width. Every picture is a real capture: the widget rendered from the
     shipping widget view, the watch from the watch app in the Simulator, the
     iPad and the phone from the app's own screenshot tests. */
  .platforms { padding: clamp(64px, 9vw, 104px) 0; }
  .platforms-layout {
    display: grid; gap: clamp(44px, 6vw, 72px); grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 900px) {
    .platforms-layout { grid-template-columns: 0.86fr 1.14fr; }
  }
  .surfaces { list-style: none; margin: 30px 0 0; padding: 0; }
  .surfaces li {
    font-size: 15px; color: var(--ink-3); padding: 11px 0;
    border-top: 1px solid var(--line);
    display: grid; grid-template-columns: 158px minmax(0, 1fr); column-gap: 18px;
  }
  .surfaces li:last-child { border-bottom: 1px solid var(--line); }
  .surfaces b { font-weight: 500; color: var(--ink); }

  .rig { position: relative; width: 100%; aspect-ratio: 5 / 3.7; }
  /* The one shadow the whole scene stands on. Everything above it carries
     only a hairline edge, so the group does not turn into four cut-outs each
     floating separately. */
  .rig::after {
    content: ""; position: absolute; left: 4%; right: 10%; bottom: 1%; height: 26px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(46,66,88,.26), rgba(46,66,88,0) 72%);
    filter: blur(2px);
  }
  .rig > div { position: absolute; }
  .rig img { width: 100%; display: block; }

  /* Each shell is hardware, not a rounded rectangle: one rail catching the
     light down its edge, a bezel thin enough to be a hairline, and the one
     detail that names the device — the island, the camera, the crown. */
  .rig-tablet {
    left: 0; top: 8%; width: 70%;
    padding: 0.34%; border-radius: 4.4% / 6.2%;
    background: linear-gradient(148deg, #A7B2BC 0%, #55677A 14%, #33455A 44%, #7A8A98 76%, #2A3846 100%);
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.32),
      0 2px 4px rgba(46,66,88,.18), 0 28px 56px -26px rgba(46,66,88,.5);
  }
  .rig-tablet img { border-radius: 4.1% / 5.8%; background: var(--paper); }
  /* The front camera sits on the long edge, which is what tells an iPad from
     a picture frame at this size. */
  .rig-tablet::after {
    content: ""; position: absolute; top: 0.35%; left: 50%; transform: translateX(-50%);
    width: 0.7%; aspect-ratio: 1; border-radius: 50%; background: #0D141C;
  }

  .rig-widget {
    right: 0; top: 0; width: 32%;
    border-radius: 16px; overflow: hidden; background: #FFFFFF;
    outline: 1px solid rgba(46,66,88,.08); outline-offset: -1px;
    box-shadow: 0 1px 2px rgba(46,66,88,.14), 0 18px 38px -20px rgba(46,66,88,.45);
  }

  .rig-phone {
    left: 50.5%; bottom: 3%; width: 26%;
    padding: 0.72%; border-radius: 14.6% / 6.7%;
    background: linear-gradient(148deg, #A7B2BC 0%, #55677A 16%, #33455A 46%, #7A8A98 74%, #2A3846 100%);
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.34),
      0 2px 4px rgba(46,66,88,.2), 0 26px 52px -22px rgba(46,66,88,.55);
  }
  .rig-phone img { border-radius: 14% / 6.4%; background: var(--paper); }
  .rig-phone::before {
    content: ""; position: absolute; z-index: 2; left: 50%; top: 2.5%;
    transform: translateX(-50%);
    width: 31%; aspect-ratio: 125 / 37; border-radius: 999px; background: #0D141C;
  }
  .rig-phone::after {
    content: ""; position: absolute; inset: 0 -1.3%; pointer-events: none;
    background-image:
      linear-gradient(180deg, #9FAAB5, #46586A),
      linear-gradient(180deg, #9FAAB5, #46586A);
    background-repeat: no-repeat;
    background-size: 1.2% 8.4%, 1.2% 9.4%;
    background-position: right 23.5%, left 18.5%;
  }

  /* Apple Watch Ultra: a natural-titanium case, squarer than the aluminium
     watch, a sapphire front that runs almost edge to edge, the crown inside
     its guard on the right, and the orange Action Button on the left. */
  .rig-watch {
    left: 78.5%; bottom: 6%; width: 18%;
    padding: 0.6% 0.45%; border-radius: 25% / 20.5%;
    background: linear-gradient(148deg, #A7B2BC 0%, #55677A 16%, #33455A 46%, #7A8A98 74%, #2A3846 100%);
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.55),
      0 2px 3px rgba(46,66,88,.2), 0 16px 34px -16px rgba(46,66,88,.5);
  }
  .rig-watch img { border-radius: 24% / 19.8%; background: #000; }

  /* The crown guard, with the crown itself as the milled band inside it. */
  .rig-watch::before {
    content: ""; position: absolute; z-index: 1;
    right: -3.4%; top: 27%; width: 5.2%; height: 23%;
    border-radius: 22% 46% 46% 22% / 26% 26% 26% 26%;
    background:
      linear-gradient(90deg, rgba(0,0,0,.18) 0 24%, rgba(0,0,0,0) 24%),
      repeating-linear-gradient(180deg, #8494A2 0 1.5px, #48596B 1.5px 3px),
      linear-gradient(148deg, #A7B2BC, #2A3846);
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4);
  }

  /* Side button under the guard on the right, Action Button on the left. */
  .rig-watch::after {
    content: ""; position: absolute; inset: 0 -2.4%; pointer-events: none;
    background-image:
      linear-gradient(180deg, #9FAAB5, #46586A),
      linear-gradient(180deg, #FF8A3D, #D9531B);
    background-repeat: no-repeat;
    background-size: 2.4% 12%, 2.6% 15%;
    background-position: right 58%, left 40%;
  }

  @media (max-width: 560px) {
    .surfaces li { grid-template-columns: 1fr; row-gap: 2px; }
  }

  /* ---------- The journal ----------
     The index is a list, not a grid of cards: four posts on a hairline
     ledger reads as an editorial column and stays honest about how few
     there are. A three-across card grid would need six posts to not look
     half-built. */
  .post-list { list-style: none; margin: clamp(36px, 5vw, 52px) 0 0; padding: 0; max-width: 54ch; }
  .post-list li { border-top: 1px solid var(--line); }
  .post-list li:last-child { border-bottom: 1px solid var(--line); }
  .post-list a { display: block; padding: 26px 2px; text-decoration: none; }
  .post-list h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(21px, 2.3vw, 26px); line-height: 1.2;
    letter-spacing: -0.015em; color: var(--ink); text-wrap: balance;
  }
  .post-list p { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
  .post-list .stamp {
    display: block; margin-top: 14px; font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .post-list a:hover h2 { color: var(--gold-ink); }

  /* The one place a post asks for anything. It sits after the argument, not
     inside it, so the writing is not an advert with paragraphs. */
  .doc .cta-card { margin-top: 48px; }
  .doc .cta-card h3 { font-family: var(--serif); }
  .doc .cta-link {
    display: inline-block; margin-top: 4px; font-weight: 500; color: var(--ink);
    text-decoration: underline; text-decoration-color: var(--gold);
    text-decoration-thickness: 2px; text-underline-offset: 4px;
  }