/* FingerKeys — sales page.
   Plain CSS, no build step. Colours and type come from the app itself:
   the window grey (#F0F0F0), white cards, amber finger dots, keycaps.
   Amber means "touch" and "press here"; nothing else is coloured. */

:root {
  color-scheme: light dark;

  --alu: #f0f0f0;            /* ground: the app window's grey (screenshots sit on it without a frame) */
  --alu-2: #e4e4e6;          /* wells and trays, one step deeper */
  --paper: #ffffff;          /* cards */
  --ink: #16171a;
  --ink-2: rgb(22 23 26 / 0.66);
  --ink-3: rgb(22 23 26 / 0.5);    /* only for the dimmed words of large headings and for ornaments */
  --line: rgb(22 23 26 / 0.1);
  --amber: #f2c230;          /* finger dots, the primary button */
  --amber-rim: #c2930a;
  --amber-ink: #7a5800;      /* amber as text on light */
  --on-amber: #1b1400;
  --link: #2f49c9;           /* the icon's cobalt, links only */
  --key-face: #ffffff;
  --key-line: rgb(22 23 26 / 0.16);
  --key-edge: #c3c4ca;
  --pad-top: #fcfcfc;
  --pad-bot: #e3e3e5;
  --pad-rim: #ffffff;
  --pad-edge: #b4b4b8;
  --band: #16171a;           /* the closing panel */
  --band-ink: #f3f3f1;
  --shot: #f0f0f0;           /* plate behind real screenshots (always the app's light grey) */

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  --font-key: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", var(--font);

  --fs-display: clamp(2.6rem, 1.3rem + 5.6vw, 5rem);
  --fs-h2: clamp(1.7rem, 1.15rem + 2.3vw, 2.75rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.8125rem;

  --gut: clamp(20px, 5vw, 48px);
  --r-panel: clamp(22px, 3vw, 36px);
  --r-card: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --alu: #131416;
    --alu-2: #1b1c1f;
    --paper: #1f2024;
    --ink: #f1f1ef;
    --ink-2: rgb(241 241 239 / 0.7);
    --ink-3: rgb(241 241 239 / 0.5);
    --line: rgb(255 255 255 / 0.11);
    --amber-rim: #f7d76e;
    --amber-ink: #f2c230;
    --link: #9fb0ff;
    --key-face: #2c2d33;
    --key-line: rgb(255 255 255 / 0.14);
    --key-edge: #060607;
    --pad-top: #3a3b41;
    --pad-bot: #26272c;
    --pad-rim: #4a4b52;
    --pad-edge: #0b0b0d;
    --band: #060607;
  }
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 56px;
}

body {
  margin: 0;
  background: var(--alu);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.85;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;
}

:lang(en) body, body:lang(en) { line-height: 1.62; overflow-wrap: break-word; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(1120px, 100% - 2 * var(--gut));
  margin-inline: auto;
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* A phrase that must not break in the middle (Japanese has no spaces to break on). */
.ph { display: inline-block; }

/* ---------- draft marks (remove class "draft" from <html> to hide them all) ---------- */

.draftbar, .kari { display: none; }

.draft .draftbar {
  display: block;
  position: sticky; top: 0; z-index: 20;
  padding: 5px var(--gut);
  background: #16171a;
  color: #f0f0f0;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: center;
}
.draft .draftbar b { color: var(--amber); font-weight: 700; }

.draft .kari {
  display: inline-block;
  margin-inline-start: 0.5em;
  padding: 0 0.5em;
  border: 1px dashed currentColor;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--amber-ink);
  vertical-align: 0.15em;
  white-space: nowrap;
}

/* ---------- small parts ---------- */

.eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

/* Headings: the words to read are full ink, the joining words are dimmed. */
.display, .h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-feature-settings: "palt";
  color: var(--ink-3);
  text-wrap: balance;
}
.display b, .h2 b { color: var(--ink); font-weight: inherit; }
.display { font-size: var(--fs-display); line-height: 1.12; }
.h2 { font-size: var(--fs-h2); line-height: 1.25; margin-top: 0.35em; }
:lang(en) .display, :lang(en) .h2 { letter-spacing: -0.03em; font-feature-settings: normal; }
:lang(en) .display { line-height: 1; }
:lang(en) .h2 { line-height: 1.1; }

.lede { color: var(--ink-2); max-width: 34em; }
:lang(en) .lede { max-width: 30em; }

.head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 52px); }
.head .lede, .h2 + .lede { margin-top: 1em; }

/* Keycaps: a face and a hard bottom edge. Buttons use the same form. */
.key {
  display: inline-grid;
  place-items: center;
  min-width: 2.3em;
  height: 2.3em;
  padding: 0 0.55em;
  border: 1px solid var(--key-line);
  border-radius: 0.55em;
  background: var(--key-face);
  box-shadow: 0 3px 0 var(--key-edge);
  color: var(--ink);
  font-family: var(--font-key);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.keys { display: inline-flex; gap: 6px; vertical-align: middle; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 1.5em;
  border: 1px solid var(--key-line);
  border-radius: 14px;
  background: var(--key-face);
  box-shadow: 0 4px 0 var(--key-edge);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: translate 0.1s, box-shadow 0.1s;
}
.btn:active { translate: 0 4px; box-shadow: 0 0 0 var(--key-edge); }
.btn--primary {
  border-color: var(--amber-rim);
  background: var(--amber);
  box-shadow: 0 4px 0 var(--amber-rim);
  color: var(--on-amber);
}
.btn--primary:active { box-shadow: 0 0 0 var(--amber-rim); }
.btn--small { min-height: 44px; padding: 0 1em; border-radius: 11px; font-size: 0.9375rem; box-shadow: 0 3px 0 var(--amber-rim); }
.btn--small:active { translate: 0 3px; }

@media (prefers-color-scheme: dark) {
  .btn--primary, .btn--small { box-shadow: 0 4px 0 #8a6800; border-color: #8a6800; }
  .btn--small { box-shadow: 0 3px 0 #8a6800; }
}

.cta { display: flex; flex-wrap: wrap; gap: 14px; }
.cta__note { margin-top: 16px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.7; }

/* ---------- header ---------- */

.top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  margin-inline-end: auto;
  color: var(--ink); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
}
.brand { min-height: 44px; }
.brand img { width: 36px; height: 36px; margin: -4px 0 -4px -4px; }
.top__nav { display: flex; gap: 22px; }
.top__nav a, .top__lang {
  color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; text-decoration: none;
}
.top__nav a:hover, .top__lang:hover { color: var(--ink); }
.top__nav a, .top__lang, .top .btn { white-space: nowrap; }
.top__lang { padding: 11px 4px; }

@media (max-width: 820px) {
  .top__nav { display: none; }
  .top { gap: 14px; }
}
@media (max-width: 350px) {
  .top { gap: 8px; }
  .top .btn--small { display: none; } /* the same button is the first thing in the hero */
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(20px, 4vw, 56px) clamp(56px, 8vw, 104px); overflow-x: hidden; overflow-x: clip; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero__copy { container-type: inline-size; }
/* The headline is sized from its own column, so each line fits at every width. */
.hero__copy .display { margin-block: 0.28em 0.42em; font-size: clamp(2.4rem, 16cqi, 5rem); }
.hero__copy .cta { margin-top: 30px; }

/* One-time entrance: each headline line rises inside its own window. */
.ln { display: block; }
.ln > span { display: block; }
/* The window only exists while the entrance runs, and is larger than the glyphs
   (padding taken back by the margin), so no descender is ever cut. */
.anim .ln { overflow: hidden; overflow: clip; padding-block: 0.1em 0.22em; margin-block: -0.1em -0.22em; }

@keyframes rise { from { translate: 0 108%; } }
@keyframes fade-up { from { opacity: 0; translate: 0 10px; } }

.anim .ln > span { animation: rise 0.85s var(--ease) 0.15s both; }
.anim .ln + .ln > span { animation-delay: 0.26s; }
.anim .hero__copy .eyebrow,
.anim .hero__copy .lede,
.anim .hero__copy .cta__note,
.anim .hero__stage { animation: fade-up 0.6s var(--ease) both; }
.anim .hero__copy .lede { animation-delay: 0.45s; }
.anim .hero__copy .cta__note { animation-delay: 0.55s; }
.anim .hero__stage { animation-delay: 0.3s; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { max-width: 620px; }
}
@media (max-width: 520px) {
  .hero__copy .cta { flex-direction: column; }
  .hero__copy .cta .btn { width: 100%; }
}

/* ---------- the stage: fingers in, keys out ---------- */

.stage { --kd: 0.8s; }

/* The rule row reads like one assignment: gesture -> keys -> what happens. */
.rules { min-height: 5.6em; display: grid; align-items: end; }
@media (max-width: 620px) { .rules { min-height: 7.2em; } } /* room for three lines, so nothing below moves between examples */
.rule { display: none; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.stage[data-g="0"] .rule[data-i="0"],
.stage[data-g="1"] .rule[data-i="1"],
.stage[data-g="2"] .rule[data-i="2"],
.stage[data-g="3"] .rule[data-i="3"],
.stage[data-g="4"] .rule[data-i="4"] { display: flex; }

.rule__g { flex-basis: 100%; font-weight: 700; line-height: 1.4; }
.rule__arrow { color: var(--ink-3); font-weight: 700; }
.rule__act { color: var(--ink-2); font-weight: 600; }
.rule .key { font-size: 1.125rem; }
.rule__held {
  padding: 0.1em 0.7em; border-radius: 99px;
  background: var(--amber); color: var(--on-amber);
  font-size: var(--fs-small); font-weight: 700;
}

.pad3d {
  perspective: 1100px;
  perspective-origin: 50% 20%;
  padding: 0 3% 34px;
  margin-top: -8%; /* the tilt leaves empty room above the pad; take it back */
}
.pad {
  position: relative;
  container-type: size;
  aspect-ratio: 160 / 114;
  width: 100%;
  border: 2px solid var(--pad-rim);
  border-radius: 6.5% / 9.1%;
  background: linear-gradient(155deg, var(--pad-top), var(--pad-bot));
  box-shadow: 0 12px 0 -1px var(--pad-edge), 0 48px 46px -26px rgb(0 0 0 / 0.3);
  transform: rotateX(36deg);
  transform-origin: 50% 100%;
}

.trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail g { display: none; }
.stage[data-g="0"] .trail g[data-i="0"],
.stage[data-g="1"] .trail g[data-i="1"],
.stage[data-g="2"] .trail g[data-i="2"],
.stage[data-g="3"] .trail g[data-i="3"],
.stage[data-g="4"] .trail g[data-i="4"] { display: inline; }
.trail .streak { fill: none; stroke: var(--amber); stroke-opacity: 0.5; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.trail .shape { stroke-opacity: 0.9; stroke-width: 3.2; stroke: var(--amber-rim); }
.trail .ring { fill: none; stroke: var(--amber-rim); stroke-opacity: 0.55; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }

.dot {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  width: 7.6cqw; height: 7.6cqw; margin: -3.8cqw 0 0 -3.8cqw;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: inset 0 0 0 1.5px var(--amber-rim), 0 3px 6px rgb(90 60 0 / 0.28);
  display: none;
}

/* Where the fingers END for each gesture (the still frame). Motion runs towards these. */
.stage[data-g="0"] .dot:nth-of-type(-n + 3),
.stage[data-g="1"] .dot:nth-of-type(-n + 3),
.stage[data-g="2"] .dot:nth-of-type(-n + 3),
.stage[data-g="3"] .dot:nth-of-type(1),
.stage[data-g="4"] .dot { display: block; }

.stage[data-g="0"] .dot:nth-of-type(1) { --x: 30; --y: 56; }
.stage[data-g="0"] .dot:nth-of-type(2) { --x: 38; --y: 42; }
.stage[data-g="0"] .dot:nth-of-type(3) { --x: 46; --y: 52; }

.stage[data-g="1"] .dot:nth-of-type(1) { --x: 40; --y: 70; }
.stage[data-g="1"] .dot:nth-of-type(2) { --x: 50; --y: 60; }
.stage[data-g="1"] .dot:nth-of-type(3) { --x: 60; --y: 68; }

.stage[data-g="2"] .dot:nth-of-type(1) { --x: 40; --y: 56; }
.stage[data-g="2"] .dot:nth-of-type(2) { --x: 50; --y: 44; }
.stage[data-g="2"] .dot:nth-of-type(3) { --x: 60; --y: 54; }

.stage[data-g="3"] .dot:nth-of-type(1) { --x: 36.25; --y: 70; }

.stage[data-g="4"] .dot:nth-of-type(1) { --x: 28; --y: 66; }
.stage[data-g="4"] .dot:nth-of-type(2) { --x: 38; --y: 44; }
.stage[data-g="4"] .dot:nth-of-type(3) { --x: 50; --y: 36; }
.stage[data-g="4"] .dot:nth-of-type(4) { --x: 62; --y: 42; }
.stage[data-g="4"] .dot:nth-of-type(5) { --x: 73; --y: 58; }

/* "While touching": the key sits pressed in the still frame. */
.stage[data-g="4"] .rule .key { translate: 0 3px; box-shadow: 0 0 0 var(--key-edge); }

/* Motion (only while .run is set by the script; never with "reduce motion"). */
@keyframes dot-in { from { opacity: 0; scale: 1.6; } }
@keyframes dot-out { to { opacity: 0; scale: 1.5; } }
@keyframes swipe-l { from { translate: 30cqw 0; } }
@keyframes swipe-d { from { translate: 0 -34cqh; } }
@keyframes tap2 {
  0%, 38%, 100% { scale: 1; opacity: 1; }
  14%, 52% { scale: 0.82; opacity: 0.75; }
}
@keyframes ring2 {
  0%, 40% { transform: scale(0.5); opacity: 0; }
  12%, 52% { opacity: 1; }
  36%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes trace {
  0% { translate: 0 0; }
  33.3% { translate: 13.75cqw -38.6cqh; }
  66.6% { translate: 27.5cqw 0; }
  100% { translate: 0 0; }
}
@keyframes key-pop {
  0% { opacity: 0; translate: 0 8px; box-shadow: 0 0 0 var(--key-edge); }
  45% { opacity: 1; translate: 0 3px; box-shadow: 0 0 0 var(--key-edge); }
  100% { opacity: 1; translate: 0 0; box-shadow: 0 3px 0 var(--key-edge); }
}
@keyframes key-down {
  0% { opacity: 0; translate: 0 -2px; box-shadow: 0 3px 0 var(--key-edge); }
  40% { opacity: 1; translate: 0 0; box-shadow: 0 3px 0 var(--key-edge); }
  100% { opacity: 1; translate: 0 3px; box-shadow: 0 0 0 var(--key-edge); }
}
@keyframes key-up { to { translate: 0 0; box-shadow: 0 3px 0 var(--key-edge); } }
@keyframes show { from { opacity: 0; } }

.stage.run[data-g="0"] { --kd: 0.82s; }
.stage.run[data-g="1"] { --kd: 0.82s; }
.stage.run[data-g="2"] { --kd: 0.8s; }
.stage.run[data-g="3"] { --kd: 1.55s; }
.stage.run[data-g="4"] { --kd: 0.55s; }

.stage.run[data-g="0"] .dot { animation: dot-in 0.22s ease-out both, swipe-l 0.55s cubic-bezier(0.3, 0, 0.2, 1) 0.24s both; }
.stage.run[data-g="1"] .dot { animation: dot-in 0.22s ease-out both, swipe-d 0.55s cubic-bezier(0.3, 0, 0.2, 1) 0.24s both; }
.stage.run[data-g="2"] .dot { animation: dot-in 0.14s ease-out both, tap2 0.75s ease-in-out both; }
.stage.run[data-g="2"] .ring { animation: ring2 0.75s ease-out both; }
.stage.run[data-g="3"] .dot { animation: dot-in 0.22s ease-out both, trace 1.2s linear 0.26s both; }
.stage.run[data-g="4"] .dot { animation: dot-in 0.22s ease-out both; }
.stage.run[data-g="4"] .ring { animation: ring2 0.75s ease-out both; }
.stage.run[data-g="4"] .dot:nth-of-type(2) { animation-delay: 0.03s; }
.stage.run[data-g="4"] .dot:nth-of-type(3) { animation-delay: 0.05s; }
.stage.run[data-g="4"] .dot:nth-of-type(4) { animation-delay: 0.07s; }
.stage.run[data-g="4"] .dot:nth-of-type(5) { animation-delay: 0.1s; }

.stage.run[data-g="0"] .streak, .stage.run[data-g="1"] .streak { animation: draw 0.55s cubic-bezier(0.3, 0, 0.2, 1) 0.24s both; }
.stage.run[data-g="3"] .streak { animation: draw 1.2s linear 0.26s both; }

.stage.run .rule .key { animation: key-pop 0.34s ease-out var(--kd) both; }
.stage.run .rule .key + .key { animation-delay: calc(var(--kd) + 0.05s); }
.stage.run .rule .key + .key + .key { animation-delay: calc(var(--kd) + 0.1s); }
.stage.run[data-g="4"] .rule .key { animation-name: key-down; }
.stage.run .rule__arrow, .stage.run .rule__act, .stage.run .rule__held { animation: show 0.3s ease-out calc(var(--kd) + 0.18s) both; }

/* Fingers lift, then the row clears, then the next gesture plays. */
/* .run is still set while .lift is added, so these carry .run too (same weight as the rules above, later wins). */
.stage.run.lift .dot { animation: dot-out 0.3s ease-in both; }
.stage.run.lift .streak, .stage.run.lift .ring { opacity: 0; transition: opacity 0.3s; animation: none; }
.stage.lift[data-g="4"] .rule .key { animation: key-up 0.2s ease-out both; }
.stage.lift[data-g="4"] .rule__held { opacity: 0; transition: opacity 0.2s; animation: none; }
.stage.out .rules { opacity: 0; transition: opacity 0.24s; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px;
  padding: 0 0.8em;
  border: 1px solid var(--key-line);
  border-radius: 99px;
  background: var(--key-face);
  color: var(--ink-2);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  cursor: pointer;
}
.chip .n { color: var(--amber-rim); letter-spacing: 0.04em; font-weight: 800; }
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber-rim); color: var(--on-amber); }
.chip[aria-pressed="true"] .n { color: var(--on-amber); }
@media (prefers-color-scheme: dark) { .chip .n { color: var(--amber); } }
/* Without the script these controls would do nothing, so they are not shown. */
html:not(.js) .chips, html:not(.js) .chips__hint, html:not(.js) .hold { display: none; }
.chips__hint { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- panels: big white cards on the grey ground, as in the app ---------- */

.panel {
  margin-inline: clamp(8px, 1.6vw, 22px);
  border-radius: var(--r-panel);
  background: var(--paper);
}
.panel > .sec + .sec, main > .sec + .sec { padding-top: 0; }
.sec { padding-block: clamp(60px, 8.5vw, 124px); }

/* ---------- gesture kinds ---------- */

.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kind {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; align-items: center;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--alu);
}
.kind__pic { grid-row: span 3; width: 96px; }
.kind__name { align-self: end; font-size: 1rem; font-weight: 800; line-height: 1.35; }
.kind__what { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }
.kind__n { align-self: start; display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; color: var(--ink-2); line-height: 1.4; }

/* Finger meter: which finger counts (1 to 5) the kind accepts. */
.fm { display: inline-flex; gap: 3px; }
.fm i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0.14; }
.fm i.on { background: var(--amber); opacity: 1; box-shadow: inset 0 0 0 1px var(--amber-rim); }

.pic { width: 100%; height: auto; overflow: visible; }
.pic .p-pad { fill: var(--pad-top); stroke: var(--line); stroke-width: 1.5; }
.pic .p-zone { fill: var(--ink); fill-opacity: 0.08; }
.pic .p-dot { fill: var(--amber); stroke: var(--amber-rim); stroke-width: 1.2; }
.pic .p-line { fill: none; stroke: var(--amber-rim); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pic .p-soft { stroke-opacity: 0.45; }
.pic .p-ring { fill: none; stroke: var(--amber-rim); stroke-width: 1.4; stroke-opacity: 0.6; }
.pic .p-dash { fill: none; stroke: var(--ink); stroke-opacity: 0.28; stroke-width: 1.5; stroke-dasharray: 5 5; }
.pic .p-palm { fill: var(--ink); fill-opacity: 0.14; }

@media (prefers-color-scheme: dark) {
  .kind { background: var(--alu-2); }
  .pic .p-pad { fill: var(--pad-bot); }
}
@media (max-width: 980px) {
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .kinds { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kind { grid-template-columns: 76px minmax(0, 1fr); gap: 2px 14px; padding: 12px 14px; }
  .kind__pic { width: 76px; }
}

/* A little life on hover, for pointers that hover and people who have not asked for less motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kind .mv { transition: translate 0.45s var(--ease), rotate 0.45s var(--ease), scale 0.45s var(--ease); transform-box: fill-box; transform-origin: center; }
  .kind:hover .mv-l { translate: -9px 0; }
  .kind:hover .mv-r { translate: 9px 0; }
  .kind:hover .mv-a { translate: -5px 5px; }
  .kind:hover .mv-b { translate: 5px -5px; }
  .kind:hover .mv-rot { rotate: 28deg; }
  .kind:hover .mv-ring { scale: 1.45; }
  .kind:hover .mv-bar { scale: 1.12 1; }
}

/* ---------- while touching ---------- */

.holdgrid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.holdgrid .lede + .lede { margin-top: 0.9em; }
.guards { margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.75; max-width: 40em; }
.guards b { color: var(--ink); }

.hold {
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: var(--r-card);
  background: var(--alu);
}
.hold__try { font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); margin-bottom: 12px; }
.hold__pad {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 160 / 96;
  border: 2px solid var(--pad-rim);
  border-radius: 20px;
  background: linear-gradient(155deg, var(--pad-top), var(--pad-bot));
  box-shadow: 0 8px 0 -1px var(--pad-edge);
  cursor: pointer;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: translate 0.08s, box-shadow 0.08s;
}
.hold__pad i {
  position: absolute; width: 9%; aspect-ratio: 1; margin: -4.5% 0 0 -4.5%;
  border-radius: 50%; background: var(--amber);
  box-shadow: inset 0 0 0 1.5px var(--amber-rim), 0 3px 6px rgb(90 60 0 / 0.28);
  opacity: 0; scale: 1.5;
  transition: opacity 0.12s, scale 0.12s;
}
.hold__pad i:nth-child(1) { left: 24%; top: 68%; }
.hold__pad i:nth-child(2) { left: 36%; top: 42%; }
.hold__pad i:nth-child(3) { left: 50%; top: 33%; }
.hold__pad i:nth-child(4) { left: 64%; top: 40%; }
.hold__pad i:nth-child(5) { left: 77%; top: 60%; }
.hold__hint {
  position: absolute; left: 0; right: 0; bottom: 12%;
  font-size: 0.9375rem; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.4;
  transition: opacity 0.12s;
}
.hold__out { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.hold__out .key { flex: none; font-size: 1.3rem; padding: 0 0.8em; height: 2.5em; transition: translate 0.08s, box-shadow 0.08s; }
.hold__status { font-weight: 700; line-height: 1.4; }
.hold__timer { font-family: var(--font-key); font-variant-numeric: tabular-nums; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.4; }

.hold.is-down .hold__pad { translate: 0 3px; box-shadow: 0 5px 0 -1px var(--pad-edge); }
.hold.is-down .hold__pad i { opacity: 1; scale: 1; }
.hold.is-down .hold__hint { opacity: 0; }
.hold.is-down .hold__out .key { translate: 0 3px; box-shadow: 0 0 0 var(--key-edge); background: var(--amber); border-color: var(--amber-rim); color: var(--on-amber); }

@media (prefers-color-scheme: dark) { .hold { background: var(--alu-2); } }
@media (max-width: 900px) { .holdgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- settings: the real board, with three pins ---------- */

.shotgrid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px); align-items: center;
}
.shot__img { position: relative; border-radius: 24px; background: var(--shot); overflow: hidden; overflow: clip; }
.shot__img img { width: 100%; }
.shot__img picture { display: block; }
.pin {
  position: absolute; display: grid; place-items: center;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--amber); color: var(--on-amber);
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(0 0 0 / 0.25);
  font-family: var(--font-key); font-size: 0.875rem; font-weight: 800; line-height: 1;
}
.pin--1 { left: 8%; top: 38.6%; }
.pin--2 { left: 41.4%; top: 6.6%; }
.pin--3 { left: 29%; top: 22.4%; }
/* Phones get a closer crop of the same screenshot (see <picture>), so the pins move with it. */
@media (max-width: 620px) {
  .pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 0.75rem; }
  .pin--1 { left: 6.25%; top: 73.9%; }
  .pin--2 { left: 67.6%; top: 8.7%; }
  .pin--3 { left: 44.9%; top: 40.9%; }
}

.legend { counter-reset: pin; display: grid; gap: 18px; }
.legend li { counter-increment: pin; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; line-height: 1.7; }
.legend li::before {
  content: counter(pin);
  display: grid; place-items: center; width: 26px; height: 26px; margin-top: 2px;
  border-radius: 50%; background: var(--amber); color: var(--on-amber);
  font-family: var(--font-key); font-size: 0.875rem; font-weight: 800; line-height: 1;
}
.legend b { display: block; }
.legend span { color: var(--ink-2); font-size: 0.9375rem; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, 5vw, 64px); }
.card { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--paper); overflow: hidden; overflow: clip; }
.card__well {
  display: grid; place-items: center;
  height: 216px; padding: 18px;
  background: var(--alu-2);
}
.card__well > img, .card__well > svg { max-height: 100%; width: auto; }
.card__well--shot { background: var(--shot); padding: 12px; }
.card__body { padding: 20px 22px 24px; }
.card__body h3 { font-size: 1.125rem; font-weight: 800; line-height: 1.45; }
.card__body p { margin-top: 8px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.75; }

/* "Per app" illustration: the same gesture, a different answer per app. */
.scopebox { width: 100%; max-width: 300px; font-size: var(--fs-small); font-weight: 700; line-height: 1.3; }
.scope { display: grid; gap: 8px; }
.scope__g { color: var(--ink-2); margin-bottom: 8px; }
.scope li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--paper); }
.scope .key { font-size: 0.8125rem; box-shadow: 0 2px 0 var(--key-edge); }
.scope .none { color: var(--ink-2); font-weight: 600; }

@media (max-width: 900px) {
  .shotgrid { grid-template-columns: minmax(0, 1fr); }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .card__well { height: auto; min-height: 180px; }
}
@media (min-width: 621px) and (max-width: 900px) {
  .card { flex-direction: row; }
  .card__well { flex: 0 0 44%; }
  .card__body { align-self: center; }
}

/* ---------- privacy ---------- */

.sends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.send { padding: 22px 24px 24px; border-radius: var(--r-card); background: var(--alu); }
.send__when { font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); }
.send h3 { font-size: 1.1875rem; font-weight: 800; line-height: 1.4; margin-top: 2px; }
.send ul { margin-top: 12px; display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.65; }
.send li { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); gap: 6px; }
.send li::before { content: "↑"; color: var(--amber-ink); font-weight: 800; }
.send li small { display: block; color: var(--ink-2); font-size: var(--fs-small); }

.never { margin-top: 14px; padding: 24px; border-radius: var(--r-card); border: 1.5px dashed var(--line); }
.never h3 { font-size: 1.1875rem; font-weight: 800; line-height: 1.4; }
.never ul { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; font-size: 0.9375rem; line-height: 1.65; }
.never li { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); gap: 6px; }
.never li::before { content: "×"; color: var(--ink-2); font-weight: 800; }
.never li small { display: block; color: var(--ink-2); font-size: var(--fs-small); }
.more { margin-top: 22px; font-size: 0.9375rem; color: var(--ink-2); }

@media (prefers-color-scheme: dark) { .send { background: var(--alu-2); } }
@media (max-width: 760px) {
  .sends, .never ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- price ---------- */

.pricegrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.tray { padding: 10px; border-radius: calc(var(--r-card) + 10px); background: var(--alu-2); }
.price { padding: clamp(22px, 3.4vw, 40px); border-radius: var(--r-card); background: var(--paper); }
.price__kind { font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); }
.price__num { display: flex; align-items: baseline; gap: 0.12em; margin-top: 2px; font-family: var(--font-key); font-weight: 700; line-height: 1; }
.price__num b { font-size: clamp(4.4rem, 3rem + 7vw, 7.5rem); letter-spacing: -0.04em; font-weight: 700; }
.price__num span { font-size: 1.5rem; }
.price__num--pre span { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem); align-self: center; }
.price__sub { margin-top: 14px; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 24px; border-block: 1px solid var(--line); }
.facts li { padding: 16px 12px 16px 0; }
.facts li + li { padding-left: 14px; border-left: 1px solid var(--line); }
.facts b { display: block; font-family: var(--font-key); font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.facts b small { font-size: 0.875rem; font-weight: 700; margin-left: 0.15em; }
.facts span { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
.price .cta .btn { flex: 1 1 13em; }

.env { display: grid; gap: 0; font-size: 0.9375rem; line-height: 1.7; }
.env > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.env > div:first-child { border-top: 1px solid var(--line); }
.env dt { font-weight: 800; }
.env dd small { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.env dd { color: var(--ink); }
.langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.langs li { padding: 1px 10px; border-radius: 99px; background: var(--paper); color: var(--ink); font-size: var(--fs-small); font-weight: 600; }
.env__title { font-size: 1.125rem; font-weight: 800; margin-bottom: 12px; }

@media (max-width: 900px) { .pricegrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
  .facts b { font-size: 1.5rem; }
  .facts li { padding-right: 6px; }
  .facts li + li { padding-left: 10px; }
  .env > div { grid-template-columns: 6.4rem minmax(0, 1fr); gap: 10px; }
  .env dt { font-size: 0.875rem; }
}

/* ---------- FAQ ---------- */

.faq { max-width: 50rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: center;
  padding-block: 18px; min-height: 44px;
  font-weight: 700; line-height: 1.55; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 12px; height: 12px; justify-self: center; margin-top: -6px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  rotate: 45deg; transition: rotate 0.2s, margin 0.2s;
}
.faq details[open] summary::after { rotate: -135deg; margin-top: 6px; }
.faq .a { padding: 0 40px 22px 0; color: var(--ink-2); max-width: 44em; }
.faq .a p + p { margin-top: 0.7em; }

@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- closing panel + footer in one ---------- */

.end {
  position: relative;
  margin: 0 clamp(8px, 1.6vw, 22px) clamp(8px, 1.6vw, 22px);
  padding-top: clamp(60px, 8.5vw, 120px);
  border-radius: var(--r-panel);
  background: var(--band);
  color: var(--band-ink);
  overflow: hidden; overflow: clip;
}
.end .h2 { color: rgb(243 243 241 / 0.5); max-width: 16em; }
.end .h2 b { color: var(--band-ink); }
.end .cta { margin-top: 30px; }
.end .btn { border-color: transparent; }
.end .btn:not(.btn--primary) { background: #2c2d33; color: var(--band-ink); box-shadow: 0 4px 0 #000; }
.end .btn:not(.btn--primary):active { box-shadow: 0 0 0 #000; }
.end .cta__note { color: rgb(243 243 241 / 0.6); }
.end .kari { color: var(--amber); }
.end :focus-visible { outline-color: #9fb0ff; }
.foot {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--fs-small);
}
.foot a { color: rgb(243 243 241 / 0.75); text-decoration: none; padding-block: 12px; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__c { margin-inline-start: auto; color: rgb(243 243 241 / 0.62); }
.wordmark {
  margin: clamp(10px, 2vw, 28px) 0 -0.2em;
  font-size: clamp(3.4rem, 15.4vw, 15rem);
  font-weight: 800; letter-spacing: -0.045em; line-height: 0.86;
  color: rgb(255 255 255 / 0.07);
  text-align: center; white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}

/* ---------- legal pages ---------- */

.doc { max-width: 46rem; padding-block: clamp(28px, 5vw, 64px) clamp(56px, 8vw, 104px); }
.doc h1 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.doc h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.45; margin-top: 2.4em; }
.doc h3 { font-size: 1.0625rem; font-weight: 800; margin-top: 1.6em; }
.doc p, .doc ul, .doc ol, .doc table { margin-top: 0.9em; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li + li { margin-top: 0.3em; }
.doc .note { color: var(--ink-2); font-size: 0.9375rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.7; }
.doc th, .doc td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc th { width: 11em; font-weight: 800; }
.doc tr:first-child th, .doc tr:first-child td { border-top: 1px solid var(--line); }
.doc thead th { width: auto; color: var(--ink-2); font-size: var(--fs-small); }
.doc code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; overflow-wrap: anywhere; }
.doc .back { display: inline-block; margin-top: 3em; font-weight: 700; }
.todo {
  padding: 0 0.4em; border-radius: 4px;
  background: rgb(242 194 48 / 0.3);
  font-weight: 700; font-size: 0.92em;
}
.docfoot { padding-block: 20px 40px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.docfoot a { color: inherit; padding-block: 10px; }

@media (max-width: 620px) {
  .doc table.kv, .doc table.kv tbody, .doc table.kv tr, .doc table.kv th, .doc table.kv td { display: block; width: auto; }
  .doc table.kv th { border-bottom: 0; padding-bottom: 0; }
  .doc table.kv tr:first-child td { border-top: 0; }
  .doc table.kv td { padding-top: 2px; }
  .doc .scroll { overflow-x: auto; }
  .doc .scroll table { min-width: 520px; }
}

/* ---------- reduced motion: nothing moves on its own ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}