/* ==========================================================================
   My Body Is a River — marketing site
   Theme: a river runs through the whole page (see assets/js/river.js) the way
   it runs through the figure on the cover. Colors are tokens on :root; dark
   mode redefines them.
   ========================================================================== */
:root{
  --page:#EDF0EC; --ink:#1C2522; --ink-soft:#52625C;
  --channel:#1C5D63; --channel-deep:#0E3A3F;
  --depth:#0A2A2F; --depth-2:#103C41; --sand:#E6DFD0; --rule:#C7D0C8; --pale:#DCE8E4;
  --gold:#9A7B3F;
  --river:#3FA79B; --river-hi:#1C5D63; --river-glow:rgba(63,167,155,.22);
  --card:#F4F6F3;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page:#0E1618;--ink:#DCE4E0;--ink-soft:#93A5A0;--channel:#6FB9AE;--channel-deep:#9AD3C9;
  --sand:#182326;--rule:#2A3739;--depth:#07191C;--depth-2:#0C2B2F;--pale:#C9DBD6;--gold:#C9A664;
  --river:#4FB3A6;--river-hi:#A8E0D6;--river-glow:rgba(79,179,166,.18);--card:#131E21;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --page:#0E1618;--ink:#DCE4E0;--ink-soft:#93A5A0;--channel:#6FB9AE;--channel-deep:#9AD3C9;
  --sand:#182326;--rule:#2A3739;--depth:#07191C;--depth-2:#0C2B2F;--pale:#C9DBD6;--gold:#C9A664;
  --river:#4FB3A6;--river-hi:#A8E0D6;--river-glow:rgba(79,179,166,.18);--card:#131E21;
  color-scheme:dark;}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 4.5rem);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--ink);position:relative;overflow-x:hidden;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-optical-sizing:auto;
  font-size:1.02rem;line-height:1.65;font-weight:400}
p{margin:0 0 1.3em}
img{max-width:100%;display:block}
a{color:var(--channel)}
a:focus-visible,button:focus-visible{outline:2px solid var(--channel);outline-offset:3px}
.shell{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.narrow{max-width:38rem}
.mid{max-width:48rem}

/* content sits above the river; section backgrounds sit below it */
.shell,.hero__in,.proof__in{position:relative;z-index:2}


/* --------------------------------------------------------------------------
   The river. river.js draws one continuous channel from the cover down to the
   footer, switching banks at every section boundary so it cuts across each
   section. The bright "progress" stroke fills in as the reader scrolls.
   -------------------------------------------------------------------------- */
#river{position:absolute;top:0;left:0;z-index:1;pointer-events:none;overflow:visible;display:block}
#river .river__bed{fill:none;stroke:var(--river);stroke-opacity:.14;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
#river .river__flow{fill:none;stroke:var(--river);stroke-opacity:.55;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#river .river__prog{fill:none;stroke:var(--river-hi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#river .river__shimmer{fill:none;stroke:#EAF7F3;stroke-opacity:.5;stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:2 78;animation:river-shimmer 9s linear infinite}
@keyframes river-shimmer{to{stroke-dashoffset:-80}}
@media (prefers-reduced-motion:reduce){#river .river__shimmer{display:none}}
#river .river__tick{stroke:var(--river-hi);stroke-width:1.2;stroke-opacity:.9}
#river .river__num{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:13px;fill:var(--river-hi);opacity:.85;
  font-variant-numeric:lining-nums}
#river .river__delta{fill:none;stroke:var(--river);stroke-opacity:.38;stroke-width:1.2;stroke-linecap:round}
#river .river__pool{fill:var(--river);fill-opacity:.12}
@media (max-width:1079px){#river .river__num{display:none}}

/* mile markers: the eyebrow above every section heading */
.mile{display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--river-hi);font-weight:500}
.mile::before{content:"";width:2.2rem;height:1px;background:var(--river-hi);opacity:.7;flex:none}
.mile b{font-weight:600;white-space:nowrap;flex:none}
@media (max-width:480px){.mile::before{width:1.2rem}}
.mile--dark{color:var(--pale);opacity:.85}
.mile--dark::before{background:var(--pale)}
.mile--center{justify-content:center}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:color-mix(in srgb,var(--page) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:3.5rem;max-width:64rem;margin:0 auto;padding:0 1.5rem}
.nav__title{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__title small{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.8rem;color:var(--ink-soft);margin-left:.6rem;letter-spacing:0}
@media (max-width:560px){.nav__title small{display:none}}
.nav__links{display:flex;align-items:center;gap:1.4rem}
.nav__links a{font-size:.9rem;color:var(--ink-soft);text-decoration:none}
.nav__links a:hover{color:var(--channel)}
@media (max-width:820px){.nav__links a.hide-sm{display:none}}

/* buttons */
.btn{display:inline-block;font:inherit;font-size:.97rem;line-height:1;padding:.85rem 1.4rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;border-radius:2px;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn--solid{background:var(--channel);color:#F3F7F5;border-color:var(--channel)}
.btn--solid:hover{background:var(--channel-deep);border-color:var(--channel-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--channel);color:var(--channel)}
.btn--onDark{background:var(--pale);color:var(--depth);border-color:var(--pale)}
.btn--onDark:hover{background:#fff;border-color:#fff}
.btn--onDarkGhost{background:transparent;color:var(--pale);border-color:rgba(220,235,230,.35)}
.btn--onDarkGhost:hover{border-color:var(--pale)}
.btn--sm{padding:.55rem 1rem;font-size:.88rem}
.note{font-size:.82rem;color:var(--ink-soft);margin:.6rem 0 0;min-height:1.1em}

/* hero */
.hero{position:relative;background:var(--depth);color:var(--pale);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 55%,rgba(46,138,132,.28),transparent 70%)}
.hero__current{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.hero__current path{fill:none;stroke:#4E9A97;stroke-width:1;stroke-linecap:round;opacity:.55}
.hero__in{max-width:64rem;margin:0 auto;padding:3.5rem 1.5rem 3.4rem;
  display:grid;grid-template-columns:1fr;gap:3.2rem;align-items:center}
@media (min-width:880px){.hero__in{grid-template-columns:1.1fr .9fr;gap:4rem;padding:5rem 1.5rem 5rem}}
.ribbon{display:inline-flex;align-items:center;gap:.6rem;border:1px solid rgba(201,166,100,.5);
  color:var(--gold);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .8rem;margin:0 0 1.5rem;border-radius:2px}
.hero h1{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:500;
  font-size:clamp(2.6rem,8vw,4.4rem);line-height:1;letter-spacing:-.02em;margin:0 0 1.3rem;color:#F0F5F2}
.hero h1 em{font-style:italic;font-weight:400}
.hero__pitch{font-size:1.16rem;line-height:1.55;color:rgba(230,241,237,.93);max-width:31rem;margin:0 0 2rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero__meta{font-size:.9rem;color:rgba(220,235,230,.66);margin:1.2rem 0 0}
.hero__meta a{color:var(--pale)}
.stars{display:inline-flex;gap:.12rem;vertical-align:-.15em;margin-right:.45rem}
.stars svg{width:14px;height:14px;fill:var(--gold)}
.hero__quote{margin:2.2rem 0 0;padding-left:1rem;border-left:2px solid rgba(201,166,100,.55);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-style:italic;font-size:1.12rem;line-height:1.4;color:rgba(230,241,237,.8);max-width:28rem}
.hero__quote small{display:block;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-style:normal;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(220,235,230,.55);margin-top:.5rem}

/* byline chip: author face + name, used in the hero and the signup */
.byline{display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1.6rem;text-decoration:none;color:inherit}
.byline img{width:2.9rem;height:2.9rem;border-radius:50%;object-fit:cover;border:2px solid rgba(220,235,230,.35);flex:none}
.byline b{display:block;font-size:1rem;font-weight:600;color:var(--pale);line-height:1.2}
.byline span{display:block;font-size:.8rem;font-style:italic;color:rgba(220,235,230,.62)}
.byline:hover b{text-decoration:underline;text-underline-offset:.2em}
.byline--light b{color:var(--ink)}
.byline--light span{color:var(--ink-soft)}
.byline--light img{border-color:var(--rule)}

/* the cover (inline SVG from assets/img/cover.svg) */
.cover{width:100%;max-width:19.5rem;margin:0 auto;position:relative;
  aspect-ratio:2/3;box-shadow:0 1px 0 rgba(0,0,0,.3),-14px 22px 48px rgba(0,0,0,.5);border-radius:2px;overflow:hidden}
.cover svg{display:block;width:100%;height:100%}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,0) 3%,rgba(255,255,255,.05) 6%,rgba(255,255,255,0) 12%)}
@media (min-width:880px){.cover{transform:perspective(1400px) rotateY(-7deg);transform-origin:left center}}
.cover.cover--flat{transform:none}
.cover--mini{max-width:9rem;margin:0 auto 2rem}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mt{margin-top:1.8rem}
.sub--tight{margin-bottom:1.6rem}
.final--page{min-height:80vh;display:flex;align-items:center}

/* proof bar */
.proof{background:var(--depth-2);color:rgba(220,235,230,.8);border-top:1px solid rgba(220,235,230,.12);
  padding:1.6rem 0;font-size:.86rem}
.proof__in{max-width:64rem;margin:0 auto;padding:0 1.5rem;display:flex;flex-wrap:wrap;
  gap:1rem 2.4rem;align-items:center;justify-content:center;text-align:center}
.proof__in span{white-space:nowrap}

/* sections */
section{padding:4.5rem 0}
.band{background:var(--sand)}
.band--deep{background:var(--depth-2);color:var(--pale)}
h2.head{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:500;
  font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.08;letter-spacing:-.012em;margin:0 0 1.5rem}
.sub{font-size:1.1rem;color:var(--ink-soft);font-style:italic;margin:-.7rem 0 2.4rem;max-width:36rem}
.sub--dark{color:rgba(220,235,230,.72)}
h3{font-size:1.06rem;font-weight:600;margin:0 0 .5rem;color:var(--channel-deep)}
.band--deep h3{color:var(--pale)}

/* portraits: tinted monochrome so the photo sits inside the cover's palette.
   Remove the .portrait--tint class to show the photograph in full colour. */
.portrait{position:relative;overflow:hidden;border-radius:2px}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.portrait--tint img{filter:grayscale(1) contrast(1.06) brightness(1.02)}
.portrait--tint::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(165deg,#2C7A78 0%,#1C5D63 55%,#0E3A3F 100%)}
.portrait--tint::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:.35;
  background:linear-gradient(20deg,rgba(0,0,0,0) 40%,rgba(207,230,224,.9) 100%)}
.portrait__cap{font-size:.8rem;font-style:italic;color:var(--ink-soft);margin:.7rem 0 0;line-height:1.5}

/* a note from Scott */
.letter{position:relative}
.letter__grid{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:start}
@media (min-width:820px){.letter__grid{grid-template-columns:15rem 1fr;gap:3.6rem}}
@media (min-width:820px){.letter__aside{position:sticky;top:5.5rem}}
.letter__body{max-width:38rem}
.letter__body p{font-size:1.1rem;line-height:1.68}
.letter__body p:first-of-type::first-letter{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;float:left;
  font-size:3.6rem;line-height:.8;padding:.1em .12em 0 0;color:var(--channel);font-weight:500}
.letter__pull{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-style:italic;
  font-size:clamp(1.4rem,3.8vw,1.85rem);line-height:1.32;color:var(--channel-deep);margin:1.8rem 0 2rem;max-width:30rem}
.sig{margin:2rem 0 0;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.sig__name{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-style:italic;font-size:1.9rem;line-height:1;color:var(--ink);letter-spacing:-.01em}
.sig__role{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* praise */
.praise{display:grid;grid-template-columns:1fr;gap:2.2rem}
@media (min-width:820px){.praise{grid-template-columns:1fr 1fr;gap:2.6rem 3rem}}
.praise blockquote{margin:0;padding:0;border:0}
.praise q{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-style:italic;quotes:none;
  font-size:1.22rem;line-height:1.4;color:var(--channel-deep);display:block;margin-bottom:.9rem}
.praise cite{font-style:normal;font-size:.88rem;color:var(--ink-soft);display:block;line-height:1.5}
.praise--lead q{font-size:clamp(1.5rem,4vw,2rem)}
.praise--lead{grid-column:1/-1;border-bottom:1px solid var(--rule);padding-bottom:2.2rem;margin-bottom:.4rem}

/* press strip */
.press{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.8rem 0;margin-top:3rem}
.press__row{display:flex;flex-wrap:wrap;gap:1.2rem 2.6rem;align-items:center;justify-content:center}
.press__row span{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:1.05rem;color:var(--ink-soft);opacity:.75}

/* premise */
.premise p{font-size:1.1rem;line-height:1.68}
.premise .big{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-style:italic;
  font-size:clamp(1.5rem,4.5vw,2.1rem);line-height:1.32;color:var(--channel-deep);margin:2.4rem 0;max-width:32rem}

/* chapters + reading routes */
.inside{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start}
@media (min-width:900px){.inside{grid-template-columns:1.4fr 1fr;gap:4rem}}
.chapters{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.chapters li{border-bottom:1px solid var(--rule);padding:1rem 0;display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:baseline}
.chapters .n{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:1.4rem;color:var(--channel);font-variant-numeric:lining-nums}
.chapters .t{font-size:1.05rem;line-height:1.35;margin:0}
.chapters .g{font-size:.9rem;color:var(--ink-soft);font-style:italic;margin:.25rem 0 0;line-height:1.45}
.routes{background:var(--card);border:1px solid var(--rule);padding:1.6rem 1.5rem 1.4rem}
@media (min-width:900px){.routes{position:sticky;top:5.5rem}}
.routes__head{display:flex;align-items:center;gap:.9rem;margin:0 0 1.2rem}
.routes__head img{width:2.6rem;height:2.6rem;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--rule)}
.routes__head h3{margin:0;font-size:1.05rem}
.routes__head p{margin:0;font-size:.82rem;color:var(--ink-soft);font-style:italic}
.routes ul{list-style:none;margin:0;padding:0}
.routes li{padding:.85rem 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;font-size:.95rem}
.routes li em{display:block;font-style:normal;font-weight:600;color:var(--channel-deep);font-size:.95rem}
.routes li span{color:var(--ink-soft);font-size:.88rem;line-height:1.45}
.routes .ch{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;color:var(--channel);font-size:1.15rem;white-space:nowrap;font-variant-numeric:lining-nums;letter-spacing:.04em}
.routes__foot{margin:1.1rem 0 0;font-size:.85rem;color:var(--ink-soft);font-style:italic}

/* excerpt */
.excerpt{border-left:2px solid var(--channel);padding-left:1.6rem;max-width:36rem}
.excerpt p{font-size:1.06rem}
.excerpt p:first-child::first-letter{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;float:left;
  font-size:3.2rem;line-height:.82;padding:.08em .1em 0 0;color:var(--channel);font-weight:500}

/* how Scott grades a claim */
.grades{list-style:none;margin:2.4rem 0 0;padding:0;border-top:1px solid var(--rule)}
.grades li{display:grid;grid-template-columns:1fr;gap:.5rem 1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--rule);align-items:center}
@media (min-width:760px){.grades li{grid-template-columns:10rem 7rem 1fr}}
.grades .g{font-weight:600;color:var(--channel-deep);font-size:1rem}
.grades .bar{display:flex;gap:.25rem}
.grades .bar i{display:block;width:1.1rem;height:.5rem;background:var(--rule);border-radius:1px}
.grades .bar i.on{background:var(--river)}
.grades .e{font-size:.95rem;color:var(--ink-soft);margin:0}
.grades .e strong{color:var(--ink);font-weight:500}
.points{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:3rem}
@media (min-width:760px){.points{grid-template-columns:repeat(3,1fr);gap:2.4rem}}
.points div{border-top:2px solid var(--channel);padding-top:1rem}
.points p{font-size:.97rem;margin:0}

/* author */
.auth{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
@media (min-width:860px){.auth{grid-template-columns:18rem 1fr;gap:3.6rem}}
.auth__frame{border:1px solid rgba(220,235,230,.22);padding:.5rem;max-width:18rem}
.auth__cred{font-size:.86rem;color:rgba(220,235,230,.62);margin:.9rem 0 0;line-height:1.55}
.auth h2{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:500;
  font-size:clamp(2.1rem,5.5vw,3rem);line-height:1.04;margin:0 0 .4rem;color:#F0F5F2}
.auth__role{font-style:italic;color:var(--gold);margin:0 0 1.6rem;font-size:1.02rem}
.auth p{color:rgba(228,240,236,.88)}
.auth__facts{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  border-top:1px solid rgba(220,235,230,.16);border-bottom:1px solid rgba(220,235,230,.16);padding:1rem 0}
.auth__facts b{display:block;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:500;font-size:1.5rem;line-height:1;color:#F0F5F2;margin-bottom:.3rem}
.auth__facts span{font-size:.8rem;color:rgba(220,235,230,.62);line-height:1.35;display:block}
.rules{counter-reset:rule;list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid rgba(220,235,230,.16)}
.rules li{counter-increment:rule;display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;padding:.9rem 0;border-bottom:1px solid rgba(220,235,230,.14)}
.rules li::before{content:counter(rule,decimal-leading-zero);font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:1.3rem;line-height:1.2;color:var(--gold);font-variant-numeric:lining-nums}
.rules b{display:block;font-weight:600;color:#F0F5F2;font-size:1rem;margin-bottom:.15rem}
.rules span{grid-column:2;font-size:.92rem;color:rgba(228,240,236,.78);line-height:1.5}
.auth__sub{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(220,235,230,.6);margin:2.2rem 0 .2rem}
.auth__list{list-style:none;padding:0;margin:.6rem 0 0;display:grid;grid-template-columns:1fr;gap:.1rem}
@media (min-width:640px){.auth__list{grid-template-columns:1fr 1fr;gap:.1rem 2rem}}
.auth__list li{padding:.6rem 0;border-bottom:1px solid rgba(220,235,230,.14);font-size:.94rem;color:rgba(228,240,236,.86)}
.auth__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1rem;text-align:center}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats .v{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:clamp(2.4rem,7vw,3.4rem);
  line-height:1;color:var(--channel);font-variant-numeric:lining-nums;margin:0 0 .4rem}
.stats .k{font-size:.88rem;color:var(--ink-soft);margin:0;line-height:1.4}

/* media / speaking */
.two{display:grid;grid-template-columns:1fr;gap:2.4rem}
@media (min-width:820px){.two{grid-template-columns:1fr 1fr;gap:3rem}}
.card{border:1px solid var(--rule);padding:1.8rem 1.6rem;background:var(--card)}
.card h3{margin-bottom:.7rem}
.card p{font-size:.97rem}
.card p:last-of-type{margin-bottom:1.3rem}
.topics{margin:2.6rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.topics span{font-size:.82rem;border:1px solid var(--rule);padding:.35rem .7rem;border-radius:2rem;color:var(--ink-soft);background:var(--card)}
.topics b{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-right:.4rem;font-weight:500}

/* contact form */
.contact{margin:3rem 0 0;border:1px solid var(--rule);background:var(--card);padding:1.8rem 1.6rem 1.6rem}
.contact__head{margin:0 0 1.4rem}
.contact__head h3{margin:0 0 .3rem;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:500;font-size:1.5rem;color:var(--ink)}
.contact__head p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.contact__grid{display:grid;grid-template-columns:1fr;gap:1rem;margin:0 0 1.3rem}
@media (min-width:700px){.contact__grid{grid-template-columns:1fr 1fr 1fr}.contact__wide{grid-column:1/-1}}
.contact label{display:block;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.contact .field{display:block;width:100%;margin-top:.4rem;font-size:1rem;letter-spacing:0;text-transform:none;font-weight:400}
.contact textarea.field{resize:vertical;line-height:1.5;min-height:7rem}
.contact select.field{appearance:none;-webkit-appearance:none;padding-right:2.2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 50%,calc(100% - .8rem) 50%;background-size:.35rem .35rem,.35rem .35rem;background-repeat:no-repeat}

/* formats */
.formats{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:2rem}
@media (min-width:760px){.formats{grid-template-columns:repeat(3,1fr)}}
.fmt{border:1px solid var(--rule);padding:1.6rem 1.4rem;display:flex;flex-direction:column;background:var(--card)}
.fmt--feature{border-color:var(--channel);border-width:2px;position:relative}
.fmt__flag{position:absolute;top:-1px;right:-1px;background:var(--channel);color:#F3F7F5;
  font-size:.72rem;letter-spacing:.05em;padding:.3rem .6rem}
.fmt__name{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:1.35rem;margin:0 0 .15rem}
.fmt__tag{font-size:.8rem;font-style:italic;color:var(--channel);margin:0 0 1rem;min-height:1.2em}
.fmt__price{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:2.4rem;line-height:1;margin:0 0 1rem;font-variant-numeric:lining-nums}
.fmt ul{list-style:none;padding:0;margin:0 0 1.6rem;font-size:.93rem;color:var(--ink-soft)}
.fmt li{padding:.3rem 0;border-bottom:1px solid var(--rule)}
.fmt li:last-child{border-bottom:0}
.fmt .btn{width:100%;text-align:center;margin-top:auto}
.guarantee{margin-top:2.2rem;font-size:.93rem;color:var(--ink-soft);text-align:center;max-width:34rem;margin-inline:auto}
.buy__cover{display:none}
@media (min-width:1100px){
  .buy__grid{display:grid;grid-template-columns:13rem 1fr;gap:3rem;align-items:start}
  .buy__cover{display:block;max-width:13rem;margin-top:.4rem}
}

/* faq */
details{border-bottom:1px solid var(--rule);padding:1.05rem 0}
details summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:1.4rem;color:var(--channel);line-height:1}
details[open] summary::after{content:"–"}
details p{margin:.85rem 0 0;font-size:.97rem;color:var(--ink-soft)}

/* signup */
.signup{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;max-width:34rem}
.field{font:inherit;font-size:1rem;flex:1 1 15rem;padding:.8rem 1rem;border:1px solid var(--rule);
  background:var(--page);color:var(--ink);border-radius:2px}
.field:focus{outline:2px solid var(--channel);outline-offset:1px;border-color:var(--channel)}
.hp{position:absolute;left:-9999px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.desk{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:820px){.desk{grid-template-columns:1fr 1fr;gap:3rem}}
.desk__note{font-size:.98rem;color:var(--ink-soft);font-style:italic;border-left:2px solid var(--river);padding-left:1.2rem;max-width:26rem;margin:0}

/* final */
.final{background:var(--depth);color:var(--pale);text-align:center}
.final h2{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:500;
  font-size:clamp(2rem,6vw,3.2rem);line-height:1.04;margin:0 auto 1.4rem;max-width:23rem;color:#F0F5F2}
.final p{color:rgba(220,235,230,.8);max-width:31rem;margin:0 auto 2rem}
.final .hero__ctas{justify-content:center}

footer{background:var(--depth);color:rgba(220,235,230,.62);padding:2.5rem 0 9rem;font-size:.87rem;
  border-top:1px solid rgba(220,235,230,.14)}
footer a{color:rgba(220,235,230,.82)}
footer p{margin:0 0 .8rem;max-width:42rem}
.foot__by{display:flex;align-items:center;gap:.8rem;margin:0 0 1.4rem}
.foot__by img{width:2.4rem;height:2.4rem;border-radius:50%;object-fit:cover;border:1px solid rgba(220,235,230,.3)}
.foot__by b{color:var(--pale);font-weight:600;display:block;line-height:1.2}
.foot__by span{font-size:.8rem;font-style:italic}