/* shea.one/get/funnel.css — the web lifetime funnel (Phase 1 shell).
   Full-screen, app-like, mobile-first. Scoped to .fn / #fn-root so it can't
   touch the rest of the site. Covers the site nav/footer while active. */

:root{
  --fn-cream:#FBF7F2; --fn-card:#FFFFFF; --fn-soft:#F4ECE3;
  --fn-ink:#2A1F17; --fn-ink2:#6E5D4E; --fn-ink3:#9C8B7B;
  --fn-terra:#C2573B; --fn-terra-deep:#A8442C; --fn-terra-soft:#F6E4DA;
  --fn-sage:#3F7052; --fn-sage-soft:#E7EFE8;
  --fn-line:#EDE3D7; --fn-line2:#E2D5C6;
  --fn-plum:#6E4A6B;
  --fn-shadow:0 1px 2px rgba(80,50,20,.05), 0 10px 30px rgba(80,50,20,.08);
  --fn-radius:18px;
}

/* Full-screen overlay: hides the site chrome behind an app-like surface */
#fn-root.fn{
  position:fixed; inset:0; z-index:2147483000;
  background:var(--fn-cream); color:var(--fn-ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#fn-root *{box-sizing:border-box}
/* hidden must beat the flex/display rules below (UA [hidden] loses to a class) */
#fn-root [hidden]{display:none !important}

/* Top bar: back + progress (content steps only) */
.fn-top{display:flex; align-items:center; gap:12px; padding:14px 18px 6px; flex:none}
.fn-back{width:40px; height:40px; border:none; background:transparent; color:var(--fn-ink2);
  font-size:24px; cursor:pointer; border-radius:12px; flex:none}
.fn-back:active{background:var(--fn-soft)}
.fn-progress{flex:1; height:6px; background:var(--fn-line); border-radius:99px; overflow:hidden}
.fn-progress span{display:block; height:100%; width:0; background:var(--fn-terra);
  border-radius:99px; transition:width .35s cubic-bezier(.4,0,.2,1)}

/* Stage: the step surface, scrolls if tall */
.fn-stage{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column}
.fn-step{flex:1; display:flex; flex-direction:column; padding:8px 22px 0; max-width:520px;
  width:100%; margin:0 auto; animation:fn-in .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes fn-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .fn-step{animation:none} .fn-progress span{transition:none} }

/* Typography */
.fn-eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fn-terra); margin:14px 0 10px}
.fn-h{font-size:clamp(25px,6.4vw,33px); line-height:1.14; font-weight:800; letter-spacing:-.02em;
  text-wrap:balance; margin:0}
.fn-sub{font-size:16px; color:var(--fn-ink2); line-height:1.5; margin:12px 0 0; max-width:34ch}
.fn-body{margin-top:22px; display:flex; flex-direction:column; gap:10px}

/* Options (single / multi) */
.fn-opt{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:var(--fn-card); border:1.5px solid var(--fn-line); border-radius:15px;
  padding:16px 16px; font:inherit; color:var(--fn-ink); cursor:pointer; box-shadow:var(--fn-shadow);
  transition:border-color .15s, transform .06s}
.fn-opt:active{transform:scale(.99)}
.fn-opt .ot{font-size:16.5px; font-weight:700}
.fn-opt .od{font-size:13.5px; color:var(--fn-ink2); margin-top:2px}
.fn-opt .oemoji{font-size:22px; width:34px; text-align:center; flex:none}
.fn-opt.sel{border-color:var(--fn-terra); background:var(--fn-terra-soft)}
.fn-opt .otick{margin-left:auto; width:24px; height:24px; border-radius:99px; border:2px solid var(--fn-line2);
  flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px}
.fn-opt.sel .otick{background:var(--fn-terra); border-color:var(--fn-terra)}

/* Chips grid (goals, habits, source) */
.fn-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.fn-chip{background:var(--fn-card); border:1.5px solid var(--fn-line); border-radius:14px;
  padding:15px 14px; text-align:center; font-size:15px; font-weight:700; color:var(--fn-ink);
  cursor:pointer; box-shadow:var(--fn-shadow); transition:border-color .15s, transform .06s}
.fn-chip:active{transform:scale(.98)}
.fn-chip.sel{border-color:var(--fn-terra); background:var(--fn-terra-soft); color:var(--fn-terra-deep)}
.fn-chip .ce{display:block; font-size:22px; margin-bottom:5px}

/* Text input */
.fn-input{width:100%; font:inherit; font-size:20px; font-weight:600; color:var(--fn-ink);
  background:var(--fn-card); border:1.5px solid var(--fn-line); border-radius:15px;
  padding:16px 18px; box-shadow:var(--fn-shadow); outline:none; margin-top:22px}
.fn-input:focus{border-color:var(--fn-terra)}
.fn-appnote{margin-top:18px; padding:13px 15px;
  display:flex; align-items:center; gap:13px;
  background:linear-gradient(135deg,#FFFBF7,var(--fn-terra-soft));
  border:1px solid #F1DED2; border-radius:16px;
  box-shadow:0 8px 22px rgba(194,87,59,.08)}
.fn-appnote-ic{flex:0 0 42px; width:42px; height:42px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  color:var(--fn-terra); background:#fff;
  box-shadow:0 3px 8px rgba(194,87,59,.16)}
.fn-appnote-ic svg{width:23px; height:23px; display:block}
.fn-appnote-lead{margin:0; font-size:14px; line-height:1.45; color:var(--fn-ink2)}
.fn-appnote-lead b{color:var(--fn-terra); font-weight:700}

/* The Circle — social-proof step (app-style community cards) */
.fn-circle-head{margin-bottom:18px}
.fn-circle-eyebrow{font-size:12.5px; font-weight:800; letter-spacing:.12em; color:var(--fn-terra); text-transform:uppercase; margin-bottom:9px}
.fn-circlestep .fn-h em{color:var(--fn-terra); font-style:normal}
.fn-circle-feed{display:flex; flex-direction:column; gap:14px}
.fn-cpost{background:var(--fn-card); border:1px solid var(--fn-line); border-radius:18px; box-shadow:var(--fn-shadow); padding:16px}
.fn-cpost-row{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.fn-cav{width:40px; height:40px; border-radius:50%; flex:0 0 40px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:17px; overflow:hidden}
.fn-cav-img{object-fit:cover}
.fn-cpost-name{font-weight:700; font-size:16px; color:var(--fn-ink)}
.fn-cpost-body{margin:0 0 12px; font-size:15px; line-height:1.5; color:#4a3f37;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}
.fn-cpost-photo{display:block; width:100%; max-height:360px; object-fit:cover; border-radius:13px;
  margin:0 0 12px; background:var(--fn-soft)}
.fn-cpost-detail .fn-cpost-photo{max-height:none}
.fn-cpost-eng{display:flex; gap:18px; align-items:center; border-top:1px solid var(--fn-line); padding-top:11px}
.fn-ceng{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:#6f5e52}
.fn-cengic{width:16px; height:16px; flex:0 0 16px}
.fn-cbadge{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800;
  padding:4px 10px 4px 8px; border-radius:99px; margin-bottom:11px}
.fn-cbadge-ic{width:12px; height:12px}
.fn-cbadge-gold{background:linear-gradient(135deg,#EFC07A,#D99A2B); color:#5b3d10; cursor:pointer}
.fn-cbadge-team{background:rgba(194,87,59,.12); color:var(--fn-terra)}
.fn-circle-foot{display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 14px;
  background:rgba(194,87,59,.06); border-radius:14px; color:#6f5e52; font-size:14px}
.fn-circle-footic{width:26px !important; height:26px !important; flex:0 0 26px; margin:0 !important}

/* Circle — "Opening the Circle" moment + staggered feed reveal (mirrors the app) */
.fn-circleopening{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:60vh; padding:8px 6px 24px; transition:opacity .3s ease}
.fn-circleopening.fn-out{opacity:0}
.fn-circleopening .fn-mascotglow{margin-top:0}
.fn-circleopening .fn-circle-eyebrow{margin:26px 0 8px}
.fn-copen-title{margin:0; font-size:clamp(24px,6.6vw,32px)}
.fn-copen-line{margin-top:14px; min-height:23px; max-width:30ch; font-size:15.5px; font-weight:500;
  color:var(--fn-ink2); opacity:0; transition:opacity .35s ease}
.fn-copen-line.on{opacity:1}
.fn-copen-bar{margin-top:26px; width:188px; height:6px; background:var(--fn-terra-soft); border-radius:99px; overflow:hidden}
.fn-copen-bar span{display:block; height:100%; width:0; background:var(--fn-terra); border-radius:99px; transition:width 2600ms linear}
/* staggered entrance — each item rises + fades in on reveal */
.fn-cstag{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1)}
.fn-revealed .fn-cstag{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .fn-circleopening{transition:none} .fn-copen-line{transition:none}
  .fn-copen-bar span{transition:none} .fn-cstag{opacity:1; transform:none; transition:none}
}

/* tappable cards */
.fn-cpost{cursor:pointer; transition:transform .12s ease, box-shadow .12s ease}
.fn-cpost:hover{box-shadow:0 6px 20px rgba(60,40,25,.09)}
.fn-cpost:active{transform:scale(.992)}
.fn-cpost-open{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--fn-terra); white-space:nowrap}
/* post-detail sheet: full post + first replies + nudge */
.fn-postpanel{max-height:90vh; display:flex; flex-direction:column; padding-bottom:0; overflow:hidden}
.fn-postscroll{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px 22px 10px}
.fn-cpost-detail{background:transparent; border:none; box-shadow:none; padding:0 0 4px; cursor:default}
.fn-cpost-detail:hover{box-shadow:none}
.fn-cpost-detail:active{transform:none}
.fn-cpost-body-full{-webkit-line-clamp:unset; display:block; overflow:visible; white-space:pre-wrap}
.fn-cmt-head{font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a7a6d;
  margin:4px 0 14px; border-top:1px solid var(--fn-line); padding-top:14px}
.fn-cmt-head span{color:var(--fn-terra)}
.fn-cmt-list{display:flex; flex-direction:column; gap:16px}
.fn-cmt{display:flex; gap:10px; align-items:flex-start}
.fn-cmt .fn-cav{width:34px; height:34px; flex:0 0 34px; font-size:14px}
.fn-cmt-b{flex:1; min-width:0}
.fn-cmt-h{font-weight:700; font-size:14px; color:var(--fn-ink); display:flex; align-items:center; gap:6px; margin-bottom:2px}
.fn-cmt-x{font-size:14px; line-height:1.45; color:#4a3f37; overflow-wrap:break-word}
.fn-cmt-badge{font-size:10px; font-weight:800; padding:2px 7px; border-radius:99px; white-space:nowrap; background:linear-gradient(135deg,#EFC07A,#D99A2B); color:#5b3d10; cursor:pointer}
.fn-mention{color:var(--fn-terra); font-weight:600}
.fn-cmt-badge.team{background:rgba(194,87,59,.12); color:var(--fn-terra); cursor:default}

/* Founding Member explainer nudge (tap a gold badge) */
.fn-foundpop{position:fixed; inset:0; z-index:2147483600; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .18s ease}
.fn-foundpop.on{opacity:1}
.fn-foundpop-scrim{position:absolute; inset:0; background:rgba(40,28,20,.5)}
.fn-foundpop-card{position:relative; width:100%; max-width:340px; background:var(--fn-card,#fff); border-radius:22px; padding:24px 22px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.28); transform:translateY(10px) scale(.97); transition:transform .2s ease}
.fn-foundpop.on .fn-foundpop-card{transform:none}
.fn-foundpop-badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; padding:6px 13px; border-radius:99px; background:linear-gradient(135deg,#EFC07A,#D99A2B); color:#5b3d10; margin-bottom:15px}
.fn-foundpop-badge svg{width:13px; height:13px}
.fn-foundpop-text{margin:0 0 12px; font-size:15px; line-height:1.5; color:var(--fn-ink,#2a1f17)}
.fn-foundpop-text b{font-weight:800}
.fn-foundpop-nudge{margin:0 0 18px; font-size:13.5px; font-weight:700; color:var(--fn-terra)}
.fn-foundpop-btn{width:100%; border:none; background:var(--fn-ink,#2a1f17); color:#fff; font:inherit; font-weight:700; font-size:16px; padding:14px; border-radius:14px; cursor:pointer}
.fn-cmt-load{display:flex; justify-content:center; padding:16px 0}
.fn-cmt-empty{color:#8a7a6d; font-size:14px; padding:6px 0}
.fn-postcta{position:relative; flex:0 0 auto; padding:14px 22px calc(18px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--fn-line)}
.fn-postcta::before{content:""; position:absolute; left:0; right:0; top:-36px; height:36px;
  background:linear-gradient(to top, #fff, rgba(255,255,255,0)); pointer-events:none}
.fn-postcta-note{text-align:center; font-size:13.5px; color:#6f5e52; margin-bottom:10px}

/* Length bar (current + goal) */
.fn-ladder{display:flex; flex-direction:column-reverse; gap:7px; margin-top:20px}
.fn-rung{display:flex; align-items:center; gap:12px; background:var(--fn-card);
  border:1.5px solid var(--fn-line); border-radius:13px; padding:12px 15px; cursor:pointer;
  box-shadow:var(--fn-shadow); transition:border-color .15s}
.fn-rung .rl{font-size:16px; font-weight:700}
.fn-rung .ri{margin-left:auto; font-size:13px; color:var(--fn-ink3); font-variant-numeric:tabular-nums}
.fn-rung.sel{border-color:var(--fn-terra); background:var(--fn-terra-soft)}
.fn-rung.dim{opacity:.5}

/* Loader */
.fn-loader{align-items:center; justify-content:center; text-align:center; gap:0}
.fn-loader .fn-h{margin-top:22px}
.fn-checklist{margin-top:26px; display:flex; flex-direction:column; gap:12px; text-align:left; align-self:center}
.fn-checklist li{display:flex; align-items:center; gap:11px; font-size:15px; color:var(--fn-ink2); list-style:none}
.fn-checklist .ck{width:24px; height:24px; border-radius:99px; background:var(--fn-sage-soft); color:var(--fn-sage);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; opacity:.35; transition:opacity .3s}
.fn-checklist li.on .ck{opacity:1}
.fn-spinner{width:56px; height:56px; border-radius:99px; border:4px solid var(--fn-terra-soft);
  border-top-color:var(--fn-terra); animation:fn-spin 1s linear infinite; margin:0 auto}
@keyframes fn-spin{to{transform:rotate(360deg)}}

/* Loader (redesigned: flower-crown mascot + checklist card) */
.fn-loader2{align-items:center; text-align:center; padding-top:14px}
.fn-mascotglow{width:210px; height:210px; margin:6px auto 0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 46%, rgba(194,87,59,.15), rgba(194,87,59,0) 62%)}
.fn-mascot2{width:154px; height:154px; object-fit:contain; display:block}
.fn-loader2h{margin-top:2px; font-size:clamp(26px,7.4vw,35px)}
.fn-loader2sub{margin-top:11px; color:var(--fn-ink2); font-size:15.5px; line-height:1.5; max-width:32ch}
.fn-checkcard{margin-top:28px; width:100%; list-style:none; background:var(--fn-card); border:1px solid var(--fn-line);
  border-radius:var(--fn-radius); box-shadow:var(--fn-shadow); padding:2px 18px; text-align:left}
.fn-checkcard li{display:flex; align-items:center; gap:14px; padding:16px 0; list-style:none}
.fn-checkcard li + li{border-top:1px solid var(--fn-line)}
.fn-checkcard .rk{width:26px; height:26px; border-radius:99px; flex:none; position:relative;
  border:2px solid var(--fn-line2); background:transparent; transition:border-color .3s, background .3s}
.fn-checkcard .lt{font-size:16px; font-weight:700; color:var(--fn-ink); transition:color .3s}
.fn-checkcard li.pending .lt{color:var(--fn-ink3); font-weight:600}
.fn-checkcard li.done .rk{background:var(--fn-terra); border-color:var(--fn-terra)}
.fn-checkcard li.done .rk::after{content:"\2713"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:14px; font-weight:800}
.fn-checkcard li.active .rk{border-color:var(--fn-terra)}
.fn-checkcard li.active .rk::after{content:""; position:absolute; top:50%; left:50%; width:11px; height:11px;
  border-radius:99px; background:var(--fn-terra); transform:translate(-50%,-50%); animation:fn-pulse 1s ease-in-out infinite}
@keyframes fn-pulse{0%,100%{transform:translate(-50%,-50%) scale(.8); opacity:.85} 50%{transform:translate(-50%,-50%) scale(1); opacity:1}}
@media (prefers-reduced-motion: reduce){.fn-checkcard li.active .rk::after{animation:none}}

/* Mascot */
.fn-mascot{width:120px; height:120px; object-fit:contain; margin:6px auto 0; display:block}
.fn-mascot.sm{width:84px; height:84px}

/* Splash */
.fn-splash{text-align:center; align-items:center; padding-top:26px}
.fn-rating{display:inline-flex; align-items:center; gap:7px; background:var(--fn-card); border:1px solid var(--fn-line);
  border-radius:99px; padding:7px 15px; font-size:13.5px; font-weight:700; color:var(--fn-ink); box-shadow:var(--fn-shadow); margin-top:4px}
.fn-rating .stars{color:#E9A23B; letter-spacing:1px}
.fn-splash .fn-h{margin-top:24px; font-size:clamp(30px,8vw,42px)}
.fn-feats{display:flex; flex-direction:column; gap:12px; margin-top:26px; width:100%; max-width:360px; text-align:left}
.fn-feat{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--fn-ink2)}
.fn-feat .fi{width:38px; height:38px; border-radius:11px; background:var(--fn-terra-soft); color:var(--fn-terra-deep);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex:none}
.fn-feat b{color:var(--fn-ink); font-weight:700}

/* Account */
.fn-authbtn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:15px; border-radius:14px; font:inherit; font-size:16px; font-weight:700; cursor:pointer;
  border:1.5px solid var(--fn-line); background:var(--fn-card); color:var(--fn-ink); box-shadow:var(--fn-shadow)}
.fn-authbtn.apple{background:#000; color:#fff; border-color:#000}
.fn-authbtn .glogo,.fn-authbtn .alogo{flex:none}
.fn-authcol{display:flex; flex-direction:column; gap:11px; margin-top:10px}
.fn-gbtn{display:flex; justify-content:center; align-items:center; width:100%; min-height:44px} /* holder for Google's official in-page (GIS) button */
.fn-acctstep{gap:0}
.fn-acct-hero{background:linear-gradient(148deg,#39223f 0%,var(--fn-plum) 52%,#9a6a95 100%);
  border-radius:22px; padding:26px 22px 24px; color:#fff; box-shadow:var(--fn-shadow)}
.fn-acct-hero .ah-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#F4CD86}
.fn-acct-hero .ah-eyebrow .fn-clay{width:16px; height:16px}
.fn-acct-hero .ah-title{margin-top:13px; font-size:clamp(28px,8.4vw,37px); font-weight:800; line-height:1.1;
  letter-spacing:-.02em; color:#fff}
.fn-acct-hero .ah-sub{margin-top:11px; font-size:15px; color:rgba(255,255,255,.82); line-height:1.5}
.fn-recap{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
.fn-recap .cell{background:var(--fn-card); border:1px solid var(--fn-line); border-radius:14px; padding:13px 14px; box-shadow:var(--fn-shadow)}
.fn-recap .cl{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--fn-ink3)}
.fn-recap .cv{font-size:19px; font-weight:800; color:var(--fn-ink); margin-top:5px; letter-spacing:-.01em}
.fn-recap .cd{font-size:12px; color:var(--fn-ink2); margin-top:2px; line-height:1.35}
.fn-focuslbl{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--fn-ink3); margin:22px 0 11px}
.fn-gpills{display:flex; flex-wrap:wrap; gap:8px}
.fn-gpill{display:inline-flex; align-items:center; gap:6px; background:var(--fn-terra-soft); border:1px solid #EBC7B8;
  color:var(--fn-terra-deep); border-radius:99px; padding:7px 13px 7px 10px; font-size:13px; font-weight:700}
.fn-gpill .gk{display:flex; color:var(--fn-terra)}
.fn-gpill .fn-svgi{width:13px; height:13px}
.fn-benes{display:flex; flex-direction:column; gap:14px; margin:24px 0 8px}
.fn-bene{display:flex; align-items:center; gap:13px}
.fn-bene .bt{width:44px; height:44px; border-radius:12px; background:var(--fn-terra-soft); flex:none;
  display:flex; align-items:center; justify-content:center; padding:7px}
.fn-bene .bt .fn-clay{width:100%; height:100%}
.fn-bene .bl{font-size:15px; font-weight:600; color:var(--fn-ink); line-height:1.4}

/* Projection card (goal commit + AHA) */
.fn-proj{background:linear-gradient(150deg,#3a2340,#6E4A6B); color:#fff; border-radius:var(--fn-radius);
  padding:20px 20px 18px; margin-top:20px; box-shadow:var(--fn-shadow)}
.fn-proj .pl{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.75}
.fn-proj .pv{font-size:22px; font-weight:800; line-height:1.25; margin-top:8px; letter-spacing:-.01em}
.fn-proj .pv em{color:#F4C9A8; font-style:normal}
.fn-proj .pm{font-size:14px; opacity:.85; margin-top:9px; line-height:1.5}
.fn-curve{width:100%; height:120px; margin-top:14px; display:block}

/* AHA reflection chips */
.fn-reflect{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.fn-rchip{font-size:13px; font-weight:700; padding:7px 13px; border-radius:99px;
  background:var(--fn-soft); color:var(--fn-ink2); border:1px solid var(--fn-line)}
.fn-focus{margin-top:20px; display:flex; flex-direction:column; gap:12px}
.fn-focus .ft{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fn-ink3)}
.fn-focusrow{display:flex; gap:12px; align-items:flex-start}
.fn-focusrow .fdot{width:9px; height:9px; border-radius:99px; background:var(--fn-terra); margin-top:7px; flex:none}
.fn-focusrow b{font-weight:700}
.fn-focusrow span{color:var(--fn-ink2); font-size:14px}
.fn-insight{margin-top:18px; background:var(--fn-sage-soft); border-radius:13px; padding:14px 15px;
  font-size:14px; color:var(--fn-ink); line-height:1.5}

/* Paywall */
.fn-pw{padding-top:20px}
.fn-pw .fn-h{font-size:clamp(26px,6.6vw,34px)}
.fn-urgency{display:inline-flex; align-items:center; gap:8px; background:var(--fn-terra-soft);
  color:var(--fn-terra-deep); border-radius:99px; padding:7px 14px; font-size:13px; font-weight:800; margin-bottom:4px}
.fn-urgency .pulse{width:8px; height:8px; border-radius:99px; background:var(--fn-terra); animation:fn-pulse 1.6s ease-in-out infinite}
@keyframes fn-pulse{0%,100%{opacity:1} 50%{opacity:.35}}
.fn-scar{height:8px; background:var(--fn-line); border-radius:99px; overflow:hidden; margin-top:16px}
.fn-scar span{display:block; height:100%; background:linear-gradient(90deg,var(--fn-terra),var(--fn-terra-deep)); border-radius:99px}
.fn-plan{background:var(--fn-card); border:2px solid var(--fn-terra); border-radius:var(--fn-radius);
  padding:20px; margin-top:18px; box-shadow:var(--fn-shadow); position:relative}
.fn-plan .tag{position:absolute; top:-11px; left:20px; background:var(--fn-terra); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:99px}
.fn-plan .price{font-size:34px; font-weight:800; letter-spacing:-.02em}
.fn-plan .price small{font-size:15px; font-weight:600; color:var(--fn-ink2)}
.fn-plan .once{font-size:14px; color:var(--fn-sage); font-weight:700; margin-top:2px}
.fn-perks{margin-top:16px; display:flex; flex-direction:column; gap:10px}
.fn-perk{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--fn-ink)}
.fn-perk .pk{color:var(--fn-terra); font-weight:800; flex:none}
.fn-guarantee{text-align:center; font-size:13px; color:var(--fn-ink3); margin-top:14px}

/* Testimonials */
.fn-testis{margin-top:18px; display:flex; flex-direction:column; gap:10px}
.fn-testi{background:var(--fn-card); border:1px solid var(--fn-line); border-radius:14px; padding:14px 15px; box-shadow:var(--fn-shadow)}
.fn-testi p{margin:0; font-size:14px; color:var(--fn-ink); line-height:1.5}
.fn-testi .who{margin-top:7px; font-size:12.5px; color:var(--fn-ink3); font-weight:700}

/* Done */
.fn-done{text-align:center; align-items:center; padding-top:30px}
.fn-storebtns{display:flex; flex-direction:column; gap:11px; width:100%; max-width:340px; margin-top:24px}

/* Sticky footer CTA */
.fn-foot{flex:none; padding:14px 22px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(to top,var(--fn-cream) 62%,transparent);
  max-width:520px; width:100%; margin:0 auto; padding-top: 0px !important;}
.fn-cta{width:100%; padding:17px; border:none; border-radius:15px; background:var(--fn-terra); color:#fff;
  font:inherit; font-size:17px; font-weight:800; cursor:pointer; box-shadow:0 8px 22px rgba(194,87,59,.34);
  transition:transform .06s, opacity .15s;line-height: 1em;}
.fn-cta:active{transform:scale(.99)}
.fn-cta:disabled{opacity:.4; box-shadow:none; cursor:default}
.fn-cta span{ font-size:12.5px; font-weight:600; opacity:.88; line-height:1 }
.fn-skip{display:block; width:100%; text-align:center; margin-top:12px; background:none; border:none;
  color:var(--fn-ink3); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer}
.fn-legal{font-size:11.5px; color:var(--fn-ink3); text-align:center; margin-top:12px; line-height:1.5}
.fn-legal a{color:var(--fn-ink2)}

/* ---- Additions: real onboarding assets (photos/icons) ---- */

/* Photo thumbnails inside single-select options (curl, porosity) */
.fn-opt .oimg{width:54px; height:54px; border-radius:12px; object-fit:cover; flex:none; background:var(--fn-soft)}
.fn-opt.photo{padding:12px 14px}

/* Group headers (curl: Type 4 / Type 3) */
.fn-grouplabel{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fn-ink3); margin:18px 0 9px}
.fn-grouplabel.first{margin-top:6px}

/* Image tiles inside chips (habits) */
.fn-chip.img{padding:14px 10px 12px}
.fn-chip .ci{width:46px; height:46px; object-fit:contain; margin:0 auto 8px; display:block}

/* Splash hero photo (rotating) */
.fn-hero{position:relative; width:100%; height:min(45vh,360px); border-radius:22px; overflow:hidden;
  margin-top:2px; flex:none; box-shadow:var(--fn-shadow)}
.fn-hero img{width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0;
  opacity:0; transition:opacity 1s ease}
.fn-hero img.on{opacity:1}
.fn-hero .scrim{position:absolute; inset:0;
  background:linear-gradient(to top,rgba(28,17,9,.74),rgba(28,17,9,.06) 56%,transparent)}
.fn-hero .hcopy{position:absolute; left:20px; right:20px; bottom:19px; color:#fff; text-align:left}
.fn-hero .brand{font-size:19px; font-weight:800; letter-spacing:-.01em; margin-bottom:7px}
.fn-hero .hh{font-size:clamp(23px,6.4vw,31px); font-weight:800; line-height:1.14;
  letter-spacing:-.02em; text-wrap:balance; margin:0}
.fn-hero .hh em{color:#F4C9A8; font-style:normal}
.fn-splash{align-items:center}

/* One testimonial on splash */
.fn-onetesti{margin-top:20px; font-size:14.5px; color:var(--fn-ink2); line-height:1.55; max-width:36ch}
.fn-onetesti .q{font-style:italic}
.fn-onetesti .who{display:block; font-style:normal; font-weight:700; color:var(--fn-ink3);
  font-size:12.5px; margin-top:8px}

/* Sign-in link */
.fn-signin{margin-top:2px; font-size:14.5px; color:var(--fn-ink2); text-align:center}
.fn-signin button{background:none; border:none; color:var(--fn-terra); font:inherit; font-weight:700; cursor:pointer; padding:0}

/* Email form (account) */
.fn-or{display:flex; align-items:center; gap:12px; margin:15px 0; color:var(--fn-ink3); font-size:12.5px; font-weight:700}
.fn-or::before,.fn-or::after{content:""; flex:1; height:1px; background:var(--fn-line)}
.fn-field{width:100%; font:inherit; font-size:16px; color:var(--fn-ink); background:var(--fn-card);
  border:1.5px solid var(--fn-line); border-radius:13px; padding:14px 15px; outline:none; margin-top:10px}
.fn-field:focus{border-color:var(--fn-terra)}
.fn-acct-err{background:var(--fn-terra-soft); color:var(--fn-terra-deep); border-radius:12px;
  padding:11px 14px; font-size:13.5px; font-weight:600; margin:14px 0 4px; line-height:1.45}

/* Privacy bullets */
.fn-bullets{margin-top:24px; display:flex; flex-direction:column; gap:18px}
.fn-bullet{display:flex; gap:14px; align-items:flex-start}
.fn-bullet .bi{width:46px; height:46px; border-radius:13px; background:var(--fn-card); border:1px solid var(--fn-line);
  box-shadow:var(--fn-shadow); display:flex; align-items:center; justify-content:center; flex:none; padding:8px}
.fn-bullet .bi .fn-clay{width:100%; height:100%}
.fn-bullet .bi.line{color:var(--fn-terra)}
.fn-bullet .bi .fn-svgi{width:24px; height:24px}
.fn-bullet b{display:block; font-size:16px; font-weight:800; color:var(--fn-ink); margin-bottom:3px}
.fn-bullet span{font-size:13.8px; color:var(--fn-ink2); line-height:1.55}
/* Privacy legal-links card */
.fn-legalcard{margin-top:22px; background:var(--fn-soft); border-radius:var(--fn-radius); padding:4px 16px}
.fn-legalrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 2px;
  font-size:15px; font-weight:700; color:var(--fn-terra-deep); text-decoration:none}
.fn-legalrow .fn-svgi{width:18px; height:18px; color:var(--fn-terra); flex:none}
.fn-legaldiv{height:1px; background:var(--fn-line2); opacity:.55}

/* "What's next" list on done */
.fn-next{display:flex; flex-direction:column; gap:12px; width:100%; max-width:340px; margin:22px auto 0; text-align:left}
.fn-next .nrow{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--fn-ink)}
.fn-next .ni{width:36px; height:36px; border-radius:11px; background:var(--fn-terra-soft); color:var(--fn-terra-deep);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex:none}
.fn-next .nh{margin-left:auto; font-size:12.5px; color:var(--fn-ink3); font-weight:700}

/* ---- Paywall conversion elements ---- */
.fn-pwrate{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--fn-ink2); margin-top:12px}
.fn-pwrate .stars{color:#E9A23B; letter-spacing:1px}
.fn-pwtrust{ text-align:center; margin:2px 0 20px }
.fn-pwtrust-rate{ font-size:14px; font-weight:800; color:var(--fn-ink2) }
.fn-pwtrust-rate .stars{ color:#E9A23B; letter-spacing:1px; margin-right:6px }
.fn-pwtrust-badges{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-top:9px }
.fn-storebadge{ font-size:11.5px; font-weight:700; color:var(--fn-ink2); background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:5px 12px }
.fn-pwguarantee{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--fn-terra-deep); background:#F6EFE3; border-radius:13px; padding:12px 14px; margin:14px 0 2px; line-height:1.3 }
.fn-pwguarantee svg{ width:17px; height:17px; flex:none }
.fn-pwguarantee b{ font-weight:800 }
.fn-nametrust{ text-align:center; font-size:12px; font-weight:600; color:var(--fn-ink3); margin-top:16px }
.fn-nametrust-s{ color:#E9A23B }
.fn-anchor{margin-top:13px; background:var(--fn-sage-soft); color:var(--fn-sage); border-radius:11px;
  padding:10px 13px; font-size:13.5px; font-weight:700; text-align:center; line-height:1.4}
.fn-payhead{font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--fn-ink3);
  text-align:center; margin:24px 0 12px}
.fn-pwlabel{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fn-ink3); margin:26px 0 12px}
.fn-reassure{margin-top:22px; display:flex; flex-direction:column; gap:9px}
.fn-reassure div{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--fn-ink2); line-height:1.4}
.fn-reassure .rk{color:var(--fn-sage); font-weight:800; flex:none}

/* ---- Stripe payment sheet (pay.js) ---- */
.fn-pay{position:relative; display:flex; flex-direction:column; gap:11px; margin-top:2px}
.fn-pay-busy{position:absolute; inset:-10px; z-index:6; background:rgba(251,247,242,.9);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:16px}
.fn-pay-busy .bt{font-size:14.5px; font-weight:700; color:var(--fn-ink)}
.fn-wallets{display:flex; flex-direction:column; gap:10px}
.fn-wallets:empty{display:none}
/* Apple Pay: the OS renders the button via the special appearance (Safari + verified domain) */
.fn-applepay{-webkit-appearance:-apple-pay-button; appearance:-apple-pay-button;
  -apple-pay-button-type:buy; -apple-pay-button-style:black;
  width:100%; height:52px; border-radius:14px; border:none; cursor:pointer; overflow:hidden}
#fn-googlepay{min-height:52px}
#fn-googlepay > div, #fn-googlepay button{width:100% !important; min-height:52px !important; border-radius:14px !important}
.fn-cashapp{min-height:48px}
.fn-cardtoggle{background:none; border:none; color:var(--fn-terra); font:inherit; font-size:14.5px; font-weight:700;
  cursor:pointer; padding:8px; align-self:center}
.fn-cardwrap{display:flex; flex-direction:column; gap:11px}
.fn-cardfield{background:var(--fn-card); border:1.5px solid var(--fn-line); border-radius:13px; padding:2px 8px; min-height:52px}
.fn-cardpay{margin-top:2px}
.fn-pay-err{background:var(--fn-terra-soft); color:var(--fn-terra-deep); border-radius:12px; padding:11px 14px;
  font-size:13.5px; font-weight:600; margin-top:4px; line-height:1.45; text-align:center}
.fn-pay-email{text-align:center; font-size:13px; color:var(--fn-ink3); margin-top:13px}
.fn-pay-email b{color:var(--fn-ink2); font-weight:700}
.fn-pay-email button{background:none; border:none; color:var(--fn-terra); font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:0 0 0 4px}
.fn-pay-email input{max-width:280px; margin:6px auto 0; text-align:center}
.fn-pay-secure{text-align:center; font-size:12px; color:var(--fn-ink3); margin-top:11px}

/* ===================================================================== *
 * Phase 6 — clay icons + welcome/step redesign                          *
 * ===================================================================== */

/* clay icon inside a tile */
.fn-clay{width:100%; height:100%; object-fit:contain; display:block}

/* disabled CTA = dusty-rose fill (matches the app), not just dimmed */
.fn-cta:disabled{opacity:1; background:#DDA593; color:#fff; box-shadow:none; cursor:default}

/* ---- Welcome ---- */
.fn-splash{align-items:stretch; text-align:left}
.fn-splashsub{font-size:16px; color:var(--fn-ink2); line-height:1.5; margin:22px 2px 4px; max-width:none}

/* hero slideshow dots */
.fn-dots{position:absolute; left:0; right:0; bottom:13px; display:flex; gap:6px; justify-content:center; z-index:2}
.fn-dots span{width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.55); transition:width .3s, background .3s}
.fn-dots span.on{width:20px; background:#fff}

/* feature rows: clay tile + title + desc, divided */
.fn-feats{max-width:none; margin-top:14px; gap:0}
.fn-feat{padding:15px 2px; align-items:center; gap:14px}
.fn-feat + .fn-feat{border-top:1px solid var(--fn-line)}
.fn-feat .fi{width:54px; height:54px; border-radius:15px; background:var(--fn-terra-soft);
  padding:9px; flex:none; display:flex; align-items:center; justify-content:center}
.fn-feat b{display:block; color:var(--fn-ink); font-weight:700; font-size:16.5px; line-height:1.2}
.fn-feat .fd{display:block; color:var(--fn-ink2); font-size:14px; line-height:1.4; margin-top:3px}

/* rating (gold stars) — plain inline text on the splash, not a pill */
.fn-splash .fn-rating{background:none; border:none; box-shadow:none; padding:0; margin-top:20px;
  align-self:flex-start; font-size:14px; color:var(--fn-ink2); white-space:nowrap}
.fn-splash .fn-rating .stars{font-size:15px}
.fn-rating b{font-weight:800; color:var(--fn-ink)}

/* testimonial carousel */
.fn-tscroll{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:18px -22px 2px; padding:4px 22px 10px; -webkit-overflow-scrolling:touch}
.fn-tscroll::-webkit-scrollbar{display:none}
.fn-tcard{flex:0 0 84%; scroll-snap-align:start; background:var(--fn-card); border:1px solid var(--fn-line);
  border-radius:16px; padding:16px 17px; box-shadow:var(--fn-shadow)}
.fn-tcard p{margin:0; font-size:15px; color:var(--fn-ink); line-height:1.5}
.fn-tcard .who{margin-top:12px; display:flex; align-items:center; gap:9px; font-size:13px; color:var(--fn-ink3)}
.fn-tcard .who b{color:var(--fn-ink); font-weight:700}
.fn-tcard .av{width:30px; height:30px; border-radius:99px; color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex:none; background-size:cover}
.fn-tcard .vok{color:var(--fn-sage); font-weight:800}
.fn-signin{text-align:center; margin-top:16px}

/* ---- Curl: segmented family toggle + photo cards ---- */
.fn-seg{display:flex; background:var(--fn-soft); border:1px solid var(--fn-line); border-radius:15px; padding:5px; gap:5px; margin-top:22px}
.fn-seg button{flex:1; border:none; background:transparent; border-radius:11px; padding:11px 8px; cursor:pointer;
  font:inherit; color:var(--fn-ink2); text-align:center; transition:background .15s, box-shadow .15s}
.fn-seg button .st{display:block; font-size:15.5px; font-weight:700; color:var(--fn-ink2)}
.fn-seg button .ss{display:block; font-size:12.5px; color:var(--fn-ink3); margin-top:1px}
.fn-seg button.on{background:var(--fn-card); box-shadow:var(--fn-shadow)}
.fn-seg button.on .st{color:var(--fn-ink)}
.fn-seg button.on .ss{color:var(--fn-terra); font-weight:700}

.fn-cardgrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; margin-top:22px}
.fn-pcard{background:var(--fn-card); border:2px solid transparent; border-radius:16px; padding:9px 9px 12px;
  cursor:pointer; box-shadow:var(--fn-shadow); text-align:center; transition:border-color .15s, transform .06s}
.fn-pcard:active{transform:scale(.98)}
.fn-pcard img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; background:var(--fn-terra-soft); display:block}
.fn-pcard .pl{margin-top:9px; font-size:15px; font-weight:800; color:var(--fn-ink)}
.fn-pcard.sel{border-color:var(--fn-terra)}
.fn-pcard.sel .pl{color:var(--fn-terra-deep)}

/* opt-out pill with a clay icon */
.fn-optout{display:flex; gap:11px; margin-top:16px}
.fn-optpill{flex:1; display:flex; align-items:center; gap:10px; background:var(--fn-card); border:1.5px solid var(--fn-line);
  border-radius:14px; padding:13px 14px; cursor:pointer; box-shadow:var(--fn-shadow); font:inherit; color:var(--fn-ink);
  font-size:15px; font-weight:700; text-align:left; transition:border-color .15s}
.fn-optpill .oi{width:34px; height:34px; border-radius:10px; background:var(--fn-soft); padding:6px; flex:none; display:flex}
.fn-optpill.sel{border-color:var(--fn-terra); background:var(--fn-terra-soft)}

/* option-row radio ring (single-select) — empty ring that fills terra */
.fn-opt .otick{color:#fff}

/* ---- Batch 2: porosity cards · length slider · goal pills ---- */

/* porosity: 2-col photo cards (illustration + title + hint) */
.fn-cardgrid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px}
.fn-pcard2{background:var(--fn-card); border:2px solid transparent; border-radius:16px; padding:10px 10px 14px;
  cursor:pointer; box-shadow:var(--fn-shadow); text-align:center; transition:border-color .15s, transform .06s}
.fn-pcard2:active{transform:scale(.99)}
.fn-pcard2 img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; background:var(--fn-terra-soft); display:block}
.fn-pcard2 .pl{margin-top:11px; font-size:16px; font-weight:800; color:var(--fn-ink)}
.fn-pcard2 .ph{margin-top:3px; font-size:13px; color:var(--fn-ink2); line-height:1.35}
.fn-pcard2.sel{border-color:var(--fn-terra)}
.fn-pcard2.sel .pl{color:var(--fn-terra-deep)}

/* length: horizontal gradient slider + result card */
.fn-slidercard{background:var(--fn-card); border:1px solid var(--fn-line); border-radius:var(--fn-radius);
  padding:24px 18px 20px; box-shadow:var(--fn-shadow); margin-top:22px}
.fn-track{position:relative; height:40px; margin:2px 11px 0}
.fn-bar2{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:8px; border-radius:99px; background:var(--fn-terra-soft)}
.fn-fill2{position:absolute; left:0; top:50%; transform:translateY(-50%); height:8px; border-radius:99px;
  background:linear-gradient(90deg,#E9A23B,var(--fn-terra)); transition:width .2s ease}
.fn-stops{position:absolute; inset:0}
.fn-stop{position:absolute; top:0; bottom:0; width:34px; transform:translateX(-50%); border:none; background:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.fn-stop .d{width:9px; height:9px; border-radius:99px; background:rgba(168,110,70,.45); transition:width .15s, height .15s}
.fn-stop.on{z-index:2}
.fn-stop.on .d{width:22px; height:22px; background:#fff; box-shadow:0 2px 7px rgba(80,50,20,.3)}
.fn-slabels{display:flex; justify-content:space-between; margin:12px 6px 0}
.fn-slabels span{font-size:12px; font-weight:700; color:var(--fn-ink3)}
.fn-slabels span.on{color:var(--fn-terra)}
.fn-sresult{text-align:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--fn-line)}
.fn-sname{font-size:24px; font-weight:800; color:var(--fn-ink); letter-spacing:-.01em}
.fn-shelp{font-size:14px; color:var(--fn-ink2); margin-top:6px; line-height:1.4}

/* goals: flowing pills, selected = dark ink */
.fn-flow{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.fn-fchip{background:var(--fn-card); border:1.5px solid var(--fn-line); border-radius:99px; padding:12px 18px;
  font:inherit; font-size:15.5px; font-weight:700; color:var(--fn-ink2); cursor:pointer; box-shadow:var(--fn-shadow);
  transition:background .12s, color .12s, border-color .12s, transform .06s}
.fn-fchip:active{transform:scale(.98)}
.fn-fchip.sel{background:var(--fn-ink); border-color:var(--fn-ink); color:#fff}

/* ================= Batch 4 ================= */

/* Ambient mascot float/breathe — mirrors the app CrownShea (translateY 0→-6px + scale 1.012, 8.4s cycle, origin bottom-center) */
.fn-mascot2, .fn-mascot{ animation:fn-breathe 8.4s ease-in-out infinite alternate; transform-origin:50% 100%; will-change:transform }
/* animated-WebP mascots already bake in the breathe bob — don't double it */
.fn-mascot.am, .fn-mascot2.am{ animation:none; transform:none }
@keyframes fn-breathe{ from{transform:translateY(0) scale(1)} to{transform:translateY(-6px) scale(1.012)} }
.fn-mascotglow{ animation:fn-glow 2.6s ease-in-out infinite alternate }
@keyframes fn-glow{ from{opacity:.8} to{opacity:1} }
@media (prefers-reduced-motion: reduce){ .fn-mascot2,.fn-mascot,.fn-mascotglow{animation:none} }

/* single-select as flowing pills (reuse .fn-flow/.fn-fchip) — routine steps */
.fn-flow.tight{margin-top:8px}

/* Last wash: date-picker row + next-wash-day prediction card */
.fn-daterow{display:flex; align-items:center; gap:12px; width:100%; background:var(--fn-card); border:1px solid var(--fn-line);
  border-radius:16px; padding:6px 16px; margin-top:16px; box-shadow:var(--fn-shadow); color:var(--fn-ink)}
.fn-daterow .di{width:34px; height:34px; border-radius:9px; background:var(--fn-terra-soft); flex:none;
  display:flex; align-items:center; justify-content:center; padding:6px}
.fn-daterow .di .fn-clay{width:100%; height:100%}
.fn-daterow input[type=date]{border:0; background:transparent; font:inherit; font-size:16px; color:var(--fn-ink);
  font-weight:600; flex:1; padding:15px 0; outline:none; min-width:0}
.fn-predict{display:flex; align-items:center; gap:13px; margin-top:16px; border-radius:18px; padding:15px 18px;
  background:linear-gradient(120deg,#FBE7D3,#F7E0DB)}
.fn-predict .pi{width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center}
.fn-predict .pi .fn-clay{width:100%; height:100%}
.fn-predict .plabel{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--fn-terra-deep)}
.fn-predict .pdate{font-size:20px; font-weight:800; color:var(--fn-ink); margin-top:1px}
.fn-predict .pmeta{font-size:13.5px; color:var(--fn-ink2); margin-top:1px}

/* Source: 2-col icon-tile grid */
.fn-srcgrid{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:8px}
.fn-srccard{display:flex; align-items:center; gap:11px; text-align:left; background:var(--fn-card); border:1.5px solid var(--fn-line);
  border-radius:16px; padding:13px 13px; cursor:pointer; font:inherit; font-size:15px; font-weight:700; color:var(--fn-ink);
  box-shadow:var(--fn-shadow); transition:border-color .15s, background .15s}
.fn-srccard.sel{border-color:var(--fn-terra); background:var(--fn-terra-soft)}
.fn-srccard .si{width:40px; height:40px; border-radius:11px; background:var(--fn-terra-soft); color:var(--fn-terra); flex:none;
  display:flex; align-items:center; justify-content:center}
.fn-srccard.sel .si{background:#fff}
.fn-srccard .si .fn-svgi{width:22px; height:22px}

/* Style: collapsed picker row + since/takedown rows + natural skip */
.fn-stylerows{display:flex; flex-direction:column; gap:11px; margin-top:8px}
.fn-pickrow{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--fn-card);
  border:1px solid var(--fn-line); border-radius:16px; padding:16px; box-shadow:var(--fn-shadow); cursor:pointer;
  font:inherit; font-size:16px; font-weight:600; color:var(--fn-ink)}
.fn-pickrow.ph{color:var(--fn-ink3)}
.fn-pickrow .pk{width:34px; height:34px; border-radius:9px; background:var(--fn-terra-soft); flex:none;
  display:flex; align-items:center; justify-content:center; padding:6px}
.fn-pickrow .pk .fn-clay{width:100%; height:100%}
.fn-pickrow .chev{margin-left:auto; color:var(--fn-ink3); flex:none}
.fn-pickrow .pcat{color:var(--fn-ink3); font-weight:600}
.fn-naturalskip{display:block; width:100%; text-align:center; margin-top:16px; background:none; border:0; font:inherit;
  font-size:15px; font-weight:700; color:var(--fn-terra-deep); cursor:pointer}

/* Style bottom-sheet picker */
.fn-sheet{position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; justify-content:flex-end}
.fn-sheet-scrim{position:absolute; inset:0; background:rgba(40,25,15,.42); opacity:0; transition:opacity .25s}
.fn-sheet.on .fn-sheet-scrim{opacity:1}
.fn-sheet-panel{position:relative; background:var(--fn-cream); border-radius:24px 24px 0 0; max-height:88vh; display:flex;
  flex-direction:column; transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.85,.25,1);
  box-shadow:0 -8px 40px rgba(40,25,15,.22)}
.fn-sheet.on .fn-sheet-panel{transform:translateY(0)}
.fn-sheet-grab{width:44px; height:5px; border-radius:99px; background:var(--fn-line2); margin:10px auto 6px; flex:none}
.fn-sheet-head{padding:4px 22px 0; flex:none}
.fn-sheet-head h2{font-size:25px; font-weight:800; letter-spacing:-.01em; line-height:1.12; color:var(--fn-ink)}
.fn-sheet-head p{font-size:14.5px; color:var(--fn-ink2); margin-top:4px}
.fn-sheet-head .fn-sheet-reassure{margin-top:10px; padding:10px 12px; background:rgba(78,141,91,.09);
  border-radius:11px; font-size:13px; line-height:1.45; color:#3f6b48}
.fn-sheet-search{margin:14px 22px 0; display:flex; align-items:center; gap:10px; background:var(--fn-card);
  border:1px solid var(--fn-line); border-radius:14px; padding:12px 15px; flex:none}
.fn-sheet-search input{border:0; background:transparent; font:inherit; font-size:16px; color:var(--fn-ink); flex:1; outline:none; min-width:0}
.fn-sheet-search .fn-svgi{width:20px; height:20px; color:var(--fn-ink3); flex:none}
.fn-sheet-cats{display:flex; gap:8px; overflow-x:auto; padding:14px 22px 4px; flex:none; -webkit-overflow-scrolling:touch}
.fn-sheet-cats::-webkit-scrollbar{display:none}
.fn-catpill{flex:none; font:inherit; font-size:14px; font-weight:700; color:var(--fn-ink); background:var(--fn-card);
  border:1.5px solid var(--fn-line); border-radius:99px; padding:9px 17px; cursor:pointer; white-space:nowrap}
.fn-catpill.on{background:var(--fn-ink); border-color:var(--fn-ink); color:#fff}
.fn-sheet-list{overflow-y:auto; padding:10px 22px 28px; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch}
.fn-styrow{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--fn-card);
  border:1px solid var(--fn-line); border-radius:15px; padding:15px 17px; cursor:pointer; font:inherit}
.fn-styrow .scol{display:flex; flex-direction:column; min-width:0}
.fn-styrow .srow1{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.fn-styrow .sn{font-size:16px; font-weight:700; color:var(--fn-ink)}
.fn-styrow .sbadge{font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--fn-sage);
  background:var(--fn-sage-soft); border-radius:99px; padding:3px 9px}
.fn-styrow .smeta{font-size:12.5px; color:var(--fn-ink3); margin-top:3px}
.fn-styrow .chev{margin-left:auto; color:var(--fn-ink3); flex:none}
.fn-sheet-empty{text-align:center; color:var(--fn-ink3); font-size:14.5px; padding:26px 0}

/* Goal commit: mascot + ladder card + projection */
.fn-gc-top{display:flex; flex-direction:column; align-items:center}
.fn-gc-ladder{background:var(--fn-card); border:1px solid var(--fn-line); border-radius:20px; box-shadow:var(--fn-shadow);
  padding:8px 10px; margin-top:18px; display:flex; flex-direction:column}
.fn-gc-rung{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; background:none; border:0;
  border-radius:14px; padding:16px 15px; cursor:pointer; font:inherit; font-size:19px; font-weight:800; color:var(--fn-ink);
  transition:background .15s}
.fn-gc-rung .gi{color:var(--fn-ink3); font-size:16px; font-weight:700}
.fn-gc-rung.here{color:var(--fn-ink3); cursor:default}
.fn-gc-rung.sel{background:var(--fn-terra); color:#fff}
.fn-gc-rung.sel .gi{color:#fff}
.fn-gc-check{width:26px; height:26px; border-radius:99px; background:#fff; color:var(--fn-terra); display:flex;
  align-items:center; justify-content:center; flex:none; font-size:15px; font-weight:800}
.fn-gc-proj{margin-top:18px; border-radius:20px; padding:18px 20px; background:linear-gradient(125deg,#FBE7D3,#F6DFDA)}
.fn-gc-proj .grow1{display:flex; align-items:center; gap:12px}
.fn-gc-proj .gp{width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center}
.fn-gc-proj .gp .fn-clay{width:100%; height:100%}
.fn-gc-proj .gtitle{font-size:19px; font-weight:800; color:var(--fn-ink); line-height:1.25}
.fn-gc-proj .gtitle em{color:var(--fn-terra-deep); font-style:normal}
.fn-gc-proj .gbar{height:9px; border-radius:99px; background:rgba(168,68,44,.18); margin-top:14px; overflow:hidden}
.fn-gc-proj .gbar span{display:block; height:100%; border-radius:99px; background:var(--fn-terra)}
.fn-gc-proj .gmeta{font-size:13.5px; color:var(--fn-ink2); margin-top:12px; line-height:1.5}
.fn-gc-empty{margin-top:18px; border-radius:20px; padding:20px; background:var(--fn-soft); color:var(--fn-ink2);
  font-size:15px; text-align:center; line-height:1.5}

/* ================= Batch 5 ================= */

/* aha: sage-check chips */
.fn-chips2{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:20px}
.fn-chip2{display:inline-flex; align-items:center; gap:8px; background:var(--fn-card); border:1px solid var(--fn-line);
  border-radius:99px; padding:9px 16px 9px 10px; font-size:15px; font-weight:700; color:var(--fn-ink); box-shadow:var(--fn-shadow)}
.fn-chip2 .ck{width:22px; height:22px; border-radius:99px; background:var(--fn-sage-soft); color:var(--fn-sage);
  display:flex; align-items:center; justify-content:center; flex:none}
.fn-chip2 .ck svg{width:13px; height:13px}
/* aha: white growth card */
.fn-growthcard{background:var(--fn-card); border:1px solid var(--fn-line); border-radius:20px; box-shadow:var(--fn-shadow);
  padding:16px 14px 14px; margin-top:22px}
.fn-growthcard .gcurve{width:100%; height:auto; display:block}
.fn-growthcols{display:flex; justify-content:space-between; margin-top:8px; gap:6px}
.fn-growthcols .gcol{display:flex; flex-direction:column; flex:1; min-width:0}
.fn-growthcols .gcol.c{align-items:center; text-align:center}
.fn-growthcols .gcol.r{align-items:flex-end; text-align:right}
.fn-growthcols .gname{font-size:13px; font-weight:800; color:var(--fn-ink); line-height:1.2}
.fn-growthcols .gwhen{font-size:12.5px; font-weight:700; color:var(--fn-terra-deep); margin-top:2px}
/* aha: focus rows w/ clay tiles */
.fn-focus2{margin-top:26px}
.fn-focus2 .flabel{font-size:14px; font-weight:700; color:var(--fn-ink3); margin-bottom:12px}
.fn-focusrow2{display:flex; align-items:center; gap:13px; background:var(--fn-card); border:1px solid var(--fn-line);
  border-radius:16px; padding:14px 15px; box-shadow:var(--fn-shadow); margin-bottom:11px}
.fn-focusrow2 .ft{width:46px; height:46px; border-radius:13px; flex:none; display:flex; align-items:center;
  justify-content:center; padding:8px; background:var(--fn-sage-soft)}
.fn-focusrow2:nth-child(even) .ft{background:var(--fn-terra-soft)}
.fn-focusrow2 .ft .fn-clay{width:100%; height:100%}
.fn-focusrow2 b{display:block; font-size:16px; font-weight:800; color:var(--fn-ink); margin-bottom:1px}
.fn-focusrow2 span{font-size:13.5px; color:var(--fn-ink2); line-height:1.4}

/* paywall: offer card + perks + scarcity + free link */
.fn-pw2{align-items:stretch}
.fn-pw2 .fn-mascot{align-self:center}
.fn-pw2 .fn-eyebrow{margin-top:16px; text-align:center}
.fn-pw2 .fn-h{font-size:clamp(28px,7.4vw,38px); text-align:center}
.fn-pw2 .fn-sub{text-align:center}
.fn-offer{position:relative; background:var(--fn-card); border:1.5px solid var(--fn-terra); border-radius:20px;
  padding:22px 18px 16px; margin-top:26px; box-shadow:var(--fn-shadow)}
.fn-offer .otab{position:absolute; top:-13px; left:18px; background:linear-gradient(90deg,#E8A15C,#C2573B); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-radius:99px; padding:5px 13px}
.fn-offer .ohead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.fn-offer .oname{font-size:20px; font-weight:800; color:var(--fn-ink)}
.fn-offer .oanchor{font-size:13.5px; font-weight:700; color:var(--fn-terra-deep); margin-top:3px; line-height:1.35}
.fn-offer .opricewrap{text-align:right; flex:none}
.fn-offer .oprice{font-size:34px; font-weight:800; color:var(--fn-ink); line-height:1}
.fn-offer .oonce{font-size:14px; color:var(--fn-ink3); font-weight:700}
.fn-offer .operks{margin-top:18px; display:flex; flex-direction:column; gap:13px}
.fn-offer .operk{display:flex; align-items:center; gap:12px; font-size:16px; font-weight:700; color:var(--fn-ink); line-height:1.3}
.fn-offer .operk .pk{width:26px; height:26px; border-radius:99px; background:var(--fn-sage-soft); color:var(--fn-sage);
  display:flex; align-items:center; justify-content:center; flex:none}
.fn-offer .operk.gold .pk{background:#F6E4C8; color:#C79A3F}
.fn-offer .operk .pk svg{width:15px; height:15px}
.fn-offer .oscar{height:8px; border-radius:99px; background:var(--fn-line); margin-top:18px; overflow:hidden}
.fn-offer .oscar span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#E8A15C,#C2573B)}
.fn-offer .oscarlbl{display:flex; align-items:center; gap:8px; margin-top:11px; font-size:14.5px; font-weight:800; color:var(--fn-terra-deep)}
.fn-offer .oscarlbl .fn-clay{width:20px; height:20px}

/* ===== Paywall A/B/C variants ===== */
/* offer-card skins */
.fn-offer.peach{background:linear-gradient(135deg,#FDEFE6,#FBDDCD); border-color:transparent}
.fn-offer.plain{border-width:1px; border-color:var(--fn-line)}
/* price anchors (yearly/monthly — non-tappable context) + free row */
.fn-plans{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.fn-plan{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--fn-card);
  border:1.5px solid var(--fn-line); border-radius:16px; padding:14px 16px; margin:0}
.fn-plan.anchor{background:var(--fn-soft); border-color:transparent}
.fn-plan.free{cursor:pointer; width:100%; text-align:left; font:inherit; background:var(--fn-card); border:1.5px solid var(--fn-line); transition:border-color .15s, background .15s}
.fn-plan.free:active{transform:scale(.99)}
.fn-plan.free.sel{border-color:var(--fn-terra); background:var(--fn-terra-soft)}
.fn-plan.free.sel .pp.dim{color:var(--fn-terra-deep)}
.fn-plan .pp.dim{color:var(--fn-ink3)}
/* the lifetime offer card is the default selection; both are tappable */
.fn-offer{cursor:pointer}
.fn-offer.unsel{opacity:.66}
.fn-plan .pl{font-size:14.5px; font-weight:800; color:var(--fn-ink); display:flex; align-items:center; gap:8px}
.fn-plan .pls{font-size:12px; font-weight:600; color:var(--fn-ink3); margin-top:2px}
.fn-plan .pp{font-size:15px; font-weight:800; color:var(--fn-ink); white-space:nowrap}
.fn-plan .pp span{font-size:12.5px; font-weight:700; color:var(--fn-ink3)}
.fn-plan .pbadge{font-size:9.5px; font-weight:800; color:#fff; background:var(--fn-sage); border-radius:99px; padding:2px 8px; letter-spacing:.3px}
.fn-plansnote{font-size:11.5px; color:var(--fn-ink3); text-align:center; margin-top:10px}
/* value rows */
.fn-vrows{display:flex; flex-direction:column; gap:11px; margin-top:18px}
.fn-vrow{display:flex; align-items:center; gap:11px; font-size:14px; font-weight:600; color:var(--fn-ink2)}
.fn-vrow .vi{width:22px; height:22px; border-radius:99px; background:var(--fn-sage-soft); color:var(--fn-sage);
  display:flex; align-items:center; justify-content:center; flex:none}
.fn-vrow .vi svg{width:13px; height:13px}
/* B — journey band */
.fn-jhero{background:linear-gradient(160deg,#F3E5D2,#E9D6BC); border-radius:22px; padding:24px 20px 22px; text-align:center; margin-bottom:20px}
.fn-jhero .jeyebrow{font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--fn-terra-deep)}
.fn-jarc{display:flex; align-items:center; justify-content:center; margin:12px 0 8px}
.fn-jnode{display:flex; flex-direction:column; align-items:center; gap:5px}
.fn-jdot{width:13px; height:13px; border-radius:99px; background:#fff; border:2.5px solid var(--fn-terra)}
.fn-jdot.now{background:var(--fn-terra)}
.fn-jline{height:3px; width:46px; background:repeating-linear-gradient(90deg,#c79a72 0 6px,transparent 6px 11px)}
.fn-jcap{font-size:10.5px; font-weight:800; color:#7a5a44}
.fn-jbig{font-size:22px; font-weight:800; color:var(--fn-ink); margin-top:8px; letter-spacing:-.01em}
.fn-jhero .jsub{font-size:13.5px; color:#7a5a44; margin-top:6px; line-height:1.45}
/* C — plum founding band */
.fn-fband{background:linear-gradient(155deg,#7A4360,#532A41); border-radius:22px; padding:24px 22px 20px; text-align:center; color:#fff}
.fn-fband .feyebrow{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#F0B27D; margin-top:12px}
.fn-fband .fh1{font-size:clamp(26px,7vw,32px); font-weight:800; line-height:1.1; margin-top:8px; color:#fff; letter-spacing:-.01em}
.fn-fband .fsub{font-size:14px; color:#E7C3D4; margin-top:10px; line-height:1.5}
.fn-fband .fbar{height:9px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; margin-top:16px}
.fn-fband .fbar span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#E8A15C,#F0A24A)}
.fn-fband .fseat{display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; font-weight:800; color:#F4C79A; margin-top:10px}
.fn-fband .fseat .fn-clay{width:18px; height:18px}
/* testimonial slideshow (real photos + dots + auto-advance) */
.fn-pwslide{margin-top:14px; overflow:hidden}
.fn-pwtrack{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1)}
.fn-pwtcard{flex:0 0 100%; box-sizing:border-box; background:#FBF4EA; border:1px solid #EAD9C9; border-radius:18px; padding:15px 16px}
.fn-pwt-hd{display:flex; align-items:center; gap:11px}
.fn-pwt-av{width:40px; height:40px; border-radius:99px; flex:none; background-size:cover; background-position:center;
  border:1.5px solid #fff; box-shadow:0 2px 6px rgba(80,50,20,.14)}
.fn-pwt-name{font-size:14.5px; font-weight:800; color:var(--fn-ink)}
.fn-pwt-fm{font-size:12px; font-weight:700; color:var(--fn-terra-deep)}
.fn-pwt-stars{margin-left:auto; color:#F2B265; font-size:12px; letter-spacing:1px; flex:none}
.fn-pwt-q{font-size:13.5px; font-weight:600; color:#4a4036; line-height:1.5; font-style:italic; margin-top:10px}
.fn-pwdots{display:flex; gap:6px; justify-content:center; margin-top:13px}
.fn-pwdot{width:6px; height:6px; border-radius:99px; background:rgba(194,87,59,.24); transition:width .25s, background .25s}
.fn-pwdot.on{width:16px; background:var(--fn-terra)}

/* paywall sticky footer additions */
.fn-payreassure{text-align:center; font-size:12.5px; color:var(--fn-ink3); margin-top:9px}
.fn-freeskip{display:block; width:100%; text-align:center; margin-top:6px; background:none; border:0; font:inherit;
  font-size:15px; font-weight:700; color:var(--fn-ink2); cursor:pointer; background: #e5e5e5; padding: 10px 10px; border-radius: 15px;line-height: 1em;}
.fn-freeskip b{color:var(--fn-terra-deep)}
.fn-freeskip span { font-size: 12px;font-weight: 600;color: var(--fn-ink3);margin-top: 0px;}

/* payment bottom-sheet body */
.fn-paybody{padding:14px 22px 26px; overflow-y:auto}

/* done: clay next-steps card */
.fn-nextcard{background:var(--fn-card); border:1px solid var(--fn-line); border-radius:18px; box-shadow:var(--fn-shadow);
  padding:2px 16px; margin:24px auto 0; width:100%; max-width:360px; text-align:left; list-style:none}
.fn-nextcard .nrow2{display:flex; align-items:center; gap:13px; padding:15px 0; font-size:16px; font-weight:700; color:var(--fn-ink)}
.fn-nextcard .nrow2 + .nrow2{border-top:1px solid var(--fn-line)}
.fn-nextcard .ni2{width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center}
.fn-nextcard .ni2 .fn-clay{width:100%; height:100%}
.fn-nextcard .nh2{margin-left:auto; font-size:13px; color:var(--fn-ink3); font-weight:700}
.fn-founding-note{display:inline-flex; align-items:center; gap:8px; background:var(--fn-terra-soft); color:var(--fn-terra-deep);
  border-radius:99px; padding:8px 16px; font-size:14px; font-weight:800; margin:16px auto 0}
.fn-founding-note .fn-clay{width:20px; height:20px}

/* ================= Today-screen replica (final funnel step) ================= */
.fn-todaystep{ padding:0 !important; max-width:none; background:#FAF8F4 }
.fn-todaystep .fn-h, .fn-todaystep .fn-sub{ text-align:left }
.tdy{ position:relative; font-family:inherit; color:#2C2018; padding-bottom:20px }
.tdy-hdr{ display:flex; align-items:flex-start; justify-content:space-between; padding:14px 18px 12px }
.tdy-greet{ font-size:14px; font-weight:700; color:#6E5C4E }
.tdy-name{ font-size:23px; font-weight:800; letter-spacing:-.4px; color:#33241A; line-height:1.05; margin-top:1px }
.tdy-hicons{ display:flex; align-items:center; gap:10px; padding-top:4px }
.tdy-stats{ width:42px; height:42px; border-radius:99px; background:#fff; box-shadow:0 4px 12px rgba(80,50,20,.08); display:flex; align-items:center; justify-content:center }
.tdy-stats .fn-clay{ width:22px; height:22px }
.tdy-av{ width:42px; height:42px; border-radius:99px; border:2px solid #fff; box-shadow:0 4px 12px rgba(80,50,20,.08); background:linear-gradient(135deg,#E8C7A8,#A87858); display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; font-weight:700 }
/* violet hero */
.tdy-hero{ margin:4px 16px 0; border-radius:26px; padding:18px 20px 16px; position:relative; overflow:hidden;
  background:radial-gradient(130% 135% at 82% -12%, #8C68C0 0%, #5C3C86 55%, #422A63 100%); box-shadow:0 10px 22px rgba(92,60,134,.2) }
.tdy-hero .heb{ font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#F0C987 }
.tdy-hero .hblossom{ position:absolute; top:16px; right:18px; width:40px; height:40px; border-radius:99px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:20px }
.tdy-lenrow{ display:flex; align-items:flex-start; gap:9px; margin-top:11px }
.tdy-lnum{ font-size:42px; font-weight:800; line-height:.88; letter-spacing:-1px; color:#fff }
.tdy-larr{ font-size:21px; color:#D9C4EC; margin-top:11px }
.tdy-llbl{ font-size:11.5px; font-weight:600; color:#D9C4EC; margin-top:5px; white-space:nowrap }
.tdy-prow{ display:flex; align-items:center; gap:11px; margin-top:16px }
.tdy-ptrack{ flex:1; height:11px; border-radius:6px; background:rgba(255,255,255,.22); overflow:hidden }
.tdy-pfill{ height:100%; border-radius:6px; background:linear-gradient(90deg,#F2B265,#F0C987); box-shadow:0 0 8px rgba(240,201,135,.4) }
.tdy-ppct{ font-size:14px; font-weight:800; color:#fff }
.tdy-hfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px }
.tdy-htogo{ font-size:11.5px; font-weight:600; color:#D9C4EC }
.tdy-hupd{ font-size:11.5px; font-weight:800; color:#F0C987 }
/* white card base */
.tdy-card{ margin:14px 16px 0; background:#fff; border:1px solid #ECE4D8; border-radius:20px; padding:14px 16px 16px; box-shadow:0 6px 16px rgba(80,50,20,.05) }
.tdy-crow{ display:flex; align-items:center; gap:12px }
.tdy-ci{ width:40px; height:40px; border-radius:99px; flex:none; display:flex; align-items:center; justify-content:center; font-size:20px }
.tdy-ct{ min-width:0 } .tdy-ct .a{ font-size:15.5px; font-weight:800; color:#2C2018 } .tdy-ct .b{ font-size:12px; font-weight:500; color:#9A8A78; margin-top:2px }
.tdy-manage{ margin-left:auto; display:flex; align-items:center; gap:2px; font-size:12.5px; font-weight:700; color:#C2573B; white-space:nowrap }
/* mood */
.tdy-faces{ display:flex; justify-content:space-around; margin-top:15px }
.tdy-face{ width:50px; height:50px; border-radius:99px; background:#F3EBDF; display:flex; align-items:center; justify-content:center; font-size:25px; cursor:pointer; transition:background .16s }
.tdy-face.sel{ background:#F0A24A }
/* habits */
.tdy-hbar{ height:6px; border-radius:4px; background:#F3EBDF; margin-top:13px; overflow:hidden }
.tdy-hbar span{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#F2B265,#C2573B); transition:width .2s }
.tdy-habits{ display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:14px }
.tdy-habit{ width:72px; text-align:center; cursor:pointer }
.tdy-hdisc{ width:58px; height:58px; border-radius:99px; margin:0 auto; background:#F3EBDF; border:2.5px solid transparent; display:flex; align-items:center; justify-content:center; position:relative; transition:all .16s }
.tdy-hdisc .fn-clay{ width:30px; height:30px }
.tdy-habit.done .tdy-hdisc{ background:#FCEADF; border-color:#C2573B }
.tdy-hbadge{ position:absolute; right:-1px; bottom:-1px; width:22px; height:22px; border-radius:99px; background:#C2573B; border:2.5px solid #fff; display:none; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800 }
.tdy-habit.done .tdy-hbadge{ display:flex }
.tdy-hlbl{ font-size:11.5px; font-weight:700; color:#9A8A78; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tdy-habit.done .tdy-hlbl{ color:#2C2018 }
.tdy-hadd .tdy-hdisc{ background:none; border:1.6px solid #D9CBBA; color:#9A8A78; font-size:26px }
/* care */
.tdy-eyebrow{ padding:18px 16px 0 }
.tdy-eyebrow .e{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#C2573B }
.tdy-eyebrow .h{ font-size:20px; font-weight:800; letter-spacing:-.3px; color:#33241A; margin-top:3px }
.tdy-caregrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:14px 16px 0 }
.tdy-carecell{ text-align:center; cursor:pointer }
.tdy-caredisc{ width:100%; max-width:72px; aspect-ratio:1; border-radius:99px; margin:0 auto; background:#fff; box-shadow:0 6px 16px rgba(80,50,20,.05); display:flex; align-items:center; justify-content:center; position:relative; transition:box-shadow .15s }
.tdy-caredisc .inner{ width:74%; height:74%; border-radius:99px; background:#FCE6C8; display:flex; align-items:center; justify-content:center }
.tdy-caredisc .inner.sage{ background:#DDEBDF } .tdy-caredisc .inner.rose{ background:#F5BFB0 }
.tdy-caredisc .fn-clay{ width:60%; height:60% }
.tdy-carecell.done .tdy-caredisc{ box-shadow:0 0 0 2.5px #C2573B, 0 6px 16px rgba(194,87,59,.2) }
.tdy-carebadge{ position:absolute; right:-1px; bottom:-1px; width:24px; height:24px; border-radius:99px; background:#C2573B; border:2.5px solid #fff; display:none; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800 }
.tdy-carecell.done .tdy-carebadge{ display:flex }
.tdy-carelbl{ font-size:11.5px; font-weight:700; color:#33241A; margin-top:7px }
.tdy-carecell.done .tdy-carelbl{ color:#C2573B }
.tdy-showall{ margin:14px 16px 0; height:44px; background:#fff; border:1px solid rgba(41,50,76,.08); border-radius:14px; display:flex; align-items:center; justify-content:center; gap:5px; font-size:13.5px; font-weight:700; color:#C2573B; cursor:pointer }
.tdy-doneline{ padding:13px 16px 0; font-size:13px; font-weight:600; color:#A2917F }
/* section head */
.tdy-sh{ display:flex; align-items:center; justify-content:space-between; padding:24px 20px 12px }
.tdy-sh .t{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#2C2018; display:flex; align-items:center; gap:8px }
.tdy-sh .l{ font-size:13px; font-weight:700; color:#C2573B }
.tdy-newb{ font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#fff; background:#C2573B; border-radius:99px; padding:3px 9px }
/* this week */
.tdy-week{ margin:0 16px; background:#fff; border:1px solid #ECE4D8; border-radius:20px; padding:16px; box-shadow:0 6px 16px rgba(80,50,20,.05) }
.tdy-wtop{ display:flex; align-items:center; gap:11px }
.tdy-wtop .fn-clay{ width:30px; height:30px }
.tdy-wtop .ws{ font-size:16px; font-weight:800; color:#2C2018 }
.tdy-wtop .wm{ flex:1; text-align:right; font-size:12.5px; font-weight:700; color:#9A8A78 }
.tdy-wdays{ display:flex; justify-content:space-between; margin-top:16px }
.tdy-wday{ text-align:center; flex:1 }
.tdy-wday .d{ font-size:11px; font-weight:700; color:#9A8A78; margin-bottom:6px }
.tdy-wday .d.t{ color:#C2573B }
.tdy-wday .m{ width:26px; height:26px; border-radius:99px; margin:0 auto; display:flex; align-items:center; justify-content:center }
.tdy-wday .m.done{ background:#F6E3DA; color:#C2573B }
.tdy-wday .m.today{ background:#C2573B; color:#fff; font-size:11px; font-weight:800 }
.tdy-wday .m.todo{ background:#EFE7DB }
.tdy-wday .m svg{ width:15px; height:15px }
/* journal empty */
.tdy-jempty{ margin:0 16px; background:#fff; border:1px solid #ECE4D8; border-radius:20px; padding:16px; box-shadow:0 6px 16px rgba(80,50,20,.05); display:flex; align-items:center; gap:13px }
.tdy-jempty .ji{ width:40px; height:40px; border-radius:99px; background:#EBF0E9; flex:none; display:flex; align-items:center; justify-content:center; padding:9px }
.tdy-jempty .ji .fn-clay{ width:100%; height:100% }
.tdy-jempty .a{ font-size:15.5px; font-weight:800; color:#2C2018 }
.tdy-jempty .b{ font-size:12.5px; font-weight:500; color:#9A8A78; margin-top:2px }
.tdy-jempty .chev{ margin-left:auto; color:#A2917F }
/* reminders */
.tdy-rem{ margin:0 16px; display:flex; flex-direction:column; gap:10px }
.tdy-rrow{ background:#fff; border:1px solid #ECE4D8; border-radius:16px; padding:12px 15px; display:flex; align-items:center; gap:13px; box-shadow:0 5px 13px rgba(80,50,20,.05) }
.tdy-rrow .ri{ width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; padding:7px }
.tdy-rrow .ri .fn-clay{ width:100%; height:100% }
.tdy-rrow .rt{ min-width:0 } .tdy-rrow .rt .a{ font-size:14.5px; font-weight:800; color:#2C2018 } .tdy-rrow .rt .b{ font-size:12px; font-weight:500; color:#9A8A78; margin-top:1px }
.tdy-rrow .rwhen{ margin-left:auto; font-size:13px; font-weight:800; color:#A8442C; white-space:nowrap }
/* for you */
.tdy-foryou{ display:flex; gap:13px; padding:0 16px; overflow-x:auto; -webkit-overflow-scrolling:touch }
.tdy-foryou::-webkit-scrollbar{ display:none }
.tdy-fcard{ width:228px; flex:none }
.tdy-fcover{ width:228px; height:124px; border-radius:16px; background-size:cover; background-position:center; background-color:#E7DBC6 }
.tdy-fcat{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#C2573B; margin-top:9px }
.tdy-ftitle{ font-size:15px; font-weight:800; line-height:1.16; letter-spacing:-.2px; color:#33241A; margin-top:3px }
.tdy-fmeta{ font-size:11.5px; font-weight:600; color:#9A8A78; margin-top:4px }
/* bottom nav (decorative) */
.tdy-nav{ margin-top:22px; background:#fff; border-top-left-radius:24px; border-top-right-radius:24px; box-shadow:0 -4px 24px rgba(74,40,20,.08); padding:12px 6px 14px; display:flex; justify-content:space-around }
.tdy-tab{ text-align:center; cursor:pointer; flex:1 }
.tdy-tab .chip{ width:44px; height:44px; border-radius:15px; margin:0 auto; display:flex; align-items:center; justify-content:center; position:relative }
.tdy-tab.act .chip{ background:#FFE9E1 }
.tdy-tab .chip .fn-clay{ width:31px; height:31px }
.tdy-tab .nl{ font-size:10.5px; font-weight:700; color:#A2917F; margin-top:4px }
.tdy-tab.act .nl{ color:#C2573B }
.tdy-tab .nbadge{ position:absolute; top:-3px; right:4px; min-width:16px; height:16px; border-radius:99px; background:#C2573B; color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px }
/* floating mascot */
.tdy-fab{ position:absolute; right:14px; bottom:98px; width:64px; height:64px; z-index:5; pointer-events:none }
.tdy-fab img{ width:100%; height:100% }
/* download footer sub-line */
.fn-dllead{ text-align:center; font-size:12.5px; color:var(--fn-ink3); margin-top:9px }
.fn-cta.tdy-pulse{ animation:tdy-pulse .5s ease }
@keyframes tdy-pulse{ 0%,100%{ transform:none } 45%{ transform:scale(1.045) } }

/* Stripe Payment Element (funnel pay sheet) */
.fn-payment-element{ margin:2px 0 14px; min-height:40px }
/* Express Checkout Element (Apple/Google Pay + Link big buttons) + "Or pay using" divider */
.fn-express:empty{ display:none }
.fn-paydivider{ display:flex; align-items:center; gap:12px; margin:16px 2px 12px; color:var(--fn-ink3, #A2917F); font-size:13px; font-weight:600 }
.fn-paydivider::before, .fn-paydivider::after{ content:''; flex:1; height:1px; background:var(--fn-line) }
.fn-paydivider span{ flex:none }

/* ===== App-style welcome: full-bleed hero slideshow + card mounted over it ===== */
.fn-splashstep{ padding:0 !important; max-width:none; background:var(--fn-cream) }
/* The Promise welcome: hero FLEXES to fill, card is PINNED at bottom → CTA always on screen, no scroll */
.fn-splash2{ display:flex; flex-direction:column; flex:1; min-height:0 }
.sp-hero{ position:relative; width:100%; flex:1 1 auto; min-height:0; overflow:hidden; background:#2a1a12 }
.sp-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease }
.sp-hero > img.on{ opacity:1 }
.sp-scrim{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(20,10,5,.42) 0%, rgba(20,10,5,0) 25%, rgba(20,10,5,0) 42%, rgba(20,10,5,.74) 100%) }
.sp-head{ position:absolute; top:0; left:0; right:0; padding:16px 18px; display:flex; align-items:center; gap:10px; z-index:3 }
.sp-av{ width:38px; height:38px; border-radius:99px; border:2px solid rgba(255,255,255,.92); overflow:hidden; flex:none; background:#fff }
.sp-av img{ width:100%; height:100%; object-fit:contain }
.sp-brand{ color:#fff; font-size:20px; font-weight:800; letter-spacing:-.02em; text-shadow:0 1px 10px rgba(0,0,0,.35) }
.sp-cap{ position:absolute; left:22px; right:22px; bottom:32px; z-index:2 }
.sp-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#fff; opacity:.92; margin-bottom:10px; text-shadow:0 1px 8px rgba(0,0,0,.4) }
.sp-title{ color:#fff; font-size:clamp(29px,8vw,40px); font-weight:800; line-height:1.06; letter-spacing:-.022em; text-shadow:0 2px 22px rgba(0,0,0,.45) }
.sp-title em{ color:#FFD9B0; font-style:normal }
.sp-card{ position:relative; margin-top:-22px; background:var(--fn-cream); border-radius:26px 26px 0 0; padding:22px 22px calc(22px + env(safe-area-inset-bottom)); z-index:4; box-shadow:0 -10px 30px rgba(40,25,15,.10); flex:none }
.sp-sub{ margin:0 0 17px; font-size:15.5px; line-height:1.5; color:var(--fn-ink2); text-align:center }
.sp-sub b{ color:var(--fn-ink); font-weight:700 }

/* What you get — five glances between the sub and the social proof. Tight
   line-height + one row each so the whole block is scanned, not read. Left
   aligned on purpose: a centred list has no column for the eye to run down. */
.sp-list{ list-style:none; margin:0 0 16px; padding:0 2px; display:flex;
  flex-direction:column; gap:8px }
/* 13.5px + tight tracking is what keeps the longest line ("Real answers from
   Black women with your hair") on ONE row at 375px. Each item must be a single
   row or the list stops being scannable and turns back into prose. Re-check
   this the next time a line is reworded. */
.sp-list li{ display:flex; align-items:center; gap:8px; font-size:13.5px;
  font-weight:600; line-height:1.25; color:var(--fn-ink); letter-spacing:-.018em }
.sp-li-ic{ flex:none; width:22px; height:22px; object-fit:contain }
.sp-proof{ display:flex; align-items:center; justify-content:center; gap:11px; margin:0 0 18px }
.sp-avstack{ display:flex }
.sp-avstack img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2.5px solid var(--fn-cream); margin-left:-10px; box-shadow:0 1px 3px rgba(0,0,0,.12) }
.sp-avstack img:first-child{ margin-left:0 }
.sp-proof-t{ font-size:13.5px; line-height:1.3; color:var(--fn-ink2); text-align:left }
.sp-proof-t b{ color:var(--fn-ink); font-weight:700 }
.sp-proof-t .sp-star{ color:#E9A23B }
.sp-cta{ position:relative; animation:sp-pulse 1.9s ease-in-out infinite }
.sp-cta .sp-arw{ display:inline-block; margin-left:6px }
.sp-cta:hover, .sp-cta:active{ animation-play-state:paused }
@keyframes sp-pulse{
  0%,100%{ transform:scale(1); box-shadow:0 10px 22px -6px rgba(194,87,59,.5), 0 0 0 0 rgba(194,87,59,.34) }
  50%{ transform:scale(1.03); box-shadow:0 16px 30px -6px rgba(194,87,59,.6), 0 0 0 12px rgba(194,87,59,0) }
}
.sp-micro{ margin:12px 0 0; text-align:center; font-size:12.5px; color:var(--fn-ink3); font-weight:500 }
.sp-micro .sp-d{ opacity:.5; margin:0 5px }
@media (prefers-reduced-motion: reduce){ .sp-cta{ animation:none } .sp-hero > img{ transition:none } }
/* bloom (final) — download-the-app store badges, OS-detected via platform-* on the root */
.sp-stores{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:26px }
.sp-store{ display:block; line-height:0 }
.sp-store img{ height:52px; width:auto }
.fn-bloomnote{ text-align:center; font-size:13px; color:var(--fn-ink3, #A2917F); margin-top:16px }
.platform-ios .sp-store[href*="store=android"]{ display:none }
.platform-android .sp-store[href*="store=ios"]{ display:none }

/* Account email sheet (app-style Create account) */
.fn-authsheet{ padding:8px 22px calc(26px + env(safe-area-inset-bottom)); display:flex; flex-direction:column }
.fn-authlabel{ font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--fn-ink2); margin:16px 0 8px }
.fn-authsheet .fn-field{ margin-top:0; border-radius:16px; padding:16px; box-shadow:0 4px 14px rgba(80,50,20,.05) }
.fn-pwrap{ position:relative }
.fn-pwrap .fn-field{ padding-right:52px }
.fn-eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer; color:var(--fn-ink2) }
.fn-eye svg{ width:22px; height:22px }
.fn-autherr{ background:var(--fn-terra-soft); color:var(--fn-terra-deep); border-radius:12px; padding:10px 14px; font-size:13.5px; font-weight:600; margin-top:12px }
.fn-authsheet .fn-cta{ margin-top:20px }

/* Paywall feature comparison — swaps with the plan selection (lifetime = all green,
   free = 1 green + limited amber). */
.pw-feats{ display:flex; flex-direction:column; gap:9px; margin-top:18px }
.pw-feat{ display:flex; align-items:flex-start; gap:11px; font-size:14px; font-weight:600; line-height:1.3; color:var(--fn-ink) }
.pw-feat .fx{ flex:none; width:22px; height:22px; border-radius:99px; display:flex; align-items:center; justify-content:center; margin-top:0 }
.pw-feat .fx svg{ width:13px; height:13px }
.pw-feat.on .fx{ background:#E4EFE4; color:#4E8D5B }
.pw-feat.off .fx{ background:#FBE7CB; color:#C98A2E }
.pw-feat.off{ color:var(--fn-ink2) }
.pw-feat .ft{ flex:1; min-width:0 }

/* Stripe Payment Element loading spinner (shown until the element is 'ready') */
.fn-payloading{ display:flex; align-items:center; justify-content:center; min-height:120px }

/* Bloom celebration (between paywall and the Today replica) */
.fn-bloom{ flex:1; align-items:center; justify-content:center; text-align:center; padding:20px 8px 0 }
.fn-bloom .fn-mascot{ margin:0 auto 6px }
.fn-bloom .fn-h{ text-align:center }
.fn-bloom .fn-sub{ text-align:center; max-width:32ch; margin:14px auto 0 }
.fn-bloom .fn-founding-note{ margin:16px auto 0 }

/* ── Scanner preview (pre-account "wow": pick a product → scan → Fit report) ── */
.fn-scanstep{ padding-top:4px }
.fn-scanstep .fn-h em{ color:var(--fn-terra); font-style:normal }
.fn-scanphase{ display:flex; flex-direction:column; transition:opacity .3s ease, transform .3s ease }
.fn-scanphase.fn-out{ opacity:0; transform:translateY(-8px) }
/* picker — a real product shelf (2-col photo grid) */
.fn-scan-eyebrow{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--fn-terra);
  background:var(--fn-terra-soft); padding:6px 12px 6px 10px; border-radius:99px; margin:6px 0 12px }
.fn-scan-eyebrow .fn-svgi{ width:15px; height:15px }
.fn-scangrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px }
.fn-scancard{ display:block; width:100%; text-align:left; padding:0; overflow:hidden;
  background:var(--fn-card); border:1px solid rgba(0,0,0,.03); border-radius:20px;
  font:inherit; color:var(--fn-ink); cursor:pointer; box-shadow:var(--fn-shadow);
  transition:transform .14s ease, box-shadow .14s ease }
.fn-scancard:active{ transform:scale(.98) }
.fn-scancard:hover{ transform:translateY(-3px); box-shadow:0 4px 8px rgba(80,50,20,.06), 0 16px 34px rgba(80,50,20,.13) }
.fn-scanshot{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  padding:14px; background:radial-gradient(120% 100% at 50% 0%, #FBF6EF 0%, #F1E8DB 100%) }
.fn-scanshot img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply;
  filter:drop-shadow(0 6px 10px rgba(80,50,20,.12)) }
.fn-scanglyph{ position:absolute; top:9px; right:9px; width:27px; height:27px; border-radius:99px;
  background:rgba(255,255,255,.86); display:flex; align-items:center; justify-content:center;
  color:var(--fn-terra); box-shadow:0 2px 6px rgba(80,50,20,.12) }
.fn-scanglyph .fn-svgi{ width:14px; height:14px }
.fn-scanmeta{ display:block; padding:13px 16px 15px }
.fn-scanmeta b{ display:block; font-size:14.5px; font-weight:800; color:var(--fn-ink); line-height:1.15 }
.fn-scanmeta span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:12.5px; color:var(--fn-ink2); line-height:1.32; margin-top:3px }
/* reassurance sits up top as a soft info nudge (under the intro, before the grid) */
.fn-scanreassure{ display:flex; align-items:center; gap:9px; margin:16px 0 2px; padding:10px 13px;
  background:#F4ECE3; border-radius:12px;
  font-size:12.5px; color:var(--fn-ink2); font-weight:600; line-height:1.35 }
.fn-scanreassure .fn-svgi{ width:16px; height:16px; color:var(--fn-terra); flex:none }
/* scanning */
.fn-scananim{ align-items:center; text-align:center; padding-top:26px }
.fn-scananim .fn-h{ margin-top:0 }
.fn-scan-chip{ display:inline-block; max-width:90%; margin-top:2px; font-size:13px; font-weight:700;
  color:var(--fn-terra-deep); background:var(--fn-terra-soft); padding:7px 14px; border-radius:99px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fn-scananim .fn-copen-bar{ margin-top:22px }
/* result — a premium "analysis report" */
.fn-scanstep .fn-eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fn-ink3); margin:22px 4px 11px }
.fn-scanhero{ position:relative; overflow:hidden; border-radius:24px; padding:20px 18px; margin-top:2px;
  background:radial-gradient(120% 90% at 15% 0%, #EAF2EB 0%, #DDECDF 55%, #D2E6D6 100%);
  box-shadow:0 1px 2px rgba(40,70,45,.05), 0 14px 34px rgba(40,70,45,.13) }
.fn-scanhero::after{ content:""; position:absolute; top:-40px; right:-30px; width:150px; height:150px;
  border-radius:99px; background:radial-gradient(closest-side, rgba(255,255,255,.5), transparent) }
.fn-prodchip{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px; max-width:100%;
  background:rgba(255,255,255,.72); padding:6px 13px 6px 6px; border-radius:99px }
.fn-prodtile{ width:34px; height:34px; border-radius:9px; flex:none; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(40,70,45,.14) }
.fn-prodtile img{ max-width:86%; max-height:86%; object-fit:contain; mix-blend-mode:multiply }
.fn-prodchip b{ font-size:13px; font-weight:800; color:#2F5A40; white-space:nowrap }
.fn-prodchip span{ font-size:11.5px; color:#5f7a66; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fn-herorow{ position:relative; z-index:1; display:flex; align-items:center; gap:16px; margin-top:16px }
.fn-heroring{ position:relative; width:116px; height:116px; flex:none }
.fn-heroring svg{ width:100%; height:100%; display:block }
.fn-hr-bg{ fill:none; stroke:rgba(63,112,82,.16); stroke-width:10 }
.fn-hr-fg{ fill:none; stroke:url(#fn-scangrad); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset 1.15s cubic-bezier(.3,.7,.3,1) }
.fn-herocen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1 }
.fn-herocen b{ font-size:37px; font-weight:800; color:#2F5A40; letter-spacing:-.03em }
.fn-herocen span{ font-size:10px; font-weight:800; letter-spacing:.16em; color:#6a8571; margin-top:3px }
.fn-herotx{ flex:1; min-width:0 }
.fn-herotag{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--fn-sage); padding:5px 11px; border-radius:99px }
.fn-herottl{ font-family:inherit; font-size:23px; font-weight:800; letter-spacing:-.02em; line-height:1.1;
  color:var(--fn-ink); margin:9px 0 0 }
.fn-herosub{ font-size:13px; color:#5f7a66; margin:6px 0 0; line-height:1.4; font-weight:500 }
.fn-scanread{ display:flex; gap:11px; align-items:flex-start; padding:15px 16px; margin-top:2px;
  background:var(--fn-card); border:1px solid var(--fn-line); border-radius:18px; box-shadow:var(--fn-shadow) }
.fn-readmasc{ width:40px; height:40px; flex:none; border-radius:99px; padding:3px; object-fit:contain; background:var(--fn-terra-soft) }
.fn-scanread p{ margin:0; font-size:14.5px; line-height:1.52; color:var(--fn-ink) }
.fn-scanflags{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
.fn-flag{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:#2F5A40;
  background:var(--fn-sage-soft); padding:11px 13px; border-radius:13px }
.fn-flag .fn-svgi{ width:16px; height:16px; flex:none }
.fn-scantraits{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.fn-trait{ font-size:12.5px; font-weight:700; color:#9A6A2E; background:#F6EAD4; padding:8px 13px; border-radius:99px }
.fn-inghint{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fn-ink2); font-weight:600; margin:-2px 2px 11px }
.fn-inghint .fn-svgi{ width:16px; height:16px; color:var(--fn-terra); flex:none }
.fn-ings{ display:flex; flex-wrap:wrap; gap:8px }
.fn-ing{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13.5px; font-weight:700;
  color:#2F5A40; background:var(--fn-sage-soft); border:none; padding:9px 14px 9px 12px; border-radius:99px;
  cursor:pointer; transition:transform .07s }
.fn-ing:active{ transform:scale(.95) }
.fn-ingq{ width:16px; height:16px; border-radius:99px; background:rgba(63,112,82,.16); display:flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#2F5A40 }
.fn-ingmore{ color:var(--fn-ink2); background:#F4ECE3; cursor:default }
.fn-scanunlock{ display:flex; align-items:center; gap:13px; margin:22px 0 6px; padding:15px 16px; border-radius:18px;
  background:linear-gradient(180deg,#FDEFE7,#F9E3D7); border:1px solid #F0CDBB }
.fn-unlockic{ width:38px; height:38px; border-radius:11px; flex:none; background:#fff; display:flex;
  align-items:center; justify-content:center; color:var(--fn-terra); box-shadow:0 2px 6px rgba(160,70,40,.14) }
.fn-unlockic .fn-svgi{ width:19px; height:19px }
.fn-scanunlock b{ font-size:14px; font-weight:800; color:var(--fn-terra-deep) }
.fn-scanunlock > div > span{ font-size:12.5px; color:#8a5442; line-height:1.4 }
.fn-scanunlock > div > span b{ color:var(--fn-terra-deep) }
/* ingredient explain sheet (mirrors the in-app scanner) */
.fn-ingscrim{ position:fixed; inset:0; background:rgba(40,25,15,.42); opacity:0; pointer-events:none;
  transition:opacity .25s; z-index:60 }
.fn-ingscrim.on{ opacity:1; pointer-events:auto }
.fn-ingsheet{ position:fixed; left:50%; bottom:0; width:100%; max-width:520px; transform:translate(-50%,102%);
  display:none; /* bulletproof: a display:none element cannot leak OR extend scroll under an animated ancestor / mobile URL bar. JS toggles display so the slide still plays */
  background:var(--fn-card); border-radius:26px 26px 0 0; padding:10px 22px calc(26px + env(safe-area-inset-bottom));
  transition:transform .34s cubic-bezier(.2,.7,.2,1); z-index:61; box-shadow:0 -10px 40px rgba(80,50,20,.18) }
.fn-ingsheet.on{ transform:translate(-50%,0) }
.fn-inggrab{ width:42px; height:5px; border-radius:99px; background:var(--fn-line2); margin:0 auto 14px }
.fn-ingsheet h3{ font-size:23px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--fn-ink) }
.fn-s_cat{ display:inline-block; margin-top:9px; font-size:12px; font-weight:800; color:#9A6A2E;
  background:#F6EAD4; padding:6px 12px; border-radius:99px }
.fn-s_lab{ font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--fn-ink3); margin:20px 0 7px }
.fn-s_txt{ font-size:15px; line-height:1.55; color:var(--fn-ink) }
.fn-s_means{ display:flex; gap:11px; align-items:flex-start; background:var(--fn-sage-soft); border-radius:16px; padding:14px 15px; margin-top:8px }
.fn-s_leaf{ flex:none; color:var(--fn-sage); display:flex; margin-top:1px }
.fn-s_leaf svg{ width:20px; height:20px }
.fn-s_means p{ margin:0; font-size:14.5px; line-height:1.5; color:#2F5A40; font-weight:600 }
.fn-s_done{ width:100%; margin-top:22px; border:none; border-radius:14px; background:#F4ECE3; color:var(--fn-ink);
  font:inherit; font-size:15px; font-weight:800; padding:14px; cursor:pointer }
@media (prefers-reduced-motion:reduce){ .fn-scanphase,.fn-hr-fg,.fn-ingsheet{ transition:none } }
/* Make the just-demoed "Unlimited scans" benefit pop in the paywall list */
.pw-feat b{ color:var(--fn-terra); font-weight:800 }

/* -------------------------------------------------------------------- *
 * Feature showcase (post-welcome, pre-quiz) — swipeable phone mockups   *
 * -------------------------------------------------------------------- */
.ft-step{ display:flex; flex-direction:column; flex:1; min-height:0; padding:16px 0 calc(12px + env(safe-area-inset-bottom)) }
.ft-head{ flex:none; padding:0 22px 6px; text-align:center }
.ft-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fn-terra); margin-bottom:8px }
.ft-title{ font-size:clamp(20px,5.4vw,25px); font-weight:800; line-height:1.14; letter-spacing:-.02em; color:var(--fn-ink); margin:0 }
.ft-track{ flex:1; min-height:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.ft-track::-webkit-scrollbar{ display:none }
.ft-slide{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; display:flex; flex-direction:column; align-items:center; min-width:0; padding:8px 20px 0 }
.ft-phone{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; width:100% }
.ft-phone img{ max-height:100%; max-width:74%; width:auto; height:auto; object-fit:contain; cursor:zoom-in; filter:drop-shadow(0 14px 30px rgba(40,25,15,.20)) }
.ft-cap{ flex:none; text-align:center; padding:12px 6px 2px; max-width:34ch }
.ft-ct{ font-size:19px; font-weight:800; color:var(--fn-ink); letter-spacing:-.01em }
.ft-cd{ font-size:13.5px; line-height:1.45; color:var(--fn-ink2); margin-top:4px }
.ft-dots{ flex:none; display:flex; gap:7px; justify-content:center; padding:12px 0 2px }
.ft-dot{ width:7px; height:7px; border-radius:99px; background:var(--fn-line2); cursor:pointer; transition:background .2s, width .2s }
.ft-dot.on{ width:20px; background:var(--fn-terra) }
.ft-foot{ flex:none; padding:10px 22px 0 }
.ft-micro{ text-align:center; font-size:12.5px; color:var(--fn-ink3); margin:9px 0 0 }
.ft-micro .sp-d{ margin:0 3px }
/* Tap a mockup → fullscreen swipeable lightbox (appended to body) */
.ft-lb{ position:fixed; inset:0; z-index:2147483647; background:rgba(22,14,9,.93); display:flex; flex-direction:column; animation:ft-lb-in .18s ease }
@keyframes ft-lb-in{ from{ opacity:0 } to{ opacity:1 } }
.ft-lb-x{ position:absolute; top:calc(10px + env(safe-area-inset-top)); right:14px; z-index:3; width:42px; height:42px; border:none; border-radius:99px; background:rgba(255,255,255,.15); color:#fff; font-size:26px; line-height:40px; cursor:pointer }
.ft-lb-x:active{ background:rgba(255,255,255,.28) }
.ft-lb-track{ flex:1; min-height:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.ft-lb-track::-webkit-scrollbar{ display:none }
.ft-lb-slide{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; display:flex; align-items:center; justify-content:center; padding:58px 16px calc(46px + env(safe-area-inset-bottom)) }
.ft-lb-slide img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 18px 44px rgba(0,0,0,.55)); -webkit-user-select:none; user-select:none }
.ft-lb-dots{ position:absolute; left:0; right:0; bottom:calc(16px + env(safe-area-inset-bottom)); display:flex; gap:7px; justify-content:center; z-index:2 }
.ft-lb-dots .ft-dot{ background:rgba(255,255,255,.42) }
.ft-lb-dots .ft-dot.on{ background:#fff }

/* ── Reassurance interstitial ────────────────────────────────────────────
   Fires between question GROUPS. The whole screen exists to land one number,
   so the number is the only thing sized to be seen from across the room and
   everything else is deliberately quiet. Centred here (unlike the splash
   checklist) because there is one focal point, not a column to scan.

   The terra number on cream is the single loud moment; the eyebrow and the
   footnote are ink3 and small on purpose. Resist adding a second bold thing. */
.fn-rstep{ display:flex; align-items:center; justify-content:center;
  padding:8px 22px 0 }
/* ⚠️ This block is named fn-rstep, NOT fn-reassure, and must stay that way.
   `.fn-reassure` is ALREADY TAKEN (line ~440) by an unrelated sage-checkmark
   list, and its `.fn-reassure div` rule (0,1,1) silently beat every single
   class here: the mascot, number, line and footnote were laid out in a row with
   the mascot pushed off-screen. Check `grep -n "\.fn-x"` before claiming a class
   name in this file. */
.fn-rstep .rs-wrap{ display:block; width:100%; max-width:340px;
  text-align:center; animation:rs-in .5s cubic-bezier(.2,.8,.25,1) both }
@keyframes rs-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.rs-mascot{ margin:0 0 14px }
.rs-m{ width:104px; height:104px; object-fit:contain; display:inline-block }

.rs-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fn-ink3); margin:0 0 12px }

/* The hero. clamp() keeps 2,803 and 98% both huge without overflowing a 320px
   screen. Tight tracking so a 4-glyph number still reads as one object. */
.rs-figure{ display:flex; flex-direction:column; align-items:center; gap:2px;
  margin:0 0 14px }
.rs-big{ font-size:clamp(52px,17vw,72px); font-weight:800; line-height:.98;
  letter-spacing:-.05em; color:var(--fn-terra); font-variant-numeric:tabular-nums }
.rs-bigsub{ font-size:14.5px; font-weight:700; line-height:1.3;
  letter-spacing:-.014em; color:var(--fn-ink); max-width:250px }

.rs-line{ font-size:15px; font-weight:500; line-height:1.5; color:var(--fn-ink2);
  margin:0 0 16px }

/* The footnote is credibility, not fine print: it shows our working, which is
   why it gets a rule above it rather than being hidden at the bottom. */
.rs-foot{ font-size:11.5px; font-weight:600; line-height:1.4; color:var(--fn-ink3);
  margin:0; padding:11px 0 0; border-top:1px solid var(--fn-line) }

/* ── Bloom / done: the handoff ───────────────────────────────────────────
   Namespaced fn-bloomdone + bl-* — both verified unused before claiming them
   (see the fn-rstep note above for why that check is not optional here).

   She just finished. The screen has to feel like an arrival, and it has to
   prove her answers were saved, or the download never happens. */
.fn-bloomdone{ position:relative; display:flex; align-items:center;
  justify-content:center; padding:6px 22px 0; overflow:hidden }
.fn-bloomdone .bl-wrap{ display:block; width:100%; max-width:360px;
  text-align:center; position:relative; z-index:2 }

/* Confetti. Pure CSS, 12 pieces on staggered falls so it reads as a burst
   rather than a loop. Fires once, then it is gone: a celebration that keeps
   going stops being one. */
.bl-burst{ position:absolute; inset:0 0 auto; height:280px; pointer-events:none; z-index:1 }
.bl-burst i{ position:absolute; top:-14px; width:8px; height:12px; border-radius:2px;
  opacity:0; animation:bl-fall 2.4s cubic-bezier(.25,.6,.35,1) forwards }
.bl-burst i:nth-child(1){ left:8%;  background:var(--fn-terra);   animation-delay:.05s }
.bl-burst i:nth-child(2){ left:18%; background:var(--fn-sage);    animation-delay:.32s }
.bl-burst i:nth-child(3){ left:27%; background:var(--fn-plum);    animation-delay:.14s }
.bl-burst i:nth-child(4){ left:36%; background:var(--fn-terra);   animation-delay:.5s }
.bl-burst i:nth-child(5){ left:45%; background:var(--fn-sage);    animation-delay:.22s }
.bl-burst i:nth-child(6){ left:54%; background:var(--fn-terra-deep); animation-delay:.62s }
.bl-burst i:nth-child(7){ left:63%; background:var(--fn-plum);    animation-delay:.1s }
.bl-burst i:nth-child(8){ left:72%; background:var(--fn-terra);   animation-delay:.44s }
.bl-burst i:nth-child(9){ left:81%; background:var(--fn-sage);    animation-delay:.26s }
.bl-burst i:nth-child(10){ left:90%; background:var(--fn-terra);  animation-delay:.56s }
.bl-burst i:nth-child(11){ left:13%; background:var(--fn-terra-deep); animation-delay:.7s }
.bl-burst i:nth-child(12){ left:68%; background:var(--fn-sage);   animation-delay:.38s }
@keyframes bl-fall{
  0%{ opacity:0; transform:translateY(0) rotate(0deg) }
  10%{ opacity:1 }
  100%{ opacity:0; transform:translateY(300px) rotate(420deg) }
}
@media (prefers-reduced-motion: reduce){ .bl-burst{ display:none } }

.fn-bloomdone .bl-mascot{ display:block; margin:0 0 10px }
.bl-m{ width:96px; height:96px; object-fit:contain; display:inline-block }

/* "Your account is ready" is the promise; the headline is the feeling. Sage,
   not terra: this is reassurance, not urgency. */
.fn-bloomdone .bl-eyebrow{ display:block; font-size:11px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--fn-sage); margin:0 0 8px }
.bl-h{ font-size:clamp(28px,8.4vw,36px); font-weight:800; line-height:1.05;
  letter-spacing:-.036em; color:var(--fn-ink); margin:0 0 14px }

.fn-bloomdone .bl-crown{ display:inline-flex; align-items:center; gap:7px;
  background:var(--fn-terra-soft); border:1px solid rgba(194,87,59,.18);
  border-radius:99px; padding:7px 13px; margin:0 0 14px;
  font-size:12.5px; font-weight:800; color:var(--fn-terra-deep) }
.fn-bloomdone .bl-crown .fn-clay{ width:17px; height:17px }

/* The receipt. This card is the answer to "did I do all that for nothing?" —
   her own answers, ticked. Left aligned because it is a list to read down. */
.fn-bloomdone .bl-card{ display:block; background:var(--fn-card);
  border:1px solid var(--fn-line); border-radius:var(--fn-radius);
  padding:14px 15px; margin:0 0 16px; box-shadow:var(--fn-shadow); text-align:left }
.fn-bloomdone .bl-cardhead{ font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fn-ink3); margin:0 0 10px }
.bl-list{ list-style:none; margin:0; padding:0 }
.bl-list li{ display:flex; align-items:center; gap:8px; padding:7px 0;
  border-top:1px solid var(--fn-line); font-size:13.5px }
.bl-list li:first-child{ border-top:0; padding-top:0 }
.bl-tick{ flex:none; width:17px; height:17px; border-radius:99px;
  background:var(--fn-sage); color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center }
.bl-k{ font-weight:600; color:var(--fn-ink2) }
.bl-v{ margin-left:auto; font-weight:800; color:var(--fn-ink); text-align:right;
  letter-spacing:-.012em }

/* The fear-killer. Her literal email, so there is no "which account?" doubt. */
.fn-bloomdone .bl-next{ display:block; margin:0 0 16px }
.bl-nextt{ font-size:14px; font-weight:600; color:var(--fn-ink2); margin:0 0 7px }
.fn-bloomdone .bl-email{ display:inline-block; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
  background:var(--fn-soft); border:1px dashed var(--fn-line2); border-radius:10px;
  padding:8px 13px; font-size:14px; font-weight:800; color:var(--fn-ink);
  letter-spacing:-.01em }
.bl-nono{ font-size:12.5px; font-weight:500; line-height:1.45; color:var(--fn-ink3);
  margin:9px 0 0 }
.bl-nono b{ color:var(--fn-sage); font-weight:800 }

/* Apple sign-in: the chip holds a BUTTON NAME, not an address. Solid + inked
   rather than the dashed "here is your typed email" treatment, so it reads as
   "tap this" instead of "remember this". Hide My Email means we never print a
   relay address she would not recognise. */
.fn-bloomdone .bl-email.bl-appl{ background:var(--fn-ink); border:1px solid var(--fn-ink);
  border-style:solid; color:#fff }

/* ── Lifetime scarcity line ──────────────────────────────────────────────
   Namespaced fn-lifescar / lsc-* (verified unused before claiming them).
   Identical in all three paywall variants: it is the constant the A/B/C test
   runs AGAINST, so if it varied the experiment would measure it, not the layouts.

   ⚠️ THIS IS DELIBERATELY SMALL AND QUIET, and that is the whole design.
   The first version was a full-bleed terra block with a huge headline and a fat
   progress bar. It read as FAKE: that is the exact visual language of every
   bogus countdown on the internet, and people are trained to disbelieve it on
   sight. Restraint is what makes a scarcity claim land. A tight, plain,
   product-coloured line reads as a status the app is reporting; a billboard
   reads as a thing the marketing team wants. Do not make this louder. If it
   needs more weight, make the WORDS better, not the box bigger. */
.fn-lifescar{ margin:0 0 14px; background:var(--fn-card);
  border:1px solid var(--fn-line); border-radius:14px; box-shadow:var(--fn-shadow) }
.fn-lifescar .lsc-in{ display:block; padding:10px 12px; text-align:left }

.fn-lifescar .lsc-row{ display:flex; align-items:center; gap:7px }
.lsc-fl{ width:15px; height:15px; flex:none }
.lsc-lbl{ font-size:12px; font-weight:800; color:var(--fn-ink); letter-spacing:-.012em;
  white-space:nowrap }
/* The bar earns its place only by being small: it sits INLINE, filling the
   leftover width, so it reads as a gauge rather than a hero element. */
.fn-lifescar .lsc-bar{ flex:1 1 auto; min-width:34px; height:4px; border-radius:99px;
  background:var(--fn-line2); overflow:hidden }
.fn-lifescar .lsc-bar > span{ display:block; height:100%; border-radius:99px;
  background:var(--fn-terra) }

.lsc-note{ font-size:11.5px; font-weight:500; line-height:1.4; color:var(--fn-ink3);
  margin:5px 0 0 }
.lsc-note b{ color:var(--fn-ink2); font-weight:700 }

/* ── Variant D · the single lifetime paywall ─────────────────────────────
   Namespaced fn-lifed / lif-* — BOTH VERIFIED UNUSED before claiming them.
   (.fn-pwd* was rejected: .fn-pwdot / .fn-pwdots already exist and the near-miss
   is a trap. See the fn-rstep note for what a class collision costs here.)

   Every rule is scoped `.fn-lifed .x`, not `.x`. That is not style, it is
   survival: this file has generic descendant rules like `.fn-reassure div` that
   silently beat single-class selectors and re-flow whole blocks into rows.

   Ported faithfully from the approved mockup (~/Desktop/Shea_Paywall_Lifetime_D.html). */

/* Hero — warm wash so the page OPENS instead of starting flat on cream. */
.fn-lifed .lif-hero{ display:block; text-align:center; padding:22px 4px 20px;
  background:radial-gradient(120% 90% at 50% -10%, var(--fn-terra-soft) 0%, rgba(246,228,218,0) 62%) }
.lif-m{ width:104px; height:104px; object-fit:contain; margin:0 auto 10px; display:block }
.fn-lifed .lif-eyebrow{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fn-terra-deep);
  background:rgba(255,255,255,.7); border:1px solid rgba(194,87,59,.2);
  padding:5px 11px; border-radius:99px; margin:0 0 11px }
.lif-h{ font-size:clamp(29px,8.8vw,35px); font-weight:800; line-height:1.02;
  letter-spacing:-.042em; color:var(--fn-ink); margin:0 }
.lif-h em{ font-style:normal; color:var(--fn-terra) }
.lif-sub{ font-size:15px; font-weight:500; line-height:1.5; color:var(--fn-ink2);
  margin:11px auto 0; max-width:290px }

/* The math. NOT 50/50 on purpose: the hierarchy argues so nothing has to shout. */
.fn-lifed .lif-math{ display:grid; grid-template-columns:.85fr 1.15fr; gap:10px;
  align-items:center; margin:20px 0 0 }
.fn-lifed .lif-mc{ display:block; border-radius:18px; padding:15px 12px; text-align:center;
  position:relative }
.fn-lifed .lif-mc.bad{ background:var(--fn-card); border:1px solid var(--fn-line) }
.fn-lifed .lif-mc.good{ background:linear-gradient(165deg,var(--fn-terra),var(--fn-terra-deep));
  padding:19px 12px; box-shadow:0 16px 34px rgba(168,68,44,.32) }
.fn-lifed .lif-mlbl{ font-size:10px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; margin:0 0 8px }
.fn-lifed .lif-mc.bad .lif-mlbl{ color:var(--fn-ink3) }
.fn-lifed .lif-mc.good .lif-mlbl{ color:#FFD9C9 }
.fn-lifed .lif-mbig{ font-weight:800; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums }
.fn-lifed .lif-mc.bad .lif-mbig{ font-size:23px; color:var(--fn-ink3) }
.fn-lifed .lif-mc.bad .lif-mbig s{ text-decoration-thickness:2px;
  text-decoration-color:rgba(156,139,123,.7) }
.fn-lifed .lif-mc.good .lif-mbig{ font-size:36px; color:#fff }
.fn-lifed .lif-mnote{ font-size:11.5px; font-weight:600; line-height:1.35; margin:7px 0 0 }
.fn-lifed .lif-mc.bad .lif-mnote{ color:var(--fn-ink3) }
.fn-lifed .lif-mc.good .lif-mnote{ color:#FFE3D8 }
.lif-mtag{ position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--fn-sage); color:#fff; font-size:9px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; padding:4px 10px; border-radius:99px; white-space:nowrap;
  box-shadow:0 4px 10px rgba(63,112,82,.3) }

/* The close. Arithmetic, not a pitch: reframes $19.99 as a stopping point. */
.fn-lifed .lif-payback{ display:flex; align-items:center; justify-content:center; gap:7px;
  margin:12px 0 0; font-size:12.5px; font-weight:700; color:var(--fn-sage); text-align:center }
.lif-pk{ flex:none; font-weight:800 }
.fn-lifed .lif-payback b{ color:var(--fn-ink); font-weight:800 }

/* What she gets. */
.fn-lifed .lif-sect{ display:block; margin:24px 0 0 }
.fn-lifed .lif-sh{ font-size:10.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fn-ink3); margin:0 0 11px; text-align:left }
.fn-lifed .lif-gets{ display:block; background:var(--fn-card); border:1px solid var(--fn-line);
  border-radius:20px; padding:4px 15px; box-shadow:var(--fn-shadow) }
.fn-lifed .lif-g{ display:flex; align-items:flex-start; gap:11px; padding:12px 0;
  border-top:1px solid var(--fn-line); text-align:left }
.fn-lifed .lif-g:first-child{ border-top:0 }
.lif-tick{ flex:none; width:20px; height:20px; border-radius:99px; background:var(--fn-sage-soft);
  color:var(--fn-sage); font-size:11px; font-weight:800; display:flex; align-items:center;
  justify-content:center; margin-top:2px }
.fn-lifed .lif-g.star .lif-tick{ background:#FBEFD6; color:#B07B3E }
.lif-gt{ font-size:14.5px; font-weight:800; color:var(--fn-ink); letter-spacing:-.016em;
  line-height:1.25 }
.lif-gd{ font-size:12px; font-weight:500; color:var(--fn-ink3); line-height:1.4; margin:3px 0 0 }

/* Why it exists — a signed note from Lilie, not a marketing panel. Her hair type
   IS the trust: the woman who made this has the same hair as the one reading. */
.fn-lifed .lif-why{ display:block; margin:24px 0 0; background:var(--fn-sage-soft);
  border:1px solid rgba(63,112,82,.16); border-radius:20px; padding:17px 16px; text-align:left }
.fn-lifed .lif-whyh{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800;
  color:var(--fn-sage); letter-spacing:-.022em; margin:0 0 8px }
.lif-wi{ width:18px; height:18px; flex:none }
.lif-whyp{ font-size:13px; font-weight:500; line-height:1.6; color:var(--fn-ink2); margin:0 }
.lif-whyp b{ color:var(--fn-ink); font-weight:800 }
.fn-lifed .lif-sig{ display:flex; align-items:center; gap:8px; margin:12px 0 0; padding:11px 0 0;
  border-top:1px solid rgba(63,112,82,.16) }
.lif-sigav{ width:28px; height:28px; border-radius:99px; flex:none;
  background:linear-gradient(140deg,#6E4A6B,#A87CA0) }
.lif-signm{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800;
  color:var(--fn-ink) }
.lif-sigtag{ background:var(--fn-sage); color:#fff; font-size:8.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:99px }
.lif-sigrl{ font-size:10.5px; font-weight:600; color:var(--fn-ink3); margin:1px 0 0 }

/* The "or" between the two price cards. A 3-col grid (card · or · card) rather
   than an absolutely-positioned overlay, so the cards stay in flow and nothing
   collides at 320px. Deliberately quiet: it is a hinge, not a headline. */
.fn-lifed .lif-math.has-or{ grid-template-columns:1fr auto 1.15fr; gap:8px }
.lif-or{ align-self:center; font-size:12px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fn-ink3); padding:0 1px }