/* Lifelong Remembrance — a light, uplifting "dawn" world: warm ivory, gold leaf, and a gentle
   sky-blue, the dove brand rising into a soft sunrise. Reverent, but hopeful — a life celebrated. */
:root{
  --bg:#f1ebdf; --bg-2:#eae2d2; --bg-3:#e0d6c3; --panel:#fdfbf4; --panel-2:#f6f0e4;
  --line:#e0d5c1; --line-gold:rgba(156,111,26,.34); --line-cool:rgba(95,128,198,.30);
  --fg:#2b2a26; --fg-dim:#595549; --muted:#847e70;
  --gold:#9c6f1a; --gold-2:#b4821f; --gold-deep:#7a581a;
  /* gentle sky-blue accent — the uplifting "dawn" tone beside the gold */
  --accent:#5f80c6; --accent-2:#3f63ad; --accent-deep:#4a6bb4;
  --sky-1:#e9f0fb; --sky-2:#fff5e6;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1140px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-weight:400; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body.nav-open{overflow:hidden}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:22px}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.1; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.eyebrow{font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:600}
.muted{color:var(--muted)}
.serif{font-family:var(--serif)}
:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px; border-radius:2px}

/* section divider mark */
.rule{display:flex; align-items:center; justify-content:center; gap:16px; max-width:320px; margin:0 auto; color:var(--gold-deep)}
.rule::before,.rule::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--line-gold))}
.rule::after{background:linear-gradient(90deg,var(--line-gold),transparent)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600;
  font-size:14.5px; padding:12px 20px; border-radius:2px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .15s ease, background .25s ease, border-color .25s ease, color .25s ease}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#2a1f08; letter-spacing:.01em}
.btn-gold:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-gold); color:var(--gold-2)}
.btn-ghost:hover{border-color:var(--gold); background:rgba(217,180,91,.06)}

/* ---- top bar ---- */
header.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:rgba(255,253,249,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar .row{display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--gold-2); position:relative; z-index:2}
.brand .mark{width:34px; height:34px; flex:0 0 auto}
.brand .name{font-family:var(--serif); font-size:21px; letter-spacing:.06em; color:var(--fg)}
.site-nav{display:flex; align-items:center; gap:22px}
.navlink{color:var(--fg-dim); text-decoration:none; font-size:14.5px; white-space:nowrap}
.navlink:hover{color:var(--gold-2)}
.navlink.active{color:var(--gold-2)}
.nav-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:8px; color:var(--fg); cursor:pointer; position:relative; z-index:2}
.nav-toggle svg{width:22px; height:22px}
.nav-toggle .ic-close{display:none}
.nav-backdrop{display:none}

/* mobile: hamburger + full-width dropdown directly under the bar (the common pattern) */
@media(max-width:1023px){
  .nav-toggle{display:inline-flex}
  header.bar.open .nav-toggle .ic-open{display:none}
  header.bar.open .nav-toggle .ic-close{display:block}
  /* the panel is anchored to the sticky bar, so it opens flush beneath it — no top gap */
  .site-nav{position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    padding:6px 22px calc(18px + env(safe-area-inset-bottom,0px));
    background:var(--bg-2); border-bottom:1px solid var(--line); box-shadow:0 20px 44px rgba(0,0,0,.55);
    max-height:calc(100vh - 66px); max-height:calc(100dvh - 66px); overflow-y:auto}
  header.bar.open .site-nav{display:flex}
  .site-nav .navlink{font-size:16.5px; padding:15px 2px; border-bottom:1px solid var(--line); color:var(--fg)}
  .site-nav .navlink:last-of-type{border-bottom:none}
  .site-nav .btn{margin-top:14px; justify-content:center; padding-block:14px}
  .nav-backdrop{display:block; position:fixed; inset:0; z-index:40; background:rgba(43,42,38,.38);
    opacity:0; pointer-events:none; transition:opacity .2s ease}
  body.nav-open .nav-backdrop{opacity:1; pointer-events:auto}
}

/* ---- night-sky backdrop (shared by hero + page headers) ---- */
.sky{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(95% 70% at 82% -8%, rgba(95,128,198,.16), rgba(247,242,233,0) 55%),
    radial-gradient(130% 95% at 50% 120%, rgba(180,130,31,.13), rgba(247,242,233,0) 58%),
    radial-gradient(70% 55% at 50% 116%, rgba(255,205,120,.20), rgba(247,242,233,0) 62%),
    linear-gradient(180deg, var(--sky-1) 0%, #fbf3e4 55%, var(--bg) 100%)}
.sky .stars{position:absolute; inset:0; opacity:0;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 22%, rgba(239,233,220,.7), transparent),
    radial-gradient(1px 1px at 28% 12%, rgba(239,233,220,.5), transparent),
    radial-gradient(1px 1px at 46% 26%, rgba(239,233,220,.4), transparent),
    radial-gradient(1.2px 1.2px at 68% 14%, rgba(239,233,220,.55), transparent),
    radial-gradient(1px 1px at 82% 30%, rgba(239,233,220,.45), transparent),
    radial-gradient(1px 1px at 92% 18%, rgba(239,233,220,.4), transparent),
    radial-gradient(1px 1px at 58% 8%, rgba(239,233,220,.35), transparent)}
/* a soft rising sun for the dawn (kept the .moon class so the markup is unchanged) */
.sky .moon{position:absolute; top:46px; left:12%; width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #fff5d9, #f7cf8f 70%);
  box-shadow:0 0 56px rgba(247,207,143,.6), 0 0 20px rgba(255,245,217,.85)}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero .wrap{position:relative; z-index:1; padding-block:84px 92px; text-align:center}
.hero .halo{width:74px; height:74px; margin:0 auto 28px; color:var(--gold-2)}
.hero .halo .mark{width:74px; height:74px; filter:drop-shadow(0 0 18px rgba(241,220,166,.25))}
.hero h1{font-size:clamp(42px,7.6vw,82px); font-weight:500; letter-spacing:-.015em}
.hero h1 .em{font-style:italic; color:var(--gold-2); font-weight:500}
.hero .motto{margin-top:20px; font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.6vw,23px); color:var(--gold-2)}
.hero .lede{max-width:54ch; margin:16px auto 0; font-size:clamp(16.5px,2.1vw,19px); color:var(--fg-dim)}
.hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.hero .note{margin-top:22px; font-size:12.5px; letter-spacing:.05em; color:var(--muted)}

/* ---- interior page header ---- */
.page-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); text-align:center}
.page-hero .wrap{position:relative; z-index:1; padding-block:72px 58px; max-width:54ch}
.page-hero h1{font-size:clamp(32px,5.4vw,54px); font-weight:500; letter-spacing:-.01em; margin-top:14px}
.page-hero .lede{max-width:54ch; margin:18px auto 0; font-size:clamp(16px,2vw,19px); color:var(--fg-dim)}
.page-hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px}

/* ---- sections ---- */
section{border-bottom:1px solid var(--line)}
.sec{padding-block:84px}
.sec-head{max-width:48ch; margin:0 auto 52px; text-align:center}
.sec-head .eyebrow{display:block; margin-bottom:14px}
.sec-head h2{font-size:clamp(28px,4.4vw,42px)}
.sec-head p{margin-top:15px; color:var(--fg-dim); font-size:17px}
.center-cta{margin-top:44px; text-align:center}

/* promise */
.promise{background:radial-gradient(90% 130% at 50% -20%, rgba(217,180,91,.07), transparent 60%),var(--bg-2)}
.promise .wrap{max-width:60ch; text-align:center}
.promise .big{font-family:var(--serif); font-weight:400; font-size:clamp(26px,4.4vw,42px); line-height:1.22}
.promise .big .q{color:var(--gold-2); font-style:italic}
.promise .body{margin-top:24px; color:var(--fg-dim); font-size:17.5px}

/* steps */
.steps{display:grid; gap:1px; grid-template-columns:1fr; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden}
@media(min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{background:var(--bg); padding:34px 28px}
.step .n{font-family:var(--serif); font-size:34px; color:var(--gold-deep); line-height:1}
.step h3{font-size:22px; margin-top:14px}
.step p{margin-top:11px; color:var(--muted); font-size:15px}
.step .ic{width:28px; height:28px; margin-top:18px; color:var(--gold)}

/* the hall — niches (showcase) */
.hall{background:radial-gradient(80% 60% at 50% 120%, rgba(217,180,91,.08), transparent 60%),var(--bg-2)}
.niches{display:grid; gap:26px; grid-template-columns:1fr}
@media(min-width:680px){ .niches{grid-template-columns:repeat(3,1fr)} }
.niche{text-align:center}
.niche .frame{position:relative; aspect-ratio:3/4; border-radius:150px 150px 6px 6px;
  background:linear-gradient(180deg,#fffdf9,#efe7d6 72%); border:1px solid var(--line-gold); overflow:hidden;
  box-shadow:inset 0 28px 60px rgba(241,220,166,.08), inset 0 -20px 50px rgba(0,0,0,.5)}
.niche .glowtop{position:absolute; top:0; left:0; right:0; height:46%;
  background:radial-gradient(80% 90% at 50% 0%, rgba(241,220,166,.2), transparent 70%)}
.niche .portrait{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.niche .portrait svg{width:50%; height:50%; color:#c7bda4}
.niche .play{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:999px;
  background:rgba(255,255,255,.72); border:1px solid rgba(156,111,26,.5); display:flex; align-items:center; justify-content:center;
  color:var(--gold-2); backdrop-filter:blur(3px)}
.niche .tag{position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-2); background:rgba(255,255,255,.75); border:1px solid var(--line-gold);
  padding:4px 10px; border-radius:999px}
.niche .wave{position:absolute; bottom:0; left:0; right:0; height:40px; display:flex; align-items:flex-end; gap:3px; padding:0 20px 14px}
.niche .wave i{flex:1; background:linear-gradient(180deg,var(--gold-2),var(--gold-deep)); border-radius:2px; height:30%; animation:eq 1.7s ease-in-out infinite}
.niche .nm{font-family:var(--serif); font-size:21px; margin-top:20px}
.niche .yr{color:var(--muted); font-size:13px; margin-top:3px}
.niche .ask{color:var(--fg-dim); font-size:14.5px; font-style:italic; margin-top:12px; font-family:var(--serif)}
/* one live example + an explanation of how it works */
.glimpse-demo{display:grid; gap:36px; grid-template-columns:1fr; align-items:center; max-width:920px; margin:0 auto}
@media(min-width:760px){ .glimpse-demo{grid-template-columns:290px 1fr} }
.niche-link{display:block; text-decoration:none; color:inherit; transition:transform .2s ease}
.niche-link:hover{transform:translateY(-4px)}
.niche-link:hover .frame{border-color:var(--gold)}
.niche-link:hover .play{background:rgba(217,180,91,.22); border-color:var(--gold-2)}
.glimpse-how h3{font-size:23px}
.how-list{list-style:none; margin:20px 0 28px; padding:0; display:flex; flex-direction:column; gap:16px}
.how-list li{display:flex; gap:14px; align-items:flex-start}
.how-list .num{flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:var(--serif); font-size:15px; color:var(--gold-2); border:1px solid var(--line-gold)}
.how-list b{color:var(--fg); font-weight:600}
.how-list li>div{color:var(--fg-dim); font-size:15px}

/* ---- the device diagram (memorial page) ---- */
.device{display:grid; gap:34px; grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .device{grid-template-columns:1.05fr .95fr} }
.device-stage{position:relative; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--bg-2)}
.device-stage svg{display:block; width:100%; height:auto}
.specs{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:520px){ .specs{grid-template-columns:1fr 1fr} }
.spec{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:18px 18px}
.spec .st{display:flex; align-items:center; gap:10px; color:var(--gold-2); font-weight:600; font-size:14.5px}
.spec .st svg{width:18px; height:18px; color:var(--gold); flex:0 0 auto}
.spec p{margin-top:8px; color:var(--muted); font-size:13.5px}

/* levels */
.levels{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:620px){ .levels{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .levels{grid-template-columns:repeat(4,1fr)} }
.lvl{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:28px 22px}
.lvl.feature{border-color:var(--line-gold); background:linear-gradient(180deg,rgba(217,180,91,.08),var(--panel))}
.lvl .tier{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.lvl h3{font-size:24px; margin-top:9px}
.lvl .price{margin-top:11px; font-size:15px; color:var(--gold-2); font-weight:600}
.lvl p{margin-top:13px; color:var(--muted); font-size:14.5px; flex:1}
.lvl .pill{margin-top:16px; align-self:flex-start; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-2); border:1px solid var(--line-gold); border-radius:999px; padding:5px 12px}
.levels-note{max-width:64ch; margin:28px auto 0; text-align:center; color:var(--muted); font-size:14px}
.levels-teaser .lvl{padding-block:22px}

/* two-option intro cards (levels-page top "there are 2 ways" + the home teaser) */
.path-intro{display:grid; gap:18px; grid-template-columns:1fr; max-width:800px; margin:0 auto}
@media(min-width:680px){ .path-intro{grid-template-columns:1fr 1fr} }
.path-card{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:24px 24px}
.path-card .eyebrow{display:block; margin-bottom:9px}
.path-card h3{font-size:23px}
.path-card p{margin-top:10px; color:var(--fg-dim); font-size:15px}
.path-card .path-tiers{margin-top:13px; color:var(--gold-2); font-size:13.5px; font-family:var(--serif)}

/* balanced, centered level cards: auto-fit collapses the empty track so a row of 3 and a row of
   2 both center on the page instead of hugging the left edge */
.level-grid{display:grid; gap:20px; justify-content:center; margin-inline:auto; max-width:980px;
  grid-template-columns:repeat(auto-fit, minmax(248px, 310px))}
.level-grid-2{max-width:660px}
.level-grid .lvl .pill{margin-top:0; margin-bottom:12px}
/* per-tier branding emblem badge */
.lvl-emblem{display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px;
  border-radius:15px; margin-bottom:16px; color:var(--gold);
  background:linear-gradient(150deg, rgba(156,111,26,.12), rgba(95,128,198,.08));
  border:1px solid var(--line-gold)}
.lvl-emblem svg{width:32px; height:32px}
.lvl.feature .lvl-emblem{background:linear-gradient(150deg, rgba(156,111,26,.20), rgba(95,128,198,.10))}

/* split panels */
.split{display:grid; gap:22px; grid-template-columns:1fr}
@media(min-width:820px){ .split{grid-template-columns:1fr 1fr} }
.panel{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:36px 32px}
.panel .ic{width:30px;height:30px;color:var(--gold)}
.panel h3{font-size:25px; margin-top:16px}
.panel p{margin-top:13px; color:var(--fg-dim); font-size:16px}

/* prose (about) */
.prose{max-width:64ch; margin:0 auto}
/* legal pages */
.legal{max-width:70ch; margin:0 auto}
.legal-meta{color:var(--muted); font-size:13.5px; margin-bottom:28px}
.legal p{color:var(--fg-dim); font-size:16px; line-height:1.75; margin-top:14px}
.legal h2{font-size:22px; margin-top:38px}
.legal h3{font-size:17px; margin-top:22px; color:var(--fg)}
.legal ul{margin:12px 0 0; padding-left:22px; color:var(--fg-dim); font-size:16px; line-height:1.7}
.legal li{margin-top:7px}
.legal a{color:var(--gold-2)}
.legal b{color:var(--fg)}
.foot-legal a{color:var(--fg-dim); text-decoration:none}
.foot-legal a:hover{color:var(--gold-2)}
.prose p{color:var(--fg-dim); font-size:17px; line-height:1.78}
.prose p + p{margin-top:20px}

/* partners */
.partners{background:radial-gradient(90% 130% at 50% -20%, rgba(217,180,91,.08), transparent 60%),var(--bg-2)}
.partners .wrap{max-width:60ch; text-align:center}
.stat-row{display:grid; gap:18px; grid-template-columns:1fr; margin-top:46px}
@media(min-width:680px){ .stat-row{grid-template-columns:repeat(3,1fr)} }
.stat{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:24px 20px; text-align:center}
.stat .big{font-family:var(--serif); font-size:34px; color:var(--gold-2); font-variant-numeric:tabular-nums}
.stat p{margin-top:6px; color:var(--muted); font-size:13.5px}

/* contact */
.contact .grid{display:grid; gap:40px; grid-template-columns:1fr}
@media(min-width:880px){ .contact .grid{grid-template-columns:.9fr 1.1fr; align-items:start} }
.contact h2{font-size:clamp(28px,4vw,40px)}
.contact .side p{margin-top:16px; color:var(--fg-dim); font-size:16px}
.trust{margin-top:24px; display:flex; flex-direction:column; gap:14px}
.trust div{display:flex; gap:12px; align-items:flex-start; color:var(--fg-dim); font-size:14.5px}
.trust svg{width:19px;height:19px;color:var(--gold);flex:0 0 auto;margin-top:3px}
.side-note{margin-top:22px; color:var(--muted); font-size:14.5px}
.side-note a{color:var(--gold-2)}
form{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:28px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:17px}
.field label{font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:3px; padding:13px 14px; width:100%; min-width:0}
.field textarea{resize:vertical; min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(217,180,91,.16)}
form .row{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:520px){ form .row{grid-template-columns:1fr 1fr} }
form button{width:100%; justify-content:center; margin-top:4px}
.formnote{margin-top:13px; font-size:12.5px; color:var(--muted); text-align:center}
.thanks{display:none; text-align:center; padding:26px 6px}
.thanks.show{display:block}
.thanks .big{font-family:var(--serif); font-size:26px; color:var(--gold-2)}
.thanks p{margin-top:10px; color:var(--fg-dim); font-size:15px}

/* closing CTA band */
.cta-band{position:relative; overflow:hidden; text-align:center;
  background:radial-gradient(90% 130% at 50% 125%, rgba(217,180,91,.09), transparent 62%),var(--bg-2)}
.cta-band .wrap{position:relative; z-index:1; max-width:52ch}
.cta-band h2{font-size:clamp(26px,4vw,40px)}
.cta-band p{margin:16px auto 0; color:var(--fg-dim); font-size:17px}
.cta-band .cta{margin-top:28px; display:flex; justify-content:center}

/* footer */
footer{padding-block:52px 42px; color:var(--muted); font-size:13.5px}
footer .wrap{display:flex; flex-direction:column; gap:28px}
.foot-top{display:flex; flex-wrap:wrap; gap:20px 30px; align-items:center; justify-content:space-between}
.foot-top .brand{color:var(--gold-deep)}
.foot-top .brand .name{font-size:18px; color:var(--fg-dim)}
.foot-top .brand .mark{width:26px; height:26px}
.foot-nav{display:flex; flex-wrap:wrap; gap:14px 22px}
.foot-nav a{color:var(--fg-dim); text-decoration:none; font-size:14px}
.foot-nav a:hover{color:var(--gold-2)}
.foot-bot{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; padding-top:22px; border-top:1px solid var(--line)}
.dot{opacity:.5; padding:0 3px}

/* ---- live demo ---- */
/* CR-03 video panel: the persona's face/answer, with the written caption beneath */
.demo-video{margin:0 auto 10px; width:100%; max-width:460px}
.dv-frame{position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-gold); background:linear-gradient(180deg,#fffdf9,#efe7d6 72%)}
.dv-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000}
.dv-poster{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; text-align:center}
.dv-poster[hidden]{display:none}  /* the class sets display:flex, which would otherwise defeat [hidden] */
.dv-initial{width:92px; height:92px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:44px; color:var(--gold-2);
  background:radial-gradient(circle at 50% 35%, rgba(180,130,31,.16), rgba(255,255,255,.5));
  border:1px solid var(--line-gold)}
.dv-name{font-size:19px; color:var(--fg)}
.dv-hint{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.demo-caption{margin-top:12px; color:var(--fg-dim); font-size:15px; line-height:1.6; text-align:left;
  max-width:52ch; margin-left:auto; margin-right:auto}
.demo-stage{max-width:720px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center}
.orb{position:relative; width:190px; height:190px; display:flex; align-items:center; justify-content:center}
.orb .ring{position:absolute; inset:0; border-radius:50%; border:1px solid var(--line-gold); opacity:0; animation:ripple 3.4s ease-out infinite}
.orb .ring.r2{animation-delay:1.1s}
.orb .ring.r3{animation-delay:2.2s}
.orb .orb-core{position:relative; z-index:1; width:112px; height:112px; border-radius:50%; color:var(--gold-2);
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, rgba(180,130,31,.16), rgba(255,255,255,.55) 72%);
  box-shadow:0 0 40px rgba(241,220,166,.16), inset 0 0 30px rgba(241,220,166,.08)}
.orb .orb-core .mark{width:64px; height:64px}
@keyframes ripple{0%{transform:scale(.62); opacity:.5}100%{transform:scale(1.28); opacity:0}}
.demo-stage[data-state="idle"] .orb .ring{animation-duration:4.6s}
.demo-stage[data-state="connecting"] .orb .ring{animation-duration:1.1s}
.demo-stage[data-state="listening"] .orb .ring{animation-duration:2.6s; border-color:rgba(241,220,166,.5)}
.demo-stage[data-state="speaking"] .orb .ring{animation-duration:1.4s; border-color:var(--gold-2)}
.demo-stage[data-state="speaking"] .orb .orb-core{box-shadow:0 0 62px rgba(241,220,166,.34), inset 0 0 36px rgba(241,220,166,.14)}
.demo-stage[data-state="error"] .orb .orb-core{box-shadow:0 0 30px rgba(0,0,0,.4)}
.demo-status{margin-top:14px; color:var(--fg-dim); font-size:16px; font-family:var(--serif); font-style:italic}
.demo-controls{margin-top:22px}
.demo-controls .btn{min-width:210px; justify-content:center}
.demo-mic{margin-top:12px; color:var(--muted); font-size:12.5px}
.demo-soon{margin-top:20px; max-width:46ch}
.demo-soon p{color:var(--fg-dim); font-size:16px; margin-bottom:18px}
.transcript{margin-top:32px; width:100%; max-width:600px; display:flex; flex-direction:column; gap:10px;
  max-height:340px; overflow-y:auto; text-align:left}
.transcript:empty{display:none}
.transcript .line{padding:12px 15px; border-radius:12px; font-size:15px; line-height:1.55; max-width:88%}
.transcript .line.ai{align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:3px}
.transcript .line.user{align-self:flex-end; background:rgba(217,180,91,.1); border:1px solid var(--line-gold); color:var(--fg-dim); border-bottom-right-radius:3px}
.demo-foot{margin-top:36px; text-align:center; color:var(--muted); font-size:12.5px}
.persona-switch{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 auto 24px}
.persona-switch a{display:inline-flex; align-items:center; padding:7px 17px; border-radius:999px;
  border:1px solid var(--line-gold); color:var(--fg-dim); text-decoration:none; font-size:14.5px;
  transition:border-color .15s ease, color .15s ease, background .15s ease}
.persona-switch a:hover{border-color:var(--gold); color:var(--gold-2)}
.persona-switch a.active{background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#2a1f08;
  border-color:transparent; font-weight:600}
.demo-intro{max-width:52ch; margin:0 auto 34px; text-align:center; color:var(--fg-dim); font-size:16.5px}
.demo-intro b{color:var(--fg); font-weight:600}
.demo-tagline{display:block; margin-top:6px; font-style:italic; color:var(--gold-2); font-size:18px}
.prompts{margin-top:28px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:660px}
.prompts .p-label{width:100%; text-align:center; color:var(--muted); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:4px}
.chip{font-size:13px; color:var(--fg-dim); background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; cursor:pointer; font-family:inherit; line-height:1.2;
  transition:border-color .15s ease, color .15s ease}
.chip:hover{border-color:var(--gold); color:var(--gold-2)}

/* ---- life timeline ---- */
.life{background:var(--bg-2)}
.timeline{list-style:none; margin:0 auto; padding:0; max-width:720px; position:relative}
.timeline::before{content:""; position:absolute; left:15px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(var(--line-gold), var(--line))}
.tl-item{position:relative; padding:0 0 24px 46px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute; left:9px; top:7px; width:14px; height:14px; border-radius:50%;
  background:var(--gold); border:1px solid var(--gold-2); box-shadow:0 0 0 4px rgba(217,180,91,.12)}
.tl-dot[data-tag="loss"]{background:#6f84c8; border-color:#9fb0cf; box-shadow:0 0 0 4px rgba(111,132,200,.14)}
.tl-dot[data-tag="humor"]{background:var(--gold-2)}
.tl-dot[data-tag="success"]{background:var(--gold-2); box-shadow:0 0 0 5px rgba(241,220,166,.16)}
.tl-card{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:18px 20px}
.tl-card:hover{border-color:var(--line-gold)}
.tl-meta{display:flex; flex-wrap:wrap; gap:7px 12px; align-items:baseline}
.tl-year{color:var(--gold-2); font-weight:500; font-family:var(--serif); font-size:16px}
.tl-age{color:var(--muted); font-size:12.5px}
.tl-tag{color:var(--muted); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase}
.tl-card h3{font-size:20px; margin-top:8px}
.tl-card p{margin-top:8px; color:var(--fg-dim); font-size:15px}

@keyframes eq{0%,100%{height:22%}50%{height:82%}}
@media(prefers-reduced-motion:reduce){
  .niche .wave i{animation:none; height:42%}
  .orb .ring{animation:none; opacity:.22}
  .site-nav{transition:none}
  *{scroll-behavior:auto}
}

/* ================= Keepsake Studio ================= */
.studio-bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:rgba(255,253,249,.85);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.studio-bar .wrap{display:flex; align-items:center; justify-content:space-between; padding-block:13px; gap:14px}
.studio-bar .brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--gold-2)}
.studio-bar .brand .mark{width:30px; height:30px}
.studio-bar .brand .name{font-family:var(--serif); font-size:19px; letter-spacing:.04em; color:var(--fg)}
.studio-user{display:flex; align-items:center; gap:16px; color:var(--muted); font-size:14px}
.studio-main{max-width:880px; padding-block:30px 80px}
.studio-main h1{font-size:clamp(25px,4vw,36px)}
.sub{color:var(--fg-dim); margin-top:8px; font-size:16px}
.crumb{margin-bottom:12px}
.crumb a{color:var(--muted); text-decoration:none; font-size:14px}
.crumb a:hover{color:var(--gold-2)}
.studio-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px}

.flash{padding:12px 16px; border-radius:4px; margin-bottom:20px; font-size:14.5px}
.flash.ok{background:rgba(217,180,91,.1); border:1px solid var(--line-gold); color:var(--gold-2)}
.flash.err{background:rgba(192,60,60,.10); border:1px solid rgba(192,60,60,.4); color:#a33232}

.studio-login{max-width:400px; margin:7vh auto 0; text-align:center}
.studio-login h1{font-family:var(--serif)}
.studio-login .sub{margin-top:6px}
.studio-login form{margin-top:24px; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:26px}
.studio-login .btn{width:100%; justify-content:center; margin-top:6px}
.studio-note{margin-top:18px; color:var(--muted); font-size:13px}

.new-keepsake{display:flex; gap:12px; margin:10px 0 28px; flex-wrap:wrap}
.new-keepsake input{flex:1; min-width:230px; font:inherit; color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:3px; padding:12px 14px}
.new-keepsake input:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(217,180,91,.14)}

.keepsake-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.keepsake-row{display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line);
  border-radius:4px; padding:15px 18px}
.kr-name{font-family:var(--serif); font-size:19px; text-decoration:none; color:var(--fg); flex:1; min-width:0}
.kr-name:hover{color:var(--gold-2)}
.kr-actions{display:flex; gap:16px}
.kr-status{font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:4px 11px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.status-live{color:var(--gold-2); border-color:var(--line-gold)}
.navlink.gold{color:var(--gold-2)}
.empty{color:var(--muted); margin-top:18px}

.builder-card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:24px 26px; margin-top:20px}
.builder-card.accent{border-color:var(--line-gold); background:linear-gradient(180deg,rgba(217,180,91,.06),var(--panel))}
.builder-card > h2{font-size:21px; margin-bottom:16px}
.bc-row{display:flex; gap:18px; justify-content:space-between; align-items:center; flex-wrap:wrap}
.bc-row h2{font-size:21px; margin-bottom:6px}
.bc-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}

.check{display:flex; gap:10px; align-items:center; color:var(--fg-dim); font-size:14.5px; margin:2px 0 16px; cursor:pointer}
.check input{width:auto}
.row:has(.three){display:flex; gap:16px; flex-wrap:wrap}
.row:has(.three) .field{flex:1; min-width:150px; margin-bottom:17px}
.row:has(.three) .field.three{flex:0 0 92px}

.story-list{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:10px}
.story-item{border:1px solid var(--line); border-radius:4px; background:var(--bg-2)}
.story-item summary{cursor:pointer; padding:14px 16px; display:flex; gap:12px; align-items:center; list-style:none}
.story-item summary::-webkit-details-marker{display:none}
.si-year{font-family:var(--serif); color:var(--gold-2); min-width:46px}
.si-title{flex:1; min-width:0; color:var(--fg)}
.si-tag{font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 9px}
.story-item details[open] summary{border-bottom:1px solid var(--line); margin-bottom:14px}
.story-item form{padding:0 16px 16px}
.inline-actions{margin-top:2px}
.add-story > summary{display:inline-flex; width:auto; cursor:pointer; list-style:none}
.add-story > summary::-webkit-details-marker{display:none}
.add-story > form{margin-top:16px; background:var(--bg-2); border:1px solid var(--line); border-radius:4px; padding:18px}

.btn.danger{border-color:rgba(192,60,60,.45); color:#b23b3b}
.btn.danger:hover{border-color:#b23b3b; background:rgba(192,60,60,.08); color:#8f2a2a}
.danger-zone{border-color:rgba(201,86,86,.22); margin-top:30px}

.dictate-row{display:flex; align-items:center; gap:4px; margin-top:9px; flex-wrap:wrap}
.dictate{font:inherit; font-size:13px; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--bg-2); color:var(--fg-dim); border:1px solid var(--line); border-radius:999px; padding:7px 14px}
.dictate:hover{border-color:var(--gold-deep); color:var(--gold-2)}
.dictate.recording{border-color:#c0392b; color:#a33232; background:rgba(192,60,60,.1); animation:dictate-pulse 1.3s ease-in-out infinite}
.dictate[disabled]{opacity:.55; cursor:progress}
.dictate-status{margin-left:10px; font-size:12.5px; color:var(--muted)}

/* voice studio */
.voice-status.ok{color:var(--gold-2); font-size:15px}
.small{font-size:12.5px}
.vc{margin-top:16px}
.vc-script{background:var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:18px 20px; margin-bottom:20px}
.vc-script-label{color:var(--fg-dim); font-size:14px; margin-bottom:10px}
.vc-passage{margin:0; font-family:var(--serif); font-size:17px; line-height:1.72; color:var(--fg); border-left:2px solid var(--line-gold); padding-left:16px}
.vc-script .small{margin-top:12px}
.vc-recorder{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.btn-record{display:inline-flex; align-items:center; gap:11px; font-family:var(--sans); font-weight:700; font-size:17px; cursor:pointer;
  background:linear-gradient(180deg,#c0473c,#8f2a22); color:#fff; border:1px solid #d7695e; border-radius:999px; padding:16px 30px;
  box-shadow:0 4px 18px rgba(143,42,34,.35); transition:transform .15s ease, box-shadow .2s ease}
.btn-record:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(143,42,34,.45)}
.btn-record svg{width:20px; height:20px}
.vc-live{width:100%; max-width:540px; display:flex; flex-direction:column; gap:12px}
.vc-live-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.vc-timer{font-family:var(--serif); font-size:32px; color:var(--fg); font-variant-numeric:tabular-nums}
.vc-hint{color:var(--fg-dim); font-size:14px; text-align:right}
.vc-meter{height:16px; background:var(--bg-3); border:1px solid var(--line); border-radius:999px; overflow:hidden}
.vc-meter-fill{height:100%; width:0; border-radius:999px; transition:width .2s linear}
.vc-meter-fill.red{background:linear-gradient(90deg,#c0392b,#d98a4a)}
.vc-meter-fill.green{background:linear-gradient(90deg,#8a7746,#d9b45b 55%,#7ec37a)}
.vc-scale{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted)}
.vc-scale .vc-good{color:var(--gold-deep)}
.vc-stop{align-self:flex-start}
.vc-choice{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.btn-upload{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:15px;
  cursor:pointer; background:var(--bg-2); color:var(--gold-2); border:1px solid var(--line-gold); border-radius:999px; padding:15px 26px}
.btn-upload:hover{border-color:var(--gold); background:rgba(217,180,91,.06)}
.btn-upload svg{opacity:.9}
.vc-upload-note{max-width:62ch; margin-top:-2px}
/* LinkedIn import + form subheads */
.form-sub{font-size:17px; margin:28px 0 6px; color:var(--fg)}
.li-import{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:2px}
.li-photo{border-radius:50%; object-fit:cover; border:1px solid var(--line-gold); margin-bottom:12px; display:block}
.li-icon{color:#0A66C2}  /* LinkedIn brand blue */
/* persona tabs + enriched-profile sources */
.persona-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; flex-wrap:wrap}
.persona-tabs a{padding:11px 18px; text-decoration:none; color:var(--fg-dim); font-size:15px; border-bottom:2px solid transparent; margin-bottom:-1px}
.persona-tabs a:hover{color:var(--gold-2)}
.persona-tabs a.active{color:var(--gold-2); border-bottom-color:var(--gold)}
.src-head{display:flex; gap:14px; align-items:center; margin-bottom:14px}
.src-logo{width:28px; height:28px; flex:0 0 auto}
.src-head h2{font-size:21px}
.src-head > div{flex:1; min-width:0}
.src-photo{margin:0}
.src-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px}
.src-import{margin:0}
.src-tl-head{font-size:17px; margin:26px 0 14px}
.src-soon{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:10px; color:var(--fg-dim); font-size:15px}
.src-soon li{padding-left:16px; position:relative}
.src-soon li::before{content:"·"; position:absolute; left:3px; color:var(--gold)}
.worktl .tl-dot[data-tag="work"]{background:#6f84c8; border-color:#9fb0cf; box-shadow:0 0 0 4px rgba(111,132,200,.14)}
.li-how{margin-top:14px}
.li-how summary{cursor:pointer; color:var(--gold-2); font-size:14px; list-style:none}
.li-how summary::-webkit-details-marker{display:none}
.li-how p{margin-top:10px; max-width:66ch}
.vc-samples{margin-top:24px}
.vc-samples h3{font-size:16px}
.vc-list{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:12px}
.vc-sample{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 16px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.vc-sample audio{height:36px; max-width:230px}
.vc-meta{flex:1; min-width:170px}
.vc-dur{color:var(--muted); font-size:13px}
.vc-scorebar{height:8px; border-radius:999px; background:var(--bg-3); overflow:hidden; margin-top:7px; max-width:240px}
.vc-scorebar > div{height:100%; transition:width .4s ease}
.vc-score-label{font-size:13px; margin-top:6px; color:var(--fg-dim)}
.vc-use{white-space:nowrap}
@keyframes dictate-pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,86,86,.0)}50%{box-shadow:0 0 0 4px rgba(201,86,86,.14)}}
@media(prefers-reduced-motion:reduce){ .dictate.recording{animation:none} }

/* ---- CR-05: team admin (nav, team, invites, feedback, activity, feedback widget) ---- */
.studio-nav{display:flex; gap:18px; align-items:center; margin-left:auto; margin-right:22px}
.studio-nav a{color:var(--fg-dim); text-decoration:none; font-size:14px; font-weight:600}
.studio-nav a:hover{color:var(--gold-2)}
.kr-owner{color:var(--muted); font-size:13px}

.team-list{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:10px}
.team-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; padding:12px 16px}
.tr-name{font-weight:600}
.tr-email{color:var(--muted); font-size:14px}
.tr-role,.tr-state{font-size:12px; font-weight:700; letter-spacing:.02em; padding:2px 10px;
  border-radius:999px; border:1px solid var(--line-gold); color:var(--gold-2)}
.tr-role.role-owner{color:#3f8f3a; border-color:rgba(63,143,58,.4)}
.tr-state{color:var(--fg-dim); border-color:var(--line)}
.tr-state.ok{color:#3f8f3a; border-color:rgba(63,143,58,.4)}
.tr-state.err{color:#b23b3b; border-color:rgba(178,59,59,.4)}
.invite-link{flex:1 1 100%; min-width:0}
.invite-link-field{width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px 10px; color:var(--fg-dim)}
.invite-form .row,.invite-form .field{margin-bottom:12px}

.fb-list,.activity-list{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:12px}
.fb-item{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:6px; padding:14px 16px}
.fb-item.status-new{border-left-color:var(--gold)}
.fb-item.status-in_progress{border-left-color:#6fa8dc}
.fb-item.status-done{border-left-color:#8fd08a}
.fb-item.status-wont_do{border-left-color:var(--muted)}
.fb-item-top{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; font-size:13px}
.fb-from{font-weight:700}
.fb-page{color:var(--gold-2); font-size:12px; word-break:break-all}
.fb-when{color:var(--muted); margin-left:auto}
.fb-comment{margin:8px 0; white-space:pre-wrap}
.fb-item-foot{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.fb-status{display:flex; gap:8px; align-items:center}

.activity-row{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; font-size:14px;
  border-bottom:1px solid var(--line); padding:8px 0}
.ar-when{color:var(--muted); font-size:12px; min-width:124px}
.ar-who{font-weight:600; min-width:140px}
.ar-action{color:var(--gold-2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px}
.ar-detail{color:var(--fg-dim)}

/* Feedback widget (floating) */
.fb-widget{position:fixed; right:18px; bottom:18px; z-index:60}
.fb-fab{background:var(--gold); color:#1a130a; border:none; border-radius:999px; font-weight:700;
  padding:11px 18px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.35); font-size:14px}
.fb-fab:hover{background:var(--gold-2)}
.fb-panel{position:absolute; right:0; bottom:54px; width:min(340px,86vw); background:var(--panel);
  border:1px solid var(--line-gold); border-radius:10px; padding:16px; box-shadow:0 14px 40px rgba(0,0,0,.5)}
.fb-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.fb-x{background:none; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer}
.fb-url{color:var(--muted); font-size:12px; word-break:break-all; margin:0 0 8px}
.fb-label{display:block; font-size:13px; margin-bottom:6px; color:var(--fg-dim)}
.fb-panel textarea{width:100%; background:var(--bg); border:1px solid var(--line); border-radius:6px;
  color:var(--fg); padding:9px 11px; font:inherit; resize:vertical}
.fb-file{display:block; font-size:12px; color:var(--muted); margin:10px 0}
.fb-actions{display:flex; gap:12px; align-items:center; margin-top:10px}
.fb-note{font-size:13px; color:var(--fg-dim)}
@media(max-width:600px){ .studio-nav{gap:12px; margin-right:12px} }

/* ---- CR-06: product film (hero play button, film modal, booth loop) ---- */
.btn-play{display:inline-flex; align-items:center; gap:8px}
.btn-play svg{opacity:.9}

.film-modal{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px}
.film-backdrop{position:absolute; inset:0; background:rgba(4,6,10,.82); backdrop-filter:blur(3px)}
.film-dialog{position:relative; z-index:1; width:min(900px,96vw); background:var(--panel);
  border:1px solid var(--line-gold); border-radius:12px; padding:14px; box-shadow:0 24px 70px rgba(0,0,0,.6)}
.film-x{position:absolute; top:-14px; right:-14px; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line-gold); background:var(--panel); color:var(--fg); font-size:22px; cursor:pointer}
.film-video{width:100%; border-radius:8px; background:#000; display:block; aspect-ratio:16/9}
.film-dl{margin:12px 2px 2px; font-size:14px; color:var(--fg-dim)}
.film-dl a{color:var(--gold-2)}
.film-soon{text-align:center; padding:40px 24px}
.film-soon h3{margin:6px 0 10px}
.film-soon p{max-width:46ch; margin:0 auto 18px; color:var(--fg-dim)}

.booth-loop{margin:0; background:#000; height:100vh; overflow:hidden}
.bl-video{position:fixed; inset:0; width:100%; height:100%; object-fit:cover; background:#000}
.bl-download{position:fixed; bottom:16px; right:18px; z-index:2; color:var(--fg-dim); font-size:13px;
  text-decoration:none; opacity:.5; border:1px solid var(--line); border-radius:999px; padding:6px 12px}
.bl-download:hover{opacity:1}
.bl-exit{position:fixed; top:14px; right:18px; z-index:2; color:var(--fg-dim); font-size:26px;
  text-decoration:none; line-height:1; opacity:.4}
.bl-exit:hover{opacity:1}
.bl-placeholder{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:10px; color:var(--fg); padding:24px}
.bl-placeholder h1{margin:6px 0}
.bl-placeholder p{color:var(--fg-dim)}

/* ---- CR-07: booth/kiosk mode + event-tagged leads ---- */
.src-chip{display:inline-block; margin:0 0 14px; padding:7px 14px; border:1px solid var(--line-gold);
  border-radius:999px; color:var(--gold-2); font-size:14px; background:rgba(217,180,91,.06)}

.booth{margin:0; overflow:hidden}
.booth-stage{position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:22px 20px 64px}
.booth-top{position:relative; z-index:2; width:100%; max-width:1100px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap}
.booth-brand{display:inline-flex; align-items:center; gap:10px; font-family:'Spectral',serif;
  font-size:20px; color:var(--fg)}
.booth-brand svg{width:26px; height:26px}
.booth-main{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  gap:16px; margin-top:4vh; width:100%; max-width:720px}
.booth-video{width:min(460px,80vw)}
.booth-meet{color:var(--fg-dim); margin:4px 0 0}
.booth-talk{font-size:20px; padding:16px 42px; border-radius:999px}
.booth-status{color:var(--fg-dim); min-height:1.4em; margin:0}
.booth-prompts{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:640px}
.booth-foot{position:absolute; bottom:16px; left:0; right:0; z-index:2; color:var(--muted); font-size:12px}
.booth-qr{position:fixed; right:20px; bottom:20px; z-index:3; background:#fff; color:#111;
  border-radius:12px; padding:12px 12px 10px; width:168px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.booth-qr svg{width:140px; height:140px; display:block; margin:0 auto}
.booth-qr p{margin:6px 0 0; font-size:12px; color:#333; line-height:1.3}
.booth-qr .muted{color:#888}
.booth-qr-link{display:none}
@media(max-width:700px){ .booth-qr{position:static; margin:22px auto 0} }

.lead-filter{display:flex; align-items:center; gap:12px; margin:0 0 16px}
.lead-filter select{background:var(--bg); border:1px solid var(--line); border-radius:6px;
  color:var(--fg); padding:7px 10px; font:inherit}
.lead-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.lead-row{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; padding:10px 14px; font-size:14px}
.ld-name{font-weight:600}
.ld-email{color:var(--gold-2)}
.ld-aud{color:var(--muted); font-size:12px; text-transform:capitalize}
.ld-org{color:var(--fg-dim)}
.ld-tag{font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px;
  border:1px solid var(--line-gold); color:var(--gold-2)}
.ld-heard{color:var(--fg-dim); font-style:italic}
.ld-when{color:var(--muted); font-size:12px; margin-left:auto}

/* ---- CR-08: printable sell sheets (one US Letter page each) ---- */
.sheet-body{background:#e8dfce; margin:0}
.sheet{max-width:7.5in; margin:0 auto; background:var(--panel); color:var(--fg);
  padding:0.5in; min-height:10in; display:flex; flex-direction:column; gap:20px}
.sheet-head{display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--line-gold); padding-bottom:14px}
.sheet-mark svg{width:46px; height:46px; color:var(--gold)}
.sheet-head h1{margin:0; font-size:30px}
.sheet-tag{margin:2px 0 0; color:var(--fg-dim); font-size:13px}
.sheet-audience{margin-left:auto; color:var(--gold-2); font-weight:700; font-size:14px; text-align:right}
.sheet-lead h2{font-size:24px; margin:0 0 8px}
.sheet-lead p{margin:0; color:var(--fg-dim); max-width:62ch; line-height:1.55}
.sheet-levels h3{font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-2); margin:0 0 10px}
.sheet-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.sh-lvl{border:1px solid var(--line); border-radius:8px; padding:12px 14px}
.sh-lvl.feature{border-color:var(--line-gold)}
.sh-tier{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.sh-lvl b{font-size:18px}
.sh-price{display:block; color:var(--gold-2); font-weight:700; margin:2px 0 6px}
.sh-lvl p{margin:0; font-size:13px; color:var(--fg-dim)}
.sheet-foot{margin-top:auto; display:flex; gap:20px; align-items:center; border-top:1px solid var(--line-gold); padding-top:16px}
.sheet-qr{background:#fff; border-radius:10px; padding:10px; text-align:center; width:170px; flex:0 0 auto}
.sheet-qr svg{width:140px; height:140px; display:block; margin:0 auto}
.sheet-qr p{margin:6px 0 0; font-size:11px; color:#333}
.sheet-qr .muted{color:#888; word-break:break-all}
.sheet-consent{margin:0 0 8px; font-size:13px; color:var(--fg-dim)}
.sheet-contact{margin:0; font-size:13px; color:var(--fg-dim)}
.sheet-contact a{color:var(--gold-2)}
@media print {
  .sheet-body{background:#fff}
  .sheet{color:#15110a; background:#fff; margin:0; padding:0; min-height:auto; max-width:none}
  .sheet-lead p,.sh-lvl p,.sheet-tag,.sheet-consent,.sheet-contact{color:#3a342a}
  .sheet-head h1,.sheet-lead h2,.sh-lvl b{color:#15110a}
  .sh-lvl{border-color:#d8cfc0}
  .sheet-mark svg{color:#8a7746}
  a{color:#8a7746}
}

/* ---- CR-09: "Meet us at" upcoming-events block (funeral-homes page) ---- */
.event-list{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px}
.event-row{display:flex; gap:18px; align-items:baseline; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:8px; padding:14px 18px}
.ev-date{color:var(--gold-2); font-weight:700; min-width:168px}
.ev-title{font-family:'Spectral',serif; font-size:18px}
.ev-title a{color:var(--fg)}
.ev-loc{color:var(--fg-dim); margin-left:auto}
@media(max-width:600px){ .ev-loc{margin-left:0} }

/* ---- levels: capability lists + alt section band ---- */
.lvl-caps{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:7px}
.lvl-caps li{position:relative; padding-left:20px; color:var(--fg-dim); font-size:14.5px}
.lvl-caps li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px;
  border-radius:50%; background:var(--gold)}
.sec.alt{background:radial-gradient(80% 60% at 50% 120%, rgba(142,162,216,.10), transparent 60%),var(--bg-2)}

/* ---- public memorial page ---- */
.mem-hero{position:relative; overflow:hidden; text-align:center; padding:72px 0 44px}
.mem-hero-inner{position:relative; z-index:1}
.mem-portrait{width:148px; height:148px; border-radius:50%; object-fit:cover; display:block;
  margin:0 auto 18px; border:2px solid var(--line-gold); background:var(--panel)}
.mem-initial{display:flex; align-items:center; justify-content:center; font-size:62px; color:var(--gold)}
.mem-dates{color:var(--muted); margin-top:4px; font-size:15px}
.mem-hero h1{font-size:clamp(30px,5vw,46px)}
.mem-timeline .mem-play{margin:4px 0 10px}
.mem-play{display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-weight:600;
  font-size:13.5px; color:var(--gold-2); background:rgba(217,180,91,.1); border:1px solid var(--line-gold);
  border-radius:999px; padding:5px 13px}
.mem-share-grid{display:flex; gap:28px; align-items:center; flex-wrap:wrap; justify-content:center}
.mem-qr{width:160px; height:160px; background:#fff; padding:10px; border-radius:10px}
.mem-qr svg{width:100%; height:100%; display:block}
.mem-share-actions{flex:1; min-width:260px; max-width:420px}
.mem-url{width:100%; background:var(--panel); border:1px solid var(--line); border-radius:8px;
  color:var(--fg-dim); padding:11px 13px; font-size:14px; margin-bottom:12px}
.mem-share-buttons{display:flex; gap:10px; flex-wrap:wrap}
.dv-portrait{width:100%; height:100%; object-fit:cover; border-radius:inherit}

/* ---- studio: face, story audio, story dump, publish, review ---- */
.face-grid{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-top:12px}
.face-photo{width:140px; height:140px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}
.face-actions{display:flex; flex-direction:column; gap:10px}
.dump-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px}
.story-audio{margin:12px 0; padding:12px 0; border-top:1px dashed var(--line)}
.story-audio audio{width:100%; max-width:360px; display:block; margin-bottom:8px}
.sa-actions{display:flex; gap:10px; flex-wrap:wrap}
.sa-actions form{margin:0}
.btn.small{padding:7px 12px; font-size:13px}
.design-voice{margin-top:16px}
.design-voice[open] summary{margin-bottom:12px}
.review-moment .rm-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.review-moment .rm-num{display:inline-flex; width:26px; height:26px; border-radius:50%;
  align-items:center; justify-content:center; background:rgba(217,180,91,.14); color:var(--gold-2);
  font-weight:700; font-size:13px}
hr.soft{border:0; border-top:1px solid var(--line); margin:20px 0}

/* ---- studio app placeholder (native apps coming soon + notify-me) ---- */
.app-promo{max-width:400px; margin:26px auto 0; text-align:center; background:var(--panel-2);
  border:1px solid var(--line-cool); border-radius:12px; padding:20px 22px}
.app-promo .app-soon{display:inline-block; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:8px}
.app-promo h2{font-family:var(--serif); font-size:19px; font-weight:500}
.app-promo .ap-sub{color:var(--fg-dim); font-size:14px; margin-top:7px}
.app-badges{display:flex; gap:10px; justify-content:center; margin:15px 0; flex-wrap:wrap}
.app-badge{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--fg-dim);
  border:1px solid var(--line-cool); border-radius:9px; padding:8px 13px; background:rgba(142,162,216,.07)}
.app-badge svg{width:17px; height:17px; color:var(--accent-2); flex:0 0 auto}
.app-waitlist{display:flex; gap:8px; margin-top:4px}
.app-waitlist input{flex:1; min-width:0; font:inherit; color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:9px; padding:11px 13px}
.app-waitlist input:focus{outline:none; border-color:var(--accent-deep);
  box-shadow:0 0 0 3px rgba(142,162,216,.18)}
.app-waitlist .btn{white-space:nowrap}

/* ================= mobile polish (phones + small tablets) ================= */
/* tighter side gutters on small screens so content isn't cramped against the edge */
@media(max-width:560px){ .wrap{padding-inline:16px} }

/* calmer vertical rhythm — the generous desktop spacing is too tall on a phone */
@media(max-width:700px){
  .sec{padding-block:56px}
  .hero .wrap{padding-block:56px 60px}
  .page-hero .wrap{padding-block:48px 40px}
  .sec-head{margin-bottom:38px}
  footer{padding-block:40px 34px}
}

/* studio top bar: brand + account stay on the first line and the section links scroll on a
   second line — the owner's six-link nav used to run off the right edge of a phone */
@media(max-width:860px){
  .studio-bar .wrap{flex-wrap:wrap; row-gap:9px}
  .studio-nav{order:3; width:100%; margin:0; gap:20px; overflow-x:auto; padding-bottom:3px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .studio-nav::-webkit-scrollbar{display:none}
  .studio-nav a{white-space:nowrap; padding-block:4px}
  .studio-user{margin-left:auto; gap:12px; font-size:13px}
  .studio-user span{max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* let flexed headers/rows wrap instead of overflowing on the narrowest screens */
@media(max-width:560px){
  .studio-head{flex-wrap:wrap}
  .keepsake-row{flex-wrap:wrap}
  .kr-actions{width:100%; margin-top:2px}
  .new-keepsake input{min-width:0}
  .app-waitlist{flex-direction:column}
  .app-waitlist .btn{width:100%; justify-content:center}
}

/* studio: "tell the story" made the hero — sub-nav CTA + big dump recorder */
.story-subnav{display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; margin:0 0 22px;
  padding:14px 18px; border:1px solid var(--line-gold); border-radius:12px;
  background:linear-gradient(150deg, rgba(156,111,26,.09), rgba(95,128,198,.06))}
.story-subnav .btn{white-space:nowrap}
.dump-live{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 14px}
.dump-record{font-size:15px; padding:13px 22px}
.dump-recording{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 14px}
.dump-recording .vc-timer{font-size:26px}
.src-steps{margin:10px 0 0; padding-left:20px; color:var(--fg-dim); font-size:13px; line-height:1.75}
.src-steps li{margin-top:4px}

/* ---- family: editable list + rendered tree (leaves) + a friends aside ---- */
.family-list{list-style:none; padding:0; margin:16px 0 20px; display:flex; flex-direction:column; gap:8px}
.family-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; padding:9px 14px}
.family-row form{margin:0 0 0 auto; padding:0; background:none; border:0}
.family-add{background:none; border:0; padding:0; margin-top:6px}
.fam-rel{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2);
  border:1px solid var(--line-gold); border-radius:999px; padding:3px 10px; white-space:nowrap}
.fam-name{font-family:var(--serif); font-size:17px}
.fam-note{color:var(--muted); font-size:13px}

.family-render{display:flex; gap:26px; align-items:flex-start; justify-content:center;
  flex-wrap:wrap; margin:6px 0 22px}
.tree{display:flex; flex-direction:column; align-items:center; flex:1 1 320px; min-width:0}
.tree-tier{position:relative; display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 12px; padding:16px 0 0}
.tree-tier:first-child{padding-top:0}
.tree-tier:not(:first-child)::before{content:""; position:absolute; top:0; left:50%;
  width:1px; height:16px; background:var(--line-gold)}
.tree-other{margin-top:8px}
.leaf{position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 15px;
  border-radius:3px 16px 16px 16px;
  background:linear-gradient(135deg, rgba(125,146,86,.22), rgba(156,111,26,.13));
  border:1px solid rgba(125,146,86,.45)}
.leaf-ic{width:15px; height:15px; color:#7d9256; flex:0 0 auto}
.leaf-rel{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2)}
.leaf-nm{font-family:var(--serif); font-size:16px; color:var(--fg)}
.leaf-note{color:var(--muted); font-size:12px}
.leaf-self{background:linear-gradient(135deg, rgba(156,111,26,.26), rgba(125,146,86,.15));
  border-color:var(--line-gold)}
.leaf-self .leaf-nm{color:var(--gold-2); font-weight:500}

.tree-friends{flex:0 0 auto; align-self:center; background:var(--panel); border:1px solid var(--line-cool);
  border-radius:12px; padding:14px 16px; min-width:170px; max-width:260px}
.tf-label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:10px}
.tree-friends ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.friend-chip{display:flex; flex-direction:column;
  background:linear-gradient(135deg, rgba(95,128,198,.12), rgba(95,128,198,.05));
  border:1px solid var(--line-cool); border-radius:8px; padding:7px 12px}
.fc-name{font-family:var(--serif); font-size:15px}
.fc-note{color:var(--muted); font-size:12px}

/* ---- Photo album (studio editor) ---- */
.album-add{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 16px}
.album-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px}
.album-card{position:relative; background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; overflow:hidden; display:flex; flex-direction:column}
.album-thumb{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--bg-3); display:block}
.album-meta{display:flex; flex-direction:column; gap:8px; padding:10px}
.album-meta input, .album-meta select{width:100%; font-size:13.5px}
.album-when{display:flex; gap:8px}
.album-when input{min-width:0}
.album-pin{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted)}
.album-actions{display:flex; justify-content:flex-end}
.btn.small{font-size:12.5px; padding:7px 14px}
.album-del{position:absolute; top:6px; right:6px}
.btn-x{width:30px; height:30px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(43,42,38,.62); color:#fff; font-size:13px; line-height:1}
.btn-x:hover{background:rgba(43,42,38,.85)}

/* ---- Photos on the public memorial ---- */
.tl-photos{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.tl-photo{margin:0; width:140px}
.tl-photo img{width:140px; height:105px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line-gold); background:var(--bg-3)}
.tl-photo figcaption{font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.35}
.mem-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px}
.mem-photo{margin:0; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; overflow:hidden}
.mem-photo img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--bg-3)}
.mem-photo figcaption{padding:9px 12px; font-size:13px; color:var(--fg-dim); line-height:1.4}
.mem-photo-year{color:var(--gold-deep); font-weight:600}
@media (max-width:560px){
  .album-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .mem-gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
}

/* HeyGen LiveAvatar: paste-the-avatar-id field in the Face & video card */
.heygen-id-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.heygen-id-input{flex:1 1 220px; min-width:180px; padding:9px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--panel-2); color:var(--fg); font-size:.95rem}
.heygen-id-input:focus{outline:none; border-color:var(--gold)}