/* Faith in Motion: Steps. Design system "Lamplight Ridge" (see app/DESIGN.md) */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(/app/fonts/playfair-display-700.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url(/app/fonts/playfair-display-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(/app/fonts/cormorant-garamond-500.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(/app/fonts/cormorant-garamond-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/app/fonts/instrument-sans-var.woff2) format("woff2"); }

:root {
  --valley: #192935; --navy: #122040; --cream: #F4ECDF; --first-light: #FAD491;
  --amber: #E8A04A; --umber: #463526; --slate: #51636E; --slate-text: #A9B4BA;
  --hair: rgba(70, 53, 38, .2);
  --f-display: "Playfair Display", Georgia, serif;
  --f-read: "Cormorant Garamond", Palatino, Georgia, serif;
  --f-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-instant: 90ms; --t-fast: 160ms; --t-base: 240ms; --t-slow: 420ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --r-ctl: 6px; --r-sheet: 14px; --r-cover: 2px;
  --plate: 42svh;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--valley); }
body { margin: 0; min-height: 100svh; background: var(--valley); color: var(--navy); font-family: var(--f-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; }
::selection { background: rgba(232, 160, 74, .35); }
input, textarea, select { caret-color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.dark :focus-visible, .on-dark:focus-visible { outline-color: var(--first-light); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--amber); color: var(--valley); padding: 10px 14px; border-radius: var(--r-ctl); font-weight: 600; }
.skip:focus { top: 8px; }

/* ---------- Buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 20px; border-radius: var(--r-ctl); border: 1px solid transparent; font-family: var(--f-ui); font-weight: 600; font-size: 17px; text-decoration: none; cursor: pointer; text-align: center; transition: transform var(--t-instant) var(--ease), background var(--t-fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber); color: var(--valley); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.dark .btn-secondary { color: var(--cream); border-color: var(--cream); }
.btn-row { display: grid; gap: 10px; margin-top: 20px; }
.textlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; background: none; border: 0; color: inherit; font-family: var(--f-ui); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.quiet { color: var(--umber); font-size: 16px; }
.dark .quiet { color: var(--slate-text); }

/* ---------- Top chrome ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: max(env(safe-area-inset-top), 8px) 12px 8px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(25, 41, 53, .55); color: var(--cream); cursor: pointer; text-decoration: none; }
.iconbtn svg { width: 24px; height: 24px; }
.lockup { font-family: var(--f-display); color: var(--cream); line-height: 1; letter-spacing: -0.01em; }
.lockup b { font-weight: 700; }
.lockup i { font-weight: 400; font-style: italic; }

/* ---------- Plate and sheet ---------- */
.plate { position: fixed; inset: 0 0 auto 0; height: var(--plate); overflow: hidden; background: var(--valley) center / cover no-repeat; transform-origin: top center; will-change: transform; z-index: 0; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(25,41,53,.35), rgba(25,41,53,0) 40%, rgba(25,41,53,.25)); }
.plate .sweep { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(25,41,53,.35), rgba(250,212,145,.35)); transform: scaleX(0); transform-origin: left; opacity: 0; }
.plate.first-light .sweep { animation: firstlight 900ms var(--ease) forwards; }
@keyframes firstlight { 0% { transform: scaleX(0); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } }
.stage { position: relative; z-index: 1; padding-top: calc(var(--plate) - 2.2rem); }
.sheet { position: relative; background: var(--cream); border-top: 1px solid var(--hair); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: 0 12px 32px rgba(25, 41, 53, .18); min-height: 70svh; padding: 0 20px calc(40px + env(safe-area-inset-bottom)); isolation: isolate; }
.sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url(/app/img/grain.webp) repeat; background-size: 512px; mix-blend-mode: multiply; opacity: .04; pointer-events: none; z-index: -1; }
.sheet-inner { max-width: 34rem; margin: 0 auto; }
.numeral { position: absolute; left: 16px; top: 0; transform: translateY(-50%); font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(6rem, 22vw, 9rem); line-height: 1; color: var(--cream); text-shadow: 0 2px 18px rgba(25, 41, 53, .45); letter-spacing: -0.02em; pointer-events: none; }
.numeral span { display: block; }
.numeral .n-bot { position: absolute; inset: 0; color: var(--navy); text-shadow: none; clip-path: inset(50% 0 0 0); }
.numeral .n-top { clip-path: inset(0 0 50% 0); }
.stop-head { display: flex; align-items: flex-end; gap: 12px; padding-top: clamp(3.4rem, 12vw, 4.8rem); }
.stop-title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 6.4vw, 2.2rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--navy); }
.stop-meta { font-family: var(--f-ui); color: var(--umber); font-size: 15px; margin: 6px 0 0; }

/* waypoint rail */
.rail { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; }
.rail svg { display: block; width: 100%; height: 28px; }
.rail .tick { fill: none; stroke: var(--umber); stroke-width: 1.2; }
.rail .tick.done { fill: var(--umber); }
.rail .tick.now { fill: var(--amber); stroke: var(--amber); }
.rail .path { stroke: rgba(70, 53, 38, .5); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-dasharray: 0.1 5.5; }
.rail .walked { stroke: var(--amber); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-dasharray: 400 400; stroke-dashoffset: 400; }
.rail .tick.now { filter: drop-shadow(0 0 3px rgba(232, 160, 74, .85)); animation: tickGlow 2s var(--ease) 1; }
@keyframes tickGlow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(232, 160, 74, .85)); } 45% { filter: drop-shadow(0 0 7px rgba(250, 212, 145, 1)); } }
.rail a { outline-offset: 1px; }
.hardday-btn { flex: none; min-height: 44px; padding: 0 4px; background: none; border: 0; font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: var(--umber); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* screen content */
.screen { animation: sheetIn var(--t-base) var(--ease); }
@keyframes sheetIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
h2.heading { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; margin: 18px 0 12px; letter-spacing: -0.01em; }
.prose p, .prose li { font-family: var(--f-read); font-weight: 500; font-size: 21px; line-height: 1.5; margin: 0 0 14px; color: var(--navy); }
.pull { font-family: var(--f-read); font-style: italic; font-size: 24px; line-height: 1.35; color: var(--umber); margin: 18px 0; padding: 0 0 0 14px; border-left: 1px solid var(--umber); }
.verse { margin: 18px 0; }
.verse p { font-family: var(--f-read); font-weight: 500; font-size: 21px; line-height: 1.5; margin: 0; }
.verse cite { display: block; margin-top: 4px; font-family: var(--f-ui); font-style: normal; font-size: 15px; font-weight: 600; color: var(--umber); }
.card { background: rgba(70, 53, 38, .05); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 18px; margin: 18px 0; }
.card h3 { margin: 0 0 6px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.25; }
.card p { margin: 0 0 6px; }
.bookref { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; line-height: 1.35; }

/* forms */
.field { margin: 18px 0; }
.field label, .legend { display: block; font-family: var(--f-ui); font-weight: 600; font-size: 16px; margin-bottom: 6px; color: var(--navy); }
.field label span { font-weight: 400; color: var(--umber); }
.help { font-size: 15px; color: var(--umber); margin: 4px 0 0; }
input[type=text], input[type=email], input[type=date], textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(18, 32, 64, .45); border-radius: var(--r-ctl); background: #FBF6EE; color: var(--navy); font-family: var(--f-ui); font-size: 17px; font-variant-numeric: tabular-nums; }
textarea { min-height: 120px; font-family: var(--f-read); font-size: 20px; line-height: 1.45; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.err { color: #8A2E12; font-size: 15px; font-weight: 600; margin: 6px 0 0; }
[aria-invalid=true] { border-color: #8A2E12; }
.saved { display: inline-block; font-size: 15px; color: var(--umber); opacity: 0; transition: opacity var(--t-fast) var(--ease); min-height: 22px; }
.saved.on { opacity: 1; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inline-blank { display: inline-block; width: 9em; min-height: 40px; padding: 4px 8px; margin: 2px 2px; border: 0; border-bottom: 1px solid var(--navy); border-radius: 0; background: transparent; font-family: var(--f-read); font-size: 20px; color: var(--navy); }
.fineprint { font-size: 15px; color: var(--umber); margin-top: 12px; }

/* checkboxes and radios */
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 17px; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { flex: none; width: 26px; height: 26px; border: 1.5px solid var(--navy); border-radius: 5px; display: grid; place-items: center; margin-top: 1px; }
.check .box path { stroke: var(--navy); stroke-width: 2.4; fill: none; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--t-fast) var(--ease); }
.check input:checked + .box path { stroke-dashoffset: 0; }
.check input:focus-visible + .box { outline: 2px solid var(--amber); outline-offset: 3px; }
.radio-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; margin: 10px 0; border: 1px solid rgba(18,32,64,.4); border-radius: var(--r-ctl); cursor: pointer; font-family: var(--f-display); font-size: 1.3rem; }
.radio-row input { width: 22px; height: 22px; accent-color: var(--amber); }
.radio-row small { display: block; font-family: var(--f-ui); font-size: 15px; color: var(--umber); }
.radio-row:has(input:checked) { border-color: var(--navy); background: rgba(232,160,74,.12); }

/* ---------- Dark grounds (Fork, Route, send-off) ---------- */
.dark { background: var(--valley); color: var(--cream); }
.full { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.full .bg { position: absolute; inset: 0; overflow: hidden; }
.full .bg img { width: 100%; height: 100%; object-fit: cover; }
.full .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(25,41,53,.15) 0%, rgba(25,41,53,.2) 35%, rgba(25,41,53,.88) 72%, rgba(25,41,53,.96)); }
.full .fg { position: relative; margin-top: auto; padding: 24px 22px calc(28px + env(safe-area-inset-bottom)); max-width: 34rem; width: 100%; align-self: center; }
.fork-lockup { font-size: clamp(2.6rem, 12vw, 4.2rem); margin: 0 0 6px; }
.fork-lockup .steps { display: block; font-size: .42em; font-family: var(--f-ui); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--first-light); margin-top: 10px; }
.fork-hook { font-family: var(--f-read); font-style: italic; font-size: 23px; line-height: 1.4; color: var(--cream); margin: 14px 0 6px; }
.dark .fineline { font-size: 15px; color: var(--slate-text); text-align: center; margin: 14px 0 0; }

/* Today */
.band { position: relative; height: 30svh; overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(25,41,53,.3), rgba(25,41,53,.1) 50%, rgba(25,41,53,.5)); }
.band .lockup { position: absolute; left: 20px; bottom: 34px; z-index: 1; font-size: 1.6rem; }
.today .sheet { min-height: 75svh; margin-top: -18px; }
.banner { background: rgba(232, 160, 74, .18); border: 1px solid rgba(232,160,74,.6); border-radius: var(--r-ctl); padding: 10px 14px; margin: 18px 0 0; font-weight: 600; }
.today-card h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; line-height: 1.2; margin: 6px 0; }
.label { font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: var(--umber); margin: 24px 0 0; }
.vow { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hair); }
.update-line { font-size: 15px; color: var(--umber); }

/* Route */
.route { min-height: 100svh; background: var(--valley); color: var(--cream); }
.route-band { padding: calc(max(env(safe-area-inset-top), 8px) + 56px) 20px 18px; border-bottom: 1px solid rgba(81,99,110,.6); }
.route-band h1 { font-family: var(--f-display); font-weight: 700; font-size: 2.6rem; margin: 6px 0 0; letter-spacing: -0.01em; }
.route-map { position: relative; }
.route-map svg { display: block; width: 100%; height: auto; }
.route-map .contour { fill: none; stroke: var(--slate); stroke-opacity: .25; stroke-width: 1; }
.route-map .trail { fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 7; }
.route-map .walked { fill: none; stroke: var(--first-light); stroke-width: 3.2; stroke-linecap: round; }
.route-map .walked.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 700ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.wp { position: absolute; transform: translate(-22px, -22px); display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--cream); width: max-content; max-width: 64vw; }
.wp.right { flex-direction: row-reverse; transform: translate(22px, -22px); text-align: right; }
.wp .cairn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.wp .cairn svg { width: 28px; height: 28px; }
.wp .t { font-family: var(--f-display); font-size: 1.02rem; line-height: 1.2; }
.wp .t i { display: block; font-style: italic; font-weight: 400; font-size: .95rem; color: var(--slate-text); }
.wp.today .cairn { border-radius: 50%; box-shadow: 0 0 0 5px rgba(250,212,145,.16); animation: glow 2.2s var(--ease) 2; }
@keyframes glow { 0% { box-shadow: 0 0 0 5px rgba(250,212,145,.16); } 40% { box-shadow: 0 0 0 12px rgba(250,212,145,.35); } 100% { box-shadow: 0 0 0 5px rgba(250,212,145,.16); } }
.route.dimmed .route-map { opacity: .45; pointer-events: none; }
.route-note { padding: 16px 20px 36px; font-family: var(--f-read); font-size: 21px; }

/* Door 1 */
.door1 { padding-bottom: 150px; }
.door1 .sheet { min-height: 100svh; padding-top: calc(max(env(safe-area-inset-top), 8px) + 60px); border-radius: 0; }
.stage-cover { background: var(--valley); border-radius: var(--r-sheet); padding: 34px 20px; display: grid; place-items: center; margin-bottom: 20px; }
.stage-cover img { width: min(62%, 240px); height: auto; border-radius: var(--r-cover); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.d1bar { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(244,236,223,.97); border-top: 1px solid var(--hair); }
.buy-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.buy-row strong { font-family: var(--f-display); font-size: 1.3rem; }
.buy-row .price { font-variant-numeric: tabular-nums; font-weight: 600; }
.buy-row .btn { width: auto; min-width: 128px; }
.h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.01em; }

/* Send-off */
.sendoff .fg h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.12; margin: 0 0 18px; letter-spacing: -0.01em; }
.sendoff .fg .eyebrow { font-family: var(--f-ui); font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--first-light); margin: 0 0 8px; }
.sendoff .fg .lede { font-family: var(--f-read); font-size: 1.2rem; line-height: 1.45; margin: 0 0 20px; max-width: 30rem; }
.sendoff .fg .quiet-light { font-family: var(--f-ui); font-size: 16px; color: var(--cream); opacity: .9; margin: 0; }
.sendoff .btn-next { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.3; padding-top: 14px; padding-bottom: 14px; }
.up-next { margin: 16px 0 0; }
.up-next .label { margin: 0; }

/* Bottom sheets */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(25, 41, 53, .55); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.scrim.on { opacity: 1; transition-duration: var(--t-base); }
.bsheet { position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; max-height: 86svh; overflow: auto; overscroll-behavior: contain; background: var(--cream); color: var(--navy); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform var(--t-fast) var(--ease); box-shadow: 0 -12px 32px rgba(25,41,53,.25); }
.bsheet.on { transform: none; transition-duration: var(--t-base); }
.bsheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--hair); margin: 4px auto 10px; }
.bsheet .inner { max-width: 34rem; margin: 0 auto; }
.bsheet h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; margin: 6px 0 10px; }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 6px 2px; background: none; border: 0; border-bottom: 1px solid var(--hair); text-decoration: none; font-size: 17px; text-align: left; cursor: pointer; color: var(--navy); }
.menu-list svg { width: 22px; height: 22px; flex: none; }

/* Toast (export and import only) */
.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--valley); color: var(--cream); padding: 12px 18px; border-radius: var(--r-ctl); font-size: 16px; max-width: 90vw; }

/* Plain pages */
.page .sheet { min-height: 100svh; padding-top: calc(max(env(safe-area-inset-top), 8px) + 64px); border-radius: 0; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.timeline .step { font-family: var(--f-read); font-size: 21px; }
.timeline .meta { font-size: 15px; color: var(--umber); }
.preview-canvas { width: 100%; height: auto; border-radius: var(--r-ctl); border: 1px solid var(--hair); background: var(--valley); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip { min-height: 44px; padding: 8px 14px; border-radius: var(--r-ctl); border: 1px solid var(--navy); background: transparent; color: var(--navy); font-size: 15px; font-weight: 600; cursor: pointer; }
.chip[aria-pressed=true] { background: var(--navy); color: var(--cream); }
.draft-pill { display: inline-block; vertical-align: middle; font: 600 12px/1.2 var(--f-ui); letter-spacing: .02em; color: var(--umber); background: rgba(232, 160, 74, .16); border: 1px solid rgba(232, 160, 74, .6); border-radius: 999px; padding: 4px 10px; margin: 6px 0; white-space: nowrap; }
.dark .draft-pill { color: var(--first-light); background: rgba(250, 212, 145, .1); border-color: rgba(250, 212, 145, .45); }
.price .draft-pill { margin: 4px 0 0; display: table; }
.with-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.with-pill .btn { width: 100%; }
.draft-note { display: inline-block; font-size: 13px; font-weight: 600; color: var(--umber); border: 1px dashed var(--umber); border-radius: 4px; padding: 2px 6px; margin: 6px 0; }
.esv { font-size: 15px; color: var(--umber); line-height: 1.5; }

/* ---------- Motion, matched to the website (opener film, gentle rises, stop complete) ---------- */
.opener .bg.film img, .opener .bg.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.opener .bg.film video { opacity: 0; transition: opacity 600ms var(--ease); }
.opener .bg.film.is-playing video { opacity: 1; }
.rise > * { animation: rise 760ms var(--ease) both; }
.rise > :nth-child(2) { animation-delay: 90ms; } .rise > :nth-child(3) { animation-delay: 180ms; } .rise > :nth-child(4) { animation-delay: 260ms; }
.rise > :nth-child(5) { animation-delay: 330ms; } .rise > :nth-child(n+6) { animation-delay: 390ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stop-complete .bg img { transform-origin: 50% 42%; animation: pushIn 20s cubic-bezier(.25, .1, .25, 1) forwards; }
@keyframes pushIn { from { transform: scale(1); } to { transform: scale(1.08); } }
.stop-complete .bg .glint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, rgba(250,212,145,0) 35%, rgba(250,212,145,.38) 50%, rgba(250,212,145,0) 65%); transform: translateX(-100%); animation: glint 2.4s var(--ease) 350ms forwards; mix-blend-mode: screen; }
@keyframes glint { to { transform: translateX(100%); } }
.stop-complete .fg .eyebrow::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 10px; background: linear-gradient(90deg, var(--amber), var(--first-light)); transform-origin: left; animation: rule 900ms var(--ease) 500ms both; }
@keyframes rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .rise > *, .stop-complete .bg img, .stop-complete .fg .eyebrow::after, .rail .tick.now, .wp.today .cairn { animation: none !important; }
  .opener .bg.film video, .stop-complete .bg .glint { display: none; }
  .plate { transform: none !important; }
  .screen { animation: fadeOnly 1ms; }
  .plate.first-light .sweep { animation: none; transform: scaleX(1); opacity: 1; }
}
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 720px) {
  .sheet { padding-left: 32px; padding-right: 32px; }
}
/* Account and sync */
.acct-privacy { font-family: var(--f-read); font-size: 20px; line-height: 1.45; margin: 18px 0 0; }
.acct-form { margin-top: 18px; }
.acct-who { margin: 6px 0 2px; font-size: 17px; }
.sync-line { margin: 0 0 8px; color: var(--umber); font-weight: 600; }
.danger-zone { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hair); }
.btn-delete { border-color: var(--umber); color: var(--umber); }
[hidden] { display: none !important; }
/* Another device: how-to and loaded confirmation */
.acct-howto { background: rgba(70, 53, 38, .05); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 18px; margin: 24px 0; }
.acct-howto .heading { margin-top: 0; }
.acct-howto p { margin: 8px 0 0; font-size: 17px; line-height: 1.5; }
.howto-steps { margin: 10px 0 0; padding-left: 1.4em; font-size: 17px; line-height: 1.5; }
.howto-steps li { margin: 6px 0; overflow-wrap: anywhere; }
.acct-loaded { background: rgba(232, 160, 74, .16); border: 1px solid var(--amber); border-radius: var(--r-sheet); padding: 16px 18px; margin: 8px 0 18px; }
.acct-loaded p { margin: 6px 0 0; }
.acct-loaded .acct-loaded-title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1.25; color: var(--navy); }
.fork-signin { margin-top: 6px; }
/* ---------- steps-five (Draft, pending Herman) ---------- */
.draft-new { display: inline-block; vertical-align: middle; font: 600 11px/1.2 var(--f-ui); color: var(--umber); background: rgba(232, 160, 74, .12); border: 1px dashed rgba(232, 160, 74, .7); border-radius: 999px; padding: 3px 9px; margin: 4px 0; white-space: nowrap; letter-spacing: .02em; }
.dark .draft-new { color: var(--first-light); border-color: rgba(250, 212, 145, .5); background: rgba(250, 212, 145, .08); }
.echo { border-left: 3px solid var(--amber); }
.echo-text, .recap-text, .plan-text { font-family: var(--f-read); font-size: 20px; line-height: 1.4; margin: 4px 0; }
.recap .label, .plan-pair .label { margin: 12px 0 0; }
.recap h3 { margin-top: 0; }
.rule-lines { padding-left: 18px; margin: 6px 0; } .rule-lines li { margin: 6px 0; font-family: var(--f-read); font-size: 19px; }
.share-mini { margin: 6px 0 0; font-size: 15px; }
.pull-wrap .pull { margin-bottom: 4px; }
.loop { margin-top: 12px; } .loop .legend { margin-bottom: 4px; }
.pattern-list { padding-left: 18px; margin: 6px 0 0; } .pattern-list li { margin: 8px 0; line-height: 1.45; }
.season-card .season-practice { font-family: var(--f-read); font-size: 19px; margin: 6px 0; }
.plan-sec { margin-top: 26px; } .plan-ref { font: 500 14px/1.4 var(--f-ui); color: var(--umber); margin: 2px 0 10px; }
.partner-check .chips { margin: 8px 0; }
@media print {
  .topbar, .no-print, .draft-new, .bsheet, .menu-btn { display: none !important; }
  .page, .sheet, .sheet-inner { background: #fff !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  .plan-sec { break-inside: avoid; }
}
/* ---------- steps-next ---------- */
.install-moment { margin-top: 22px; padding: 16px 18px; border: 1px solid rgba(250, 212, 145, .45); border-radius: 16px; background: rgba(18, 32, 64, .55); }
.install-moment h2 { font-size: 22px; margin: 0 0 6px; } .install-moment p { margin: 6px 0; }
.quiet-card { border-left: 3px solid var(--amber); }
.rem h3 { margin-top: 0; }
.mc-context { font-style: italic; margin-top: 2px; }
/* ---------- steps-groups ---------- */
.gw-members { list-style: none; padding: 0; margin: 10px 0; }
.gw-member { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(20, 30, 60, .1); }
.gw-member:first-child { border-top: 0; }
.gw-name { font-weight: 600; min-width: 7em; }
.gw-stop { color: var(--ink-soft, #4a5568); }
.gw-took { font-size: 14px; font-weight: 600; color: #2f6b3a; }
.gw-remove { margin-left: auto; }
.gw-code { font: 600 18px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.gw-status:empty, .gw-note:empty { display: none; }
.gw-status { color: #9b2c2c; font-weight: 600; }
.gw details { margin: 10px 0; } .gw summary { cursor: pointer; font-weight: 600; }
.gw-invited { font-weight: 600; }
.gw-guide summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.gw-guide h3 { margin: 16px 0 4px; font-size: 17px; }
.gw-guide blockquote { margin: 10px 0; padding-left: 12px; border-left: 3px solid var(--amber, #e8a04a); }
.gw-guide cite { display: block; font-size: 14px; font-style: normal; opacity: .8; }

/* Top bar backdrop on scroll (approved by Herman 2026-10-17 7:59 PM CT). Pseudo-element only: no layout shift. */
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: rgba(244, 236, 223, .82); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 rgba(25, 41, 53, .08), 0 8px 18px -10px rgba(25, 41, 53, .28); transition: opacity 180ms ease; }
.app-scrolled .topbar::before { opacity: 1; }
.dark .topbar::before, .route .topbar::before, .full .topbar::before { background: rgba(25, 41, 53, .72); box-shadow: 0 1px 0 rgba(244, 236, 223, .08), 0 8px 18px -10px rgba(0, 0, 0, .5); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar::before { background: rgba(244, 236, 223, .96); } .dark .topbar::before, .route .topbar::before, .full .topbar::before { background: rgba(25, 41, 53, .94); } }
@media (prefers-reduced-motion: reduce) { .topbar::before { transition: none; } }

/* Post on X / Share on Facebook (approved by Herman 2026-10-17 8:44 PM CT) */
.social-row { margin-top: 10px; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.social-btn svg { width: 20px; height: 20px; flex: none; }