/* Akashic Palm Reading — the atelier: marble, Aegean blue and gold. One stylesheet for both pages.
   The scene's layout switches at the same aspect ratio as the stills (max-aspect-ratio: 799/1000 → the mobile still). */

/* ---------- fonts: self-hosted, OFL (licenses: ../fonts/OFL-*.txt), the Google Fonts latin / latin-ext subsets ---------- */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marcellus-normal-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: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marcellus-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-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: "Mulish"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/mulish-normal-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: "Mulish"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/mulish-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --ink: #2a2119; --ink-soft: #5a4a3b; --marble: #f3eee6; --marble-deep: #e4dccd;
  --glass: rgba(250, 247, 241, .86); --glass-edge: rgba(168, 128, 60, .38);
  --aegean: #24527a; --aegean-deep: #1a3d5c; --aegean-soft: #3d6f98;
  --gold: #b08a45; --gold-light: #e6c98c; --gold-text: #7a5822;
  --error: #8f2e2e; --line: rgba(90, 70, 45, .18);
  --shadow: 0 18px 50px rgba(40, 30, 18, .22);
  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.3, .7, .2, 1);
  --stage-h: 100vh;
}
@supports (height: 100svh) { :root { --stage-h: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-padding-top: 16px; }
body {
  margin: 0; overflow-x: hidden; color: var(--ink);
  background: var(--marble) linear-gradient(180deg, #e9e1d3, var(--marble) 30rem);
  font: 400 16px/1.6 var(--sans);
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; letter-spacing: .01em; }
p { margin: 0 0 .8em; }
a { color: var(--aegean); }
img, video, canvas, svg { display: block; }
[hidden] { display: none !important; }
html:not(.js) [data-needs-js] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: #fff; }
.skip:focus { top: 12px; }
/* two tones, so focus shows on the light marble panels and on the night scene alike (≥ 3:1 on both) */
:focus-visible { outline: 3px solid var(--aegean-deep); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 250, 238, .95); }

/* ---------- top bar ---------- */
.bar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); pointer-events: none; }
.bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); color: var(--ink); text-decoration: none; font: 400 15px var(--display); letter-spacing: .04em; border: 1px solid var(--glass-edge); }
.bar__actions { display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); font: 600 13px var(--sans); text-decoration: none; cursor: pointer; }
.pill[aria-pressed="false"] { color: var(--ink-soft); }
.pill--time [data-time-icon] { font-size: 15px; line-height: 1; }
.pill:disabled { opacity: .6; cursor: progress; }
@media (max-width: 380px) { .pill--time [data-time-label] { display: none; } }
/* A compact bar, with room for the music control (Spanish "Pausar movimiento" is the widest pill).
   The brand name is hidden visually only, so the home link keeps its accessible name. */
@media (max-width: 500px) {
  .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar { gap: 8px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .bar__actions { gap: 4px; }
  .bar .pill { padding-inline: 10px; }
}

/* ---------- the stage: atelier, mirror overlay, panel ---------- */
.stage { position: relative; height: var(--stage-h); min-height: 520px; overflow: hidden; background: #3a2f25; isolation: isolate; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene::before { content: ""; position: absolute; inset: -40px; background: url("../scene/atelier-desktop.webp") center / cover; filter: blur(28px) brightness(.9); }
.scene__still, .scene__still img, .scene__glow { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-50%); }
.scene__still { width: 100%; left: 0; transform: none; }
.scene__glow { opacity: 0; mix-blend-mode: plus-lighter; transition: opacity 2.6s var(--ease); pointer-events: none; }
/* without WebGL the lit stones breathe too (the WebGL scene does this in its shader) */
.scene__glow.is-breathing { animation: stones-breathe 5s ease-in-out infinite; }
@keyframes stones-breathe { 0%, 100% { filter: brightness(.45); } 50% { filter: brightness(1); } }
html.rm .scene__glow.is-breathing { animation: none; }
.stage:not(.is-still) .scene__glow { display: none; }
.scene__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; touch-action: pan-y; cursor: grab; }
.scene__gl.drag { cursor: grabbing; }
.stage.is-live .scene__gl { opacity: 1; }
.scene__veil { position: absolute; inset: 0; background: #1d1711; opacity: 0; transition: opacity .25s; pointer-events: none; }
@media (max-aspect-ratio: 799/1000) { .scene::before { background-image: url("../scene/atelier-mobile.webp"); } }
html[data-scene-time="night"] .scene::before { background-image: url("../scene/atelier-desktop-night.webp"); }
@media (max-aspect-ratio: 799/1000) { html[data-scene-time="night"] .scene::before { background-image: url("../scene/atelier-mobile-night.webp"); } }

/* the mirror glass on screen: positioned by flow.js from the scene, masked to the arch */
.mirror { position: absolute; z-index: 2; overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: #07090c; pointer-events: none; }
.mirror::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .10), transparent 28%, transparent 70%, rgba(255, 240, 210, .06)), radial-gradient(120% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55)); }
/* the hand frame fills the glass: since the wider mirror (2026-10-13) the glass itself is palm-shaped (~0.56 wide to 1) */
.mirror__frame { position: absolute; inset: 0; }
.mirror video, .mirror__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.mirror.is-mirrored video, .mirror.is-mirrored .mirror__photo { transform: scaleX(-1); }
.mirror.is-upload .mirror__photo { object-fit: contain; }
.mirror.is-trimmed .mirror__photo { object-fit: contain; object-position: 50% 0; }
.mirror video { filter: saturate(.92) brightness(.96) sepia(.08); }
.mirror[data-mode="video"] video { opacity: 1; }
.mirror[data-mode="photo"] .mirror__photo, .mirror[data-mode="scan"] .mirror__photo, .mirror[data-mode="lines"] .mirror__photo[src] { opacity: 1; }
.mirror[data-mode="scan"] .mirror__photo { filter: brightness(.82) saturate(.8); }
.mirror .mirror__photo.is-fading { opacity: .15; }
.mirror__guide { position: absolute; inset: 9% 7% 2%; width: 86%; height: 89%; color: var(--gold-light); opacity: 0; transition: opacity .4s; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6)); }
.mirror[data-mode="video"] .mirror__guide { opacity: .9; }
/* hands-free capture: the outline turns solid gold while it counts 3-2-1 */
.mirror__guide path { transition: stroke-dasharray .3s, stroke-width .3s; }
.mirror.is-ready .mirror__guide { color: #f3d79a; filter: drop-shadow(0 0 4px rgba(243, 215, 154, .9)) drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.mirror.is-ready .mirror__guide path { stroke-dasharray: none; stroke-width: 1.2; }
.mirror__count { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; font: 400 clamp(40px, 9vh, 76px)/1 var(--display); color: #f3d79a;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7); pointer-events: none; }
.mirror::before { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff8ea; opacity: 0; pointer-events: none; transition: opacity .45s; }
.mirror.is-shutter::before { opacity: .55; transition: none; }
.mirror__sweep { position: absolute; left: 0; right: 0; height: 22%; top: -22%; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(230, 210, 160, .0) 10%, rgba(240, 225, 185, .55) 50%, rgba(230, 210, 160, 0) 90%, transparent); mix-blend-mode: screen; }
.mirror[data-mode="scan"] .mirror__sweep { opacity: 1; animation: sweep 2.6s var(--ease) infinite; }
@keyframes sweep { from { top: -22%; } to { top: 100%; } }
html.rm .mirror[data-mode="scan"] .mirror__sweep { animation: none; top: 0; height: 100%; opacity: .35; }

/* look-around */
.look { position: absolute; z-index: 3; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.look.is-off { display: none; }
.look__hint { font: 600 12px var(--sans); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); letter-spacing: .04em; }

/* the panel: hero and each step of the flow */
.panel { position: absolute; z-index: 4; left: max(20px, 4vw); top: 50%; transform: translateY(-50%); width: min(400px, 33vw); max-height: calc(100% - 150px); overflow: auto;
  padding: 26px 26px 22px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); overscroll-behavior: contain; }
.panel h1 { font-size: clamp(26px, 2.5vw, 36px); }
.panel h2 { font-size: 25px; }
.panel h1:focus, .panel h2:focus { outline: none; }
.eyebrow { margin: 0 0 .7em; font: 600 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); }
.lead { color: var(--ink-soft); }
.help { font-size: 13.5px; color: var(--ink-soft); }
.more { display: inline-block; margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--aegean-deep);
  background: linear-gradient(180deg, var(--aegean-soft), var(--aegean) 55%, var(--aegean-deep)); color: #fbf8f2; font: 600 15px var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(26, 61, 92, .28), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(26, 61, 92, .32), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--ghost { background: rgba(255, 255, 255, .5); color: var(--ink); border-color: var(--gold); box-shadow: none; }
.btn--ghost:hover { background: rgba(255, 255, 255, .8); box-shadow: none; }
.btn--text { background: none; border: 0; box-shadow: none; color: var(--ink-soft); text-decoration: underline; padding-inline: 8px; }
.btn--text:hover { transform: none; box-shadow: none; color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--capture { min-width: 170px; }

/* details form */
.notice { margin: 0 0 14px; padding-left: 1.1em; font-size: 14px; color: var(--ink-soft); }
.notice li { margin-bottom: 4px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0 0 16px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--aegean); }
.check label { font-weight: 600; font-size: 14.5px; }
.check .field-error { grid-column: 2; }
fieldset { margin: 0 0 14px; padding: 0; border: 0; }
legend { padding: 0; font-weight: 600; font-size: 14.5px; }
fieldset .help { margin: 0 0 6px; }
.dob__row { display: grid; grid-template-columns: 4.6rem 1fr 5.2rem; gap: 8px; }
select, input[type="text"], input:not([type]), input[inputmode] { width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(90, 70, 45, .35);
  background: #fffdf9; color: var(--ink); font: 400 15px var(--sans); }
.radio { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--aegean); }
.has-error select, .has-error input:not([type="radio"]):not([type="checkbox"]) { border-color: var(--error); }
.field-error { margin: 6px 0 0; color: var(--error); font-size: 13.5px; font-weight: 600; }
.error-summary { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--error); background: #fbf1ef; }
.error-summary p { margin: 0 0 4px; font-weight: 600; color: var(--error); }
.error-summary ul { margin: 0; padding-left: 1.1em; }
.error-summary a { color: var(--error); }
.trim { margin: 10px 0 0; }
.trim label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.trim input { width: 100%; accent-color: var(--aegean); min-height: 32px; }
.trim .help { margin: 2px 0 0; }
.hand-note { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-text); margin: 4px 0 0; }

/* tips, camera, scan */
.tips { margin: 0 0 8px; padding-left: 1.3em; }
.tips li { margin-bottom: 4px; }
.notice-msg { padding: 10px 12px; border-radius: 10px; background: #fbf3e6; border-left: 3px solid var(--gold); }
.hint { font: 400 20px/1.35 var(--display); margin: 0 0 4px; min-height: 1.35em; }
.hint[data-hint="ready"] { color: var(--aegean); }
.step { color: var(--ink-soft); min-height: 3em; }
.progress { height: 3px; border-radius: 3px; background: rgba(90, 70, 45, .15); overflow: hidden; }
.progress span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: progress 1.8s ease-in-out infinite; }
@keyframes progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
html.rm .progress span { animation: none; width: 100%; opacity: .5; }

/* the result: legend under the mirror */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; padding: 0; list-style: none; font-weight: 600; font-size: 14px; }
.legend li, .line h4 { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); flex: none; }

/* ---------- the Glimpse and the static content ---------- */
.glimpse, .content { width: min(880px, 100% - 32px); margin: 0 auto; }
.glimpse { padding: 48px 0 8px; }
.glimpse:focus { outline: none; }
.glimpse__head { text-align: center; margin-bottom: 18px; }
.glimpse__head h2 { font-size: clamp(28px, 4vw, 40px); }
.content { padding: 40px 0 24px; }
.card { margin: 0 0 18px; padding: 26px 28px; border-radius: 20px; background: rgba(255, 253, 249, .78); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(60, 45, 25, .08); }
.card h2 { font-size: 28px; }
.card h3 { font-size: 24px; }
.traits { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 12px; }
.traits__row { display: inline-flex; gap: 6px; padding: 3px 12px; border-radius: 999px; background: #f4ede2; border: 1px solid var(--line); font-size: 13.5px; }
.traits dt { color: var(--gold-text); font-weight: 600; }
.traits dd { margin: 0; }
.meaning { margin: 0; }
.lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.line { padding-top: 16px; border-top: 1px solid var(--line); }
.line:first-child { border-top: 0; padding-top: 0; }
.line h4 { font-size: 21px; margin-bottom: 8px; }
.line.is-absent .meaning { color: var(--ink-soft); }
.offer { margin: 0 0 18px; padding: 28px; border-radius: 20px; background: linear-gradient(160deg, #fffdf8, #f5ecdc); border: 1px solid var(--gold); box-shadow: var(--shadow); }
.offer h3 { font-size: 26px; }
.offer__price { color: var(--gold-text); font-size: .8em; white-space: nowrap; }
.offer ul { margin: 0 0 6px; padding-left: 1.2em; }
.disclaimer { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 18px auto; max-width: 40em; }
.steps { margin: 0; padding-left: 1.3em; }
.steps li { margin-bottom: 6px; }
.defs { margin: 0; }
.defs dt { font: 400 20px var(--display); margin-top: 12px; }
.defs dt:first-child { margin-top: 0; }
.defs dd { margin: 2px 0 0; color: var(--ink-soft); }
.defs--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; }
.defs--grid dt { margin-top: 0; }
.faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.faq details:first-of-type { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 8px 0 0; color: var(--ink-soft); }
/* the gift, between the chapters (as on the birth chart and tarot); shown by flow.js when gifting is open */
.gift-feature { text-align: center; }
.gift-feature .btn { margin-top: 6px; }
.pill--gift .pill__icon { color: var(--gold-text); }
.pill--gift .pill__label { margin-left: 6px; }
@media (max-width: 640px) { .pill--gift { min-width: 36px; justify-content: center; } .pill--gift .pill__label { display: none; } }  /* icon only; the aria-label keeps the name */
@media (max-width: 380px) { .bar { gap: 4px; } .bar__actions { gap: 2px; } .bar .pill { padding-inline: 6px; } }  /* five controls fit at 320 px with the gift pill */
/* "Lost the link…?" inside Questions */
.faq-recover { margin-top: 10px; }
.faq-recover label { display: block; margin-bottom: 6px; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.faq-recover__row { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-recover input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(90, 70, 45, .35); background: #fffdf9; color: var(--ink); font: 400 15px var(--sans); }
.faq .faq-recover__status { color: var(--ink); }
.faq .faq-recover p:empty { margin: 0; }  /* empty live regions stay rendered so they are announced when filled */
/* the other dimensions, after Questions (same structure on the birth chart and tarot) */
.dims { text-align: center; }
.card .dims__title { margin: 0 0 14px; font: 600 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); }
.dims__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 360px)); justify-content: center; gap: 12px; }
.dims__item { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .55); color: var(--ink); text-decoration: none; text-align: left; transition: border-color .2s, background-color .2s; }
.dims__item:hover, .dims__item:focus-visible { border-color: var(--gold); background: rgba(255, 255, 255, .85); }
.dims__num { flex: none; width: 32px; font-family: var(--serif); font-size: 20px; color: var(--gold-text); text-align: center; }
.dims__text { flex: 1; display: grid; gap: 2px; }
.dims__name { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.15; }
.dims__chip { font-size: 14px; color: var(--ink-soft); }
.dims__go { color: var(--gold-text); }
.dims__all { display: inline-block; margin-top: 12px; padding: 10px 6px; font-size: 14px; color: var(--ink-soft); }
.dims__all:hover { color: var(--ink); }
.foot__note { margin: 0 0 6px; }
.foot { padding: 20px 16px 40px; text-align: center; font-size: 13.5px; color: var(--ink-soft); }
.foot__links { display: flex; justify-content: center; gap: 18px; margin-bottom: 6px; }

/* ---------- narrow, portrait screens: the mobile still ---------- */
@media (max-aspect-ratio: 799/1000) {
  .panel { left: 12px; right: 12px; width: auto; top: auto; bottom: max(12px, env(safe-area-inset-bottom)); transform: none; max-height: 52%; padding: 20px 18px 16px; border-radius: 18px; }
  /* arrival: a light card at the top, so the mirror, the crystals and the sleeping cat stay in view */
  .stage[data-mode="arrival"] .panel { top: calc(max(12px, env(safe-area-inset-top)) + 50px); bottom: auto; background: rgba(250, 247, 241, .78); }
  .stage[data-mode="arrival"] .look { bottom: max(14px, env(safe-area-inset-bottom)); }
  .panel h1 { font-size: 23px; }
  .panel h2 { font-size: 22px; }
  .hero .lead { font-size: 14.5px; margin-bottom: .4em; }
  .hero .actions { margin: 10px 0 4px; }
  .hero .more { display: none; }
  /* close to the mirror: a compact bar under it */
  .stage[data-mode="camera"] .panel, .stage[data-mode="confirm"] .panel, .stage[data-mode="scan"] .panel, .stage[data-mode="result"] .panel { max-height: 30%; padding: 12px 14px; }
  .stage[data-mode="camera"] .actions, .stage[data-mode="confirm"] .actions, .stage[data-mode="result"] .actions { margin: 8px 0 4px; gap: 8px; }
  .stage[data-mode="camera"] .btn, .stage[data-mode="confirm"] .btn, .stage[data-mode="result"] .btn { min-height: 42px; padding: 8px 16px; font-size: 14px; }
  .stage[data-mode="camera"] .hint { font-size: 17px; }
  .stage[data-mode="result"] .help, .stage[data-mode="result"] h2 { display: none; }
  .card, .offer { padding: 20px 18px; }
}
/* short phone screens: the headline and the button only, so the mirror stays in view (the lead is in the page below) */
@media (max-aspect-ratio: 799/1000) and (max-height: 760px) {
  .stage[data-mode="arrival"] .panel { padding: 14px 16px 10px; }
  .stage[data-mode="arrival"] .hero .eyebrow, .stage[data-mode="arrival"] .hero .lead { display: none; }
  .stage[data-mode="arrival"] .hero .actions { margin: 8px 0 2px; }
}
@media (max-width: 380px) {
  .dob__row { grid-template-columns: 4.2rem 1fr 4.8rem; gap: 6px; }
  .panel h1 { font-size: 21px; }
}

/* ---------- reduced motion ---------- */
html.rm *, html.rm *::before, html.rm *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
html.rm .btn:hover { transform: none; }

/* ---------- the complete reading (paid) ---------- */
.complete { padding-top: 24px; }
.mounts { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mounts strong { font-weight: 600; }
.mounts span { color: var(--ink-soft); }
.areas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 22px; }
.area h4 { font-size: 20px; margin-bottom: 4px; }
.area .note { font-size: 13.5px; color: var(--gold-text); margin: 0 0 4px; }
.area .soon { color: var(--ink-soft); font-style: italic; }
.offer .check { margin-top: 12px; }
.offer .check label { font-weight: 400; font-size: 13.5px; }

/* ---------- gift dialog ---------- */
.gift-dialog { width: min(460px, calc(100% - 32px)); border: 1px solid var(--glass-edge); border-radius: 20px; padding: 26px; background: var(--marble); color: var(--ink); box-shadow: var(--shadow); }
.gift-dialog::backdrop { background: rgba(30, 24, 18, .45); backdrop-filter: blur(3px); }
.gift-dialog h2 { font-size: 25px; }
.gift-dialog input[type="email"] { width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(90, 70, 45, .35); background: #fffdf9; font: 400 15px var(--sans); }
.gift-dialog .g-label { display: block; font-weight: 600; font-size: 14.5px; margin: 8px 0 4px; }
.gift-dialog .check label { font-weight: 400; font-size: 13.5px; }

.delete-box { text-align: center; margin: 8px 0 24px; }

/* ---------- the Thread and the AI notes ---------- */
.thread .meaning { font-size: 17px; line-height: 1.65; }
.thread .soon { color: var(--ink-soft); font-style: italic; }
.ai-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-soft); }
.thread .meaning + .meaning, .area .meaning + .meaning { margin-top: 10px; }

/* ---------- Ask the reader ---------- */
.ask__history { margin: 6px 0 14px; padding: 0; list-style: none; display: grid; gap: 18px; }
.ask__turn:focus { outline: 2px solid var(--aegean); outline-offset: 6px; border-radius: 6px; }
.ask__q { font-weight: 600; margin: 0 0 6px; }
.ask__left { font-size: 14px; color: var(--gold-text); margin: 8px 0; }
.ask__form textarea { width: 100%; min-height: 84px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(90, 70, 45, .35); background: #fffdf9; font: 400 15.5px/1.5 var(--sans); color: var(--ink); resize: vertical; }
.ask__form .actions { margin-top: 10px; }
.ask__status:not(:empty) { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- the paid tools ---------- */
.tools { margin: 8px 0 24px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 253, 249, .7); }
.tools h3 { margin-top: 0; }
.tools .check label { font-weight: 400; font-size: 14px; }

/* ---------- the PDF: the browser's print, the reading only ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; color: #1f1912; }
  .skip, .bar, .stage, .content, .foot, .offer, .delete-box, .tools, .ask__form, .ask__status, .ask__left, dialog, [data-c-status] { display: none !important; }
  html:not(.print-qa) .ask { display: none !important; }
  .glimpse:not([hidden]) { display: block !important; padding: 0 !important; margin: 0 0 8mm !important; background: none !important; }
  .card, .thread, .ask { box-shadow: none !important; background: #fff !important; border: 1px solid #d9cfbf !important; break-inside: auto; }
  h2, h3, h4 { break-after: avoid; }
  .area, .line, .ask__turn { break-inside: avoid; }
  .soon { display: none !important; }
  a { color: inherit; text-decoration: none; }
  body[data-print-title]::before { content: attr(data-print-title); display: block; margin: 0 0 6mm; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #7a5822; }
}