/* ==========================================================================
   G.O.A.T Peer — "Bookbound" landing  ·  paper & ink, library-cloth green,
   gilt, Newsreader serif.
   ========================================================================== */
:root{
  --paper:#F2EAD9; --paper-2:#EBE0C9; --page:#FBF6EA;
  --ink:#241E14; --ink-2:#4C4131; --ink-3:#736552; --ink-4:#6E5F45;
  --rule:#DDD0B4; --rule-2:#CDBD9A;
  --cloth:#1E4A38; --cloth-deep:#143528; --leaf:#35684F;
  --oxblood:#8A2E22; --oxblood-2:#A8392A;
  --gold:#B08543; --gold-hi:#C8A05A;
  --review:#9A6B1E; --clear:#3C7A4E; --flag:#A8392A;
  --serif:'Newsreader',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* one radius + easing system — unifies the scattered 4/5/6/8px and supplies
     the --ease the motion layer references (previously undefined) */
  --r:6px; --r-lg:10px; --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* the nav is sticky — jump-links must land BELOW it, not under it */
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{font-family:var(--serif);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.004em;line-height:1.5;position:relative}
body::before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(60,40,10,.014) 0 1px,transparent 1px 4px);pointer-events:none;z-index:1}
.wrap{max-width:1280px;margin:0 auto;width:100%}
a{color:inherit;text-decoration:none}
@keyframes gpScan{0%{top:-6%}100%{top:104%}}
@keyframes gpLensGlow{0%{opacity:0}22%{opacity:.9}60%{opacity:.82}100%{opacity:0}}
@keyframes gpLensGleam{0%{transform:translateX(-160%) skewX(-16deg);opacity:0}22%{opacity:.95}68%{opacity:.95}100%{transform:translateX(260%) skewX(-16deg);opacity:0}}
@keyframes gpLensTwinkle{0%{opacity:0;transform:scale(.2)}45%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r);padding:15px 22px;cursor:pointer;transition:.16s cubic-bezier(.22,1,.36,1)}
.btn svg{width:15px;height:15px}
.btn-cloth{color:#F4ECD9;background:var(--cloth);border:1px solid var(--cloth-deep);box-shadow:inset 0 0 0 1px rgba(200,160,90,.32)}
.btn-cloth:hover{background:var(--cloth-deep)}
.btn-paper{color:var(--ink);background:var(--page);border:1px solid var(--rule-2)}
.btn-paper:hover{background:#fff}
/* visible keyboard focus (was absent) */
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:2px}
.btn-cloth:focus-visible,.nav-trial:focus-visible,.tcta.cloth:focus-visible,.cta-box .btn:focus-visible{outline-color:#F4ECD9}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cloth);color:#F4ECD9;
  font:600 12px/1 var(--mono);letter-spacing:.06em;padding:12px 18px;border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}

/* nav */
nav{position:sticky;top:0;z-index:30;background:rgba(242,234,217,.86);backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;padding:0 56px;border-bottom:1px solid var(--rule)}
.brand-lock{position:relative;display:inline-block;line-height:0}
.brand-lock img{height:34px;width:auto;display:block}
.lens{position:absolute;left:2px;top:13.5px;width:30px;height:13px;pointer-events:none}
.lens .glow{position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(58% 64% at 50% 50%,rgba(52,150,108,.82),rgba(52,150,108,.18) 52%,transparent 70%);filter:blur(1.6px);opacity:0;animation:gpLensGlow 1700ms cubic-bezier(.22,1,.36,1) 360ms 1 both}
.lens .gleamwrap{position:absolute;inset:0;overflow:hidden;border-radius:6px}
.lens .gleam{position:absolute;top:-5px;bottom:-5px;left:0;width:8px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);filter:blur(.5px);transform:translateX(-160%) skewX(-16deg);opacity:0;animation:gpLensGleam 1450ms cubic-bezier(.4,0,.2,1) 520ms 1 both}
.lens .twinkle{position:absolute;left:21px;top:0;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,#eafff4,rgba(120,230,180,.6) 55%,transparent 72%);opacity:0;animation:gpLensTwinkle 760ms ease-out 1180ms 1 both}
.nav-links{display:flex;align-items:center;gap:30px;font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.nav-links a{cursor:pointer}
.nav-links a:hover{color:var(--leaf)}
.nav-cta{display:flex;align-items:center;gap:11px}
.nav-link{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:11px 14px;border-radius:var(--r);cursor:pointer}
.nav-signin{color:var(--ink-2);border:1px solid var(--rule-2);background:var(--page)}
.nav-signin:hover{background:#fff}
.nav-trial{color:#F4ECD9;padding:12px 16px;background:var(--cloth);border:1px solid var(--cloth-deep);box-shadow:inset 0 0 0 1px rgba(200,160,90,.32)}
.nav-trial:hover{background:var(--cloth-deep)}
.gilt{height:3px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);opacity:.55}
.mobile-toggle{display:none}

section{position:relative;z-index:2}
.pad{padding:0 56px}

/* hero */
.hero{padding:52px 56px 36px;display:grid;grid-template-columns:1fr 520px;gap:56px;align-items:center}
.kicker{font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--leaf)}
.hero h1{font-weight:600;font-size:64px;line-height:1.03;letter-spacing:-.018em;margin-top:20px}
.hero h1 em,.t-accent{font-style:italic;color:var(--oxblood)}
/* typewriter headline: reserve ~3 lines so typing/deleting never shifts the
   page, plus a blinking oxblood caret */
.type-h1{min-height:3.1em}
.t-caret{display:inline-block;width:3px;height:.82em;margin-left:5px;background:var(--oxblood);
  vertical-align:-2px;animation:tCaret 1.05s steps(1) infinite}
@keyframes tCaret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.t-caret{animation:none;opacity:0}}
.hero p.lead{font-size:19px;line-height:1.6;color:var(--ink-2);margin-top:22px;max-width:560px}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-note{margin-top:20px;font:500 12px/1.6 var(--mono);color:var(--ink-3)}

/* book plate */
.plate{background:var(--page);border:1px solid var(--rule-2);border-radius:var(--r-lg);padding:15px;box-shadow:0 2px 6px rgba(40,30,10,.1),0 26px 54px rgba(40,30,10,.16);position:relative;max-width:500px;margin:0 auto}
.plate-frame{border:1px solid var(--gold);padding:6px;border-radius:2px}
.plate-img{display:block;width:100%;height:auto;border-radius:1px}
.slider{overflow:hidden;position:relative;border-radius:1px}
.slides{display:flex;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.slide{flex:0 0 100%;height:420px;display:flex;align-items:center;justify-content:center;background:var(--paper-2)}
.slide img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.slider-dots{display:flex;gap:8px;justify-content:center;margin-top:11px}
.slider-dots .dot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid var(--gold);background:transparent;cursor:pointer;transition:.16s}
.slider-dots .dot.is-active{background:var(--gold)}
.slider-dots .dot:hover{border-color:var(--gold-hi)}
.canvas{position:relative;aspect-ratio:4/3;background:#15211a;overflow:hidden;border-radius:1px}
.canvas .gel{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#1d2c22 0 3px,#172319 3px 6px),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 22px,transparent 22px 44px)}
.canvas .scan{position:absolute;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,rgba(46,125,91,.32),transparent);animation:gpScan 5.5s linear infinite}
.box{position:absolute;border:1.5px solid var(--oxblood-2);border-radius:2px}
.box .lbl{position:absolute;top:-9px;left:-1px;transform:translateY(-100%);font:600 9px/1 var(--mono);background:var(--oxblood);color:#f4ecd9;padding:2px 5px;border-radius:2px;white-space:nowrap}
.plate-cap{text-align:center;font-style:italic;font-size:13px;color:var(--ink-3);margin-top:11px}
.plate-notes{border-top:1px solid var(--rule);margin-top:12px;padding-top:11px;display:flex;flex-direction:column;gap:7px}
.plate-notes .n{display:flex;gap:8px;font-size:13px;color:var(--ink-2);line-height:1.45}
.plate-notes .n sup{font:600 11px/1.4 var(--mono)}
.plate-notes .n b{font-weight:600;color:var(--ink)}

/* consequence band */
.band{background:linear-gradient(165deg,#1f4736,#173a2c);color:#F4ECD9;padding:48px 56px;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 2px,transparent 2px 7px);pointer-events:none}
.band-grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:46px;align-items:center}
.band h2{font-weight:600;font-size:34px;line-height:1.14;margin-top:16px}
.band h2 .drop{float:left;font-size:74px;line-height:.78;font-weight:600;margin:6px 14px 0 0;color:var(--gold-hi)}
.band .kicker{color:var(--gold-hi)}
.tenets{display:flex;flex-direction:column;gap:12px}
.tenet{background:rgba(251,246,234,.96);border-radius:var(--r);padding:15px 18px;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(200,160,90,.22),0 3px 10px rgba(40,30,10,.14);display:flex;gap:14px;align-items:flex-start}
.tenet .num{font:600 14px/1 var(--serif);flex:0 0 auto}
.tenet b{font-weight:600}
.tenet div div{font-size:13px;color:var(--ink-2);margin-top:3px}

/* generic section head */
.sec{padding:64px 56px 0}
.sec-head-c{text-align:center;max-width:640px;margin:0 auto 36px}
.sec-head-c h2{font-weight:600;font-size:36px;letter-spacing:-.01em;line-height:1.1}
.sec-head-c .kicker{margin-bottom:14px}
.sec-head-c p{font-size:16px;color:var(--ink-2);margin-top:12px;line-height:1.6;font-style:italic}

/* how it works */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chapter{background:var(--page);border:1px solid var(--rule);border-left:4px solid var(--cloth);border-radius:var(--r);padding:24px 24px 24px 22px;box-shadow:0 1px 2px rgba(40,30,10,.05)}
.chapter .ch{font:600 13px/1 var(--mono);letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.chapter h3{font-weight:600;font-size:20px;margin-top:10px}
.chapter p{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.6}

/* what we check */
.sec-head-split{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px}
.sec-head-split h2{font-weight:600;font-size:34px;letter-spacing:-.01em;line-height:1.1}
.sec-head-split .kicker{margin-bottom:13px}
.tag-r{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink-4);text-transform:uppercase}
.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.entry{background:var(--page);border:1px solid var(--rule);border-radius:var(--r);padding:20px;display:flex;gap:14px}
.entry .lnum{flex:0 0 auto;font:600 11px/1.4 var(--mono);color:var(--oxblood);writing-mode:vertical-rl;letter-spacing:.1em}
.entry h3{font-weight:600;font-size:16.5px}
.entry p{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.55}

/* about us — the goat facts sit under the origin story, separated by a rule so the
   two halves of the section do not read as one run-on block */
.goat-head{margin-top:56px;padding-top:44px;border-top:1px solid var(--rule)}
.goat-facts .lnum{writing-mode:horizontal-tb;letter-spacing:.08em}
.goat-facts .entry p i{font-style:italic}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.tier{background:var(--page);border:1px solid var(--rule);border-radius:var(--r);padding:24px 22px;display:flex;flex-direction:column}
.tier.rec{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(200,160,90,.3),0 4px 16px rgba(40,30,10,.1);position:relative}
.tier.rec::before{content:"Recommended";position:absolute;top:-11px;left:50%;transform:translateX(-50%);font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#F4ECD9;background:var(--cloth);padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(200,160,90,.4);white-space:nowrap}
.tier .tname{font-weight:600;font-size:17px}
.tier .tdesc{font-size:12.5px;color:var(--ink-3);margin-top:4px;min-height:32px;font-style:italic}
.tier .price{margin:16px 0 6px;display:flex;align-items:baseline;gap:3px}
.tier .price b{font:600 38px/1 var(--mono);color:var(--ink)}
.tier .price.sm b{font-size:26px}
.tier .price.md b{font-size:30px}
.tier .price span{font-size:13px;color:var(--ink-3)}
.tier .quota{font:600 11px/1 var(--mono);color:var(--cloth);background:rgba(30,74,56,.08);border:1px solid rgba(30,74,56,.2);border-radius:var(--r);padding:8px 10px;text-align:center;margin-bottom:16px}
.tier .tcta{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:11px;border-radius:var(--r);cursor:pointer}
.tier .tcta.cloth{background:var(--cloth);border:1px solid var(--cloth-deep);color:#F4ECD9;box-shadow:inset 0 0 0 1px rgba(200,160,90,.32)}
.tier .tcta.ghost{border:1px solid var(--rule-2);background:var(--paper);color:var(--ink-2)}
.price-toggle{display:flex;justify-content:center;margin-bottom:26px}
.seg{display:inline-flex;background:var(--page);border:1px solid var(--rule-2);border-radius:999px;padding:4px}
.seg button{border:none;background:none;font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:9px 16px;border-radius:999px;cursor:pointer;transition:.15s cubic-bezier(.22,1,.36,1)}
.seg button.on{background:var(--cloth);color:#F4ECD9}

/* hero price pills */
.hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 14px}
.pill{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:6px;background:var(--page);
  border:1px solid var(--rule);transition:.16s cubic-bezier(.22,1,.36,1)}
.pill b{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pill span{font:600 19px/1 var(--mono);color:var(--ink)}
.pill span i{font-style:normal;font-size:11px;color:var(--ink-3);margin-left:1px}
.pill:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 6px 16px rgba(40,30,10,.12)}
.pill-hi{background:linear-gradient(180deg,#FBF6EA,#F3E9D2);border-color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(200,160,90,.35)}
.pill-hi b{color:var(--cloth)}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.faq details{background:var(--page);border:1px solid var(--rule);border-radius:6px;padding:16px 18px}
.faq details[open]{border-color:var(--rule-2);box-shadow:0 6px 18px rgba(40,30,10,.08)}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:15.5px;color:var(--ink);display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 18px/1 var(--mono);color:var(--gold)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;font-size:14px;line-height:1.65;color:var(--ink-2)}
@media(max-width:900px){.faq{grid-template-columns:1fr}}

/* see-it-work demos */
.demos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch}
.demo{display:flex;flex-direction:column;background:var(--page);border:1px solid var(--rule);border-radius:6px;
  overflow:hidden;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1)}
.demo:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(40,30,10,.14)}
.demo.demo-wide{grid-column:1 / -1}
.demo-shot{display:flex;align-items:center;justify-content:center;padding:14px;background:var(--paper-2);
  border-bottom:1px solid var(--rule)}
.demo-shot img{max-width:100%;max-height:340px;width:auto;height:auto;object-fit:contain;display:block;
  border:1px solid var(--rule-2);border-radius:3px;box-shadow:0 2px 10px rgba(40,30,10,.14)}
.demo-wide .demo-shot img{max-height:none;width:100%}
.demo figcaption{padding:16px 18px 18px}
.demo-tag{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf);margin-bottom:7px}
.demo figcaption p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.demo figcaption code{font:500 12.5px/1 var(--mono);background:var(--paper-2);border:1px solid var(--rule);
  border-radius:3px;padding:1px 4px}
.demo-more{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.dm{background:var(--page);border:1px solid var(--rule);border-left:2px solid var(--gold);border-radius:var(--r);padding:13px 14px}
.dm b{display:block;font-size:14px;margin-bottom:4px}
.dm span{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
@media(max-width:900px){.demos{grid-template-columns:1fr}.demo-more{grid-template-columns:1fr 1fr}}

/* pricing — enriched cards */
.tier .tart{display:grid;place-items:center;margin:-4px 0 14px;padding:10px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.tier .tart img{height:200px;width:auto;max-width:100%;display:block;transition:transform .26s cubic-bezier(.22,1,.36,1)}
.tier:hover .tart img{transform:translateY(-3px) scale(1.04)}
.tier.rec .tart{border-color:var(--gold);background:linear-gradient(180deg,#FBF6EA,#F1E6CF);
  box-shadow:inset 0 0 0 1px rgba(200,160,90,.28)}
.sec-sub{margin-top:10px;font-size:15px;color:var(--ink-3);max-width:640px;margin-left:auto;margin-right:auto;line-height:1.6}
.tier{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1),border-color .18s}
.tier:hover{transform:translateY(-4px);border-color:var(--rule-2);box-shadow:0 12px 30px rgba(40,30,10,.13)}
.tier.rec{transform:translateY(-6px)}
.tier.rec:hover{transform:translateY(-10px);box-shadow:inset 0 0 0 1px rgba(200,160,90,.45),0 18px 40px rgba(40,30,10,.2)}
.tier.rec::before{content:"Most popular"}
.tier .tfeat{list-style:none;margin:2px 0 20px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.tier .tfeat li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.tier .tfeat li::before{content:"";position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:50%;
  background:rgba(60,122,78,.14);
  box-shadow:inset 0 0 0 1px rgba(60,122,78,.45)}
.tier .tfeat li::after{content:"";position:absolute;left:4px;top:8px;width:5px;height:2.5px;
  border-left:1.6px solid var(--clear);border-bottom:1.6px solid var(--clear);transform:rotate(-45deg)}
.tier .tfeat li.no{color:var(--ink-4);text-decoration:line-through;text-decoration-color:var(--rule-2)}
.tier .tfeat li.no::before{background:rgba(120,100,70,.08);box-shadow:inset 0 0 0 1px var(--rule-2)}
.tier .tfeat li.no::after{left:3.5px;top:9.5px;width:6px;height:0;border-left:none;border-bottom:1.6px solid var(--ink-4);transform:none}
.tier .tfeat li.star::before{background:rgba(176,133,67,.16);box-shadow:inset 0 0 0 1px rgba(176,133,67,.6)}
.tier .tfeat li.star::after{border-color:var(--gold)}
.tier .tcta{transition:.16s cubic-bezier(.22,1,.36,1)}
.tier .tcta.cloth:hover{background:var(--cloth-deep)}
.tier .tcta.ghost:hover{border-color:var(--cloth);color:var(--cloth);background:var(--page)}
.tier.dim{opacity:.55;filter:saturate(.6)}
.price-foot{margin-top:22px;text-align:center;font-size:13px;color:var(--ink-3);font-style:italic}
@media(max-width:900px){.tiers{grid-template-columns:1fr}.tier.rec{transform:none}}

/* epigraph */
.epigraph{background:var(--page);border:1px solid var(--rule);border-radius:var(--r-lg);padding:48px 40px;text-align:center;position:relative;box-shadow:inset 0 0 0 1px rgba(200,160,90,.22)}
.epigraph .q{font-family:var(--serif);font-size:64px;line-height:.5;color:var(--gold);height:30px}
.epigraph p{font-style:italic;font-size:24px;line-height:1.5;color:var(--ink);max-width:760px;margin:0 auto}
.epigraph .cite{margin-top:20px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* cta */
.cta-box{background:radial-gradient(120% 130% at 80% 0,#27604780,transparent 60%),linear-gradient(160deg,#235540,#163728);border-radius:var(--r-lg);padding:54px 40px;text-align:center;color:#F4ECD9;position:relative;overflow:hidden}
.cta-box .frame{position:absolute;inset:18px;border:1px solid rgba(200,160,90,.5);border-radius:3px;pointer-events:none}
.cta-box h2{position:relative;font-weight:600;font-size:38px;letter-spacing:-.01em}
.cta-box p{position:relative;font-style:italic;color:rgba(244,236,217,.85);margin-top:12px;font-size:17px}
.cta-box .btn{position:relative;margin-top:26px;background:var(--page);color:var(--cloth);box-shadow:inset 0 0 0 2px rgba(200,160,90,.3)}
.cta-box .btn:hover{background:#fff}

/* footer */
footer{padding:40px 56px;margin-top:60px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative;z-index:2}
.colophon{display:flex;align-items:center;gap:12px}
.colophon img{height:34px;width:auto}
.colophon .cn{font-weight:600;font-size:15px;color:var(--ink)}
.colophon .cs{font:500 10.5px/1 var(--mono);color:var(--ink-4);margin-top:3px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.foot-links a{cursor:pointer}.foot-links a:hover{color:var(--leaf)}
.foot-copy{font:500 11.5px/1 var(--mono);color:var(--ink-4)}

@media(max-width:1080px){
  .hero{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:52px}
  .band-grid{grid-template-columns:1fr;gap:28px}
  .chapters,.catalog,.tiers{grid-template-columns:1fr}
  /* mobile nav: a real toggle instead of just hiding the links */
  .mobile-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    border:1px solid var(--rule-2);background:var(--page);border-radius:var(--r);cursor:pointer;color:var(--ink-2)}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:rgba(242,234,217,.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);padding:6px 56px 14px}
  nav.nav-open .nav-links{display:flex}
  .nav-links a{padding:13px 0;width:100%}
}
@media(max-width:640px){
  .nav,.pad,.sec,.hero,.band,footer{padding-left:22px;padding-right:22px}
  .nav-links{padding-left:22px;padding-right:22px}
  .hero h1{font-size:40px}
}

/* ===== dynamic motion layer ===== */
/* scroll-progress gilt bar */
.gp-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--gold),var(--gold-hi));box-shadow:0 0 10px rgba(176,133,67,.55)}
/* sticky nav that reacts to scroll */
.nav{position:sticky;top:0;z-index:50;background:rgba(242,234,217,.8);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);transition:box-shadow .3s var(--ease),height .3s var(--ease),background .3s var(--ease)}
.nav.gp-scrolled{height:60px;background:rgba(242,234,217,.94);box-shadow:0 6px 26px rgba(40,30,10,.1)}
/* animated nav-link underline */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:var(--leaf);transition:right .3s var(--ease)}
.nav-links a:hover::after{right:0}
/* reveal-on-scroll */
.gp-reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.gp-reveal.gp-in{opacity:1;transform:none}
/* card hover lifts */
.chapter,.entry,.tier,.tenet{transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.chapter:hover,.entry:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(40,30,10,.15);border-color:var(--gold)}
.tier:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(40,30,10,.17)}
.tenet:hover{transform:translateX(5px)}
.chapter:hover .ch,.entry:hover .lnum{color:var(--gold-hi)}
/* button micro-interactions */
.btn:hover{transform:translateY(-2px)}
.btn svg{transition:transform .22s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-cloth{box-shadow:inset 0 0 0 1px rgba(200,160,90,.32),0 4px 14px rgba(20,53,40,.18)}
.btn-cloth:hover{box-shadow:inset 0 0 0 1px rgba(200,160,90,.45),0 9px 24px rgba(20,53,40,.28)}
/* plate + slider life */
.plate{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.slide img{transition:transform .6s var(--ease)}
.slider:hover .slide img{transform:scale(1.025)}
.epigraph,.cta-box{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.epigraph:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(200,160,90,.22),0 14px 34px rgba(40,30,10,.12)}
/* score badge bump on change */
@keyframes gpBump{0%{transform:scale(1)}42%{transform:scale(1.2)}100%{transform:scale(1)}}
/* hover lift must win over the reveal end-state */
.plate:hover{transform:translateY(-4px);box-shadow:0 4px 10px rgba(40,30,10,.12),0 34px 66px rgba(40,30,10,.2)}
/* motion-safety */
@media(prefers-reduced-motion:reduce){
  .gp-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .nav{transition:none}
  *{animation-duration:.001ms!important}
  .chapter:hover,.entry:hover,.tier:hover,.tenet:hover,.btn:hover,.plate:hover,.epigraph:hover{transform:none!important}
  .slider:hover .slide img{transform:none!important}
}
/* print / PDF export: reveal-on-scroll blocks not yet scrolled into view would
   otherwise print blank — force everything visible (this page is literally about
   producing report PDFs) */
@media print{
  .gp-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .gp-progress,nav,.gilt{display:none!important}
}