/* israelforyou.com — the app's design system, carried to the web.
   Tokens mirror app/IsraelForYou/DesignSystem/Theme.swift (light + dark);
   atmospheres mirror Atmosphere.swift. Rubik is the only voice — it is the
   app's face and it speaks Latin, Cyrillic and Hebrew. */

/* ── fonts (self-hosted, subset per script) ─────────────────────────────── */

@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 300 900;
  font-display: swap; src: url(/assets/fonts/rubik-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik"; font-style: italic; font-weight: 300 900;
  font-display: swap; src: url(/assets/fonts/rubik-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 300 900;
  font-display: swap; src: url(/assets/fonts/rubik-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik"; font-style: italic; font-weight: 300 900;
  font-display: swap; src: url(/assets/fonts/rubik-cyrillic-italic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 300 900;
  font-display: swap; src: url(/assets/fonts/rubik-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik"; font-style: italic; font-weight: 300 900;
  font-display: swap; src: url(/assets/fonts/rubik-hebrew-italic.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  --bg: #FFFFFF; --surface: #F7F9FC; --surface2: #EEF2F8; --surface3: #E5EBF2;
  --border: #E5EBF2; --border-strong: #D1DAE6;
  --text: #0A1628; --text2: #46586C; --text3: #5A6B7E;
  --accent: #0038B8; --accent-light: #3B7BE8; --cyan: #00B4FF;
  --warm: #FF9A3C; --accent-soft: #E6EFFF; --warm-soft: #FFF0DB;
  --marker: rgba(255, 228, 77, .6);
  --ink: #0A1628; --paper-on-atmo: rgba(255, 255, 255, .92);
  --shadow: 0 14px 40px -18px rgba(10, 22, 40, .35);
  --shadow-lift: 0 24px 50px -20px rgba(10, 22, 40, .45);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: 20px;
  /* how far a hero slides up under the floating header; any hero's own
     padding-top must exceed this or its copy lands on the nav */
  --header-pull: 4.95rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --shell: 72rem;
  color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #0A1628; --surface: #101F36; --surface2: #16273F; --surface3: #1F3253;
    --border: #1F3253; --border-strong: #2C4068;
    --text: #F4F7FB; --text2: #A8B5C4; --text3: #91A0B2;
    --accent: #5B9BFF; --accent-light: #5B9BFF; --cyan: #39C7FF;
    --warm: #FFA94D; --accent-soft: rgba(59, 123, 232, .15);
    --warm-soft: rgba(255, 169, 77, .15);
    --marker: rgba(255, 220, 61, .42);
    --shadow: 0 14px 40px -18px rgba(0, 0, 0, .6);
    --shadow-lift: 0 24px 50px -20px rgba(0, 0, 0, .7);
    color-scheme: dark;
}

/* ── base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* the overscroll canvas above a navy hero must be navy, not the page paper —
   iOS shows this area behind the status bar and while rubber-banding */
html.on-hero { background-color: #0A1628; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.7 "Rubik", "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto; text-rendering: optimizeLegibility;
  caret-color: var(--accent);
}
img, svg { max-width: 100%; height: auto; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
:target { scroll-margin-top: 5.5rem; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

h1, h2, h3 { line-height: 1.18; text-wrap: balance; overflow-wrap: break-word; margin: 0 0 .6em; }
h2 { font-size: clamp(1.45rem, 1.1rem + 2.1vw, 2.4rem); font-weight: 750; letter-spacing: -.02em; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
    text-underline-offset: 3px; text-decoration-thickness: 1.5px;
    transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
a:hover { text-decoration-color: var(--accent); }
[lang="he"] { font-weight: 600; unicode-bidi: isolate; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: -4rem; left: 1rem; z-index: 100; padding: .7rem 1.1rem;
  background: var(--accent); color: #fff; border-radius: 0 0 12px 12px;
  text-decoration: none; transition: top .25s var(--ease); }
.skip:focus-visible { top: 0; }
.hp { position: absolute; left: -9999px; }

/* ── header ─────────────────────────────────────────────────────────────── */

.top { --header-h: 4.25rem;
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  min-height: var(--header-h); width: 100%;
  padding: .35rem max(var(--gutter), calc((100% - var(--shell)) / 2));
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease),
              backdrop-filter .35s var(--ease); }
/* on hero pages the header floats over the atmosphere */
.has-hero .top { margin-bottom: calc(var(--header-pull) * -1); }
/* once the page scrolls, the header becomes ink glass on every page */
html.scrolled .top { background: rgba(10, 22, 40, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 30px -18px rgba(2, 6, 16, .6),
              inset 0 -1px 0 rgba(255, 255, 255, .07); }
html.scrolled .top .wordmark, html.scrolled .top .topnav a,
html.scrolled .top .lang-switch { color: #fff; }
html.scrolled .top .wordmark span { color: #FFD9A8; }
html.scrolled .top .lang-switch { border-color: rgba(255, 255, 255, .45); }
.wordmark { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--text); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px; }
a.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark span { color: var(--accent); }
p.wordmark { margin: 0 0 .2rem; }
.top-hero .wordmark, .top-hero .topnav a { color: #fff; }
.top-hero .wordmark span { color: #FFD9A8; }
.topnav { display: flex; gap: clamp(.9rem, 2.5vw, 1.6rem); margin-inline: auto; }
.topnav a { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text2); text-decoration: none; font-size: .95rem; font-weight: 500; }
.topnav a:hover { color: var(--text); }
.top-hero .topnav a { color: rgba(255, 255, 255, .85); }
.top-hero .topnav a:hover { color: #fff; }
.header-tools { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.theme-toggle, .locale-menu summary { display: inline-flex; align-items: center;
  justify-content: center; min-width: 44px; min-height: 44px; padding: .45rem .55rem;
  border: 0; border-radius: 12px; background: transparent; color: var(--text2);
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.theme-toggle:hover, .locale-menu summary:hover { background: var(--surface2); color: var(--text); }
.theme-toggle svg, .locale-menu summary > svg { width: 19px; height: 19px; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: block; }
.locale-menu { position: relative; }
.locale-menu summary { gap: .35rem; list-style: none; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; }
.locale-menu summary::-webkit-details-marker { display: none; }
.locale-menu .locale-chevron { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.locale-menu[open] .locale-chevron { transform: rotate(180deg); }
.locale-popover { position: absolute; z-index: 40; top: calc(100% + .45rem); right: 0;
  min-width: 12rem; padding: .4rem; border-radius: 14px; background: var(--bg);
  color: var(--text); box-shadow: 0 16px 44px -20px rgba(10, 22, 40, .55); }
.locale-popover a, .locale-popover .locale-current { display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; min-height: 44px; padding: .55rem .75rem;
  border-radius: 10px; color: var(--text2); text-decoration: none; font-size: .9rem; }
.locale-popover a:hover { background: var(--surface); color: var(--text); }
.locale-popover .locale-current { background: var(--accent-soft); color: var(--text); }
.locale-popover small { font-size: .72rem; font-weight: 700; color: var(--text3); }
.top-hero .theme-toggle, .top-hero .locale-menu summary { color: rgba(255, 255, 255, .82); }
.top-hero .theme-toggle:hover, .top-hero .locale-menu summary:hover {
  background: rgba(255, 255, 255, .12); color: #fff; }

/* ── atmosphere surfaces ────────────────────────────────────────────────── */

.hero, .guide-hero, .page-hero, .word-hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--atmo, linear-gradient(135deg, #0A2472, #0038B8, #0090DE));
}
.hero::after, .guide-hero::after, .page-hero::after, .word-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 10, 24, .42), transparent 55%);
}
.hero-inner { position: relative; z-index: 2; width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto; padding: clamp(6.5rem, 14vh, 9rem) var(--gutter) clamp(3.5rem, 8vh, 5.5rem); }
.cover-glyph { position: absolute; z-index: 1; top: -.16em; right: -.06em;
  font-size: clamp(11rem, 24vw, 24rem); font-weight: 900; line-height: 1;
  color: rgba(255, 255, 255, .09); pointer-events: none; user-select: none;
  transform: rotate(-8deg) translateY(calc(var(--drift, 0) * 1px));
  will-change: transform; }
.hero-glyph { font-size: clamp(16rem, 38vw, 34rem);
  animation: glyphBreath 16s ease-in-out infinite; }
@keyframes glyphBreath {
  0%, 100% { transform: rotate(-8deg) translateY(calc(var(--drift, 0) * 1px)); }
  50% { transform: rotate(-6.4deg)
        translateY(calc(var(--drift, 0) * 1px - 9px)); }
}
.hero { display: grid; min-height: min(94svh, 62rem); }
.hero .hero-inner { align-self: end; }
.hero-skyline { position: absolute; inset-inline: 0; bottom: -2px; z-index: 1;
  color: rgba(255, 255, 255, .10); }
.hero-skyline svg { display: block; width: 100%; height: clamp(56px, 9vw, 110px); }
.display { font-size: clamp(2.3rem, 1.5rem + 4.4vw, 4.6rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.04; max-width: 12em; margin-bottom: .35em; }
.hero-lede { font-size: clamp(1.05rem, 1rem + .6vw, 1.3rem); line-height: 1.6;
  max-width: 38em; color: var(--paper-on-atmo); }
.hero-lede em { font-style: italic; color: #FFD9A8; }
.hero-lede a { color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.7rem;
  border-radius: 999px; font-weight: 650; font-size: 1.02rem; text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.btn-warm { background: #FF9A3C; color: #0A1628;
  box-shadow: 0 10px 28px -10px rgba(255, 154, 60, .55); }
.btn-warm:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(255, 154, 60, .6); }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: #fff; border: 0; border-radius: 12px;
  padding: .9rem 1.6rem; font: 650 1rem "Rubik", sans-serif; cursor: pointer; }
.btn-accent:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* ── bands ──────────────────────────────────────────────────────────────── */

.band { padding-block: clamp(4rem, 9vw, 7rem); }
.band > * { max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter); }
.band-head { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.band-lede { color: var(--text2); font-size: 1.1rem; max-width: 44em; margin: 0; }
.band-tint { background: var(--surface); }
.band-more { margin-top: 2rem; font-size: 1.05rem; }
.arrow-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650;
  text-decoration: none; min-height: 44px; }
.arrow-link svg { width: 1.15em; height: 1.15em; transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ── covers (the app's bookshelf) ───────────────────────────────────────── */

.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem); }
.shelf-narrow { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 18rem)); }
.cover { position: relative; overflow: hidden; display: flex; flex-direction: column;
  aspect-ratio: 4 / 5; padding: 1.35rem; border-radius: var(--radius);
  background: var(--atmo); color: #fff; text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 10, 24, .5), transparent 52%); }
.cover:hover { transform: translateY(-7px); box-shadow: var(--shadow-lift); }
.cover .cover-glyph { font-size: 9.5rem; top: -.12em; right: -.04em;
  transition: transform .6s var(--ease); }
.cover:hover .cover-glyph { transform: rotate(-8deg) translate(-6px, 8px); }
.cover-motif { position: absolute; right: 8%; top: 34%; width: 38%;
  color: rgba(255, 255, 255, .38); transition: transform .6s var(--ease); }
.cover:hover .cover-motif { transform: translateY(-5px); }
.cover-text { position: relative; z-index: 2; margin-top: auto; display: grid; gap: .45rem; }
.cover-title { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-weight: 750;
  line-height: 1.22; margin: 0; letter-spacing: -.01em; }
.cover-meta { font-size: .82rem; color: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums; }

/* ── chips & word cloud ─────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { display: inline-flex; align-items: baseline; gap: .55rem;
  padding: .5rem .95rem; border-radius: 999px; background: var(--accent-soft);
  text-decoration: none; transition: background .3s var(--ease), transform .3s var(--ease); }
.chip:hover { background: var(--accent); transform: translateY(-2px); }
.chip:hover * { color: #fff !important; }
.chip-latin { color: var(--accent); font-weight: 600; font-size: .95rem; }
.chip [lang="he"] { color: var(--text); font-size: 1.05rem; }
.quiet-chip { display: inline-block; padding: .4rem .8rem; margin: 0 .4rem .5rem 0;
  border-radius: 999px; background: var(--surface2); color: var(--text2); font-size: .88rem; }
.chips-quiet { display: block; }

/* ── app section: phone + features ──────────────────────────────────────── */

.app-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.phone { margin: 0; justify-self: center; width: min(320px, 100%); }
.phone-screen { position: relative; overflow: hidden; aspect-ratio: 9 / 18.6;
  border-radius: 42px; border: 9px solid #0A1628; background: var(--bg);
  box-shadow: var(--shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, .06);
  display: flex; flex-direction: column; }
.phone-status { position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 15px 0; color: #fff; pointer-events: none; }
.phone-status b { font-size: .72rem; font-weight: 650; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(2, 6, 16, .45); }
.phone-status svg { width: 44px; height: 12px;
  filter: drop-shadow(0 1px 3px rgba(2, 6, 16, .45)); }
.phone-island { position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 78px; height: 21px; border-radius: 12px; background: #05080F;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 7px; }
.phone-island i { width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2C4068 0%, #0A1628 55%); }
.phone-hero { position: relative; overflow: hidden; flex: 0 0 44%;
  background: var(--atmo); color: #fff; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 1rem; }
.phone-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 10, 24, .5), transparent 55%); }
.phone-hero .cover-glyph { font-size: 7.5rem; }
.phone-motif { position: absolute; right: 8%; top: 22%; width: 40%;
  color: rgba(255, 255, 255, .34); }
.phone-title { position: relative; z-index: 2; font-size: 1.02rem; font-weight: 750;
  line-height: 1.25; letter-spacing: -.01em; }
.phone-prose { padding: 1rem 1.1rem 0; font-size: .76rem; line-height: 1.65;
  color: var(--text2); overflow: hidden; flex: 1; }
.phone-prose strong { color: var(--text); }

.features { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); }
.feature { display: grid; grid-template-columns: 48px 1fr; gap: 1.1rem; align-items: start; }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.feature-icon svg { width: 26px; height: 26px; }
.feature h3 { grid-column: 2; margin: .1rem 0 .3rem; }
.feature p { grid-column: 2; grid-row: 2; color: var(--text2); margin: 0; font-size: .98rem; }
.feature-icon { grid-row: 1 / 3; }

/* ── quiet privacy band ─────────────────────────────────────────────────── */

.band-quiet { background: var(--surface); text-align: center; }
.privacy-line { font-size: clamp(1.3rem, .95rem + 2.3vw, 2.4rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.25; max-width: 24em; margin: 0 auto .8rem; }
.privacy-body { color: var(--text2); max-width: 38em; margin-inline: auto; font-size: 1.05rem; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq-item { max-width: 46rem; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary { display: flex; align-items: center; gap: 1rem; cursor: pointer;
  list-style: none; padding: 1.15rem 0; font-weight: 650; font-size: 1.05rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; margin-left: auto; flex: 0 0 auto;
  width: 12px; height: 12px;
  border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3);
  transform: rotate(45deg); transition: transform .35s var(--ease); }
.faq-item[open] summary { color: var(--accent); }
.faq-item[open] summary::after { transform: rotate(225deg); border-color: var(--accent); }
.faq-item p { color: var(--text2); margin: 0 0 1.3rem; max-width: 42em; }
.form-note { font-size: .85rem; color: rgba(255, 255, 255, .75); margin: .8rem 0 0; }
.form-done { font-weight: 650; color: #FFD9A8; margin: .8rem 0 0; }

/* ── guide page ─────────────────────────────────────────────────────────── */

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-size: .85rem; margin-bottom: 1.6rem; color: rgba(255, 255, 255, .75); }
.crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumb-sep { opacity: .5; }
.crumbs [aria-current] { color: #fff; }

.guide-hero .hero-inner { padding-bottom: clamp(2.8rem, 6vh, 4.5rem); }
.guide-cat { font-size: .8rem; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8); margin: 0 0 .6rem; }
.guide-hero h1 { font-size: clamp(1.75rem, 1.2rem + 3.4vw, 3.5rem); font-weight: 800;
  letter-spacing: -.025em; max-width: 18em; }
.guide-subtitle { font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem);
  color: var(--paper-on-atmo); max-width: 36em; line-height: 1.55; }
.guide-meta { font-size: .9rem; color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums; margin: 1rem 0 0; }
.guide-hero-motif { position: absolute; right: 4%; bottom: 10%; z-index: 1;
  width: clamp(120px, 20vw, 240px); color: rgba(255, 255, 255, .22); }

.guide-body > *, .word-body > * { max-width: 46rem; }
.prose { font-size: 1.09rem; line-height: 1.75; }
.prose p { margin-bottom: 1.15em; }
.prose-teaser > p:first-child::first-letter { float: left; font-size: 3.6em;
  line-height: .82; padding-right: .13em; font-weight: 750; color: var(--accent); }
.chapter-map { margin-top: clamp(2.2rem, 5vw, 3.5rem); }
.chapter-list { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.chapter-list li { counter-increment: ch; display: flex; gap: 1.1rem; align-items: baseline;
  padding: .85rem 0; border-top: 1px solid var(--border); font-weight: 550; }
.chapter-list li:last-child { border-bottom: 1px solid var(--border); }
.chapter-list li::before { content: counter(ch, decimal-leading-zero);
  font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700;
  font-size: .9rem; }
.aside { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.aside h2 { font-size: 1.25rem; }

/* ── lexicon ────────────────────────────────────────────────────────────── */

.page-hero .hero-inner, .word-hero .hero-inner { padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.page-hero h1, .word-hero h1 { font-size: clamp(1.8rem, 1.25rem + 2.8vw, 3.2rem);
  font-weight: 800; letter-spacing: -.025em; }
.page-hero .hero-lede { max-width: 42em; }
.lex-group { margin-bottom: clamp(2rem, 4vw, 3rem); }
.lex-letter { font-size: 1.3rem; font-weight: 800; color: var(--accent);
  border-bottom: 2px solid var(--border); padding-bottom: .5rem; margin-bottom: 1.1rem; }
.lex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr));
  gap: .9rem; }
.lex-entry { display: grid; grid-template-columns: 1fr auto; gap: .3rem .9rem;
  align-items: start; align-content: start; padding: 1rem 1.15rem; border-radius: 14px;
  background: var(--surface); text-decoration: none;
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.lex-entry:hover { background: var(--accent-soft); transform: translateY(-3px);
  box-shadow: var(--shadow); }
.lex-script { font-size: 1.4rem; line-height: 1.3; color: var(--text); text-align: right; }
.lex-latin { color: var(--accent); font-weight: 650; font-size: .98rem;
  line-height: 1.3; align-self: center; }
.lex-gloss { grid-column: 1 / -1; color: var(--text2); font-size: .85rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── word page ──────────────────────────────────────────────────────────── */

.word-script { font-size: clamp(3.2rem, 2.2rem + 8.5vw, 7rem); font-weight: 700;
  line-height: 1.15; margin: 0; }
.word-script [lang="he"] { font-weight: 700; }
.word-name { margin: .1em 0 .2em; }
.word-say { color: rgba(255, 255, 255, .82); font-size: 1.05rem; margin: 0; }
.word-say b { color: #fff; font-weight: 700; letter-spacing: .02em; }
.word-gloss { font-size: clamp(1.25rem, 1.1rem + 1vw, 1.6rem); font-weight: 600;
  line-height: 1.45; letter-spacing: -.01em; margin-bottom: .6rem; }
.word-aliases { color: var(--text3); font-size: .92rem; }
.word-verses { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.word-verses h2 { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  font-size: 1.25rem; }
.verse-translation { font-size: .8rem; font-weight: 500; color: var(--text3);
  margin-left: auto; }
.verse { margin: 0 0 1.2rem; padding: 1.5rem 1.6rem; border-radius: 16px;
  background: var(--surface); }
.verse blockquote { margin: 0; }
.verse blockquote p { font-size: 1.12rem; line-height: 1.7; margin: 0; }
.verse mark { background: var(--marker); color: inherit; padding: .04em .18em;
  border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.verse figcaption { display: grid; gap: .15rem; margin-top: .9rem; }
.verse-ref { font-weight: 700; color: var(--accent); font-size: .92rem;
  font-variant-numeric: tabular-nums; }
.verse-note { color: var(--text2); font-size: .9rem; line-height: 1.55; }
/* locked preview: the four verses that stay in the app */
.word-locked { margin-top: 1.1rem; padding: 1.15rem 1.25rem 1.05rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface), var(--bg)); }
.wl-head { font-weight: 700; font-size: 1rem; margin: 0 0 .65rem; }
.wl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.wl-item { display: flex; align-items: center; gap: .7rem; min-height: 1.9rem; }
.wl-ref { font-size: .92rem; color: var(--text2); white-space: nowrap; font-weight: 600; }
.wl-skel { flex: 1; height: .5rem; border-radius: 99px; background:
  linear-gradient(90deg, var(--surface3), var(--surface2)); opacity: .8; }
.wl-tag { font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); background: var(--accent-soft); padding: .22rem .55rem;
  border-radius: 99px; white-space: nowrap; }
.wl-foot { margin: .8rem 0 0; font-size: .92rem; color: var(--text3); }
.wl-demo { display: inline-block; margin-left: .35rem; font-weight: 600;
  color: var(--accent); text-decoration: none; }
.wl-demo:hover { text-decoration: underline; }

/* share pill */
.share-pill { display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .9rem; padding: .5rem .95rem; border-radius: 99px;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text2); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease); }
.share-pill svg { width: 1rem; height: 1rem; }
.share-pill:hover { border-color: var(--accent); color: var(--accent); }
.share-pill.copied { border-color: var(--accent); color: var(--accent); }

.word-more { color: var(--text3); font-size: .95rem; }
.word-cta { margin-top: clamp(2.2rem, 5vw, 3.2rem); padding: 1.8rem 2rem;
  border-radius: 20px; background: var(--accent-soft); }
.word-cta p { margin-bottom: .6rem; font-weight: 550; }

/* ── plain pages, forms ─────────────────────────────────────────────────── */

.page > * { max-width: 46rem; }
.page-plain { padding-top: clamp(2.5rem, 6vh, 4rem); }
.page h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem); font-weight: 800;
  letter-spacing: -.025em; margin-bottom: 1.2em; }
.page section { margin-bottom: 2.2rem; }
.page section h2 { font-size: 1.3rem; margin-bottom: .5em; }
.page section p { color: var(--text2); max-width: 42em; }
.contact { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.contact form { display: grid; gap: .35rem; max-width: 32rem; margin-top: 1.2rem; }
.contact label { font-size: .9rem; font-weight: 650; margin-top: .9rem; }
.contact input, .contact textarea { padding: .85rem 1.05rem; border-radius: 12px;
  border: 1.5px solid var(--border-strong); background: var(--bg); color: var(--text);
  font: 400 1rem/1.5 "Rubik", sans-serif; transition: border-color .25s var(--ease),
  box-shadow .25s var(--ease); }
.contact input:focus-visible, .contact textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.contact textarea { resize: vertical; }
.contact button { margin-top: 1.1rem; justify-self: start; }
.contact .form-done { color: var(--accent); }

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot { background: #0A1628; color: #A8B5C4; margin-top: clamp(3rem, 8vw, 6rem); }
.foot-grid { max-width: calc(var(--shell) + 2 * var(--gutter)); margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter); display: grid; gap: 2.5rem;
  grid-template-columns: 2fr 1fr 1fr; }
.foot .wordmark { color: #fff; }
.foot .wordmark span { color: #5B9BFF; }
.foot-tagline { font-style: italic; color: #7FA8E8; margin: 0 0 .6rem; }
.foot-written { font-size: .88rem; color: #7A8BA2; margin: 0; }
.foot-nav, .foot-legal { display: grid; gap: .55rem; align-content: start; }
.foot a { color: #A8B5C4; text-decoration: none; font-size: .95rem; }
.foot a:hover { color: #fff; }
.foot-settings { width: fit-content; min-height: 44px; padding: 0; border: 0;
  background: none; color: #A8B5C4; font: 400 .95rem/1.4 "Rubik", sans-serif;
  text-align: start; cursor: pointer; }
.foot-settings:hover { color: #fff; }
.foot-legal p { font-size: .85rem; color: #7A8BA2; margin: .4rem 0 0; }
:root[data-theme="dark"] .foot { border-top: 1px solid var(--border); }

/* ── Analytics consent ─────────────────────────────────────────────────── */

.analytics-consent { position: fixed; z-index: 95;
  left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom)); width: min(38rem, calc(100% - 2rem));
  margin-inline: auto; padding: 1.15rem; display: grid; grid-template-columns: 1fr auto;
  gap: 1rem 1.3rem; align-items: center; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--bg); color: var(--text);
  box-shadow: var(--shadow-lift); }
.analytics-consent[hidden] { display: none; }
.analytics-consent h2 { margin: 0 0 .3rem; font-size: 1.05rem; line-height: 1.3; }
.analytics-consent p { margin: 0; max-width: 44ch; color: var(--text2);
  font-size: .88rem; line-height: 1.5; }
.analytics-consent p a { color: var(--accent); text-underline-offset: .18em; }
.analytics-consent-actions { display: grid; gap: .25rem; min-width: 12rem; }
.analytics-consent-actions .btn { width: 100%; min-height: 44px; padding: .65rem .9rem;
  white-space: nowrap; }
.analytics-decline { min-height: 44px; padding: .55rem .8rem; border: 0;
  background: transparent; color: var(--text2); font: 600 .82rem/1.35 "Rubik", sans-serif;
  cursor: pointer; }
.analytics-decline:hover { color: var(--text); }
.analytics-consent :focus-visible, .foot-settings:focus-visible {
  outline: 2px solid var(--accent-light); outline-offset: 3px; }
html.analytics-choice-open .continue-bar { transform: translate(-50%, 130%); }

@media (max-width: 620px) {
  .analytics-consent { grid-template-columns: 1fr; gap: .9rem; padding: 1rem;
    bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .analytics-consent-actions { min-width: 0; }
}

/* ── motion ─────────────────────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(18px); }
                  to { opacity: 1; transform: none; } }
html.js .hero-inner > * { animation: rise .7s var(--ease) both; }
html.js .hero-inner > *:nth-child(2) { animation-delay: .08s; }
html.js .hero-inner > *:nth-child(3) { animation-delay: .16s; }
html.js .hero-inner > *:nth-child(4) { animation-delay: .24s; }
html.js .reveal { opacity: 0; transform: translateY(14px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: var(--stagger, 0s); }
html.js .reveal.in { opacity: 1; transform: none; }
@view-transition { navigation: auto; }

html.settle *, html.settle *::before, html.settle *::after {
  animation: none !important; transition: none !important; }
html.settle .reveal { opacity: 1 !important; transform: none !important; }
html.settle { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .cover-glyph { transform: rotate(-8deg) !important; }
  @view-transition { navigation: none; }
}

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .app-grid { grid-template-columns: 1fr; }
  .phone { width: min(280px, 88%); }
  .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 680px) {
  .top { flex-wrap: wrap; row-gap: .1rem; }
  .topnav { order: 3; flex-basis: 100%; gap: 1.1rem; margin-top: .3rem; }
  .lang-switch { margin-left: auto; }
}
@media (max-width: 620px) {
  body { font-size: 1rem; }
  .topnav a { font-size: .88rem; }
  .wordmark { font-size: 1.05rem; }
  .hero { min-height: min(88svh, 46rem); }
  .shelf { grid-template-columns: 1fr 1fr; }
  .cover { aspect-ratio: 3.6 / 5; padding: 1rem; }
  .cover .cover-glyph { font-size: 6.5rem; }
  .cover-title { font-size: 1.02rem; }
  .cover-meta { font-size: .74rem; }
  .verse { padding: 1.15rem 1.2rem; }
}
@media (max-width: 400px) {
  .shelf { grid-template-columns: 1fr; }
  .cover { aspect-ratio: 4 / 3.4; }
}
form.sent :is(label, input, textarea, button, .form-note) { display: none; }
form.sent .form-done { display: block; }
.hero-method { color: #0F4FA6; font-weight: 650; }
.hero-proof { max-width: 34rem; margin-top: 1.5rem; color: #526579; font-size: .82rem;
  font-weight: 600; letter-spacing: .015em; }
.btn svg { width: 1.15em; height: 1.15em; }
.hero-art-wrap { position: absolute; z-index: 2; right: max(-7rem, -5vw); bottom: -2.5rem;
  width: min(65vw, 61rem); pointer-events: none; }
.hero-art { display: block; width: 100%; filter: drop-shadow(0 30px 32px rgba(28, 41, 51, .2)); }
.root-word { position: absolute; z-index: 4; right: clamp(1.25rem, 7vw, 7rem); bottom: 2rem;
  display: grid; grid-template-columns: auto 1fr; gap: .05rem .8rem; align-items: baseline;
  width: min(21rem, calc(100% - 2.5rem)); padding: .85rem 1rem; border-radius: 14px;
  background: rgba(255, 255, 255, .94); color: #0A1628; text-decoration: none;
  box-shadow: 0 18px 44px -22px rgba(10, 22, 40, .55); backdrop-filter: blur(8px); }
.root-script { grid-row: 1 / 3; color: #0038B8; font-size: 2rem; }
.root-name { font-weight: 750; font-size: 1.02rem; }
.root-gloss { color: #526579; font-size: .72rem; line-height: 1.35; }
.root-word:hover { transform: translateY(-3px); }

.home .top-hero .wordmark, .home .top-hero .topnav a { color: #0A1628; }
.home .top-hero .wordmark span { color: #0038B8; }
.home .top-hero .topnav a:hover { color: #0038B8; }
.home .top-hero .theme-toggle, .home .top-hero .locale-menu summary { color: #46586C; }
.home .top-hero .theme-toggle:hover, .home .top-hero .locale-menu summary:hover {
  color: #0A1628; background: rgba(255, 255, 255, .58); }

.mission-bridge { background: #0A1628; color: #fff; }
.mission-bridge-inner { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(18rem, 1.2fr);
  gap: 1rem clamp(2rem, 7vw, 7rem); align-items: start; width: min(100%, calc(var(--shell) + 2 * var(--gutter)));
  margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
.mission-bridge h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.8rem); }
.mission-bridge p { color: #B8C7D8; max-width: 42rem; }
.mission-bridge .arrow-link { grid-column: 2; color: #FFD9A8; }

.band.featured-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem);
  gap: clamp(2.5rem, 8vw, 7rem); align-items: center; width: min(100%, calc(var(--shell) + 2 * var(--gutter)));
  margin-inline: auto; padding-inline: var(--gutter); }
.band.featured-guide > * { max-width: none; margin: 0; padding: 0; }
.featured-copy { max-width: 38rem !important; }
.featured-copy p { color: var(--text2); font-size: 1.12rem; }
.featured-copy .btn { margin-top: 1rem; }
.featured-cover .cover { width: 100%; border-radius: 16px; }

.guide-continuation { position: relative; background: linear-gradient(180deg, #E8DCC7 0,
  var(--surface) clamp(4rem, 8vw, 7rem)); }
.guide-continuation .cover, .guides-index .cover { border-radius: 16px; }
.about-intro { font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.45;
  color: var(--text) !important; font-weight: 600; margin-bottom: 3.5rem !important; }
.about-section { display: grid; grid-template-columns: minmax(12rem, .7fr) 1.3fr;
  gap: 1rem 3rem; padding: 2rem 0; margin: 0 !important; border-top: 1px solid var(--border); }
.about-section h2, .about-section p { margin: 0; }
.support-way { padding: 1.5rem 0; border-top: 1px solid var(--border); }
.project-note, .editorial-note { margin-top: 2.5rem; padding: 1.5rem 1.7rem;
  border-radius: 14px; background: var(--warm-soft); }
.project-note p, .editorial-note p { color: var(--text2); }

/* ── lexicon discovery and answer-first entries ────────────────────────── */

.lex-start { padding-bottom: 2rem; }
.theme-paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.theme-path { min-height: 7rem; padding: 1.1rem; border: 0; border-radius: 14px;
  background: var(--surface); color: var(--text); text-align: left; cursor: pointer;
  font: inherit; transition: transform .2s var(--ease), background .2s var(--ease); }
.theme-path:hover, .theme-path.is-active { transform: translateY(-2px); background: var(--accent-soft); }
.theme-path span { display: block; color: var(--accent); font-weight: 750; }
.theme-path small { display: block; margin-top: .35rem; color: var(--text2); line-height: 1.45; }
.lex-tools-wrap { width: min(100% - 2 * var(--gutter), var(--shell)); margin: 2rem auto 0;
  padding: 1.3rem; border-radius: 16px; background: var(--surface); }
.lex-tools { display: grid; gap: .7rem; }
.lex-tools > label { font-size: .88rem; font-weight: 700; }
.lex-search-row { display: flex; gap: .7rem; }
.lex-search-row input { flex: 1; min-width: 0; min-height: 48px; padding: .75rem 1rem;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg);
  color: var(--text); font: inherit; }
.lex-search-row button, .theme-filters button { min-height: 44px; padding: .55rem .9rem;
  border: 0; border-radius: 11px; background: var(--bg); color: var(--text2);
  font: 650 .88rem "Rubik", sans-serif; cursor: pointer; }
.lex-search-row button.is-active, .theme-filters button.is-active { background: var(--accent); color: #fff; }
.theme-filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.lex-status { margin: 0; color: var(--text3); font-size: .82rem; }
.letter-jump { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.letter-jump span { margin-right: .5rem; color: var(--text3); font-size: .78rem; }
.letter-jump a { display: grid; place-items: center; min-width: 40px; min-height: 40px;
  border-radius: 10px; text-decoration: none; font-weight: 700; }
.letter-jump a:hover { background: var(--bg); }
.lex-entry { grid-template-columns: 1fr auto; border-radius: 14px; }
.lex-entry[hidden], .lex-group[hidden] { display: none; }
.lex-alt { grid-column: 1; color: var(--text3); font-size: .72rem; }
.lex-entry:has(.lex-alt) .lex-gloss { grid-row: 3; }
.lex-empty { color: var(--text2); text-align: center; }
.word-summary h2.word-gloss { color: var(--text); font-size: clamp(1.25rem, 1.1rem + 1vw, 1.6rem);
  line-height: 1.45; letter-spacing: -.01em; text-transform: none; }
.word-latin, .word-aliases { color: var(--text3); font-size: .92rem; }
.word-sourcing { padding: 1.3rem 1.5rem; border-radius: 14px; background: var(--surface); }
.word-sourcing p { color: var(--text2); }

/* ── controls, forms, footer touch targets ─────────────────────────────── */

.btn, button, input, textarea, summary { touch-action: manipulation; }
.btn { min-height: 48px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.cover { border-radius: 16px; }
:root[data-theme="dark"] .home .top-hero .theme-toggle,
:root[data-theme="dark"] .home .top-hero .locale-menu summary { color: rgba(255, 255, 255, .8); }
:root[data-theme="dark"] .guide-continuation { background: linear-gradient(180deg, #243247 0,
  var(--surface) clamp(4rem, 8vw, 7rem)); }

/* ── one authored entrance moment on home ──────────────────────────────── */

@keyframes hero-unfold { from { opacity: 0; filter: blur(8px); clip-path: inset(20% 0 0 22%); }
                        to { opacity: 1; filter: blur(0); clip-path: inset(0); } }
html.js:not(.settle) .home .hero-art { animation: hero-unfold .9s var(--ease) both; }
html.js .home .reveal { opacity: 1; transform: none; transition: none; }

@media (max-width: 900px) {
  .hero-art-wrap { width: min(53rem, 115vw); right: -13vw; bottom: -1rem; }
  .root-word { right: 1rem; bottom: 1rem; }
  .mission-bridge .arrow-link { grid-column: 1; }
  .band.featured-guide { grid-template-columns: 1fr minmax(15rem, 19rem); gap: 2.5rem; }
  .theme-paths { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .top { flex-wrap: wrap; padding-block: .7rem; }
  .topnav { order: 3; flex-basis: 100%; justify-content: space-between; gap: .25rem; margin-top: .1rem; }
  .topnav a { font-size: .85rem; }
  .header-tools { margin-left: auto; }
  .hero-proof { max-width: 25rem; }
  .hero-art-wrap { width: 52rem; max-width: 145vw; right: -24vw; bottom: 1rem; }
  .root-word { left: 1rem; right: auto; bottom: 1.6rem; }
  .band.featured-guide { grid-template-columns: 1fr; }
  .featured-cover { width: min(21rem, 100%); }
  .theme-paths { grid-template-columns: 1fr; }
  .lex-search-row { flex-direction: column; }
  .lex-search-row button { align-self: stretch; }
}

/* ── photo-led product story v2 ────────────────────────────────────────── */

.home .top-hero .wordmark,
.home .top-hero .topnav a { color: #fff; }
.home .top-hero .wordmark span { color: #8FC5FF; }
.home .top-hero .topnav a:hover { color: #fff; }
.home .top-hero .theme-toggle,
.home .top-hero .locale-menu summary { color: rgba(255, 255, 255, .84); }
.home .top-hero .theme-toggle:hover,
.home .top-hero .locale-menu summary:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.hero-backdrop, .page-photo { position: absolute; z-index: 0; inset: 0;
  width: 100%; height: 100%; object-fit: cover; }
.hero-backdrop { object-position: center center; }
.btn { border-radius: 13px; }
.btn-warm { background: #FF9A3C; }
.guide-continuation { background: var(--surface); }

.cover.cover-photo { aspect-ratio: 4 / 5; padding: 0; background: #172235; isolation: isolate; }
.cover.cover-photo::after { z-index: 1; background: linear-gradient(to top,
  rgba(4, 10, 24, .92) 0%, rgba(4, 10, 24, .66) 34%, rgba(4, 10, 24, .06) 72%); }
.cover-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--cover-pos, center center);
  transition: transform .75s var(--ease), filter .75s var(--ease); }
.cover:hover .cover-image { transform: scale(1.035); filter: saturate(1.05) contrast(1.02); }
.cover::before { content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; transform: translateX(-130%) skewX(-14deg);
  background: linear-gradient(105deg, transparent 42%,
    rgba(255, 255, 255, .16) 50%, transparent 58%); }
.cover:hover::before { transform: translateX(130%) skewX(-14deg);
  transition: transform .9s var(--ease); }
.cover.cover-photo .cover-text { padding: 1.35rem; }
.cover.cover-photo .cover-title { font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem); }
.cover.cover-photo .cover-meta { color: #DFE8F2; }
.featured-cover .cover { aspect-ratio: 3 / 4; }

.phone { width: min(330px, 100%); }
.phone-screen { background: #fff; color: #0A1628; border-color: #07111F;
  box-shadow: 0 34px 70px -30px rgba(10, 22, 40, .58); }
.phone-screen::before { background: #07111F; }
.phone-hero { flex-basis: 43%; padding: 1.15rem; background: #172235; }
.phone-hero-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone-hero-photo::after { z-index: 1; background: linear-gradient(to top,
  rgba(4, 10, 24, .82), rgba(4, 10, 24, .08) 70%); }
.phone-title { z-index: 2; font-size: 1.04rem; }
.phone-prose { padding-top: .7rem; color: #46586C; }

.store-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 5vw, 4rem); align-items: center; width: min(100% - 2 * var(--gutter), var(--shell));
  margin: clamp(2.5rem, 6vw, 5rem) auto; padding: clamp(2rem, 4vw, 3.3rem);
  border-radius: 16px; background: #0A2E78; color: #fff;
  box-shadow: 0 22px 52px -30px rgba(5, 15, 35, .62); }
.store-copy { max-width: 39rem; }
.store-copy h2 { color: #fff; margin-bottom: .35em; }
.store-copy p { margin: 0; color: #CADBF7; }
.store-badges { display: grid; grid-template-columns: repeat(2, minmax(10rem, 1fr)); gap: .7rem; }
.store-badge { display: grid; grid-template-columns: 2.2rem 1fr; gap: .65rem; align-items: center;
  min-height: 4.2rem; padding: .65rem .85rem; border-radius: 12px;
  background: rgba(255, 255, 255, .1); color: #fff; opacity: .92; }
.store-badge > svg { width: 1.85rem; height: 1.85rem; }
.store-badge small, .store-badge b { display: block; line-height: 1.25; }
.store-badge small { color: #BFD3F5; font-size: .68rem; }
.store-badge b { margin-top: .12rem; font-size: .9rem; }
/* a live store is a link; a planned one stays quieter */
a.store-badge { opacity: 1; text-decoration: none;
  transition: background .3s var(--ease), transform .3s var(--ease); }
a.store-badge:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.store-badge[aria-disabled="true"] { opacity: .72; }
a.stage-badge { text-decoration: none; }
.store-panel-compact { grid-template-columns: 1fr; width: 100%; margin: 1.2rem 0 0;
  padding: 1.35rem; gap: 1rem; box-shadow: none; }
.store-panel-compact .store-copy h2 { font-size: 1.28rem; }
.store-panel-compact .store-copy p { font-size: .88rem; }
.store-panel-compact .store-badges { grid-template-columns: 1fr 1fr; }
.features > .store-panel { grid-column: 1 / -1; }
.word-cta { padding: 0; background: transparent; }
.word-cta > p { color: var(--text2); font-size: 1.05rem; margin-bottom: .9rem; }
.word-cta .store-panel { margin-top: 1.1rem; }

.page-photo-hero, .guide-hero-photo { min-height: clamp(26rem, 55svh, 40rem); isolation: isolate; }
.page-photo-hero::after, .guide-hero-photo::after { z-index: 1;
  background: linear-gradient(90deg, rgba(5, 13, 25, .91), rgba(5, 13, 25, .58) 52%, rgba(5, 13, 25, .14)); }
.page-photo-hero .hero-inner, .guide-hero-photo .hero-inner { z-index: 2; align-self: end; }
.guides-hero .page-photo, .about-hero .page-photo { object-position: center; }
.guide-hero-photo .page-photo { object-position: center 48%; }
.guide-hero-photo h1 { max-width: 16ch; }
.guide-hero-photo .guide-subtitle { max-width: 38rem; }

.about-hero h1 { max-width: 19ch; font-size: clamp(2.4rem, 4.9vw, 5rem); line-height: 1.03; }
.about-hero .hero-lede { max-width: 42rem; color: #E2EAF4; }
.about-page > * { max-width: calc(var(--shell) + 2 * var(--gutter)); }
.about-story { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.about-story-sections { max-width: 43rem; }
.about-section { display: block; padding: 2.1rem 0; }
.about-section:first-child { padding-top: 0; border-top: 0; }
.about-section h2 { font-size: clamp(1.45rem, 2.2vw, 2rem); margin-bottom: .45em; }
.about-section p { color: var(--text2); max-width: 42rem; }
.about-photo { position: sticky; top: 2rem; margin: 0; overflow: hidden; border-radius: 16px;
  background: var(--surface); box-shadow: 0 24px 56px -34px rgba(10, 22, 40, .55); }
.about-photo img { display: block; width: 100%; aspect-ratio: 4 / 4.8; object-fit: cover; }
.about-photo figcaption { padding: 1.15rem 1.25rem 1.35rem; color: var(--text2);
  font-size: .88rem; line-height: 1.55; }
.about-page .contact { max-width: 43rem; margin-top: clamp(3rem, 8vw, 6rem); }
.about .foot { margin-top: 0; }

@keyframes hero-focus { from { filter: blur(8px) saturate(.8); transform: scale(1.025); }
                        to { filter: blur(0) saturate(1); transform: scale(1); } }
html.js:not(.settle) .home .hero-backdrop { animation: hero-focus 1.05s var(--ease) both; }

@media (max-width: 900px) {
  .about-photo { position: static; max-width: 34rem; }
  .store-panel { grid-template-columns: 1fr; }
  .store-badges { justify-self: start; }
}

@media (max-width: 680px) {
  .hero-backdrop { object-position: 62% center; }
  .hero-actions { margin-top: 1.35rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .shelf { grid-template-columns: 1fr; }
  .cover.cover-photo { aspect-ratio: 5 / 4; }
  .cover-image { object-position: var(--cover-pos-mobile, var(--cover-pos, center center)); }
  .featured-cover { width: 100%; }
  .featured-cover .cover { aspect-ratio: 5 / 4; }
  .cover.cover-photo .cover-text { padding: 1.2rem; }
  .app-grid { gap: 2.2rem; }
  .phone { width: min(315px, 92%); }
  .store-panel { width: calc(100% - 2rem); margin-inline: auto; padding: 1.5rem; }
  .store-badges { grid-template-columns: 1fr; width: 100%; }
  .store-panel-compact { width: 100%; margin-inline: 0; }
  .store-panel-compact .store-badges { grid-template-columns: 1fr; }
  .page-photo-hero, .guide-hero-photo { min-height: 34rem; }
  .page-photo-hero::after, .guide-hero-photo::after { background: linear-gradient(0deg,
    rgba(5, 13, 25, .94), rgba(5, 13, 25, .52) 74%, rgba(5, 13, 25, .3)); }
  .about-hero h1 { font-size: clamp(2.3rem, 11vw, 3.5rem); }
  .about-photo img { aspect-ratio: 5 / 4; }
}

/* ═══ 2026-08-25 design pass: device stage, grain, live demo ═══ */

/* ── film grain for dark / atmosphere sections ──────────────────────────── */

.noise::after { content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── hero with the device stage ─────────────────────────────────────────── */

.app-hero { display: block; min-height: 0; }
.app-hero-grid { position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(3rem, 7vw, 6.5rem); align-items: center;
  min-height: min(calc(100svh - 4.5rem), 56rem);
  max-width: calc(var(--shell) + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: var(--gutter); }
.app-hero .hero-inner { max-width: none; margin: 0;
  /* the shared .hero rule pins its inner to the bottom; this hero centres
     its copy against the device instead — without this the copy hangs
     ~190px below the phone's optical centre. */
  align-self: center;
  padding: clamp(3rem, 6vh, 4.5rem) 0 clamp(3rem, 6vh, 4.5rem); }
.app-hero .display { max-width: 10.5em; }

.device-stage { position: relative; z-index: 3; justify-self: center;
  padding: clamp(2.5rem, 5vh, 4rem) clamp(3.2rem, 5vw, 4.5rem) 1rem; }
.device-stage::before { content: ""; position: absolute; left: 50%; bottom: -8%;
  width: 82%; height: 160px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 154, 60, .16), transparent 70%);
  pointer-events: none; }
.phone-stage { width: min(300px, 30svh, 62vw); margin: 0; }
.phone-stage .phone-screen { box-shadow: 0 46px 90px -30px rgba(2, 6, 16, .75),
  inset 0 0 0 1.5px rgba(255, 255, 255, .06); }

/* glass widgets floating over the phone */
.widget { position: absolute; z-index: 4; width: 236px; text-align: left;
  background: linear-gradient(160deg, rgba(22, 39, 63, .9), rgba(10, 22, 40, .94));
  color: #fff; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px;
  padding: .9rem 1rem .95rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 28px 60px rgba(2, 6, 16, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: widgetFloat 8s ease-in-out infinite; display: grid; gap: .55rem; }
.widget-audio { right: -3%; top: 18%; animation-delay: -2.5s; }
.widget-word { left: 0; bottom: 16%; width: 248px; animation-delay: -5.5s; }
@keyframes widgetFloat { 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); } }
.widget-head { display: flex; align-items: center; gap: .5rem; font-size: .68rem;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); }
.widget-head svg { width: 15px; height: 15px; color: #39C7FF; }
.widget-aleph { display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 6px; background: rgba(57, 199, 255, .18); color: #39C7FF;
  font-size: .95rem; font-weight: 700; line-height: 1; padding-bottom: 1px; }
.widget-audio-row { display: flex; align-items: center; gap: .65rem; }
.widget-play { flex: 0 0 auto; display: grid; place-items: center; width: 34px;
  height: 34px; border-radius: 50%; background: #FF9A3C;
  box-shadow: 0 6px 16px rgba(255, 154, 60, .4); }
.widget-play svg { width: 15px; height: 15px; fill: #0A1628; margin-left: 2px; }
.widget-audio-meta { display: grid; gap: .05rem; min-width: 0; }
.widget-audio-meta b { font-size: .8rem; line-height: 1.25; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.widget-audio-meta small { font-size: .7rem; color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums; }
.widget-wave { display: flex; align-items: flex-end; gap: 2.5px; height: 20px; }
.widget-wave i { flex: 1; background: rgba(255, 255, 255, .32); border-radius: 2px;
  height: 30%; }
.widget-wave i:nth-child(2n) { height: 65%; }
.widget-wave i:nth-child(3n) { height: 45%; }
.widget-wave i:nth-child(5n) { height: 90%; }
.widget-wave i:nth-child(7n) { height: 55%; }
.widget-wave i:nth-child(-n+7) { background: #39C7FF; }
.widget-wave i:nth-child(5), .widget-wave i:nth-child(9),
.widget-wave i:nth-child(13) { animation: wavePulse 1.8s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes wavePulse { 0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.42); } }
.widget-word-row { display: flex; align-items: baseline; gap: .6rem; }
.widget-word-row [lang="he"] { font-size: 1.45rem; color: #fff; }
.widget-word-row span { display: grid; gap: .05rem; }
.widget-word-row b { font-size: .85rem; color: #7FB7FF; }
.widget-word-row small { font-size: .68rem; color: rgba(255, 255, 255, .55);
  letter-spacing: .03em; }
.widget-gloss { font-size: .76rem; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.widget-verse { font-size: .69rem; line-height: 1.45; color: rgba(255, 255, 255, .55); }
.widget-verse b { color: #39C7FF; font-weight: 650; }

/* ── store pills under the phone ────────────────────────────────────────── */

.stage-badges { position: relative; z-index: 4; display: flex; justify-content: center;
  gap: .7rem; flex-wrap: wrap; margin-top: clamp(3.4rem, 6vh, 5rem); }
.stage-badge { display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255, 255, 255, .14); border-radius: 999px;
  padding: .6rem 1.15rem; color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .3s var(--ease); }
.stage-badge:hover { background: rgba(255, 255, 255, .22); }
.stage-badge svg { width: 18px; height: 18px; }
.stage-badge b { font-size: .93rem; font-weight: 650; white-space: nowrap; }
.stage-note { position: relative; z-index: 4; text-align: center;
  font-size: .8rem; color: rgba(255, 255, 255, .82); margin: .85rem 0 0;
  text-shadow: 0 1px 6px rgba(4, 10, 24, .35); }
.store-badge svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* ── featured guide, v3 ─────────────────────────────────────────────────── */

.featured-v3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter); }
.featured-v3 > * { max-width: none; padding-inline: 0; margin-inline: 0; }
.featured-v3-cover .cover { max-width: 340px; margin-inline: auto; }
.featured-v3-copy h2 { margin-bottom: .4em; }
.featured-excerpt { margin: 1.4rem 0 1.6rem; max-width: 40rem; font-size: 1.02rem; }
.featured-excerpt p { margin-bottom: .9em; }

/* ── bookshelf with first lines ─────────────────────────────────────────── */

.shelf-books { grid-template-columns: repeat(auto-fit, minmax(min(14.5rem, 100%), 1fr)); }
.book-line { font-size: .9rem; line-height: 1.55; color: var(--text2);
  margin: .7rem 0 0; }

/* ── the ink band: one word, opened ─────────────────────────────────────── */

.band-ink { position: relative; background: #0A1628; color: #F4F7FB; overflow: clip; }
.band-ink > * { position: relative; z-index: 2; }
.band-ink h2 { color: #fff; }
.band-ink .band-lede { color: #A8B5C4; }
.band-ink .arrow-link { color: #39C7FF; }
.open-word { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px; }
.open-word-script { font-size: clamp(3.6rem, 2.4rem + 5vw, 6.2rem); font-weight: 700;
  line-height: 1.12; margin: 0; color: #fff; }
.open-word-name { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem 1rem; font-size: 1.3rem; font-weight: 750; margin: .2rem 0 .35rem;
  color: #7FB7FF; }
.open-word-name span { font-size: .88rem; font-weight: 400; color: #91A0B2; }
.open-word-name b { color: #A8B5C4; font-weight: 650; letter-spacing: .02em; }
.open-word-gloss { font-size: 1.14rem; font-weight: 600; line-height: 1.5;
  margin: 0 0 1.1rem; max-width: 30em; color: rgba(255, 255, 255, .92); }
.open-verse { background: #101F36; }
.open-verse blockquote p { color: rgba(255, 255, 255, .92); }
.open-verse mark { background: rgba(255, 220, 61, .42); color: inherit; }
.open-verse .verse-ref { color: #39C7FF; }
.open-verse .verse-note { color: #A8B5C4; }
.word-constellation { display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.word-constellation .chip { background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14); }
.word-constellation .chip-latin { color: #7FB7FF; }
.word-constellation .chip [lang="he"] { color: #fff; }
.word-constellation .chip:hover { background: rgba(255, 255, 255, .16); }

/* ── the reader demo: tap → sheet ───────────────────────────────────────── */

.phone-demo .phone-screen { overflow: hidden; }
.phone-demo .phone-prose { position: relative; }
.demo-dim { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: rgba(4, 10, 24, .5); opacity: 0;
  animation: demoDim 5s ease-in-out infinite; }
.phone-demo .phone-prose .demo-dim { border-radius: 0; }
.demo-target { position: relative; white-space: nowrap; }
.demo-word { border-radius: .3em; padding: .04em .12em; margin: -.04em -.12em;
  animation: demoWord 5s ease-in-out infinite; }
.demo-hand { position: absolute; z-index: 6; width: 26px; height: 26px;
  right: -1.35em; bottom: -1.5em; opacity: 0;
  filter: drop-shadow(0 3px 6px rgba(2, 6, 16, .4));
  animation: demoHand 5s ease-in-out infinite; }
.demo-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; gap: .3rem; background: var(--surface);
  border-radius: 20px 20px 0 0; padding: .7rem 1.15rem 1.15rem;
  box-shadow: 0 -14px 34px rgba(2, 6, 16, .35);
  transform: translateY(105%);
  animation: demoSheet 5s cubic-bezier(.32, .9, .35, 1) infinite; }
.demo-sheet-grab { width: 36px; height: 4px; border-radius: 99px;
  background: var(--border-strong); margin: 0 auto .35rem; }
.demo-sheet-word { display: flex; align-items: baseline; gap: .55rem;
  font-size: .95rem; }
.demo-sheet-word [lang="he"] { font-size: 1.3rem; }
.demo-sheet-word b { color: var(--accent); font-weight: 700; }
.demo-sheet-word i { color: var(--text3); font-style: normal; font-size: .76rem; }
.demo-sheet-gloss { font-size: .8rem; color: var(--text2); line-height: 1.5; }
.demo-sheet-verse { font-size: .72rem; color: var(--text3); line-height: 1.5; }
.demo-sheet-verse b { color: var(--accent); font-weight: 650; }

@keyframes demoHand {
  0%, 4% { opacity: 0; transform: translate(14px, 16px); }
  10% { opacity: 1; transform: translate(0, 0); }
  14% { transform: scale(.86); }
  17% { transform: scale(1); }
  58% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes demoWord {
  0%, 12% { background: transparent; }
  16%, 60% { background: var(--marker); }
  70%, 100% { background: transparent; }
}
@keyframes demoDim {
  0%, 14% { opacity: 0; }
  22%, 60% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes demoSheet {
  0%, 15% { transform: translateY(105%); }
  24%, 60% { transform: translateY(0); }
  72%, 100% { transform: translateY(105%); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-hand { display: none; }
  .demo-dim { opacity: .35; animation: none; }
  .demo-sheet { transform: none; animation: none; }
  .demo-word { background: var(--marker); animation: none; }
  .widget, .widget-wave i { animation: none !important; }
}
/* ?settle freezes animations at their start; pose the demo open instead */
html.settle .demo-hand { display: none; }
html.settle .demo-dim { opacity: .35; }
html.settle .demo-sheet { transform: none; }
html.settle .demo-word { background: var(--marker); }

/* ── guide page demo ────────────────────────────────────────────────────── */

.guide-demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
  max-width: calc(var(--shell) + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: var(--gutter); }
.guide-demo-grid > * { max-width: none; padding-inline: 0; margin-inline: 0; }
.guide-demo-copy .band-lede { max-width: 34em; }
.guide-demo-widgets { display: grid; gap: 1rem; margin-top: 2rem;
  max-width: 340px; }
.guide-demo-widgets .widget { position: static; width: 100%; animation: none; }
.widget-progress-title { font-size: .82rem; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; }
.widget-bar { display: block; height: 5px; border-radius: 99px;
  background: rgba(255, 255, 255, .16); overflow: hidden; }
.widget-bar i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #3B7BE8, #39C7FF); }
.guide-demo-stage { display: flex; justify-content: center; }
.guide-demo .phone { width: min(300px, 82vw); }
@media (max-width: 860px) {
  .guide-demo-grid { grid-template-columns: 1fr; }
  .guide-demo-stage { order: -1; }
  .guide-demo-widgets { max-width: none; }
}

/* ── sticky continue bar (guide pages) ──────────────────────────────────── */

.continue-bar { position: fixed; left: 50%; bottom: max(.9rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 130%); z-index: 80;
  display: flex; align-items: center; gap: 1.1rem;
  width: min(calc(100% - 2 * var(--gutter)), 44rem);
  background: linear-gradient(160deg, rgba(16, 31, 54, .92), rgba(10, 22, 40, .96));
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  padding: .6rem .8rem .6rem 1.4rem; color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(2, 6, 16, .5);
  transition: transform .45s var(--ease); }
.continue-bar.on { transform: translate(-50%, 0); }
.continue-bar > b { font-size: .95rem; white-space: nowrap; }
.continue-bar-badges { display: flex; gap: .5rem; margin-left: auto; }
.continue-bar .stage-badge { padding: .45rem .9rem; }
.continue-bar .stage-badge b { font-size: .85rem; }
@media (max-width: 640px) {
  .continue-bar { border-radius: 20px; flex-wrap: wrap; gap: .55rem;
    padding: .7rem .8rem; justify-content: center; }
  .continue-bar-badges { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .continue-bar { transition: none; }
}

/* ── about: alef-bet sections ───────────────────────────────────────────── */

.about-section { display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: 1.15rem; align-items: start; }
.about-letter { display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 16px; background: var(--accent-soft); color: var(--accent);
  font-size: 1.7rem; font-weight: 800; }
.about-section h2 { margin-top: .3rem; }

/* ── stage responsive ───────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .app-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .app-hero .hero-inner { padding-inline: var(--gutter);
    padding-top: calc(var(--header-pull) + clamp(1.25rem, 4vh, 2.75rem));
    padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
  .device-stage { padding: 0 0 2.5rem; justify-self: center; width: 100%;
    display: grid; justify-items: center; gap: .9rem; }
  .widget { position: static; width: min(300px, 92%); animation: none; }
  .stage-badges, .stage-note { grid-column: 1; }
  .featured-v3 { grid-template-columns: 1fr; }
  .featured-v3-cover { order: -1; }
  .featured-v3-cover .cover { max-width: 280px; }
}
@media (max-width: 560px) {
  .phone-stage { width: min(270px, 80vw); }
  .open-word { grid-template-columns: 1fr; }
  .about-section { grid-template-columns: 44px 1fr; gap: .85rem; }
  .about-letter { width: 44px; height: 44px; font-size: 1.35rem; border-radius: 12px; }
}

/* ── word-list demo: pick in the list → card pushes in → card scrolls ───── */

.phone-word-demo { width: min(300px, 82vw); margin: 0; }
.wdemo-screen { position: relative; overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column; }
.wdemo-status { color: var(--text); z-index: 8; }
.wdemo-status b { text-shadow: none; }
.wdemo-status svg { filter: none; }
.wdemo-status .phone-island { background: #0A1628; }
.wdemo-head { padding: 3rem 1.15rem .6rem; font-size: 1.15rem; font-weight: 800;
  letter-spacing: -.01em; border-bottom: 1px solid var(--border); }
.wdemo-list { list-style: none; margin: 0; padding: .3rem 0; flex: 1; }
.wdemo-row { position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .62rem 1.15rem; border-bottom: 1px solid var(--border); }
.wdemo-row:last-child { border-bottom: 0; }
.wdemo-row-script { font-size: 1.25rem; color: var(--text); min-width: 3.2rem;
  text-align: right; }
.wdemo-row-text { display: grid; gap: .05rem; min-width: 0; }
.wdemo-row-text b { font-size: .84rem; color: var(--accent); }
.wdemo-row-text small { font-size: .68rem; color: var(--text3); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; }
.wdemo-row-target { animation: wdRow 7s ease-in-out infinite; border-radius: 10px; }
.wdemo-row-target .demo-hand { right: 1.6rem; bottom: -.7rem;
  animation: wdHand 7s ease-in-out infinite; }
.wdemo-card { position: absolute; inset: 0; z-index: 7; background: var(--bg);
  transform: translateX(103%); box-shadow: -18px 0 40px rgba(2, 6, 16, .25);
  animation: wdCard 7s cubic-bezier(.32, .9, .35, 1) infinite;
  display: flex; flex-direction: column; overflow: hidden; }
.wdemo-back { position: relative; z-index: 2; background: var(--bg);
  padding: 2.9rem 1.15rem .55rem; font-size: .8rem; font-weight: 650;
  color: var(--accent); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.wdemo-card-scroll { padding: 1rem 1.15rem 1.4rem; display: grid; gap: .5rem;
  animation: wdScroll 7s ease-in-out infinite; }
.wdemo-card-script { font-size: 2.6rem; font-weight: 700; line-height: 1.15; }
.wdemo-card-name b { font-size: 1.05rem; color: var(--accent); font-weight: 750; }
.wdemo-card-name i { font-style: normal; font-size: .78rem; color: var(--text3);
  margin-left: .5rem; letter-spacing: .02em; }
.wdemo-card-gloss { font-size: .88rem; font-weight: 600; line-height: 1.5;
  margin: 0 0 .3rem; }
.wdemo-verse { background: var(--surface); border-radius: 12px;
  padding: .8rem .9rem; }
.wdemo-verse p { font-size: .78rem; line-height: 1.6; margin: 0 0 .35rem; }
.wdemo-verse mark { background: var(--marker); border-radius: .3em;
  padding: .03em .15em; }
.wdemo-verse b { font-size: .72rem; color: var(--accent);
  font-variant-numeric: tabular-nums; }

@keyframes wdHand {
  0%, 5% { opacity: 0; transform: translate(12px, 14px); }
  11% { opacity: 1; transform: translate(0, 0); }
  15% { transform: scale(.86); }
  18% { transform: scale(1); }
  24%, 100% { opacity: 0; }
}
@keyframes wdRow {
  0%, 12% { background: transparent; }
  16%, 24% { background: var(--accent-soft); }
  30%, 100% { background: transparent; }
}
@keyframes wdCard {
  0%, 19% { transform: translateX(103%); }
  27%, 78% { transform: translateX(0); }
  86%, 100% { transform: translateX(103%); }
}
@keyframes wdScroll {
  0%, 34% { transform: translateY(0); }
  62%, 74% { transform: translateY(min(0px, calc(340px - 100%))); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wdemo-row-target { animation: none; background: var(--accent-soft); }
  .wdemo-row-target .demo-hand { display: none; }
  .wdemo-card { animation: none; transform: none; }
  .wdemo-card-scroll { animation: none; transform: translateY(-12%); }
}
html.settle .wdemo-row-target { background: var(--accent-soft); }
html.settle .wdemo-card { transform: none; }
html.settle .wdemo-card-scroll { transform: translateY(-12%); }

/* ── brand backdrops on dark bands ──────────────────────────────────────── */

/* `.band > *` constrains children to the text column — the backdrop is the
   one child that must ignore it and run edge to edge. */
.band > .band-glyph, .band > .band-vector {
  max-width: none; margin-inline: 0; padding-inline: 0; }

.band-glyph { position: absolute; z-index: 0; right: clamp(-1rem, 1vw, 2rem);
  top: clamp(.5rem, 2vw, 2rem);
  font-size: clamp(8rem, 17vw, 15rem); font-weight: 900; line-height: .82;
  color: rgba(255, 255, 255, .05); pointer-events: none; user-select: none;
  transform: rotate(-8deg); }
.band-vector { position: absolute; z-index: 0; inset-inline: 0; bottom: -1px;
  height: clamp(64px, 7vw, 108px);
  color: rgba(255, 255, 255, .07); pointer-events: none; }
.band-vector svg { display: block; width: 100%; height: 100%; }
.band-vector-tile { background-image: var(--tile); background-repeat: repeat-x;
  background-position: left bottom; background-size: auto 100%; opacity: .07; }
.band-ink { padding-bottom: clamp(6rem, 12vw, 9.5rem); }
@media (max-width: 700px) {
  .band-glyph { font-size: clamp(7rem, 26vw, 11rem); opacity: .8; }
}

/* ── Word of the Day widget promo ─────────────────────────────────────── */
.band-widget { padding-block: clamp(3rem, 8vw, 5.5rem); }
.widget-promo {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
}
.widget-promo-text .kicker { margin-bottom: .6rem; }
.widget-promo-body { color: var(--text-2); max-width: 34rem; }
.widget-promo .phone-lock { justify-self: center; }
@media (max-width: 720px) {
  .widget-promo { grid-template-columns: 1fr; }
  .widget-promo .phone-lock { order: -1; width: min(270px, 80vw); }
}

/* ── the Lock Screen, as iOS draws it ───────────────────────────────────── */

.phone-lock { width: min(300px, 78vw); margin: 0; justify-self: center; }
.lock-screen { display: flex; flex-direction: column; background: var(--atmo);
  color: #fff; }
.lock-screen .cover-glyph { font-size: 11rem; top: auto; bottom: -.12em;
  right: -.08em; transform: rotate(-8deg); }
.lock-face { position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; padding: 1.5rem 1rem 0; }
.lock-padlock { width: 15px; height: 15px; opacity: .9;
  filter: drop-shadow(0 1px 4px rgba(4, 10, 24, .4)); }
.lock-date { margin-top: .55rem; font-size: .82rem; font-weight: 600;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(4, 10, 24, .35); }
.lock-clock { font-size: 3.9rem; font-weight: 550; letter-spacing: -.01em;
  line-height: 1.04; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(4, 10, 24, .35); }
.lock-widget { margin-top: .8rem; width: 84%; border-radius: 16px;
  padding: .6rem .8rem; display: grid; gap: .12rem; text-align: left;
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); }
.lock-widget-row { display: flex; align-items: baseline; gap: .45rem; }
.lock-widget-row [lang="he"] { font-size: 1.1rem; font-weight: 700; color: #fff; }
.lock-widget-row i { font-style: normal; font-size: .74rem; font-weight: 500;
  color: rgba(255, 255, 255, .7); }
.lock-widget-gloss { font-size: .74rem; line-height: 1.35;
  color: rgba(255, 255, 255, .95);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.lock-widget-ref { font-size: .6rem; font-weight: 650; letter-spacing: .04em;
  color: rgba(255, 255, 255, .55); }
.lock-bottom { position: relative; z-index: 2; margin-top: auto;
  display: flex; justify-content: space-between; padding: 0 2rem 1.6rem; }
.lock-circ { display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lock-circ svg { width: 21px; height: 21px; opacity: .95; }
.lock-home { position: absolute; z-index: 3; left: 50%; bottom: 7px;
  transform: translateX(-50%); width: 38%; height: 5px; border-radius: 99px;
  background: rgba(255, 255, 255, .85); }

/* ── the word changes with the calendar: two days trade places ──────────── */

.lock-stack { display: grid; }
.lock-stack > * { grid-area: 1 / 1; }
.lock-stack-date { margin-top: .55rem; justify-items: center; }
.lock-stack-date .lock-date { margin-top: 0; }
.lock-stack-widget { margin-top: .8rem; width: 84%; }
.lock-stack-widget .lock-widget { margin-top: 0; width: 100%; }
.lock-swap-0 { animation: lockSwapA 9s ease-in-out infinite; }
.lock-swap-1 { animation: lockSwapB 9s ease-in-out infinite; }
@keyframes lockSwapA {
  0%, 44% { opacity: 1; transform: translateY(0); }
  49%, 93% { opacity: 0; transform: translateY(-6px); }
  98%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes lockSwapB {
  0%, 44% { opacity: 0; transform: translateY(6px); }
  49%, 93% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .lock-swap-0, .lock-swap-1 { animation: none; }
  .lock-swap-1 { opacity: 0; }
}
html.settle .lock-swap-0, html.settle .lock-swap-1 { animation: none; }
html.settle .lock-swap-1 { opacity: 0; }

/* the widget section on the ink band */
.band-widget .widget-promo { position: relative; z-index: 2; }
.band-widget .kicker { color: #39C7FF; }
.band-widget .widget-promo-body { color: #A8B5C4; }


/* ── tactile presses & reading progress ─────────────────────────────────── */

.btn:active, .chip:active, .stage-badge:active, .lex-entry:active,
.cover:active { transform: scale(.975); transition-duration: .12s; }
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 70; pointer-events: none; transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #0038B8, #39C7FF); }
html.scrolled .read-progress { top: 0; }
@media (max-width: 680px) {
  .top { min-height: 0; padding-block: .65rem .3rem;
    /* notched iPhones: keep the brand row out of the status-bar area */
    padding-top: max(.65rem, env(safe-area-inset-top));
    transition: background .35s var(--ease), box-shadow .35s var(--ease),
                transform .35s var(--ease); }
  html.hidenav .top { transform: translateY(-102%); }
}

/* ── verse of the day ────────────────────────────────────────────────────── */
/* The verse is the hero: it sits on the atmosphere rather than in a card, so
   the page delivers the thing it promises before anything is asked. */
.verse-hero .app-hero-grid { align-items: center; }
.verse-hero .hero-inner { align-self: center; }
.verse-hero-device { align-self: center; }
.verse-hero-device .phone-lock { width: min(280px, 30svh, 60vw); }
.verse-hero-badges { justify-content: flex-start; margin-top: clamp(1.6rem, 4vh, 2.2rem); }
.verse-hero-title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800;
  letter-spacing: -.02em; color: rgba(255, 255, 255, .82); margin-bottom: clamp(1.4rem, 4vh, 2.4rem); }
.verse-hero-card { max-width: 32rem; }
.verse-hero-quote { font-size: clamp(1.45rem, 1.1rem + 1.9vw, 2.6rem); line-height: 1.3;
  font-weight: 650; letter-spacing: -.02em; color: #fff; margin: 0;
  text-wrap: balance; text-shadow: 0 2px 20px rgba(4, 10, 24, .28); }
.verse-hero-ref { margin: 1.1rem 0 0; font-size: 1.05rem; font-weight: 700;
  color: #FFD9A8; letter-spacing: .01em; }
.verse-hero-lede { margin-top: clamp(1.6rem, 4vh, 2.4rem); max-width: 30rem; }

.verse-hebrew .chips { margin-top: .4rem; }
.verse-none { color: var(--text3); }
.verse-none a { color: var(--accent); font-weight: 600; text-decoration: none; }
.verse-none a:hover { text-decoration: underline; }

/* `.band > *` centres its children and supplies the gutter through
   margin-inline and padding-inline. Zeroing either drops the block to the
   left edge of the viewport, so keep both and constrain the text instead. */
.verse-points { list-style: none; display: grid; gap: 1.4rem;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto clamp(2rem, 5vh, 3rem); padding-inline: var(--gutter); }
.verse-point > div { max-width: 42rem; }
.verse-point { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 1rem; align-items: start; }
.verse-point-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.verse-point-icon svg { width: 1.35rem; height: 1.35rem; }
.verse-point b { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
.verse-point span { color: var(--text2); }
@media (max-width: 620px) {
  .verse-hero-quote { font-size: clamp(1.3rem, 1.05rem + 1.6vw, 1.8rem); }
}