/* getblister.com · the app's Silver art direction. 4-point scale throughout. */

:root {
  --bg-top: #e8eaee;
  --bg-bottom: #d2d5da;
  --surface: #f7f8fa;
  --ink: #16181b;
  --ink-soft: #4b5058;
  --ink-faint: #6b717a;
  --line: rgb(0 0 0 / 0.08);
  --accent: #2b2f35;
  --accent-ink: #ffffff;
  --low: #d9822b;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px rgb(0 0 0 / 0.08);
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Hiragino Maru Gothic ProN", "Apple SD Gothic Neo", "PingFang SC", "Nunito", sans-serif;
  --page: 1120px;
  --gutter: max(16px, calc((100vw - var(--page)) / 2));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-top: #1d1f23;
    --bg-bottom: #111214;
    --surface: #24262b;
    --ink: #f2f3f5;
    --ink-soft: #c2c6cc;
    --ink-faint: #949aa3;
    --line: rgb(255 255 255 / 0.08);
    --accent: #eceef1;
    --accent-ink: #16181b;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  interpolate-size: allow-keywords;
  scrollbar-color: color-mix(in srgb, var(--ink) 24%, transparent) transparent;
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  background: linear-gradient(var(--bg-top), var(--bg-bottom)) fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }

a { color: inherit; text-underline-offset: 4px; -webkit-user-drag: none; }
img { max-width: 100%; display: block; -webkit-user-drag: none; }
h1, h2, h3 { line-height: 1.08; text-wrap: balance; margin: 0; font-weight: 800; letter-spacing: -0.02em; }
p { text-wrap: pretty; margin: 0; }
button, summary, .button { user-select: none; -webkit-user-select: none; }

:focus { outline: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 4px; border-radius: 8px; }

/* Navigation */

.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--bg-top) 80%, transparent);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; text-decoration: none; }
.brand img { border-radius: 8px; outline: 1px solid rgb(0 0 0 / 0.1); outline-offset: -1px; }
.nav nav { display: flex; gap: 24px; margin-left: auto; font-size: 16px; font-weight: 700; }
.nav nav a { text-decoration: none; color: var(--ink-soft); transition: color 150ms ease-out; }
@media (hover: hover) { .nav nav a:hover { color: var(--ink); } }

/* Language menu: details/summary, so it's keyboard reachable without a native select. */
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 12px 0 16px; border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 16px; font-weight: 700; line-height: 1;
}
.lang summary::-webkit-details-marker { display: none; }
.chevron { width: 16px; height: 16px; flex: none; transition: rotate 200ms cubic-bezier(0.2, 0, 0, 1); }
.lang[open] .chevron, .qa[open] .chevron { rotate: 180deg; }
.lang ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  margin: 0; padding: 8px; list-style: none; min-width: 220px;
  background: var(--surface); border-radius: 20px; box-shadow: var(--shadow);
}
.lang.is-up ul { top: auto; bottom: calc(100% + 8px); }
.lang[open] ul { transition: opacity 150ms ease-out, translate 150ms cubic-bezier(0.2, 0, 0, 1); }
@starting-style { .lang[open] ul { opacity: 0; translate: 0 -4px; } }
.lang li a {
  display: block; padding: 8px 12px; border-radius: 12px;
  text-decoration: none; font-weight: 600; color: var(--ink-soft);
}
.lang li a[aria-current] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (hover: hover) { .lang li a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } }

@media (max-width: 640px) {
  .hero { padding-top: 40px; }
  .hero-icon { width: 112px; height: 112px; border-radius: 24px; }
  .hero h1 { margin-top: 24px; }
  .nav { flex-wrap: wrap; gap: 8px 16px; }
  .nav nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .nav .lang { margin-left: auto; }
}

/* Hero: icon, headline, then the phone you can play with. */

main { padding: 0 var(--gutter); }

.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 0 32px;
}
.hero-icon {
  width: 144px; height: 144px; border-radius: 32px;
  outline: 1px solid rgb(0 0 0 / 0.1); outline-offset: -1px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 24px 48px rgb(0 0 0 / 0.16);
}
.hero h1 { margin-top: 32px; font-size: clamp(48px, 8vw, 88px); max-width: 12ch; letter-spacing: -0.035em; }
.lede { font-size: 20px; color: var(--ink-soft); margin-top: 20px; max-width: 36ch; }
.hero .lede { font-size: clamp(20px, 2.2vw, 24px); }
.actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.note { margin-top: 16px; font-size: 16px; color: var(--ink-faint); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 28px; border-radius: 28px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 20px; font-weight: 800; line-height: 1; text-decoration: none;
  transition: scale 150ms cubic-bezier(0.2, 0, 0, 1);
}
.button:active { scale: 0.96; }
.button.is-soon { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.app-store-badge { display: inline-flex; line-height: 0; transition: scale 150ms cubic-bezier(0.2, 0, 0, 1); }
.app-store-badge:active { scale: 0.96; }
.app-store-badge img { display: block; width: auto; }
.app-store-badge.is-hero img { height: 54px; }
.app-store-badge.is-footer img { height: 40px; }
.app-store-badge.is-support img { height: 48px; }

.hero-stage { margin-top: 56px; display: flex; flex-direction: column; align-items: center; width: 100%; }
.demo-hint {
  margin-top: 24px; height: 40px; padding: 0 16px; border-radius: 20px;
  display: inline-flex; align-items: center;
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 16px; font-weight: 700; line-height: 1; color: var(--ink-soft);
}

/* The live device: an HTML screen under Apple's bezel. --u is one app point. */

.device { position: relative; width: min(368px, 84vw); aspect-ratio: 1470 / 3000; filter: drop-shadow(0 32px 48px rgb(0 0 0 / 0.22)); }
.device .bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.screen {
  position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%;
  border-radius: 14.09% / 6.485%;
  overflow: hidden; container-type: inline-size;
  background: linear-gradient(#e6e8ec, #cdd0d6);
  color: #16181b; text-align: left;
}
.screen > * { --u: calc(100cqw / 440); }
.screen { font-variant-numeric: tabular-nums; }
.demo-status {
  height: calc(var(--u) * 54); padding: calc(var(--u) * 20) calc(var(--u) * 30) 0 calc(var(--u) * 50);
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: calc(var(--u) * 17); font-weight: 700; line-height: 1;
}
.demo-status svg { width: calc(var(--u) * 72); height: calc(var(--u) * 18); }
.demo-bar { display: flex; justify-content: space-between; padding: calc(var(--u) * 6) calc(var(--u) * 16) 0; }
.demo-round {
  width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(255 255 255 / 0.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 1px 2px rgb(0 0 0 / 0.08);
}
.demo-round .icon { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.demo-head {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 8) calc(var(--u) * 24) 0;
}
.demo-name { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 30); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.demo-dot { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #c9bc9c; flex: none; }
.demo-ring { position: relative; width: calc(var(--u) * 76); height: calc(var(--u) * 76); flex: none; }
.demo-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.demo-ring circle { fill: none; stroke-width: 6; }
.demo-ring-track { stroke: rgb(0 0 0 / 0.08); }
.demo-ring-fill { stroke: rgb(22 24 27 / 0.75); stroke-linecap: round; transition: stroke-dashoffset 450ms cubic-bezier(0.2, 0, 0, 1), stroke 200ms ease-out; }
.demo-ring p { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.demo-count { font-size: calc(var(--u) * 24); font-weight: 800; }
.demo-of { font-size: calc(var(--u) * 13); font-weight: 700; color: #6b717a; align-self: center; margin-top: calc(var(--u) * 6); }
.is-low .demo-ring-fill { stroke: var(--low); }
.is-low .demo-count { color: var(--low); }
.demo-line {
  margin: calc(var(--u) * 12) calc(var(--u) * 24) 0;
  height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 18);
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8);
  background: rgb(247 248 250 / 0.7);
  font-size: calc(var(--u) * 15); font-weight: 700; white-space: nowrap;
}
.demo-muted { color: #6b717a; }
.demo-low { color: var(--low); }

.demo-card {
  margin: calc(var(--u) * 12) calc(var(--u) * 24) 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22);
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, #e9ebee, #c9ccd1 45%, #e3e5e8 60%, #b9bdc3);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 calc(var(--u) * 14) calc(var(--u) * 22) rgb(0 0 0 / 0.16);
}
/* Pyramid knurl, four lit facets per diamond. */
.demo-card::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  background-image: conic-gradient(from -45deg, rgb(255 255 255 / 0.55) 0 90deg, rgb(0 0 0 / 0.1) 0 180deg, rgb(0 0 0 / 0.24) 0 270deg, rgb(255 255 255 / 0.12) 0 360deg);
  background-size: calc(var(--u) * 7.4) calc(var(--u) * 7.4);
  rotate: 45deg; opacity: 0.6;
}
/* Perforated score line between the columns. */
.demo-card::after {
  content: ""; position: absolute; top: calc(var(--u) * 10); bottom: calc(var(--u) * 10); left: calc(50% - 0.5px); width: 1px; z-index: -1;
  background: repeating-linear-gradient(#a6aab1 0 2px, transparent 2px 7px);
}
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 18); row-gap: calc(var(--u) * 10); }

.demo-cell {
  position: relative; aspect-ratio: 7 / 4; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
  transition: scale 250ms cubic-bezier(0.2, 0, 0, 1);
}
.demo-cell:active { scale: 0.93; }
.demo-cell:focus-visible { outline-offset: 0; border-radius: calc(var(--u) * 40); }
.demo-full, .demo-open { position: absolute; inset: 10% 5%; border-radius: 999px; }
/* Full: pressed rim, ivory tablet, clear dome. */
.demo-full {
  background: rgb(202 205 210 / 0.5);
  box-shadow: inset 0 calc(var(--u) * 2.5) 0 #a6aab1, inset 0 calc(var(--u) * -2.5) 0 #fff;
  transition: opacity 200ms ease-out;
}
.demo-pill {
  position: absolute; left: 8.9%; right: 8.9%; top: 13.75%; bottom: 13.75%; border-radius: 999px;
  background: linear-gradient(#f5f1e7, #d9d2c2);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 1.5) rgb(0 0 0 / 0.18), inset 0 0 0 0.5px rgb(0 0 0 / 0.08);
}
.demo-pill::before { content: ""; position: absolute; left: 16%; right: 16%; top: 10%; height: 14%; border-radius: 999px; background: rgb(255 255 255 / 0.75); filter: blur(1px); }
.demo-pill::after { content: ""; position: absolute; left: calc(50% - 0.5px); top: 16%; bottom: 16%; width: 1px; background: rgb(217 210 194 / 0.95); }
.demo-dome {
  position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.06) 50%, rgb(255 255 255 / 0.22));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 calc(var(--u) * 2) calc(var(--u) * 3) rgb(0 0 0 / 0.14);
}
/* Open: grey hollow, torn foil edge, flap and the stamp. */
.demo-open {
  opacity: 0;
  background: linear-gradient(#9ea3ab, #c4c8ce);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  transition: opacity 200ms ease-out;
}
.demo-torn { position: absolute; inset: -3%; width: 106%; height: 106%; overflow: visible; }
.demo-torn polygon { fill: none; stroke: rgb(255 255 255 / 0.95); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.demo-flap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.25)); }
.demo-flap path { fill: #e3e5e8; stroke: rgb(255 255 255 / 0.8); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.demo-stamp {
  position: absolute; inset: 0; padding-top: 6%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #4b5058; line-height: 1.05; white-space: nowrap;
}
.demo-day { font-size: calc(var(--u) * 9); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.demo-time { font-size: calc(var(--u) * 11.5); font-weight: 800; }
.is-taken .demo-full { opacity: 0; }
.is-taken .demo-open { opacity: 1; }
/* Pop: the tablet pushes up through the foil, tumbling and fading. */
.is-taken.pop .demo-full { animation: pop-out 550ms cubic-bezier(0.2, 0, 0, 1); }
.is-taken.pop .demo-full .demo-dome { opacity: 0; }
@keyframes pop-out {
  0% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; filter: blur(0); }
  100% { opacity: 0; translate: 0 calc(var(--u) * -60); rotate: 14deg; scale: 1.25; filter: blur(2px); }
}
.drop .demo-full { animation: drop-in 450ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes drop-in { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .demo-cell, .demo-full, .demo-open { transition-duration: 1ms; }
  .demo-full { animation: none !important; }
}

.demo-dots { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 40); display: flex; justify-content: center; gap: calc(var(--u) * 6); }
.demo-dots i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 999px; background: rgb(0 0 0 / 0.2); }
.demo-dots i.on { width: calc(var(--u) * 18); background: #16181b; }

/* Feature rows: copy beside a framed screen, alternating sides. */

.rows { display: grid; gap: 96px; padding: 96px 0 48px; }
.row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.row.is-flipped .row-copy { order: 2; }
.row h2 { font-size: clamp(36px, 4.4vw, 56px); }
.row-lede { margin-top: 20px; font-size: 20px; color: var(--ink-soft); max-width: 32ch; }
.row-more { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 36ch; }
.row-more h3 { font-size: 20px; }
.row-more p { margin-top: 8px; color: var(--ink-soft); }
/* Each screen stands in a silver card and runs off its bottom edge, like a phone in a tray. */
.row-shot {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start;
  height: 600px; padding-top: 56px; border-radius: 40px;
  background: linear-gradient(160deg, #f1f2f4, #cfd2d7 55%, #bfc3c9);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7), var(--shadow);
}
.row-shot::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  background-image: conic-gradient(from -45deg, rgb(255 255 255 / 0.5) 0 90deg, rgb(0 0 0 / 0.08) 0 180deg, rgb(0 0 0 / 0.18) 0 270deg, rgb(255 255 255 / 0.12) 0 360deg);
  background-size: 12px 12px; rotate: 45deg; opacity: 0.3;
}
.framed { width: 320px; max-width: 76%; height: auto; aspect-ratio: 736 / 1502; object-fit: cover; filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.24)); }
@media (max-width: 860px) {
  .rows { gap: 72px; padding-top: 64px; }
  .row { grid-template-columns: 1fr; gap: 32px; }
  .row-shot { height: 480px; padding-top: 40px; border-radius: 32px; }
  .row.is-flipped .row-copy { order: 0; }
}

/* Silver plate: the brand surface, used once. */

.plate {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 32px; padding: 48px;
  background: linear-gradient(135deg, #eef0f3, #cdd0d5 50%, #b9bdc3);
  color: #16181b; box-shadow: var(--shadow);
}
.plate::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  background-image: conic-gradient(from -45deg, rgb(255 255 255 / 0.5) 0 90deg, rgb(0 0 0 / 0.08) 0 180deg, rgb(0 0 0 / 0.18) 0 270deg, rgb(255 255 255 / 0.12) 0 360deg);
  background-size: 12px 12px; rotate: 45deg; opacity: 0.35;
}
.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 48px 0; }
.extras h3 { font-size: 24px; }
.extras p { margin-top: 12px; color: #31353b; }
@media (max-width: 860px) { .extras { grid-template-columns: 1fr; gap: 32px; padding: 32px; } }
/* Same silver as the PRO plate, without the sweep: a quiet note, not a call to action. */
.extras .pro-tag {
  display: inline-flex; align-items: center; min-height: 24px; margin-top: 12px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; line-height: 1.25; color: #3d424a;
  background: linear-gradient(135deg, #f4f5f7, #c3c7cd 40%, #e9ebee 60%, #a9aeb5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 1px 1px rgb(0 0 0 / 0.12);
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.8);
}

/* Works with Apple Health lockup: white badge, black rule, at least 30px tall,
   with a quarter of its height as clear space on a warm mat. */
.ah-mat {
  --ah-h: 36px;
  display: inline-flex; margin-top: 20px; padding: calc(var(--ah-h) / 4);
  border-radius: calc(var(--ah-h) / 4 + 8px); background: #faf8f5;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.08);
}
.ah-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--ah-h); min-height: 30px; padding: 0 10px 0 5px; border-radius: 8px;
  background: #ffffff; border: 1px solid #000000; color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Hiragino Sans", "Apple SD Gothic Neo", "PingFang SC", sans-serif;
  letter-spacing: normal; white-space: nowrap; user-select: none; -webkit-user-select: none;
}
.ah-icon { width: 24px; height: 24px; flex: none; }
.ah-lockup { display: flex; flex-direction: column; line-height: 1.1; }
.ah-pre { font-size: 10px; font-weight: 500; }
.ah-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }

/* Pricing */

.pricing { padding: 96px 0 48px; text-align: center; }
.pricing h2, .faq h2 { font-size: clamp(36px, 4.4vw, 56px); }
.section-lede { margin: 16px auto 40px; font-size: 20px; color: var(--ink-soft); max-width: 36ch; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); gap: 16px; justify-content: center; text-align: left; }
.plan { background: var(--surface); border-radius: 28px; padding: 32px; box-shadow: var(--shadow); }
.plan h3 { font-size: 24px; display: flex; align-items: center; gap: 12px; }
.plan .price { margin-top: 16px; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan .price-alt { margin-top: 4px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.plan ul { margin: 20px 0 0; padding-left: 20px; color: var(--ink-soft); display: grid; gap: 8px; }
.plan.is-pro { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.pricing .fine { margin-top: 24px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* Silver PRO plate with a slow light sweep, as in the app. */
.pro-badge {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; color: #3d424a;
  background: linear-gradient(135deg, #f4f5f7, #c3c7cd 40%, #e9ebee 60%, #a9aeb5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 1px 1px rgb(0 0 0 / 0.12);
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.8);
}
.pro-badge::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; left: -60%; width: 44%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.9), transparent);
  transform: skewX(-20deg);
  animation: sweep 3.6s cubic-bezier(0.2, 0, 0, 1) infinite;
}
@keyframes sweep { 0% { left: -60%; } 32%, 100% { left: 132%; } }
@media (prefers-reduced-motion: reduce) { .pro-badge::after { display: none; } }

/* Compare: an answer capsule, then the table on a surface card. The Pro column carries a faint tint. */

.compare { padding: 48px 0; }
.compare h2 { font-size: clamp(36px, 4.4vw, 56px); text-align: center; max-width: 20ch; margin: 0 auto; }
.answer-capsule { margin: 20px auto 40px; font-size: 18px; color: var(--ink-soft); max-width: 60ch; text-align: center; }
.compare-scroll {
  overflow-x: auto; border-radius: 28px;
  background: var(--surface); box-shadow: var(--shadow);
  scrollbar-width: thin;
}
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; font-size: 16px; font-variant-numeric: tabular-nums; }
.compare-table caption { caption-side: bottom; padding: 16px 24px 20px; text-align: left; font-size: 12px; color: var(--ink-faint); border-top: 1px solid var(--line); }
/* The caption is as wide as the table; pin its text to the visible part of the scroller. */
.compare-table caption span { display: block; position: sticky; left: 24px; max-width: calc(100vw - 2 * var(--gutter) - 48px); }
.compare-table th, .compare-table td { padding: 16px 20px; vertical-align: top; }
.compare-table thead th { padding-top: 24px; font-size: 16px; font-weight: 800; line-height: 1.25; vertical-align: bottom; border-bottom: 1px solid var(--line); }
.compare-sub { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.compare-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.compare-table tbody th { width: 22%; font-weight: 800; line-height: 1.3; }
.compare-table td { color: var(--ink-soft); line-height: 1.4; }
.compare-table :is(th, td):nth-child(3) { background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--ink); }
.compare-table td:nth-child(4) { color: var(--ink-faint); }
.compare-table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); padding-left: 24px; }
.compare-table :is(th, td):last-child { padding-right: 24px; }

/* FAQ: rows that grow and shrink with their content. */

.faq { padding: 48px 0 96px; max-width: 760px; margin: 0 auto; }
.faq h2 { margin-bottom: 32px; text-align: center; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; font-size: 20px; font-weight: 800;
}
.qa summary::-webkit-details-marker { display: none; }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size 250ms cubic-bezier(0.2, 0, 0, 1), content-visibility 250ms allow-discrete; }
.qa[open]::details-content { block-size: auto; }
.qa-body p { padding-bottom: 20px; color: var(--ink-soft); font-size: 16px; max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .qa::details-content { transition: none; } }

/* Documents */

.doc { max-width: 760px; margin: 0 auto; padding-top: 56px; padding-bottom: 96px; }
.doc article { background: var(--surface); border-radius: 32px; padding: clamp(24px, 6vw, 56px); box-shadow: var(--shadow); }
.doc h1 { font-size: clamp(36px, 5vw, 48px); margin-bottom: 20px; }
.doc h2 { font-size: 24px; margin: 36px 0 12px; }
.doc p, .doc li { color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 24px; display: grid; gap: 8px; margin: 12px 0; }
.doc .lede { margin-top: 8px; }
.doc .button { margin-top: 24px; }
.doc .back { display: inline-block; margin-top: 32px; font-weight: 700; color: var(--ink); }
.updated, .prevails { font-size: 16px; color: var(--ink-faint); margin-top: 32px; }

/* Footer */

.footer { padding: 40px var(--gutter) 56px; border-top: 1px solid var(--line); }
.footer-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; font-weight: 700; }
.footer-links a { text-decoration: none; color: var(--ink-soft); }
@media (hover: hover) { .footer-links a:hover { color: var(--ink); } }
.footer .lang { margin-left: auto; }
.fine { font-size: 12px; color: var(--ink-faint); margin-top: 24px; }

/* CJK: break between phrases, not inside words. */
:lang(ja) :is(h1, h2, h3), :lang(zh-Hans) :is(h1, h2, h3) { word-break: auto-phrase; line-break: strict; }
:lang(ko) :is(h1, h2, h3, p, th, td) { word-break: keep-all; }