/* Public pages: same palette and type as the app, but a long-form page. */
/* Tokens copied from app.css so the sales pages and the app read as one product. */
:root{--ink:#1C1A17;--mut:#6B6459;--line:#E3DED3;--bg:#F7F5F0;--card:#fff;--tint:#F0EBE0;--acc:#9A4A2F;--acc-dark:#7C3A24;
  --acc-soft:#F6E8E1;--acc-lift:#D98A63;--ok:#2F5D50;--ok-soft:#E3EDE8;--warn:#8A6A1F;--warn-soft:#F6EED8;
  --bad:#8C2F2F;--bad-soft:#F6E3E3;--side:#1C1A17;--side-2:#2E2A25;--side-txt:#B8AFA2;
  --serif:"Fraunces",Georgia,serif;--sans:"Karla",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.sales{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0 0 12px;line-height:1.15}
h1{font-size:44px}h2{font-size:30px}h3{font-size:21px}
p{margin:0 0 14px}
a{color:var(--acc)}
.s-wrap{max-width:860px;margin:0 auto;padding:0 20px}
.s-wrap.narrow{max-width:720px}

.s-top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--side);color:#F7F5F0}
.s-brand{display:flex;align-items:center;gap:10px;color:#F7F5F0;text-decoration:none;font-family:var(--serif);font-size:20px;font-weight:600}
.s-brand .mark{width:32px;height:32px;border-radius:9px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:16px}
.s-top nav{display:flex;gap:18px;align-items:center}
.s-top nav a{color:#D9D3C8;text-decoration:none;font-size:14.5px;font-weight:500}
.s-top nav a.s-login{border:1px solid #4a453e;border-radius:8px;padding:7px 12px;color:#F7F5F0}

.s-hero{padding:56px 0 40px;text-align:center}
.s-kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);
  background:var(--acc-soft);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.s-sub{font-size:20px;color:var(--mut);max-width:720px;margin:0 auto 24px}
.s-video{aspect-ratio:16/9;background:#2b2824;border-radius:16px;display:flex;align-items:center;justify-content:center;
  color:#B9B2A6;font-size:15px;margin:28px auto;max-width:860px}
.s-section{padding:40px 0;border-top:1px solid var(--line)}
.s-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.s-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.s-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-check{list-style:none;padding:0;margin:0}
.s-check li{padding:8px 0 8px 30px;position:relative;border-bottom:1px solid var(--line)}
.s-check li:last-child{border-bottom:0}
.s-check li::before{content:"\2713";position:absolute;left:4px;top:8px;color:var(--ok);font-weight:700}
.s-price{text-align:center;padding:36px 24px;background:var(--card);border:2px solid var(--acc);border-radius:18px}
.s-price .was{color:var(--mut);text-decoration:line-through;font-size:20px}
.s-price .now{font-family:var(--serif);font-size:58px;font-weight:700;line-height:1;margin:6px 0 10px}
.s-price .note{color:var(--mut);font-size:14.5px}
.s-buy{margin:18px auto 8px;display:flex;justify-content:center}
.s-buy-placeholder{border:2px dashed var(--warn);background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:16px 22px;
  font-size:15px;text-align:center;max-width:440px}
.s-buy-placeholder span{font-size:13px;display:block;margin-top:4px}
.s-nothanks{text-align:center;margin-top:18px}
.s-nothanks a{color:var(--mut);font-size:14.5px}
.s-guarantee{display:flex;gap:18px;align-items:center;background:var(--ok-soft);border-radius:16px;padding:22px}
.s-guarantee .badge{width:72px;height:72px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-weight:700;font-size:15px;text-align:center;line-height:1.1;flex-shrink:0}
.s-faq details{border-bottom:1px solid var(--line);padding:12px 0}
.s-faq summary{cursor:pointer;font-weight:600}
.s-todo{border:1.5px dashed #C9C2B6;color:var(--mut);border-radius:12px;padding:16px 18px;font-size:15px;margin:10px 0 18px;background:#fbfaf7}
.s-oto-bar{background:var(--warn);color:#fff;text-align:center;padding:12px 16px;font-weight:700;letter-spacing:.02em}
.s-steps{counter-reset:s;display:grid;gap:14px}
.s-steps div{position:relative;padding-left:52px}
.s-steps div::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
table.s-table{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.s-table th,.s-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.s-table th{background:#F1EDE5;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.s-btn{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:12px;font-size:17px}
.s-btn:hover{background:var(--acc-dark)}
.s-btn.gho{background:transparent;color:var(--ink);border:1px solid var(--line)}
.s-legal h2{font-size:22px;margin-top:28px}
.s-foot{margin-top:60px;font-family:var(--serif);text-align:center;color:#5E574C}
.s-foot a{color:#3E5468;text-decoration:underline;text-decoration-color:rgba(62,84,104,.35);text-underline-offset:3px}
.s-foot a:hover{text-decoration-color:currentColor}
.s-foot-top{background:#F1ECDF;padding:44px 0 38px;font-size:16px}
.s-foot-top p{margin:0 0 12px}
.s-foot-top .wplus_spdisclaimer{max-width:900px;margin:0 auto 22px;font-style:italic;font-size:15px;line-height:1.6;color:#5E574C}
.s-foot-top .wplus_spdisclaimer b,.s-foot-top .wplus_spdisclaimer strong{font-style:normal;font-weight:600;color:#3D3830}
.s-foot-bar{background:#DED5C2;padding:26px 0 30px}
.s-foot .s-wrap{max-width:1000px}
.s-legal-links{font-size:17px;margin:0 0 10px}
.s-fine{font-size:12.5px;line-height:1.6;max-width:760px}
.s-foot .s-fine{margin:0 auto;color:#6F675B;font-family:var(--sans)}
/* Real pages from the sample product, in place of a video until one is recorded. */
.s-strip{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin:8px 0 26px}
.s-strip img,.s-card img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff}
.s-cap{font-size:14px;color:var(--mut);margin:10px 0 0}
.s-card h3{margin-top:0}
.s-card ul{margin:8px 0 0;padding-left:20px}
@media (max-width:760px){
  h1{font-size:32px}h2{font-size:24px}
  .s-grid,.s-grid.two{grid-template-columns:minmax(0,1fr)}
  .s-top{padding:12px 16px}.s-top nav{gap:12px}.s-top nav a{font-size:13.5px}
  .s-hero{padding:36px 0 28px}
  .s-guarantee{flex-direction:column;text-align:center}
  .s-price .now{font-size:44px}
  table.s-table{display:block;overflow-x:auto}
}

/* ── Front-end sales page (home.php). Prefixed fe- so the OTO and legal pages are untouched.
   Identity, taken from the product itself: the app's Fraunces with italic terracotta accents,
   dot-grid "planner paper" on the dark sections, the workbook's dotted tracing line as the
   underline and connector, pages that sit in small paper stacks, and notes pinned slightly askew.
   Motion: off under prefers-reduced-motion; reveals hide content only once fe.js has put .js
   on <html>, so a page without JS shows everything. ── */
.fe{--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--dk:#1C1A17;--dk2:#25221E;--dk3:#2E2A25;--cream:#F6F1E4;--hl:#D98A63;
  --paper:#FFFDF8;--rad:18px}
.fe h1,.fe h2,.fe h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}
.fe h1 em,.fe h2 em{font-style:italic;font-weight:500;color:var(--hl)}
.fe-cream h2 em{color:var(--acc)}
.fe-wide{max-width:1140px;margin:0 auto;padding:0 20px}

/* labels: a filled tab with a dot, not an outlined box */
.fe-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-soft);padding:7px 14px 7px 12px;border-radius:999px;margin-bottom:20px}
.fe-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fe-dark .fe-pill{color:var(--hl);background:rgba(217,138,99,.14)}

/* sections */
.fe-dark{position:relative;background-color:var(--dk);color:#EDE7DC;
  background-image:radial-gradient(rgba(246,241,228,.075) 1.1px,transparent 1.5px);background-size:24px 24px}
.fe-dark h2,.fe-dark h3{color:#F6F1E4}
.fe-dark p{color:#C9C0B2}
.fe-cream{background:var(--cream);color:var(--ink)}
.fe-cream.alt{background:var(--bg)}
.fe-sec{padding:100px 0;overflow:hidden}
.fe-head{text-align:center;max-width:800px;margin:0 auto 54px}
.fe-head h2{font-size:50px;line-height:1.08;margin-bottom:16px}
.fe-head p{font-size:18.5px;margin:0;color:var(--mut)}
.fe-dark .fe-head p{color:#C9C0B2}
.fe-dark .fe-head p strong{color:#F6F1E4}

/* launch bar + floating header */
.fe-bar{background:var(--acc);color:#fff;text-align:center;font-size:13.5px;padding:8px 16px;font-weight:600}
.fe-bar .fe-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:8px;vertical-align:1px;animation:fe-pulse 1.8s ease-out infinite}
.fe-top{position:sticky;top:12px;z-index:40;margin:12px auto 0;max-width:1100px;padding:0 14px}
.fe-top .in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 10px 9px 16px;border-radius:999px;
  background:rgba(28,26,23,.86);backdrop-filter:blur(12px);border:1px solid rgba(246,241,228,.1);box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
.fe-brand{display:flex;align-items:center;gap:10px;color:#F6F1E4;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:20px}
.fe-brand .mark{width:30px;height:30px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:14px}
.fe-top nav{display:flex;align-items:center;gap:16px}
.fe-top nav a.lnk{color:#C9C0B2;text-decoration:none;font-size:14.5px;font-weight:600}
.fe-top nav a.lnk:hover{color:#fff}

/* buttons */
.fe-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--hl);color:var(--dk);
  text-decoration:none;font-weight:700;font-size:17px;padding:16px 28px;border-radius:14px;
  box-shadow:0 4px 0 #A9603F,0 18px 30px -14px rgba(217,138,99,.7);transition:transform .15s,box-shadow .15s,background .2s}
.fe-cta:hover{background:#E59C77;color:var(--dk);transform:translateY(-2px);box-shadow:0 6px 0 #A9603F,0 22px 34px -14px rgba(217,138,99,.8)}
.fe-cta:active{transform:translateY(3px);box-shadow:0 1px 0 #A9603F}
.fe-cta.sm{padding:9px 16px;font-size:14px;border-radius:999px;box-shadow:none;white-space:nowrap}
.fe-cream .fe-cta{background:var(--acc);color:#fff;box-shadow:0 4px 0 #6E3420,0 18px 30px -14px rgba(154,74,47,.7)}
.fe-cream .fe-cta:hover{background:var(--acc-dark);color:#fff}
.fe-cta::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:fe-shine 4s 1.5s ease-in-out infinite}
.fe-cta.sm::after{display:none}
.fe-cta .arr{transition:transform .2s}
.fe-cta:hover .arr{transform:translateX(3px)}

.fe-hero{padding:64px 0 96px;text-align:center}
.fe-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(217,138,99,.16),transparent 70%)}
.fe-hero .fe-wide{position:relative}
.fe-hero h1{font-size:72px;line-height:1.04;color:#F6F1E4;margin:0 auto 26px;max-width:980px}
.fe-hero h1 em{display:inline-block;position:relative;padding-bottom:8px}
.fe-hero h1 em::after{content:"";position:absolute;left:2%;right:2%;bottom:0;height:5px;color:var(--hl);
  background-image:radial-gradient(circle,currentColor 2px,transparent 2.6px);background-size:12px 5px;background-repeat:repeat-x;
  clip-path:inset(0 100% 0 0);animation:fe-trace 1.4s .8s steps(28) forwards}
.fe-sub{max-width:760px;margin:0 auto 40px}
.fe-sub p{margin:0;font-size:19px;color:#D9D1C4}
.fe-sub b{color:#F6F1E4;font-weight:700}
.fe-sub u{text-decoration:none;color:var(--hl);font-weight:700}
.fe-enter > *{animation:fe-up .8s cubic-bezier(.2,.7,.2,1) both}
.fe-enter > *:nth-child(2){animation-delay:.08s}.fe-enter > *:nth-child(3){animation-delay:.16s}.fe-enter > *:nth-child(4){animation-delay:.24s}

.fe-stage{position:relative;height:540px;max-width:980px;margin:0 auto;animation:fe-up 1s .3s cubic-bezier(.2,.7,.2,1) both}
.fe-page{position:absolute;width:31%;max-width:300px;background:var(--paper);padding:9px;border-radius:12px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fe-page img{display:block;width:100%;height:auto;border-radius:6px}
.fe-page.p1{left:4%;top:50px;--r:-8deg;transform:rotate(var(--r));animation:fe-float 7s ease-in-out infinite}
.fe-page.p2{left:34.5%;top:0;z-index:2;--r:1deg;transform:rotate(var(--r));animation:fe-float 8s 1s ease-in-out infinite}
.fe-page.p3{right:4%;top:50px;--r:8deg;transform:rotate(var(--r));animation:fe-float 7.5s .5s ease-in-out infinite}
.fe-stage:hover .fe-page.p1{transform:rotate(-12deg) translateX(-18px)}
.fe-stage:hover .fe-page.p3{transform:rotate(12deg) translateX(18px)}
/* a sheet of "paper" with a second sheet peeking out behind it */
.fe-sheet{position:relative;border-radius:var(--rad)}
.fe-sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;z-index:-1;
  transform:rotate(-2.2deg) translate(-6px,8px);opacity:.55;filter:brightness(.92)}
.fe-plan{position:absolute;left:50%;bottom:0;width:min(560px,92%);transform:translateX(-50%);z-index:3;text-align:left;isolation:isolate;
  background:var(--paper);color:var(--ink);padding:20px 22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.fe-plan .lbl{display:flex;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:10px}
.fe-plan .lbl span{color:var(--mut)}
.fe-plan .words{font-family:var(--mono);font-size:15px;color:var(--ink);line-height:1.55;min-height:3.1em;white-space:pre-line;
  padding:10px 12px;border-radius:10px;background:var(--tint)}
.fe-plan .caret{display:inline-block;width:2px;height:1.05em;background:var(--acc);vertical-align:-2px;margin-left:1px;animation:fe-blink 1s steps(1) infinite}
.fe-plan .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--mut)}
.fe-proof-badge{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  font-size:13px;font-weight:700;background:var(--tint);color:var(--mut);transition:background .4s,color .4s}
.fe-proof-badge .spin{width:11px;height:11px;border-radius:50%;border:2px solid var(--mut);border-top-color:transparent;animation:fe-spin .8s linear infinite}
.fe-proof-badge.done{background:var(--ok);color:#fff}
.fe-proof-badge.done .spin{display:none}
.fe-proof-badge .tick{display:none}
.fe-proof-badge.done .tick{display:inline;animation:fe-pop .4s cubic-bezier(.2,1.6,.4,1) both}

.fe-nos{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:60px 0 34px;padding:0}
.fe-nos li{list-style:none;border-radius:999px;padding:10px 18px 10px 14px;font-weight:600;color:#E5DDD0;font-size:15px;background:rgba(246,241,228,.06)}
.fe-nos li::before{content:"\2713";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--ok);color:#fff;font-size:11px;margin-right:9px;vertical-align:1px}

/* stats: five small paper cards */
.fe-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0 auto;max-width:1000px}
.fe-stats div{text-align:center;padding:20px 10px;border-radius:16px;background:rgba(246,241,228,.05);border:1px solid rgba(246,241,228,.08)}
.fe-stats b{display:block;font-family:var(--serif);font-weight:600;font-size:40px;color:var(--hl);line-height:1.05;font-variant-numeric:tabular-nums}
.fe-stats span{font-size:13.5px;color:#A79E90}
.fe-note{font-size:13px;color:#9E9588;text-align:center;margin-top:14px}
.fe-cream .fe-note{color:var(--mut)}

/* listing -> plan -> pack, joined by tracing dots */
.fe-eq{display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:center;max-width:1000px;margin:0 auto}
.fe-eq .box{position:relative;isolation:isolate;padding:24px 20px;text-align:center;background:var(--dk3)}
.fe-eq .box .k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A79E90}
.fe-eq .box .v{font-family:var(--serif);font-weight:600;font-size:26px;color:#F6F1E4;margin:6px 0 4px}
.fe-eq .box .d{font-size:14px;color:#A79E90}
.fe-eq .box.mid{background:#3A2C25}
.fe-eq .box.mid .v{color:var(--hl);font-style:italic}
.fe-eq .box.out{background:var(--hl)}
.fe-eq .box.out .k,.fe-eq .box.out .d{color:#5A3020}
.fe-eq .box.out .v{color:var(--dk)}
.fe-eq .op{position:relative;height:20px;color:var(--hl);font-size:0}
.fe-eq .op::before{content:"";position:absolute;left:8px;right:16px;top:8px;height:4px;
  background-image:radial-gradient(circle,currentColor 1.6px,transparent 2px);background-size:9px 4px;background-repeat:repeat-x}
.fe-eq .op::after{content:"";position:absolute;right:6px;top:4px;border:6px solid transparent;border-left:9px solid currentColor}
.fe-walls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1040px;margin:56px auto 0}
.fe-wall{background:#F3E6CF;color:var(--ink);border-radius:6px;padding:22px 22px 24px;box-shadow:0 20px 30px -22px rgba(0,0,0,.8);
  transform:rotate(-1.2deg);transition:transform .3s}
.fe-wall:nth-child(even){transform:rotate(1.1deg);background:#F2DCCF}
.fe-wall:nth-child(3n){transform:rotate(-.4deg)}
.fe-wall:hover{transform:rotate(0) translateY(-4px)}
.fe-wall::before{content:"";display:block;width:46px;height:14px;margin:-32px auto 14px;background:rgba(246,241,228,.55);border-radius:2px;transform:rotate(-3deg)}
.fe-wall .n{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.fe-wall h3{font-size:21px;margin:4px 0 6px;color:var(--ink)}
.fe-wall p{margin:0;font-size:15px;color:#5A534A}
.fe-cream .fe-wall{box-shadow:0 18px 30px -20px rgba(28,26,23,.45)}
.fe-cream .fe-wall::before{background:rgba(154,74,47,.22)}
.fe-turn{max-width:820px;margin:56px auto 26px;text-align:center;font-family:var(--serif);font-size:28px;line-height:1.3}
.fe-turn em{font-style:italic;color:var(--acc)}
@media (max-width:640px){.fe-turn{font-size:22px;margin:40px auto 18px}}

/* proof gallery (dark): each page on a small paper stack */
.fe-run{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 50px;padding:0;list-style:none}
.fe-run li{border-radius:999px;padding:9px 16px;color:#E5DDD0;background:rgba(246,241,228,.06);font-size:15px}
.fe-run li b{color:var(--hl);font-family:var(--serif);font-size:18px;font-weight:600}

/* pack checklist (dark) */
.fe-pack{max-width:1000px;margin:0 auto}
.fe-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fe-checks div{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:15px 18px;background:rgba(246,241,228,.05);font-size:15.5px;color:#E5DDD0}
.fe-checks div::before{content:"\2713";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--hl);color:var(--dk);display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800}
.fe-checks div.wide{grid-column:1/-1;background:rgba(217,138,99,.12)}
.fe-from{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:30px;font-size:17px}
.fe-from span{color:#A79E90;font-style:italic;font-family:var(--serif)}
.fe-from b{background:var(--hl);color:var(--dk);padding:9px 16px;border-radius:999px;font-weight:700}
.fe-from i{display:inline-block;width:80px;height:4px;color:var(--hl);font-size:0;
  background-image:radial-gradient(circle,currentColor 1.6px,transparent 2px);background-size:9px 4px;background-repeat:repeat-x}

/* fit (cream) */
.fe-fit{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;max-width:1040px;margin:0 auto}
.fe-fit > div{background:var(--paper);border-radius:var(--rad);padding:28px 30px;box-shadow:0 1px 0 var(--line),0 14px 30px -24px rgba(28,26,23,.4)}
.fe-fit h3{font-size:24px}
.fe-fit ul{list-style:none;margin:0;padding:0}
.fe-fit li{padding:10px 0 10px 32px;position:relative;font-size:15.5px}
.fe-fit li::before{position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.fe-fit .yes li::before{content:"\2713";background:var(--acc-soft);color:var(--acc)}
.fe-fit .no li::before{content:"\2715";background:#EFE8DC;color:#A89D8E}

/* offer (dark) */
.fe-offer{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;max-width:1040px;margin:0 auto;align-items:center}
.fe-offer ul{list-style:none;margin:0;padding:0}
.fe-offer li{display:flex;gap:14px;padding:13px 0;border-bottom:1px dashed rgba(246,241,228,.12)}
.fe-offer li:last-child{border-bottom:0}
.fe-offer li::before{content:"\2713";flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--hl);color:var(--dk);display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:1px}
.fe-offer li b{display:block;font-size:16.5px;color:#F6F1E4}
.fe-offer li span{color:#A79E90;font-size:14.5px}
.fe-pay{isolation:isolate;background:var(--paper);color:var(--ink);padding:38px 30px;text-align:center;box-shadow:0 40px 70px -30px rgba(0,0,0,.8)}
.fe-pay .tag{margin-bottom:12px}
.fe-pay .was{color:var(--mut);text-decoration:line-through;font-size:20px;font-family:var(--serif)}
.fe-pay .now{font-family:var(--serif);font-size:92px;font-weight:600;line-height:1;margin:2px 0 8px;color:var(--ink)}
.fe-pay .small{font-size:14px;color:var(--mut)}
.fe-pay .s-buy{margin:20px auto 14px;flex-direction:column;align-items:center}
/* W+ serves a fixed-width button image; let it shrink inside the price card on phones. */
.fe-pay .s-buy img{max-width:100%;height:auto}

/* after you buy + faq (cream) */
.fe-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1040px;margin:0 auto 90px}
.fe-next > div{background:var(--paper);border-radius:var(--rad);padding:26px;box-shadow:0 1px 0 var(--line),0 14px 30px -24px rgba(28,26,23,.4)}
.fe-next .k{display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--acc);color:#fff;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:17px}
.fe-next h3{font-size:22px;margin:14px 0 6px}
.fe-next p{margin:0;font-size:15.5px;color:var(--mut)}
.fe-faq{max-width:820px;margin:0 auto}
.fe-faq details{background:var(--paper);border-radius:14px;margin-bottom:10px;box-shadow:0 1px 0 var(--line);transition:box-shadow .2s}
.fe-faq details[open]{box-shadow:0 0 0 2px var(--acc-soft),0 16px 30px -22px rgba(28,26,23,.35)}
.fe-faq summary{list-style:none;cursor:pointer;font-family:var(--serif);font-weight:600;font-size:19px;padding:20px 60px 20px 24px;position:relative}
.fe-faq summary::-webkit-details-marker{display:none}
.fe-faq summary::after{content:"+";position:absolute;right:20px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;
  background:var(--acc-soft);color:var(--acc);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:18px;transition:transform .3s,background .3s,color .3s}
.fe-faq details[open] summary::after{transform:rotate(45deg);background:var(--acc);color:#fff}
.fe-faq details p{margin:0;padding:0 24px 22px;color:var(--mut);animation:fe-up .35s ease both}

/* final */
.fe-final{text-align:center;max-width:800px;margin:0 auto}
.fe-final h2{font-size:58px;line-height:1.05}
.fe-final p{font-size:18px;margin:0 0 30px}
body.sales:has(.fe-hero) .s-foot{margin-top:0}

/* sticky buy bar on phones */
.fe-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:none;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(28,26,23,.94);backdrop-filter:blur(10px);color:#F6F1E4;border-radius:999px;padding:8px 8px 8px 20px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fe-sticky.on{transform:none}
.fe-sticky b{font-family:var(--serif);font-size:22px;font-weight:600}

/* app tour (dark): screenshot + text rows, alternating sides */
.fe-row{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;max-width:1100px;margin:0 auto 90px}
.fe-row.flip .txt{order:2}
.fe-row .k{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hl);margin-bottom:10px}
.fe-row h3{font-size:32px;line-height:1.15;margin:0 0 14px}
.fe-row p{font-size:16.5px;line-height:1.65}
.fe-row p strong{color:#F6F1E4}
.fe-shot{margin:0;position:relative;isolation:isolate;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.fe-shot img{display:block;width:100%;height:auto;border-radius:14px;background:var(--paper);
  box-shadow:0 0 0 8px var(--paper),0 40px 70px -30px rgba(0,0,0,.85)}
.fe-shot .sh{display:block;position:relative;isolation:isolate}
.fe-shot .sh::before{content:"";position:absolute;inset:-8px;border-radius:20px;background:var(--paper);opacity:.3;z-index:-1;
  transform:rotate(-2.5deg) translate(-8px,10px)}
.fe-row:not(.flip) .fe-shot .sh::before{transform:rotate(2.5deg) translate(8px,10px)}
.fe-shot:hover{transform:translateY(-6px)}
/* Tall screens (the options list, the plan) were twice the height of the text beside them. They now show
   the top of the screen in a 4:3 window that fades out, and open in full when clicked. */
.fe-shot.crop img{aspect-ratio:4/3;object-fit:cover;object-position:top center}
.fe-shot.crop.tall img{aspect-ratio:3/4}
.fe-shot.crop .sh::after{content:"See the whole screen";position:absolute;left:0;right:0;bottom:0;height:96px;border-radius:0 0 14px 14px;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;pointer-events:none;
  background:linear-gradient(rgba(255,253,248,0),rgba(255,253,248,.92) 62%);color:var(--acc);font-size:13px;font-weight:700}
.fe-shot.crop.tall .sh::after{content:"Open";height:72px;padding-bottom:10px;font-size:12px}
.fe-shot figcaption{margin-top:22px;font-size:13.5px;color:#A79E90;text-align:center}
.fe-shot figcaption::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hl);margin-right:8px;vertical-align:1px}
.fe-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.fe-row:last-of-type{margin-bottom:40px}

/* why no images (cream) */
.fe-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1080px;margin:0 auto}
.fe-why > div{background:var(--paper);border-radius:var(--rad);padding:28px;box-shadow:0 1px 0 var(--line),0 14px 30px -24px rgba(28,26,23,.4);
  border-top:4px solid var(--acc)}
.fe-why h3{font-size:23px;margin:0 0 10px}
.fe-why p{margin:0;color:var(--mut);font-size:16px}

.fe-hint{display:none;text-align:center;font-size:13px;color:var(--mut);margin:2px 0 0}
.fe-dark .fe-hint{color:#A79E90}
.fe-shot img{cursor:zoom-in}
/* tap-to-enlarge viewer (fe.js) */
.fe-lb{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.94);display:flex;align-items:center;justify-content:center;overflow:auto;
  padding:56px 16px 24px;animation:fe-fade .2s ease both}
.fe-lb img{max-width:min(1100px,100%);max-height:none;height:auto;border-radius:10px;background:#fff;cursor:zoom-out}
.fe-lb button{position:fixed;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:#F6F1E4;color:var(--dk);
  font-size:22px;line-height:1;cursor:pointer}
.fe-lb .tip{position:fixed;top:20px;left:16px;color:#C9C0B2;font-size:13px}
@keyframes fe-fade{from{opacity:0}to{opacity:1}}
@media (max-width:640px){
  /* on a phone the screenshot is shown at its real width so the text is legible; drag to pan */
  .fe-lb{align-items:flex-start;justify-content:flex-start}
  .fe-lb img.wide{max-width:none;width:auto}
}

/* <picture> wrappers must not change layout: every rule targets the img inside */
.fe picture{display:contents}
.fe-one-src{display:grid;grid-template-columns:minmax(0,1.3fr) 120px minmax(0,.7fr);align-items:center;gap:0;max-width:900px;margin:0 auto 46px}
.fe-one-src .card{position:relative;isolation:isolate;background:var(--paper);border-radius:var(--rad);padding:22px 24px;
  box-shadow:0 1px 0 var(--line),0 18px 36px -24px rgba(28,26,23,.45)}
.fe-one-src .card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--paper);z-index:-1;
  transform:rotate(-2deg) translate(-6px,7px);box-shadow:0 1px 0 var(--line)}
.fe-one-src .k{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.fe-one-src .card b{display:block;font-family:var(--serif);font-weight:600;font-size:22px;margin-bottom:4px}
.fe-one-src .card > span:not(.k){display:block;color:var(--mut);font-size:15px}
.fe-one-src ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.fe-one-src li{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--acc-soft);color:var(--acc)}
.fe-one-src .flow{display:block;height:4px;margin:0 14px;color:var(--acc);position:relative;
  background-image:radial-gradient(circle,currentColor 1.6px,transparent 2px);background-size:9px 4px;background-repeat:repeat-x}
.fe-one-src .flow::after{content:"";position:absolute;right:-4px;top:-4px;border:6px solid transparent;border-left:9px solid currentColor}
.fe-one-src .count{text-align:center}
.fe-one-src .count b{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:84px;line-height:1;color:var(--acc)}
.fe-one-src .count span{font-size:14.5px;color:var(--mut)}

/* the one-listing gallery sits on a dark section */
.fe-dark .fe-one-src .card,.fe-dark .fe-one-src .card b{color:var(--ink)}
.fe-dark .fe-one-src .count b{color:var(--hl)}
.fe-dark .fe-one-src .count span{color:#C9C0B2}
.fe-dark .fe-one-src .flow{color:var(--hl)}
.fe-dark .fe-one-src .card{box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.fe-dark .fe-one-src .card::before{opacity:.35;box-shadow:none}
.fe-one-cta{text-align:center;margin-top:40px}

/* storybook marquee: two identical tracks slide left forever; the second is aria-hidden */
.fe-book-sec{overflow:hidden}
.fe-marquee{display:flex;overflow:hidden;padding:18px 0 34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fe-track{display:flex;gap:26px;list-style:none;margin:0;padding:0 13px;flex-shrink:0;animation:fe-marq 70s linear infinite}
.fe-marquee:hover .fe-track{animation-play-state:paused}
.fe-track li{flex:0 0 auto;width:250px}
.fe-track li:nth-child(odd){transform:rotate(-1.4deg)}
.fe-track li:nth-child(even){transform:rotate(1.2deg) translateY(10px)}
.fe-track img{display:block;width:100%;height:auto;border-radius:10px;background:var(--paper);cursor:zoom-in;
  box-shadow:0 0 0 7px var(--paper),0 1px 0 7px var(--line),0 26px 40px -24px rgba(28,26,23,.55);transition:transform .3s}
.fe-track img:hover{transform:translateY(-8px) scale(1.03)}
.fe-book-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:20px auto 0;padding:0}
.fe-book-facts li{background:var(--paper);border-radius:999px;padding:9px 16px;font-size:15px;box-shadow:0 1px 0 var(--line)}
.fe-book-facts b{font-family:var(--serif);color:var(--acc);font-size:18px;margin-right:4px}
@keyframes fe-marq{to{transform:translateX(-100%)}}
@media (max-width:640px){
  .fe-track{gap:16px;padding:0 8px;animation-duration:55s}
  .fe-track li{width:170px}
  .fe-track img{box-shadow:0 0 0 5px var(--paper),0 20px 30px -20px rgba(28,26,23,.55)}
}
/* reduced motion: no autoplay; the row scrolls by hand instead */
@media (prefers-reduced-motion:reduce){
  .fe-marquee{overflow-x:auto}
  .fe-track[aria-hidden]{display:none}
}

/* one listing -> seven product types: a legend that mirrors the app's type buttons, a storybook
   feature, then one tile per type, each titled with the app's own type name */
.fe-kinds-legend{text-align:center;max-width:980px;margin:0 auto 44px}
.fe-kinds-legend > span{display:block;font-size:13px;color:#A79E90;margin-bottom:12px}
.fe-kinds-legend > span.sub{margin:12px 0 0;font-size:12.5px}
.fe-kinds-legend ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.fe-kinds-legend li{font-size:14.5px;font-weight:600;padding:9px 16px;border-radius:10px;border:1.5px solid rgba(246,241,228,.18);color:#8E857A}
.fe-kinds-legend li.on{background:#F6F1E4;border-color:#F6F1E4;color:var(--dk)}

.fe-story{display:grid;grid-template-columns:1.25fr 1fr;gap:54px;align-items:center;max-width:1080px;margin:0 auto 64px;
  background:rgba(246,241,228,.04);border:1px solid rgba(246,241,228,.08);border-radius:24px;padding:40px 48px}
.fe-story .pics{position:relative;height:500px}
.fe-story figure{margin:0;position:absolute;background:var(--paper);padding:8px;border-radius:12px;box-shadow:0 34px 60px -28px rgba(0,0,0,.95);
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.fe-story img{display:block;width:100%;height:auto;border-radius:7px;cursor:zoom-in}
.fe-story .cover{left:0;top:0;width:62%;z-index:2;transform:rotate(-2deg)}
.fe-story .pg{width:42%;right:0}
.fe-story .pg1{top:6px;transform:rotate(4deg)}
.fe-story .pg2{bottom:0;right:4%;z-index:3;transform:rotate(-3deg)}
.fe-story .pics:hover .cover{transform:rotate(-3deg) translateX(-8px)}
.fe-story .pics:hover .pg1{transform:rotate(6deg) translate(8px,-6px)}
.fe-story .pics:hover .pg2{transform:rotate(-1deg) translate(6px,6px)}
.fe-story .proof{box-shadow:0 0 0 2px #5E9C88,0 34px 60px -28px rgba(0,0,0,.95)}
.fe-story .proof::after{content:"Proofread: 1 word differs";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);
  background:var(--ok);color:#fff;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 16px -8px rgba(0,0,0,.6)}
.fe-story .k{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dk);
  background:#F6F1E4;padding:6px 12px;border-radius:8px;margin-bottom:14px}
.fe-story h3{font-size:34px;line-height:1.1;margin:0 0 14px}
.fe-story p{font-size:16.5px;margin:0 0 14px}
.fe-story p.note{font-size:15px;border-left:3px solid #5E9C88;padding:4px 0 4px 14px;color:#C9C0B2}
.fe-story p.note b{color:#F6F1E4}

.fe-kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 26px;max-width:1140px;margin:0 auto}
.fe-kind{margin:0;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fe-kind:hover{transform:translateY(-6px)}
.fe-kind .img{position:relative;isolation:isolate;background:var(--paper);padding:8px;border-radius:14px;box-shadow:0 30px 54px -28px rgba(0,0,0,.95)}
.fe-kind .img::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--paper);z-index:-1;opacity:.25;
  transform:rotate(2.2deg) translate(5px,6px)}
.fe-kind:nth-child(even) .img::before{transform:rotate(-2.2deg) translate(-5px,6px)}
.fe-kind img{display:block;width:100%;height:auto;border-radius:8px;cursor:zoom-in}
.fe-kind figcaption{margin:18px 4px 0;display:flex;flex-direction:column;gap:4px}
.fe-kind figcaption b{display:inline-flex;align-self:flex-start;font-family:var(--sans);font-weight:700;font-size:15px;color:var(--dk);
  background:#F6F1E4;padding:7px 14px;border-radius:9px;margin-bottom:6px}
.fe-kind figcaption span{font-size:14.5px;color:#A79E90;line-height:1.5}
@media (max-width:980px){
  .fe-story{grid-template-columns:minmax(0,1fr);gap:30px;padding:30px}
  .fe-story .pics{max-width:520px;width:100%;margin:0 auto;height:480px}
  .fe-kinds{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .fe-kinds-legend li{font-size:12.5px;padding:6px 10px}
  .fe-story{padding:22px 16px;margin-bottom:44px;border-radius:18px}
  .fe-story .pics{height:330px}
  .fe-story h3{font-size:26px}
  .fe-story .proof::after{font-size:10px}
  .fe-kinds{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .fe-kind .img{padding:5px;border-radius:10px}
  .fe-kind figcaption b{font-size:13px;padding:5px 10px}
  .fe-kind figcaption span{font-size:12.5px}
}

/* scroll reveal */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-stagger] > *{opacity:0;translate:0 24px;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),transform .3s}
.js [data-stagger].is-in > *{opacity:1;translate:0 0}
.js [data-stagger].is-in > *:nth-child(2){transition-delay:.07s,.07s,0s}.js [data-stagger].is-in > *:nth-child(3){transition-delay:.14s,.14s,0s}
.js [data-stagger].is-in > *:nth-child(4){transition-delay:.21s,.21s,0s}.js [data-stagger].is-in > *:nth-child(5){transition-delay:.28s,.28s,0s}
.js [data-stagger].is-in > *:nth-child(6){transition-delay:.35s,.35s,0s}.js [data-stagger].is-in > *:nth-child(7){transition-delay:.42s,.42s,0s}
.js [data-stagger].is-in > *:nth-child(8){transition-delay:.49s,.49s,0s}.js [data-stagger].is-in > *:nth-child(9){transition-delay:.56s,.56s,0s}

@keyframes fe-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fe-float{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(var(--r)) translateY(-12px)}}
@keyframes fe-shine{0%,60%{left:-80px}100%{left:110%}}
@keyframes fe-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
@keyframes fe-trace{to{clip-path:inset(0 0 0 0)}}
@keyframes fe-blink{50%{opacity:0}}
@keyframes fe-spin{to{transform:rotate(360deg)}}
@keyframes fe-pop{from{transform:scale(0)}to{transform:scale(1)}}

@media (max-width:980px){
  .fe-hero h1{font-size:54px}
  .fe-head h2,.fe-final h2{font-size:40px}.fe-walls,.fe-next{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fe-one-src{grid-template-columns:minmax(0,1fr) 80px minmax(0,.6fr)}.fe-fit,.fe-offer,.fe-why{grid-template-columns:minmax(0,1fr)}
  .fe-row{grid-template-columns:minmax(0,1fr);gap:34px;margin-bottom:70px}
  .fe-row.flip .txt{order:0}
  .fe-eq{grid-template-columns:minmax(0,1fr);gap:0}
  .fe-eq .op{height:46px;width:20px;justify-self:center}
  .fe-eq .op::before{left:8px;right:auto;top:6px;bottom:14px;width:4px;height:auto;background-size:4px 9px;background-repeat:repeat-y}
  .fe-eq .op::after{right:auto;left:4px;top:auto;bottom:0;border:6px solid transparent;border-top:9px solid currentColor}
  .fe-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fe-stage{height:470px}
}
@media (max-width:640px){
  /* Phones. The page is long, so the goal here is less scrolling without dropping content:
     side-by-side where things are small, swipe rows where there are many of a kind,
     and tap-to-enlarge for the app screenshots, which are unreadable at 350px. */
  .fe-wide{padding:0 16px}
  .fe-top{top:8px;padding:0 10px}
  .fe-top nav a.lnk{display:none}
  .fe-top .hide-sm{display:none}
  .fe-brand{font-size:18px}
  .fe-sec{padding:56px 0}
  .fe-head{margin-bottom:32px}
  .fe-head h2,.fe-final h2{font-size:30px}
  .fe-head p{font-size:16.5px}
  .fe-pill{font-size:11px;letter-spacing:.07em;padding:6px 12px 6px 10px;margin-bottom:16px}

  /* hero */
  .fe-hero{padding:36px 0 52px}
  .fe-hero h1{font-size:36px;margin-bottom:20px}
  .fe-hero h1 em::after{height:4px;background-size:10px 4px}
  .fe-sub{margin-bottom:28px}
  .fe-sub p{font-size:16.5px}
  .fe-stage{height:380px}
  .fe-page{width:46%;padding:6px}
  .fe-page.p1{left:0;top:30px}.fe-page.p2{left:27%}.fe-page.p3{right:0;top:30px}
  .fe-plan{width:100%;padding:14px}
  .fe-plan .lbl{font-size:10.5px;margin-bottom:8px}
  .fe-plan .words{font-size:12.5px;padding:8px 10px}
  .fe-plan .row > span:first-child{display:none}
  .fe-nos{gap:8px;margin:36px 0 24px}
  .fe-nos li{font-size:13.5px;padding:7px 12px 7px 9px}
  .fe-nos li::before{width:17px;height:17px;font-size:10px;margin-right:6px}
  .fe-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fe-stats div{padding:12px 6px;border-radius:12px}
  .fe-stats div:last-child{grid-column:1/-1}
  .fe-stats b{font-size:28px}
  .fe-stats span{font-size:12.5px}

  /* swipe rows */
  .fe-swipe{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:14px;margin:0 -16px;padding:8px 16px 18px}
  .fe-swipe::-webkit-scrollbar{display:none}
  .fe-swipe > *{flex:0 0 82%;scroll-snap-align:center}
  .fe-walls.fe-swipe{padding-top:30px;margin-top:26px}
  .fe-one-src{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:34px}
  .fe-one-src .flow{width:4px;height:36px;margin:0 auto;background-size:4px 9px;background-repeat:repeat-y}
  .fe-one-src .flow::after{right:auto;left:-4px;top:auto;bottom:-6px;border:6px solid transparent;border-top:9px solid currentColor}
  .fe-one-src .count b{font-size:64px}
  .fe-hint{display:block!important}

  /* the problem */
  .fe-eq{gap:0}
  .fe-eq .box{padding:16px}
  .fe-eq .box .v{font-size:22px}
  .fe-eq .op{height:34px}

  /* app tour */
  .fe-row{gap:24px;margin-bottom:56px}
  .fe-row h3{font-size:25px}
  .fe-row p{font-size:15.5px}
  .fe-pair{grid-template-columns:1fr 1fr;gap:14px}
  .fe-pair .fe-shot img{box-shadow:0 0 0 5px var(--paper),0 24px 40px -24px rgba(0,0,0,.85)}
  .fe-shot.crop .sh::after{content:"Tap to see it all";height:80px;padding-bottom:10px;font-size:12px}
  .fe-shot.crop.tall .sh::after{content:"Tap";height:56px;padding-bottom:8px}
  .fe-pair figcaption{font-size:12px}
  .fe-shot .sh::before,.fe-row:not(.flip) .fe-shot .sh::before{transform:rotate(1deg) translate(4px,8px)}
  .fe-shot figcaption{margin-top:20px}
  .fe-shot:not(.crop) .sh::after{content:"Tap to enlarge";position:absolute;right:8px;bottom:8px;background:rgba(28,26,23,.85);color:#F6F1E4;
    font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;pointer-events:none}

  /* six sample pages, two to a row */
  .fe-run{gap:6px;margin-bottom:30px}
  .fe-run li{font-size:13px;padding:7px 11px}
  .fe-run li b{font-size:15px}

  .fe-why{gap:12px}
  .fe-why > div{padding:20px}
  .fe-why h3{font-size:20px}
  .fe-why p{font-size:15px}
  .fe-checks{grid-template-columns:minmax(0,1fr);gap:8px}
  .fe-checks div{padding:12px 14px;font-size:15px}
  .fe-from{gap:10px;font-size:15px}
  .fe-from i{width:40px}
  .fe-fit{gap:14px}
  .fe-fit > div{padding:20px}
  .fe-fit li{font-size:14.5px;padding:8px 0 8px 30px}
  .fe-offer{gap:18px}
  .fe-offer li{padding:10px 0}
  .fe-pay{padding:28px 18px}
  .fe-pay .now{font-size:68px}
  .fe-next{grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:60px}
  .fe-next > div{display:grid;grid-template-columns:36px 1fr;column-gap:14px;padding:18px}
  .fe-next .k{grid-row:span 2}
  .fe-next h3{margin:4px 0 4px;font-size:19px}
  .fe-faq summary{font-size:17px;padding:16px 52px 16px 18px}
  .fe-faq details p{padding:0 18px 18px;font-size:15px}
  .fe-final h2{font-size:32px}
  .fe-cta{padding:15px 22px;font-size:16px}
  .fe-sticky{display:flex}
  .s-foot-bar{padding-bottom:96px}
  .s-legal-links{font-size:15px;line-height:1.8}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal],.js [data-stagger] > *{opacity:1;transform:none;translate:none}
  .fe-hero h1 em::after{clip-path:none}
}

/* ── Refined finish (FE page). Owner asked for a more professional, premium look: the playful
   paper motifs (tilts, tape, stacked sheets, 3D buttons, shine) give way to editorial restraint:
   hairline borders, straight cards, more air, quieter labels, one accent. Palette unchanged. ── */
.fe{--dk:#171513;--dk2:#1F1C19;--dk3:#2A2622;--cream:#F7F3EA;--paper:#FFFDF9;--hair:rgba(28,26,23,.10);--hair-d:rgba(246,241,228,.10);--rad:6px}
.fe h1,.fe h2,.fe h3{font-weight:500;letter-spacing:-.02em}
.fe h1 em,.fe h2 em{font-weight:400}
.fe-sec{padding:128px 0}
.fe-head{margin-bottom:64px}
.fe-head h2{font-size:54px;line-height:1.06}
.fe-head p{font-size:18px;line-height:1.7;max-width:680px;margin:0 auto}
.fe-dark{background-image:radial-gradient(120% 70% at 50% 0%,rgba(217,138,99,.07),transparent 60%);background-size:auto}
.fe-cream{background:var(--cream)}
.fe-cream.alt{background:#F2EDE2}

/* labels: a quiet small-caps line, not a pill */
.fe-pill,.fe-dark .fe-pill{background:none;padding:0;border-radius:0;gap:14px;font-size:11.5px;letter-spacing:.24em;font-weight:600;margin-bottom:22px}
.fe-pill::before{width:28px;height:1px;border-radius:0}
.fe-pill::after{content:"";width:28px;height:1px;background:currentColor}
.fe-head .fe-pill{justify-content:center}

/* buttons: flat, precise */
.fe-cta,.fe-cream .fe-cta{border-radius:4px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:19px 34px;
  box-shadow:0 14px 34px -18px rgba(217,138,99,.75)}
.fe-cream .fe-cta{box-shadow:0 14px 34px -18px rgba(154,74,47,.7)}
.fe-cta:hover,.fe-cream .fe-cta:hover{transform:translateY(-1px)}
.fe-cta:active{transform:none;box-shadow:none}
.fe-cta::after{display:none}
.fe-cta.sm{letter-spacing:.08em;font-size:12px;padding:10px 16px;border-radius:999px}
.fe-top .in{border-radius:10px;border-color:var(--hair-d)}

/* hero */
.fe-hero h1{font-size:78px;line-height:1.02;max-width:960px}
.fe-hero h1 em::after{opacity:.7}
.fe-sub p{font-size:19px;line-height:1.7;color:#CFC6B8}
.fe-page{border-radius:4px;padding:6px}
.fe-page img{border-radius:2px}
.fe-plan,.fe-sheet{border-radius:6px}
.fe-sheet::before{display:none}
.fe-nos li{background:none;border:1px solid var(--hair-d);border-radius:4px}
.fe-stats div{background:none;border:0;border-left:1px solid var(--hair-d);border-radius:0}
.fe-stats div:first-child{border-left:0}
.fe-stats b{font-weight:400;font-size:44px}

/* problem: six clean numbered cards */
.fe-wall,.fe-wall:nth-child(even),.fe-wall:nth-child(3n){transform:none;background:var(--paper);border:1px solid var(--hair);border-radius:var(--rad);
  box-shadow:none;padding:30px 28px}
.fe-cream .fe-wall{box-shadow:none}
.fe-wall:hover{transform:translateY(-3px);box-shadow:0 24px 50px -32px rgba(28,26,23,.35)}
.fe-wall::before,.fe-cream .fe-wall::before{display:none}
.fe-wall .n{font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;letter-spacing:0;text-transform:none;color:var(--acc)}
.fe-wall h3{font-size:22px;margin:10px 0 8px}
.fe-turn{font-weight:400}
.fe-eq .box{border-radius:var(--rad)}

/* galleries: straight frames, hairlines */
.fe-one-src .card,.fe-dark .fe-one-src .card{border-radius:var(--rad)}
.fe-one-src .card::before,.fe-kind .img::before,.fe-shot .sh::before{display:none}
.fe-one-src li{border-radius:3px}
.fe-kinds-legend li{border-radius:4px;border-width:1px}
.fe-story{border-radius:8px;border-color:var(--hair-d);background:rgba(246,241,228,.025)}
.fe-story figure{border-radius:4px;padding:6px}
.fe-story .cover{transform:rotate(-1deg)}
.fe-story .pg1{transform:rotate(1.5deg)}
.fe-story .pg2{transform:rotate(-1deg)}
.fe-story .k,.fe-kind figcaption b{border-radius:3px;letter-spacing:.06em}
.fe-kind .img{border-radius:var(--rad);padding:6px}
.fe-kind img{border-radius:3px}
.fe-kind:hover{transform:translateY(-4px)}
.fe-track li:nth-child(odd),.fe-track li:nth-child(even){transform:none}
.fe-track img{border-radius:3px;box-shadow:0 0 0 6px var(--paper),0 0 0 7px var(--hair),0 26px 44px -30px rgba(28,26,23,.5)}
.fe-book-facts li{border-radius:4px;box-shadow:none;border:1px solid var(--hair)}

/* how it works, why, pack, fit, offer, faq */
.fe-shot img{border-radius:6px}
.fe-shot.crop .sh::after{border-radius:0 0 6px 6px}
.fe-row{margin-bottom:110px}
.fe-row h3{font-size:34px}
.fe-run li{border-radius:4px;background:none;border:1px solid var(--hair-d)}
.fe-why > div,.fe-fit > div,.fe-next > div{border-radius:var(--rad);box-shadow:none;border:1px solid var(--hair)}
.fe-why > div{border-top:2px solid var(--acc)}
.fe-checks div{border-radius:4px;background:none;border:1px solid var(--hair-d)}
.fe-checks div.wide{border-color:rgba(217,138,99,.35)}
.fe-from b{border-radius:4px}
.fe-pay{border-radius:var(--rad)}
.fe-pay .now{font-weight:400;font-size:96px;letter-spacing:-.03em}
.fe-offer li{border-bottom-style:solid;border-bottom-color:var(--hair-d)}
.fe-faq details{border-radius:var(--rad);box-shadow:none;border:1px solid var(--hair)}
.fe-faq details[open]{box-shadow:0 20px 40px -32px rgba(28,26,23,.35);border-color:rgba(154,74,47,.3)}
.fe-faq summary{font-weight:500}
.fe-faq summary::after{border-radius:50%;background:none;border:1px solid rgba(154,74,47,.35)}
.fe-final h2{font-size:62px;font-weight:500}
.fe-sticky{border-radius:10px}

@media (max-width:980px){.fe-hero h1{font-size:56px}.fe-head h2{font-size:42px}}
@media (max-width:640px){
  .fe-sec{padding:76px 0}
  .fe-head{margin-bottom:40px}
  .fe-hero h1{font-size:38px}
  .fe-head h2,.fe-final h2{font-size:31px}
  .fe-row{margin-bottom:64px}
  .fe-row h3{font-size:25px}
  .fe-cta,.fe-cream .fe-cta{padding:16px 22px;font-size:13px;letter-spacing:.1em}
  .fe-pay .now{font-size:72px}
  .fe-stats div{border-left:0}
  .fe-wall{padding:24px 22px}
}
.fe-hero h1 em::after{height:1px;bottom:2px;background:var(--hl);background-image:none;opacity:.55}
/* the five how-it-works steps: justified paragraphs, hyphenated so the gaps stay even */
.fe-row .txt p{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.fe-row .txt p strong{hyphens:manual;-webkit-hyphens:manual}

/* The problem section, kept in its original look at the owner's request: taped, tilted notes on the
   dot-grid dark ground, the pill label and the stacked-sheet diagram. Scoped so the refined layer above
   does not reach it. */
.fe-classic.fe-dark{background-image:radial-gradient(rgba(246,241,228,.075) 1.1px,transparent 1.5px);background-size:24px 24px}
.fe-classic{padding:100px 0}
.fe-classic .fe-head{margin-bottom:54px}
.fe-classic h2,.fe-classic h3{font-weight:600;letter-spacing:-.015em}
.fe-classic .fe-head h2{font-size:50px;line-height:1.08}
.fe-classic .fe-pill{display:inline-flex;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.1em;padding:7px 14px 7px 12px;
  border-radius:999px;margin-bottom:20px;color:var(--hl);background:rgba(217,138,99,.14)}
.fe-classic .fe-pill::before{width:7px;height:7px;border-radius:50%}
.fe-classic .fe-pill::after{display:none}
.fe-classic .fe-eq .box{border-radius:18px}
.fe-classic .fe-sheet::before{display:block;transform:rotate(-2.2deg) translate(-6px,8px);opacity:.55;filter:brightness(.92)}
.fe-classic .fe-wall{background:#F3E6CF;border:0;border-radius:6px;padding:22px 22px 24px;box-shadow:0 20px 30px -22px rgba(0,0,0,.8);transform:rotate(-1.2deg)}
.fe-classic .fe-wall:nth-child(even){transform:rotate(1.1deg);background:#F2DCCF}
.fe-classic .fe-wall:nth-child(3n){transform:rotate(-.4deg)}
.fe-classic .fe-wall:hover{transform:rotate(0) translateY(-4px);box-shadow:0 20px 30px -22px rgba(0,0,0,.8)}
.fe-classic .fe-wall::before{display:block;background:rgba(246,241,228,.55)}
.fe-classic .fe-wall .n{font-family:var(--sans);font-style:normal;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.fe-classic .fe-wall h3{font-size:21px;margin:4px 0 6px}
.fe-classic .fe-walls{gap:22px;margin-top:56px}
@media (max-width:640px){.fe-classic{padding:56px 0}.fe-classic .fe-head h2{font-size:30px}.fe-classic .fe-walls{gap:30px}}
/* two dark sections in a row: a hairline marks the change */
.fe-dark + .fe-dark{border-top:1px solid rgba(246,241,228,.08)}

/* Card borders and motion for 'why no images', 'first evening' and 'who it's for' (owner's request):
   a warm border that deepens on hover, an accent bar that draws across the top, a soft lift and glow. */
.fe-why > div,.fe-next > div,.fe-fit > div{position:relative;overflow:hidden;isolation:isolate;
  border:1px solid rgba(154,74,47,.32);border-radius:10px;background:var(--paper);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 24px -20px rgba(28,26,23,.35);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
.fe-why > div{border-top:1px solid rgba(154,74,47,.32)}
.fe-why > div::before,.fe-next > div::before,.fe-fit > div::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--acc),var(--hl));transform:scaleX(.3);transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fe-why > div::after,.fe-next > div::after,.fe-fit > div::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120% 80% at 0% 0%,rgba(217,138,99,.12),transparent 60%);transition:opacity .45s}
.fe-why > div:hover,.fe-next > div:hover,.fe-fit > div:hover{transform:translateY(-6px);border-color:rgba(154,74,47,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 30px 60px -34px rgba(154,74,47,.45)}
.fe-why > div:hover::before,.fe-next > div:hover::before,.fe-fit > div:hover::before{transform:scaleX(1)}
.fe-why > div:hover::after,.fe-next > div:hover::after,.fe-fit > div:hover::after{opacity:1}
.fe-why h3,.fe-next h3,.fe-fit h3{transition:color .35s}
.fe-why > div:hover h3,.fe-next > div:hover h3,.fe-fit > div:hover h3{color:var(--acc)}
.fe-next .k{transition:transform .45s cubic-bezier(.2,1.4,.4,1),box-shadow .45s}
.fe-next > div:hover .k{transform:scale(1.12) rotate(-8deg);box-shadow:0 0 0 6px rgba(154,74,47,.12)}
/* who it's for: each line lights up under the pointer */
.fe-fit li{border-radius:8px;transition:background .25s,padding-left .25s,color .25s}
.fe-fit li::before{transition:transform .3s}
.fe-fit .yes li:hover{background:rgba(154,74,47,.06)}
.fe-fit .no li:hover{background:rgba(28,26,23,.04)}
.fe-fit li:hover::before{transform:scale(1.15)}
.fe-fit .no{background:#FBF8F2}
.fe-fit .no::before{background:linear-gradient(90deg,#B4A99A,#D8CFC2)}
@media (hover:none){
  /* touch screens never hover: show the full bars */
  .fe-why > div::before,.fe-next > div::before,.fe-fit > div::before{transform:scaleX(1)}
}
/* Where two dark sections meet (hero -> difference, gallery -> how it works) the second one takes a
   warm espresso ground, so the change of section reads at a glance. */
.fe-classic.fe-dark{background-color:#34251E}
#how.fe-dark{background-color:#34251E;background-image:radial-gradient(120% 70% at 50% 0%,rgba(217,138,99,.08),transparent 60%)}
.fe-classic .fe-eq .box{background:#3A2C25}
.fe-classic .fe-eq .box.mid{background:#4A3329}
.fe-classic .fe-eq .box.out{background:var(--hl)}
.fe-dark + .fe-dark{border-top:0}

/* All Access, under the front-end offer: a second, quieter way in. */
.fe-all{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;max-width:1040px;margin:34px auto 0;align-items:center;
  border:1px solid rgba(246,241,228,.16);border-radius:var(--rad);padding:30px 32px}
.fe-all h3{font-family:var(--serif);font-size:30px;color:#F6F1E4;margin:10px 0 6px}
.fe-all p{color:#A79E90;margin:0 0 12px}
.fe-all ul{list-style:none;margin:0;padding:0}
.fe-all li{padding:7px 0;color:#C9C0B2;font-size:15px;border-bottom:1px dashed rgba(246,241,228,.1)}
.fe-all li:last-child{border-bottom:0}
.fe-all li b{color:#F6F1E4}
.fe-all-r{text-align:center}
.fe-all-r .now{font-family:var(--serif);font-size:64px;font-weight:600;line-height:1;color:#F6F1E4}
.fe-all-r .small{font-size:13.5px;color:#A79E90;margin-top:8px}
.fe-all-r .s-buy{margin:18px auto 0;flex-direction:column;align-items:center}
.fe-all-r .s-buy img{max-width:100%;height:auto}
@media (max-width:860px){ .fe-all{grid-template-columns:minmax(0,1fr);padding:24px 20px} }
/* the checkout facts under the buy buttons (sales_terms_box): sits on the dark offer section */
.s-terms{max-width:1000px;margin:30px auto 0;border:1.5px solid rgba(217,138,99,.38);border-radius:14px;padding:20px 22px 16px;
  background:rgba(246,241,228,.04);color:#CFC6B8;font-size:14px;line-height:1.55;text-align:left}
.s-terms ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.s-terms li{padding-left:14px;border-left:2px solid rgba(217,138,99,.55)}
.s-terms b{display:block;color:#F6F1E4;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.s-terms span{display:block;overflow-wrap:anywhere}
.s-terms a{color:#E9B48F;text-decoration:underline;text-underline-offset:2px}
.s-terms p{margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(246,241,228,.12);font-size:13px;color:#A79E90;text-align:center}
@media (max-width:980px){.s-terms ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.s-terms{padding:16px 14px 12px;margin-top:22px;font-size:13.5px}.s-terms ul{grid-template-columns:minmax(0,1fr);gap:12px}}

/* ── Finishing layer (FE page, 2026-10-12). Owner asked for better pictures, layout and motion.
   - Reveals were long (.8s) and fired late, so a quick scroll showed whole sections as empty
     ground; they now start before the block reaches the screen and run in about half the time.
   - The hero fan-out on hover never ran: the float animation owns `transform`, so the hover
     rule lost. The hover now uses the separate `translate`/`rotate`/`scale` properties, which
     add to the animation instead of competing with it.
   - App screenshots sit in a window frame so they read as the real app, not a loose picture. ── */
.fe-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--acc),var(--hl) 60%,#F2C3A6)}

/* reveals: earlier, shorter, a smaller travel */
.js [data-reveal]{transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js [data-stagger] > *{translate:0 16px;transition:opacity .55s cubic-bezier(.2,.7,.2,1),translate .55s cubic-bezier(.2,.7,.2,1),transform .3s}
.js [data-stagger].is-in > *:nth-child(2){transition-delay:.05s,.05s,0s}.js [data-stagger].is-in > *:nth-child(3){transition-delay:.1s,.1s,0s}
.js [data-stagger].is-in > *:nth-child(4){transition-delay:.15s,.15s,0s}.js [data-stagger].is-in > *:nth-child(5){transition-delay:.2s,.2s,0s}
.js [data-stagger].is-in > *:nth-child(6){transition-delay:.25s,.25s,0s}.js [data-stagger].is-in > *:nth-child(7){transition-delay:.3s,.3s,0s}
.js [data-stagger].is-in > *:nth-child(8){transition-delay:.35s,.35s,0s}.js [data-stagger].is-in > *:nth-child(9){transition-delay:.4s,.4s,0s}
/* how it works: the text settles first, the screen slides in from its own side */
.js .fe-row[data-reveal] .fe-shot,.js .fe-row[data-reveal] .fe-pair{opacity:0;translate:36px 0;transition:opacity .7s .12s cubic-bezier(.2,.7,.2,1),translate .7s .12s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)}
.js .fe-row.flip[data-reveal] .fe-shot{translate:-36px 0}
.js .fe-row.is-in .fe-shot,.js .fe-row.is-in .fe-pair{opacity:1;translate:0 0}

/* hero: a warm light behind the pages, and the fan-out that now works */
.fe-stage::before{content:"";position:absolute;left:50%;top:42%;width:78%;height:78%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,138,99,.30),rgba(217,138,99,.08) 60%,transparent);filter:blur(10px);
  animation:fe-glow 7s ease-in-out infinite alternate}
.fe-page{transition:translate .55s cubic-bezier(.2,.7,.2,1),rotate .55s cubic-bezier(.2,.7,.2,1),scale .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;
  box-shadow:0 0 0 1px rgba(246,241,228,.08),0 34px 64px -26px rgba(0,0,0,.85)}
.fe-stage:hover .fe-page.p1{translate:-26px 4px;rotate:-4deg}
.fe-stage:hover .fe-page.p3{translate:26px 4px;rotate:4deg}
.fe-stage:hover .fe-page.p2{translate:0 -10px}
.fe-stage .fe-page:hover{scale:1.04;z-index:4;box-shadow:0 0 0 1px rgba(217,138,99,.5),0 44px 80px -28px rgba(0,0,0,.9),0 0 60px -12px rgba(217,138,99,.35)}
@keyframes fe-glow{from{opacity:.65;scale:.94}to{opacity:1;scale:1.06}}

/* app screenshots: a window with its title bar */
.fe .fe-shot .sh{border-radius:10px;overflow:hidden;background:#FBF8F2;padding-top:28px;
  box-shadow:0 0 0 1px rgba(246,241,228,.16),0 44px 80px -38px rgba(0,0,0,.95);transition:box-shadow .45s}
.fe .fe-row .fe-shot .sh::before,.fe .fe-shot .sh::before{display:block;content:"";position:absolute;inset:0 0 auto 0;height:28px;z-index:1;
  transform:none;opacity:1;border-radius:0;border-bottom:1px solid rgba(28,26,23,.08);
  background:radial-gradient(circle at 16px 14px,#E0806A 4px,transparent 4.6px),radial-gradient(circle at 31px 14px,#E4BA6A 4px,transparent 4.6px),
    radial-gradient(circle at 46px 14px,#8DB68A 4px,transparent 4.6px),linear-gradient(#F5F0E6,#ECE5D8)}
.fe .fe-shot img{border-radius:0;box-shadow:none}
.fe .fe-shot.crop .sh::after{border-radius:0}
.fe-shot:hover .sh{box-shadow:0 0 0 1px rgba(217,138,99,.55),0 54px 90px -38px rgba(0,0,0,.95),0 0 70px -18px rgba(217,138,99,.3)}
.fe-shot figcaption{margin-top:18px}

/* the product gallery: a warm glow and a zoom badge on hover */
.fe-kind .img{transition:box-shadow .45s}
.fe-kind .img::after{content:"";position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;pointer-events:none;
  background:rgba(23,21,19,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F1E4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/18px no-repeat;
  opacity:0;scale:.8;transition:opacity .3s,scale .3s}
.fe-kind:hover .img{box-shadow:0 0 0 1px rgba(217,138,99,.55),0 40px 70px -30px rgba(0,0,0,.95),0 0 56px -14px rgba(217,138,99,.32)}
.fe-kind:hover .img::after{opacity:1;scale:1}
.fe-story figure{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.fe-story figure:hover{z-index:4;box-shadow:0 0 0 1px rgba(217,138,99,.5),0 40px 70px -28px rgba(0,0,0,.95)}
.fe-story .proof:hover{box-shadow:0 0 0 2px #5E9C88,0 40px 70px -28px rgba(0,0,0,.95)}

/* storybook strip: the page under the pointer comes forward */
.fe-track img{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.fe-track img:hover{transform:translateY(-10px) scale(1.04);box-shadow:0 0 0 6px var(--paper),0 0 0 7px rgba(154,74,47,.35),0 36px 56px -30px rgba(28,26,23,.6)}

/* price card: a slow light around the edge draws the eye to the one button that matters */
.fe-pay{box-shadow:0 0 0 1px rgba(217,138,99,.35),0 40px 80px -40px rgba(0,0,0,.9),0 0 80px -30px rgba(217,138,99,.35);animation:fe-halo 4s ease-in-out infinite alternate}
@keyframes fe-halo{from{box-shadow:0 0 0 1px rgba(217,138,99,.3),0 40px 80px -40px rgba(0,0,0,.9),0 0 60px -30px rgba(217,138,99,.25)}
  to{box-shadow:0 0 0 1px rgba(217,138,99,.6),0 40px 80px -40px rgba(0,0,0,.9),0 0 100px -26px rgba(217,138,99,.5)}}

@media (max-width:640px){
  .js .fe-row[data-reveal] .fe-shot,.js .fe-row.flip[data-reveal] .fe-shot,.js .fe-row[data-reveal] .fe-pair{translate:0 18px}
  .fe .fe-shot .sh{padding-top:20px;border-radius:8px}
  .fe .fe-shot .sh::before{height:20px;background:radial-gradient(circle at 12px 10px,#E0806A 3px,transparent 3.6px),radial-gradient(circle at 23px 10px,#E4BA6A 3px,transparent 3.6px),
    radial-gradient(circle at 34px 10px,#8DB68A 3px,transparent 3.6px),linear-gradient(#F5F0E6,#ECE5D8)}
  .fe-kind .img::after{display:none}
}
@media (hover:none){.fe-kind .img::after{display:none}}
@media (prefers-reduced-motion:reduce){
  .js .fe-row[data-reveal] .fe-shot,.js .fe-row[data-reveal] .fe-pair{opacity:1;translate:none}
  .fe-prog{display:none}
}

/* Hero banner (owner's artwork, 2026-10-13) in place of the three workbook pages. The plan card
   no longer floats over the pictures: the banner carries its own feature strip along the bottom
   edge, so the card sits under it instead of covering it. */
.fe-stage.banner{height:auto;max-width:1100px}
.fe-banner{position:relative;border-radius:14px;padding:6px;background:linear-gradient(145deg,rgba(246,241,228,.22),rgba(217,138,99,.25));
  box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 90px -30px rgba(217,138,99,.45);
  transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
.fe-banner img{display:block;width:100%;height:auto;border-radius:9px}
.fe-stage.banner:hover .fe-banner{transform:translateY(-6px);box-shadow:0 60px 110px -40px rgba(0,0,0,.95),0 0 110px -26px rgba(217,138,99,.55)}
.fe-stage.banner .fe-plan{position:relative;left:auto;bottom:auto;transform:none;margin:34px auto 0}
@media (max-width:980px){.fe-stage.banner{height:auto}}
@media (max-width:640px){
  .fe-stage.banner{height:auto;margin:0 -6px}
  .fe-banner{padding:3px;border-radius:9px}
  .fe-banner img{border-radius:6px}
  .fe-stage.banner .fe-plan{margin-top:22px}
}

/* Hero banner, motion and fit (2026-10-13). At 1100px the banner stood ~730px tall and pushed the
   plan card and the buy button far below the fold on a laptop; 960px keeps the whole picture and
   the top of the card on one 13-inch screen. Effects: it sharpens into place, a light sweeps
   across it now and then, a slow light runs round its frame, and it leans toward the pointer
   (fe.js sets --rx/--ry; touch screens and reduced motion get none of it). */
@property --fe-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.fe-stage.banner{max-width:960px;perspective:1600px}
.fe-banner{--rx:0deg;--ry:0deg;--lift:0px;transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .6s;will-change:transform;padding:4px;
  background:conic-gradient(from var(--fe-a),rgba(217,138,99,.15),rgba(242,195,166,.95) 12%,rgba(217,138,99,.15) 26%,rgba(246,241,228,.18) 55%,rgba(217,138,99,.15));
  animation:fe-ring 8s linear infinite,fe-sharpen 1.3s .35s cubic-bezier(.2,.7,.2,1) both}
.fe-stage.banner:hover .fe-banner{--lift:-6px;transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry))}
.fe-banner.tracking{transition:transform .12s linear,box-shadow .6s}
.fe-banner .shine{position:absolute;inset:4px;border-radius:9px;overflow:hidden;pointer-events:none}
.fe-banner .shine::before{content:"";position:absolute;top:-20%;bottom:-20%;width:28%;left:-40%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,250,240,.38),transparent);animation:fe-sweep 7s 1.6s ease-in-out infinite}
/* glare that follows the pointer */
.fe-banner .shine::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(40% 50% at var(--gx,50%) var(--gy,30%),rgba(255,248,236,.22),transparent 70%)}
.fe-banner.tracking .shine::after{opacity:1}
@keyframes fe-ring{to{--fe-a:360deg}}
@keyframes fe-sharpen{from{opacity:0;filter:blur(10px) saturate(.6);scale:.95}to{opacity:1;filter:none;scale:1}}
@keyframes fe-sweep{0%,72%{left:-40%}100%{left:130%}}
@media (max-width:640px){.fe-banner{padding:3px}.fe-banner .shine{inset:3px;border-radius:6px}}
@media (prefers-reduced-motion:reduce){.fe-banner .shine{display:none}.fe-banner{transform:none}}

/* Product gallery as pages taped to the wall (owner's request, 2026-10-13), in the same spirit as
   the taped notes of the problem section: each page hangs a little askew under a strip of washi
   tape, the tape colours take turns, and the page straightens when pointed at. The tilt uses the
   `rotate` property so it adds to the reveal's `translate` and the hover lift instead of replacing them. */
.fe-kinds{gap:56px 30px;padding-top:14px}
.fe-kind .img{rotate:-1.6deg;transition:box-shadow .45s,rotate .5s cubic-bezier(.2,.7,.2,1)}
.fe-kind:nth-child(4n+2) .img{rotate:1.4deg}
.fe-kind:nth-child(4n+3) .img{rotate:-.7deg}
.fe-kind:nth-child(4n) .img{rotate:1.9deg}
.fe-kind:hover .img{rotate:0deg}
/* the tape: translucent, faintly striped, with torn ends */
.fe-kind .img::before{display:block;content:"";position:absolute;z-index:2;left:50%;top:-17px;width:118px;height:32px;opacity:1;
  border-radius:0;box-shadow:0 2px 4px -1px rgba(0,0,0,.25);
  transform:translateX(-50%) rotate(-4deg);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 6px,transparent 6px 12px),var(--tape,rgba(242,214,190,.82));
  -webkit-mask:conic-gradient(from -45deg at left,transparent 90deg,#000 0) left/5px 7px repeat-y,conic-gradient(from 135deg at right,transparent 90deg,#000 0) right/5px 7px repeat-y,linear-gradient(#000,#000) center/calc(100% - 10px) 100% no-repeat;
          mask:conic-gradient(from -45deg at left,transparent 90deg,#000 0) left/5px 7px repeat-y,conic-gradient(from 135deg at right,transparent 90deg,#000 0) right/5px 7px repeat-y,linear-gradient(#000,#000) center/calc(100% - 10px) 100% no-repeat;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fe-kind:nth-child(4n+1) .img{--tape:rgba(240,196,178,.85)}
.fe-kind:nth-child(4n+2) .img{--tape:rgba(196,214,186,.85)}
.fe-kind:nth-child(4n+3) .img{--tape:rgba(238,222,176,.88)}
.fe-kind:nth-child(4n) .img{--tape:rgba(214,196,222,.85)}
.fe-kind:nth-child(even) .img::before{transform:translateX(-50%) rotate(3.5deg)}
.fe-kind:hover .img::before{transform:translateX(-50%) rotate(0deg) scaleX(1.04)}
@media (max-width:640px){
  .fe-kinds{gap:40px 16px;padding-top:10px}
  .fe-kind .img::before{width:64px;height:20px;top:-11px}
}

/* ── Light grounds for former dark sections (2026-10-13). A section that carries both .fe-dark and
   .fe-lite is drawn light: sand with the terracotta dot grid (the problem), blush (one listing).
   Prefixed with .fe so these outrank the dark-section rules above without !important. ── */
.fe{--ink2:#3D3830;--mut2:#7A7064;--line2:rgba(60,40,25,.12);--glow:rgba(217,138,99,.28)}
.fe .fe-lite{color:var(--ink);background-color:#FBF5EA;background-image:none}
.fe .fe-lite h2,.fe .fe-lite h3,.fe .fe-lite .fe-head h2{color:var(--ink)}
.fe .fe-lite p,.fe .fe-lite .fe-head p{color:var(--mut)}
.fe .fe-lite .fe-head p strong,.fe .fe-lite p strong,.fe .fe-lite p b{color:var(--ink)}
.fe .fe-lite h1 em,.fe .fe-lite h2 em{color:var(--acc)}
.fe .fe-lite .fe-pill{color:var(--acc)}
.fe .fe-lite .fe-note,.fe .fe-lite .fe-hint{color:var(--mut2)}
.fe .fe-lite + .fe-dark{border-top:0}

/* section grounds */
.fe .fe-classic.fe-dark{background-color:#F4E8D4;background-image:none}
.fe #made.fe-lite{background:linear-gradient(#FCEFE6,#FAE9DD)}

/* problem: notes on a sand wall */
.fe .fe-classic .fe-pill{background:rgba(154,74,47,.1);color:var(--acc)}
.fe .fe-classic .fe-eq .box{background:var(--paper);box-shadow:0 0 0 1px var(--line2),0 18px 34px -24px rgba(110,60,30,.45)}
.fe .fe-classic .fe-eq .box.mid{background:#FBE9DF}
.fe .fe-classic .fe-eq .box.mid .v{color:var(--acc)}
.fe .fe-classic .fe-eq .box.out{background:var(--hl)}
.fe .fe-eq .box .k,.fe .fe-eq .box .d{color:var(--mut)}
.fe .fe-eq .box .v{color:var(--ink)}
.fe .fe-eq .box.out .k,.fe .fe-eq .box.out .d{color:#5A3020}
.fe .fe-eq .op{color:var(--acc)}
.fe .fe-classic .fe-sheet::before{opacity:.35;filter:none}
.fe .fe-classic .fe-wall{background:#FFF8EA;box-shadow:0 18px 30px -20px rgba(110,60,30,.4)}
.fe .fe-classic .fe-wall:nth-child(even){background:#FDEDE3}
.fe .fe-classic .fe-wall:hover{box-shadow:0 26px 40px -22px rgba(110,60,30,.45)}
.fe .fe-classic .fe-wall::before{background:rgba(217,138,99,.42)}
.fe .fe-classic .fe-wall:nth-child(3n)::before{background:rgba(160,190,150,.55)}

/* one listing, many products */
.fe .fe-lite .fe-one-src .card{box-shadow:0 0 0 1px var(--line2),0 24px 46px -30px rgba(110,60,30,.5)}
.fe .fe-lite .fe-one-src .count b,.fe .fe-lite .fe-one-src .flow{color:var(--acc)}
.fe .fe-lite .fe-one-src .count span{color:var(--mut)}
.fe .fe-kinds-legend > span{color:var(--mut)}
.fe .fe-kinds-legend li,.fe .fe-kinds-legend li.on{background:rgba(255,255,255,.7);border-color:var(--line2);color:var(--ink2)}
.fe .fe-story{background:rgba(255,255,255,.55);border-color:var(--line2);box-shadow:0 30px 60px -44px rgba(110,60,30,.45)}
.fe .fe-story figure{box-shadow:0 0 0 1px var(--line2),0 28px 50px -28px rgba(110,60,30,.55)}
.fe .fe-story .proof{box-shadow:0 0 0 2px #5E9C88,0 28px 50px -28px rgba(110,60,30,.55)}
.fe .fe-story .k{background:var(--acc-soft);color:var(--acc)}
.fe .fe-story p{color:var(--mut)}
.fe .fe-story p.note{color:var(--mut)}
.fe .fe-story p.note b{color:var(--ink)}
.fe .fe-kind .img{box-shadow:0 0 0 1px var(--line2),0 26px 44px -26px rgba(110,60,30,.5)}
.fe .fe-kind:hover .img{box-shadow:0 0 0 1px rgba(217,138,99,.6),0 34px 56px -26px rgba(110,60,30,.55),0 0 50px -14px var(--glow)}
.fe .fe-kind figcaption b{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line2)}
.fe .fe-kind figcaption span{color:var(--mut)}

/* ── Charcoal & peach (owner's brief, 2026-10-13): the structure of a bold W+ page the owner pointed to
   (deep sections that alternate strictly with cream ones, one highlighted phrase per headline, small
   boxed labels in a monospace) carried out in Promptcraft's own materials: Fraunces, terracotta, washi tape, the
   dotted tracing line. Its own colours, not the reference's navy and gold: a warm charcoal with a
   peach accent and terracotta, after a forest green and an aubergine were both turned down. The
   owner also turned down the drafting grid, the corner brackets (too close to the reference) and the
   taped note, so the deep grounds are plain with one soft warm light, and the cards are quiet. ── */
.fe{--fo:#1F1C1B;--fo2:#2A2624;--fo3:#35302D;--honey:#F2A07B;--apricot:#E8825A;--fo-line:transparent;--fo-text:rgba(244,237,228,.78)}
.fe .fe-dark:not(.fe-lite){--hl:var(--honey);background-color:var(--fo);color:#F1EADB;
  background-image:radial-gradient(70% 45% at 50% 0%,rgba(242,160,123,.10),transparent 70%);background-size:auto}
.fe #how.fe-dark{background-color:var(--fo)}
.fe .fe-dark:not(.fe-lite) p,.fe .fe-dark:not(.fe-lite) .fe-head p,.fe .fe-dark:not(.fe-lite) .fe-sub p{color:var(--fo-text)}
.fe .fe-dark:not(.fe-lite) h1 em,.fe .fe-dark:not(.fe-lite) h2 em{color:var(--honey)}
.fe .fe-dark + .fe-dark{border-top:0}

/* headlines: heavier, tighter, one italic phrase in the accent */
.fe .fe-hero h1,.fe .fe-head h2,.fe .fe-final h2{font-weight:700;letter-spacing:-.025em}
.fe .fe-hero h1 em,.fe .fe-head h2 em,.fe .fe-final h2 em{font-weight:500}
.fe .fe-hero h1 em::after{background:var(--honey);opacity:.8;height:2px}

/* labels: a boxed monospace tag with a small diamond, like a field on a planning sheet */
.fe .fe-sec .fe-pill{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;gap:10px;
  padding:7px 13px;border:1px solid currentColor;border-radius:3px;margin-bottom:22px;color:var(--acc);background:rgba(154,74,47,.06)}
.fe .fe-sec .fe-pill::before{width:6px;height:6px;border-radius:0;background:currentColor;transform:rotate(45deg)}
.fe .fe-sec .fe-pill::after{display:none}
.fe .fe-dark:not(.fe-lite) .fe-pill{color:var(--honey);background:rgba(242,160,123,.08)}

/* buttons: honey, heavy capitals, dark type, the same on every ground */
.fe .fe-cta{background:linear-gradient(180deg,#F7B494,#EC8E66);color:#2A1712;font-weight:800;letter-spacing:.1em;border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px rgba(170,80,50,.35),0 16px 34px -14px rgba(241,154,110,.75)}
.fe .fe-cta:hover{background:linear-gradient(180deg,#F9C2A6,#EF9A75);color:#2A1712;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(170,80,50,.35),0 22px 40px -14px rgba(241,154,110,.85)}
.fe .fe-cta.sm{border-radius:6px}

/* header and launch bar */
.fe .fe-top .in{background:rgba(31,28,27,.86);border-color:rgba(242,160,123,.2);border-radius:10px}
.fe .fe-brand{color:#F6F1E4}
.fe .fe-brand .mark{background:linear-gradient(135deg,var(--honey),var(--apricot));color:#2A1712}
.fe .fe-top nav a.lnk{color:rgba(246,234,228,.75)}
.fe .fe-top nav a.lnk:hover{color:#fff}
.fe .fe-bar{background:linear-gradient(90deg,#8E4228,var(--acc),#8E4228)}
.fe .fe-sticky{background:rgba(31,28,27,.95)}

/* the hero promise: a quiet card, no ornament */
.fe .fe-sub{max-width:800px;padding:24px 34px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(244,237,228,.09)}
.fe .fe-run{max-width:max-content}

/* deep sections: cards and lines in the green */
.fe .fe-dark:not(.fe-lite) .fe-stats div{border-left-color:rgba(255,226,210,.12)}
.fe .fe-dark:not(.fe-lite) .fe-stats span,.fe .fe-dark:not(.fe-lite) .fe-shot figcaption,.fe .fe-dark:not(.fe-lite) .fe-note{color:rgba(246,234,228,.6)}
.fe .fe-dark:not(.fe-lite) .fe-nos li,.fe .fe-dark:not(.fe-lite) .fe-run li,.fe .fe-dark:not(.fe-lite) .fe-checks div{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,226,210,.12);color:#EDE6D6}
.fe .fe-dark:not(.fe-lite) .fe-checks div.wide{background:rgba(242,160,123,.1);border-color:rgba(242,160,123,.35)}
.fe .fe-dark:not(.fe-lite) .fe-checks div::before,.fe .fe-dark:not(.fe-lite) .fe-offer li::before,.fe .fe-dark:not(.fe-lite) .fe-nos li::before{background:var(--honey);color:#2A1712}
.fe .fe-dark:not(.fe-lite) .fe-offer li{border-bottom-color:rgba(255,226,210,.1)}
.fe .fe-dark:not(.fe-lite) .fe-offer li span,.fe .fe-dark:not(.fe-lite) .fe-all p,.fe .fe-dark:not(.fe-lite) .fe-all-r .small{color:rgba(246,234,228,.62)}
.fe .fe-dark:not(.fe-lite) .fe-all{background:rgba(255,255,255,.03);border-color:rgba(242,160,123,.25)}
.fe .fe-dark:not(.fe-lite) .fe-all li{color:rgba(246,234,228,.75);border-bottom-color:rgba(255,226,210,.1)}
.fe .fe-dark:not(.fe-lite) .s-terms{background:rgba(255,255,255,.03);border-color:rgba(242,160,123,.35)}
.fe .fe-dark:not(.fe-lite) .s-terms li{border-left-color:rgba(242,160,123,.55)}
.fe .fe-dark:not(.fe-lite) .fe-from b{background:var(--honey);color:#2A1712}
.fe .fe-dark:not(.fe-lite) .fe-row .k{color:var(--honey)}

/* the storybook strip on the green */
.fe .fe-book-sec.fe-dark .fe-book-facts li{background:rgba(255,255,255,.04);border:1px solid rgba(255,226,210,.14);color:#EDE6D6}
.fe .fe-book-sec.fe-dark .fe-book-facts b{color:var(--honey)}
.fe .fe-book-sec.fe-dark .fe-track img{box-shadow:0 0 0 6px var(--paper),0 30px 50px -26px rgba(0,0,0,.8)}
.fe .fe-book-sec.fe-dark .fe-track img:hover{box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--honey),0 36px 56px -26px rgba(0,0,0,.85)}

/* the closing call: the green with a warm sunrise behind the button */
.fe .fe-dark:has(.fe-final){background-image:radial-gradient(55% 70% at 50% 100%,rgba(242,160,123,.22),transparent 70%);background-size:auto}

/* the cream sections keep their warmth, with the forest as the ink of the accent cards */
.fe .fe-cream .fe-next .k{background:var(--fo);color:var(--honey)}
.fe .fe-cream .fe-faq details[open] summary::after{background:var(--fo);color:var(--honey)}
@media (max-width:640px){
  .fe .fe-sub{padding:18px 18px}
  .fe .fe-sec .fe-pill{font-size:10.5px;letter-spacing:.1em}
}

/* ── Long-form blocks (2026-10-13 rewrite to ~3,300 words): an opening letter, three mistakes, the timed
   sample run, the comparison, straight answers, the value stack, the 30-day promise, two options and the
   P.S. Each is drawn for the ground it sits on: letter, intro, run, comparison and promise on the light
   sections; mistakes, answers, stack, options and P.S. on the deep ones. ── */
.fe-letter{max-width:700px;margin:0 auto 80px;background:var(--paper);border-radius:14px;padding:44px 52px;
  box-shadow:0 0 0 1px var(--line2),0 30px 60px -40px rgba(110,60,30,.45)}
.fe .fe-letter p{font-size:18px;line-height:1.75;color:var(--ink2);margin:0 0 16px}
.fe .fe-letter p.hi{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--acc)}
.fe .fe-letter q{quotes:"\201C" "\201D";color:var(--acc);font-weight:600}
.fe .fe-letter p:last-child{margin-bottom:0}
.fe-head.sm h2{font-size:40px}

.fe-mistakes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1100px;margin:0 auto}
.fe-mistakes > div{border:1px solid rgba(244,237,228,.1);border-radius:14px;padding:30px 28px;background:rgba(255,255,255,.03)}
.fe-mistakes .n{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;color:var(--honey)}
.fe .fe-mistakes h3{font-size:22px;margin:12px 0 12px}
.fe .fe-mistakes p{font-size:15.5px;line-height:1.65;margin:0 0 14px}
.fe .fe-mistakes p.fix{margin:0;padding-top:14px;border-top:1px solid rgba(244,237,228,.1);color:#EDE6D6}
.fe-mistakes p.fix b{color:var(--honey)}

.fe-intro{max-width:820px;margin:0 auto 70px;text-align:center}
.fe .fe-intro p.big{font-family:var(--serif);font-size:28px;line-height:1.4;color:var(--ink);margin:0 0 18px}
.fe .fe-intro p.big em{color:var(--acc)}
.fe .fe-intro p{font-size:17.5px;line-height:1.7}

.fe-steps{list-style:none;padding:0;margin:0 auto;max-width:1080px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.fe-steps li{background:var(--paper);border-radius:14px;padding:26px 24px;box-shadow:0 0 0 1px var(--line2),0 20px 40px -32px rgba(110,60,30,.5);position:relative}
.fe-steps li b{display:block;font-family:var(--serif);font-size:40px;font-weight:600;color:var(--acc);line-height:1}
.fe-steps h3{font-size:20px;margin:12px 0 8px}
.fe-steps p{margin:0;font-size:15px;color:var(--mut)}
.fe-steps li:not(:last-child)::after{content:"";position:absolute;right:-14px;top:44px;width:10px;height:10px;border-top:2px solid var(--acc);border-right:2px solid var(--acc);transform:rotate(45deg);opacity:.6}

.fe-vs,.fe-stack{max-width:960px;margin:0 auto;border-radius:14px;overflow:hidden}
.fe-vs{background:var(--paper);box-shadow:0 0 0 1px var(--line2),0 30px 60px -44px rgba(110,60,30,.45)}
.fe-vs .row,.fe-stack .row{display:grid;grid-template-columns:1fr 1fr}
.fe-vs .row span,.fe-stack .row span{padding:16px 22px;font-size:15.5px;line-height:1.55}
.fe-vs .row + .row{border-top:1px solid var(--line2)}
.fe-vs .row span:first-child{color:var(--mut2);text-decoration:line-through;text-decoration-color:rgba(154,74,47,.35)}
.fe-vs .row span:last-child{color:var(--ink);background:rgba(246,220,203,.25);position:relative;padding-left:46px}
.fe-vs .row span:last-child::before{content:"\2713";position:absolute;left:18px;top:17px;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;
  font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:800}
.fe-vs .row.hd span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mut);background:#F6EEE2;padding-left:22px}
.fe-vs .row.hd span:last-child{color:var(--acc);background:#F6E2D4}
.fe-vs .row.hd span::before{display:none}

.fe-answers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto}
.fe-answers > div{border:1px solid rgba(244,237,228,.1);border-radius:12px;padding:22px 20px;background:rgba(255,255,255,.03)}
.fe .fe-answers h3{font-size:18px;margin:0 0 8px;color:var(--honey)}
.fe .fe-answers p{margin:0;font-size:14.5px;line-height:1.6}

.fe-stack{margin-bottom:46px;border:1px solid rgba(244,237,228,.12);background:rgba(255,255,255,.025)}
.fe-stack .row + .row{border-top:1px solid rgba(244,237,228,.08)}
.fe .fe-stack .row span:first-child{color:rgba(244,237,228,.72)}
.fe-stack .row span:first-child b{display:block;color:#F6F1E4;font-size:16.5px;margin-bottom:3px}
.fe .fe-stack .row span:last-child{color:#EDE6D6;border-left:1px solid rgba(244,237,228,.08);display:flex;align-items:center;gap:10px}
.fe-stack .row:not(.hd):not(.tot) span:last-child::before{content:"\2192";color:var(--honey);font-weight:700}
.fe .fe-stack .row.hd span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--honey);background:rgba(242,160,123,.08)}
.fe .fe-stack .row.tot span{font-family:var(--serif);font-size:22px;color:#F6F1E4;background:rgba(242,160,123,.12)}
.fe .fe-stack .row.tot span:last-child{font-size:34px;color:var(--honey);font-weight:700}

.fe-promise{max-width:820px;margin:-40px auto 90px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:start;
  background:var(--paper);border-radius:14px;padding:28px 32px;box-shadow:0 0 0 1px rgba(154,74,47,.25),0 24px 50px -36px rgba(110,60,30,.5)}
.fe-promise::before{content:"30";grid-row:span 2;width:72px;height:72px;border-radius:50%;background:var(--acc);color:#fff;font-family:var(--serif);
  font-size:30px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--acc-soft)}
.fe-promise h3{margin:4px 0 4px;font-size:22px}
.fe-promise p{margin:0;color:var(--mut);font-size:15.5px}

.fe-choice{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:0 auto 70px}
.fe-choice > div{border:1px solid rgba(244,237,228,.12);border-radius:14px;padding:26px 28px;background:rgba(255,255,255,.03)}
.fe-choice > div.pick{border-color:rgba(242,160,123,.55);background:rgba(242,160,123,.08)}
.fe-choice .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,237,228,.55)}
.fe-choice .pick .k{color:var(--honey)}
.fe .fe-choice p{margin:10px 0 0;font-size:16.5px;line-height:1.6}
.fe-ps{max-width:700px;margin:64px auto 0;padding-top:34px;border-top:1px solid rgba(244,237,228,.12)}
.fe .fe-ps p{font-size:16px;line-height:1.7;margin:0 0 14px}
.fe .fe-ps p.sig{font-family:var(--serif);font-style:italic;font-size:19px;margin-bottom:26px}
.fe .fe-ps b{color:#F6F1E4}

@media (max-width:980px){
  .fe-mistakes,.fe-choice{grid-template-columns:minmax(0,1fr)}
  .fe-steps,.fe-answers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fe-steps li::after{display:none}
}
@media (max-width:640px){
  .fe-letter{padding:28px 22px;margin-bottom:56px}
  .fe .fe-letter p{font-size:16.5px}
  .fe-head.sm h2{font-size:28px}
  .fe .fe-intro p.big{font-size:22px}
  .fe-steps,.fe-answers{grid-template-columns:minmax(0,1fr)}
  .fe-vs .row,.fe-stack .row{grid-template-columns:minmax(0,1fr)}
  .fe-vs .row.hd,.fe-stack .row.hd{display:none}
  .fe-vs .row span,.fe-stack .row span{padding:12px 16px}
  .fe-vs .row span:last-child{padding-left:42px}
  .fe .fe-stack .row span:last-child{border-left:0;padding-top:0}
  .fe-promise{grid-template-columns:minmax(0,1fr);padding:24px 20px;margin-top:-20px}
  .fe-promise::before{grid-row:auto;width:56px;height:56px;font-size:24px}
}

/* ── Lighter (owner, 2026-10-13: "too dark"). The hero goes back to two lines, the plain line over the
   italic one, with the tracing underline under the italic line only, and stands on sunlit cream like
   the banner. The deep sections trade charcoal for Promptcraft's own terracotta: warm and bright, and
   still a clear change from the cream sections either side. ── */
.fe .fe-dark:not(.fe-lite){--fo:#9A4A2F;--honey:#FFE0BC;--fo-text:rgba(255,244,234,.88);
  background-color:#9A4A2F;background-image:radial-gradient(80% 60% at 50% 0%,rgba(255,200,150,.28),transparent 70%),linear-gradient(170deg,#A4502F,#8E4128)}
.fe .fe-dark:has(.fe-final){background-image:radial-gradient(55% 70% at 50% 100%,rgba(255,214,170,.35),transparent 70%),linear-gradient(170deg,#A4502F,#8E4128)}
.fe .fe-dark:not(.fe-lite) .fe-cta{background:#FFF6EA;color:var(--acc-dark);box-shadow:0 16px 34px -16px rgba(60,20,8,.6)}
.fe .fe-dark:not(.fe-lite) .fe-cta:hover{background:#fff;color:var(--acc-dark)}
.fe .fe-cream .fe-cta,.fe .fe-lite .fe-cta,.fe .fe-top .fe-cta{background:linear-gradient(180deg,#B5562F,var(--acc));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 30px -14px rgba(154,74,47,.7)}
.fe .fe-cream .fe-cta:hover,.fe .fe-lite .fe-cta:hover,.fe .fe-top .fe-cta:hover{background:linear-gradient(180deg,#A84E2A,var(--acc-dark));color:#fff}
.fe .fe-dark:not(.fe-lite) .fe-pill{color:#FFE0BC;background:rgba(255,255,255,.08)}
.fe .fe-dark:not(.fe-lite) .fe-row .k,.fe .fe-answers h3,.fe-mistakes .n,.fe-mistakes p.fix b,.fe-choice .pick .k{color:#FFE0BC}
.fe .fe-dark:not(.fe-lite) .fe-shot .sh{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 40px 70px -36px rgba(50,15,5,.7)}
.fe .fe-dark:not(.fe-lite) .fe-checks div::before,.fe .fe-dark:not(.fe-lite) .fe-offer li::before,.fe .fe-dark:not(.fe-lite) .fe-nos li::before{background:#FFE0BC;color:var(--acc-dark)}
.fe .fe-pay{box-shadow:0 30px 60px -30px rgba(60,20,8,.6)}

/* header: cream glass over every ground */
.fe .fe-top .in{background:rgba(255,250,242,.88);border-color:rgba(154,74,47,.18);box-shadow:0 14px 34px -22px rgba(90,40,20,.45)}
.fe .fe-brand{color:var(--ink)}
.fe .fe-top nav a.lnk{color:var(--mut)}
.fe .fe-top nav a.lnk:hover{color:var(--ink)}

/* hero on sunlit cream */
.fe .fe-hero.fe-lite{background:radial-gradient(48% 60% at 8% 0%,rgba(255,214,140,.5),transparent 70%),
  radial-gradient(42% 50% at 95% 8%,rgba(255,186,150,.4),transparent 72%),linear-gradient(#FFF9EF,#FBEFDD)}
.fe .fe-hero.fe-lite::before{background:none}
.fe .fe-hero h1{color:var(--ink);font-size:68px;max-width:1100px}
.fe .fe-hero h1 em{color:var(--acc);display:inline-block}
.fe .fe-hero h1 em::after{background:var(--acc);opacity:.6;height:2px}
.fe .fe-hero .fe-sub{background:rgba(255,255,255,.7);border-color:rgba(154,74,47,.14);box-shadow:0 20px 44px -34px rgba(110,60,30,.5)}
.fe .fe-hero .fe-sub p{color:var(--mut)}
.fe .fe-hero .fe-sub b{color:var(--ink)}
.fe .fe-hero .fe-sub u{color:var(--acc)}
.fe .fe-hero .fe-nos li{color:var(--ink2);background:rgba(255,255,255,.6);border:1px solid rgba(154,74,47,.15)}
.fe .fe-hero .fe-nos li::before{background:var(--ok);color:#fff}
.fe .fe-hero .fe-stats div{border-left-color:rgba(154,74,47,.15)}
.fe .fe-hero .fe-stats b{color:var(--acc)}
.fe .fe-hero .fe-stats span,.fe .fe-hero .fe-note{color:var(--mut)}
.fe .fe-hero .fe-banner{box-shadow:0 46px 90px -42px rgba(110,60,30,.55),0 0 90px -30px rgba(217,138,99,.35)}
.fe .fe-hero .fe-plan{box-shadow:0 0 0 1px rgba(154,74,47,.14),0 26px 50px -28px rgba(110,60,30,.45)}
@media (max-width:980px){.fe .fe-hero h1{font-size:50px}}
@media (max-width:640px){.fe .fe-hero h1{font-size:36px}}

/* ── Bright (owner, 2026-10-13: "light colours, not dark"; references: two bright W+ book-app pages).
   The whole page stands on light warm grounds that take turns (warm white, peach, butter, blush), and
   only two blocks carry colour: the storybook strip and the closing call, in a bright coral to
   terracotta. Borrowed as ideas, drawn in Promptcraft's own materials: a peach highlighter behind the
   key phrase of each headline, small highlight chips on the key words of the promise, filled pill
   labels, and large soft white cards. ── */
.fe{--b-white:#FFFDF9;--b-peach:#FFF3E9;--b-butter:#FFF8E6;--b-blush:#FFF0EC;--b-line:rgba(181,85,47,.12);
  --b-card:0 1px 0 rgba(181,85,47,.06),0 22px 50px -30px rgba(170,85,45,.38);--b-hl:rgba(255,196,140,.55)}

/* grounds */
.fe .fe-hero.fe-lite{background:radial-gradient(50% 60% at 10% 0%,rgba(255,210,150,.55),transparent 70%),
  radial-gradient(45% 55% at 92% 6%,rgba(255,175,150,.45),transparent 72%),linear-gradient(#FFFAF2,#FFF3E7)}
.fe #problem.fe-lite{background:var(--b-peach)}
.fe #mistakes.fe-lite{background:var(--b-white)}
.fe #made.fe-lite{background:linear-gradient(var(--b-blush),#FFF6F0)}
.fe #example.fe-cream{background:var(--b-white)}
.fe #how.fe-lite{background:var(--b-peach)}
.fe .fe-cream:not(#example):not(#compare):not(.alt){background:var(--b-white)}
.fe #pack.fe-lite{background:var(--b-butter)}
.fe #compare.fe-cream{background:var(--b-white)}
.fe #answers.fe-lite{background:var(--b-peach)}
.fe .fe-cream.alt{background:var(--b-white)}
.fe #offer.fe-lite{background:radial-gradient(60% 50% at 75% 30%,rgba(255,200,160,.55),transparent 70%),linear-gradient(#FFF1E4,#FFE8D8)}
.fe .fe-dark:not(.fe-lite){background-color:#E07A4F;
  background-image:radial-gradient(70% 60% at 15% 0%,rgba(255,214,160,.45),transparent 70%),linear-gradient(135deg,#F08C5E 0%,#D9653E 55%,#C5532F 100%)}
.fe .fe-dark:has(.fe-final){background-image:radial-gradient(60% 70% at 50% 100%,rgba(255,226,180,.45),transparent 70%),linear-gradient(135deg,#F08C5E 0%,#D9653E 55%,#C5532F 100%)}
.fe .fe-bar{background:linear-gradient(90deg,#D9653E,#C5532F,#D9653E)}

/* type: the highlighter behind the key phrase */
.fe .fe-lite h1 em,.fe .fe-lite h2 em,.fe .fe-cream h2 em{color:var(--acc);
  background:linear-gradient(transparent 62%,var(--b-hl) 62%,var(--b-hl) 92%,transparent 92%);padding:0 .08em}
.fe .fe-hero h1 em::after{display:none}
.fe .fe-dark:not(.fe-lite) h2 em{color:#FFF1D6}

/* labels: filled pills */
.fe .fe-sec .fe-pill{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.08em;border:0;border-radius:999px;padding:8px 16px;
  color:#B5552F;background:#FFE3D2;box-shadow:inset 0 0 0 1px rgba(181,85,47,.12)}
.fe .fe-sec .fe-pill::before{border-radius:50%;transform:none;width:7px;height:7px}
.fe .fe-dark:not(.fe-lite) .fe-pill{color:#fff;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* the hero promise: key words as chips */
.fe .fe-hero .fe-sub{background:#fff;border:0;border-radius:22px;box-shadow:var(--b-card)}
.fe .fe-hero .fe-sub b{background:#FFEBDD;color:#7A3420;border-radius:6px;padding:1px 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fe .fe-hero .fe-sub u{background:#FFF0C9;color:#7A4A10;border-radius:6px;padding:1px 6px}
.fe .fe-hero .fe-nos li{background:#fff;border:0;box-shadow:var(--b-card);border-radius:999px}
.fe .fe-hero .fe-stats div{background:#fff;border:0;border-radius:18px;box-shadow:var(--b-card)}
.fe .fe-hero .fe-stats{gap:16px}

/* cards on the light grounds: white, rounded, soft */
.fe .fe-lite .fe-mistakes > div,.fe .fe-lite .fe-answers > div,.fe .fe-lite .fe-checks div,.fe .fe-steps li,.fe .fe-why > div,.fe .fe-next > div,.fe .fe-fit > div,
.fe .fe-faq details,.fe .fe-letter,.fe .fe-promise,.fe .fe-vs,.fe .fe-lite .fe-stack,.fe .fe-lite .fe-all,.fe .fe-lite .s-terms,.fe .fe-classic .fe-eq .box{
  background:#fff;border:0;border-radius:22px;box-shadow:var(--b-card)}
.fe .fe-lite .fe-mistakes > div{padding:32px 28px}
.fe .fe-lite .fe-mistakes .n{color:#E07A4F}
.fe .fe-lite .fe-mistakes p{color:var(--mut)}
.fe .fe-lite .fe-mistakes p.fix{color:var(--ink2);border-top:1px dashed var(--b-line)}
.fe .fe-lite .fe-mistakes p.fix b{color:var(--acc)}
.fe .fe-lite .fe-answers h3{color:var(--acc)}
.fe .fe-lite .fe-answers p{color:var(--mut)}

/* how it works on peach */
.fe #how .fe-run li{background:#fff;border:0;color:var(--ink2);box-shadow:var(--b-card)}
.fe #how .fe-run li b{color:var(--acc)}
.fe #how .fe-row .k{color:var(--acc)}
.fe #how .fe-row p{color:var(--mut)}
.fe #how .fe-row p strong{color:var(--ink)}
.fe #how .fe-shot .sh{border-radius:16px;box-shadow:0 0 0 1px var(--b-line),0 40px 70px -40px rgba(170,85,45,.55)}
.fe #how .fe-shot figcaption,.fe #how .fe-note{color:var(--mut)}

/* the pack on butter */
.fe #pack .fe-checks div{color:var(--ink2)}
.fe #pack .fe-checks div::before{background:var(--ok);color:#fff}
.fe #pack .fe-checks div.wide{background:#FFEBDD}
.fe #pack .fe-from span{color:var(--mut)}
.fe #pack .fe-from b{background:var(--acc);color:#fff}
.fe #pack .fe-from i{color:var(--acc)}

/* the offer on peach */
.fe #offer .fe-stack .row span:first-child{color:var(--mut)}
.fe #offer .fe-stack .row span:first-child b{color:var(--ink)}
.fe #offer .fe-stack .row span:last-child{color:var(--ink2);border-left:1px solid var(--b-line)}
.fe #offer .fe-stack .row + .row{border-top:1px solid var(--b-line)}
.fe #offer .fe-stack .row:not(.hd):not(.tot) span:last-child::before{color:var(--acc)}
.fe #offer .fe-stack .row.hd span{color:var(--acc);background:#FFF1E6;font-family:var(--sans);font-weight:800}
.fe #offer .fe-stack .row.tot span{color:var(--ink);background:#FFE7D6}
.fe #offer .fe-stack .row.tot span:last-child{color:var(--acc)}
.fe #offer .fe-offer li{border-bottom-color:var(--b-line)}
.fe #offer .fe-offer li::before{background:var(--ok);color:#fff}
.fe #offer .fe-offer li b{color:var(--ink)}
.fe #offer .fe-offer li span{color:var(--mut)}
.fe #offer .fe-pay{border-radius:24px;box-shadow:0 0 0 2px #F3B48F,0 40px 80px -40px rgba(170,85,45,.6);animation:none}
.fe #offer .fe-all{padding:32px 34px}
.fe #offer .fe-all h3,.fe #offer .fe-all li b,.fe #offer .fe-all-r .now{color:var(--ink)}
.fe #offer .fe-all p,.fe #offer .fe-all-r .small,.fe #offer .fe-all li{color:var(--mut)}
.fe #offer .fe-all li{border-bottom-color:var(--b-line)}
.fe #offer .s-terms{color:var(--ink2)}
.fe #offer .s-terms b{color:var(--ink)}
.fe #offer .s-terms li{border-left-color:#F3B48F}
.fe #offer .s-terms a{color:var(--acc)}
.fe #offer .s-terms p{color:var(--mut);border-top-color:var(--b-line)}

/* buttons: one warm gradient on the light grounds, white on the coral blocks */
.fe .fe-lite .fe-cta,.fe .fe-cream .fe-cta,.fe .fe-top .fe-cta{background:linear-gradient(135deg,#F08C5E,#C5532F);color:#fff;border-radius:999px;
  box-shadow:0 14px 30px -12px rgba(197,83,47,.6)}
.fe .fe-lite .fe-cta:hover,.fe .fe-cream .fe-cta:hover,.fe .fe-top .fe-cta:hover{background:linear-gradient(135deg,#F39A70,#B84A28);color:#fff}
.fe .fe-dark:not(.fe-lite) .fe-cta{background:#fff;color:#B5482A;border-radius:999px}
.fe .fe-top .in{border-radius:999px}

/* the coral blocks: storybook strip in a white panel, the closing call */
.fe .fe-book-sec.fe-dark .fe-marquee{background:rgba(255,255,255,.16);border-radius:28px;margin:0 20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.fe .fe-book-sec.fe-dark .fe-book-facts li{background:#fff;color:var(--ink2);border:0}
.fe .fe-book-sec.fe-dark .fe-book-facts b{color:var(--acc)}
.fe .fe-dark:not(.fe-lite) .fe-note{color:rgba(255,255,255,.85)}
.fe .fe-choice > div{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);border-radius:22px}
.fe .fe-choice > div.pick{background:#fff;border-color:#fff}
.fe .fe-choice .pick p{color:var(--ink2)}
.fe .fe-choice .pick .k{color:var(--acc)}
.fe .fe-choice .k{color:rgba(255,255,255,.8)}
.fe .fe-ps{border-top-color:rgba(255,255,255,.3)}
@media (max-width:640px){.fe .fe-book-sec.fe-dark .fe-marquee{margin:0 8px;border-radius:20px}}
/* the phone buy bar, in the same light: white with the warm button */
.fe .fe-sticky{background:rgba(255,253,249,.96);color:var(--ink);box-shadow:0 0 0 1px var(--b-line),0 18px 40px -14px rgba(170,85,45,.5)}
.fe .fe-sticky .fe-cta{background:linear-gradient(135deg,#F08C5E,#C5532F);color:#fff}

/* ── Champagne & gold (owner, 2026-10-13): the two orange blocks (the storybook strip, the closing call)
   and the footer under them take one soft champagne blush, and each block is framed like a fine print:
   a double hairline in antique gold set in from the edge, with a slow glint that travels round it. ── */
.fe{--champ:linear-gradient(135deg,#FFF8F1 0%,#FCEBE0 45%,#F8E1D3 100%);--gold:#B8875A;--gold-l:rgba(184,135,90,.75)}
.fe .fe-dark.fe-lite.fe-lux{position:relative;isolation:isolate;background:var(--champ);padding:120px 0}
.fe .fe-lux::before{content:"";position:absolute;inset:26px;border-radius:34px;pointer-events:none;z-index:-1;
  border:1.5px solid var(--gold-l);box-shadow:inset 0 0 0 6px rgba(255,255,255,.75),inset 0 0 0 7px var(--gold-l),0 30px 80px -50px rgba(150,90,50,.55);
  background:radial-gradient(70% 60% at 50% 0%,rgba(255,255,255,.7),transparent 70%)}
.fe .fe-lux::after{content:"";position:absolute;inset:26px;border-radius:34px;pointer-events:none;padding:1.5px;
  background:conic-gradient(from var(--fe-a),transparent 0 70%,rgba(214,170,110,.0) 72%,#E8C38E 80%,#FFF3DC 83%,#E8C38E 86%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:fe-ring 9s linear infinite}
.fe .fe-lux .fe-pill{background:#fff;color:#9A6A3C;box-shadow:inset 0 0 0 1px var(--gold-l)}
.fe .fe-lux h2 em{color:#A8573A}

/* storybook strip: the pages on a cream mount */
.fe .fe-lux.fe-book-sec .fe-marquee{background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--gold-l);margin:0 64px}
.fe .fe-lux.fe-book-sec .fe-book-facts li{box-shadow:inset 0 0 0 1px var(--gold-l)}

/* the closing call on champagne */
.fe .fe-lux .fe-choice > div{background:rgba(255,255,255,.55);border:1px solid var(--gold-l)}
.fe .fe-lux .fe-choice > div.pick{background:#fff;border-color:var(--gold);box-shadow:0 20px 50px -30px rgba(150,90,50,.45)}
.fe .fe-lux .fe-choice .k{color:var(--mut)}
.fe .fe-lux .fe-choice .pick .k{color:#A8573A}
.fe .fe-lux .fe-choice p{color:var(--ink2)}
.fe .fe-lux .fe-final p{color:var(--mut)}
.fe .fe-lux .fe-ps{border-top:1px solid var(--gold-l)}
.fe .fe-lux .fe-ps p{color:var(--mut)}
.fe .fe-lux .fe-ps b{color:var(--ink)}
.fe .fe-lux .fe-ps p.sig{color:#9A6A3C}

/* footer, on the FE page only: the same champagne, with a gold hairline above it */
body.sales:has(.fe-hero) .s-foot-top{background:#FFF8F1;border-top:1px solid var(--gold-l,rgba(197,154,107,.45))}
body.sales:has(.fe-hero) .s-foot-bar{background:#FBEBDF;border-top:1px solid rgba(197,154,107,.3)}
body.sales:has(.fe-hero) .s-foot a{color:#9A4A2F;text-decoration-color:rgba(154,74,47,.3)}

@media (max-width:640px){
  .fe .fe-dark.fe-lite.fe-lux{padding:80px 0}
  .fe .fe-lux::before,.fe .fe-lux::after{inset:10px;border-radius:22px}
  .fe .fe-lux.fe-book-sec .fe-marquee{margin:0 18px}
}
@media (prefers-reduced-motion:reduce){.fe .fe-lux::after{animation:none;display:none}}

/* ── Gilded edges (owner, 2026-10-13): the champagne colour stays, but the fine frame was meant for the
   cards and pictures, not round whole sections. So the section frames go, and every card and picture
   frame on the page takes a thin gold-to-peach edge (a gradient border: the card's own colour on the
   padding box, the gilding on the border box). On hover each one lifts, glows warm, and the gilding
   turns slowly so a glint runs round the edge. --cbg is the card's own colour. ── */
.fe .fe-lux::before,.fe .fe-lux::after{display:none}
.fe{--gild:conic-gradient(from var(--fe-a),#F3D2B3,#E2B07F 14%,#FFF1DE 26%,#EBBE92 42%,#F6DCC2 58%,#DDA778 74%,#FBE6D2 88%,#F3D2B3)}
.fe .fe-lite .fe-mistakes > div,.fe .fe-lite .fe-answers > div,.fe .fe-steps li,.fe .fe-why > div,.fe .fe-next > div,.fe .fe-fit > div,
.fe .fe-faq details,.fe .fe-promise,.fe .fe-lite .fe-checks div,.fe .fe-vs,.fe .fe-lite .fe-stack,.fe .fe-lite .fe-all,.fe .fe-letter,
.fe .fe-lux .fe-choice > div,.fe .fe-hero .fe-stats div,.fe .fe-hero .fe-sub,.fe .fe-lite .fe-one-src .card,.fe .fe-story,
.fe .fe-classic .fe-eq .box:not(.out):not(.mid),.fe .fe-lite .s-terms,.fe #how .fe-run li,.fe .fe-hero .fe-nos li,.fe .fe-book-facts li{
  --cbg:#fff;border:1.5px solid transparent;background:linear-gradient(var(--cbg),var(--cbg)) padding-box,var(--gild) border-box;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.fe .fe-lite .fe-checks div.wide{--cbg:#FFEFE3}
.fe .fe-lux .fe-choice > div{--cbg:#FFF8F2}
.fe .fe-story{--cbg:#FFFBF7}
.fe .fe-lite .fe-mistakes > div:hover,.fe .fe-lite .fe-answers > div:hover,.fe .fe-steps li:hover,.fe .fe-why > div:hover,.fe .fe-next > div:hover,
.fe .fe-fit > div:hover,.fe .fe-promise:hover,.fe .fe-lite .fe-checks div:hover,.fe .fe-lux .fe-choice > div:hover,.fe .fe-hero .fe-stats div:hover,
.fe .fe-lite .fe-one-src .card:hover,.fe .fe-classic .fe-eq .box:not(.out):not(.mid):hover,.fe #how .fe-run li:hover,.fe .fe-hero .fe-nos li:hover,.fe .fe-book-facts li:hover{
  transform:translateY(-6px);animation:fe-ring 3.5s linear infinite;
  box-shadow:0 0 0 4px rgba(240,196,160,.22),0 32px 60px -30px rgba(170,85,45,.55)}
/* large blocks and the questions: the glint and the glow, without the lift */
.fe .fe-faq details:hover,.fe .fe-vs:hover,.fe .fe-lite .fe-stack:hover,.fe .fe-lite .fe-all:hover,.fe .fe-letter:hover,.fe .fe-story:hover,
.fe .fe-hero .fe-sub:hover,.fe .fe-lite .s-terms:hover{animation:fe-ring 5s linear infinite;box-shadow:0 0 0 4px rgba(240,196,160,.2),0 30px 60px -36px rgba(170,85,45,.5)}

/* picture frames: the same gilding round the paper mount */
.fe .fe-kind .img,.fe .fe-story figure,.fe .fe-shot .sh,.fe .fe-pay{border:1.5px solid transparent;
  background:linear-gradient(var(--cbg,#FFFDF9),var(--cbg,#FFFDF9)) padding-box,var(--gild) border-box}
.fe .fe-shot .sh{--cbg:#FBF8F2}
.fe .fe-pay{--cbg:var(--paper);border-width:2px;box-shadow:0 0 0 6px rgba(255,255,255,.6),0 40px 80px -40px rgba(170,85,45,.55);animation:fe-ring 6s linear infinite}
.fe .fe-kind:hover .img,.fe .fe-story figure:hover,.fe .fe-shot:hover .sh{animation:fe-ring 3s linear infinite;
  box-shadow:0 0 0 4px rgba(240,196,160,.25),0 36px 60px -30px rgba(170,85,45,.55)}
.fe .fe-track img{box-shadow:0 0 0 5px var(--paper),0 0 0 6.5px #E9C29C,0 26px 44px -26px rgba(110,60,30,.5)}
.fe .fe-track img:hover{box-shadow:0 0 0 5px var(--paper),0 0 0 7px #DDA778,0 0 26px 6px rgba(240,196,160,.45),0 36px 56px -26px rgba(110,60,30,.55)}
.fe .fe-banner{background:var(--gild);padding:3px}
@media (prefers-reduced-motion:reduce){.fe *{animation:none!important}}

/* ── JV page (jv.php, 2026-10-18): the front-end page's look and materials, with its own blocks: the launch
   facts strip, the review-access card with the vendor, the funnel table with the commission column, who to
   mail, and the swipes as fold-out cards with a copy button. Cards carry the same gilded edge. ── */
.fe.jv .fe-hero h1{font-size:64px}
.jv-launch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1000px;margin:34px auto 0}
.jv-launch > div,.jv-funnel,.jv-review,.jv-who > div,.jv-swipe,.fe.jv .fe-cream .fe-answers > div{--cbg:#fff;border:1.5px solid transparent;border-radius:20px;
  background:linear-gradient(var(--cbg),var(--cbg)) padding-box,var(--gild) border-box;box-shadow:var(--b-card);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.jv-launch > div{padding:16px 18px;text-align:center}
.jv-launch .k,.jv-vendor > span:not(.av){display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:4px}
.jv-launch b{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);line-height:1.3}
.jv-launch > div:hover,.jv-who > div:hover,.fe.jv .fe-cream .fe-answers > div:hover{transform:translateY(-6px);animation:fe-ring 3.5s linear infinite;
  box-shadow:0 0 0 4px rgba(240,196,160,.22),0 32px 60px -30px rgba(170,85,45,.55)}
.jv-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.jv-ghost{display:inline-flex;align-items:center;padding:16px 26px;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);text-decoration:none;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(181,85,47,.35)}
.jv-ghost:hover{background:#FFF3EA}

.jv-review{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:center;max-width:1040px;margin:0 auto;padding:40px 44px}
.jv-review h2{font-size:40px;margin:0 0 14px}
.jv-review p{color:var(--mut);font-size:16.5px;line-height:1.7}
.jv-review a{color:var(--acc)}
.jv-vendor{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px;border-radius:18px;background:#FFF5EE}
.jv-vendor .av{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:28px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,#F08C5E,#B5552F);box-shadow:0 0 0 5px #fff,0 0 0 6.5px #E2B07F;margin-bottom:8px}
.jv-vendor b{font-family:var(--serif);font-size:22px;color:var(--ink)}
.jv-vendor a:not(.fe-cta){font-size:14.5px;color:var(--acc)}
.jv-vendor .fe-cta{margin-top:10px}

.jv-funnel{max-width:1080px;margin:0 auto;overflow:hidden;padding:0}
.jv-funnel .row{display:grid;grid-template-columns:150px 1fr 130px 120px;align-items:center}
.jv-funnel .row + .row{border-top:1px solid var(--b-line)}
.jv-funnel .row > span{padding:16px 18px;font-size:14.5px;line-height:1.55;color:var(--mut)}
.jv-funnel .st{font-weight:800;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)!important}
.jv-funnel .pr b{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:2px}
.jv-funnel .pz{font-family:var(--serif);font-size:20px!important;color:var(--ink)!important;font-weight:600}
.jv-funnel .pz small{display:block;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--mut)}
.jv-funnel .cm{font-family:var(--serif);font-size:20px!important;font-weight:700;color:var(--ok)!important;background:#F2F7F1}
.jv-funnel .row.hd > span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);background:#FFF1E6;padding-top:12px;padding-bottom:12px}
.jv-funnel .row.hd .cm{color:var(--ok)!important;font-family:var(--sans);font-size:12px!important}
.jv-funnel .row:not(.hd):hover > span{background:#FFF8F2}
.jv-funnel .row:not(.hd):hover .cm{background:#E8F2E6}
.jv-funnel .row.tot > span{background:#FFE9DA}
.jv-funnel .row.tot .cm{background:#DCEFD8;font-size:24px!important}

.fe.jv .fe-cream .fe-answers h3{color:var(--acc)}
.fe.jv .fe-cream .fe-answers p{color:var(--mut)}
.jv-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1000px;margin:0 auto}
.jv-who > div{padding:18px 22px 18px 54px;position:relative}
.jv-who > div::before{content:"\2713";position:absolute;left:18px;top:19px;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.jv-who b{display:block;color:var(--ink);font-size:16px}
.jv-who span{color:var(--mut);font-size:14.5px}
.jv-three li b{font-size:34px}

.jv-swipes{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.jv-swipe summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 24px;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.jv-swipe summary::-webkit-details-marker{display:none}
.jv-swipe summary::before{content:"+";flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#FFE3D2;color:var(--acc);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);transition:transform .3s;order:-1}
.jv-swipe summary span{flex:1}
.jv-swipe[open] summary::before{transform:rotate(45deg)}
.jv-swipe[open]{animation:fe-ring 6s linear infinite}
.jv-copy{border:0;border-radius:999px;padding:8px 16px;font-weight:700;font-size:13px;color:#fff;cursor:pointer;background:linear-gradient(135deg,#F08C5E,#C5532F)}
.jv-swipe .body{padding:0 26px 24px}
.jv-swipe .subs{background:#FFF5EE;border-radius:12px;padding:12px 16px;font-size:14.5px;color:var(--ink2)}
.jv-swipe .subs b{color:var(--acc);margin-right:6px}
.jv-swipe .mail p{font-size:15.5px;line-height:1.7;color:var(--ink2);margin:0 0 12px}

.jv-contact{margin-bottom:10px}
.jv-contact h3{margin:0 0 10px;font-size:24px}
.jv-rules{margin:0;padding:0;list-style:none}
.jv-rules li{position:relative;padding:8px 0 8px 30px;color:var(--mut);font-size:15.5px}
.jv-rules li::before{content:"\2715";position:absolute;left:0;top:10px;width:20px;height:20px;border-radius:50%;background:#FBE3D8;color:var(--acc);font-size:10px;
  display:flex;align-items:center;justify-content:center;font-weight:800}
.fe .fe-lux .fe-ps p.jv-disc{font-size:13.5px;color:var(--mut2)}

@media (max-width:980px){
  .jv-launch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jv-review{grid-template-columns:minmax(0,1fr)}
  .jv-funnel .row{grid-template-columns:110px 1fr 100px 90px}
}
@media (max-width:640px){
  .fe.jv .fe-hero h1{font-size:34px}
  .jv-launch{grid-template-columns:minmax(0,1fr)}
  .jv-review{padding:26px 20px}
  .jv-review h2{font-size:28px}
  .jv-who{grid-template-columns:minmax(0,1fr)}
  .jv-funnel .row{grid-template-columns:1fr auto}
  .jv-funnel .row.hd{display:none}
  .jv-funnel .row > span{padding:8px 14px}
  .jv-funnel .st{grid-column:1/-1;padding-top:14px!important;padding-bottom:0!important}
  .jv-funnel .pr{grid-column:1/-1}
  .jv-funnel .cm{text-align:right}
  .jv-swipe summary{font-size:16px;padding:16px}
  .jv-swipe .body{padding:0 16px 18px}
}
/* JV: the vendor's own photo (her WarriorPlus profile picture) in the round frame, and the three join
   steps centred as a row of three rather than left in a four-column grid */
.jv-vendor .av{display:block;overflow:hidden;background:#fff}
.jv-vendor .av img{display:block;width:100%;height:100%;object-fit:cover}
.fe .jv-three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin-left:auto;margin-right:auto}
.fe .jv-three li{text-align:center}
@media (max-width:980px){.fe .jv-three{grid-template-columns:minmax(0,1fr);max-width:420px}}

/* ── The shared header, the Thanks page and the policy pages in the front end's light look (owner,
   2026-10-19: the whole funnel in the FE colours). The dark header bar becomes the FE page's cream
   glass; the plain pages get the sunlit hero, the pill label, the coral pill button, white cards
   and the champagne footer. ── */
.s-top{background:rgba(255,248,241,.95);color:var(--ink);border-bottom:1px solid rgba(181,85,47,.14);box-shadow:0 10px 30px -24px rgba(110,60,30,.5)}
.s-brand{color:var(--ink)}
.s-brand .mark{background:linear-gradient(135deg,#F08C5E,#C5532F);color:#fff}
.s-top nav a{color:#6B6459}
.s-top nav a:hover{color:var(--ink)}
.s-top nav a.s-login{border-color:rgba(181,85,47,.3);color:#B5552F}
body.sales:not(:has(.fe)):not(:has(.o)){background:#FFFAF3}
body.sales:not(:has(.fe)):not(:has(.o)) .s-hero{background:radial-gradient(50% 70% at 10% 0%,rgba(255,210,150,.45),transparent 70%),
  radial-gradient(45% 60% at 92% 6%,rgba(255,175,150,.35),transparent 72%),linear-gradient(#FFFAF2,#FFF3E7);padding:64px 0 52px}
.s-kicker{background:#FFE3D2;color:#B5552F;border-radius:999px;font-weight:800;letter-spacing:.08em;box-shadow:inset 0 0 0 1px rgba(181,85,47,.12)}
.s-btn{background:linear-gradient(135deg,#F08C5E,#C5532F);border-radius:999px;box-shadow:0 14px 30px -12px rgba(197,83,47,.6)}
.s-btn:hover{background:linear-gradient(135deg,#F39A70,#B84A28)}
.s-section{border-top-color:rgba(181,85,47,.12)}
.s-card{background:#fff;border:1.5px solid #EBCBAE;border-radius:20px;box-shadow:0 1px 0 rgba(181,85,47,.06),0 22px 50px -30px rgba(170,85,45,.38)}
body.sales:not(:has(.fe)):not(:has(.o)) .s-foot-top{background:#FFF8F1;border-top:1px solid rgba(184,135,90,.5)}
body.sales:not(:has(.fe)):not(:has(.o)) .s-foot-bar{background:#FBEBDF;border-top:1px solid rgba(184,135,90,.3)}
body.sales:not(:has(.fe)):not(:has(.o)) .s-foot a{color:#9A4A2F;text-decoration-color:rgba(154,74,47,.3)}

/* Less air (owner, 2026-10-19: the gap under the hero's button looked empty). Sections were 128px top and
   bottom, so two of them met with ~230px of nothing, and the hero's peach ran straight into the letter's
   peach. Sections are now 84px (56px on a phone), the hero ends 64px under its button, and the letter
   stands on white, with the three mistakes on peach, so each change of section shows. */
.fe .fe-sec{padding:84px 0}
.fe .fe-dark.fe-lite.fe-lux{padding:96px 0}
.fe .fe-hero{padding-bottom:64px}
.fe .fe-classic{padding:84px 0}
.fe .fe-head{margin-bottom:46px}
.fe #problem.fe-lite{background:var(--b-white)}
.fe #mistakes.fe-lite{background:var(--b-peach)}
.fe .fe-letter{margin-bottom:60px}
@media (max-width:640px){
  .fe .fe-sec,.fe .fe-classic{padding:56px 0}
  .fe .fe-dark.fe-lite.fe-lux{padding:64px 0}
  .fe .fe-hero{padding-bottom:44px}
  .fe .fe-head{margin-bottom:30px}
}
.jv-launch b small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--mut);margin-top:3px}

/* JV cash contest: three prize cards with a medal, the amount large, the qualifying rule small; the rules
   in a soft panel under them. */
.jv-prizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:960px;margin:0 auto}
.jv-prizes > div{--cbg:#fff;text-align:center;padding:30px 24px 26px;border:1.5px solid transparent;border-radius:22px;box-shadow:var(--b-card);
  background:linear-gradient(var(--cbg),var(--cbg)) padding-box,var(--gild) border-box;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.jv-prizes > div:hover{transform:translateY(-6px);animation:fe-ring 3.5s linear infinite;box-shadow:0 0 0 4px rgba(240,196,160,.22),0 32px 60px -30px rgba(170,85,45,.55)}
.jv-prizes .medal{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;font-family:var(--serif);
  font-size:20px;font-weight:700;color:#fff;margin-bottom:10px;box-shadow:0 0 0 4px #fff,0 10px 20px -10px rgba(0,0,0,.4)}
.jv-prizes .p1 .medal{background:linear-gradient(135deg,#F6CF63,#C8952A)}
.jv-prizes .p2 .medal{background:linear-gradient(135deg,#DCDCDC,#9C9C9C)}
.jv-prizes .p3 .medal{background:linear-gradient(135deg,#E0A272,#A8603A)}
.jv-prizes b{display:block;font-family:var(--serif);font-size:20px;color:var(--ink)}
.jv-prizes strong{display:block;font-family:var(--serif);font-size:54px;line-height:1.1;color:#A8573A;margin:4px 0 8px}
.jv-prizes .q{display:block;font-size:14px;line-height:1.5;color:var(--mut)}
.jv-contest-rules{max-width:960px;margin:22px auto 0;text-align:center;font-size:14.5px;line-height:1.7;color:var(--mut);
  background:rgba(255,255,255,.6);border:1px solid rgba(184,135,90,.35);border-radius:16px;padding:18px 24px}
.jv-contest-rules b{color:var(--ink)}
@media (max-width:640px){.jv-prizes{grid-template-columns:minmax(0,1fr);gap:12px}.jv-prizes strong{font-size:44px}.jv-contest-rules{padding:14px 16px}}