/* Sparkline Markets — single-screen site
   One viewport, no scrolling at any size. Brand: Sparkline v4 production master (Montserrat 400/500).
   Type floor: 11px everywhere, 10.5px only for the legal line on the smallest landscape screens. */

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --void: #05060A;
  --ink: #0B0D14;
  --snow: #F5F6F8;
  --mist: #8A8FA0;
  --ice: #A9C0FF;
  --violet: #6448FF;
  --ultra: #2343FF;
  --ember: #FF5A1F;

  --hair: rgba(169, 192, 255, .09);
  --hair-2: rgba(169, 192, 255, .15);
  --edge: rgba(138, 143, 160, .66);      /* form boundary: >= 3:1 on Void */

  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gx: clamp(16px, 3vw, 64px);          /* side gutter */
  --top-h: clamp(50px, 8vh, 76px);       /* top bar */
  --micro: clamp(11px, .76vw, 12.5px);   /* tracked caps in the bar */
  --spec: clamp(11px, .5vw, 12.5px);     /* tracked caps in the spec row */
  --caps-track: .2em;                    /* one tracking for every tracked-caps label */
  --legal: clamp(11px, .52vw, 13px);
  --ui: clamp(13px, .68vw, 16px);        /* nav, status */

  color-scheme: dark;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(90% 70% at 50% 48%, rgba(11, 13, 20, .95) 0%, rgba(11, 13, 20, .5) 45%, rgba(5, 6, 10, 0) 80%),
    var(--void);
  color: var(--snow);
  font-family: var(--font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nw { white-space: nowrap; }

button { font: inherit; color: inherit; }

/* ---------- Particle field ---------- */

/* Soft rim light under the dots, placed by field.js (--orb-*) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --ox: var(--orb-x, 50vw);
  --oy: var(--orb-y, 50vh);
  --or: var(--orb-r, 30vmin);
  background:
    radial-gradient(calc(var(--or) * 1.05) calc(var(--or) * .42) at var(--ox) calc(var(--oy) + var(--or) * .96), rgba(255, 90, 31, .07), rgba(255, 90, 31, 0) 70%),
    radial-gradient(calc(var(--or) * 1.1) calc(var(--or) * .5) at calc(var(--ox) + var(--or) * .2) calc(var(--oy) - var(--or) * .95), rgba(169, 192, 255, .05), rgba(169, 192, 255, 0) 70%),
    radial-gradient(circle at var(--ox) var(--oy), rgba(5, 6, 10, 0) calc(var(--or) * .74), rgba(100, 72, 255, .07) calc(var(--or) * .97), rgba(35, 67, 255, .025) calc(var(--or) * 1.12), rgba(5, 6, 10, 0) calc(var(--or) * 1.45));
}

.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* ---------- Top bar ---------- */

.top {
  position: relative;
  z-index: 5;
  padding: 0 var(--gx);
}

.topbar {
  height: var(--top-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: clamp(14px, 1.6vw, 22px);
  align-items: center;
}



/* Centre: the bespoke S mark alone, as in the reference */
.brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-left: -8px;                 /* optical: the 44px hit area, the mark flush with the gutter */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform .3s ease, opacity .3s ease;
}
.brand:hover .brand-mark { filter: drop-shadow(0 0 10px rgba(169, 192, 255, .45)); }
.brand[aria-pressed="true"] .brand-mark { opacity: .55; }
.brand:focus-visible { outline: 1px solid var(--ember); outline-offset: 4px; }
.brand-mark {
  display: block;
  width: clamp(28px, 1.9vw, 34px);
  height: clamp(28px, 1.9vw, 34px);
}


.status {
  grid-column: 4;
  padding-left: clamp(14px, 1.6vw, 22px);
  border-left: 1px solid var(--hair-2);
  min-height: 18px;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: calc(var(--ui) - 1px);
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}
.status[hidden] { display: none; }
.status-label { color: var(--snow); }
.s-short { display: none; }
.status-sep { opacity: .7; }

/* Session light: green while a session runs (premarket, open, after-hours), red when closed.
   A soft ripple, three times on load, then still (WCAG 2.2.2). */
.status {
  --live: #2BD67B;
  --closed: #FF4545;
}
.status-dot {
  position: relative;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-radius: 50%;
  flex: none;
  background: var(--closed);
  box-shadow: 0 0 0 1px rgba(255, 69, 69, .25), 0 0 8px 1px rgba(255, 69, 69, .55);
}
.status[data-live="true"] .status-dot {
  background: var(--live);
  box-shadow: 0 0 0 1px rgba(43, 214, 123, .25), 0 0 8px 1px rgba(43, 214, 123, .6);
}
.status[data-live="true"] .status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--live);
  opacity: 0;
  animation: ripple 2.8s ease-out 3;
}
@keyframes ripple {
  0%        { transform: scale(1);   opacity: .7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.motion-paused .status[data-live="true"] .status-dot::after { animation-play-state: paused; }

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

/* Headline with the supporting sentence directly under it, left-aligned as in the reference */
.hero {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: 0 var(--gx);
}
.hero-copy { min-width: 0; max-width: 100%; }

.headline {
  margin: 0;
  font-weight: 500;
  font-size: clamp(28px, 3.05vw, 62px);
  line-height: 1.13;
  letter-spacing: -.02em;
  color: var(--snow);
  text-wrap: balance;
}
.headline .line,
.lede .line { display: block; }

.lede {
  margin: clamp(14px, 2.4vh, 28px) 0 0;
  font-size: clamp(15px, 1.2vw, 23px);
  line-height: 1.5;
  letter-spacing: -.003em;
  color: var(--mist);
}
.lede .line { white-space: nowrap; }

/* The memo: an editorial teaser under the sentence (a link to a letter, not a button) */
.memo-teaser {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  min-width: min(100%, 360px);
  margin-top: clamp(28px, 4.4vh, 48px);
  padding-top: 16px;
  border-top: 1px solid var(--hair-2);
  color: var(--snow);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s ease;
}
.mt-k {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--mist);
}
.mt-dot { width: 5px; height: 5px; flex: none; background: var(--ember); }
.mt-t {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(17px, 1.3vw, 24px);
  font-weight: 500;
  letter-spacing: -.01em;
}
.mt-arrow { position: relative; width: 18px; height: 12px; flex: none; color: var(--ember); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.mt-arrow::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1.4px; background: currentColor; transform: translateY(-50%); }
.mt-arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
@media (hover: hover) {
  .memo-teaser:hover { border-top-color: rgba(169, 192, 255, .55); }
  .memo-teaser:hover .mt-arrow { transform: translateX(5px); }
  .memo-teaser:hover .mt-k { color: var(--snow); }
}
.memo-teaser:focus-visible { outline: 1px solid var(--ember); outline-offset: 6px; }

/* Contact: a quiet link in the top bar, beside the market light */
.top-contact {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--snow);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 calc(50% + 1.1em);
  background-repeat: no-repeat;
  transition: background-size .3s ease;
}
@media (hover: hover) { .top-contact:hover { background-size: 100% 1px; } }
.top-contact:focus-visible { outline: 1px solid var(--ember); outline-offset: 4px; }

/* The brand's ember square, shown on button hover/focus */
.spark {
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--ember);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
}

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

.foot {
  position: relative;
  z-index: 1;
  padding: 0 var(--gx) clamp(12px, 2.6vh, 28px);
}

.legal {
  margin: 0;
  padding-top: clamp(9px, 1.5vh, 13px);
  border-top: 1px solid var(--hair);
  font-size: var(--legal);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--mist);
}


/* Legal · Privacy · Terms: quiet underlined links in the legal line, like Pause motion */
.legal-links { white-space: nowrap; }
.legal-link {
  position: relative;
  color: var(--mist);
  text-decoration: underline;
  text-decoration-color: rgba(138, 143, 160, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}
@media (hover: hover) { .legal-link:hover { color: var(--snow); } }
.legal-link::after { content: ""; position: absolute; inset: -6px -4px; }

/* ---------- Focus ---------- */

.legal-link:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ======================================================================
   Responsive. Width and height both decide what stays on the one screen.
   ====================================================================== */


/* Tablet portrait and below: one column */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    row-gap: clamp(16px, 3vh, 32px);
  }
  .headline { font-size: clamp(28px, 5.4vw, 44px); }
  .lede .line { white-space: normal; }
  .lede { font-size: clamp(15px, 2.2vw, 18px); }
}

/* Portrait tablets and phones: the orb takes the upper half, the copy sits below it */
@media (max-width: 900px) and (orientation: portrait) {
  .hero { align-content: end; padding-bottom: clamp(8px, 4vh, 48px); }
}

/* Narrow: the bar carries the navigation alone (the announcement text steps aside) */
@media (max-width: 760px) {
}
@media (max-width: 380px) {
}

/* Phones */
@media (max-width: 600px) {
  :root {
    --top-h: 56px;
    --micro: 11px;
    --spec: 11px;
    --caps-track: .12em;
  }
  .status { font-size: 11.5px; gap: 6px; }
  .status .s-long { display: none; }
  .status .s-short { display: inline; }


  .hero { align-content: end; padding-bottom: clamp(8px, 3vh, 28px); }
  .headline { font-size: clamp(25px, 7.4vw, 34px); line-height: 1.12; }
  .lede { font-size: 15px; }
  .lede .line { display: inline; }

  .legal { font-size: 11px; line-height: 1.45; padding-top: 9px; }
}


/* Smallest phones: keep the session word, move the time to screen readers only */
@media (max-width: 374px) {
  .status .status-sep,
  .status .status-time {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Short screens (landscape laptops, landscape phones) ---------- */

@media (max-height: 520px) and (min-width: 601px) {
  :root {
    --top-h: 46px;
    --micro: 11px;
    --spec: 11px;
  }
  .headline { font-size: clamp(22px, 3.4vw, 30px); }
  .lede { font-size: 14px; }
  .lede .line { display: inline; white-space: normal; }
  .legal { font-size: 10.5px; padding-top: 6px; }
  .foot { padding-bottom: 8px; }
}

@media (max-height: 420px) and (min-width: 601px) {
  .lede { margin-top: 8px; }
}

/* Small phones held sideways (e.g. 568 x 320): two columns, smallest type */
@media (max-width: 600px) and (orientation: landscape) {
  :root { --top-h: 44px; }
  .brand-mark { height: 24px; width: 24px; }
  .hero { align-content: center; padding-bottom: 0; }
  .headline { font-size: 20px; }
  .lede { font-size: 12.5px; margin-top: 6px; }
  .lede .line { display: inline; }

  .legal { font-size: 10.5px; line-height: 1.4; padding-top: 6px; }
  .foot { padding-bottom: 6px; }
}

/* Very short portrait phones (e.g. 320 x 568 with browser chrome) */
@media (max-width: 600px) and (max-height: 600px) and (orientation: portrait) {
  :root { --top-h: 50px; }
  .headline { font-size: 24px; }
  .lede { font-size: 14px; }
  .lede { margin-top: 10px; }
}

/* Portrait viewports shrunk by an on-screen keyboard (browsers that resize the layout) */
@media (max-width: 600px) and (max-height: 440px) and (orientation: portrait) {
}

/* ---------- Touch: 44px targets, 16px form controls (iOS does not zoom) ---------- */

/* no grey/cyan tap box drawn over the sheets; a small press instead */
button, .chip, .chip input { -webkit-tap-highlight-color: transparent; }
.sheet-cta:active, .send:active, .chip:active span { transform: translateY(1px); }

@media (pointer: coarse) {
  .cf input, .cf textarea { font-size: 16px !important; }
  .chip span { min-height: 44px; }
  .send { min-height: 44px; }
  .sheet-close, .sheet-cta { min-height: 44px; }
  .legal-link::after { inset: -14px -5px -6px; }
}
@media (pointer: coarse) and (min-height: 521px) and (min-width: 761px) {
}
/* touch phones: the bar is the navigation, so it is tall enough for 44px targets */
@media (pointer: coarse) and (max-width: 760px) {
}
/* short touch screens (phones held sideways): links only, 40px tall */
@media (pointer: coarse) and (max-height: 520px) {
}

/* ---------- Reflow fallback (WCAG 1.4.10) ----------
   Only 300–400% browser zoom or a tiny split window gives a viewport this narrow AND this short;
   no phone screen does. There the page may scroll rather than overlap. */
@media (max-width: 500px) and (max-height: 320px) {
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
  body { min-height: 100vh; grid-template-rows: auto auto auto; }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: 12px;
    padding-block: 16px;
  }
}

/* ======================================================================
   Brand moment: the full lockup assembles over the orb (centre mark click)
   ====================================================================== */

.reveal {
  position: fixed;
  inset: 0;
  z-index: 4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reveal[hidden] { display: none; }
/* a soft dark core so the lockup reads over the orb */
.reveal::before {
  content: "";
  position: absolute;
  left: var(--orb-x, 50vw);
  top: var(--orb-y, 50vh);
  width: calc(var(--orb-r, 30vmin) * 2);
  height: calc(var(--orb-r, 30vmin) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 6, 10, .78) 0%, rgba(5, 6, 10, .5) 45%, rgba(5, 6, 10, 0) 72%);
  opacity: 0;
  transition: opacity .6s ease;
}
.reveal-art {
  position: absolute;
  left: var(--orb-x, 50vw);
  top: var(--orb-y, 50vh);
  width: min(calc(var(--orb-r, 30vmin) * 2.1), 92vw, 980px);
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.is-reveal .reveal::before { opacity: 1; }
.reveal { transition: opacity .4s ease; }
.is-unreveal .reveal { opacity: 0; pointer-events: none; }   /* fading out: never catches a tap */
.is-unreveal .reveal::before { opacity: 1; }
.is-unreveal .reveal-art * { opacity: 1; stroke-dashoffset: 0; }
.is-reveal .hero-copy { opacity: 0; transform: translateY(8px); }
.hero-copy { transition: opacity .45s ease, transform .45s ease; }

/* choreography (runs each time the reveal opens) */
.reveal-art .rv-s,
.reveal-art .rv-l,
.reveal-art .rv-tm,
.reveal-art .rv-tick,
.reveal-art .rv-ember,
.reveal-art .rv-mk { opacity: 0; }
.reveal-art .rv-rule { stroke-dasharray: 1; stroke-dashoffset: 1; }

.is-reveal .rv-s1 { animation: rv-s1 .7s cubic-bezier(.2, .8, .2, 1) .05s both; }
.is-reveal .rv-s2 { animation: rv-s2 .7s cubic-bezier(.2, .8, .2, 1) .05s both; }
.is-reveal .rv-l  { animation: rv-l .6s cubic-bezier(.2, .8, .2, 1) calc(.35s + var(--i) * .06s) both; }
.is-reveal .rv-tm { animation: rv-fade .5s ease .95s both; }
.is-reveal .rv-tick { animation: rv-fade .3s ease .9s both; }
.is-reveal .rv-rule { animation: rv-draw .6s cubic-bezier(.65, 0, .35, 1) .95s both; }
.is-reveal .rv-ember { animation: rv-ember .5s cubic-bezier(.2, 1.6, .4, 1) 1.5s both; transform-box: fill-box; transform-origin: center; }
.is-reveal .rv-mk { animation: rv-mk .7s ease 1.6s both; }

@keyframes rv-s1 { from { opacity: 0; transform: translate(-26px, 44px); } to { opacity: 1; transform: none; } }
@keyframes rv-s2 { from { opacity: 0; transform: translate(26px, -44px); } to { opacity: 1; transform: none; } }
@keyframes rv-l  { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-draw { to { stroke-dashoffset: 0; } }
@keyframes rv-ember { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 90, 31, .9)); } }
@keyframes rv-mk { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ======================================================================
   Sheets: Memo and Contact (native <dialog>, top layer).
   The page never scrolls; main.js lowers --k (type scale) until a sheet fits.
   ====================================================================== */

.sheet {
  --k: 1;
  width: min(660px, calc(100vw - 2 * var(--gx)));
  max-width: none;
  max-height: calc(100dvh - 2 * clamp(10px, 3vh, 40px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hair-2);
  background:
    radial-gradient(120% 60% at 50% 120%, rgba(255, 90, 31, .05), rgba(255, 90, 31, 0) 60%),
    radial-gradient(90% 50% at 0% 0%, rgba(100, 72, 255, .08), rgba(100, 72, 255, 0) 60%),
    rgba(11, 13, 20, .97);
  color: var(--snow);
  font-family: var(--font);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(5, 6, 10, .6);
}
.sheet.is-tight { overflow-y: auto; }   /* last resort (400% zoom): the sheet scrolls, never the page */
.memo.is-tight { overflow: hidden; }
.memo.is-tight .sheet-inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2 * clamp(10px, 3vh, 40px) - 2px);
}
.memo.is-tight .memo-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(169, 192, 255, .28) transparent;
  overscroll-behavior: contain;
  padding-bottom: 18px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
}
.memo.is-tight .sheet-foot { flex: none; }
.sheet::backdrop {
  background: rgba(5, 6, 10, .64);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sheet[open] { animation: sheet-in .22s ease both; }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.sheet-inner {
  position: relative;
  padding: calc(26px * var(--k)) calc(32px * var(--k)) calc(22px * var(--k));
}
/* rim light along the top edge, like the orb */
.sheet-inner::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(100, 72, 255, 0), rgba(100, 72, 255, .7) 30%, rgba(35, 67, 255, .7) 70%, rgba(35, 67, 255, 0));
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sheet-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}
.sheet-spark { width: 5px; height: 5px; flex: none; background: var(--ember); }

.sheet-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -8px -4px -8px 0;
  padding: 8px 4px;
  background: none;
  border: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--mist);
  cursor: pointer;
  transition: color .2s ease;
}
.sheet-close:hover { color: var(--snow); }
.sheet-x { position: relative; width: 10px; height: 10px; }
.sheet-x::before,
.sheet-x::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.sheet-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

.sheet-title {
  margin: calc(18px * var(--k)) 0 0;
  font-size: max(20px, calc(30px * var(--k)));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--snow);
}
.sheet-lede {
  margin: calc(8px * var(--k)) 0 0;
  font-size: max(13px, calc(15px * var(--k)));
  color: var(--mist);
}

.sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: calc(22px * var(--k));
  padding-top: calc(18px * var(--k));
  border-top: 1px solid var(--hair-2);
}

.sheet-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: max(36px, calc(42px * var(--k)));
  padding: 0 18px 0 15px;
  background: rgba(5, 6, 10, .5);
  border: 1px solid var(--edge);
  color: var(--snow);
  font-size: max(12.5px, calc(14px * var(--k)));
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.sheet-cta:hover { background: rgba(245, 246, 248, .06); border-color: rgba(245, 246, 248, .72); }
.sheet-cta:hover .spark,
.sheet-cta:focus-visible .spark { opacity: 1; transform: none; }

.sheet-legal {
  margin: calc(14px * var(--k)) 0 0;
  font-size: 11px;
  letter-spacing: .01em;
  color: var(--mist);
}
/* links to the legal texts inside the sheets (memo legal line, contact note) */
.sheet-legal a,
.cform-note a {
  color: var(--snow);
  text-decoration: underline;
  text-decoration-color: rgba(169, 192, 255, .5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
@media (hover: hover) {
  .sheet-legal a:hover,
  .cform-note a:hover { text-decoration-color: var(--ice); }
}
.sheet-legal a:focus-visible,
.cform-note a:focus-visible { outline: 1px solid var(--ember); outline-offset: 3px; }
/* the no-JavaScript Close link of the legal sheets (index.html noscript styles) */
.sheet-head .ns-close { display: none; }

.sheet-close:focus-visible,
.sheet-cta:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 3px;
}

/* ---------- Memo: a confidential investor memo, laid out like a spec sheet ---------- */

.memo { width: min(680px, calc(100vw - 2 * var(--gx))); }

.memo .sheet-title { margin-top: calc(20px * var(--k)); }

.memo-body { margin-top: calc(14px * var(--k)); }
.memo-body p {
  margin: 0 0 calc(12px * var(--k));
  font-size: max(12px, calc(14.5px * var(--k)));
  line-height: 1.62;
  color: rgba(245, 246, 248, .78);
  text-wrap: pretty;
}
.memo-body p:last-child { margin-bottom: 0; }
/* a beat line on its own, and the sign-off: brighter */
.memo-body .memo-beat { color: var(--snow); font-weight: 500; font-size: max(14px, calc(17px * var(--k))); letter-spacing: -.01em; }
/* the sign-off line: brighter, a beat apart */
.memo-body .memo-close { margin-top: calc(18px * var(--k)); color: var(--snow); font-weight: 500; }

/* the memo foot: the legal line beside the button */
.memo-foot { align-items: center; }
.memo-foot .sheet-legal { margin: 0; max-width: 34em; line-height: 1.45; }
.memo-foot .memo-cta-bar,
.memo-foot .memo-send { flex: none; }

/* ---------- Contact form: topic chips, underline fields, a send button with the spark ---------- */

.contact { width: min(700px, calc(100vw - 2 * var(--gx))); }

.cform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "topic topic"
    "name  email"
    "msg   msg"
    "foot  foot";
  gap: calc(20px * var(--k)) 28px;
  margin-top: calc(22px * var(--k));
}
.cform[hidden] { display: none; }
.topics { grid-area: topic; }
.f-name  { grid-area: name; }
.f-email { grid-area: email; }
.f-msg   { grid-area: msg; }
.cform-foot { grid-area: foot; }

.topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.topics legend,
.cf label {
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--mist);
}
.topic-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: max(32px, calc(36px * var(--k)));
  padding: 0 14px;
  border: 1px solid var(--hair-2);
  background: rgba(5, 6, 10, .4);
  font-size: max(12px, calc(13px * var(--k)));
  color: var(--mist);
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip span::before {
  content: "";
  width: 5px; height: 5px;
  flex: none;
  background: var(--mist);
  opacity: .5;
  transition: background-color .2s ease, opacity .2s ease;
}
.chip:hover span { color: var(--snow); border-color: rgba(169, 192, 255, .35); }
.chip input:checked + span { color: var(--snow); border-color: rgba(169, 192, 255, .55); background: rgba(169, 192, 255, .07); }
.chip input:checked + span::before { background: var(--ember); opacity: 1; }
.chip input:focus-visible + span { outline: 1px solid var(--ember); outline-offset: 3px; }

/* fields: no boxes, a hairline underline that lights up */
.cf { display: grid; gap: 4px; min-width: 0; }
.cf input,
.cf textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px 0 9px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--edge);
  border-radius: 0;
  outline: 0;
  color: var(--snow);
  font: inherit;
  font-size: max(14px, calc(15.5px * var(--k)));
  letter-spacing: .005em;
  caret-color: var(--ember);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cf textarea {
  height: max(56px, calc(78px * var(--k)));
  line-height: 1.5;
  resize: none;
}
.cf input::placeholder,
.cf textarea::placeholder { color: rgba(138, 143, 160, .55); }
.cf input:focus,
.cf textarea:focus {
  border-bottom-color: var(--ice);
  box-shadow: 0 1px 0 0 var(--ice), 0 8px 18px -12px rgba(169, 192, 255, .55);
}
.cf [aria-invalid="true"] { border-bottom-color: var(--ember); box-shadow: 0 1px 0 0 var(--ember); }

.cform-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: calc(6px * var(--k));
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.send[aria-busy="true"] { opacity: .7; cursor: progress; }
.cform-status { display: grid; min-width: 0; }
.cform-status > * { grid-area: 1 / 1; margin: 0; line-height: 18px; }
.cform-msg { font-size: 12.5px; color: #FF9466; }
.cform-note { font-size: 12px; color: var(--mist); }
.cform-msg:not(:empty) ~ .cform-note { visibility: hidden; }
.topics[aria-invalid="true"] .chip span { border-color: rgba(255, 90, 31, .6); }

.send {
  appearance: none;
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: max(40px, calc(46px * var(--k)));
  padding: 0 16px 0 18px;
  border: 1px solid rgba(245, 246, 248, .7);
  background: var(--snow);
  color: var(--ink);
  font: inherit;
  font-size: max(13px, calc(14px * var(--k)));
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.send .spark { opacity: 1; transform: none; }
.send-arrow { position: relative; width: 14px; height: 10px; flex: none; transition: transform .25s ease; }
.send-arrow::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1.2px; background: currentColor; transform: translateY(-50%); }
.send-arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1.2px solid currentColor;
  border-right: 1.2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.send:hover { background: #FFFFFF; box-shadow: 0 0 0 4px rgba(169, 192, 255, .12), 0 10px 30px -12px rgba(169, 192, 255, .6); }
.send:hover .send-arrow { transform: translateX(3px); }
.send:focus-visible { outline: 1px solid var(--ember); outline-offset: 3px; }

/* sent: a sparkline draws itself and ends on the spark */
.contact-done {
  margin-top: calc(26px * var(--k));
  padding: calc(22px * var(--k)) 0 calc(6px * var(--k));
  border-top: 1px solid var(--hair-2);
  outline: 0;
}
.contact-done[hidden] { display: none; }
@keyframes act-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.done-line { display: block; width: 120px; height: 24px; overflow: visible; }
.done-line path {
  fill: none;
  stroke: var(--ice);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: act-draw .9s cubic-bezier(.65, 0, .35, 1) .1s forwards;
}
.done-line rect { fill: var(--ember); opacity: 0; animation: rv-fade .3s ease .95s forwards; }
.done-t { margin: 16px 0 0; font-size: max(16px, calc(20px * var(--k))); font-weight: 500; letter-spacing: -.01em; color: var(--snow); }
.done-n { margin: 6px 0 0; font-size: 13px; color: var(--mist); }

/* Narrow: one column */
@media (max-width: 560px) {
  .sheet { width: calc(100vw - 2 * var(--gx)); }
  .sheet-inner { padding: calc(20px * var(--k)) calc(20px * var(--k)) calc(18px * var(--k)); }
  .cform {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topic" "name" "email" "msg" "foot";
    row-gap: calc(16px * var(--k));
  }
  .chip span { padding: 0 11px; }
  .send { width: 100%; justify-content: center; }
  .memo .sheet-foot { flex-direction: column; align-items: stretch; }
  .memo .memo-send { justify-content: center; }
}
/* Short and wide (landscape phones, short laptops): use the width */
@media (max-height: 560px) and (min-width: 601px) {
  .sheet { width: min(860px, calc(100vw - 2 * var(--gx))); }
  .cform {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas:
      "topic topic"
      "name  msg"
      "email msg"
      "foot  foot";
  }
  .f-msg { display: grid; grid-template-rows: auto 1fr; }
  .f-msg textarea { height: 100%; min-height: 56px; }
}

/* Short and wide: a wider memo so the single column stays short */
@media (max-height: 560px) and (min-width: 760px) {
  .memo { width: min(860px, calc(100vw - 2 * var(--gx))); }
}
/* Small phones: a tighter letter */
@media (max-width: 420px) and (max-height: 700px) {
  .memo-body p { font-size: max(11.5px, calc(14px * var(--k))); line-height: 1.5; margin-bottom: 8px; }
  .memo .sheet-title { font-size: max(19px, calc(26px * var(--k))); }
  .memo .sheet-legal { font-size: 10.5px; line-height: 1.4; }
  .memo .sheet-foot { margin-top: 12px; padding-top: 12px; gap: 10px; }
}
/* Very small phones: a compact contact form */
@media (max-width: 420px) and (max-height: 600px) {
  .contact .sheet-lede { display: none; }
  .contact .sheet-title { font-size: 20px; margin-top: 10px; }
  .cform { row-gap: 10px; margin-top: 12px; }
  .cf textarea { height: 52px; }
  .topic-row { gap: 6px; margin-top: 8px; }
  .chip span { padding: 0 9px; }
}
/* Very small phones: smallest type */
@media (max-width: 420px) and (max-height: 600px) {
  .memo .sheet-title { font-size: 18px; margin-top: 10px; }
  .memo-body p { margin-bottom: 6px; line-height: 1.42; font-size: max(11px, calc(14px * var(--k))); }
  .memo .sheet-head { margin-top: -4px; }
}
@media (max-height: 420px) and (min-width: 561px) {
  .memo { width: min(900px, calc(100vw - 2 * var(--gx))); }
  .memo .sheet-title { font-size: 16px; margin-top: 4px; }
  .memo .memo-send { height: 36px; min-height: 36px; }
  .memo-body { margin-top: 6px; }
  .memo-body p { line-height: 1.38; margin-bottom: 4px; }
  .memo .sheet-foot { margin-top: 6px; padding-top: 6px; }
  .memo-body p { font-size: max(11px, calc(13px * var(--k))); line-height: 1.45; margin-bottom: 6px; }
  .memo .sheet-legal { font-size: 10.5px; line-height: 1.35; }
  .memo .sheet-foot { flex-direction: row; align-items: center; }
}

/* Phones held sideways and other very short screens: compact sheets */
@media (max-height: 420px) and (min-width: 561px) {
  .sheet { max-height: calc(100dvh - 16px); }
  .memo.is-tight .sheet-inner { max-height: calc(100dvh - 18px); }
  .sheet-inner { padding: 12px 18px 12px; }
  .sheet-lede { display: none; }
  .sheet-title { margin-top: 8px; font-size: 19px; }
  .memo .sheet-title { margin-top: 8px; }
  .sheet-foot { margin-top: 10px; padding-top: 10px; flex-direction: row; align-items: center; }
  .memo .sheet-foot { flex-direction: row; align-items: center; }
  .sheet-legal { margin-top: 8px; }
  .cform { gap: 8px 14px; margin-top: 10px; }
  .cf { gap: 0; }
  .cf label, .topics legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topic-row { margin-top: 0; }
  .chip span { height: 30px; }
  .cf input { padding: 6px 0 7px; }
  .send, .sheet-cta { height: 36px; min-height: 36px; }
  .cform-foot { margin-top: 0; }
  .contact-done { margin-top: 12px; }
}

/* ======================================================================
   Phones (any phone width, portrait, or shrunk by an on-screen keyboard):
   the sheets open full-screen with normal-size type, on an opaque ground.
   Header pinned at the top, actions pinned at the bottom, the content
   scrolls inside the sheet. The page behind never scrolls.
   ====================================================================== */
@media (max-width: 560px) {
  .sheet,
  .memo,
  .contact {
    --k: 1 !important;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    overflow: hidden;
    background-color: var(--ink);       /* opaque: the page never shows through */
  }
  .sheet[open] { animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1) both; }
  .sheet-inner,
  .memo.is-tight .sheet-inner {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* a focused or invalid field is never parked under the pinned header or the Send bar */
    scroll-padding: calc(80px + env(safe-area-inset-top)) 0 calc(140px + env(safe-area-inset-bottom));
  }
  .sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: none;
    margin: 0 -20px;
    padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
    background: var(--ink);
    border-bottom: 1px solid var(--hair);
  }
  .sheet-close { min-height: 44px; }
  .sheet-title,
  .memo .sheet-title,
  .contact .sheet-title { margin-top: 22px; font-size: 28px; }
  .sheet-lede,
  .contact .sheet-lede { display: block; font-size: 15px; line-height: 1.5; }

  /* memo: the reading column gets the screen; only the button is pinned,
     the legal line closes the memo after the last paragraph */
  .memo.is-tight .memo-body,
  .memo-body {
    flex: none;
    overflow: visible;
    padding-bottom: 8px;
    -webkit-mask-image: none;
    mask-image: none;
    margin-top: 16px;
  }
  .memo-body p { font-size: 16px; line-height: 1.65; margin: 0 0 16px; color: rgba(245, 246, 248, .8); }
  .memo .sheet-foot,
  .memo-foot { display: contents; }
  .memo-foot .sheet-legal {
    margin: 4px 0 24px;
    padding-top: 14px;
    border-top: 1px solid var(--hair);
    font-size: 12px;
    line-height: 1.5;
    max-width: none;
  }
  .memo-cta-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: auto -20px 0;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: var(--ink);
    border-top: 1px solid var(--hair-2);
  }
  .memo-cta-bar .memo-send { width: 100%; height: 50px; justify-content: center; font-size: 15px; margin: 0; }

  /* a short fade above the pinned bars instead of a hard cut */
  .memo-cta-bar::before,
  .cform-foot::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: 24px;
    background: linear-gradient(to top, var(--ink), rgba(11, 13, 20, 0));
    pointer-events: none;
  }

  /* contact: chips in a 2 x 2 grid, fields full width, labels always shown.
     The form fills the sheet and the message box takes the spare height,
     so the Send bar sits on the bottom edge (never floats mid-screen). */
  .cform,
  .contact .cform {
    flex: 1 0 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topic" "name" "email" "msg" "foot";
    grid-template-rows: auto auto auto 1fr auto;
    row-gap: 22px;
    margin-top: 22px;
  }
  .cf label,
  .topics legend { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .topic-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .chip { display: flex; }
  .chip span { width: 100%; height: 44px; padding: 0 12px; font-size: 14px; }
  .cf { gap: 4px; }
  .cf input, .cf textarea { font-size: 16px; }
  .cf input { padding: 8px 0 9px; }
  .f-msg { display: grid; grid-template-rows: auto 1fr; }
  .cf textarea,
  .f-msg textarea { height: 100%; min-height: 96px; }
  .cform-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0 -20px;
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    background: var(--ink);
    border-top: 1px solid var(--hair-2);
  }
  .cform-status { text-align: center; }
  .cform-msg { font-size: 14px; line-height: 20px; text-wrap: balance; }
  .cform-note { font-size: 13px; line-height: 20px; text-wrap: balance; }
  .send { width: 100%; height: 48px; justify-content: center; font-size: 15px; margin: 0; }
  .contact-done { margin-top: 28px; }
}
@keyframes sheet-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ======================================================================
   Legal texts (Legal notice, Privacy policy, Terms of use): long documents.
   Full-size type at every size; the header (kicker + Close) stays put and
   the text scrolls inside the sheet. The page never scrolls.
   Kept after the phone block on purpose: these rules override it.
   ====================================================================== */
.doc { width: min(720px, calc(100vw - 2 * var(--gx))); }
.doc .sheet-inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2 * clamp(10px, 3vh, 40px) - 2px);
  padding-bottom: 0;
}
.doc .sheet-head {
  flex: none;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}
.doc-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: -18px;
  padding: 0 18px 34px 0;
  outline: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(169, 192, 255, .28) transparent;
  /* a short fade at the bottom edge says "more below"; the padding clears it at the end */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
}
.doc-body:focus-visible { outline: 1px solid rgba(255, 90, 31, .7); outline-offset: -1px; }
.doc .sheet-title { margin-top: 22px; font-size: 26px; }
.doc-body .doc-meta {
  margin: 8px 0 20px;
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--mist);
}
.doc-body h3 {
  margin: 26px 0 8px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--snow);
}
.doc-body h4 {
  margin: 18px 0 6px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(245, 246, 248, .92);
}
.doc-body p,
.doc-body li {
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(245, 246, 248, .78);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.doc-body p { margin: 0 0 10px; }
.doc-body ul { margin: 0 0 12px; padding: 0; list-style: none; }
.doc-body li { position: relative; margin: 0 0 6px; padding-left: 18px; }
.doc-body li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .8em;
  width: 6px;
  height: 1px;
  background: var(--ice);
  opacity: .6;
}
.doc-body strong { font-weight: 500; color: var(--snow); }
.doc-body a {
  color: var(--snow);
  text-decoration: underline;
  text-decoration-color: rgba(169, 192, 255, .5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .doc-body a:hover { text-decoration-color: var(--ice); } }
.doc-body a:focus-visible { outline: 1px solid var(--ember); outline-offset: 2px; }

/* phones held sideways and other very short screens */
@media (max-height: 420px) and (min-width: 561px) {
  .doc .sheet-inner { max-height: calc(100dvh - 18px); }
  .doc .sheet-head { padding-bottom: 8px; }
  .doc-body { margin-right: -12px; padding-right: 12px; }
  .doc .sheet-title { margin-top: 12px; font-size: 20px; }
  .doc-body .doc-meta { margin-bottom: 12px; }
  .doc-body h3 { margin-top: 18px; font-size: 15px; }
  .doc-body p,
  .doc-body li { font-size: 14px; line-height: 1.55; }
}

/* phones: full screen like the other sheets, the text scrolls under the pinned header */
@media (max-width: 560px) {
  .doc { width: 100vw; max-width: 100vw; }
  .doc .sheet-inner {
    height: 100dvh;
    max-height: 100dvh;
    padding: 0 20px;
    overflow: hidden;
  }
  .doc .sheet-head { padding-bottom: 14px; }
  .doc-body {
    margin: 0 -20px;
    padding: 0 20px calc(36px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;          /* as the memo on phones: plain, fast touch scrolling */
    mask-image: none;
  }
  .doc .sheet-title { margin-top: 22px; font-size: 26px; }
  .doc-body .doc-meta { font-size: 13px; }
  .doc-body h3 { margin-top: 28px; font-size: 16.5px; }
  .doc-body h4 { font-size: 15.5px; }
  .doc-body p,
  .doc-body li { font-size: 15.5px; line-height: 1.6; }
  .doc-body li { padding-left: 16px; }
  .doc-body li::before { left: 1px; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .is-reveal .reveal-art * { opacity: 1 !important; stroke-dashoffset: 0 !important; }
}

/* touch screens held sideways: 44px targets in the compact sheets too, and memo text
   that stays readable (the memo body then scrolls inside the sheet, header and foot fixed) */
@media (pointer: coarse) and (max-height: 420px) and (min-width: 561px) {
  .send, .sheet-cta { height: 44px; min-height: 44px; }
  .chip span { height: 44px; }
  .memo-body p { font-size: 14px; }
}

/* hover looks only where there is a real hover: no sticky hover after a tap */
@media (hover: none) {
  .send:hover .send-arrow { transform: none; }
  .send:hover { background: var(--snow); box-shadow: none; }
  .sheet-cta:hover { background: rgba(5, 6, 10, .5); border-color: var(--edge); }
  .sheet-cta:hover .spark { opacity: 0; transform: scale(.4); }
  .chip:hover span { color: var(--mist); border-color: var(--hair-2); }
  .chip input:checked + span { color: var(--snow); border-color: rgba(169, 192, 255, .55); }
  .sheet-close:hover { color: var(--mist); }
  .brand:hover .brand-mark { filter: none; }
}