/* Trill: everydaymactools.com/trill/
   One ink plate (the icon's) holds the hero trackpad; everything else sits on cool white,
   in the app's own jade. Mint only glows on ink. Mona Sans throughout, its width axis used
   for the gesture names. No amber, orange or cream anywhere. */

:root {
  color-scheme: light;
  --paper: #f4f7f6;
  --white: #ffffff;
  --mist: #eef3f1;
  --mist-2: #e6edea;
  --hair: #dde5e2;
  --text: #13201c;
  --text-2: #3f4b46;
  --text-3: #5b6a64;
  --jade: #0c7a5e;
  --jade-hi: #0e8a6b;
  --link: #0b6b53;
  --deep: #0a4e3f;
  --mint: #7bf2c8;
  --mint-2: #13a77f;
  --ink-hi: #36423e;
  --ink: #121715;
  --on-ink: #f1f5f3;
  --on-ink-2: #a9b8b3;
  --sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --radius-plate: clamp(24px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 17px/1.6 var(--sans); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--deep); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; border-radius: 8px; }
.plate :focus-visible { outline-color: var(--mint); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--text); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.wrap { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }

kbd {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; margin: 0 .08em;
  border-radius: .36em; background: var(--white); color: var(--text);
  font: 600 .82em/1 var(--sys); vertical-align: .08em;
  box-shadow: inset 0 -1px 0 #d5deda, 0 0 0 1px var(--hair);
}

/* ---------- type ---------- */
h1, h2 { font-weight: 720; letter-spacing: -.032em; text-wrap: balance; }
h1 { font-size: clamp(42px, 4.9vw, 68px); line-height: 1; font-stretch: 106%; }
h2 { font-size: clamp(32px, 3.9vw, 50px); line-height: 1.04; font-stretch: 108%; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 660; letter-spacing: -.01em; }
.lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 36em; text-wrap: pretty; }
.body { color: var(--text-2); max-width: 36em; }
h2 + .lede { margin-top: 18px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 0; font-weight: 620; font-size: 16px; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
.btn__price { font-weight: 500; opacity: .78; font-variant-numeric: tabular-nums; }
.btn--jade { background: var(--jade); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 20px -10px rgba(10, 78, 63, .7); }
.btn--jade:hover { background: var(--jade-hi); color: #fff; }
.btn--quiet { background: var(--white); color: var(--text); box-shadow: inset 0 0 0 1px var(--hair); }
.btn--quiet:hover { background: var(--mist); color: var(--text); }
.btn--mint { background: var(--mint); color: #062c22; box-shadow: 0 0 0 1px rgba(123, 242, 200, .4), 0 10px 30px -10px rgba(123, 242, 200, .55); }
.btn--mint:hover { background: #9af6d6; color: #062c22; }
.btn--ghost-dark { background: rgba(255, 255, 255, .06); color: var(--on-ink); box-shadow: inset 0 0 0 1px rgba(241, 245, 243, .22); }
.btn--ghost-dark:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 30; height: var(--nav-h); background: rgba(244, 247, 246, .82);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.nav.is-stuck { box-shadow: 0 1px 0 var(--hair); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 100%; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -.02em; font-stretch: 108%; }
.wordmark:hover { color: var(--text); }
.wordmark img { width: 30px; height: 30px; transform: scale(1.18); }
.nav__links { display: flex; gap: 22px; margin-left: 8px; }
.nav__links a { color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav__links a:hover { color: var(--text); }
.nav__cta { display: flex; gap: 8px; margin-left: auto; }

/* ---------- the hero: an ink plate holding a Space Gray trackpad ---------- */
.hero { padding: 6px clamp(8px, 1.2vw, 16px) 0; }
.plate {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-plate);
  background: linear-gradient(180deg, var(--ink-hi) 0%, #222b28 34%, var(--ink) 100%);
  color: var(--on-ink); padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 30px 60px -36px rgba(18, 23, 21, .55);
}
.plate::before { /* the icon's sheen, and a mint glow where the trackpad sits */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 58% at 70% 52%, rgba(123, 242, 200, .13), rgba(123, 242, 200, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 38%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { color: #fff; }
.hero__lede { margin-top: 24px; font-size: clamp(18px, 1.45vw, 20px); line-height: 1.55; color: var(--on-ink-2); max-width: 30em; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__fine { margin-top: 18px; font-size: 14.5px; color: var(--on-ink-2); }

.stage { position: relative; min-width: 0; }
.deck {
  position: relative; container-type: inline-size; aspect-ratio: 460 / 300; border-radius: 4.78cqw;
  background: linear-gradient(180deg, #8c8d91 0%, #7b7c80 100%);
  box-shadow: 0 5.2cqw 10.4cqw rgba(0, 0, 0, .42), 0 .45cqw 1.3cqw rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
  overflow: hidden;
}
/* the bottom key row sits inside the deck, clear of its rounded corners, as the app draws it */
.deck__keys { position: absolute; left: 3.6cqw; right: 3.6cqw; top: 1.75cqw; display: flex; gap: .87cqw; height: 5.4cqw; }
.key {
  flex: none; height: 100%; border-radius: .9cqw; background: #1c1c1e;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .12);
  color: #9a9aa0; font: 400 1.6cqw/1 var(--sys); display: flex; align-items: flex-end; padding: 0 0 .8cqw 1.1cqw; white-space: nowrap; overflow: hidden;
}
.key--ctl, .key--opt { width: 8.26cqw; }
.key--cmd { width: 10.43cqw; }
.key--space { flex: 1 1 0; min-width: 0; }
.key--arrows { width: 16.5cqw; display: grid; align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: .35cqw; padding: 0; background: none; box-shadow: none; overflow: visible; }
.key--arrows i { border-radius: .55cqw; background: #1c1c1e; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(0, 0, 0, .18); }
.key--arrows i:nth-child(1) { grid-area: 2 / 1; }
.key--arrows i:nth-child(2) { grid-area: 1 / 2; }
.key--arrows i:nth-child(3) { grid-area: 2 / 2; }
.key--arrows i:nth-child(4) { grid-area: 2 / 3; }
.pad {
  position: absolute; left: 10.87%; top: 14%; width: 78.26%; height: 74%; border-radius: 3.04cqw; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #838488 0%, #75767a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 3px rgba(0, 0, 0, .3);
  transition: box-shadow .5s var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pad__sheen { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 48%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%),
              radial-gradient(40% 50% at 12% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%); }
.pad.is-tick { box-shadow: inset 0 0 0 1px rgba(123, 242, 200, .55), inset 0 0 6cqw rgba(123, 242, 200, .16), inset 0 1px 3px rgba(0, 0, 0, .3); transition-duration: .08s; }
.pad__layer { position: absolute; inset: 0; }

.tip {
  position: absolute; width: 6.52cqw; height: 6.52cqw; margin: -3.26cqw 0 0 -3.26cqw; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f2fffa 0%, #9df7d6 38%, #2fc79a 80%, #0f8f6c 100%);
  box-shadow: 0 0 3.9cqw rgba(19, 167, 127, .75), 0 .43cqw 1.3cqw rgba(5, 60, 45, .35);
  transition-property: left, top, opacity, transform; transition-timing-function: cubic-bezier(.3, .1, .2, 1);
  will-change: left, top, opacity, transform;
}
.tip.is-up { opacity: 0; transform: scale(.72); }
.tip.is-lift { opacity: 0; transform: scale(1.22); }
.trail { position: absolute; height: 6.52cqw; margin-top: -3.26cqw; transform-origin: 0 50%; pointer-events: none; }
.trail i { display: block; height: 100%; border-radius: 3.26cqw; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(19, 167, 127, 0), rgba(19, 167, 127, .45)); }
.ring { position: absolute; width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; color: var(--mint); pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 1.1cqw rgba(123, 242, 200, .65)); opacity: 0; }
.ring.is-rest { opacity: .85; transform: scale(1.4); }
.ring.is-go { animation: ripple .78s cubic-bezier(.16, .7, .3, 1) both; }
.ring.is-faint { color: #b9f8e2; }
.ring.is-faint.is-go { animation-name: ripple-faint; animation-duration: .6s; }
.ring.is-small { width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; }
@keyframes ripple { 0% { opacity: 0; transform: scale(.4); } 14% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes ripple-faint { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: .7; } 100% { opacity: 0; transform: scale(1.25); } }

.level { position: absolute; right: 3.5%; top: 26%; width: 1.5cqw; height: 50%; border-radius: 1cqw; background: rgba(28, 28, 30, .55); overflow: hidden; opacity: 0; transition: opacity .3s var(--ease); }
.level.is-on { opacity: 1; }
.level i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--v, 30%); background: linear-gradient(180deg, var(--mint), var(--mint-2)); border-radius: inherit; transition: height .16s var(--ease); }

.readout { display: block; margin-top: 26px; min-height: 2.2em; text-wrap: balance; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.readout__name { font-weight: 700; font-stretch: 116%; color: #fff; transition: font-stretch .14s var(--ease); }
.readout__name.is-tick { font-stretch: 125%; }
.readout__does { color: var(--mint); font-weight: 450; }
.readout__colon { color: #fff; font-weight: 700; }
.readout__set { display: block; margin-top: 8px; font-size: 14.5px; letter-spacing: 0; color: var(--on-ink-2); }
.readout__name, .readout__does, .readout__set { transition: opacity .2s var(--ease), font-stretch .14s var(--ease); }

/* one calm row of glyph keys: equal squares, the playing one lit in mint */
.picker { display: grid; grid-template-columns: repeat(7, minmax(0, 54px)); gap: 10px; margin-top: 22px; }
.picker button {
  position: relative; display: grid; place-items: center; width: 100%; min-width: 44px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 13px; cursor: pointer;
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(241, 245, 243, .11);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.picker button svg { width: 70%; height: 70%; --pad: #6a7b75; --dot: #9fb1ab; transition: opacity .2s; }
.picker button:hover { background: rgba(255, 255, 255, .09); }
.picker button:hover svg { --pad: #8a9a95; --dot: #d3ddd9; }
.picker button[aria-pressed="true"] { background: rgba(123, 242, 200, .13); box-shadow: inset 0 0 0 1px rgba(123, 242, 200, .6), 0 0 22px -6px rgba(123, 242, 200, .55); }
.picker button[aria-pressed="true"] svg { --pad: rgba(123, 242, 200, .55); --dot: var(--mint); }
/* the tooltip: the gesture's name, under its key on hover or keyboard focus */
.picker button::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 2; transform: translate(-50%, -3px);
  padding: 5px 10px; border-radius: 8px; background: var(--on-ink); color: var(--text); white-space: nowrap;
  font-size: 13px; font-weight: 580; line-height: 1.3; letter-spacing: 0; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.picker button:nth-child(-n+2)::after { left: 0; transform: translate(0, -3px); }
.picker button:nth-last-child(-n+2)::after { left: auto; right: 0; transform: translate(0, -3px); }
.picker button:hover::after, .picker button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.picker button:nth-child(-n+2):hover::after, .picker button:nth-child(-n+2):focus-visible::after,
.picker button:nth-last-child(-n+2):hover::after, .picker button:nth-last-child(-n+2):focus-visible::after { transform: none; }
@media (hover: none) { .picker button::after { display: none; } }
.stage__note { margin-top: 16px; font-size: 13.5px; color: #8fa39c; }

/* gesture glyphs: the app's grammar (a pad outline, dots for fingers, a short arrow for motion) */
.g-pad { fill: none; stroke: var(--pad, #9baba5); stroke-width: 2; }
.g-dot { fill: var(--dot, var(--mint-2)); }
.g-ring { fill: none; stroke: var(--dot, var(--mint-2)); stroke-width: 2; }
.g-arrow { fill: none; stroke: var(--dot, var(--mint-2)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-zone { fill: none; stroke: var(--pad, #9baba5); stroke-width: 1.4; stroke-dasharray: 2 2; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 8.5vw, 120px) 0; }
#sets { padding-bottom: clamp(48px, 6vw, 84px); }
.section--white { background: var(--white); border-block: 1px solid var(--mist-2); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pair .minor:first-child { margin-top: 6px; }
.section--rule { border-top: 1px solid var(--mist-2); }
.head { max-width: 760px; }
.minor + .body { margin-top: 8px; }
.minor { margin-top: 36px; font-size: 15px; font-weight: 650; letter-spacing: 0; color: var(--text); }

.shot { border-radius: 14px; overflow: hidden; background: var(--white);
  box-shadow: 0 0 0 1px rgba(16, 40, 32, .07), 0 2px 4px rgba(16, 40, 32, .04), 0 30px 60px -30px rgba(16, 40, 32, .28); }
.shot picture, .cheat picture { display: block; }
.shot img { width: 100%; height: auto; }
.shot--wide { margin-top: clamp(40px, 5vw, 64px); }
.shot figcaption { padding: 18px 22px; background: var(--white); color: var(--text-2); font-size: 15.5px; border-top: 1px solid var(--mist-2); }
.shot figcaption b { color: var(--text); font-weight: 650; }
.pair--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.pair--flip, .pair--wide-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pair--flip > :first-child { order: 2; }
.windows-more { margin-top: clamp(56px, 7vw, 96px); }
.pair--lists { margin-top: clamp(48px, 6vw, 80px); padding-top: 4px; border-top: 1px solid var(--mist-2); }

/* the cheat sheet: the panel itself, cut from the shot, with its own rounded corners */
.cheat { margin-top: clamp(40px, 5vw, 64px); }
.cheat img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(6, 12, 10, .35)); }
.cheat figcaption { margin-top: 20px; max-width: 46em; color: var(--text-2); }
.cheat figcaption b { color: var(--text); font-weight: 650; }

/* sets: a ruled spec sheet, not cards */
.sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3.5vw, 48px); margin-top: clamp(48px, 5vw, 72px); }
.set { padding: 26px 0 34px; border-top: 1px solid var(--hair); }
.set:nth-child(-n+3) { border-top-color: var(--text); }
.set h3 { font-size: 22px; font-stretch: 108%; letter-spacing: -.02em; }
.set__where { margin-top: 4px; font-size: 14.5px; color: var(--text-3); }
.moves { margin-top: 16px; display: grid; gap: 10px; }
.moves li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 15.5px; line-height: 1.45; color: var(--text-2); }
.moves svg { width: 30px; height: 30px; margin-top: -4px; }
.moves b { display: block; color: var(--text); font-weight: 620; }
.moves__key { display: grid; place-items: center; width: 26px; height: 22px; margin: 0 2px; border-radius: 6px; background: #e8f6f0; color: var(--link); font: 600 13px/1 var(--sys); box-shadow: inset 0 -1px 0 #c9e6da, 0 0 0 1px #cfe9de; }
.moves--list { margin-top: 14px; gap: 8px; }
.moves--list li { align-items: center; color: var(--text); }
.moves--list svg { margin-top: 0; }

/* split: text beside a screenshot */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--flip .split__text { order: 2; }
.split__media { position: sticky; top: calc(var(--nav-h) + 32px); }
.split__text .body { margin-top: 10px; }

/* the sample rule: one featured sentence on a quiet card, with its gesture glyph */
.rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 32px; padding: 22px 26px 22px 22px; border-radius: 18px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--mist-2); }
.rule__glyph { width: 60px; height: 60px; padding: 6px; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px var(--mist-2), 0 6px 14px -8px rgba(16, 40, 32, .3); }
.rule__text { font-size: clamp(22px, 2.1vw, 27px); line-height: 1.3; letter-spacing: -.016em; color: var(--text); text-wrap: balance; }
.rule__text b { font-weight: 640; }
.rule__does { color: var(--link); }

/* hyper */
.hyper { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.keys-eq { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; justify-content: flex-end; }
.cap { display: grid; flex: none; grid-template-rows: 1fr auto; width: 66px; height: 66px; padding: 9px 10px 8px; border-radius: 12px; background: #1c1c1e; color: #d6d9de;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .5), 0 6px 14px -6px rgba(0, 0, 0, .5); }
.cap__glyph { font: 500 22px/1 var(--sys); }
.cap__label { font: 400 11px/1 var(--sys); color: #9a9aa0; }
.cap--hyper { width: 106px; background: linear-gradient(180deg, #17785f 0%, #0e5c49 100%); color: #e9fff6;
  box-shadow: 0 0 0 1px rgba(123, 242, 200, .8), 0 0 22px rgba(123, 242, 200, .55), inset 0 1px 0 rgba(255, 255, 255, .18); }
.cap--hyper .cap__label { color: #c8f5e4; }
.keys-eq__is { font-size: 28px; color: var(--text-3); padding: 0 4px; }
.aside { margin-top: 16px; color: var(--text-2); max-width: 36em; }

/* the one full-bleed ink band mid-page: the Hyper Key, with the dark cheat sheet on dark */
.section--ink {
  position: relative; isolation: isolate; color: var(--on-ink);
  background: linear-gradient(180deg, #1d2523 0%, var(--ink) 100%);
}
.section--ink::before { /* the plate's mint glow, under the cheat sheet */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 50% 72%, rgba(123, 242, 200, .08), rgba(123, 242, 200, 0) 70%);
}
.section--ink h2 { color: #fff; }
.section--ink .lede, .section--ink .aside { color: var(--on-ink-2); }
.section--ink .cheat figcaption { color: var(--on-ink-2); }
.section--ink .cheat figcaption b { color: #fff; }
.section--ink .cap { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 255, 255, .09), 0 8px 18px -8px rgba(0, 0, 0, .7); }
.section--ink .keys-eq__is { color: var(--on-ink-2); }
.section--ink kbd { background: rgba(255, 255, 255, .08); color: var(--on-ink); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(241, 245, 243, .2); }
.section--ink :focus-visible { outline-color: var(--mint); }

/* windows */
.points { display: grid; gap: 16px; padding-top: 8px; }
.points li { padding-left: 18px; position: relative; color: var(--text-2); }
.points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-2); }
.points b { color: var(--text); font-weight: 640; }

/* haptics */
.feels { margin-top: 32px; border-top: 1px solid var(--hair); }
.feels div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.feels dt { display: flex; align-items: center; gap: 12px; font-weight: 640; }
.feels dd { color: var(--text-2); font-size: 15.5px; line-height: 1.45; }
/* one glyph grammar for every feel: a fingertip, and a ring per pulse; faint pulses in a faint ring */
.feel { flex: none; width: 28px; height: 28px; overflow: visible; }
.feel--faint { --fr: rgba(19, 167, 127, .38); }

/* the feel demo: a fingertip on the trackpad, and the app's own Strength control */
.feel-demo { padding: clamp(20px, 2.6vw, 32px); border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--mist-2), 0 30px 60px -36px rgba(16, 40, 32, .3); }
.feel-demo__deck { box-shadow: 0 3cqw 6cqw rgba(16, 24, 22, .22), 0 .3cqw 1cqw rgba(16, 24, 22, .16), inset 0 1px 0 rgba(255, 255, 255, .25); }
.feel-demo .pad { cursor: default; }
.feel-ring { width: 24cqw; height: 24cqw; margin: -12cqw 0 0 -12cqw; fill: none; stroke: currentColor; stroke-width: var(--w, 3.3); stroke-linejoin: round; opacity: 0; }
.feel-ring.is-rest { opacity: var(--ink, .85); transform: scale(1.1); }
.feel-ring.is-go { opacity: 0; animation: feel-ripple .8s cubic-bezier(.16, .7, .3, 1) both; animation-delay: var(--d, 0s); }
@keyframes feel-ripple { 0% { opacity: 0; transform: scale(.4); } 14% { opacity: var(--ink, .85); } 100% { opacity: 0; transform: scale(1.7); } }
.feel-demo__note { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; color: var(--text-2); font-size: 15.5px; min-height: 1.6em; text-wrap: pretty; }
.feel-demo__note i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-2); transform: translateY(-1px); }
.strength { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.strength__label { font-weight: 650; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--mist-2); }
.seg button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: 15px; font-weight: 520; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: var(--white); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 40, 32, .16), 0 0 0 1px rgba(16, 40, 32, .05); }
.feel-demo__sub { margin-top: 10px; color: var(--text-3); font-size: 14.5px; }
.note { margin-top: 24px; padding: 16px 18px; border-radius: 12px; background: var(--mist); color: var(--text-2); font-size: 15px; line-height: 1.55; }

/* clashes */
.clash { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.clash__text .body { margin-top: 16px; }
.clash__media { display: grid; justify-items: center; order: -1; }
.clash__card { width: min(100%, 400px); border-radius: 13px; box-shadow: 0 30px 60px -30px rgba(16, 40, 32, .3); }
.clash__strip { width: 100%; margin-top: clamp(32px, 4vw, 48px); border-radius: 10px; }

/* price: one composed block: the icon and a headline on a mist panel, the card beside it carries the price */
.price { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); border-radius: 28px; overflow: hidden; background: var(--white);
  box-shadow: 0 0 0 1px var(--mist-2), 0 40px 80px -48px rgba(16, 40, 32, .35); }
.price__lead { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4.5vw, 64px); background: linear-gradient(180deg, var(--mist) 0%, #e9f1ee 100%); }
.price__icon { --s: clamp(88px, 8vw, 112px); width: var(--s); height: auto; margin: 0 0 clamp(20px, 2.4vw, 32px) calc(var(--s) * -.09); filter: drop-shadow(0 14px 22px rgba(18, 23, 21, .2)); }
.price h2 { font-size: clamp(36px, 4.2vw, 56px); }
.price__lead .lede { margin-top: 16px; }
.price__card { padding: clamp(28px, 3.6vw, 52px); }
.price__amount { display: flex; align-items: baseline; gap: 12px; }
.price__amount b { font-size: 56px; line-height: 1; font-weight: 720; letter-spacing: -.04em; font-stretch: 112%; }
.price__amount span { color: var(--text-3); }
.ticks { margin-top: 24px; display: grid; gap: 11px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--text-2); font-size: 16px; }
.ticks svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; color: var(--jade); background: #e8f6f0; margin-top: 1px; }
.ticks b { color: var(--text); font-weight: 640; }
.price__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.price__note, .price__req { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--text-3); }
.price__req { margin-top: 10px; }

/* faq */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-wrap h2 { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 18.5px; font-weight: 620; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: translateY(-3px) rotate(45deg); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details[open] summary { padding-bottom: 8px; }
.faq summary:focus-visible { outline-offset: 4px; }
.faq__a { padding: 0 0 24px; color: var(--text-2); max-width: 40em; text-wrap: pretty; }
.faq__a p + p { margin-top: 10px; }

/* closing */
.closing { padding: 0 0 clamp(80px, 9vw, 120px); }
.closing__in { padding-top: clamp(56px, 6vw, 80px); border-top: 1px solid var(--mist-2); }
.closing .hero__cta { margin-top: 26px; }

/* footer */
.footer { padding: 48px 0 56px; background: var(--white); border-top: 1px solid var(--mist-2); }
.footer__in { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: start; }
.footer__brand p { margin-top: 10px; color: var(--text-3); font-size: 15px; max-width: 40em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 6px; }
.footer__links a { color: var(--text-2); text-decoration: none; font-size: 15px; }
.footer__links a:hover { color: var(--text); text-decoration: underline; }
.footer__sign { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--mist-2); font-size: 14px; color: var(--text-3); }

/* small pages: thanks and privacy */
.page { padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 120px); }
.page .wrap { max-width: 720px; }
.page h1 { font-size: clamp(40px, 5vw, 60px); }
.page .lede { margin-top: 18px; }
.page h2 { margin-top: 48px; font-size: 24px; font-stretch: 104%; letter-spacing: -.02em; }
.page p, .page li { color: var(--text-2); }
.page h2 + p, .page h2 + ul, .page h2 + ol { margin-top: 12px; }
.page ul + p, .page ol + p { margin-top: 14px; }
.page p + p { margin-top: 12px; }
.page ul, .page ol { display: grid; gap: 8px; margin-top: 12px; padding-left: 1.2em; }
.page ul { list-style: disc; }
.page ol { list-style: decimal; }
.page li::marker { color: var(--mint-2); }
.page b { color: var(--text); font-weight: 640; }
.card { margin-top: 32px; padding: 28px clamp(20px, 3vw, 32px); border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px var(--mist-2), 0 24px 50px -36px rgba(16, 40, 32, .3); }
.card h2 { margin-top: 0; }
.steps-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.steps-path span { padding: 6px 12px; border-radius: 999px; background: var(--mist); color: var(--text); font-size: 15px; font-weight: 560; }
.steps-path i { width: 6px; height: 6px; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: rotate(-45deg); }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 640px; }
  .stage { max-width: 760px; }
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split__text, .pair--flip > :first-child, .clash__media { order: 0; }
  .split__media { position: static; }
  .hyper { grid-template-columns: 1fr; align-items: start; }
  .keys-eq { justify-content: flex-start; }
  .sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set:nth-child(-n+3) { border-top-color: var(--hair); }
  .set:nth-child(-n+2) { border-top-color: var(--text); }
  .clash, .price, .pair { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-wrap h2 { position: static; }
}
@media (max-width: 640px) {
  :root { --nav-h: 56px; }
  body { font-size: 16.5px; }
  .nav__in { gap: 12px; }
  .nav__cta { gap: 6px; }
  .nav__cta .btn { min-height: 44px; padding: 0 14px; font-size: 14.5px; }
  .footer__links { gap: 0 20px; padding-top: 0; }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .plate { padding: 40px 0 32px; }
  .hero__lede { margin-top: 18px; }
  .hero__cta { margin-top: 26px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .readout { margin-top: 20px; }
  .picker { gap: 5px; margin-top: 18px; }
  .picker button { border-radius: 11px; }
  .sets { grid-template-columns: 1fr; }
  .set:nth-child(2) { border-top-color: var(--hair); }
  .shot { border-radius: 10px; }
  .shot figcaption { padding: 14px 16px; font-size: 15px; }
  .cap { width: 52px; height: 52px; padding: 6px 6px 6px 7px; border-radius: 9px; }
  .cap--hyper { width: 84px; }
  .cap__glyph { font-size: 17px; }
  .cap__label { font-size: 9px; }
  .keys-eq { gap: 6px; }
  .keys-eq__is { font-size: 20px; padding: 0 1px; }
  .feels div { grid-template-columns: 1fr; gap: 4px; }
  .clash__strip { display: none; }
  .steps-path { display: none; }
  .seg button { min-height: 44px; padding: 0 13px; }
  .rule { gap: 14px; padding: 16px 18px 16px 16px; }
  .rule__glyph { width: 48px; height: 48px; padding: 4px; border-radius: 12px; }
  .price__amount b { font-size: 48px; }
  .footer__in { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tip, .ring, .pad, .level i, .readout__name, .btn, .seg button, .picker button, .picker button::after, .picker button svg { transition: none !important; animation: none !important; }
}