/* ═══════════════════════════════════════════════════════════
   FIELDCUT. SHARED DESIGN SYSTEM
   Used by the public surfaces: /about (landing) and /manual (guide).
   The app itself (style.css) keeps its own chrome; this file is the
   editorial layer: one accent, hierarchy by size alone.

   Corners match the app: 12px on controls, 20px on cards and panels, fully
   round only on chips and tags. It used to be square here and rounded there,
   which made moving from the site into the app feel like changing product.

   ONE TYPEFACE since 11 September 2026. SF Pro, the face macOS draws its own
   interface in, taken from the machine rather than served. Nothing is
   downloaded, and there is no second face for headlines or machine values.
   Delight, Basis Grotesque Mono and Unbounded are gone from the product.

   THE GROUND IS THE PAGE. White in light, black in dark, following the
   device. Ultramarine is the mark, not the ground. Orange means one thing,
   dropped. Anything that shows a photo sits on --ink-photo, which does not
   change with the theme.
   ═══════════════════════════════════════════════════════════ */

/* Every VALUE here now comes from ui/css/tokens.css. The names stay, because
   the rest of this file and three pages of markup already use them.

   What changed on 8 September 2026: the ground was ultramarine and the mark
   was orange. The ground is now the page, white or black following the
   device, ultramarine is the mark, and orange is kept back for one job. */
:root{
  color-scheme:light dark;

  /* ── CANVAS ── */
  --bg:var(--fc-canvas);
  --sf:var(--fc-bg);
  --sf2:var(--fc-bg2);
  --ink-photo:var(--fc-photo);       /* anything showing a photograph */

  /* ── INK ── */
  --tx:var(--fc-fg);
  --di:var(--fc-fg2);
  --mu:var(--fc-fg2);

  /* ── LINE ── */
  --br:var(--fc-border);
  --bh:var(--fc-border2);

  /* ── MARK ── ultramarine. Safe as text in both themes, unlike the orange
     it replaces, which measured 3.7:1 on white and could never letter. */
  --ac:var(--fc-ac);
  --ac-ink:var(--fc-ac-ink);
  --ad:var(--fc-ac-wash);
  --ab:var(--fc-ac-line);

  /* ── REJECT ── the only orange left, and it means dropped. */
  --rj:var(--fc-rj);
  --rj-ink:var(--fc-rj-ink);

  --ok:var(--fc-ok);
  --er:var(--fc-err);

  /* ── TYPE ── */
  --sans:var(--fc-font-body);
  --mono:var(--fc-font-mono);
  --display:var(--fc-font-display);

  --t-display:var(--fc-fs-11);
  --t-h1:var(--fc-fs-10);
  --t-h2:var(--fc-fs-9);
  --t-h3:var(--fc-fs-8);
  --t-lead:var(--fc-fs-lead);
  --t-body:var(--fc-fs-read);
  --t-small:var(--fc-fs-note);
  --t-micro:var(--fc-fs-1);

  /* ── SPACE ── */
  --s1:var(--fc-s-1);--s2:var(--fc-s-2);--s3:var(--fc-s-3);
  --s4:var(--fc-s-4);--s5:var(--fc-s-5);--s6:var(--fc-s-6);
  --s7:var(--fc-s-7);--s8:var(--fc-s-8);--s9:var(--fc-s-9);--s10:var(--fc-s-10);

  --gut:var(--fc-gut);
  --max:var(--fc-page-max);
  --read:var(--fc-measure);

  /* ── SHAPE ── */
  --rad:var(--fc-r-box);--rad-sm:var(--fc-radius);--rad-pill:var(--fc-r-pill);
  --rad-panel:var(--fc-r-panel);     /* card, panel — new rung, additive only */
  --sh:var(--fc-sh-1);               /* the one resting-card shadow this file uses */

  /* ── MOTION ── */
  --ease:var(--fc-ease-out);
  --ease-io:var(--fc-ease);
  --dur:var(--fc-dur);
  --dur-tap:var(--fc-dur-tap);
  --dur-slow:.7s;                    /* the one long page-level reveal */
}

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

/* display on the primitives below would otherwise beat [hidden] */
[hidden]{display:none!important}

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

body{
  background:var(--bg);color:var(--tx);
  font-family:var(--sans);font-size:var(--t-body);font-weight:var(--fc-fw);
  line-height:var(--fc-lh-prose);
  /* No tracking at body size. Delight needed opening up; SF Pro is spaced by
     Apple per optical size, and adding to it is what makes type look bought. */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-optical-sizing:auto;
}

::selection{background:var(--tx);color:var(--bg)}

/* ── PRIMITIVES ─────────────────────────────────────────── */

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

/* Micro label. Mono, bone. Marks the start of a section.
   It used to be orange, which sits at 2.4:1 on the blue and fails. */
.eyebrow{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:var(--fc-fw);
  letter-spacing:.01em;color:var(--di);
}
.eyebrow.quiet{color:var(--mu)}

/* Display type. SF Pro at 500, tracked in tight. One headline per page. */
.display{font-family:var(--display);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);line-height:var(--fc-lh-head);text-wrap:balance}
/* The emphasised word used to be drawn as a hollow line, and the giant
   outlined word used to sit behind a section as ground. Both were cut on
   12 September 2026, along with every other stroked letterform on the site.
   <em> stays in the markup because it is still the right tag for emphasis.
   It just reads as ordinary display type now instead of turning italic. */
.display em{font-style:normal}

/* A panel gets a fill, so the ground stops at its edge rather than running
   under it. Any card, list or panel on a public page. */
.steps,.faq,.paid,.pending,.plans,.card-surface{
  background:var(--sf);
  backdrop-filter:none;
}

/* Anything that shows a photo or a clip sits on this, never on the blue. */
.photo-ground{background:var(--ink-photo);color:var(--fc-photo-fg)}

/* A counter: big mono number, small denominator. 1,204 / 4,000 */
.counter{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:var(--fc-ls-tight);line-height:1}
.counter small{font-size:.5em;opacity:.7}

/* A stamp: an outlined box in the display face, tilted a touch. Blue,
   the mark's colour, not the orange this comment used to describe. */
.stamp{
  display:inline-block;font-family:var(--display);font-weight:var(--fc-fw-up);line-height:1;
  color:var(--ac);border:.12em solid var(--ac);border-radius:var(--fc-r-sm);padding:.3em .45em .25em;
  letter-spacing:.02em;transform:rotate(-6deg);
}

.lead{font-size:var(--t-lead);color:var(--di);line-height:1.5;max-width:var(--read);font-weight:var(--fc-fw)}

.rule{height:1px;background:var(--br);border:0}

/* Buttons: a real capsule, colour is the only thing that changes between
   variants. This file loads after ui/css/components.css and would win the
   cascade either way, so the rule here is complete and correct on its own
   rather than half-relying on a file this agent was told not to open. The
   old left-to-right wipe is gone: the reference only ever transitions
   background-colour, in 150ms, and nothing else moves. */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--fc-s-2);
  min-height:var(--fc-ctrl-h);padding:0 var(--fc-pad-btn);
  border:var(--fc-bw) solid var(--br);border-radius:var(--rad-pill);
  background-color:transparent;
  color:var(--tx);font-family:var(--sans);font-size:var(--fc-fs-4);font-weight:var(--fc-fw-mid);
  line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-tap) var(--ease),border-color var(--dur-tap) var(--ease),
             color var(--dur-tap) var(--ease),transform var(--dur-tap) var(--ease);
}
.btn:hover{background-color:var(--sf2);border-color:var(--bh)}
.btn:active{transform:scale(var(--fc-press))}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}

.btn--lg{min-height:var(--fc-ctrl-h-lg);padding:0 var(--fc-pad-btn)}
.btn--sm{min-height:var(--fc-ctrl-h-sm);padding:0 var(--fc-pad-btn-sm);font-size:var(--fc-fs-3)}

/* The one primary action on the page: an ink capsule, not a blue one. */
.btn--primary{background-color:var(--tx);border-color:var(--tx);color:var(--bg)}
.btn--primary:hover{background-color:var(--di);border-color:var(--di)}

/* The blue fill .btn--primary used to be. No public page needs it today;
   kept correct for the one that does. */
.btn--accent{background-color:var(--ac);border-color:transparent;color:var(--fc-ac-on)}
.btn--accent:hover{opacity:.88}

.btn--ghost{background-color:transparent;border-color:var(--br);color:var(--tx)}
.btn--ghost:hover{background-color:var(--sf2);border-color:var(--bh)}

kbd{
  font-family:var(--mono);font-size:var(--fc-fs-1);line-height:1;
  padding:var(--fc-s-2) var(--fc-s-2);border:1px solid var(--br);border-radius:var(--rad-sm);background:var(--sf);
  color:var(--tx);letter-spacing:.04em;white-space:nowrap;
}

a{color:inherit}

/* Keyboard users need to see where they are. Mouse users never see this.
   Bone, not orange: the ring has to clear 3:1 against the blue. */
:focus-visible{outline:2px solid var(--fc-ring);outline-offset:3px}

/* Straight to the content, for anyone tabbing in. */
.skip{position:absolute;left:var(--gut);top:-100px;z-index:200;
  padding:var(--fc-s-3) var(--fc-s-5);border-radius:var(--rad-sm);background:var(--tx);color:var(--bg);font-size:var(--fc-fs-4);
  text-decoration:none;transition:top var(--dur) var(--ease)}
.skip:focus{top:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── THE FOOTER ───────────────────────────────────────────
   Every public page ends here, and it is the only place on the site that
   says what else exists.

   What it replaces. The landing ended in four grey links inside the buy
   section and then stopped; /legal and /key carried a <footer class="foot">
   with no CSS written for it at all, which is to say the browser's default.
   Neither was a footer. Nothing on the site linked to the manual.

   The shape is Apple's, and Apple's footer is deliberately the quietest
   thing on the page: a ground change at the top edge, the mark on the left,
   three short columns of real destinations, one line of small print under a
   hairline. The page has already said what it came to say. This is the
   index, not a finale.

   No price down here. It is a launch price with a date on it, it is already
   in four places on the landing, and this footer also appears on pages that
   would still be quoting it a month after it changed.

   Every value comes from the aliases at the top of this file, which come
   from ui/css/tokens.css. scripts/token-lint.py --check is the gate.
   ═══════════════════════════════════════════════════════ */
.foot{
  background:var(--bg);
  border-top:1px solid var(--br);
  padding:var(--s8) 0 var(--s6);
}
/* Four columns: the mark takes the widest, then the three groups. The mark
   is given more than a third because the line under it is a sentence, and a
   sentence in a column as narrow as a link list wraps to five lines. */
.foot-in{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--s7) var(--s5);align-items:start;
}

.foot-mark{display:flex;flex-direction:column;gap:var(--s2)}
.foot-name{font-size:var(--t-lead);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);color:var(--tx)}
.foot-say{font-size:var(--t-small);color:var(--mu);max-width:26ch;line-height:1.5}

/* Apple's own column heading: small, one step up in weight, ink rather than
   grey, and in the body face. The mono all-caps label the app uses reads as a
   spec sheet, which is the wrong register for a page that is selling. */
.foot-h{font-size:var(--t-small);font-weight:var(--fc-fw-mid);color:var(--tx);letter-spacing:normal}

.foot-col{display:flex;flex-direction:column;gap:var(--s3)}
.foot-col ul{display:flex;flex-direction:column;gap:var(--s2)}
/* Quiet by default and ink on hover, which is the whole interaction. The
   accent belongs to the one button on the page, not to a list of links. */
.foot-col a{
  display:inline-block;
  color:var(--di);font-size:var(--t-small);text-decoration:none;
  transition:color var(--dur-tap) var(--ease);
}
.foot-col a:hover{color:var(--tx);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px}

/* On a finger, every row is a legal target. On a mouse the same rows stay
   the size the type wants, because 40px of dead space per link would make
   the footer taller than the section above it. */
@media (pointer:coarse){
  .foot-col ul{gap:0}
  .foot-col li{display:flex;align-items:center;min-height:var(--fc-hit)}
}

/* The small print. A <p>, so base.css caps it at a reading measure — which
   is right for prose and wrong for a full-width rule, hence the override. */
.foot-fine{
  grid-column:1 / -1;max-width:none;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s5);
  margin-top:var(--s2);padding-top:var(--s5);
  border-top:1px solid var(--br);
  font-size:var(--fc-fs-2);color:var(--mu);
}

@media (max-width:760px){
  .foot{padding:var(--s7) 0 var(--s6)}
  .foot-in{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
  .foot-mark{grid-column:1 / -1}
  .foot-fine{justify-content:flex-start;gap:var(--s1) var(--s5)}
}