/* Funnel test page (index.html of the funnel copy). Builds on site.css tokens. */
.fn section{padding:76px 0}
.fn-announce{background:#141f31;text-align:center}
.fn-announce a{display:block;padding:10px 16px;color:var(--cream);text-decoration:none;font:600 .72rem/1.5 var(--sans);letter-spacing:.02em}
.fn-announce b{color:var(--gold-light)}
.fn-announce a:hover{text-decoration:underline}

/* hero */
.fn .fn-hero{padding:64px 0 40px;background:var(--cream)}
.fn-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.fn-badge{display:inline-flex;align-items:center;gap:10px;font:600 .68rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
.fn-badge span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold-light);font:600 1rem var(--display);letter-spacing:0}
.fn-hero h1{font-size:clamp(2.7rem,5vw,4.3rem)}
.fn-lede{font-size:1.28rem;color:#3d4244;max-width:560px}
.fn-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:26px 0 12px}
.fn-ghost{display:inline-flex;align-items:center;min-height:52px;padding:0 20px;border:1px solid var(--rule);color:var(--navy);text-decoration:none;font:600 .8rem var(--sans);background:var(--paper)}
.fn-ghost:hover{border-color:var(--navy)}
.fn-fan{position:relative;height:440px}
.fn-fan img{position:absolute;bottom:0;width:46%;height:auto;box-shadow:12px 18px 30px #17243638}
.fn-fan img:nth-child(1){left:2%;transform:rotate(-8deg);bottom:18px}
.fn-fan img:nth-child(2){left:20%;transform:rotate(-2deg);bottom:34px;z-index:1}
.fn-fan img:nth-child(3){left:38%;transform:rotate(4deg);bottom:22px;z-index:2}
.fn-fan .fn-fan-bonus{left:57%;width:38%;transform:rotate(10deg);bottom:4px;z-index:3}
.fn-fan-sm{height:230px;margin:34px auto 14px;max-width:380px}

/* offer cards */
.fn .fn-offers{background:var(--cream-deep);padding:56px 0 48px}
.fn-cards{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:22px;align-items:start}
.fn-col{display:grid;gap:22px}
.fn-card{background:var(--paper);border:1px solid var(--rule);padding:24px 22px 20px;text-align:center;position:relative}
.fn-card h3{font-size:1.6rem;margin:10px 0 6px}
.fn-card-cover{width:130px;margin:6px auto 4px;box-shadow:8px 12px 22px #17243630}
.fn-tag{font:600 .64rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.fn-price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 12px;margin:6px 0 10px}
.fn-price b{font:600 2.6rem/1 var(--display);color:var(--navy)}
.fn-price span{font:600 .64rem var(--sans);color:var(--muted);flex-basis:100%}
.fn-price s{font:400 1.5rem var(--display);color:var(--muted)}
.fn-price-set b{font-size:3.6rem}
.fn-price-set span{color:var(--green)}
.fn-bullets{list-style:none;margin:0 0 18px;padding:0;text-align:left}
.fn-bullets li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--rule);font-size:1rem;line-height:1.35}
.fn-bullets li::before{content:'✓';position:absolute;left:0;top:9px;font:600 .78rem var(--sans);color:var(--green)}
.fn-mini{font:600 .62rem/1.7 var(--sans);color:var(--muted);margin:10px 0 0;letter-spacing:.02em}
.fn-btn-quiet{background:transparent;color:var(--navy);padding:15px 14px;min-height:48px;font-size:.78rem}
.fn-btn-quiet:hover{background:var(--navy);color:var(--cream)}
.fn-btn-gold{background:var(--gold-light);border-color:var(--gold-light);color:var(--navy)}
.fn-btn-gold:hover{background:#e6d5b0}
.fn-card-set{position:sticky;top:96px;background:var(--navy);border-color:var(--navy);color:var(--cream);padding:38px 30px 28px;box-shadow:0 24px 50px #17243638}
.fn-card-set h3{color:var(--cream);font-size:2.1rem}
.fn-card-set .fn-tag{color:var(--gold-light)}
.fn-card-set .fn-price b{color:var(--cream)}
.fn-card-set .fn-price s{color:#a9b1bd}
.fn-card-set .fn-price span{color:var(--gold-light)}
.fn-card-set .fn-bullets li{border-color:#3a4a62;color:#e6e2d8}
.fn-card-set .fn-bullets li::before{color:var(--gold-light)}
.fn-card-set .fn-mini{color:#c9c2b4}
.fn-ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold-light);color:var(--navy);font:600 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;margin:0;white-space:nowrap}
.fn-card-bonus{background:transparent;border-style:dashed}
.fn-bonus-line{font-size:1rem;color:var(--muted);margin:0}
.fn-trust{list-style:none;margin:34px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.fn-trust li{font-size:.98rem;color:var(--muted);line-height:1.35}
.fn-trust b{display:block;font:600 .7rem/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}

/* page strip and stats */
.fn .fn-strip{padding:60px 0 36px}
.fn-strip-head{text-align:center;margin-bottom:26px}
.fn-strip-head h2{margin-bottom:6px}
.fn-strip-head p:last-child{color:var(--muted);margin:0;font-size:1.05rem}
.fn-strip-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fn-strip-row figure{margin:0}
.fn-strip-row a{display:block;background:var(--paper);border:1px solid var(--rule);padding:10px;transition:transform .15s}
.fn-strip-row a:hover{transform:translateY(-3px)}
.fn-strip-row img{width:100%;height:auto}
.fn-strip-row figcaption{margin-top:10px;font:600 1.15rem/1.25 var(--display);color:var(--navy)}
.fn-strip-row figcaption span{display:block;font:600 .6rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fn-strip-row figcaption small{display:block;font:400 .9rem var(--serif);color:var(--muted)}
.fn .fn-stats{padding:34px 0;background:var(--cream)}
.fn-stats dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fn-stats dl div{padding:22px 10px;text-align:center}
.fn-stats dl div+div{border-left:1px solid var(--rule)}
.fn-stats dt{font:600 2.7rem/1 var(--display);color:var(--navy)}
.fn-stats dd{margin:8px 0 0;font:600 .64rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* author */
.fn .fn-author{background:var(--cream-deep)}
.fn-author-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.fn-author-photos{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:end}
.fn-author-photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.fn-author-photos img:last-child{aspect-ratio:3/4}
.fn-author h2{font-size:clamp(1.9rem,3vw,2.6rem);font-style:normal}
.fn-author p:not(.kicker){font-size:1.15rem}
.fn-sign{font:400 italic 1.7rem var(--serif);color:var(--navy);margin:20px 0 0}

/* long book blocks */
.fn-center-head{text-align:center;max-width:680px;margin:0 auto 44px}
.fn-center-head p:last-child{color:var(--muted)}
.fn-feature{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:center;padding:44px 0;border-top:1px solid var(--rule)}
.fn-feature-flip{grid-template-columns:1.3fr .7fr}.fn-feature-flip .fn-feature-media{order:2}
.fn-feature-media{text-align:center}
.fn-feature-media img{width:min(300px,100%);box-shadow:12px 18px 30px #17243638}
.fn-feature h3{font-size:clamp(2rem,3.3vw,2.9rem)}
.fn-feature h3 em{font-family:var(--serif);font-weight:400;color:var(--gold);font-size:.72em}
.fn-feature-copy>p:not(.kicker):not(.fn-mini):not(.fn-feature-set){font-size:1.12rem}
.fn-feature details{border-top:1px solid var(--rule);margin:8px 0 18px}
.fn-feature summary{font-size:1.25rem}
.fn-toc{columns:2;column-gap:28px;margin:14px 0 4px;padding-left:18px;font-size:1rem;line-height:1.4}
.fn-toc li{break-inside:avoid;margin-bottom:6px}
.fn-feature-buy{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fn-feature-buy .fn-price{margin:0;justify-content:flex-start}
.fn-feature-buy .fn-price span{flex-basis:auto}
.fn-feature-set{margin:8px 0 0}
.fn-feature-set a{font:600 .74rem var(--sans);color:var(--gold);text-decoration:none}
.fn-feature-set a:hover{text-decoration:underline}
.fn-feature-bonus .fn-feature-media img{box-shadow:12px 18px 30px #17243630}

/* set offer */
.fn .fn-set{background:var(--navy);color:var(--cream)}
.fn-set-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.fn-set h2{color:var(--cream)}
.fn-set h2 em,.fn-set .kicker{color:var(--gold-light)}
.fn-set-grid>div:first-child>p:not(.kicker){color:#dedbd1;font-size:1.15rem}
.fn-set-box{background:var(--paper);color:var(--ink);padding:28px 28px 22px}
.fn-set-box ul{list-style:none;margin:0 0 6px;padding:0}
.fn-set-box li{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.fn-set-box li img{width:40px;height:auto}
.fn-set-box li b{display:block;font:600 1.15rem/1.2 var(--display);color:var(--navy)}
.fn-set-box li span{font-size:.92rem;color:var(--muted)}
.fn-set-box li s{color:var(--muted)}
.fn-set-box li em{font:600 .7rem var(--sans);color:var(--green);font-style:normal;text-transform:uppercase;letter-spacing:.1em}
.fn-set-box .fn-price{margin:16px 0 14px}
.fn-set-box .fn-mini{text-align:center}

/* popup */
.fn-pop{border:0;padding:0;width:min(760px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);background:var(--cream);color:var(--ink);box-shadow:0 40px 100px #0008;overflow:hidden}
.fn-pop:focus{outline:none}
.fn-pop[open]{animation:fnPopIn .35s cubic-bezier(.2,.8,.2,1)}
.fn-pop::backdrop{background:#0c1725d9;animation:fnFade .3s ease}
@keyframes fnPopIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fnFade{from{opacity:0}to{opacity:1}}
html.fn-lock{overflow:hidden}
.fn-pop-in{display:grid;grid-template-columns:.9fr 1.1fr;max-height:calc(100dvh - 24px);overflow:auto}
.fn-pop-art{background:var(--navy);color:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:34px 22px 26px;text-align:center}
.fn-pop-fan{height:250px;width:100%;max-width:300px;margin:0 auto 18px}
.fn-pop-fan img{box-shadow:8px 12px 22px #0007}
.fn-pop-art p{margin:0;font:600 1.35rem/1.25 var(--display);color:var(--cream)}
.fn-pop-art p span{display:block;margin-top:6px;font:600 .62rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)}
.fn-pop-body{position:relative;padding:34px 34px 26px;text-align:center;display:flex;flex-direction:column;align-items:center}
.fn-pop-body .kicker{margin-bottom:10px}
.fn-pop h2{font-size:2.35rem;margin-bottom:10px;text-wrap:balance}
.fn-pop h2 em{font-size:.86em}
.fn-pop-text{margin:0 0 16px;color:var(--muted);font-size:1.05rem;line-height:1.45;max-width:320px}
.fn-pop-close{position:absolute;top:6px;right:8px;width:40px;height:40px;display:grid;place-items:center;background:none;border:0;font-size:1.7rem;line-height:1;color:var(--muted);cursor:pointer;border-radius:50%}
.fn-pop-close:hover{color:var(--navy);background:var(--cream-deep)}
.fn-pop-close:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.fn-seal-box{position:relative;width:100%;max-width:300px;height:132px;display:grid;place-items:center;margin:0 0 14px}
.fn-code{position:absolute;inset:6px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px dashed var(--gold);background:var(--paper);opacity:0;transform:scale(.92);transition:opacity .4s .25s,transform .4s .25s}
.fn-code small{font:600 .6rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fn-code b{font:600 2.3rem/1 var(--sans);letter-spacing:.16em;color:var(--navy)}
.fn-code span{font-size:.92rem;color:var(--green)}
.fn-seal{position:relative;width:124px;height:124px;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;transition:transform .2s;filter:drop-shadow(0 10px 14px #3f1d2255)}
.fn-seal:hover{transform:rotate(-4deg) scale(1.04)}
.fn-seal:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.fn-seal-half{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,#9b4349 0,#6e252b 45%,#4e171c 100%);box-shadow:inset 0 0 0 7px #ffffff10,inset 0 0 0 9px #00000030,inset 0 0 0 14px #ffffff0c;transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .45s}
.fn-seal-half i{font:600 3.3rem/1 var(--display);font-style:normal;color:#e9c99b;text-shadow:0 1px 0 #00000055,0 -1px 0 #ffffff22}
.fn-seal-l{clip-path:polygon(0 0,53% 0,46% 22%,56% 41%,45% 60%,54% 80%,48% 100%,0 100%)}
.fn-seal-r{clip-path:polygon(53% 0,100% 0,100% 100%,48% 100%,54% 80%,45% 60%,56% 41%,46% 22%)}
.fn-seal-hint{display:none}
.fn-pop.is-open .fn-seal{pointer-events:none;transform:none}
.fn-pop.is-open .fn-seal-l{transform:translate(-70px,18px) rotate(-28deg);opacity:0}
.fn-pop.is-open .fn-seal-r{transform:translate(70px,18px) rotate(28deg);opacity:0}
.fn-pop.is-open .fn-code{opacity:1;transform:none}
.fn-pop-price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:2px 10px;margin:0 0 14px}
.fn-pop-price s{font:400 1.4rem var(--display);color:var(--muted)}
.fn-pop-price b{font:600 2.4rem/1 var(--display);color:var(--navy)}
.fn-pop-price span{flex-basis:100%;font:600 .62rem var(--sans);letter-spacing:.06em;color:var(--muted);margin-top:4px}
.fn-pop .btn{max-width:320px}
.fn-pop-no{margin-top:10px;background:none;border:0;padding:8px;font:400 1rem var(--serif);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fn-pop-no:hover{color:var(--navy)}
.fn-pop .fn-mini{margin-top:4px}
@media(max-width:640px){
  .fn-pop-in{grid-template-columns:1fr}
  .fn-pop-art{flex-direction:row;align-items:center;gap:18px;padding:14px 56px 14px 18px;text-align:left;justify-content:flex-start}
  .fn-pop .fn-pop-fan{height:92px;width:120px;max-width:none;margin:0;flex:0 0 120px}
  .fn-pop-art p{font-size:1.15rem}
  .fn-pop-body{padding:22px 20px 18px}
  .fn-pop h2{font-size:2rem}
  .fn-seal-box{height:112px;margin-bottom:10px}
  .fn-pop-text{margin-bottom:10px}
  .fn-pop-no{margin-top:4px}
  .fn-seal{width:108px;height:108px}
  .fn-pop-close{top:-96px;right:6px;color:var(--cream)}
  .fn-pop-close:hover{background:#ffffff1a;color:var(--cream)}
}
@media(prefers-reduced-motion:reduce){.fn-pop[open],.fn-pop::backdrop{animation:none}.fn-seal-half,.fn-code{transition:none}}

/* page reader */
.fn-page-dialog .sample-full{display:block}

/* mobile buy bar */
.fn-buybar{display:none}
@media(max-width:760px){
  .fn-buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--navy);color:var(--cream);transform:translateY(110%);transition:transform .25s;box-shadow:0 -8px 24px #0003}
  .fn-buybar.show{transform:none}
  .fn-buybar b{display:block;font:600 1.05rem/1.2 var(--display)}
  .fn-buybar small{font:600 .58rem var(--sans);color:#c9c2b4}
  body.fn{padding-bottom:72px}
}

/* responsive */
@media(max-width:1000px){
  .fn-cards{grid-template-columns:1fr 1fr}
  .fn-card-set{position:relative;top:auto;grid-column:1/-1;order:-1;max-width:560px;width:100%;justify-self:center}
  .fn-col{display:contents}
  .fn-card-bonus{grid-column:1/-1;max-width:560px;justify-self:center;display:grid;grid-template-columns:90px 1fr;gap:6px 18px;text-align:left;align-items:center}
  .fn-card-bonus .fn-card-cover{grid-column:1;grid-row:1/4;width:90px;margin:0}
  .fn-card-bonus>*:not(img){grid-column:2}
  .fn-card-bonus h3{margin:0}
  .fn-hero-grid,.fn-author-grid,.fn-set-grid{grid-template-columns:1fr;gap:34px}
  .fn-fan{height:360px;max-width:520px;width:100%;margin:0 auto}
}
@media(max-width:760px){
  .fn section{padding:50px 0}
  .fn .fn-hero{padding:34px 0 24px}
  .fn-lede{font-size:1.15rem}
  .fn-hero-actions .btn{width:100%}
  .fn-ghost{flex:1;justify-content:center;min-height:46px;padding:0 10px;font-size:.74rem}
  .fn-fan{height:270px}
  .fn-fan-sm{height:200px}
  .fn-cards{grid-template-columns:1fr;gap:18px}
  .fn-card-set{padding:34px 20px 22px}
  .fn-trust{grid-template-columns:1fr 1fr;gap:14px 10px}
  .fn-strip-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(62%,240px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin:0 -4px}
  .fn-strip-row figure{scroll-snap-align:start}
  .fn-stats dl{grid-template-columns:1fr 1fr}
  .fn-stats dl div:nth-child(3){border-left:0}
  .fn-stats dl div:nth-child(n+3){border-top:1px solid var(--rule)}
  .fn-stats dt{font-size:2.2rem}
  .fn-feature,.fn-feature-flip{grid-template-columns:1fr;gap:20px;padding:34px 0}
  .fn-feature-flip .fn-feature-media{order:0}
  .fn-feature-media img{width:170px}
  .fn-toc{columns:1}
  .fn-feature-buy .btn{width:100%}
  .fn-set-box{padding:22px 18px 18px}
  .fn-announce a{font-size:.66rem;padding:9px 14px}
}
@media(max-width:480px){
  .fn-card-bonus{grid-template-columns:70px 1fr}
  .fn-card-bonus .fn-card-cover{width:70px}
  .fn-fan{height:230px}
  .fn-price-set b{font-size:3rem}
}

/* v2: one book + the set */
.fn-hero-media{position:relative;margin:0;padding:0 0 40px 0}
.fn-hero-photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.fn-hero-book{position:absolute;left:-28px;bottom:0;width:34%;box-shadow:12px 18px 30px #17243655}
.fn-offers-head{margin-bottom:40px}
.fn-cards-2{grid-template-columns:1fr 1.12fr;max-width:940px;margin:0 auto;align-items:stretch}
.fn-cards-2 .fn-card{display:flex;flex-direction:column}
.fn-cards-2 .fn-card .btn{margin-top:auto}
.fn-cards-2 .fn-card-set{position:relative;top:auto}
.fn-cards-2 .fn-card-cover{width:150px}
.fn .fn-inside{padding-top:20px}
.fn .fn-more{background:var(--cream-deep)}
.fn-more-list{display:grid;gap:0;max-width:940px;margin:0 auto}
.fn-more-book{display:grid;grid-template-columns:150px minmax(0,1fr);gap:34px;align-items:start;padding:30px 0;border-top:1px solid var(--rule)}
.fn-more-book img{width:150px;height:auto;box-shadow:8px 12px 22px #17243630}
.fn-more-book h3{font-size:2rem;margin-bottom:8px}
.fn-more-book .kicker{margin-bottom:8px}
.fn-more-book p:not(.kicker){font-size:1.08rem;margin-bottom:6px}
.fn-more-book details{padding:10px 0 0;border-bottom:0}
.fn-more-book summary{font-size:1.2rem}
@media(max-width:1000px){
  .fn-cards-2 .fn-card-set{order:0}
  .fn-hero-book{left:12px}
}
@media(max-width:760px){
  .fn-cards-2{grid-template-columns:1fr}
  .fn-cards-2 .fn-card-set{order:-1}
  .fn-more-book{grid-template-columns:90px minmax(0,1fr);gap:18px}
  .fn-more-book img{width:90px}
  .fn-more-book h3{font-size:1.6rem}
  .fn-hero-media{padding-bottom:28px}
}
.fn-cards-2 .fn-fan-sm{width:100%;flex-shrink:0}