/* Midnight Gold, as in lib/shared/theme_objects.dart and landing/site.css: Newsreader + Geist, champagne gold on the night sky. */
:root {
  --top: #3B4170;
  --mid: #1E2139;
  --bottom: #14162A;
  --night: #10122A;
  --ink: #F2ECE1;
  --ink2: #D9D4E3;
  --muted: #A09DB6;
  --gold: #E2C792;
  --goldsoft: #F4DFB2;
  --alarm: #F07A72;
  --hair: rgba(255, 255, 255, .1);
  --glass: rgba(255, 255, 255, .055);
  --glass2: rgba(255, 255, 255, .09);
  --satin: linear-gradient(180deg, #F1E1BC 0%, #DCC08A 46%, #C8A469 100%);
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bottom); overflow-x: hidden; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(135% 85% at 50% -14%, var(--top) 0%, var(--mid) 52%, var(--bottom) 100%) no-repeat fixed;
  background-color: var(--bottom);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.45;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.018em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.hidden { display: none !important; }
.ic { width: 22px; height: 22px; flex: none; }
em { font-style: italic; color: var(--goldsoft); }
.gold { color: var(--gold); }
.alarm { color: var(--alarm); }
.kicker {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.kicker .ic { width: 15px; height: 15px; }
/* ---- shell: a phone-width column, the top bar with the progress line, the pinned footer */
#root { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; padding: 8px 20px calc(140px + var(--safe-b)); animation: rise .38s ease both; }
.screen.from-back { animation-name: fade; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, rgba(30, 33, 57, .96) 60%, rgba(30, 33, 57, 0)); }
.back { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink2); }
.back:active { background: var(--glass); }
.progress { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); margin-right: 36px; }
.progress i { display: block; height: 100%; background: var(--gold); border-radius: 2px; transition: width .4s ease; }

.foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 18px 20px calc(18px + var(--safe-b));
  background: linear-gradient(180deg, rgba(20, 22, 42, 0) 0%, rgba(20, 22, 42, .92) 28%, var(--bottom) 100%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.foot > * { width: 100%; max-width: 440px; }
.cta {
  height: 56px; border-radius: 999px; background: var(--satin); color: #21180A; font-weight: 600; font-size: 16.5px;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .12s ease, opacity .2s ease, filter .2s;
}
.cta:active { transform: scale(.985); filter: brightness(.96); }
.cta[disabled] { opacity: .38; filter: saturate(.5); cursor: default; }
.cta.small { height: 48px; font-size: 15.5px; }
.ghost { height: 48px; border-radius: 999px; border: 1px solid rgba(226, 199, 146, .45); color: var(--gold); font-weight: 500; }
.fine { font-size: 12.5px; color: var(--muted); text-align: center; }
.fine a { color: var(--ink2); }

/* the header on every screen, as signup.chorefriend.com: the logo and name, then back + the progress line */
.topbar { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 16px 6px; }
.brandbar { display: flex; align-items: center; justify-content: center; gap: 8px; height: 30px; font-family: var(--serif); font-size: 18px; letter-spacing: -.01em; }
.brandbar img { width: 24px; height: 24px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.progressrow { display: flex; align-items: center; gap: 10px; }
.progressrow .progress { margin-right: 0; height: 4px; border-radius: 4px; }
.progressrow .progress i { background: var(--satin); border-radius: 4px; box-shadow: 0 0 10px rgba(226, 199, 146, .35); }
.progressrow .spacer { width: 36px; flex: none; }
.topbar.plain { padding-bottom: 2px; }
.progress.seg { display: flex; gap: 5px; height: 4px; background: none; }
.progress.seg span { flex: 1; height: 100%; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.progress.seg i { display: block; height: 100%; background: var(--satin); border-radius: 4px; transition: width .4s ease; }
.chapter { text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--goldsoft); opacity: .8; margin-top: 2px; }
/* ---- questions, as the app draws them: the question top left, answers as rows, a check circle on the right */
.card { padding-top: 14px; }
.q { font-size: 30px; line-height: 1.15; }
.hint { color: var(--muted); font-size: 15px; margin-top: 10px; }
.opts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.opt {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px; text-align: left;
  border-radius: 16px; background: var(--glass); border: 1px solid var(--hair); font-size: 16.5px; font-weight: 500;
  transition: background .2s, border-color .2s, transform .12s;
}
.opt:active { transform: scale(.99); }
.opt span { flex: 1; }
.opt .note { font-style: normal; color: var(--muted); font-size: 14px; }
.opt.on { background: rgba(226, 199, 146, .1); border-color: rgba(226, 199, 146, .75); }
.opt .tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); display: grid; place-items: center; flex: none; }
.opt .tick .ic { width: 15px; height: 15px; opacity: 0; color: #21180A; }
.opt.on .tick { background: var(--gold); border-color: var(--gold); }
.opt.on .tick .ic { opacity: 1; }

/* feelings: pills with a check once chosen */
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--hair); background: var(--glass); font-size: 16px; font-weight: 500; transition: background .2s, border-color .2s; }
.tag .tagcheck { width: 15px; height: 15px; display: none; color: var(--gold); }
.tag.on { background: rgba(226, 199, 146, .1); border-color: rgba(226, 199, 146, .75); }
.tag.on .tagcheck { display: block; }

/* topics: two-column tiles with an icon, as the app's grid */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 92px; padding: 14px; text-align: left; border-radius: 16px; background: var(--glass); border: 1px solid var(--hair); font-size: 15px; font-weight: 500; }
.tile .tileic { width: 24px; height: 24px; color: var(--goldsoft); }
.tile .tick { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; background: var(--gold); }
.tile .tick .ic { width: 14px; height: 14px; color: #21180A; }
.tile.on { background: rgba(226, 199, 146, .1); border-color: rgba(226, 199, 146, .75); }
.tile.on .tick { display: grid; }

/* text inputs (name, email) */
.card form { margin-top: 22px; }
.card input {
  width: 100%; height: 58px; border-radius: 16px; padding: 0 18px; font: 500 17px var(--sans); color: var(--ink);
  background: var(--glass); border: 1px solid rgba(255, 255, 255, .18); outline: none;
}
.card input:focus { border-color: var(--gold); background: rgba(226, 199, 146, .07); }
.card input::placeholder { color: var(--muted); }
.err { color: var(--alarm); font-size: 14px; margin-top: 10px; }
.skip { color: var(--muted); font-size: 15px; padding: 4px 12px; width: auto !important; }
/* ---- the phone: the real For you feed inside a phone, scrolling by itself */
.phone {
  position: relative; width: 250px; aspect-ratio: 1170 / 2532; border-radius: 42px; padding: 8px;
  background: linear-gradient(160deg, #3a3d52, #14151f 40%, #0b0c13);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .09), 0 0 90px -20px rgba(226, 199, 146, .22);
}
.phone .glass { position: relative; width: 100%; height: 100%; border-radius: 35px; overflow: hidden; background: #0c0d1a; }
.phone .glass::after { /* the island */
  content: ""; position: absolute; top: 9px; left: 50%; width: 30%; height: 20px; transform: translateX(-50%);
  border-radius: 20px; background: #000; z-index: 3;
}
.phone .feedvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; z-index: 2; }
.phone.has-video .feedvid { opacity: 1; }
.phone.has-video .reel { visibility: hidden; }
.phone.noreel-video .feedvid { display: none; }
.reel { position: absolute; inset: 0; will-change: transform; }
.reel > img, .reel > .post { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.reel.moving { transition: transform .55s cubic-bezier(.65, 0, .25, 1); }

.stage { position: relative; display: flex; justify-content: center; margin: 30px -20px 0; padding: 0 20px; }
.stage { overflow: hidden; }
.stage::before { content: ""; position: absolute; top: 40px; left: 50%; width: min(420px, 100%); height: 420px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 110, .24), rgba(255, 190, 110, 0) 65%); pointer-events: none; }
.hero-phone { width: min(64vw, 262px); }

/* small phones side by side (the reveal) */
.phone.mini { width: 100%; border-radius: 26px; padding: 5px; }
.phone.mini .glass { border-radius: 22px; }
.phone.mini .glass::after { top: 6px; height: 12px; }
.phone.dull { background: linear-gradient(160deg, #3b3b40, #18181c 40%, #0d0d10); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .07); }
.phone.dull .glass { background: #111114; }
.post { position: relative; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 34px 18px 10px;
  background: #1a1a1e; color: #e8e8ea; font-family: var(--sans); overflow: hidden; }
.post-art { position: absolute; inset: 0; }
.post-art i { position: absolute; border-radius: 50%; filter: blur(18px); opacity: .75; }
.post-meme .post-art { background: linear-gradient(170deg, #4b4a55, #26252b 70%); }
.post-meme .post-art i:nth-child(1) { width: 70%; height: 40%; left: 10%; top: 18%; background: #8a7f6e; }
.post-meme .post-art i:nth-child(2) { width: 40%; height: 30%; right: 0; top: 45%; background: #5b6a8a; }
.post-news .post-art { background: linear-gradient(180deg, #5a1f1f 0%, #2a1717 45%, #161618 100%); }
.post-news .post-art i:nth-child(1) { width: 80%; height: 22%; left: 10%; top: 20%; background: #a33a2c; }
.post-news .post-art i:nth-child(2) { width: 30%; height: 20%; left: 5%; top: 50%; background: #3d3d48; }
.post-drama .post-art { background: linear-gradient(160deg, #5c3b58, #241e26 72%); }
.post-drama .post-art i:nth-child(1) { width: 55%; height: 35%; left: 25%; top: 15%; background: #c27a9c; }
.post-drama .post-art i:nth-child(2) { width: 45%; height: 25%; left: 0; top: 48%; background: #6b4a8a; }
.post-ad .post-art { background: linear-gradient(160deg, #3b4f63, #1c2027 70%); }
.post-ad .post-art i:nth-child(1) { width: 60%; height: 30%; left: 20%; top: 25%; background: #d9b25a; }
.post-ad .post-art i:nth-child(2) { width: 30%; height: 30%; right: 5%; top: 55%; background: #4e7aa0; }
.post p { position: relative; font-size: 11.5px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.post-rail { position: absolute; right: 6px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.post-rail span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.post-rail .ic { width: 16px; height: 16px; color: #fff; }
.post-rail b { font-size: 8px; font-weight: 600; color: #ddd; }
/* ---- landing: the ads' words, then the real feed swiping in a phone, paintings behind, hearts rising */
body[data-kind="landing"] .screen { padding-top: 6px; }
.landing { display: flex; flex-direction: column; align-items: center; text-align: center; }
.landing h1 { font-size: 42px; line-height: 1.02; margin-top: 10px; }
.landing .lede { color: var(--ink2); font-size: 17px; line-height: 1.45; margin: 12px auto 0; max-width: 330px; }
.scene { position: relative; width: 100%; display: flex; justify-content: center; margin-top: 22px; padding: 6px 0 10px; }
.scene::before { content: ""; position: absolute; left: 50%; top: 8%; width: 380px; height: 380px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 110, .30), rgba(255, 190, 110, 0) 64%); animation: breathe 5s ease-in-out infinite; pointer-events: none; }
.scene .hero-phone { width: min(54vw, 220px); z-index: 2; animation: hover 6s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-8px) rotate(-.6deg); } }
.gart { position: absolute; top: 16%; width: min(30vw, 124px); aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; opacity: .8;
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
.gart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 42, 0) 40%, rgba(20, 22, 42, .55)); }
.gart.g1 { left: calc(50% - min(54vw, 220px) / 2 - min(19vw, 84px)); transform: rotate(-9deg); animation: drift1 7s ease-in-out infinite; }
.gart.g2 { right: calc(50% - min(54vw, 220px) / 2 - min(19vw, 84px)); top: 40%; transform: rotate(8deg); animation: drift2 8s ease-in-out infinite; }
@keyframes drift1 { 50% { transform: rotate(-11deg) translateY(10px); } }
@keyframes drift2 { 50% { transform: rotate(10deg) translateY(-10px); } }
.float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  background: rgba(38, 42, 74, .78); border: 1px solid rgba(226, 199, 146, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); animation: bob 4.5s ease-in-out infinite; }
.float .ic { width: 16px; height: 16px; color: var(--gold); }
.float.f1 { left: max(2%, calc(50% - 190px)); top: 8%; }
.float.f2 { right: max(2%, calc(50% - 190px)); top: 30%; animation-delay: -1.5s; }
.float.f3 { left: max(4%, calc(50% - 176px)); top: 66%; animation-delay: -3s; }
@keyframes bob { 50% { transform: translateY(-7px); } }
.hearts { position: absolute; z-index: 4; left: calc(50% + min(54vw, 220px) / 2 - 34px); bottom: 34%; width: 24px; height: 24px; pointer-events: none; }
.hearts i { position: absolute; left: 0; bottom: 0; color: #ff5d73; animation: rise-heart 1.9s ease-out forwards; }
.hearts i .ic { width: 24px; height: 24px; fill: currentColor; stroke: none; filter: drop-shadow(0 2px 6px rgba(255, 93, 115, .5)); }
@keyframes rise-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; transform: translate(0, -14px) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--x), -150px) scale(.8); } }

/* ---- age: two columns of tiles */
.agegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.agetile { height: 86px; border-radius: 18px; background: var(--glass); border: 1px solid var(--hair); display: grid; place-items: center; transition: background .2s, border-color .2s, transform .12s; }
.agetile b { font-family: var(--serif); font-weight: 400; font-size: 28px; }
.agetile:active { transform: scale(.98); }
.agetile.on { background: rgba(226, 199, 146, .12); border-color: rgba(226, 199, 146, .8); }

/* rows with an icon or candles in front */
.opt .lead { width: 22px; height: 22px; flex: none; color: var(--goldsoft); }
.opt .candlerow { display: inline-flex; gap: 1px; width: 66px; flex: none; color: var(--gold); }
.candlerow .ic { width: 16px; height: 16px; }

/* ---- interstitials: the candle, one line, at most one card */
.center { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 40px; }
.center.fill { min-height: 70vh; justify-content: center; padding-top: 0; }
.glow { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: var(--gold);
  background: radial-gradient(circle, rgba(255, 190, 110, .3), rgba(255, 190, 110, 0) 70%); animation: breathe 2.6s ease-in-out infinite; }
.glow .ic { width: 46px; height: 46px; }
.glow.small { width: 70px; height: 70px; }
.glow.small .ic { width: 34px; height: 34px; }
@keyframes breathe { 50% { transform: scale(1.07); } }
.big { font-size: 40px; line-height: 1.1; margin-top: 14px; }
.mid { font-size: 28px; line-height: 1.2; margin-top: 14px; max-width: 340px; }
.center .sub, .statscreen .sub { color: var(--ink2); font-size: 17px; margin-top: 10px; }
.versecard { width: 100%; margin-top: 26px; padding: 22px 20px; border-radius: 18px; text-align: left; background: var(--glass); border: 1px solid var(--hair); }
.versecard p { font-family: var(--serif); font-size: 19px; line-height: 1.45; }
.versecard .ref { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .2em; color: var(--gold); }

/* ---- "That adds up." */
.statscreen { padding-top: 34px; }
.bignum.alarm { color: var(--alarm); }
.year { display: grid; grid-template-columns: repeat(26, 1fr); gap: 5px; margin-top: 26px; }
.year i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.year i.on { background: var(--alarm); box-shadow: 0 0 6px rgba(240, 122, 114, .55); animation: dot-on .3s ease both; animation-delay: calc(var(--k) * 9ms + 200ms); }
@keyframes dot-on { from { background: rgba(255, 255, 255, .1); box-shadow: none; transform: scale(.4); } }
.adds { font-family: var(--serif); font-size: 30px; }
.bignum { font-family: var(--serif); font-size: 76px; line-height: 1; margin-top: 18px; }
.statscreen .sub { font-family: var(--serif); font-size: 21px; margin-top: 8px; }
.yearnote { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.factline { display: flex; gap: 12px; align-items: flex-start; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); }
.factline .ic { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: var(--alarm); background: rgba(240, 122, 114, .14); }
.factline p { font-size: 15px; line-height: 1.45; color: var(--ink2); }
.factline span { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---- "Your week" */
.comparescreen { padding-top: 60px; }
.barrow { margin-top: 26px; }
.barhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 15.5px; color: var(--ink2); margin-bottom: 10px; }
.barhead b { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); }
.bar { height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 10px; }
.bar i.red { background: var(--alarm); }
.bar i.gold { background: var(--gold); }
.bar i.grow { width: 0; transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.bar i.gold.grow { transition-delay: .35s; }
.compareline { margin-top: 40px; font-family: var(--serif); font-size: 24px; line-height: 1.3; }

/* ---- demo: the app's phone frame with the real feed */
.demo .q { text-align: center; }
.demo-phone { width: min(58vw, 230px); margin-top: 24px; }

/* ---- "Do you relate?" and "How often does this happen?" */
.quotecard { position: relative; margin-top: 22px; min-height: 300px; display: flex; align-items: center; padding: 34px 24px; border-radius: 22px;
  background: linear-gradient(180deg, #3b4170, #2a2f57); border: 1px solid var(--hair); }
.quotecard { overflow: hidden; }
.quotecard .qart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.quotecard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 42, .25), rgba(20, 22, 42, .78)); }
.quotecard p, .quotecard .qmark { z-index: 1; }
.quotecard p { position: relative; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.quotecard .qmark { position: absolute; top: 14px; left: 22px; font-family: var(--serif); font-size: 50px; color: var(--goldsoft); opacity: .6; }
.quotecard p { font-family: var(--serif); font-size: 25px; line-height: 1.35; }
.statement { margin-top: 20px; padding: 20px; border-radius: 18px; background: var(--glass); border: 1px solid var(--hair); }
.statement p { font-family: var(--serif); font-size: 21px; line-height: 1.35; }
.foot.two { gap: 10px; }
/* the five-step scale: circles growing from Never to Always */
.scale5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 34px; align-items: start; }
.s5 { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink2); }
.s5 i { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(226, 199, 146, .4); transform: scale(var(--s)); background: var(--glass); transition: background .2s, border-color .2s, transform .15s; }
.s5.on i { background: var(--satin); border-color: var(--gold); box-shadow: 0 0 18px rgba(226, 199, 146, .45); }
.s5.on span { color: var(--ink); font-weight: 600; }
/* audio: a night picture over the question */
.nightart { position: relative; height: 150px; margin: 4px 0 20px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; }
.nightart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.62) hue-rotate(-12deg); }
.nightart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 33, 57, .1), rgba(30, 33, 57, .7)); }
.moonic { position: relative; z-index: 1; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: var(--goldsoft);
  background: radial-gradient(circle, rgba(255, 210, 140, .35), rgba(255, 210, 140, 0) 70%); animation: breathe 3s ease-in-out infinite; }
.moonic .ic { width: 34px; height: 34px; }

/* ---- the format deck */
.deckscreen { padding-top: 14px; }
.deck { position: relative; width: min(72vw, 280px); aspect-ratio: 1170 / 2000; margin: 20px auto 0; touch-action: pan-y; }
.swipe {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: #0c0d1a;
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1);
  transform: translateY(calc(var(--d) * 10px)) scale(calc(1 - var(--d) * .04)); transition: transform .3s ease, opacity .3s ease;
  cursor: grab; user-select: none;
}
.swipe.dragging { transition: none; cursor: grabbing; }
.swipe img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; pointer-events: none; }
.kindhead { position: absolute; left: 0; right: 0; top: 0; padding: 16px 16px 26px; text-align: left; background: linear-gradient(180deg, rgba(12, 13, 26, .92), rgba(12, 13, 26, 0)); }
.kindhead b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; }
.kindhead span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink2); }
.stamp { position: absolute; bottom: 18px; padding: 6px 12px; border-radius: 10px; font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .15s; }
.stamp.yes { left: 16px; color: #21180A; background: var(--gold); transform: rotate(-8deg); }
.stamp.no { right: 16px; color: var(--ink); background: rgba(255, 255, 255, .2); transform: rotate(8deg); }
.swipe.lean-yes .stamp.yes, .swipe.out-yes .stamp.yes { opacity: 1; }
.swipe.lean-no .stamp.no, .swipe.out-no .stamp.no { opacity: 1; }
.swipe.out-yes { transform: translateX(130%) rotate(18deg) !important; opacity: 0; }
.swipe.out-no { transform: translateX(-130%) rotate(-18deg) !important; opacity: 0; }
.deckbtns { display: flex; align-items: flex-start; justify-content: center; gap: 46px; margin-top: 24px; }
.roundwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.round { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair); background: var(--glass); }
.round .ic { width: 26px; height: 26px; }
.round.yes { background: var(--satin); color: #21180A; border: 0; }

/* ---- "Building your feed" */
.loader { padding-top: 30px; }
.counter { margin-top: 18px; }
.counter b { display: block; font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; color: var(--goldsoft); }
.counter span { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); }
.bars { width: 100%; margin-top: 30px; display: flex; flex-direction: column; gap: 18px; text-align: left; }
.bar-top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.bar2.active .bar-top, .bar2.done .bar-top { color: var(--ink2); }
.bar-top b { font-weight: 500; font-size: 13px; }
.bar-top b .ic { width: 16px; height: 16px; color: var(--gold); }
.track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--satin); border-radius: 4px; transition: width .1s linear; }
.track.short { width: 160px; margin-top: 26px; }
.track.short i { transition: width 2.1s ease; }
.modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 9, 20, .5); backdrop-filter: blur(3px); animation: fade .2s ease; }
.sheet { width: 100%; max-width: 480px; padding: 26px 22px calc(26px + var(--safe-b)); border-radius: 26px 26px 0 0; background: #262A4A; border-top: 1px solid var(--hair); text-align: left; animation: rise .25s ease; }
.sheet h3 { font-size: 24px; line-height: 1.25; }
.yn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }

/* ---- result: ready, the 21-day path, proof */
.ready { padding-top: 24px; }
.ready-phone { width: min(56vw, 220px); }
.ready-phone .glass img.still { width: 100%; height: 100%; object-fit: cover; display: block; }
.pathscreen { padding-top: 30px; }
.pathsvg { width: min(80vw, 300px); height: auto; }
.proof { padding-top: 60px; }
.candles { display: grid; grid-template-columns: repeat(9, 1fr); gap: 14px 12px; width: min(84vw, 320px); }
.candles i { position: relative; height: 28px; }
.candles i::before { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 10px; transform: translateX(-50%); border-radius: 50% 50% 45% 45%; background: #ffd27a; box-shadow: 0 0 10px 3px rgba(255, 190, 110, .55); }
.candles i::after { content: ""; position: absolute; left: 50%; top: 12px; width: 6px; height: 16px; transform: translateX(-50%); border-radius: 2px; background: #efe3c8; }
.proof .bignum { margin-top: 30px; }

/* ---- the artifact: their feed, fanned; the first card open, the rest behind Membership */
.artifact { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
.artifact .mid { margin-top: 6px; }
.facts { display: flex; gap: 8px; margin-top: 14px; }
.facts span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; color: var(--ink2); background: var(--glass); border: 1px solid var(--hair); }
.facts .ic { width: 15px; height: 15px; color: var(--gold); }
.fan { position: relative; width: 100%; height: 344px; margin-top: 18px; }
.fcard { position: absolute; left: 50%; top: 6px; width: 224px; height: 322px; margin-left: -112px; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1); animation: deal .7s cubic-bezier(.2, .8, .2, 1) both; }
.fcard.front { z-index: 3; animation-delay: .1s; }
.fcard.back { filter: saturate(.85); }
.fcard.back .fc { filter: blur(3px); transform: scale(1.04); }
.fcard.b1 { --r: -10deg; --x: -68px; animation-delay: .25s; }
.fcard.b2 { --r: 10deg; --x: 68px; animation-delay: .35s; }
.fcard.back { transform: translateX(var(--x)) rotate(var(--r)) scale(.88); }
@keyframes deal { from { opacity: 0; transform: translateY(40px) scale(.9); } }
.fcard.front { box-shadow: 0 34px 60px -22px rgba(0, 0, 0, .95), 0 0 0 1px rgba(226, 199, 146, .45), 0 0 60px -10px rgba(226, 199, 146, .35); }
.lockchip { position: absolute; left: 50%; top: 22%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 22, 42, .7); border: 1px solid rgba(226, 199, 146, .4); color: var(--goldsoft); z-index: 2; }
.lockchip .ic { width: 20px; height: 20px; }
.b1 .lockchip { left: 22%; }
.b2 .lockchip { left: 78%; }
.fc { position: absolute; inset: 0; display: flex; flex-direction: column; text-align: left; }
.fc.verse { justify-content: center; padding: 22px 18px; background: radial-gradient(120% 80% at 50% 0%, #4a4f86, #262a4c 60%, #181a33); }
.fc.verse p { font-family: var(--serif); font-size: 18px; line-height: 1.38; margin-top: 12px; }
.fc .ref { margin-top: 14px; font-size: 10.5px; letter-spacing: .2em; color: var(--gold); }
.fctag { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--goldsoft); font-weight: 600; }
.fc.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fc.art .fcbody { position: relative; margin-top: auto; padding: 40px 16px 18px; background: linear-gradient(180deg, rgba(12, 13, 26, 0), rgba(12, 13, 26, .9)); }
.fc.art b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.2; }
.feedtags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; max-width: 360px; }
.ft { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; background: rgba(226, 199, 146, .1); border: 1px solid rgba(226, 199, 146, .55); color: var(--ink); }
.ft .ic { width: 14px; height: 14px; color: var(--gold); }
.ft.locked { background: var(--glass); border-color: var(--hair); color: var(--ink2); }
.ft.locked .ic { color: var(--muted); }
.ft.more { background: none; border-style: dashed; color: var(--muted); }

/* ---- hand-off to checkout */
.handoff { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--ink2); min-height: 60vh; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid rgba(226, 199, 146, .25); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-height: 700px) {
  .landing h1 { font-size: 36px; margin-top: 14px; }
  .scene .hero-phone { width: min(40vw, 160px); }
  .gart { width: min(24vw, 96px); }
  .fan { height: 270px; }
  .fcard { width: 176px; height: 252px; margin-left: -88px; }
  .fc.verse p { font-size: 15px; }
  .year { gap: 4px; margin-top: 18px; }
  .q { font-size: 27px; }
  .quotecard { min-height: 230px; }
  .statscreen, .comparescreen { padding-top: 34px; }
}