/* Buy Back Your Freedom: the book's website. It wears the book's cover: banknote engraving in teal
   on mint paper, condensed capitals for titles (Oswald) and a book serif for reading (EB Garamond). */
:root{--green:#285649;--engrave:#3C7366;--paper:#E6E8D3;--paper2:#F2F3E8;--ink:#173D35;--muted:#4F6A61;--foil:#D8DCBD;--line:rgba(23,61,53,.16);
--serif:'Oswald','Arial Narrow',Impact,sans-serif;--sans:'EB Garamond',Garamond,Georgia,serif;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper2);color:var(--ink);font:19px/1.6 var(--sans)}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
[hidden]{display:none!important}
.in{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.01em;margin:0}
h2{font-size:clamp(32px,4.6vw,54px);line-height:1.05;margin-bottom:22px}
h3{font-size:22px;line-height:1.25;margin-bottom:6px}
:focus-visible{outline:3px solid var(--foil);outline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font:600 16px var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn.solid{background:var(--paper);color:var(--green);border-color:var(--paper)}
.btn.ink{background:var(--green);color:var(--paper);border-color:var(--green)}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:default}

/* Navigation */
.nav{position:fixed;inset:0 0 auto;z-index:20;color:var(--paper);transition:background .25s,color .25s,box-shadow .25s}
.nav .in{display:flex;align-items:center;gap:28px;height:72px}
.nav .mark{font-family:var(--serif);font-size:21px;text-decoration:none;flex:1;white-space:nowrap}
.nav .links{display:flex;gap:26px;font-size:15px}
.nav .links a{text-decoration:none;opacity:.85}
.nav .links a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.nav .login{font-size:15px;font-weight:600;text-decoration:none}
.nav .btn{min-height:42px;padding:0 18px;font-size:14.5px}
.nav.solid{background:var(--paper2);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.nav.solid .btn.solid{background:var(--green);color:var(--paper);border-color:var(--green)}
@media (max-width:860px){.nav .links{display:none}.nav .login{display:none}}

/* Hero */
.hero{position:relative;background:var(--green);color:var(--paper);overflow:hidden;padding:150px 0 110px}
.hero svg.guilloche{position:absolute;inset:-10% -5%;width:110%;height:120%;opacity:.55;pointer-events:none}
.guilloche path{fill:none;stroke:var(--engrave);stroke-width:.7}
.hero .in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(52px,8.4vw,118px);line-height:.92;letter-spacing:-.025em}
.hero .by{font-size:19px;margin:26px 0 0;opacity:.9}
.hero .lede{font-size:19px;max-width:30em;margin:18px 0 34px;opacity:.85}
.hero .act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.hero .price{font-family:var(--serif);font-size:30px}
.hero .owned{font-size:15px;opacity:.8;margin-top:22px}
.hero .owned a{text-underline-offset:4px}

/* The book, in 3D */
.book{perspective:1600px;display:flex;justify-content:center}
.cover{position:relative;width:min(340px,70vw);aspect-ratio:2/3;transform:rotateY(-22deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.book:hover .cover{transform:rotateY(-12deg) rotateX(2deg)}
.cover .front{position:absolute;inset:0;border-radius:3px 8px 8px 3px;overflow:hidden;background:#0A2C22;box-shadow:30px 34px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(201,166,90,.35)}
.cover .front svg{position:absolute;inset:0;width:100%;height:100%}
.cover .front svg path{stroke:#3E7A62;stroke-width:.6;fill:none;opacity:.75}
.cover .t{position:absolute;left:9%;right:9%;top:12%;font-family:var(--serif);color:var(--foil);font-size:clamp(30px,4.4vw,46px);line-height:.98;letter-spacing:-.01em;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.cover .a{position:absolute;left:9%;right:9%;bottom:9%;color:var(--paper);font-size:14px;letter-spacing:.06em}
.cover .k{position:absolute;left:9%;bottom:14%;color:var(--paper);opacity:.75;font-size:13px}
.cover .spine{position:absolute;top:0;bottom:0;left:0;width:26px;transform:rotateY(90deg) translateZ(-13px) translateX(-13px);transform-origin:left;background:#071F18}
.cover::after{content:"";position:absolute;inset:0;border-radius:3px 8px 8px 3px;background:linear-gradient(100deg,rgba(255,255,255,.18) 0 3%,transparent 7% 70%,rgba(0,0,0,.25));pointer-events:none}
.wave{display:flex;gap:4px;align-items:center;justify-content:center;height:46px;margin-top:34px}
.wave i{display:block;width:4px;border-radius:2px;background:var(--foil);opacity:.8;height:12px}

/* Sections */
section.s{padding:110px 0}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.about .copy p{font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);line-height:1.45}
.about .copy p:first-child::first-letter{float:left;font-size:4.2em;line-height:.85;padding:6px 10px 0 0;color:var(--green)}
.inside{background:var(--paper)}
.chapters{list-style:none;padding:0;margin:0;columns:2;column-gap:56px;counter-reset:c}
.chapters li{break-inside:avoid;display:grid;grid-template-columns:52px 1fr;padding:16px 0;border-top:1px solid var(--line);font-size:18px;counter-increment:c}
.chapters li::before{content:counter(c);font-family:var(--serif);font-size:22px;color:var(--engrave)}
.facts{display:flex;flex-wrap:wrap;gap:12px 40px;margin:0 0 42px;font-size:16px;color:var(--muted)}
.facts b{display:block;font-family:var(--serif);font-weight:500;font-size:40px;color:var(--ink);line-height:1.1}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:22px}
.steps li::before{content:counter(s);display:block;font-family:var(--serif);font-size:58px;line-height:1;margin-bottom:14px;color:var(--engrave)}
.steps p{color:var(--muted);margin:0}
.author{background:var(--ink);color:var(--paper)}
.author .split{align-items:center}
.author .pic{aspect-ratio:4/5;background:url(portrait.jpg) center/cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity;border-radius:4px;position:relative}
.author .pic::after{content:"";position:absolute;inset:0;background:var(--green);mix-blend-mode:color;opacity:.85;border-radius:4px}
.author p{font-size:19px;opacity:.88;max-width:34em}

/* Buy */
.buy{background:var(--green);color:var(--paper);position:relative;overflow:hidden}
.buy svg.guilloche{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.buy .in{position:relative}
.buy .card{background:var(--paper2);color:var(--ink);border-radius:6px;padding:40px;max-width:560px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.buy .grid{display:grid;grid-template-columns:1fr 560px;gap:64px;align-items:center}
.buy .pitch p{font-size:19px;opacity:.88;max-width:28em}
.buy .amt{font-family:var(--serif);font-size:56px;line-height:1;margin:0 0 4px}
.buy .note{color:var(--muted);font-size:15px;margin-bottom:26px}
.f{display:block;margin:0 0 16px}
.f span{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.f small{display:block;color:var(--muted);font-size:13px;margin-top:6px}
input{width:100%;font:17px var(--sans);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:6px;padding:13px 14px;min-height:52px}
input:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(14,59,46,.18)}
.secure{font-size:14px;color:var(--muted);margin:14px 0 0}
.msg{border-radius:6px;padding:12px 14px;font-size:15px;margin:0 0 16px;background:#E3E9E1}
.msg.bad{background:#F5E1DC;color:#6E2A20}
.msg.ok{background:#DDEEE3;color:#1F5A38}

/* Questions */
.faq details{border-top:1px solid var(--line);padding:22px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-family:var(--serif);font-size:23px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:28px;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:12px 0 0;max-width:46em}

footer{background:var(--ink);color:var(--paper);padding:48px 0;font-size:14px}
footer .in{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;opacity:.75}
footer a{text-underline-offset:4px}

/* Thank-you page */
.thanks{min-height:100vh;background:var(--green);color:var(--paper);padding:140px 0 80px;position:relative;overflow:hidden}
.thanks svg.guilloche{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.thanks .card{position:relative;max-width:520px;margin:0 auto;background:var(--paper2);color:var(--ink);border-radius:6px;padding:40px}
.thanks h1{font-size:44px;margin-bottom:14px}

/* One moment of motion: the engraving draws itself in, then the book settles. */
@media (prefers-reduced-motion:no-preference){
  .hero svg.guilloche path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 2.6s cubic-bezier(.4,.1,.2,1) forwards;animation-delay:calc(var(--i) * 60ms)}
  .hero .cover{animation:settle 1.4s .35s cubic-bezier(.2,.7,.2,1) both}
  .wave i{animation:wave 1.4s ease-in-out infinite;animation-delay:calc(var(--i) * -110ms)}
  .playing .wave i{animation-duration:.9s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes settle{from{opacity:0;transform:translateY(40px) rotateY(-40deg) rotateX(8deg)}}
@keyframes wave{0%,100%{height:10px}50%{height:var(--h)}}

/* Phones and tablets */
@media (max-width:960px){
  .hero{padding:120px 0 80px}
  .hero .in,.split,.buy .grid{grid-template-columns:1fr;gap:44px}
  .book{order:-1}
  .cover{width:min(240px,60vw)}
  .steps{grid-template-columns:1fr;gap:34px}
  .chapters{columns:1}
  .author .pic{max-width:360px}
  .buy .card{padding:28px 22px}
  section.s{padding:80px 0}
}
@media (max-width:520px){.hero h1{font-size:50px}.nav .mark{font-size:18px}.in{padding:0 20px}}
.nav .btn{white-space:nowrap}
@media (max-width:520px){.nav .in{gap:12px}.nav .mark{font-size:16px}.nav .btn{min-height:38px;padding:0 14px;font-size:13.5px}.hero .cover{width:min(200px,52vw)}}

/* ---- The book's own look ---- */
.btn,.nav .links,.nav .login,.f span,.secure,.faq summary::after{font-family:var(--serif);letter-spacing:.03em}
.btn{font-weight:500;font-size:16px}
.nav .mark{font-family:var(--serif);text-transform:uppercase;letter-spacing:.06em;font-size:18px}
.hero h1{text-transform:uppercase;letter-spacing:.015em;font-weight:500;font-size:clamp(54px,8.6vw,124px);line-height:.96}
.hero .by{font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;font-size:15px;opacity:.85;margin-top:22px}
.hero .lede{font-size:21px}
.hero .price{font-size:32px}
.cover .front{background:var(--paper)}
.cover .front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover{width:min(360px,72vw);aspect-ratio:640/914}
.wave i{background:var(--foil)}
.about h2{text-transform:uppercase;letter-spacing:.02em}
.about .copy p{font-family:var(--sans);font-size:clamp(20px,2vw,23px);line-height:1.55}
.about .copy p:first-child::first-letter{font-family:var(--serif);color:var(--green)}
.learn{margin:30px 0 0;padding:0;list-style:none}
.learn li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line);font-size:20px}
.learn li::before{content:"";position:absolute;left:4px;top:23px;width:9px;height:9px;background:var(--green);transform:rotate(45deg)}
.learn-h{font-family:var(--serif);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:36px 0 4px}
.nohype{font-style:italic;font-size:21px;margin-top:26px;color:var(--ink)}
.author .pic{background:url(/bbyf/author.jpg) center/cover;filter:none;mix-blend-mode:normal}
.author .pic::after{display:none}
.author h2{text-transform:uppercase;letter-spacing:.02em}
.author p{font-size:20px}
.chapters li{font-size:20px}
.chapters li::before{font-family:var(--serif)}
.faq summary{font-family:var(--sans);font-size:23px;font-weight:500}
footer{font-family:var(--serif);letter-spacing:.04em}
.buy .amt{font-family:var(--serif)}

/* The real book, photographed */
.bookshot{width:min(400px,74vw);height:auto;margin:0 auto;filter:drop-shadow(28px 34px 40px rgba(0,0,0,.45))}
@media (prefers-reduced-motion:no-preference){.hero .bookshot{animation:rise 1.3s .3s cubic-bezier(.2,.7,.2,1) both}}
@keyframes rise{from{opacity:0;transform:translateY(46px)}}
@media (max-width:960px){.bookshot{width:min(260px,62vw)}}
@media (max-width:520px){.nav .mark{font-size:14px;letter-spacing:.03em;min-width:0;overflow:hidden;text-overflow:ellipsis}.nav .btn{flex:none}}

/* Tactile buttons: gradient body, light top edge, dark bottom edge, a tight shadow plus a soft glow
   in the button's own colour. Pressing moves it down 1px and swaps the lift for a pressed-in shadow. */
.btn{border:0;transition:translate .08s,box-shadow .12s,filter .12s}
.btn.solid{background:linear-gradient(#F6F7EC,#DADFC3);color:#1F463D;
  box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -2px 0 #2856492e,0 1px 2px #0000004d,0 8px 24px -6px #0000008c}
.btn.ink,.nav.solid .btn.solid{background:linear-gradient(#3F7A6B,#285649);color:#F2F3E8;
  box-shadow:inset 0 1px 0 #ffffff40,inset 0 -2px 0 #00000040,0 1px 2px #00000059,0 8px 24px -6px #28564999}
.btn.solid:hover,.btn.ink:hover,.nav.solid .btn.solid:hover{filter:brightness(1.04)}
.btn.solid:active,.btn.ink:active,.nav.solid .btn.solid:active{translate:0 1px;box-shadow:inset 0 2px 4px #00000040}
.btn:disabled{translate:none;filter:saturate(.6)}

/* Tactile tiles: the same build as the buttons. Paper gradient, light top edge, faint dark bottom
   edge, a tight shadow and a soft teal glow. Darker sections get the same tile in green. */
:root{--tile:linear-gradient(#F9FAF2,#E8EBD6);
  --tile-sh:inset 0 1px 0 #ffffffcc,inset 0 -2px 0 #2856491f,0 1px 2px #00000014,0 12px 30px -14px #28564966;
  --tile-dark:linear-gradient(#2E6153,#22493F);
  --tile-dark-sh:inset 0 1px 0 #ffffff26,inset 0 -2px 0 #00000033,0 1px 2px #00000033,0 14px 34px -14px #0000008c}
.facts{gap:14px}
.facts span{background:var(--tile);box-shadow:var(--tile-sh);border-radius:14px;padding:16px 24px 14px;min-width:150px}
.steps{gap:22px}
.steps li{background:var(--tile);box-shadow:var(--tile-sh);border-radius:18px;border-top:0;padding:26px 26px 24px}
.chapters{columns:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chapters li{border-top:0;background:var(--tile);box-shadow:var(--tile-sh);border-radius:14px;padding:16px 18px;align-items:baseline}
.learn{display:grid;gap:10px}
.learn li{border-top:0;background:var(--tile);box-shadow:var(--tile-sh);border-radius:12px;padding:13px 18px 13px 42px}
.learn li::before{left:18px;top:24px}
.faq details{border:0;background:var(--tile);box-shadow:var(--tile-sh);border-radius:14px;padding:18px 22px;margin-bottom:12px}
.faq details:last-child{border-bottom:0}
.buy .card{background:var(--tile);border-radius:22px;box-shadow:inset 0 1px 0 #ffffffcc,inset 0 -3px 0 #2856491f,0 2px 4px #0000001f,0 30px 70px -20px #000000a6}
.buy .card input{box-shadow:inset 0 1px 2px #2856491f}
.author .pic{border-radius:18px;box-shadow:inset 0 1px 0 #ffffff26,0 2px 4px #00000040,0 24px 50px -18px #000000b3}
.inside{background:var(--paper)}
@media (max-width:960px){.chapters{grid-template-columns:1fr}.facts span{min-width:0;flex:1}}

/* Tighter rhythm: less empty space between and inside sections, smaller hero, compact tiles. */
section.s{padding:76px 0}
h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:18px}
.split{gap:48px}
.hero{padding:112px 0 64px}
.hero .in{gap:40px}
.hero h1{font-size:clamp(46px,6.2vw,88px);line-height:.98}
.hero .by{margin-top:16px}
.hero .lede{margin:12px 0 24px;font-size:20px}
.hero .owned{margin-top:14px}
.bookshot{width:min(320px,70vw)}
.wave{height:34px;margin-top:18px}
.about .copy p:first-child::first-letter{font-size:3.4em;padding:4px 8px 0 0}
.learn-h{margin:22px 0 4px}
.learn{margin-top:14px;gap:8px}
.learn li{font-size:18px;padding:10px 16px 10px 40px}
.learn li::before{top:20px}
.nohype{font-size:19px;margin:18px 0 0}
.inside .split{align-items:start}
.facts{margin:6px 0 0;gap:10px}
.facts span{padding:12px 20px 10px;min-width:0}
.facts b{font-size:32px}
.chapters{gap:8px}
.chapters li{font-size:17px;padding:11px 14px;grid-template-columns:34px 1fr}
.chapters li::before{font-size:18px}
.steps{gap:16px}
.steps li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;padding:20px 22px}
.steps li::before{grid-row:span 2;font-size:40px;margin:0}
.steps h3{font-size:20px;margin:4px 0 4px}
.steps p{font-size:17px;line-height:1.5}
.author .split{grid-template-columns:280px 1fr;gap:48px}
.author p{font-size:18px}
.author p:last-child{margin-bottom:0}
.buy .grid{gap:48px}
.buy .card{padding:30px 32px}
.buy .amt{font-size:48px}
.buy .note{margin-bottom:18px}
.faq details{padding:14px 20px;margin-bottom:8px}
.faq summary{font-size:20px}
.faq details p{font-size:17px;margin-top:8px}
footer{padding:28px 0}

@media (max-width:960px){
  section.s{padding:52px 0}
  .split,.buy .grid,.hero .in{gap:28px}
  .hero{padding:88px 0 44px}
  .hero .in{gap:20px}
  .bookshot{width:min(190px,50vw)}
  .wave{height:26px;margin-top:10px}
  .author .split{grid-template-columns:1fr;gap:22px}
  .author .pic{max-width:none;width:120px;aspect-ratio:1;border-radius:50%}
  .author .split > div:last-child h2{margin-bottom:12px}
  .steps{grid-template-columns:1fr;gap:10px}
  .chapters{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:17.5px}
  .hero h1{font-size:44px}
  .hero .lede{font-size:18px}
  .hero .price{font-size:28px}
  h2{font-size:30px}
  .learn li{font-size:16.5px;padding:9px 14px 9px 36px;line-height:1.45}
  .learn li::before{left:15px;top:17px;width:8px;height:8px}
  .about .copy p{font-size:18.5px}
  .nohype{font-size:17.5px}
  .steps li{padding:16px 18px}
  .steps li::before{font-size:32px}
  .steps h3{font-size:18px}
  .steps p{font-size:16px}
  .author p{font-size:17px}
  .buy .card{padding:24px 20px}
  .buy .amt{font-size:42px}
  .buy .pitch p{font-size:17px;margin:0}
  .faq details{padding:12px 16px}
  .faq summary{font-size:17.5px;line-height:1.35}
  .faq summary::after{font-size:24px}
  .facts b{font-size:28px}
}
@media (max-width:520px){
  .facts b{font-size:24px;white-space:nowrap}
  .facts span{padding:10px 16px 8px}
  .chapters{gap:6px}
  .chapters li{font-size:16px;padding:8px 12px;grid-template-columns:30px 1fr}
  .chapters li::before{font-size:16px}
  footer .in{gap:8px 24px}
}

/* 4AM Club VIP request page */
body.vip{background:var(--green)}
.vipwrap{position:relative;overflow:hidden;background:var(--green);color:var(--paper);padding:112px 0 72px;min-height:calc(100vh - 70px)}
.vipwrap svg.guilloche{position:absolute;inset:0;width:100%;height:100%;opacity:.45;pointer-events:none}
.vipgrid{position:relative;display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:center}
.vip .kicker{font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;font-size:14px;opacity:.85;margin:0 0 12px}
.vip h1{font-size:clamp(40px,5.4vw,72px);line-height:1;text-transform:uppercase;letter-spacing:.01em;margin:0 0 18px}
.vip .lede{font-size:20px;opacity:.9;max-width:30em;margin:0 0 26px}
.vipbook{width:min(200px,50vw);height:auto;filter:drop-shadow(22px 26px 32px rgba(0,0,0,.45))}
.vipcard{background:var(--tile);color:var(--ink);border-radius:22px;padding:30px 30px 26px;box-shadow:inset 0 1px 0 #ffffffcc,inset 0 -3px 0 #2856491f,0 2px 4px #0000001f,0 30px 70px -20px #000000a6}
.vipcard h2{font-size:30px;margin:0 0 14px;text-transform:uppercase;letter-spacing:.02em}
.vipcard input{box-shadow:inset 0 1px 2px #2856491f}
.tick{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;font-size:17px;cursor:pointer}
.tick input{width:22px;height:22px;min-height:0;padding:0;margin:3px 0 0;flex:none;accent-color:var(--green)}
#vipDone p{font-size:18px}
@media (max-width:960px){.vipgrid{grid-template-columns:1fr;gap:28px}.vipwrap{padding:92px 0 48px}.vipbook{display:none}.vip .lede{font-size:18px;margin-bottom:0}}
@media (max-width:520px){.vipcard{padding:24px 20px}.vip h1{font-size:38px}}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---- One for One and listener words ---- */
.gift{background:var(--paper)}
.gift .in{max-width:860px}
.gift .kicker{font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;font-size:14px;color:var(--engrave);margin:0 0 10px}
.gift h3{margin-top:34px}
.gift .steps{margin:18px 0 36px}
.gift .steps h3{margin-top:0}
.gifted{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;border-top:2px solid var(--ink);padding-top:22px}
.gifted b{font-family:var(--serif);font-weight:500;font-size:64px;line-height:1;color:var(--engrave);font-variant-numeric:tabular-nums}
.gifted span{font-size:18px}
.gift .btn.solid{background:var(--green);color:var(--paper);border-color:var(--green);white-space:normal;text-align:center;padding:12px 26px}
.nomcard{background:var(--tile);color:var(--ink);border-radius:22px;padding:30px;margin-top:22px;max-width:620px;box-shadow:inset 0 1px 0 #ffffffcc,inset 0 -3px 0 #2856491f,0 2px 4px #0000001f,0 24px 50px -24px #00000066}
.nomcard h3{margin:0 0 14px}
.nomcard textarea{width:100%;box-sizing:border-box;font:17px var(--sans);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:6px;padding:13px 14px;resize:vertical}
.nomcard textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(14,59,46,.18)}
.f span i{font-weight:400;font-style:normal;color:var(--muted)}
.voices .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:26px}
.quote{margin:0;border-top:2px solid var(--ink);padding-top:18px}
.quote blockquote{margin:0 0 12px;font-family:var(--sans);font-style:italic;font-size:22px;line-height:1.5}
.quote figcaption{font-size:15px;color:var(--muted)}
@media (max-width:760px){.gifted b{font-size:48px}.nomcard{padding:24px 18px}}
.nomnote{font-size:17px;color:var(--muted);margin:0}
/* How it works: four steps (the fourth is One for One). Four across on wide screens, two by two below, one column on phones. */
.steps.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1180px){.steps.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.steps.four{grid-template-columns:1fr}}
.steps p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.steps li{align-content:start}
/* Top of the page: free copies gifted so far and their value. */
.hero .giftline{margin:16px 0 0;font-size:19px;line-height:1.45;opacity:.92}
.hero .giftline b{font-family:var(--serif);font-weight:500;letter-spacing:.02em;opacity:1}
/* Thank-you page: the One for One step under the password form. */
.thanks .giftstep{margin-top:22px;border:2px solid var(--ink);border-radius:18px;padding:18px 20px}
.thanks .giftstep .k{margin:0 0 4px;font-family:var(--serif);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--engrave)}
.thanks .giftstep h2{margin:0 0 8px;font-size:clamp(20px,4.6vw,24px)}
.thanks .giftstep p:last-child{margin:0}
/* Free nominations page (same layout as the VIP page). */
.nominate .vipcard h2.sub{margin:22px 0 10px;font-size:20px}
.nominate .vipcard textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line, rgba(23,61,53,.2));border-radius:12px;padding:12px 14px;resize:vertical;min-height:120px;box-sizing:border-box}
.nominate .cfbox{margin:14px 0 6px;min-height:66px}
.nominate .lede + .lede{margin-top:-4px}
.nomfree{margin-top:14px}
.nomfree a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600}
/* What listeners say: straight under the hero, one review at a time. */
.voices{background:var(--paper, #E6E8D3);padding-top:56px;padding-bottom:56px}
.voices .kicker{margin:0 0 18px}
.vc{max-width:820px}
.vc-track{position:relative}
.vc-slide{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease;pointer-events:none;border-top:0;padding-top:0}
.vc-slide.on{position:relative;opacity:1;transform:none;pointer-events:auto}
.vc-slide blockquote{position:relative;padding-left:44px;font-size:clamp(22px,3.2vw,30px);line-height:1.45}
.vc-slide blockquote::before{content:"\201C";position:absolute;left:0;top:-14px;font-family:var(--serif);font-style:normal;font-size:72px;line-height:1;color:var(--engrave, #3C7366)}
.vc-slide figcaption{padding-left:44px;font-family:var(--serif);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vc-nav{display:flex;align-items:center;gap:14px;margin-top:22px;padding-left:44px}
.vc-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.vc-btn svg{width:18px;height:18px}
.vc-btn:hover{background:var(--ink);color:var(--cream, #F2F3E8)}
.vc-dots{display:flex;gap:8px}
.vc-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:transparent;cursor:pointer}
.vc-dots button[aria-selected=true]{background:var(--ink)}
.vc-btn:focus-visible,.vc-dots button:focus-visible{outline:3px solid #6FA287;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.vc-slide{transition:none}}
@media (max-width:640px){.voices{padding-top:40px;padding-bottom:40px}.vc-slide blockquote,.vc-slide figcaption,.vc-nav{padding-left:30px}.vc-slide blockquote::before{font-size:54px;top:-8px}}
.voices.s{padding-top:52px;padding-bottom:48px}
.voices .kicker{font-family:var(--serif);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--engrave);margin:0 0 20px}
.vc-nav{margin-top:14px}
@media (max-width:640px){.voices.s{padding-top:38px;padding-bottom:36px}}
/* Reviews page */
.reviews .nav .in{gap:18px}
.reviews .nav .btn.sm{min-height:40px;padding:0 18px;font-size:15px}
.rv-hero{position:relative;overflow:hidden;background:var(--green);color:var(--paper);padding:150px 0 70px}
.rv-hero .guilloche{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--engrave);stroke-width:1.2;opacity:.55}
.rv-hero .in{position:relative}
.rv-hero .kicker{font-family:var(--serif);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--foil);margin:0 0 12px}
.rv-hero h1{margin:0 0 16px;max-width:16ch}
.rv-hero .lede{max-width:60ch;margin:0 0 26px;color:var(--paper)}
.rv-count{font-family:var(--serif);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--engrave);margin:0 0 18px}
.rv-grid{columns:3 300px;column-gap:22px}
.rv{break-inside:avoid;margin:0 0 22px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px}
.rv blockquote{margin:0 0 16px;font-family:var(--sans);font-style:italic;font-size:20px;line-height:1.5}
.rv blockquote::before{content:"\201C";display:block;font-family:var(--serif);font-style:normal;font-size:52px;line-height:.8;color:var(--engrave);margin-bottom:6px}
.rv figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.rv figcaption span{font-size:14px;color:var(--muted)}
.rv-write{background:var(--paper)}
.rv-write .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
.rv-write .kicker{font-family:var(--serif);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--engrave);margin:0 0 12px}
.rv-card{padding:26px}
.rv-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.rv-tabs button{flex:1 1 180px;min-height:44px;border:1.5px solid var(--ink);border-radius:22px;background:transparent;color:var(--ink);font-family:var(--serif);font-size:15px;letter-spacing:.04em;cursor:pointer;padding:0 14px}
.rv-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper2)}
.rv-tabs button:focus-visible{outline:3px solid #6FA287;outline-offset:2px}
.rv-card textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;resize:vertical;min-height:140px;box-sizing:border-box}
.rv-card .cfbox{margin:14px 0 6px;min-height:66px}
.rv-card h3{margin:0 0 8px}
@media (max-width:860px){.rv-write .in{grid-template-columns:1fr;gap:24px}.rv-hero{padding:120px 0 52px}}
.vc-all{margin:18px 0 0;padding-left:44px;font-size:16px}
.vc-all a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.vc-all{padding-left:30px}}