/* css/experience.css — the 2026-09-18 evolution layer (homepage + reading).
   Loaded after styles.css. Direction: an illuminated manuscript read by
   candlelight. Parchment is the ground for reading and learning; deep ink is
   kept for moments of revelation (the dial, the opening of a reading); gold is
   a hairline and a glint, never a fill for body text.
   Contrast (WCAG, computed 2026-09-18 against parchment #f0e6d2 / ivory #fbf6ea):
     --x-ink 14.2:1 · --x-ink-2 8.6:1 (9.9:1 on ivory) · --x-gold-text 5.1:1 (5.9:1 on ivory)
     night #1d1712: --x-night-text 14.6:1 · --x-night-gold 9.3:1 · --x-night-soft 10.8:1
     provenance tags on parchment: calc 6.7:1 · modern 6.9:1 · you 5.9:1. */

:root {
  --x-ink: #1f1811;
  --x-ink-2: #4d3b27;
  --x-gold-text: #7a5a1e;
  --x-gold-line: rgba(168, 136, 74, .45);
  --x-gold-hair: rgba(168, 136, 74, .28);
  --x-night: #1d1712;
  --x-night-2: #2a2119;
  --x-night-text: #f3e8d2;
  --x-night-soft: #d8c8a8;
  --x-night-gold: #d9b872;
  --x-ivory: #fbf6ea;
  --x-focus: #7a4f14;
  --x-radius: 10px;
}

/* ---------- focus: visible everywhere, on parchment and on night ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--x-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.jzx-open a:focus-visible, .jzx-open button:focus-visible { outline-color: var(--x-night-gold); }

/* ---------- nav: six links + More; a Menu button on phones ---------- */
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-links { align-items: center; gap: 22px; flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; letter-spacing: 3px; }
.nav-more { position: relative; }
.nav-more > summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink); opacity: .8; white-space: nowrap;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: ' \25BE'; font-size: 9px; }
.nav-more[open] > summary { opacity: 1; color: var(--gold-2); }
.nav-more-panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60;
  min-width: 220px; padding: 10px 0;
  background: var(--x-ivory); border: 1px solid var(--x-gold-line); border-radius: 8px;
  box-shadow: 0 12px 30px rgba(60, 44, 16, .14);
  display: flex; flex-direction: column;
}
.nav-more-panel a { padding: 9px 18px; letter-spacing: 2.5px; font-size: 10.5px; opacity: .9; }
.nav-more-panel a:hover { background: rgba(168, 136, 74, .1); }
.nav-menu-btn {
  display: none;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  background: transparent; color: var(--ink); border: 1px solid var(--x-gold-line); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; min-height: 40px;
}
@media (max-width: 1080px) {
  .nav-links { gap: 16px; }
  .nav-links a, .nav-more > summary { letter-spacing: 2px; font-size: 10.5px; }
}
@media (max-width: 900px) {
  .nav-strip-inner { position: relative; }
  .nav-menu-btn { display: inline-flex; align-items: center; }
  .nav-right { gap: 10px; }
  /* The list opens in place under the header (the menu is not pinned). */
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 55;
    flex-direction: column; align-items: stretch; gap: 0; padding: 4px 22px 14px;
    background: var(--bg, #f0e6d2); border-bottom: 1px solid var(--x-gold-line);
    box-shadow: 0 14px 24px rgba(60, 44, 16, .12);
  }
  .nav-strip.nav-open .nav-links { display: flex; }
  .nav-links > a, .nav-more > summary { padding: 13px 2px; border-top: 1px solid var(--x-gold-hair); font-size: 12px; letter-spacing: 3px; }
  .nav-links > a:first-child { border-top: 0; }
  .nav-more { display: block; }
  .nav-more-panel { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 16px; min-width: 0; }
  .nav-more-panel a { padding: 11px 2px; }
}

/* ---------- hero: headline, one explanation, the form, the dial ---------- */
.hero { min-height: 0; padding-top: 34px; padding-bottom: 56px; }
body:not(.has-revealed-form) .hero { min-height: 0; }
.hero-inner { align-items: start; min-height: 0; gap: 56px; }
.hero-eyebrow-x {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--x-gold-text); margin: 0 0 14px;
}
.hero-headline { white-space: normal; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.08; letter-spacing: .5px; }
.hero-hebrew { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 12px; font-size: 22px; }
.hero-hebrew [lang="he"] { color: var(--x-gold-text); }
.hero-hebrew-gloss {
  font-family: var(--font-body); font-style: italic; font-size: 15px; letter-spacing: .3px; color: var(--x-ink-2);
}
.hero-keyline {
  font-family: var(--font-body); font-size: 20px; line-height: 1.55; color: var(--x-ink);
  max-width: 34em; margin: 14px 0 0; letter-spacing: 0; text-transform: none;
}
.hero-form-box { margin-top: 22px; max-width: 480px; background: rgba(255, 252, 245, .78); }
.hf-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-display); letter-spacing: 2.5px; color: var(--x-gold-text);
}
.hf-header-note { font-family: var(--font-body); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--x-ink-2); }
.hero-form-box .ip.hf-row { padding: 12px 12px 4px; min-height: 48px; }
.hf-field { flex: 0 0 150px; font-size: 15.5px; color: var(--x-ink); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hf-badge {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--x-ink-2); border: 1px solid var(--x-gold-hair); border-radius: 999px; padding: 1px 7px; line-height: 1.5;
}
.hf-badge-req { color: var(--x-gold-text); border-color: var(--x-gold-line); background: rgba(168, 136, 74, .08); }
.hero-form-box .ip-label.hf-value { color: #6d5a3e; }
.hf-hint {
  margin: 0; padding: 0 12px 10px 50px; font-size: 14px; line-height: 1.45; color: var(--x-ink-2);
  font-family: var(--font-body);
}
.hf-hint .hf-unknown { font-size: 14px; color: var(--x-gold-text); margin-left: 4px; }
.hf-msg {
  margin: 10px 12px 0; padding: 10px 12px; border-radius: 8px;
  background: #fbeee4; border: 1px solid #d9a58c; color: #7a2e17; font-size: 15px; line-height: 1.45;
}
.hero-cta.hero-cta-progressive, .hero-cta.hero-cta-progressive.hero-cta-ready {
  opacity: 1; filter: none;
  background: linear-gradient(180deg, #2a2119, #1d1712); color: #f6ecd6;
  border: 1px solid rgba(217, 184, 114, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 8px 22px rgba(29, 23, 18, .22);
  border-radius: 8px; min-height: 52px; font-size: 12.5px; letter-spacing: 3.5px;
}
.hero-cta.hero-cta-progressive:hover { background: linear-gradient(180deg, #3a2d20, #231b14); }
.hero-cta.hero-cta-ready { box-shadow: 0 0 0 3px rgba(217, 184, 114, .28), 0 8px 22px rgba(29, 23, 18, .24); }
.hf-foot { padding: 8px 12px 6px; }
.hf-restore { color: var(--x-ink-2); font-size: 14px; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.hf-restore:hover { color: var(--x-gold-text); }
.hero-free { list-style: none; margin: 18px 0 0; padding: 0; max-width: 480px; }
.hero-free li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.5; color: var(--x-ink); margin: 6px 0; }
.hero-free li::before { content: '\2726'; position: absolute; left: 0; top: .1em; color: #a8884a; font-size: 12px; }
.hero-free strong { font-style: normal; font-weight: 600; }
.hero-different { margin-top: 26px; max-width: 540px; }
.hero-mark { align-self: start; margin-top: 8px; }
.hero-mark-float { opacity: .55; color: var(--x-ink-2); }

@media (max-width: 920px) {
  .hero { padding: 18px 22px 44px; }
  .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; }
  .hero-mark { order: 0; max-width: 300px; margin-top: 40px; }
  .hero-mark-float { display: none; }
  .hero-headline { font-size: clamp(32px, 5.4vw, 44px); }
}
@media (max-width: 640px) {
  .hero { padding: 14px 16px 40px; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  /* The dial becomes a small medallion beside the headline, so the form is in the first screen. */
  .hero-mark { position: absolute; top: 4px; right: 12px; width: 104px; max-width: 104px; margin: 0; }
  .hero-copy { order: 1; }
  .hero-eyebrow-x { padding-right: 116px; font-size: 10px; letter-spacing: 3px; margin-bottom: 10px; }
  .hero-headline { padding-right: 112px; font-size: clamp(30px, 8.4vw, 40px); }
  .hero-headline .ital { display: block; }
  .hero-hebrew { font-size: 19px; }
  .hero-hebrew-gloss { font-size: 14px; }
  .hero-keyline { font-size: 17px; }
  .hero-form-box { margin-top: 16px; padding: 4px 6px 12px; }
  .hf-hint { padding-left: 46px; font-size: 13.5px; }
  .hero-name-watermark { display: none; }
  .nav-brand .nav-mark { letter-spacing: 3.5px; font-size: 11.5px; }
  .nav-brand { gap: 8px; }
  .nav-menu-btn { padding: 6px 12px; letter-spacing: 2px; }
}
@media (max-width: 380px) {
  .hero-mark { width: 88px; max-width: 88px; }
  .hero-headline { padding-right: 96px; }
  .hero-eyebrow-x { padding-right: 100px; }
}
/* Label and badge sit on one line; the value takes what is left. */
.hero-form-box .ip.hf-row .hf-field { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; white-space: nowrap; }
.hero-form-box .ip.hf-row .ip-label.hf-value { flex: 0 1 auto; text-align: right; min-width: 0; overflow-wrap: anywhere; }
html[dir="rtl"] .hero-form-box .ip.hf-row .ip-label.hf-value { text-align: left; }
.hf-unknown, .hf-hint .hf-unknown {
  text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font-body) !important;
  background: none; border: 0; padding: 0; min-height: 0; box-shadow: none; color: var(--x-gold-text);
}
.nav-more { display: flex; align-items: center; }
@media (max-width: 900px) { .nav-more { display: block; } }
.nav-more > summary { display: block; line-height: inherit; }
@media (min-width: 921px) {
  .hero-mark { max-width: 470px; }
}

/* ---------- restore access (was unreachable inside the hidden form) ---------- */
.restore-access {
  max-width: 560px; margin: 8px auto 36px; padding: 24px 24px 18px;
  background: var(--x-ivory); border: 1px solid var(--x-gold-line); border-radius: var(--x-radius);
  position: relative; z-index: 2;
}
.restore-title { font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 6px; color: var(--x-ink); }
.restore-lede { font-size: 16px; line-height: 1.55; margin: 0 0 12px; color: var(--x-ink-2); }

/* ---------- returning visitor ---------- */
.returning-hero { padding: 90px 22px 70px; min-height: 0; }
.returning-title { font-size: clamp(30px, 5vw, 44px); margin: 0 0 12px; }
.returning-meta { max-width: 36em; margin: 0 auto; font-size: 17px; line-height: 1.6; color: var(--x-ink-2); }
.returning-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
.returning-secondary {
  background: none; border: 1px solid var(--x-gold-line); border-radius: 8px; padding: 12px 20px; min-height: 44px;
  font-family: var(--font-body); font-size: 17px; color: var(--x-ink); cursor: pointer;
}
.returning-secondary:hover { background: rgba(168, 136, 74, .08); }
.returning-foot { margin-top: 26px; font-size: 14.5px; color: var(--x-ink-2); line-height: 1.7; }
.returning-foot a { color: var(--x-gold-text); }

/* ---------- small shared pieces ---------- */
.jzx-linkbtn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--x-gold-text); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
.jzx-soft { color: var(--x-ink-2); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.jzx-tag {
  display: inline-block; vertical-align: .1em; margin-right: 4px;
  font-family: var(--font-ui); font-size: 10px; font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--x-gold-hair); color: var(--x-ink-2); white-space: nowrap;
}
.jzx-tag-calc { border-color: rgba(64, 90, 120, .35); color: #34506e; }
.jzx-tag-trad { border-color: var(--x-gold-line); color: var(--x-gold-text); }
.jzx-tag-modern { border-color: rgba(110, 70, 90, .3); color: #6a3f55; }
.jzx-tag-you { border-color: rgba(60, 100, 70, .35); color: #34603f; }

/* ---------- the opening of a reading: night, ink and gold ---------- */
.soul-summary .jzx-open {
  position: relative; margin: 0 0 22px; padding: 30px 26px 24px; text-align: center;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(217, 184, 114, .16), transparent 60%),
    linear-gradient(180deg, var(--x-night-2), var(--x-night));
  color: var(--x-night-text); border-radius: 14px; border: 1px solid rgba(217, 184, 114, .35);
  box-shadow: 0 18px 40px rgba(29, 23, 18, .22);
  overflow: hidden;
}
/* A faint six-pointed star, drawn from the brand roundel: the one ornament here. */
.soul-summary .jzx-open::before {
  content: ''; position: absolute; inset: -40px -40px auto auto; width: 180px; height: 180px; opacity: .10; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'><g fill='none' stroke='%23d9b872' stroke-width='1.6'><circle r='92'/><polygon points='0,-60 52,30 -52,30'/><polygon points='0,60 52,-30 -52,-30'/></g></svg>") center/contain no-repeat;
}
.jzx-open-eyebrow { font-family: var(--font-display); font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: var(--x-night-gold); }
.jzx-open-name { font-family: var(--font-body); font-weight: 500; font-size: clamp(30px, 6vw, 44px); line-height: 1.1; margin: 8px 0 6px; color: var(--x-night-text); }
.jzx-open-namehe { font-family: var(--font-hebrew); color: var(--x-night-gold); margin-left: .25em; font-weight: 400; }
.jzx-open-hebdate { font-family: var(--font-hebrew); font-size: 22px; color: var(--x-night-gold); margin: 2px 0 2px; }
.jzx-open-date { margin: 0 0 16px; font-size: 15.5px; color: var(--x-night-soft); display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; }
.jzx-dot { color: var(--x-night-gold); }
.jzx-chips { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 620px; }
.jzx-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 6px 8px;
  border: 1px solid rgba(217, 184, 114, .28); border-radius: 8px; background: rgba(255, 255, 255, .03);
}
.jzx-chip-k { font-family: var(--font-display); font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--x-night-gold); }
.jzx-chip-v { font-size: 16.5px; color: var(--x-night-text); line-height: 1.25; }
.jzx-chip-v em { color: var(--x-night-soft); font-size: 13px; }
.jzx-chip-he { font-family: var(--font-hebrew); font-size: 17px; color: var(--x-night-gold); line-height: 1.2; }
.jzx-note {
  text-align: left; margin: 14px auto 0; max-width: 620px; padding: 12px 14px;
  border-radius: 8px; background: rgba(217, 184, 114, .08); border: 1px solid rgba(217, 184, 114, .25);
}
.jzx-note-label { display: block; font-family: var(--font-display); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--x-night-gold); margin-bottom: 4px; }
.jzx-note p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--x-night-text); }
.jzx-note strong { color: #fff3da; font-style: normal; }
.jzx-open .jzx-linkbtn { color: var(--x-night-gold); font-size: 15px; }
.jzx-open-edit { margin: 14px 0 0; }

/* ---------- in-page index ---------- */
.jzx-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0 0 26px; font-size: 15px; }
.jzx-index-k { width: 100%; text-align: center; font-family: var(--font-display); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--x-gold-text); }
.jzx-index a { color: var(--x-ink); text-decoration: underline; text-decoration-color: var(--x-gold-line); text-underline-offset: 4px; }
.jzx-index a:hover { color: var(--x-gold-text); }

/* ---------- the centre: one sentence, given room ---------- */
#jzxCentral { scroll-margin-top: 110px; }
.jzx-central { text-align: center; margin: 0 0 30px; }
.jzx-central-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--x-gold-text); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.jzx-central-quote {
  margin: 14px auto 22px; max-width: 30em; padding: 0 6px;
  font-family: var(--font-body); font-style: italic; font-size: clamp(23px, 3.4vw, 30px); line-height: 1.38; color: var(--x-ink);
}
.jzx-central-quote::before, .jzx-central-quote::after { content: ''; display: block; width: 64px; height: 1px; margin: 0 auto; background: var(--x-gold-line); }
.jzx-central-quote::before { margin-bottom: 18px; }
.jzx-central-quote::after { margin-top: 18px; }
.jzx-tension { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; max-width: 660px; margin: 0 auto; }
.jzx-tension-col { background: var(--x-ivory); border: 1px solid var(--x-gold-hair); border-radius: var(--x-radius); padding: 16px 18px; }
.jzx-tension-k { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--x-gold-text); margin-bottom: 6px; }
.jzx-tension-col p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--x-ink); }
.jzx-tension-col .jzx-tension-refine { margin-top: 10px; font-size: 15px; color: var(--x-ink-2); font-style: italic; }
.jzx-recognise { max-width: 620px; margin: 22px auto 0; text-align: left; border-left: 2px solid #a8884a; padding: 4px 0 4px 18px; }
.jzx-recognise-k { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--x-gold-text); }
.jzx-recognise p { margin: 6px 0 0; font-size: 18px; line-height: 1.55; color: var(--x-ink); }
.jzx-recognise .jzx-recognise-foot { font-size: 14.5px; color: var(--x-ink-2); font-style: italic; }
.jzx-why { max-width: 660px; margin: 20px auto 0; text-align: left; border-top: 1px solid var(--x-gold-hair); border-bottom: 1px solid var(--x-gold-hair); }
.jzx-why > summary {
  cursor: pointer; list-style: none; padding: 13px 4px; min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-body); font-size: 17px; color: var(--x-gold-text);
}
.jzx-why > summary::-webkit-details-marker { display: none; }
.jzx-why > summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--x-gold-text); }
.jzx-why[open] > summary::after { content: '\2212'; }
.jzx-why-body { padding: 0 4px 14px; }
.jzx-why-body p { font-size: 15.5px; line-height: 1.6; color: var(--x-ink); margin: 0 0 10px; }
.jzx-why-more a { color: var(--x-gold-text); }

/* ---------- try this week ---------- */
.jzx-practice { background: var(--x-ivory); border: 1px solid var(--x-gold-line); border-radius: 14px; padding: 22px 22px 16px !important; }
.jzx-steps { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: jzx; text-align: left; }
.jzx-steps li { position: relative; padding: 10px 0 10px 42px; border-top: 1px solid var(--x-gold-hair); counter-increment: jzx; }
.jzx-steps li:first-child { border-top: 0; }
.jzx-steps li::before {
  content: counter(jzx); position: absolute; left: 0; top: 11px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 12px; color: var(--x-gold-text);
  border: 1px solid var(--x-gold-line);
}
.jzx-step-k { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--x-gold-text); }
.jzx-steps p { margin: 3px 0 0; font-size: 17px; line-height: 1.55; color: var(--x-ink); }
.jzx-practice-foot { margin: 10px 0 0; font-size: 14.5px; color: var(--x-ink-2); font-style: italic; text-align: left; }
.jzx-block-foot { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--x-ink-2); }

/* ---------- today's lens, now labelled as the part that changes ---------- */
.jzx-lens .ss-todays-lens { margin-top: 6px; }

/* ---------- where to go next ---------- */
.jzx-next { margin: 26px 0 8px; }
.jzx-next ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jzx-next a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 16px 14px; text-align: left; text-decoration: none;
  background: var(--x-ivory); border: 1px solid var(--x-gold-hair); border-radius: var(--x-radius); color: var(--x-ink);
  transition: border-color .2s, box-shadow .2s;
}
.jzx-next a:hover { border-color: var(--x-gold-line); box-shadow: 0 6px 18px rgba(60, 44, 16, .08); }
.jzx-next-k { font-size: 17px; line-height: 1.3; color: var(--x-ink); font-weight: 500; }
.jzx-next-p { font-size: 14.5px; line-height: 1.5; color: var(--x-ink-2); }
.jzx-next-more { font-size: 14px; color: var(--x-ink-2); font-style: italic; margin: 10px 0 0; text-align: center; }

@media (max-width: 720px) {
  .soul-summary .jzx-open { padding: 24px 16px 20px; border-radius: 12px; }
  .jzx-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jzx-tension { grid-template-columns: 1fr; }
  .jzx-next ul { grid-template-columns: 1fr; }
  .jzx-practice { padding: 18px 16px 12px !important; }
  .jzx-steps li { padding-left: 38px; }
}

/* ---------- relationship guidance note ---------- */
.rel-paywall-note { font-size: 16px; line-height: 1.55; color: var(--x-ink-2); margin: 0 0 12px; }
.rel-bundle-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rel-bundle-row a.sb-cta { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.rel-paywall-msg a { color: var(--x-gold-text); }

/* ---------- motion: essential content never waits on animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-sparkles, .sparkle-trail { display: none !important; }
  .hero-mark, .hero-mark * { animation: none !important; transition: none !important; }
  .deliberation-overlay { display: none !important; }
  .jz-rv { opacity: 1 !important; transform: none !important; }
}

/* ---------- share disclosure + reflective framing in the sealed reading ---------- */
.share-privacy { max-width: 34em; margin: 14px auto 0; font-size: 14.5px; line-height: 1.55; color: var(--x-ink-2); }
.rs-frame { margin: 2px 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--x-ink-2); font-style: italic; }

/* ---------- tightening so the form sits higher ---------- */
.nav-links a, .nav-more > summary { line-height: 1.4; }
.hero { padding-top: 24px; }
.hero-keyline-free { font-style: normal; font-weight: 600; color: var(--x-ink); }
.hero-form-box .ip.hf-row { padding-top: 10px; padding-bottom: 2px; }
.hf-hint { padding-bottom: 8px; }
.hf-header { padding-top: 12px; padding-bottom: 6px; }
@media (max-width: 640px) { .hf-header-note { display: none; } }

/* city results are buttons now (keyboard reachable) */
.city-opt {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 11px 14px; min-height: 44px; font: inherit; font-size: 14px; color: var(--x-ink); cursor: pointer;
  text-transform: none; letter-spacing: 0; box-shadow: none; border-radius: 0;
}
.city-opt:hover, .city-opt:focus-visible { background: rgba(168, 136, 74, .1); }
/* the entered value gets the room; the label keeps its line */
.hero-form-box .ip.hf-row .hf-field { flex: 0 0 auto; }
.hero-form-box .ip.hf-row .ip-label.hf-value { flex: 1 1 auto; }
.hero-form-box .ip.filled .hf-value { font-size: 16px; font-weight: 600; line-height: 1.3; }

/* ---------- details summaries in the reading: sentence case, not the global caps ---------- */
.jzx-why > summary { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 17px; }

/* ---------- the seal: one clear offer, the question is optional ---------- */
.sb-bullets { text-align: left; max-width: 34em; margin-left: auto; margin-right: auto; padding-left: 1.2em; }
.sb-bullets li { margin: 6px 0; }
.sb-intention { max-width: 34em; margin: 22px auto 18px; text-align: left; }
.sb-intention-label { display: block; font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: var(--x-ink); text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.sb-intention-input {
  display: block; width: 100%; min-height: 84px; padding: 12px 14px; box-sizing: border-box;
  font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: var(--x-ink);
  background: var(--x-ivory); border: 1px solid var(--x-gold-line); border-radius: 8px; resize: vertical;
}
.sb-intention-note { margin: 8px 0 4px; font-size: 14px; line-height: 1.5; color: var(--x-ink-2); font-style: italic; }
.sb-intention-skip {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 !important; min-height: 0 !important;
  font-family: var(--font-body) !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--x-gold-text) !important; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; width: auto !important;
}

.jzx-linkbtn { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font-body) !important; min-height: 0 !important; box-shadow: none !important; width: auto !important; background: none !important; }
.vault-code-row[hidden] { display: none !important; }
@media (max-width: 640px) { .restore-access { margin: 8px 12px 30px; padding: 20px 16px 14px; } }

/* ---- Inline hero entry (2026-09-18): the rows hold real inputs ---- */
.hero-form-box .ip.hf-row.hf-row-inline { cursor: text; flex-wrap: wrap; row-gap: 6px; }
.hero-form-box .hf-row-inline .hf-value-shadow { display: none; }   /* kept for the scripts that write the label */
.hero-form-box .hf-row-inline .hf-chev { visibility: hidden; width: 14px; text-align: center; }
.hero-form-box .hf-row-inline.filled .hf-chev { visibility: visible; }
.hero-form-box .hf-input {
  flex: 1 1 150px; min-width: 0; max-width: 260px; margin-left: auto; box-sizing: border-box;
  min-height: 44px; padding: 8px 10px;
  font: inherit; font-size: 16px; line-height: 1.3; color: #1a1612;   /* 16px: no zoom on iOS focus */
  background: rgba(255, 253, 247, .85); border: 1px solid rgba(168, 136, 74, .45); border-radius: 6px;
  -webkit-appearance: none; appearance: none;
}
.hero-form-box .hf-input.hf-input-text { max-width: 320px; }
.hero-form-box .hf-input::placeholder { color: #7a6a4e; font-style: italic; opacity: 1; }
.hero-form-box .hf-input:hover { border-color: rgba(138, 110, 52, .8); }
.hero-form-box .hf-input:focus { outline: none; border-color: #8a6e34; box-shadow: 0 0 0 3px rgba(168, 136, 74, .28); background: #fffdf7; }
.hero-form-box .hf-row-inline.filled .hf-input { font-weight: 600; border-color: rgba(138, 110, 52, .7); }
.hero-form-box .ip.hf-row.hf-row-inline:focus-within { background: rgba(168, 136, 74, .07); }
.hf-city-results {
  margin: 2px 12px 6px 50px; background: #faf6ed; border: 1px solid rgba(168, 136, 74, .45); border-radius: 6px;
  max-height: 264px; overflow-y: auto; box-shadow: 0 8px 22px rgba(60, 40, 10, .12);
}
html[dir="rtl"] .hero-form-box .hf-input { margin-left: 0; margin-right: auto; }
@media (max-width: 520px) {
  .hero-form-box .hf-input, .hero-form-box .hf-input.hf-input-text { flex: 1 1 100%; max-width: none; margin-left: 38px; }
  /* The tick sits on the label line, clear of the native date/time picker icons. */
  .hero-form-box .hf-row-inline .hf-chev { order: 2; margin-left: auto; }
  .hero-form-box .hf-row-inline .hf-input { order: 3; }
  .hf-city-results { margin-left: 50px; }
}
/* The rows are <label>s now; undo the site-wide form-label look (uppercase, 13px, muted). */
.hero-form-box label.hf-row { text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; margin-bottom: 0; }