@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
}
/* Geist, served from this site (SIL Open Font License, assets/fonts/OFL-Geist.txt): the app's own typeface. */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kiritsu website. Kiritsu is Japanese for discipline, and discipline is the gravity that keeps trades in orbit.
   One family (Geist, as in the app), set large and tight. Sumi black is the ground, washi paper carries the text,
   and shu vermilion is the one accent: the download action. The mark is the black hole: what is left when the rules stop holding. Pricing is
   the single paper field. Green and red appear only inside the app's own pieces. Motion is transform, opacity and
   clip-path with strong ease-out curves, and the trade falls into the hole when a day is done. */

:root {
  --void: #0b0b0c;
  --hull: #141415;
  --hull-2: #1c1c1e;
  --step: #28282b;
  --ink: #f4f1ea;
  --ink-2: #aba79e;
  --shu: #e8452c;
  --shu-hover: #f05a40;
  --on-shu: #fff;
  --silver: #f4f1ea;
  --silver-2: #e8e3d8;
  --on-silver: #0b0b0c;
  --on-silver-2: #57534b;
  --gain: #3fc07a;
  --loss: #ef5f74;
  --warn: #f2b84b;
  --app-accent: #4da3ff;

  --m: clamp(16px, 2.6vw, 40px);
  --gap: clamp(16px, 2vw, 28px);
  --section: clamp(112px, 13vw, 200px);

  --fs-display: clamp(40px, 8vw, 128px);
  --fs-h2: clamp(32px, 4.8vw, 76px);
  --fs-statement: clamp(21px, 1.9vw, 26px);
  --fs-body: 18px;
  --fs-small: 15px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --r-ui: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--void); color: var(--ink);
  font-family: 'Manrope', 'Geist', system-ui, sans-serif; font-size: var(--fs-body); line-height: 1.55; font-weight: 400; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* Screenshots that run to the edge start slightly scaled before they reveal; clip, never scroll sideways.
     clip (not hidden) keeps the sticky story working. */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
/* Headlines: Space Grotesk. Body: Manrope. */
h1, h2, h3, .footer__name, .plan__price b, .faq summary { font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif; }
h1, h2, h3 { margin: 0; font-weight: 700; }
h1, h2 { letter-spacing: -0.04em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 0.98; }
h3 { font-size: var(--fs-statement); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--ink); color: var(--void); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 100; background: var(--ink); color: var(--void); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Buttons: one shape (fully round), one press. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  font: inherit; font-size: var(--fs-small); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--large { min-height: 54px; padding: 0 28px; font-size: 17px; }
.btn--wide { width: 100%; min-height: 52px; }
.btn--light { background: var(--ink); color: var(--void); }
.btn--ghost { background: var(--hull-2); color: var(--ink); }
.btn--dark { background: var(--void); color: var(--ink); }
.btn--shu { background: var(--shu); color: var(--on-shu); }
@media (hover: hover) and (pointer: fine) {
  .btn--light:hover { background: #fff; }
  .btn--ghost:hover { background: var(--step); }
  .btn--dark:hover { background: #1c1c1f; }
  .btn--shu:hover { background: var(--shu-hover); }
}

/* Navigation: a plain bar. */
.nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 32px;
  height: 68px; padding: 0 var(--m); background: var(--void);
}
.nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.nav__brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: var(--fs-small); }
.nav__links a { text-decoration: none; color: var(--ink-2); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--ink); } }
.nav__cta { min-height: 40px; }

section { padding: var(--section) var(--m) 0; }
/* A section's heading has a row of its own, so it never wraps past two lines and every heading shares one edge. */
.head { grid-column: 1 / -1; margin-bottom: clamp(36px, 4.4vw, 64px); max-width: 22ch; }

/* Hero: the promise, set huge, and the product it describes. */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: clamp(40px, 7vw, 112px); }
.hero__title { grid-column: 1 / -1; font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.05em; font-weight: 700; }
.hero__title .line { display: block; white-space: nowrap; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__title .line > span { display: inline-block; }
.hero__copy { grid-column: 1 / span 4; margin-top: clamp(32px, 4vw, 56px); align-self: start; }
.hero__lede { font-size: var(--fs-statement); line-height: 1.38; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__note { margin-top: 20px; font-size: var(--fs-small); color: var(--ink-2); }
.hero__media { grid-column: 6 / -1; position: relative; margin-top: clamp(32px, 4vw, 56px); margin-right: calc(-1 * var(--m)); }

/* The hero session: a one-minute chart as a platform draws it, and the Rules pin floating over it, playing one
   morning (a win, a loss and its cooldown, a second loss and the day called). The chart is a real piece of
   interface, so it keeps its own panel, grid lines and axis. */
.chart { background: #0b0b0e; border-radius: var(--r-ui) 0 0 var(--r-ui); padding: 0 0 6px; overflow: hidden; }
.chart__bar { display: flex; align-items: baseline; gap: 14px; padding: 12px 16px; font-size: 13px; color: var(--ink-2); background: #111114; }
.chart__bar b { color: var(--ink); font-weight: 600; }
.chart__clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.chart__svg { width: 100%; }
.chart__grid line { stroke: #1b1b20; stroke-width: 1; }
.chart__axis text { fill: #6d6d76; font-size: 11px; font-family: inherit; }
.chart__wick { fill: none; stroke-width: 1.2; }
.chart__wick--up { stroke: var(--gain); }
.chart__wick--dn { stroke: var(--loss); }
.chart__body--up { fill: var(--gain); }
.chart__body--dn { fill: var(--loss); }
.chart__last { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.5; }
.chart__future { fill: #0b0b0e; }
.chart__trade line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart__trade circle { fill: var(--ink); stroke: #0b0b0e; stroke-width: 2; }
.chart__trade--win .chart__exit { fill: var(--gain); }
.chart__trade--loss .chart__exit { fill: var(--loss); }
.chart__trade, .chart__trade :is(line, .chart__exit) { transition: opacity 200ms ease; }
.session.is-live .chart__trade:not(.is-open) { opacity: 0; }
.session.is-live .chart__trade.is-open:not(.is-closed) :is(line, .chart__exit) { opacity: 0; }
.session { transition: opacity 400ms ease; }
.session.is-resetting { opacity: 0.2; }
.pin.pin--hero { position: absolute; left: -12%; top: 40%; width: min(340px, 44%); font-size: 13px; }

/* Hold: the story on the left, the orbit and the working pin held still on the right. */
.gravity { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: calc(var(--section) + 6vw); }
.gravity__story { grid-column: 1 / span 5; }
.gravity__intro { font-size: var(--fs-statement); line-height: 1.4; max-width: 34rem; }
.chapter { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; max-width: 34rem; }
.chapter:last-child { min-height: 70vh; }
.chapter p { margin-top: 14px; }
.js .chapter { opacity: 0.32; transition: opacity 400ms var(--ease-out); }
.js .chapter.is-current { opacity: 1; }
.gravity__stage { grid-column: 7 / -1; }
.stage { position: sticky; top: 92px; min-height: calc(100vh - 124px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap); align-content: center; row-gap: 12px; }
.orbit { grid-column: 1 / -1; width: min(100%, calc(44vh * 88 / 56)); overflow: visible; }
.stage__side { grid-column: 5 / -1; align-self: end; display: grid; gap: 14px; padding-bottom: 6px; }
.stage__status { font-size: var(--fs-small); font-weight: 600; color: var(--ink); transition: color 300ms ease; }
.stage[data-state="cooldown"] .stage__status { color: var(--warn); }
.stage[data-state="done"] .stage__status { color: var(--loss); }
.gravity__caption { font-size: var(--fs-small); color: var(--ink-2); }

.sat { fill: #ececef; }
.sat-x { transform: translateX(26.8px); }
.sat-y { transform: translateY(7.1px); }
.sat-orbit { transform-box: view-box; transform-origin: 50px 52px; transition: transform 1000ms var(--ease-in-out), opacity 400ms ease; }
.stage[data-orbit="1"] .sat-orbit { transform: scale(0.8); }
.stage[data-state="done"] .sat-orbit { transform: scale(0.34); opacity: 0; transition: transform 1500ms cubic-bezier(0.55, 0, 1, 0.45), opacity 500ms ease 1000ms; }
.disc { transition: opacity 600ms ease; }
.stage[data-state="done"] .disc { opacity: 0.45; }
.cooldown-ring { fill: none; stroke: var(--warn); stroke-width: 0.7; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transform-box: view-box; transform-origin: 50px 52px; transform: rotate(-90deg); transition: opacity 300ms ease; }
.stage[data-state="cooldown"] .cooldown-ring { opacity: 1; }

/* The demo Rules pin: a real piece of the app, so it keeps the app's own panel, border and colours. */
.pin {
  grid-column: 1 / span 4; position: relative; z-index: 2;
  width: 100%; max-width: 380px; padding: 14px; border-radius: var(--r-ui); background: #141417; font-size: 14px; line-height: 1.45;
  box-shadow: 0 40px 80px -12px rgba(0, 0, 0, 0.95), 0 0 0 1px #2a2a30;
}
.pin__head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.pin__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-accent); transition: background-color 300ms ease; }
.pin[data-state="cooldown"] .pin__dot { background: var(--warn); }
.pin[data-state="done"] .pin__dot { background: var(--loss); }
.pin__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pin__stats span { background: #1f1f24; border-radius: 8px; padding: 4px 9px; color: var(--ink-2); font-size: 13px; }
.pin__stats b { color: var(--ink); }
.pin__banner { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; transition: opacity 160ms ease, filter 160ms ease; }
.pin__banner.is-swapping { opacity: 0; filter: blur(2px); }
.pin[data-state="cooldown"] .pin__banner { background: rgba(242, 184, 75, 0.12); color: #f6d08a; }
.pin[data-state="done"] .pin__banner { background: rgba(239, 95, 116, 0.14); color: #f59aa8; }
.pin__banner b { color: var(--ink); }
.pin__rules { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-weight: 600; }
.pin__rules li { position: relative; padding: 9px 2px 0 26px; }
/* Each rule sits beside a box, as in the app; a broken rule gets a cross there, never a red row. */
.pin__rules li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 13px; height: 13px; border-radius: 3.5px; box-shadow: inset 0 0 0 1.25px rgba(168, 168, 177, 0.55); }
.pin__rules li + li { border-top: 1px solid #222227; }
.pin__try { display: flex; gap: 6px; margin-top: 14px; }
.pin__btn {
  flex: 1; min-height: 40px; border: 0; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 200ms ease, background-color 200ms ease;
}
.pin__btn:active:not(:disabled) { transform: scale(0.96); }
.pin__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pin__btn--win { background: rgba(63, 192, 122, 0.16); color: #7fdcaa; }
.pin__btn--loss { background: rgba(239, 95, 116, 0.16); color: #f59aa8; }
.pin__btn--reset { background: #1f1f24; color: var(--ink); flex: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .pin__btn--win:hover:not(:disabled) { background: rgba(63, 192, 122, 0.26); }
  .pin__btn--loss:hover:not(:disabled) { background: rgba(239, 95, 116, 0.26); }
  .pin__btn--reset:hover { background: #2a2a30; }
}

/* Plan: the interest levels as the app shows them, the Plan pin floating over them, the copy on the right. */
.plan-day { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.plan-day__media { grid-column: 1 / span 6; position: relative; margin-right: 8%; }
.plan-day__levels { width: 100%; border-radius: var(--r-ui); }
.plan-day__pin {
  position: absolute; right: -16%; bottom: -8%; width: 44%; border-radius: 12px;
  box-shadow: 0 40px 80px -10px rgba(0, 0, 0, 0.95), 0 0 0 1px #2a2a30;
}
.plan-day__copy { grid-column: 8 / -1; }
.plan-day__statement { font-size: var(--fs-statement); line-height: 1.4; }
.facts.facts--one { grid-template-columns: 1fr; gap: 24px; }

/* More: the rest of the journal in one section. The plan with its pin beside four facts, then four facts beside
   the day page with the calendar over it, bleeding off the right edge. */
.more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.more__plan { grid-column: 1 / span 5; position: relative; margin-right: 10%; }
.more__facts { margin: 0; grid-template-columns: 1fr 1fr; }
.more__facts--a { grid-column: 7 / -1; }
.more__facts--b { grid-column: 1 / span 5; margin-top: clamp(96px, 10vw, 160px); }
.more__journal { grid-column: 7 / -1; margin-right: calc(-1 * var(--m)); margin-top: clamp(96px, 10vw, 160px); position: relative; padding-bottom: 18%; }
.more__journal .journal__day img { width: 100%; border-radius: var(--r-ui) 0 0 var(--r-ui); }
.more__journal .journal__cal { left: -10%; right: auto; width: 58%; }

/* Confluences: the claim and its three facts side by side, the two charts as one wide band under them. */
.confl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.confl__copy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: start; }
.confl__statement { grid-column: 1 / span 6; font-size: var(--fs-statement); line-height: 1.4; }
.confl .facts { grid-column: 8 / -1; margin: 0; grid-template-columns: 1fr; gap: 20px; }
.confl__media { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 72px); }
.confl__media img { width: 100%; border-radius: var(--r-ui); }

/* Cost: the copy and the review page bleeding off the right edge. */
.cost { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-top: calc(var(--section) + 40px); }
.cost__copy { grid-column: 1 / span 5; }
.cost__statement { font-size: var(--fs-statement); line-height: 1.4; }
.cost__reasons { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 4px; }
.cost__reasons li { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: baseline; padding: 14px 18px; background: var(--hull); border-radius: 10px; }
.cost__n { color: var(--ink-2); font-size: var(--fs-small); }
.cost__reasons b { color: var(--loss); font-weight: 600; min-width: 4.5ch; text-align: right; }
.cost__total { margin-top: 24px; }
.cost__total b { font-weight: 600; }
.cost__note { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); }
.cost__media { grid-column: 7 / -1; margin-right: calc(-1 * var(--m)); }
.cost__media img { width: 100%; border-radius: var(--r-ui) 0 0 var(--r-ui); }

/* Journal: two pages of the app stacked off the left edge, the copy on the right. */
.journal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.journal__media { grid-column: 1 / span 7; margin-left: calc(-1 * var(--m)); position: relative; padding-bottom: 22%; }
.journal__day img { width: 100%; border-radius: 0 var(--r-ui) var(--r-ui) 0; }
.journal__cal { position: absolute; right: -6%; bottom: 0; width: 62%; z-index: 1; }
.journal__cal img { border-radius: 12px; box-shadow: 0 40px 80px -10px rgba(0, 0, 0, 0.95), 0 0 0 1px #2a2a30; }
.journal__copy { grid-column: 9 / -1; }
.journal__copy > p { font-size: var(--fs-statement); line-height: 1.4; }
.facts { margin: 40px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.facts dt { font-weight: 600; }
.facts dd { margin: 6px 0 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }

/* Sync: the platforms set as a list at reading size, the claim above it. */
.sync { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sync__copy { grid-column: 1 / span 8; }
.sync__copy p { font-size: var(--fs-statement); line-height: 1.4; }
.sync__list { grid-column: 1 / -1; list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 4px; }
.sync__list li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: 22px 24px; background: var(--hull); border-radius: 12px; }
.sync__list b { grid-column: 1 / span 5; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -0.03em; font-weight: 650; line-height: 1.1; }
.sync__list span { grid-column: 7 / -1; color: var(--ink-2); }

/* Findings: the finding as a statement, the stats page full width under it. */
.insight { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.insight__copy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: start; }
.insight__quote { grid-column: 1 / span 7; margin: 0; font-size: var(--fs-statement); line-height: 1.4; font-weight: 500; }
.insight__copy p { grid-column: 9 / -1; color: var(--ink-2); }
.insight__media { grid-column: 1 / -1; margin: 64px calc(-1 * var(--m)) 0; }
/* Cropped to end under the numbers row, not through the next panel. */
.insight__media img { width: 100%; aspect-ratio: 1.96; object-fit: cover; object-position: top; }

/* The stop window (Premium): the real window from the app, shown whole, floating over the ground. */
.stopwin__media { grid-column: 2 / span 10; margin: 64px 0 0; }
.stopwin__media img { display: block; width: 100%; height: auto; border-radius: clamp(10px, 1.4vw, 18px); box-shadow: 0 48px 120px -48px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--step); }
.tag-premium { display: inline-block; margin-left: 0.4em; padding: 0.28em 0.75em; border: 1px solid rgba(232, 69, 44, 0.5); border-radius: 999px; color: var(--shu); font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; }
@media (max-width: 720px) { .stopwin__media { grid-column: 1 / -1; } }

/* Private: a full-width band one step up from the ground. */
.private { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(72px, 8vw, 120px); padding: clamp(72px, 9vw, 128px) var(--m); background: var(--hull); }
.private h2 { grid-column: 1 / span 6; }
.private__statement { grid-column: 7 / -1; font-size: var(--fs-statement); line-height: 1.4; }
.private__facts { grid-column: 1 / -1; list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.private__facts li { color: var(--ink-2); }
.private__facts b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

.founder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: var(--section) var(--m) clamp(96px, 10vw, 160px); }
/* The photo and the note sit together as one unit around the page's centre: photo ending on column 5, note from 6. */
.founder__photo { grid-column: 3 / span 3; justify-self: end; width: 100%; margin: 0; aspect-ratio: 1; max-width: 320px; border-radius: 50%; overflow: hidden; background: var(--step); display: grid; place-items: center; }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__photo span { font-size: clamp(56px, 7vw, 96px); font-weight: 600; color: var(--ink-2); }
.founder__copy { grid-column: 6 / span 6; max-width: 40rem; }
.founder__copy p + p { margin-top: 14px; }
.founder__statement { margin-top: 28px; font-size: var(--fs-statement); line-height: 1.4; }
.founder__copy p:not(.founder__statement) { color: var(--ink-2); }
.founder__sign { margin-top: 24px; font-size: var(--fs-small); }

/* Pricing: the one silver field. */
.pricing { background: var(--silver); color: var(--on-silver); padding: var(--section) var(--m); }
.pricing :focus-visible { outline-color: var(--on-silver); }
.pricing__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pricing__promise { font-size: var(--fs-statement); line-height: 1.3; color: var(--on-silver); }
.plans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 56px; }
.plan { grid-column: span 6; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); border-radius: 18px; background: var(--silver-2); }
.plan--premium { background: var(--void); color: var(--ink); }
.plan__price { margin-top: 16px; font-size: var(--fs-statement); color: var(--on-silver-2); }
.plan--premium .plan__price { color: var(--ink-2); }
.plan__price b { display: inline-block; font-size: var(--fs-h2); letter-spacing: -0.04em; font-weight: 650; color: var(--on-silver); line-height: 1; }
.plan--premium .plan__price b { color: var(--ink); }
.plan__save { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-2); }
.plan ul { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.plan__monthly { margin-top: 10px; }
.plan__save--free { color: var(--on-silver-2); }
.plan__fine { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-2); }

/* Download: the one centred moment, with the full mark. */
.download { display: grid; justify-items: center; text-align: center; }
.download__mark { width: clamp(120px, 12vw, 168px); height: auto; border-radius: 28%; }
.download__copy { margin-top: 36px; display: grid; justify-items: center; }
.download__copy p { margin-top: 20px; max-width: 34rem; }
.download__copy .btn { margin-top: 32px; }
.platforms { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-2); }
.platforms li { padding: 6px 14px; border-radius: 999px; background: var(--hull); }
.platforms b { color: var(--ink); font-weight: 600; }

/* The SmartScreen guide: Windows' warning drawn small, with the two clicks it takes marked. */
.smartscreen { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 30rem); gap: 20px 40px; align-items: center; justify-content: center; text-align: left; }
.smartscreen__box { padding: 20px 22px; border-radius: 4px; background: #0b3a73; color: #fff; font-size: 13px; line-height: 1.4; }
.smartscreen__title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.smartscreen__text { margin-top: 10px; opacity: 0.85; }
.smartscreen__more { margin-top: 10px; }
.smartscreen__btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.smartscreen__btns span { padding: 6px 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.smartscreen__mark { outline: 2px solid var(--warn); outline-offset: 3px; border-radius: 2px; }
.smartscreen figcaption { font-size: var(--fs-small); color: var(--ink-2); }
.smartscreen figcaption b { color: var(--ink); font-weight: 600; }

/* Phones cannot install Kiritsu: the download button gives way to "email me the link", or to a plain note. */
.send-link { margin-top: 24px; display: grid; gap: 10px; width: 100%; max-width: 30rem; text-align: left; }
.send-link[hidden] { display: none; }
.send-link__label { font-size: var(--fs-small); color: var(--ink-2); }
.send-link__row { display: flex; gap: 8px; }
.send-link input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--hull-2); color: var(--ink); font: inherit; font-size: 16px; }
.send-link input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.send-link__status { font-size: var(--fs-small); color: var(--ink-2); min-height: 1.5em; }
.send-link__status.is-error { color: var(--loss); }
.phone-note { display: none; margin-top: 20px; font-size: var(--fs-small); color: var(--ink-2); }

/* Questions: the heading held on the left, the answers on the right. */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.faq h2 { grid-column: 1 / span 4; align-self: start; position: sticky; top: 100px; }
.faq__list { grid-column: 6 / -1; display: grid; gap: 4px; }
.faq details { background: var(--hull); border-radius: 12px; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; cursor: pointer; font-size: var(--fs-statement); font-weight: 500; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 28px; font-weight: 300; line-height: 1; color: var(--ink-2); transition: transform 240ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details { transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .faq details:hover { background: var(--hull-2); } }
.faq details p { padding: 0 24px 24px; color: var(--ink-2); max-width: 44rem; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 280ms var(--ease-out), content-visibility 280ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Footer: the name returns at full width. */
.footer { padding: var(--section) var(--m) 40px; }
/* The wordmark is about 2.97 times as wide as its font size: fill the line between the margins, never past it. */
.footer__name { font-size: calc((100vw - 2 * var(--m) - 18px) * 0.36); line-height: 0.8; font-weight: 700; letter-spacing: -0.065em; margin: 0 0 48px -0.04em; white-space: nowrap; }
.footer__meaning { margin: -16px 0 40px; font-size: var(--fs-statement); line-height: 1.4; max-width: 40rem; }
.footer__meaning span { font-weight: 600; }
.footer__row { display: flex; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; align-items: baseline; }
.footer__row nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: var(--fs-small); }
.footer__row nav a { color: var(--ink-2); text-decoration: none; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .footer__row nav a:hover { color: var(--ink); } }
.footer__fine { margin-top: 28px; font-size: 13px; color: #7d7d86; max-width: 60rem; }

/* Legal pages: one readable column on the same ground, headings at the section size. */
.legal { max-width: 46rem; padding: clamp(48px, 7vw, 112px) var(--m) 0; margin: 0 auto; }
.legal h1 { font-size: var(--fs-h2); line-height: 0.98; letter-spacing: -0.04em; }
.legal h2 { font-size: var(--fs-statement); line-height: 1.25; letter-spacing: -0.01em; margin: 56px 0 14px; }
.legal p + p, .legal ul { margin-top: 14px; }
.legal ul { padding-left: 1.2em; display: grid; gap: 10px; }
.legal__lede { margin-top: 28px; font-size: var(--fs-statement); line-height: 1.4; }
.legal__date { margin-top: 16px; font-size: var(--fs-small); color: var(--ink-2); }
.legal code { font-size: 0.92em; }
.footer--legal { padding-top: clamp(72px, 9vw, 120px); }
.withdraw { display: grid; gap: 16px; margin-top: 24px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: var(--hull); }
.withdraw__field { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--ink-2); }
.withdraw__field input {
  min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--void); color: var(--ink);
  font: inherit; font-size: 17px; color-scheme: dark;
}
.withdraw__field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.withdraw .btn { justify-self: start; margin-top: 8px; }
.withdraw__error { color: var(--loss); font-size: var(--fs-small); }
.withdraw__fallback { margin-top: 20px; font-size: var(--fs-small); color: var(--ink-2); }

/* Motion. The hero plays one orchestrated entrance on load; screenshots open as they arrive. */
@keyframes rise { from { transform: translateY(105%); } }
/* Sections enter once: the heading, then the words, then the picture, 70ms apart, rising 24px. The content is
   only held back when the script runs (.js), so nothing stays hidden if it does not. */
.js [data-rise] > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.js [data-rise].is-in > * { opacity: 1; transform: none; }
.js [data-rise].is-in > :nth-child(2) { transition-delay: 70ms; }
.js [data-rise].is-in > :nth-child(3) { transition-delay: 140ms; }
.js [data-rise].is-in > :nth-child(4) { transition-delay: 210ms; }
.js [data-rise].is-in > :nth-child(n + 5) { transition-delay: 280ms; }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } }
@keyframes shot-in { from { opacity: 0; transform: translateY(40px) scale(0.985); } }
@keyframes pin-in { from { opacity: 0; transform: translate(-18px, 28px); } }
@keyframes pin-drift { to { translate: 0 -60px; } }
.hero__title .line > span { animation: rise 1000ms var(--ease-out) both; }
.hero__title .line:nth-child(2) > span { animation-delay: 90ms; }
.hero__copy { animation: fade-up 800ms var(--ease-out) 300ms both; }
.chart { animation: shot-in 1100ms var(--ease-out) 420ms both; }
.pin--hero { animation: pin-in 900ms var(--ease-out) 700ms both; }
@supports (animation-timeline: view()) {
  .pin--hero { animation: pin-in 900ms var(--ease-out) 700ms both, pin-drift linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
}
.js .reveal img { clip-path: inset(0 0 100% 0 round var(--r-ui)); transform: scale(1.04); transition: clip-path 1100ms var(--ease-out), transform 1400ms var(--ease-out); }
.js .reveal.is-in img { clip-path: inset(0 0 0 0 round 0); transform: none; }
/* Floating screenshots (they carry a shadow) rise and fade instead: a clip would cut the shadow off. */
.js .journal__cal.reveal img, .js .reveal .plan-day__pin {
  clip-path: none; opacity: 0; transform: translateY(24px);
  transition: opacity 900ms var(--ease-out) 180ms, transform 900ms var(--ease-out) 180ms;
}
.js .journal__cal.reveal.is-in img, .js .reveal.is-in img.plan-day__pin { clip-path: none; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__title .line > span, .hero__copy, .chart, .pin--hero { animation: fade 400ms ease both !important; translate: none !important; }
  @keyframes fade { from { opacity: 0; } }
  .js [data-rise] > * { transform: none; transition: opacity 400ms ease; }
  .js .reveal img { clip-path: none; transform: none; transition: opacity 400ms ease; opacity: 0; }
  .js .reveal.is-in img { opacity: 1; }
  .js .journal__cal.reveal img, .js .reveal .plan-day__pin { transform: none; transition: opacity 400ms ease; }
  .sat-orbit, .stage[data-state="done"] .sat-orbit { transition: opacity 300ms ease; }
}

/* Tablet */
@media (max-width: 1080px) {
  .founder__photo { grid-column: 1 / span 4; }
  .founder__copy { grid-column: 5 / -1; }
  .hero__copy { grid-column: 1 / span 9; }
  .hero__media { grid-column: 1 / -1; margin-left: 0; margin-top: 56px; }
  .pin.pin--hero { left: auto; right: 6%; top: 36%; width: min(340px, 46%); }
  .more__plan, .more__facts--a, .more__facts--b, .more__journal { grid-column: 1 / -1; }
  .more__plan { max-width: 640px; }
  .more__facts--a { margin-top: 96px; }
  .more__facts--b { margin-top: 48px; }
  .more__journal { margin-top: 64px; }
  .smartscreen { grid-template-columns: minmax(0, 340px); }
  .gravity__story { grid-column: 1 / span 6; }
  .chapter { min-height: 54vh; }
  .cost__copy { grid-column: 1 / -1; }
  .cost__media { grid-column: 1 / -1; margin-top: 56px; margin-left: 0; }
  .journal__media { grid-column: 1 / -1; }
  .journal__cal { right: 0; }
  .private h2 { grid-column: 1 / -1; }
  .private__statement { grid-column: 1 / -1; margin-top: 24px; max-width: 44rem; }
  .insight__quote { grid-column: 1 / -1; }
  .insight__copy p { grid-column: 1 / -1; max-width: 40rem; }
  .gravity__story, .gravity__stage { grid-column: 1 / -1; }
  .js .chapter { opacity: 1; }
  .chapter, .chapter:last-child { min-height: 0; margin-top: 48px; }
  .gravity__stage { margin-top: 64px; }
  .stage { position: relative; top: 0; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .orbit { grid-column: 1 / -1; width: 100%; max-width: 560px; justify-self: center; }
  .pin { grid-column: 1 / span 7; margin-top: 24px; max-width: none; }
  .stage__side { grid-column: 9 / -1; }
  .journal__copy { grid-column: 1 / -1; margin-top: 48px; max-width: 44rem; }
  .plan-day__media { grid-column: 1 / span 9; }
  .plan-day__copy { grid-column: 1 / -1; margin-top: 96px; max-width: 44rem; }
  .confl__statement, .confl .facts { grid-column: 1 / -1; }
  .faq h2 { grid-column: 1 / -1; position: static; margin-bottom: 40px; }
  .faq__list { grid-column: 1 / -1; }
  .private__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

/* Phone */
@media (max-width: 760px) {
  :root { --section: 88px; --fs-body: 16px; --fs-statement: 19px; }
  .nav { gap: 16px; height: 60px; }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .hero__copy { grid-column: 1 / -1; margin-top: 28px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__media { margin-top: 48px; margin-right: calc(-1 * var(--m)); }
  .pin.pin--hero { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto; margin: -40px 0 0 auto; max-width: 320px; }
  .chart__bar span:not(.chart__clock) { display: none; }
  .more__facts { grid-template-columns: 1fr; }
  .more__journal .journal__cal { left: auto; right: 0; width: 70%; }
  .has-send-link [data-desktop-download] { display: none; }
  html:not(.has-send-link) .phone-note { display: block; }
  html:not(.has-send-link) [data-desktop-download] { display: none; }
  .gravity { padding-top: calc(var(--section) + 48px); }
  .gravity__story, .gravity__stage { grid-column: 1 / -1; }
  .js .chapter { opacity: 1; }
  .chapter, .chapter:last-child { min-height: 0; margin-top: 40px; }
  .gravity__stage { margin-top: 56px; }
  .stage { display: block; }
  .orbit { width: 100%; max-width: 440px; margin: 0 auto; }
  .pin { margin: 24px auto 0; max-width: 380px; }
  .stage__side { margin: 18px auto 0; max-width: 380px; }
  .cost { padding-top: var(--section); }
  .cost__reasons li { grid-template-columns: 1fr auto; row-gap: 2px; }
  .cost__n { grid-row: 2; }
  .cost__media { margin-right: calc(-1 * var(--m)); }
  .journal__media { margin-left: calc(-1 * var(--m)); padding-bottom: 30%; }
  .journal__cal { right: 0; width: 70%; }
  .facts { grid-template-columns: 1fr; gap: 20px; }
  .sync__copy { grid-column: 1 / -1; }
  .sync__list li { grid-template-columns: 1fr; row-gap: 6px; padding: 20px; }
  .sync__list b, .sync__list span { grid-column: 1; }
  .insight__copy h2, .insight__quote, .insight__copy p { grid-column: 1 / -1; }
  .private h2, .private__statement { grid-column: 1 / -1; }
  .private__statement { margin-top: 24px; }
  .private__facts { grid-template-columns: 1fr; margin-top: 40px; }
  .founder__photo { grid-column: 1 / -1; width: 128px; justify-self: start; }
  .founder__copy { grid-column: 1 / -1; margin-top: 32px; }
  .plan { grid-column: 1 / -1; }
  .plan-day__media { grid-column: 1 / -1; margin-right: 0; }
  .plan-day__pin { right: -2%; bottom: -10%; width: 50%; }
  .plan-day__copy { margin-top: 80px; }
  .confl__media img { aspect-ratio: 739 / 272; object-fit: cover; object-position: right; }
  .cost__media img, .insight__media img { aspect-ratio: 4 / 3; object-fit: cover; }
  .cost__media img { object-position: 62% 30%; }
  .insight__media img { object-position: 45% 18%; }
  .plan + .plan { margin-top: 12px; }
  .faq summary { padding: 18px 20px; }
  .faq details p { padding: 0 20px 20px; }
}

.hero__for { margin-top: 12px; color: var(--ink-2); font-size: var(--fs-small); }

/* ── Hero hook: the tilted word, the scroll cue and the feature ticker ─────────────────────────────── */
.hero__tilt { font-style: normal; color: var(--shu); display: inline-block; transform-origin: 15% 85%;
  animation: tilt-in 900ms 700ms var(--ease-out) both, tilt-sway 5s 1.8s ease-in-out infinite; }
@keyframes tilt-in { from { rotate: 0deg; } to { rotate: -8deg; } }
@keyframes tilt-sway { 0%, 100% { rotate: -8deg; } 50% { rotate: -4deg; } }
.hero__title .line:last-child { overflow: visible; }

.scroll-cue { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 500; }
.scroll-cue__arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--step); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (hover: hover) and (pointer: fine) { .scroll-cue:hover .scroll-cue__arrow { border-color: var(--ink-2); } }

.ticker { grid-column: 1 / -1; margin: clamp(48px, 6vw, 88px) calc(-1 * var(--m)) 0; overflow: hidden; border-block: 1px solid var(--hull-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker__track span { padding: 18px 0; white-space: nowrap; font-size: var(--fs-small); color: var(--ink-2); }
.ticker__track span::after { content: '✦'; margin: 0 28px; color: var(--shu); font-size: 11px; }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .hero__tilt { animation: none; rotate: -8deg; }
  .scroll-cue__arrow, .ticker__track { animation: none; }
}

/* ── Phones: the page splits into five sub-pages with a tab bar; bigger screens keep one long page ─── */
.tabbar { display: none; }
@media (max-width: 760px) {
  .js main > section.is-off { display: none; }
  .js .tabbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(11, 11, 12, 0.92); border-top: 1px solid var(--hull-2);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .tabbar button { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 11px; line-height: 1.2; cursor: pointer; }
  .tabbar__icon { font-size: 17px; line-height: 1; }
  .tabbar button[aria-current="page"] { color: var(--ink); }
  .tabbar button[aria-current="page"] .tabbar__icon { color: var(--shu); }
  .js body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .page-next { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 56px var(--m) 0; padding: 18px 20px;
    border-radius: var(--r-ui); background: var(--hull); color: var(--ink); text-decoration: none; border: 0; width: calc(100% - 2 * var(--m)); font: inherit; text-align: left; cursor: pointer; }
  .page-next small { display: block; color: var(--ink-2); font-size: 13px; }
  .page-next b { font-size: 18px; }
  .page-next span:last-child { color: var(--shu); font-size: 22px; }
  .ticker { margin-top: 40px; }
}
@media (min-width: 761px) { .page-next { display: none; } }

/* Free or Premium at a glance: the badge sits on Premium features; the note under the intro explains it. */
.tier-note { display: block; margin-top: 16px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }
.tier-note .tag-premium { margin: 0 0.2em; font-size: 11px; }
dt .tag-premium, h3 .tag-premium { font-size: 11px; padding: 0.3em 0.7em; vertical-align: 0.15em; white-space: nowrap; }

/* ── Works with: live sync, file imports and the prop firms with built-in rules ──────────────────────── */
.works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; }
.works__col { grid-column: span 4; display: grid; gap: 14px; align-content: start; }
.works__col h3 { font-size: var(--fs-statement); line-height: 1.2; }
.works__col p { color: var(--ink-2); }
.works__note { font-size: var(--fs-small); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; background: var(--hull); border: 1px solid var(--hull-2); font-size: var(--fs-small); color: var(--ink); }
.chips small { margin-left: 4px; color: var(--shu); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 1000px) { .works__col { grid-column: 1 / -1; } }

/* ── Changelog ─────────────────────────────────────────────────────────────────────────────────────── */
.release { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--hull-2); }
.release h2 { margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.release time { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.release h3 { margin: 22px 0 8px; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); font-weight: 600; }
.release ul { margin-top: 0; }
.legal .glance { list-style: none; padding: 0; margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.legal .glance li { padding: 18px 20px; border-radius: var(--r-ui); background: var(--hull); }
.legal .glance b { display: block; margin-bottom: 6px; }
@media (max-width: 760px) { .legal .glance { grid-template-columns: 1fr; } }