/* שבע GLP landing page. Tokens mirror design/tokens/theme.ts (C2 "Graphite & Citron").
   No inline styles or scripts (strict CSP in _headers). Logical properties throughout (RTL). */

@font-face { font-family: "Assistant"; src: url("/assets/fonts/assistant-400Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Assistant"; src: url("/assets/fonts/assistant-500Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Assistant"; src: url("/assets/fonts/assistant-600SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Assistant"; src: url("/assets/fonts/assistant-700Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/intertight-500Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/intertight-600SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/intertight-700Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* palette */
  --stone: #EBEBE7;
  --white: #FFFFFF;
  --graphite: #15161A;
  --citron: #FFE53B;
  --citron-light: #FFEA57;
  --citron-deep: #FDDF2A;
  --sheet: #F6F6F3;
  --glyph: #F1F1EE;
  --graphite-top: #1C1D22;
  --graphite-bottom: #131418;
  --graphite-sheen: #2B2D33;
  --text: #15161A;
  --text-2: #4A4C52;
  --text-3: #5B5D63;
  --text-legal: #26282D;
  --on-dark: rgba(255, 255, 255, .96);
  --on-dark-2: #B8BAC0;
  --on-dark-3: rgba(255, 255, 255, .86);
  --hairline: rgba(21, 22, 26, .08);
  --seg-track: rgba(118, 118, 128, .12);
  --disabled-bg: #DCDCD7;
  --disabled-text: #6B6D73;
  --water: #2E90FA;
  --protein: #FF8A3D;
  --sev-1: #8F7CF7;
  --sev-2: #B9A6FF;
  --sev-3: #E9E1FF;

  /* type */
  --font-he: "Assistant", "Noto Sans Hebrew", "Arial Hebrew", system-ui, -apple-system, sans-serif;
  --font-num: "Inter Tight", "Assistant", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* shape */
  --r-card: 28px;
  --r-panel: clamp(28px, 4vw, 52px);
  --gutter: clamp(10px, 1.6vw, 20px);
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1240px;

  /* shadows */
  --sh-card: 0 1px 1px rgba(21,22,26,.04), 0 4px 12px -2px rgba(21,22,26,.05), 0 16px 32px -12px rgba(21,22,26,.10);
  --sh-seg: 0 1px 1px rgba(21,22,26,.04), 0 3px 8px rgba(21,22,26,.12);
  --sh-graphite: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 4px rgba(12,13,16,.10), 0 12px 24px -8px rgba(12,13,16,.22), 0 32px 48px -24px rgba(12,13,16,.30);
  --sh-glass: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45), 0 1px 2px rgba(21,22,26,.05), 0 6px 20px -8px rgba(21,22,26,.14);
  --sh-cta: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(160,120,0,.18), 0 1px 2px rgba(120,90,0,.18), 0 8px 20px -6px rgba(230,180,0,.40);

  /* motion (theme.ts motion + springs as CSS linear(), generated from response/dampingFraction) */
  --out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --press: cubic-bezier(0.2, 0, 0, 1);
  --spring-ring: linear(0, 0.0318, 0.0991, 0.1986, 0.3112, 0.4163, 0.528, 0.6309, 0.7143, 0.7935, 0.8593, 0.9081, 0.9504, 0.9797, 1.0033, 1.0194, 1.0286, 1.0342, 1.0362, 1.0357, 1.0334, 1.03, 1.0263, 1.0222, 1.0181, 1.0146, 1.0111, 1.0081, 1.0058, 1.0038, 1.0021, 1.001, 1.0001, 0.9995, 0.999, 0.9988, 0.9987, 0.9987, 0.9988, 0.9989, 1);
  --spring-release: linear(0, 0.0389, 0.1279, 0.2446, 0.3721, 0.4987, 0.6162, 0.7201, 0.8079, 0.8794, 0.9351, 0.9767, 1.006, 1.0253, 1.0366, 1.0417, 1.0424, 1.0401, 1.036, 1.0308, 1.0254, 1.02, 1.0152, 1.0109, 1.0073, 1.0045, 1.0023, 1.0006, 0.9995, 0.9988, 0.9984, 0.9982, 0.9982, 0.9983, 0.9985, 0.9987, 0.999, 0.9992, 0.9994, 0.9996, 1);
  --spring-sheet: linear(0, 0.0248, 0.075, 0.1506, 0.2369, 0.3267, 0.4151, 0.4898, 0.5676, 0.6378, 0.7, 0.7485, 0.7959, 0.8361, 0.8664, 0.8951, 0.9186, 0.9378, 0.9517, 0.9643, 0.9742, 0.9819, 0.9878, 0.9918, 0.9952, 0.9977, 0.9995, 1.0006, 1.0014, 1.0019, 1.0021, 1.0022, 1.0021, 1.002, 1.0019, 1.0017, 1.0015, 1.0013, 1.0011, 1.001, 1);
  --spring-tab: linear(0, 0.0285, 0.0935, 0.168, 0.2627, 0.36, 0.4543, 0.5316, 0.6122, 0.6835, 0.7453, 0.798, 0.8371, 0.8745, 0.9049, 0.9295, 0.9467, 0.9624, 0.9744, 0.9836, 0.9896, 0.9947, 0.9983, 1.0007, 1.0023, 1.0031, 1.0036, 1.0038, 1.0037, 1.0035, 1.0032, 1.0028, 1.0025, 1.0021, 1.0018, 1.0015, 1.0012, 1.001, 1.0008, 1.0006, 1);
  --spring-toggle: linear(0, 0.0304, 0.0879, 0.1771, 0.2782, 0.3821, 0.4687, 0.5632, 0.6484, 0.7231, 0.7785, 0.8334, 0.8785, 0.9148, 0.9397, 0.9625, 0.9796, 0.9921, 0.9998, 1.006, 1.0099, 1.0119, 1.0127, 1.0126, 1.012, 1.011, 1.0099, 1.0086, 1.0073, 1.006, 1.0051, 1.004, 1.0031, 1.0024, 1.0018, 1.0013, 1.0009, 1.0006, 1.0004, 1.0002, 1);
  --t-ring: 710ms;
  --t-release: 533ms;
  --t-sheet: 583ms;
  --t-tab: 518ms;
  --t-toggle: 450ms;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--stone);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--stone);
  color: var(--text);
  font-family: var(--font-he);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--citron); color: var(--graphite); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: -999rem; top: 12px; z-index: 100; background: var(--citron); color: var(--graphite); padding: 12px 20px; border-radius: 16px; font-weight: 700; }
.skip:focus { inset-inline-start: 12px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; unicode-bidi: isolate; }
.latin { font-family: var(--font-num); font-weight: 600; letter-spacing: -0.01em; }
.nowrap { white-space: nowrap; }
.ico { width: 1em; height: 1em; flex: none; }

:focus-visible { outline: 3px solid var(--citron); outline-offset: 3px; border-radius: 12px; }
.panel-citron :focus-visible, .feel :focus-visible, .privacy :focus-visible, .faq :focus-visible, .week :focus-visible { outline-color: var(--graphite); }

/* ───────── Type scale ───────── */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--text-2); margin-block-end: 18px; }
.eyebrow::before { content: ""; width: 22px; height: 6px; border-radius: 3px; background: var(--citron); box-shadow: 0 0 0 1px rgba(21,22,26,.12); }
.eyebrow-dark { color: var(--on-dark-2); }
.eyebrow-dark::before { box-shadow: 0 0 14px rgba(255,229,59,.5); }
.eyebrow-ink { color: var(--graphite); }
.eyebrow-ink::before { background: var(--graphite); box-shadow: none; }
.h2 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.h2 em { font-style: normal; color: var(--citron); }
.h3 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.h4 { font-size: 22px; line-height: 1.25; font-weight: 700; }
.lead { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5; color: var(--text-2); margin-block-start: 20px; max-width: 34ch; text-wrap: pretty; }
.section-head-dark .lead, .panel-dark .lead { color: var(--on-dark-2); }
.fine { font-size: 16px; color: var(--text-3); margin-block-start: 20px; font-weight: 600; }
.cap { font-size: 16px; line-height: 1.35; color: var(--text-3); font-weight: 600; }

.section-head-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-head-center .lead { max-width: 40ch; }

/* ───────── Buttons ───────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding-inline: 28px; border-radius: 28px; border: 0;
  font-size: 20px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform 120ms var(--press), box-shadow 200ms ease, background-color 200ms ease, filter 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn-citron {
  color: var(--graphite);
  background: linear-gradient(180deg, var(--citron-light), var(--citron) 60%, var(--citron-deep));
  box-shadow: var(--sh-cta);
}
.btn-citron:hover { filter: brightness(1.04); box-shadow: var(--sh-cta), 0 14px 30px -10px rgba(230,180,0,.55); }
.btn-ghost-dark { color: var(--on-dark); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.1); }
.btn-lg { min-height: 64px; padding-inline: 34px; border-radius: 32px; font-size: 21px; }
.btn-sm { min-height: 48px; padding-inline: 22px; border-radius: 24px; font-size: 18px; }
.btn-sm::after { content: ""; position: absolute; inset: -4px; }
.btn[aria-disabled="true"] { cursor: default; }
.btn .ico { font-size: 22px; }

/* ───────── Nav (glass capsule, like the app's tab bar) ───────── */
.nav {
  position: fixed; z-index: 50;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  inset-inline: 12px;
  display: flex; justify-content: center;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  width: 100%; max-width: 1180px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding-inline: 10px 8px; padding-block: 8px;
  border-radius: 32px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--sh-glass);
  transition: transform 450ms var(--out-expo), background-color 300ms ease;
}
.nav.is-hidden .nav-inner { transform: translateY(calc(-100% - 24px)); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px; padding-inline: 6px; border-radius: 24px; }
.brand-icon { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(21,22,26,.08), 0 4px 10px -4px rgba(21,22,26,.3); }
.brand-name { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 48px; padding-inline: 16px; border-radius: 24px;
  font-size: 17px; font-weight: 600; color: var(--text-2); text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.nav-links a:hover { background: rgba(21,22,26,.06); color: var(--text); }
.nav-links a.is-current { background: rgba(21,22,26,.07); color: var(--text); font-weight: 700; }
@media (max-width: 900px) { .nav-links { display: none; } }

/* ───────── Panels ───────── */
.panel {
  position: relative;
  margin-inline: var(--gutter);
  border-radius: var(--r-panel);
  padding-block: clamp(80px, 10vw, 150px);
  padding-inline: var(--pad);
  isolation: isolate;
  overflow: clip;
}
.panel-dark {
  color: var(--on-dark);
  background:
    radial-gradient(1100px 620px at 12% -8%, var(--graphite-sheen), transparent 62%),
    linear-gradient(180deg, var(--graphite-top), var(--graphite-bottom));
  box-shadow: var(--sh-graphite);
}
.panel-dark::before, .grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/img/grain.2c86e1e5.png") repeat;
  background-size: 180px;
  opacity: .22; mix-blend-mode: overlay; border-radius: inherit;
}
[data-spotlight]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, -20%), rgba(255,229,59,.075), transparent 60%);
  transition: opacity 400ms ease;
}
.panel-citron { color: var(--graphite); background: linear-gradient(160deg, var(--citron-light), var(--citron) 55%, var(--citron-deep)); }
.panel + .panel, section + .panel, .panel + section { margin-block-start: var(--gutter); }

.split {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; gap: clamp(40px, 6vw, 96px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
.split-rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split-rev > :first-child { order: 2; }
@media (max-width: 980px) {
  .split, .split-rev { grid-template-columns: minmax(0, 1fr); }
  .split-rev > :first-child { order: 0; }
}

/* ───────── Hero ───────── */
.hero {
  margin-block-start: var(--gutter);
  padding-block: clamp(120px, 14vh, 170px) clamp(56px, 8vw, 110px);
  min-height: min(100svh, 1040px);
  display: flex; align-items: center;
}
.hero-ring {
  position: absolute; z-index: -1; max-width: none;
  width: min(130vmin, 1300px); aspect-ratio: 1;
  inset-inline-end: -28vmin; top: 50%;
  margin-top: calc(min(130vmin, 1300px) / -2);
  translate: var(--px, 0px) var(--py, 0px);
  animation: spin 160s linear infinite;
}
.hero-ring use { fill: none; stroke: var(--citron); stroke-width: 9; stroke-linecap: round; opacity: .05; }
.hero-ring use:first-of-type { opacity: .2; }
@keyframes spin { to { rotate: 360deg; } }

.hero-grid {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  display: grid; align-items: center; gap: clamp(48px, 5vw, 88px);
  grid-template-columns: minmax(0, 1fr) auto;
}
.hero-title-row { position: relative; width: fit-content; max-width: 100%; }
.hero-title {
  font-size: clamp(54px, 7.4vw, 108px);
  line-height: .98; font-weight: 700; letter-spacing: -0.028em;
}
.hero-title em { font-style: normal; color: var(--citron); text-shadow: 0 0 40px rgba(255,229,59,.25); }
.hero-title .w { display: inline-block; }
.sheva {
  position: absolute; inset-inline-end: calc(-1 * clamp(84px, 9vw, 132px) - 20px); top: -6px;
  width: clamp(84px, 9vw, 132px); height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
.sheva-today { transform-origin: 157px 43px; transform-box: view-box; translate: 5px -10px; rotate: 14deg; animation: wave 3.2s var(--out-expo) 1.2s infinite; }
@keyframes wave {
  0%, 60%, 100% { rotate: 14deg; translate: 5px -10px; }
  15% { rotate: 26deg; translate: 9px -16px; }
  30% { rotate: 8deg; translate: 3px -8px; }
  45% { rotate: 18deg; translate: 6px -12px; }
}
.sheva-face { transform-box: view-box; transform-origin: 120px 120px; rotate: -6deg; transition: translate 240ms var(--out-expo); }
.sheva-eyes { transform-box: view-box; transform-origin: 120px 112px; animation: blink 5.2s infinite; }
@keyframes blink { 0%, 94%, 100% { scale: 1 1; } 96.5% { scale: 1 .1; } }
.hero-sub { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.45; color: var(--on-dark-2); margin-block-start: 28px; max-width: 30ch; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 36px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 32px; }
.hero-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding-inline: 16px; border-radius: 22px;
  font-size: 17px; font-weight: 600; color: var(--on-dark-3);
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.hero-chips .ico { color: var(--citron); font-size: 18px; }

.hero-phone { position: relative; display: flex; flex-direction: column; align-items: center; }
.try-hint {
  position: absolute; z-index: 2;
  inset-inline-end: calc(100% + 14px); top: 31%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  color: var(--citron); font-size: 20px; font-weight: 700; white-space: nowrap;
  transition: opacity 400ms ease, translate 400ms var(--out-expo);
  rotate: -6deg;
}
.try-hint svg { width: 70px; height: 52px; margin-inline-start: 34px; }
.try-hint.is-gone { opacity: 0; translate: 0 10px; pointer-events: none; }
@media (max-width: 1100px) { .try-hint { display: none; } }
.phone-caption {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 16px;
  margin-block-start: 18px; font-size: 16px; font-weight: 600; color: var(--on-dark-2); min-height: 56px;
}
.link-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding-inline: 16px; border-radius: 28px;
  border: 0; background: rgba(255,255,255,.08); color: var(--on-dark); font-size: 17px; font-weight: 700;
}
.link-btn:hover { background: rgba(255,255,255,.14); }

@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-ring { inset-inline-end: -50vmin; top: 22%; }
}
@media (max-width: 560px) {
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-title-row { width: auto; }
  .sheva { top: auto; bottom: calc(100% + 30px); inset-inline-start: auto; inset-inline-end: 0; width: 68px; }
  .hero .eyebrow { max-width: calc(100% - 84px); }
  .hero { padding-block-start: 160px; }
}

/* ───────── Phone shell (live demo) — designed at 430×932 pt, scaled with --k ───────── */
.phone {
  --k: .78;
  position: relative;
  width: min(380px, 84vw, calc((100svh - 190px) * 458 / 960));
  min-width: 260px;
  aspect-ratio: 458 / 960;
  filter: drop-shadow(0 50px 60px rgba(0,0,0,.45)) drop-shadow(0 12px 18px rgba(0,0,0,.35));
}
.phone-root {
  position: absolute; top: 0; left: 0;
  width: 458px; height: 960px; padding: 14px;
  border-radius: 78px;
  background: linear-gradient(145deg, #3a3c43, #0d0e11 30%, #0b0c0f 70%, #2c2e34);
  box-shadow: inset 0 0 0 2px #45474e, inset 0 0 0 5px #0a0b0d;
  transform: scale(var(--k)); transform-origin: 0 0;
}
.phone-screen {
  position: relative; width: 430px; height: 932px; overflow: hidden;
  border-radius: 64px; background: var(--stone); color: var(--text);
  direction: rtl; text-align: start; font-size: 20px; line-height: 1.3;
  user-select: none; -webkit-user-select: none;
}
.island {
  position: absolute; z-index: 30; top: 11px; left: 50%;
  width: 250px; height: 58px; margin-left: -125px; top: 1px;
  background: #000;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #fff;
  clip-path: inset(10.5px 62px 10.5px 62px round 18.5px);
  transition: clip-path var(--t-sheet) var(--spring-sheet);
}
.island > * { opacity: 0; transition: opacity 180ms ease; white-space: nowrap; }
.island-check { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--citron); color: var(--graphite); font-size: 20px; }
.island-text { font-size: 19px; font-weight: 700; }
.island.is-open { clip-path: inset(0 0 0 0 round 29px); }
.island.is-open > * { opacity: 1; transition-delay: 160ms; }
.status { position: absolute; z-index: 20; top: 0; inset-inline: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding-inline: 44px 34px; padding-block-start: 6px; }
.status-time { font-size: 18px; font-weight: 600; }
.status-icons svg { width: 66px; height: 20px; }

.views { position: absolute; top: 54px; bottom: 0; inset-inline: 0; }
.view {
  position: absolute; inset: 0; padding: 10px 20px 130px; overflow: hidden;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity 200ms ease, translate 360ms var(--out-expo), visibility 0s 200ms;
}
.view.is-active { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 200ms ease, translate 360ms var(--out-expo), visibility 0s; }

.home-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 22px; }
.greet { font-size: 36px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin-block-start: 4px; }
.home-sheva { width: 64px; height: 64px; }

.hero-card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 30px; padding: 26px 24px 22px;
  color: var(--on-dark);
  background: radial-gradient(320px 220px at 0% 0%, var(--graphite-sheen), transparent 70%), linear-gradient(180deg, var(--graphite-top), var(--graphite-bottom));
  box-shadow: var(--sh-graphite);
}
.hero-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hc-label { font-size: 19px; color: var(--on-dark-2); font-weight: 600; }
.hc-when { font-size: 36px; font-weight: 700; line-height: 1.1; white-space: nowrap; margin-block-start: 6px; transition: opacity 200ms ease, translate 300ms var(--out-expo); }
.hc-time { font-size: 44px; letter-spacing: -0.02em; line-height: 1.15; color: var(--on-dark-3); }
.hc-when.swap { opacity: 0; translate: 0 8px; }
.week-ring { width: 136px; height: 136px; flex: none; overflow: visible; }
.week-ring use {
  fill: none; stroke-width: 15; stroke-linecap: round; stroke: rgba(255,255,255,.13);
  transition: stroke 300ms ease, opacity 300ms ease;
}
.week-ring use.done { stroke: var(--citron); }
.week-ring use.next { stroke: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.55)); }
.week-ring use.pop { stroke: var(--citron); filter: drop-shadow(0 0 10px rgba(255,229,59,.75)); animation: arc-pop var(--t-ring) var(--spring-ring); transform-box: fill-box; transform-origin: center; }
@keyframes arc-pop { from { scale: .55; opacity: .2; } to { scale: 1; opacity: 1; } }
.ring-check { fill: none; stroke: var(--citron); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 320ms var(--out-expo) 80ms, opacity 150ms ease; }
.ring-check.on { stroke-dashoffset: 0; opacity: 1; }

.log-btn {
  position: relative; width: 100%; height: 66px; margin-block-start: 22px; border: 0; border-radius: 33px;
  background: linear-gradient(180deg, var(--citron-light), var(--citron) 60%, var(--citron-deep));
  color: var(--graphite); font-size: 23px; font-weight: 700;
  box-shadow: var(--sh-cta), 0 10px 30px -8px rgba(255,229,59,.45);
  transition: transform var(--t-release) var(--spring-release), background 300ms ease, box-shadow 300ms ease;
  overflow: hidden;
}
.log-btn:active, .log-btn.pressing { transform: scale(.97); transition: transform 120ms var(--press); }
.log-btn-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity 220ms ease, translate 420ms var(--out-expo); }
.log-btn-face .ico { font-size: 26px; }
.log-btn-done { opacity: 0; translate: 0 100%; color: var(--on-dark); }
.log-btn.is-done { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(255,229,59,.5); cursor: default; }
.log-btn.is-done .log-btn-idle { opacity: 0; translate: 0 -100%; }
.log-btn.is-done .log-btn-done { opacity: 1; translate: 0 0; }
.log-btn.is-done .log-btn-done .ico { color: var(--citron); }
.log-btn:focus-visible { outline-offset: 4px; }

.card { background: var(--white); border-radius: 28px; box-shadow: var(--sh-card); }
.nutri { margin-block-start: 16px; padding: 20px; }
.nutri-head { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: 14px; }
.card-title { font-size: 22px; font-weight: 700; }
.nutri-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { border-radius: 24px; padding: 16px 16px 14px; }
.tile-water { background: rgba(46,144,250,.08); }
.tile-protein { background: rgba(255,138,61,.08); }
.tile-label { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 600; color: var(--text-2); }
.tile-water .ico { color: var(--water); }
.tile-protein .ico { color: var(--protein); }
.tile-num { font-size: 52px; letter-spacing: -0.02em; line-height: 1.1; margin-block: 2px 10px; }
.tile-num.bump { animation: bump 450ms var(--spring-toggle); }
@keyframes bump { 0% { scale: 1; } 30% { scale: 1.16; } 100% { scale: 1; } }
.pill { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 58px; border-radius: 29px; border: 0; font-size: 21px; font-weight: 700; transition: transform 120ms var(--press); }
.pill:active { transform: scale(.96); }
.pill-dark { background: var(--graphite); color: #fff; }
.pill-light { background: #fff; color: var(--graphite); box-shadow: inset 0 0 0 1.5px rgba(21,22,26,.12); }

.view-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 18px; }
.view-title { font-size: 36px; font-weight: 700; letter-spacing: -0.01em; }
.sample-chip { display: inline-flex; align-items: center; min-height: 30px; padding-inline: 12px; border-radius: 15px; background: var(--graphite); color: rgba(255,255,255,.8); font-size: 14px; font-weight: 700; }
.sample-chip-dark { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }

.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 28px; isolation: isolate; }
.seg > span:not(.seg-pill), .seg > button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border: 0; background: none; border-radius: 24px; font-size: 18px; font-weight: 600; white-space: nowrap; transition: color 200ms ease; }
.seg .is-on { font-weight: 700; }
.seg-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 24px; transition: translate var(--t-tab) var(--spring-tab); }
.seg-light { background: var(--seg-track); }
.seg-light .seg-pill { background: #fff; box-shadow: var(--sh-seg); }
.seg-light > :not(.seg-pill) { color: var(--text-2); }
.seg-light > .is-on { color: var(--graphite); }
.seg-dark { background: rgba(255,255,255,.08); }
.seg-dark .seg-pill { background: #fff; }
.seg-dark > button { color: var(--on-dark-2); min-height: 52px; }
.seg-dark > button.is-on { color: var(--graphite); }
/* static fallback before JS measures */
.phone .seg-light .seg-pill { right: 4px; left: auto; width: calc((100% - 8px) / 3); }

.chart-card { position: relative; isolation: isolate; overflow: hidden; margin-block-start: 16px; border-radius: 30px; padding: 22px 22px 16px; color: var(--on-dark); background: linear-gradient(180deg, var(--graphite-top), var(--graphite-bottom)); box-shadow: var(--sh-graphite); }
.cc-big { display: flex; align-items: baseline; gap: 8px; }
.cc-big .num { font-size: 72px; letter-spacing: -0.04em; line-height: 1; }
.cc-unit { font-size: 20px; font-weight: 600; color: var(--on-dark-2); }
.cc-sub { font-size: 17px; color: var(--on-dark-2); margin-block-start: 6px; }
.mini-chart { height: 230px; margin-block-start: 10px; }
.stats { margin-block-start: 16px; display: grid; grid-template-columns: 1fr 1fr; padding: 18px 20px; }
.stats > div + div { border-inline-start: 1px solid var(--hairline); padding-inline-start: 18px; }
.stat { font-size: 34px; letter-spacing: -0.01em; }

.group-label { font-size: 16px; font-weight: 700; color: var(--text-3); padding: 14px 8px 8px; }
.rows { padding: 4px 0; }
.row { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 18px; }
.row + .row { border-block-start: 1px solid var(--hairline); }
.row.new { animation: row-in 600ms var(--out-expo); }
@keyframes row-in { from { opacity: 0; translate: 0 -12px; background: rgba(255,229,59,.35); } to { opacity: 1; translate: 0 0; background: transparent; } }
.glyph { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--glyph); font-size: 23px; color: var(--graphite); }
.glyph-citron { background: var(--citron); }
.row-main { display: flex; flex-direction: column; }
.row-title { font-size: 20px; font-weight: 700; }
.row-sub { font-size: 17px; color: var(--text-2); font-weight: 600; }
.rows-nav .row { min-height: 70px; }
.rows-nav .row-title { flex: 1; }
.chev { font-size: 22px; color: #9A9CA1; }
.med-foot { text-align: center; font-size: 15px; font-weight: 600; color: var(--text-3); margin-block-start: 16px; }
.pro-tag { display: inline-flex; align-items: center; height: 24px; padding-inline: 8px; border-radius: 8px; background: var(--graphite); color: var(--citron); font-family: var(--font-num); font-size: 13px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.pro-tag-dark { background: rgba(255,229,59,.16); color: var(--citron); height: 22px; font-size: 12px; }
.seg-dark > button.is-on .pro-tag-dark { background: var(--graphite); }

.tabbar {
  position: absolute; z-index: 10; bottom: 30px; inset-inline: 20px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: 70px; padding: 3px; border-radius: 35px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--sh-glass);
}
.tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; border-radius: 32px; font-size: 14px; font-weight: 600; color: #3C3E44; }
.tab .ico { font-size: 25px; }
.tab.is-active { color: var(--graphite); font-weight: 700; }
.tab-pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 32px; background: rgba(21,22,26,.07); transition: translate var(--t-tab) var(--spring-tab); }
.home-indicator { position: absolute; z-index: 11; bottom: 9px; left: 50%; width: 150px; margin-left: -75px; height: 5px; border-radius: 3px; background: var(--graphite); }

/* ───────── Marquee ───────── */
.marquee {
  position: relative; margin: var(--gutter); border-radius: 999px; overflow: hidden;
  background: var(--graphite); color: var(--on-dark);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-list { display: flex; flex: none; }
.marquee-list li { display: flex; align-items: center; gap: 28px; padding-inline-end: 28px; min-height: 76px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; white-space: nowrap; }
.marquee-list li::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3.5px solid var(--citron); }
@keyframes marquee { to { translate: 50% 0; } }

/* ───────── Week (scrollytelling) ───────── */
.week { padding-block: clamp(80px, 10vw, 140px) clamp(40px, 6vw, 80px); padding-inline: var(--pad); }
.week .section-head { max-width: var(--maxw); margin-inline: auto; }
.week-grid {
  max-width: var(--maxw); margin-inline: auto; margin-block-start: clamp(24px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px);
}
.week-stage { order: 2; }
.week-sticky {
  position: sticky; top: 10vh; height: 80vh;
  display: grid; place-items: center;
}
.week-sticky::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,229,59,.42), rgba(255,229,59,0)); }
.stage-badge {
  position: absolute; z-index: 2; bottom: 9%; inset-inline-start: calc(50% + min(15.5vh, 156px) - 64px);
  width: 150px; height: 150px; border-radius: 50%;
  background: #fff; box-shadow: 0 24px 40px -16px rgba(21,22,26,.35), 0 0 0 1px rgba(21,22,26,.04);
  display: grid; place-items: center;
}
.stage-ring { position: absolute; inset: 8px; overflow: visible; }
.stage-ring use { fill: none; stroke-linecap: round; }
.stage-ring .bg use { stroke: rgba(21,22,26,.1); stroke-width: 15; }
.stage-ring .fg-o use { stroke: var(--graphite); stroke-width: 24; }
.stage-ring .fg-i use { stroke: var(--citron); stroke-width: 14; }
.stage-ring .fg-o use, .stage-ring .fg-i use { stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 700ms var(--out-expo), opacity 150ms ease; }
.stage-ring .on { stroke-dashoffset: 0 !important; opacity: 1 !important; }

.shot-phone {
  position: relative; z-index: 1;
  height: min(66vh, 660px); aspect-ratio: 454 / 956;
  padding: 1.45%; border-radius: 15% / 7.2%;
  background: linear-gradient(145deg, #3a3c43, #0d0e11 30%, #0b0c0f 70%, #2c2e34);
  box-shadow: inset 0 0 0 2px #45474e, 0 50px 80px -30px rgba(21,22,26,.5), 0 18px 30px -12px rgba(21,22,26,.35);
}
.shot-screen { position: relative; width: 100%; height: 100%; border-radius: 13.2% / 6.2%; overflow: hidden; background: var(--stone); }
.shot-screen > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.06; transition: opacity 450ms ease, scale 900ms var(--out-expo); }
.shot-screen > .is-on { opacity: 1; scale: 1; }
.shot-calm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--stone); }
.shot-calm svg { width: 46%; }
.shot-calm p { font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; color: var(--text-2); }
.stage-day { position: relative; font-size: 40px; font-weight: 700; color: var(--graphite); line-height: 1; }
.stage-day span { display: block; transition: opacity 200ms ease, translate 400ms var(--out-expo); }
.stage-day span.swap { opacity: 0; translate: 0 10px; }

.week-steps { order: 1; }
.step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; max-width: 480px; transition: opacity 500ms ease; }
.step-day { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; color: var(--text-2); margin-block-end: 16px; }
.day-dot { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: var(--sh-card); color: var(--graphite); font-size: 20px; font-weight: 700; transition: background-color 300ms ease, color 300ms ease; }
.step.is-active .day-dot { background: var(--graphite); color: var(--citron); }
.step .h3 + p { margin-block-start: 16px; color: var(--text-2); font-size: clamp(20px, 1.6vw, 22px); text-wrap: pretty; }
.step-shot { display: none; }
@media (min-width: 981px) {
  .js .step { opacity: .28; }
  .js .step.is-active { opacity: 1; }
}
@media (max-width: 980px) {
  .week-grid { grid-template-columns: minmax(0, 1fr); }
  .week-stage { display: none; }
  .step { min-height: 0; padding-block: 36px; max-width: none; }
  .step + .step { border-block-start: 1px solid var(--hairline); }
  .step-shot {
    display: block; width: min(300px, 76vw); height: auto; margin-block-start: 28px; margin-inline: auto;
    border-radius: 36px; border: 7px solid #111215;
    box-shadow: 0 30px 50px -20px rgba(21,22,26,.45);
  }
}

/* ───────── Chart section ───────── */
.chart-wrap {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 36px; padding: clamp(18px, 2.4vw, 30px);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -40px rgba(0,0,0,.6);
}
.chart-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.readout-val { display: flex; align-items: baseline; gap: 10px; }
.readout-val .num { font-size: clamp(60px, 7vw, 92px); letter-spacing: -0.045em; line-height: .95; }
.readout-unit { font-size: 22px; font-weight: 600; color: var(--on-dark-2); }
.readout-date { font-size: 18px; color: var(--on-dark-2); font-weight: 600; margin-block-start: 8px; min-height: 27px; }
.chart-wrap .seg { margin-block: 22px 8px; }
.chart { position: relative; height: clamp(250px, 30vw, 340px); cursor: crosshair; touch-action: pan-y; border-radius: 16px; }
.chart:focus-visible { outline-offset: 6px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-tip {
  position: absolute; z-index: 2; pointer-events: none; translate: -50% calc(-100% - 18px);
  display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 14px; border-radius: 18px;
  background: var(--citron); color: var(--graphite); font-size: 17px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 8px 20px -6px rgba(255,229,59,.5); opacity: 0; scale: .9; transition: opacity 150ms ease, scale 250ms var(--out-expo);
}
.chart-tip .num { font-size: 19px; }
.chart-tip.is-on { opacity: 1; scale: 1; }
.chart .cursor { transition: opacity 150ms ease; }
.chart .pulse, .mini-chart .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { scale: 1; opacity: .8; } 70%, 100% { scale: 2.6; opacity: 0; } }
.mini-chart { position: relative; }
.mini-chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-block-start: 10px; }
.legend { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--on-dark-2); }
.lg { display: inline-block; }
.lg-shot { width: 2px; height: 16px; background: rgba(255,255,255,.5); border-radius: 1px; }
.lg-fx { width: 10px; height: 10px; border-radius: 50%; background: var(--sev-2); margin-inline-start: 12px; }
.ticks { margin-block-start: 28px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-inline-start: 22px; font-size: 19px; color: var(--on-dark-3); }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--citron); box-shadow: 0 0 10px rgba(255,229,59,.6); }

.switch-row { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; cursor: pointer; font-size: 18px; font-weight: 600; }
.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 64px; height: 28px; border-radius: 14px; cursor: pointer;
  background: rgba(118,118,128,.24); transition: background-color 250ms ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: translate var(--t-toggle) var(--spring-toggle), background-color 250ms ease;
}
.switch:checked::after { translate: 36px 0; }
.panel-dark .switch { background: rgba(255,255,255,.18); }
.panel-dark .switch:checked { background: var(--citron); }
.panel-dark .switch:checked::after { background: var(--graphite); }
.switch:focus-visible { outline: 3px solid var(--citron); outline-offset: 4px; }

/* ───────── Feel (side effects) ───────── */
.feel { padding-block: clamp(80px, 10vw, 150px); padding-inline: var(--pad); }
.feel .split { align-items: center; }
.sheet {
  position: relative; width: 100%; max-width: 560px; justify-self: center;
  background: var(--sheet); border-radius: 40px; padding: 12px clamp(14px, 2vw, 22px) 22px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(21,22,26,.06), 0 30px 60px -24px rgba(21,22,26,.28);
}
.sheet-grabber { width: 40px; height: 5px; border-radius: 3px; background: rgba(21,22,26,.18); margin: 0 auto 14px; }
.sheet-head { text-align: center; }
.sheet-title { font-size: 22px; font-weight: 700; }
.sheet-meta { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 6px 10px; }
.sheet-count { font-size: 20px; font-weight: 700; }
.picked { background: #fff; border-radius: 28px; box-shadow: var(--sh-card); overflow: hidden; }
.picked:empty { display: none; }
.picked li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 10px; }
.picked li + li { border-block-start: 1px solid var(--hairline); }
.picked .seg { flex: 0 1 236px; padding: 4px; }
.picked .seg > button { min-height: 48px; font-size: 18px; padding-inline: 4px; }
.pool { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 2px 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding-inline: 22px; border: 0; border-radius: 28px;
  background: #fff; color: var(--graphite); font-size: 19px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--sh-card); transition: transform 120ms var(--press), background-color 200ms ease, color 200ms ease;
}
.chip:active { transform: scale(.96); }
.chip.is-on { background: var(--graphite); color: #fff; box-shadow: none; }
.chip .ico { font-size: 18px; }
.save-btn {
  position: relative; overflow: hidden; width: 100%; height: 64px; margin-block-start: 18px; border: 0; border-radius: 32px;
  background: linear-gradient(180deg, var(--citron-light), var(--citron) 60%, var(--citron-deep)); box-shadow: var(--sh-cta);
  color: var(--graphite); font-size: 21px; font-weight: 700;
  transition: transform var(--t-release) var(--spring-release), background 250ms ease, color 250ms ease;
}
.save-btn:active:not(:disabled) { transform: scale(.97); transition-duration: 120ms; }
.save-btn:disabled { background: var(--disabled-bg); color: var(--disabled-text); box-shadow: none; cursor: default; }
.save-btn > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 200ms ease, translate 400ms var(--out-expo); }
.save-done { opacity: 0; translate: 0 100%; }
.save-btn.is-done { background: var(--graphite); color: #fff; }
.save-btn.is-done .save-idle { opacity: 0; translate: 0 -100%; }
.save-btn.is-done .save-done { opacity: 1; translate: 0 0; }
.save-btn.is-done .ico { color: var(--citron); font-size: 22px; }
@media (max-width: 480px) {
  .picked li { flex-wrap: wrap; }
  .picked .seg { flex: 1 1 100%; }
}

/* ───────── Lock screen (reminders) ───────── */
.lock {
  position: relative; isolation: isolate; overflow: hidden; justify-self: center;
  width: min(420px, 100%); min-height: 640px; padding: 56px 18px 28px;
  border-radius: 56px;
  background: radial-gradient(140% 70% at 50% 120%, rgba(255,229,59,.22), transparent 60%), linear-gradient(180deg, #24252B, #141416);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 10px #0b0c0f, inset 0 0 0 11px rgba(255,255,255,.08), 0 50px 90px -40px rgba(0,0,0,.8);
  display: flex; flex-direction: column; align-items: center;
}
.lock-glow { position: absolute; z-index: -1; inset: auto -20% -30% -20%; height: 60%; background: radial-gradient(closest-side, rgba(255,229,59,.18), transparent); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; scale: 1.08; } }
.lock-date { font-size: 21px; font-weight: 600; color: var(--on-dark-3); }
.lock-clock { font-size: clamp(88px, 10vw, 108px); line-height: 1.05; letter-spacing: -0.05em; color: rgba(255,255,255,.94); font-weight: 600; }
.notes { width: 100%; display: grid; gap: 8px; margin-block-start: 28px; }
.note {
  border-radius: 26px; overflow: hidden;
  background: rgba(40,41,46,.62); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: opacity 400ms ease, translate 600ms var(--spring-sheet), scale 600ms var(--spring-sheet);
  display: grid; grid-template-rows: auto 0fr;
}
@media (prefers-reduced-motion: no-preference) { .js .lock:not(.in) .note { opacity: 0; translate: 0 -30px; scale: .96; } }
.lock.in .note:nth-child(2) { transition-delay: 120ms; }
.lock.in .note:nth-child(3) { transition-delay: 240ms; }
.note.gone { opacity: 0 !important; translate: 100% 0 !important; }
.note-body { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 14px 16px; border: 0; background: none; text-align: start; color: #fff; }
button.note-body { cursor: pointer; min-height: 56px; }
.note-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.note-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.note-top { display: flex; justify-content: space-between; gap: 8px; }
.note-title { font-size: 17px; font-weight: 700; }
.note-time { font-size: 15px; color: rgba(255,255,255,.6); font-weight: 500; }
.note-msg { font-size: 17px; line-height: 1.35; color: rgba(255,255,255,.92); transition: opacity 180ms ease, filter 180ms ease; }
.note-msg.swap { opacity: 0; filter: blur(6px); }
.note { transition-property: opacity, translate, scale, grid-template-rows; transition-duration: 400ms, 600ms, 600ms, 400ms; }
.note.is-open { grid-template-rows: auto 1fr; }
.note-actions { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 250ms ease; }
.note.is-open .note-actions { opacity: 1; }
.note-actions-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 12px; }
.note-actions-in button { min-height: 56px; border: 0; border-radius: 18px; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; font-weight: 700; }
.note-actions-in button:hover { background: rgba(255,255,255,.18); }
.lock-hint { margin-block-start: auto; padding-block-start: 22px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.6); transition: opacity 300ms ease; }
.switch-row-lg { margin-block-start: 30px; padding: 12px 20px; border-radius: 24px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); gap: 24px; font-size: 20px; }
.switch-row-lg > span { display: flex; flex-direction: column; }
.switch-sub { font-size: 16px; color: var(--on-dark-2); font-weight: 600; }
.remind-kinds { margin-block-start: 28px; display: grid; gap: 14px; }
.remind-kinds li { display: flex; align-items: center; gap: 14px; font-size: 19px; color: var(--on-dark-3); }
.remind-kinds .ico { font-size: 22px; color: var(--citron); }

/* ───────── Privacy ───────── */
.privacy { padding-block: clamp(80px, 10vw, 150px); padding-inline: var(--pad); }
.privacy-grid { max-width: var(--maxw); margin: clamp(40px, 5vw, 72px) auto 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: stretch; }
@media (max-width: 980px) { .privacy-grid { grid-template-columns: minmax(0, 1fr); } }
.vault {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 36px; padding: clamp(20px, 2.6vw, 32px); color: var(--on-dark);
  background: radial-gradient(500px 300px at 100% 0%, var(--graphite-sheen), transparent 70%), linear-gradient(180deg, var(--graphite-top), var(--graphite-bottom));
  box-shadow: var(--sh-graphite);
}
.vault-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.vault-title { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; }
.vault-title .ico { color: var(--citron); }
.vault-file { font-size: 15px; color: var(--on-dark-2); font-weight: 500; }
.vault-body { flex: 1; margin-block: 20px; border-radius: 20px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); overflow-x: auto; }
.code { margin: 0; padding: 18px 20px; min-height: 300px; font-family: var(--font-mono); font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.88); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; unicode-bidi: plaintext; }
@media (max-width: 560px) { .code { font-size: 13px; padding: 14px; } .vault-body { max-height: 440px; overflow-y: auto; } }
.code .k { color: var(--citron); }
.code .s { color: #E9E1FF; }
.code .x { color: rgba(255,255,255,.55); }
.vault-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.vault-note { flex: 1 1 220px; font-size: 16px; color: var(--on-dark-2); font-weight: 600; }
.facts { display: grid; gap: clamp(10px, 1.2vw, 14px); align-content: stretch; }
.fact {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-content: center;
  background: #fff; border-radius: 30px; padding: 22px 24px; box-shadow: var(--sh-card);
}
.fact-ico { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--graphite); color: var(--citron); font-size: 24px; }
.fact p { margin-block-start: 4px; color: var(--text-2); font-size: 19px; line-height: 1.5; }

/* ───────── What you won't find ───────── */
.nope .lead { color: rgba(21,22,26,.78); }
.nope-list { display: grid; gap: 4px; }
.nope-list li { display: flex; align-items: center; gap: 16px; min-height: 64px; border-block-end: 1.5px solid rgba(21,22,26,.12); font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.01em; }
.nope-list li::before { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23FFE53B' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.nope-list s {
  text-decoration: none;
  background: linear-gradient(var(--graphite), var(--graphite)) no-repeat right 0 top 58% / 0% 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 800ms var(--out-expo); transition-delay: calc(var(--i, 0) * 110ms + 200ms);
}
.nope-list.in s, html:not(.js) .nope-list s { background-size: 100% 3px; }

/* ───────── Pricing ───────── */
.plans { max-width: 1040px; margin: clamp(40px, 5vw, 72px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: stretch; }
@media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { border-radius: 36px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; }
.plan-free { background: #fff; color: var(--graphite); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.plan-pro { background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan-name { font-size: 26px; font-weight: 700; }
.plan-pro .plan-name { font-family: var(--font-num); color: var(--citron); }
.plan-price { display: flex; align-items: baseline; gap: 10px; margin-block-start: 22px; }
.plan-price .num { font-size: clamp(64px, 6vw, 84px); letter-spacing: -0.045em; line-height: 1; }
.plan-price > span { font-size: 34px; font-weight: 700; }
.plan-per { font-size: 19px; font-weight: 600; color: var(--text-3); margin-block-start: 6px; }
.plan-pro .plan-per { color: var(--on-dark-2); }
.plan-trial { margin-block-start: 14px; align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; padding-inline: 14px; border-radius: 20px; background: rgba(255,229,59,.14); color: var(--citron); font-size: 17px; font-weight: 700; transition: opacity 250ms ease; }
.plan-trial.is-muted { background: rgba(255,255,255,.06); color: var(--on-dark-2); }
.seg-sm { min-width: 190px; }
.seg-sm > button { min-height: 48px; font-size: 17px; padding-inline: 12px; }
.plan-list { display: grid; gap: 12px; margin-block-start: 28px; }
.plan-list li { position: relative; padding-inline-start: 38px; font-size: 19px; line-height: 1.4; }
.plan-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8.5' fill='none' stroke='%23FFE53B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.plan-list-pro li { color: var(--on-dark-3); }
.plan-list-pro li::before { background-color: rgba(255,229,59,.16); }
@media (prefers-reduced-motion: no-preference) { .js [data-checklist]:not(.in) li { opacity: 0; translate: 0 10px; } }
[data-checklist] li { transition: opacity 500ms ease, translate 600ms var(--out-expo); transition-delay: calc(var(--i, 0) * 60ms); }
.plan-promise { margin-block-start: auto; padding-block-start: 28px; font-size: 20px; font-weight: 700; }
.plan-promise::before { content: ""; display: block; height: 1px; background: var(--hairline); margin-block-end: 20px; }
.plan-legal { margin-block-start: auto; padding-block-start: 28px; font-size: 15px; line-height: 1.55; color: var(--on-dark); font-weight: 400; }

/* ───────── FAQ ───────── */
.faq { padding-block: clamp(80px, 10vw, 150px); padding-inline: var(--pad); }
.faq-list { max-width: 820px; margin: clamp(32px, 4vw, 56px) auto 0; display: grid; gap: 10px; }
.faq details { background: #fff; border-radius: 26px; box-shadow: var(--sh-card); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 76px; padding: 18px 26px; font-size: clamp(20px, 1.8vw, 23px); font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--glyph) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%2315161A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: rotate 400ms var(--spring-toggle), background-color 200ms ease;
}
.faq details[open] summary::after { rotate: 45deg; background-color: var(--citron); }
.faq details[open] .faq-a { animation: faq-in 450ms var(--out-expo); }
@keyframes faq-in { from { opacity: 0; translate: 0 -8px; } }
.faq-a { padding: 0 26px 24px; color: var(--text-2); font-size: 20px; max-width: 64ch; }

/* ───────── Final CTA ───────── */
.final { text-align: center; min-height: 80vh; display: grid; place-items: center; }
.final-ring { position: absolute; z-index: -1; max-width: none; width: min(150vmin, 1240px); aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; overflow: visible; }
.final-ring use { fill: none; stroke-linecap: round; }
.final-ring .bg use { stroke: rgba(255,255,255,.05); stroke-width: 7; }
.final-ring .fg-i use { stroke: var(--citron); stroke-width: 4.5; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 10px rgba(255,229,59,.45)); transition: stroke-dashoffset 900ms var(--out-expo), opacity 200ms ease; }
.final-ring .on { stroke-dashoffset: 0 !important; opacity: 1 !important; }
.final-inner { display: flex; flex-direction: column; align-items: center; max-width: 720px; }
.final-icon { width: 120px; height: 120px; border-radius: 27px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -20px rgba(0,0,0,.8); margin-block-end: 32px; }
.final .lead { margin-inline: auto; }
.final-cta { margin-block-start: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.final-note { font-size: 17px; color: var(--on-dark-2); font-weight: 600; }

/* ───────── Footer ───────── */
.footer { padding: clamp(48px, 6vw, 80px) var(--pad) calc(clamp(40px, 5vw, 64px) + env(safe-area-inset-bottom, 0px)); }
.footer-inner { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 28px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 48px; height: 48px; border-radius: 11px; }
.footer-name { font-size: 22px; font-weight: 700; }
.footer-tag { font-size: 16px; color: var(--text-3); font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 56px; padding-inline: 14px; border-radius: 28px; background: rgba(21,22,26,.05); font-size: 18px; font-weight: 600; text-decoration: none; }
.footer-links a:hover { background: rgba(21,22,26,.09); }
.footer-contact { font-size: 18px; color: var(--text-2); }
.footer-contact a { font-weight: 700; text-underline-offset: .2em; margin-inline-start: 8px; display: inline-flex; min-height: 44px; align-items: center; }
.footer-legal { display: grid; gap: 8px; padding-block-start: 24px; border-block-start: 1px solid var(--hairline); font-size: 15px; line-height: 1.6; color: var(--text-legal); font-weight: 400; max-width: 80ch; }

/* ───────── Reveal (only when scripting is on; falls back to visible if JS never runs) ───────── */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; translate: 0 28px; }
  html:not(.js) [data-reveal] { animation: reveal-fallback 1ms 2.5s forwards; }
  .js [data-reveal] { transition: opacity 900ms var(--out-expo), translate 1000ms var(--out-expo); transition-delay: calc(var(--d, 0) * 1ms); }
  .js [data-reveal].in { opacity: 1; translate: 0 0; }
  .js .hero-title .w { opacity: 0; translate: 0 .35em; filter: blur(8px); transition: opacity 800ms var(--out-expo), translate 1000ms var(--out-expo), filter 800ms var(--out-expo); transition-delay: calc(var(--i) * 70ms + 120ms); }
  .js .hero-title.in .w { opacity: 1; translate: 0 0; filter: blur(0); }
  .js .sheva { opacity: 0; scale: .6; rotate: -30deg; transition: opacity 500ms ease 700ms, scale 900ms var(--spring-ring) 700ms, rotate 900ms var(--spring-ring) 700ms; }
  .js .sheva.in { opacity: 1; scale: 1; rotate: 0deg; }
  .js .phone { opacity: 0; translate: 0 60px; rotate: 4deg; transition: opacity 900ms var(--out-expo) 300ms, translate 1200ms var(--out-expo) 300ms, rotate 1200ms var(--out-expo) 300ms; }
  .js .phone.in { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes reveal-fallback { to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; transition-delay: 0ms !important; }
  .hero-ring { animation: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-list[aria-hidden="true"] { display: none; }
  .marquee-list { flex-wrap: wrap; justify-content: center; padding-inline: 24px; }
  .marquee { border-radius: 36px; -webkit-mask-image: none; mask-image: none; }
  .sheva-today, .sheva-eyes, .lock-glow { animation: none; }
  .nope-list s { background-size: 100% 3px; }
}

@media print {
  .nav, .hero-ring, .marquee, .try-hint { display: none; }
  .panel-dark { background: #fff; color: #000; box-shadow: none; }
}