@font-face{font-family:"Fraunces Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:"DM Sans Variable";font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dm-sans.woff2) format("woff2")}
/* Palette: green (dark, brand, tint), yellow (gold, tint), orange (accent, tint), warm neutrals */
:root{--dark:#0b4a30;--green:#1c6f49;--green-t:#e5efe7;--gold:#f0b04a;--gold-t:#fbeccb;--orange:#e8641f;--orange-d:#b8440f;--orange-t:#fde4d3;
--ink:#14301f;--muted:#53695c;--white:#fffdf9;--cream:#f6f1e7;--beige:#ece5d8;--line:#e2dccd;--light:#f6f1e7;
--serif:"Fraunces Variable",Georgia,"Times New Roman",serif;--sans:"DM Sans Variable",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--max:1160px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--white);font:400 17px/1.65 var(--sans)}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:10px 16px;z-index:20}
.skip:focus{left:8px;top:8px}

/* type scale: h1 / h2 / h3 / lead / body / small. One scale for every page. */
h1,h2,h3,.quote{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(38px,5vw,60px);line-height:1.08}
h2{font-size:clamp(30px,3.4vw,42px);line-height:1.14}
h3{font-size:22px;line-height:1.25}
.lead{font-size:19px;line-height:1.6;max-width:680px;color:var(--muted);margin:16px auto 0}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-d);margin:0 0 14px}
.eyebrow::before{content:none}
.small{font-size:14px}

/* header */
header{position:sticky;top:0;z-index:10;background:var(--dark);color:var(--light)}
nav.nav{max-width:var(--max);margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{display:block;height:32px;width:auto}
.links{display:flex;gap:20px;align-items:center;font-size:14px;font-weight:500}
.links a{text-decoration:none;color:rgba(246,241,231,.88);transition:color .2s}
.links a:not(.button):hover{color:var(--gold)}
.links a[aria-current=page]{color:#fff;box-shadow:0 2px 0 var(--gold);padding-bottom:3px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 16px;color:var(--light)}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:46px;background:var(--dark);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px;display:grid;gap:4px;min-width:230px;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.menu-panel a{padding:10px 12px;text-decoration:none;border-radius:10px;color:var(--light)}
.menu-panel a.button{text-align:center;margin-top:6px;color:var(--ink)}

/* buttons: primary + outline, one style per background */
.button{display:inline-block;background:var(--dark);color:#fff;border:2px solid var(--dark);border-radius:999px;padding:11px 24px;text-decoration:none;font-weight:700;font-size:16px;line-height:1.3;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.button:hover{background:#083a26;transform:translateY(-2px);box-shadow:0 8px 18px rgba(11,74,48,.22)}
.button.dark{background:transparent;color:var(--dark)}
.button.dark:hover{background:var(--dark);color:#fff}
.hero .button,.green .button,.deep .button,.links .button,.menu-panel .button{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hero .button:hover,.green .button:hover,.deep .button:hover,.links .button:hover{background:#f5c06a;border-color:#f5c06a}
.hero .button.dark,.green .button.dark,.deep .button.dark,.links .button.line{background:transparent;border-color:rgba(246,241,231,.6);color:var(--light)}
.hero .button.dark:hover,.green .button.dark:hover,.deep .button.dark:hover,.links .button.line:hover{background:rgba(246,241,231,.12);border-color:var(--light);color:#fff}
.links .button{padding:8px 18px;font-size:14px}
.gold .button{background:var(--dark);border-color:var(--dark);color:#fff}
.gold .button.dark{background:transparent;color:var(--dark)}
.gold .button.dark:hover{background:var(--dark);color:#fff}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}

/* bands (sections): white, cream, beige, dark, green, gold */
.wrap,.inner{max-width:var(--max);margin:auto;padding:0 24px}
.band{padding:84px 0;background:var(--white)}
main>.band:nth-of-type(even){background:var(--cream)}
main>.band.paper{background:var(--white)}
main>.band.cream{background:var(--cream)}
main>.band.beige,main>.band.sage{background:var(--beige)}
main>.band.green{background:var(--green);color:var(--light)}
main>.band.deep{background:var(--dark);color:var(--light)}
main>.band.gold{background:var(--gold);color:var(--ink)}
.band .wrap>h2{text-align:center}
.band .wrap>.lead,.band .wrap>.faqmore,.band .wrap>.sources{text-align:center}
.band .wrap>.grid,.band .wrap>.steps,.band .wrap>.qlist,.band .wrap>.duo,.band .wrap>.stats{margin-top:40px}
.band .wrap>.actions{margin-top:32px}
.faqmore{margin:30px 0 0;font-weight:700;text-align:center}
.more,.faqmore a{color:var(--orange-d)}
.green .eyebrow,.deep .eyebrow,.hero .eyebrow{color:var(--gold)}
.green .eyebrow::before,.deep .eyebrow::before,.hero .eyebrow::before{background:var(--gold)}
.green .lead,.deep .lead{color:rgba(246,241,231,.85)}
.green .more,.deep .more,.green .faqmore a,.deep .faqmore a{color:var(--gold)}
.gold .eyebrow{color:var(--dark)}.gold .eyebrow::before{background:var(--dark)}
.gold .lead{color:rgba(20,48,31,.85)}
.gold .more,.gold .faqmore a{color:var(--dark)}

/* hero: centered, one pattern for every page */
.hero{background:var(--dark);color:var(--light);position:relative;overflow:hidden;text-align:center;padding:80px 0 76px}
.hero::before{content:"";position:absolute;left:50%;top:-340px;width:760px;height:760px;margin-left:-380px;border-radius:50%;border:2px solid rgba(240,176,74,.14)}
.hero .wrap,.hero .inner{position:relative;z-index:1}
.hero h1{max-width:860px;margin:0 auto;color:#fff}
.hero h1 .hl{color:var(--gold)}
.hero p{max-width:660px;font-size:19px;line-height:1.6;color:rgba(246,241,231,.9);margin:20px auto 0}
.hero .badges{font-size:14px;margin-top:22px;color:rgba(246,241,231,.75)}
.hero .badges a{color:var(--gold)}
.hero .brandmark{display:block;width:min(360px,70%);height:auto;margin:0 auto 26px}
.hero .byline{color:var(--gold);font-weight:700;font-size:16px;margin-top:18px}
.heroaside{display:flex;justify-content:center;margin-top:34px}
.toucan{margin:0;width:150px;border-radius:22px;overflow:hidden;background:#fefcef;border:3px solid rgba(255,255,255,.25)}
.toucan img{display:block;width:100%}
.toucan figcaption{font-size:10px;color:var(--muted);text-align:center;padding:3px 0 5px;background:#fefcef}

/* cards and grids */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;padding:28px;background:#fff;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 16px 32px rgba(11,74,48,.1)}
.card h3{margin:0 0 10px}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--orange-d)}
.card p{margin:0 0 14px;color:var(--muted)}
.card .more{margin-top:auto}
.card .date,.pill{display:inline-block;align-self:flex-start;background:var(--orange-t);color:var(--orange-d);border-radius:999px;padding:5px 13px;font:700 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
.card .num{display:block;font:500 54px/1 var(--serif);letter-spacing:-.02em;color:var(--orange);margin:0 0 10px}
.deep .card,.green .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.deep .card:hover,.green .card:hover{border-color:var(--gold);box-shadow:none}
.deep .card p,.green .card p{color:rgba(246,241,231,.82)}
.deep .card .date,.green .card .date{background:rgba(240,176,74,.18);color:var(--gold)}
.deep .card h3 a:hover,.green .card h3 a:hover{color:var(--gold)}
.more{font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .25s;padding-bottom:2px;align-self:flex-start}
.more:hover{background-size:100% 2px}
.person{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);margin-top:auto;padding-top:18px}
.person div b{display:block;font-size:15px}
.person div span{display:block;font-size:14px;color:var(--muted)}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 18px/1 var(--serif);background:var(--green-t);color:var(--dark)}
.avatar.a2{background:var(--gold-t)}.avatar.a3{background:var(--orange-t);color:var(--orange-d)}
.card .quote-text{font:400 18px/1.55 var(--sans);color:var(--ink);margin:0 0 22px}

/* split = stacked and centered */
.split{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
.split>div{max-width:760px}
.split .actions{margin-top:0}
.quote{font-size:clamp(24px,2.8vw,34px);line-height:1.28;text-align:center;max-width:780px;margin-inline:auto;color:var(--dark)}
.quote::before{content:"";display:block;width:44px;height:3px;background:var(--orange);margin:0 auto 20px}
.green .quote,.deep .quote{color:#fff}.green .quote::before,.deep .quote::before{background:var(--gold)}
.gold .quote{color:var(--dark)}.gold .quote::before{background:var(--dark)}
.attrib{font-weight:700;margin:16px 0 0;color:var(--muted);text-align:center}
.green .attrib,.deep .attrib{color:rgba(246,241,231,.8)}
.gold .attrib{color:rgba(20,48,31,.85)}
.prose{max-width:720px;margin:0 auto}
.note{border-left:3px solid var(--orange);padding:4px 0 4px 16px;color:var(--muted);max-width:720px;margin:20px auto 0}
.small2{color:var(--muted);max-width:720px;margin:22px auto 0;font-size:14px}
.zh{font-size:18px;color:rgba(246,241,231,.85);margin:20px auto 0;max-width:680px;text-align:center}
.callout{display:flex;align-items:center;justify-content:center;gap:14px;max-width:820px;margin:34px auto 0;padding:18px 26px;background:var(--gold-t);border:1px solid #f0d9a4;border-radius:22px;text-align:center;font-size:18px;color:var(--ink)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.stat{border-top:2px solid var(--dark);padding-top:18px;text-align:center}
.stat b{display:block;font:500 clamp(46px,5.2vw,64px)/1 var(--serif);letter-spacing:-.02em;color:var(--dark)}
.stat p{margin:12px auto 0;font-size:17px;max-width:300px}
.sources{margin:32px auto 0;font-size:13px;opacity:.78;max-width:820px}

/* roles panels (modelled on the original site) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:38px 40px;box-shadow:0 12px 30px rgba(11,74,48,.06)}
.panel.dark{background:var(--dark);color:var(--light);border-color:var(--dark)}
.panel .tag{display:inline-block;margin:0 0 24px;background:var(--orange-t);color:var(--orange-d);border-radius:999px;padding:8px 18px;font-weight:700;font-size:15px}
.panel.dark .tag{background:rgba(255,255,255,.12);color:var(--gold)}
.panel ol{list-style:none;margin:0;padding:0;counter-reset:p}
.panel li{counter-increment:p;position:relative;padding:0 0 22px 56px}
.panel li:last-child{padding-bottom:0}
.panel li::before{content:"0" counter(p);position:absolute;left:0;top:-2px;font:400 28px/1 var(--serif);color:var(--orange)}
.panel li b{display:block;font-size:18px;margin-bottom:4px}
.panel li span{display:block;color:var(--muted)}
.panel.dark li span{color:rgba(246,241,231,.8)}
.panel.dark li::before{color:var(--gold)}
.panel .actions{justify-content:flex-start;margin-top:30px}

/* lists */
.qlist{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.qlist li{border:1px solid var(--line);border-radius:16px;padding:18px 22px;background:#fff;font:500 19px/1.35 var(--serif)}
ol.numbered{counter-reset:q}
ol.numbered li{counter-increment:q;position:relative;padding-left:64px;display:flex;align-items:center;min-height:74px}
ol.numbered li::before{content:counter(q);position:absolute;left:22px;top:50%;transform:translateY(-50%);font:500 26px/1 var(--serif);color:var(--orange)}
.steps{list-style:none;counter-reset:s;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.steps li{counter-increment:s;position:relative;border:1px solid var(--line);border-radius:20px;padding:26px 28px 26px 84px;background:#fff;transition:transform .25s,border-color .25s}
.steps li::before{content:counter(s);position:absolute;left:26px;top:24px;width:40px;height:40px;border-radius:50%;background:var(--dark);color:#fff;font-weight:700;display:grid;place-items:center}
.steps li:hover{transform:translateY(-3px);border-color:var(--green)}
.steps h3{margin:0 0 6px}
.steps p{margin:0;color:var(--muted)}
.chiphead{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d);margin:36px 0 0;text-align:center}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0;margin:16px 0 0}
.chips a{display:inline-block;border:1.5px solid var(--green);color:var(--dark);background:transparent;border-radius:999px;padding:9px 20px;text-decoration:none;font-weight:600;transition:transform .2s,background .2s,color .2s}
.chips a:hover{background:var(--dark);border-color:var(--dark);color:#fff;transform:translateY(-2px)}
.chips .etc a{border-style:dashed;color:var(--orange-d);border-color:var(--orange)}
.chips .etc a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.socials{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.socials a{display:inline-flex;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 18px;text-decoration:none;font-weight:600;font-size:15px;color:var(--light);transition:background .2s,color .2s,transform .2s}
.socials a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-2px)}
.band:not(.deep):not(.green) .socials a{border-color:var(--green);color:var(--dark)}
.band:not(.deep):not(.green) .socials a:hover{background:var(--dark);color:#fff;border-color:var(--dark)}

/* faq */
.faq .wrap>details{max-width:820px;margin-inline:auto}
.faq details{border-top:1px solid #d9d2c1;padding:20px 0}
.faq details:last-of-type{border-bottom:1px solid #d9d2c1}
.faq summary{cursor:pointer;font:500 20px/1.35 var(--serif);transition:color .2s}
.faq summary:hover{color:var(--orange-d)}
.faq details p{color:var(--muted);max-width:760px;margin:12px 0 0}

/* breadcrumbs */
.crumbwrap{background:var(--white);border-bottom:1px solid var(--line)}
.crumbs{max-width:var(--max);margin:auto;padding:12px 24px;font-size:13px;color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{color:var(--muted)}

/* article */
.article{max-width:720px;margin:auto;padding:64px 24px 56px}
.article p,.article li{font-size:19px;line-height:1.78}
.article p{margin:0 0 22px}
.article h2{font-size:clamp(26px,3vw,32px);margin:48px 0 16px;text-align:left}
.article ul{padding-left:22px;margin:0 0 22px}
.article li{margin:12px 0}
.article hr{border:0;border-top:1px solid var(--line);margin:44px 0}

/* footer */
footer{background:#06331f;color:var(--light);padding:64px 24px 28px;border-top:4px solid var(--gold)}
.fwrap{max-width:var(--max);margin:auto}
.ftop{display:flex;flex-direction:column;align-items:center;text-align:center}
.ftop .brand img{height:40px;width:auto}
.ftag{font:500 italic 22px/1.3 var(--serif);color:var(--gold-t);margin:14px 0 0}
.ftop .socials{margin-top:24px;justify-content:center}
.ftop .socials a{padding:7px 16px;font-size:14px}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px;padding-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.fcols a{display:block;padding:5px 0;color:rgba(246,241,231,.88);text-decoration:none;font-size:15px;transition:color .2s,transform .2s}
.fcols a:hover{color:var(--gold);transform:translateX(3px)}
.fh{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.fbar{display:flex;justify-content:space-between;align-items:center;gap:12px 28px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(246,241,231,.7)}
.fbar p{margin:0}
.fbar a{color:rgba(246,241,231,.85);text-decoration:none}
.fbar a:hover{color:var(--gold)}
.fapp span,.flinks a+a{margin-left:16px}
.fapp span{padding:3px 10px;border-radius:999px;background:rgba(240,176,74,.18);color:var(--gold-t);font-size:12px}
.fapp a{margin-right:2px}
.closing{text-align:center}
.closing h2{max-width:820px;margin-left:auto;margin-right:auto}
.closing .lead{max-width:680px;margin-left:auto;margin-right:auto}
.closing .zh{padding:18px 22px;border:1px solid rgba(240,176,74,.4);border-radius:14px;max-width:700px}
.button.ghost{background:transparent;border-color:rgba(255,255,255,.5);color:var(--light)}
.button.ghost:hover{background:var(--light);color:var(--dark)}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
@media(prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
.hero .brandmark,.hero .eyebrow,.hero h1,.hero p,.hero .actions,.hero .byline,.hero .heroaside{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.08s}.hero p{animation-delay:.16s}.hero .actions{animation-delay:.24s}
.hero::before{animation:drift 14s ease-in-out infinite}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.js .card.reveal.in,.js .steps li.reveal.in{transition:opacity .7s var(--d,0ms),transform .25s ease,border-color .25s,box-shadow .25s}
}

@media(max-width:1080px){.links{gap:14px}.links .button.line{display:none}}
@media(max-width:900px){.links{display:none}.menu{display:block}}
@media(max-width:760px){
.grid,.qlist,.steps,.stats,.duo{grid-template-columns:1fr}
.band{padding:60px 0}
.hero{padding:56px 0 56px}
.wrap,.inner{padding:0 22px}
.fcols{grid-template-columns:1fr 1fr}.fbar{flex-direction:column;text-align:center}
.steps li{padding-left:74px}
.panel{padding:28px 24px}
.brand img{height:28px}
}
.panel.dark .button{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.panel.dark .button:hover{background:#f5c06a}

/* ===== v9 colour system: yellow / cream / green / pale green, black and white; orange only as small accents ===== */
:root{--green-d:#165a3b}
/* one text colour per sentence: headings and body never carry single-word accent colours */
.eyebrow{color:var(--green)}.eyebrow::before{background:var(--orange)}
header{background:var(--white);color:var(--ink);border-bottom:1px solid var(--line)}
.links a{color:var(--ink)}
.links a:not(.button):hover{color:var(--green)}
.links a[aria-current=page]{color:var(--ink);box-shadow:0 2px 0 var(--gold)}
.menu summary{border-color:var(--ink);color:var(--ink)}
.menu-panel{background:var(--white);border-color:var(--line);box-shadow:0 14px 34px rgba(20,48,31,.14)}
.menu-panel a{color:var(--ink)}.menu-panel a:hover{background:var(--gold-t)}
.button{background:var(--green);border-color:var(--green);color:#fff}
.button:hover{background:var(--green-d);border-color:var(--green-d);box-shadow:0 8px 18px rgba(20,48,31,.2)}
.button.dark{background:transparent;color:var(--ink);border-color:var(--ink)}
.button.dark:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.links .button{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.links .button:hover{background:#f5c06a;border-color:#f5c06a}
.links .button.line{background:transparent;border-color:var(--ink);color:var(--ink)}
.links .button.line:hover{background:var(--ink);color:#fff}
.menu-panel .button{color:var(--ink)}
/* hero: light yellow, black text */
.hero{background:var(--gold-t);color:var(--ink);border-bottom:1px solid #f0d9a4}
.hero::before{border-color:rgba(28,111,73,.16);top:-470px}
.hero h1,.hero p,.hero .badges{color:var(--ink)}
.hero p{color:#33463a}
.hero .eyebrow{color:var(--green)}.hero .eyebrow::before{background:var(--orange)}
.hero .badges a,.hero .byline{color:var(--green)}
.hero .button{background:var(--green);border-color:var(--green);color:#fff}
.hero .button:hover{background:var(--green-d);border-color:var(--green-d)}
.hero .button.dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.hero .button.dark:hover{background:var(--ink);color:#fff}
/* bands */
main>.band.beige,main>.band.sage{background:var(--gold-t)}
main>.band.deep{background:var(--green-t);color:var(--ink)}
main>.band.green{background:var(--green);color:#fff}
.deep .lead{color:#33463a}
.deep .eyebrow{color:var(--green)}.deep .eyebrow::before{background:var(--orange)}
.deep .more,.deep .faqmore a{color:var(--green)}
.deep .button{background:var(--green);border-color:var(--green);color:#fff}
.deep .button:hover{background:var(--green-d);border-color:var(--green-d)}
.deep .button.dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.deep .button.dark:hover{background:var(--ink);color:#fff}
.deep .card{background:#fff;border-color:var(--line)}
.deep .card p{color:var(--muted)}
.deep .card .date{background:var(--green-t);color:var(--green)}
.deep .quote{color:var(--ink)}.deep .quote::before{background:var(--orange)}
.deep .attrib{color:var(--muted)}
.green .lead{color:rgba(255,255,255,.92)}
.green .eyebrow{color:var(--gold)}.green .eyebrow::before{background:var(--gold)}
.green .more,.green .faqmore a{color:var(--gold)}
.green .button,.deep.closing .button{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.green .button:hover{background:#f5c06a;border-color:#f5c06a}
.green .button.dark,.button.ghost{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.green .button.dark:hover,.button.ghost:hover{background:#fff;color:var(--green);border-color:#fff}
.gold .button{background:var(--ink);border-color:var(--ink);color:#fff}
.gold .button:hover{background:#0c2014;border-color:#0c2014}
.gold .button.dark{background:transparent;color:var(--ink)}
.gold .button.dark:hover{background:var(--ink);color:#fff}
.gold .eyebrow,.gold .more,.gold .faqmore a{color:var(--ink)}.gold .eyebrow::before{background:var(--ink)}
.gold .quote{color:var(--ink)}.gold .quote::before{background:var(--ink)}
/* content */
.more,.faqmore a{color:var(--green)}
.card:hover{border-color:var(--green);box-shadow:0 16px 32px rgba(20,48,31,.1)}
.card h3 a:hover{color:var(--green)}
.card .date,.pill,.panel .tag{background:var(--green-t);color:var(--green)}
.card .num{color:var(--green)}
.quote{color:var(--ink)}
.stat{border-top-color:var(--ink)}.stat b{color:var(--ink)}
.panel{box-shadow:0 12px 30px rgba(20,48,31,.07)}
.panel.dark{background:var(--green);border-color:var(--green)}
.panel.dark .tag{background:rgba(255,255,255,.16);color:var(--gold-t)}
.steps li::before{background:var(--green)}
.steps li:hover{border-color:var(--green)}
.chips a{border-color:var(--green);color:var(--ink)}
.chips a:hover{background:var(--green);border-color:var(--green);color:#fff}
.chips .etc a{border-color:var(--orange);color:var(--ink)}.chips .etc a:hover{background:var(--orange);color:#fff}
.chiphead{color:var(--green)}
.faq summary:hover{color:var(--green)}
.avatar{color:var(--green)}.avatar.a3{color:var(--ink)}
.band:not(.green):not(.closing) .socials a{border-color:var(--ink);color:var(--ink)}
.band:not(.green):not(.closing) .socials a:hover{background:var(--green);border-color:var(--green);color:#fff}
/* closing about band: green, white text */
main>.band.closing{background:var(--green);color:#fff}
.closing h2{color:#fff}
.closing .lead{color:rgba(255,255,255,.92)}
.closing .eyebrow{color:var(--gold)}.closing .eyebrow::before{background:var(--gold)}
/* footer: light yellow, black text */
footer{background:var(--gold-t);color:var(--ink);border-top:4px solid var(--green)}
.ftag{color:var(--ink)}
.ftop .socials a{border-color:var(--ink);color:var(--ink)}
.ftop .socials a:hover{background:var(--green);border-color:var(--green);color:#fff}
.fcols{border-top-color:#e8d3a0}.fbar{border-top-color:#e8d3a0;color:#33463a}
.fcols a,.fbar a{color:var(--ink)}
.fcols a:hover,.fbar a:hover{color:var(--green)}
.fh{color:var(--green)}
.fapp span{background:#fff;color:var(--ink)}
.closing .button.ghost{background:transparent;border-color:rgba(255,255,255,.8);color:#fff}
.closing .button.ghost:hover{background:#fff;color:var(--green);border-color:#fff}

/* ===== Homepage hero: theme green + store badges ===== */
.hero.hero-home{background:var(--green);color:#fff;border-bottom:0}
.hero.hero-home::before{border-color:rgba(240,176,74,.22)}
.hero.hero-home h1{color:#fff}
.hero.hero-home p{color:rgba(255,255,255,.92)}
.hero.hero-home .eyebrow{color:var(--gold)}
.hero.hero-home .eyebrow::before{background:var(--gold)}
.hero.hero-home .button{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hero.hero-home .button:hover{background:#f5c06a;border-color:#f5c06a}
.hero.hero-home .button.dark{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.hero.hero-home .button.dark:hover{background:#fff;border-color:#fff;color:var(--green)}
.storebadges{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px;animation:rise .8s cubic-bezier(.2,.7,.2,1) .32s both}
.storebadge{position:relative;display:block;height:54px;line-height:0;border-radius:10px;background:none;border:0;padding:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.storebadge img{display:block;height:54px;width:auto}
.storebadge:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.28)}
.storebadge:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.storebadge .tagpill{position:absolute;top:-10px;right:-8px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.02em;padding:3px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.hero.hero-home .storenote{font-size:14px;margin:16px auto 0;color:rgba(255,255,255,.85)}
.hero .storebadges+.storenote{color:var(--ink)}
.hero.hero-home .storebadges+.storenote{color:rgba(255,255,255,.85)}
@media(max-width:400px){.storebadge,.storebadge img{height:46px}}

/* iOS "in review" dialog */
.ios-dialog{border:0;padding:0;border-radius:20px;max-width:460px;width:calc(100% - 32px);background:var(--light);color:var(--ink);box-shadow:0 24px 60px rgba(8,30,20,.45)}
.ios-dialog::backdrop{background:rgba(11,40,26,.62)}
.ios-dialog .ios-in{padding:30px 56px 30px 28px;position:relative}
.ios-dialog .ios-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.ios-dialog .ios-x:hover{background:rgba(20,48,31,.08)}
.ios-dialog .ios-tag{display:inline-block;background:var(--gold);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.03em;padding:4px 11px;border-radius:999px;margin:0}
.ios-dialog h2{font-size:26px;line-height:1.2;margin:14px 0 0;color:var(--ink)}
.ios-dialog p{font-size:16px;line-height:1.6;color:#33463a;margin:12px 0 0;max-width:none}
.ios-dialog .ios-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.ios-dialog .button{display:block;text-align:center;margin:0;background:var(--green);border-color:var(--green);color:#fff}
.ios-dialog .button:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
.ios-dialog .button.dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.ios-dialog .button.dark:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* v10: badges in the yellow CTA band, footer iOS link */
.band .storebadges{animation:none;margin-top:30px}
.gold .storebadge .tagpill{background:var(--ink);color:#fff}
.gold .split .storebadges{margin-top:0}
.fapp .fios{margin-left:16px;padding:3px 10px;border-radius:999px;background:#fff;color:var(--ink);font-size:12px;text-decoration:none}
.fapp .fios:hover{background:var(--green);color:#fff}
.fapp span{margin-left:0}

.ios-dialog{max-width:400px}
.ios-dialog #ios-title{font:500 20px/1.4 var(--serif);color:var(--ink);margin:0}
.ios-dialog .ios-x{top:50%;transform:translateY(-50%);right:10px}

/* ===== v11: tone ladder  yellow > pale yellow > cream > white > pale green > green > dark green footer ===== */
.hero{background:var(--gold);color:var(--ink);border-bottom:0}
.hero::before{border-color:rgba(255,255,255,.35)}
.hero h1,.hero p,.hero .badges{color:var(--ink)}
.hero p{color:#23372b}
.hero .eyebrow{color:var(--ink)}.hero .eyebrow::before{background:var(--ink)}
.hero .badges a,.hero .byline{color:var(--ink)}
.hero .button{background:var(--green);border-color:var(--green);color:#fff}
.hero .button:hover{background:var(--green-d);border-color:var(--green-d)}
.hero .button.dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.hero .button.dark:hover{background:var(--ink);color:#fff}
.hero.hero-mint{background:var(--green-t)}
.hero.hero-home{background:var(--green);color:#fff}
.hero.hero-home h1,.hero.hero-home p{color:#fff}
.hero.hero-home p{color:rgba(255,255,255,.92)}
.hero.hero-home .eyebrow{color:var(--gold)}.hero.hero-home .eyebrow::before{background:var(--gold)}
.hero.hero-home .button{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hero.hero-home .button:hover{background:#f5c06a;border-color:#f5c06a}
.hero.hero-home .button.dark{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.hero.hero-home .button.dark:hover{background:#fff;border-color:#fff;color:var(--green)}
.hero.ios-page{min-height:min(68vh,620px);display:flex;align-items:center;padding:72px 0}
.hero.ios-page .inner{width:100%}
.hero.ios-page .eyebrow{display:inline-flex;padding:8px 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.1);margin-bottom:22px}
.hero.ios-page .eyebrow::before{width:8px;height:8px;border-radius:50%}
.hero.ios-page h1{max-width:760px}
.hero.ios-page .iosnote{font-size:16px;margin-top:30px;color:rgba(255,255,255,.82)}
.hero.ios-page .actions{margin-top:18px}
/* closing about: green; footer: dark green */
footer{background:#0a3d29;color:var(--light);border-top:0}
.ftag{color:var(--gold-t)}
.ftop .socials a{border-color:rgba(255,255,255,.4);color:var(--light)}
.ftop .socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.fcols{border-top-color:rgba(255,255,255,.16)}.fbar{border-top-color:rgba(255,255,255,.16);color:rgba(246,241,231,.75)}
.fcols a,.fbar a{color:rgba(246,241,231,.9)}
.fcols a:hover,.fbar a:hover{color:var(--gold)}
.fh{color:var(--gold)}
.fapp span,.fapp .fios{background:rgba(240,176,74,.2);color:var(--gold-t)}
.fapp .fios:hover{background:var(--gold);color:var(--ink)}

/* ===== v12: cream header, dark-green-to-black footer with grey watermark tagline ===== */
header{background:var(--cream);border-bottom:1px solid var(--beige)}
.menu-panel{background:var(--cream);border-color:var(--beige)}
.crumbwrap{background:var(--cream);border-bottom:1px solid var(--beige)}
footer{background:linear-gradient(180deg,#0a3d29 0%,#06231a 55%,#000 100%);color:var(--light);padding:68px 24px 34px;border-top:0}
.fmark{font:500 clamp(28px,5.4vw,68px)/1.08 var(--serif);font-style:normal;letter-spacing:-.02em;text-align:center;color:rgba(190,196,192,.2);margin:60px 0 0;user-select:none}
.fapp,.ftag{display:none}
.fbar{margin-top:44px}

.storebadge.iosreview_unused{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 26px;border-radius:10px;background:#000;border:1px solid #a6a6a6;color:#fff;font-weight:700;font-size:16px;line-height:1.2;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.storebadge.iosreview:hover{color:#fff}
@media(max-width:700px){.storebadge.iosreview_unused{height:46px;padding:0 20px;font-size:15px}}

.hero.hero-home::before{display:none}
.hero.hero-home .herotext>p.herolede{font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.76);max-width:540px;margin-left:auto;margin-right:auto}
.hero.hero-home .eyebrow{letter-spacing:.14em}
.chips li span{display:inline-block;border:1.5px solid rgba(28,111,73,.35);color:var(--ink);border-radius:999px;padding:9px 20px;font-weight:600;background:rgba(255,255,255,.5)}
.howband h2{text-align:center}
.howband .callout{gap:18px;margin-top:34px;font-size:17px}
.howband .callout .ico{color:var(--orange);flex:none}
.hcards{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;align-items:stretch}
.hcard{border-radius:36px;padding:48px 52px 52px;box-shadow:0 14px 40px rgba(20,48,31,.08)}
.hcard.seek{background:#fff;color:var(--ink)}
.hcard.give{background:var(--dark);color:#fff}
.hpill{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:12px 22px;font-weight:700;font-size:18px}
.hcard.seek .hpill{background:#fbe6cc;color:#d65a12}
.hcard.give .hpill{background:rgba(255,255,255,.14);color:#fff}
.hsteps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:26px}
.hsteps li{display:grid;grid-template-columns:64px 1fr;gap:6px;align-items:start}
.hn{font:400 34px/1.1 var(--serif);color:#f0884a}
.hcard.give .hn{color:var(--gold)}
.hsteps h3{margin:0 0 6px;font-size:21px;font-weight:700;color:inherit}
.hsteps p{margin:0;font-size:18px;line-height:1.55;color:#5b6b60;max-width:none;text-align:left}
.hcard.give .hsteps p{color:rgba(255,255,255,.82)}
@media(max-width:860px){.hcards{grid-template-columns:1fr;gap:24px}.hcard{padding:32px 26px 36px;border-radius:28px}.hsteps li{grid-template-columns:52px 1fr}}
.legalmain{max-width:860px;margin:0 auto;padding:56px 24px 72px}
.legalhead{text-align:center}
.legalhead .eyebrow{justify-content:center}
.legalhead h1{margin:10px 0 12px}
.legalmeta{color:var(--muted);font-size:17px;margin:0}
.legaltabs{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:30px 0 0}
.legaltabs a{border:1px solid var(--line);background:#fff;color:var(--dark);border-radius:999px;padding:13px 30px;font-weight:700;text-decoration:none}
.legaltabs a[aria-current]{background:var(--dark);border-color:var(--dark);color:#fff}
.legalsum{max-width:none;margin:40px 0 0;padding:26px 32px;background:var(--gold-t);border:1px solid #f0d9a4;border-radius:22px;text-align:left;font-size:17px;line-height:1.7;color:var(--ink)}
.legalbody{margin-top:48px}
.legalbody h2{font-size:clamp(30px,4vw,42px);margin:0 0 18px}
.legalbody h3{margin:34px 0 10px;font-size:22px}
.legalbody p{max-width:none;color:#44564b;line-height:1.7;margin:0 0 14px}
.legalbody a{color:var(--green);text-decoration:underline}
.legalpart[hidden]{display:none}
.flinks{display:flex;gap:10px 40px;flex-wrap:wrap;align-items:center}
.flinks a+a,.flinks span{margin-left:0}
.flinks span{color:rgba(246,241,231,.75)}
.fbar .flinks,.fbar .flinks a{font-size:15px}
@media(max-width:700px){.flinks{justify-content:center;gap:10px 22px}}

.hero::before,.hero.hero-home::before{display:none}

.hero.hero-home .eyebrow::before{display:none}


/* ===== November 2026 refinement ===== */
/* All action buttons in a row share a common height and width. */
.actions{align-items:stretch}
.actions>.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:220px;text-align:center;white-space:normal}
.hero-home .home-one-line{max-width:none;font-size:clamp(32px,4.2vw,58px);line-height:1.08;letter-spacing:-.035em;white-space:nowrap}
.hero.hero-home .actions>.button{min-width:228px;min-height:54px}
.topic-groups{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}
.topic-card{align-items:flex-start;min-height:100%}
.topic-card h3{font-size:26px;margin:0 0 10px}
.topic-card p{margin:0 0 14px}
.topic-kicker{display:block;color:var(--orange-d);font:600 14px/1 var(--sans);letter-spacing:.13em;margin-bottom:18px}
.topic-card .chips{justify-content:flex-start;gap:8px;margin-top:4px}
.topic-card .chips li span{font-size:13px;padding:7px 12px}
.topic-directory{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}
.topic-directory .card{scroll-margin-top:24px;min-height:100%}
.topic-directory .card h3{font-size:28px;margin:0 0 10px}
.topic-list{padding-left:20px;margin:6px 0 0;color:var(--muted)}
.topic-list li{padding:3px 0}
.topic-last{margin-top:36px}

/* Community stories: editorial, card-led layout based on the supplied reference. */
.community-hero{background:#eee7db;color:var(--ink);text-align:center;padding:62px 0 44px}
.community-hero .eyebrow{color:var(--orange);margin-bottom:20px}
.community-hero h1{max-width:none;font-size:clamp(38px,4.5vw,58px);line-height:1.1}
.community-hero p{max-width:680px;font-size:19px;line-height:1.7;color:#665f55;margin:20px auto 0}
.community-stories{background:#eee7db;padding:22px 0 56px}
.stories-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:22px}
.story-card{min-height:300px;padding:30px 28px 26px;border:1px solid rgba(20,48,31,.05);border-radius:23px;box-shadow:0 8px 26px rgba(20,48,31,.045)}
.story-card h2{font:500 26px/1.2 var(--serif);letter-spacing:-.02em;text-align:left;margin:0 0 16px}
.story-card h2 a{text-decoration:none}
.story-card>p{font-size:16px;line-height:1.65;margin:0 0 22px;color:#655f57}
.story-category{display:inline-flex;align-self:flex-start;padding:7px 13px;margin:0 0 22px;border-radius:999px;background:#ffedcf;color:#c84e0a;font:700 12px/1.1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.story-card .person{margin-top:auto;padding-top:17px;border-top:1px solid #eee8df}
.story-card .person .avatar,.story-mini .person .avatar{width:40px;height:40px}
.story-card .person div b,.story-mini .person div b{font-size:15px;font-weight:600}
.story-invite{background:#005632;color:#fff;border-radius:24px;margin:0 auto 70px;max-width:var(--max);padding:48px 54px}
.story-invite .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0}
.story-invite .invite-copy{max-width:590px}
.story-invite h2{font-size:clamp(30px,3vw,42px);color:#fff;margin:0 0 12px}
.story-invite p{font-size:18px;line-height:1.65;color:rgba(255,255,255,.86);margin:0}
.story-invite .button{flex:none;background:var(--gold);border-color:var(--gold);color:var(--ink);min-height:54px;min-width:230px}
.story-detail-hero h1{max-width:900px}
.story-detail-hero .byline{margin-top:16px}
.story-article{padding-bottom:42px}
.story-more .grid{align-items:stretch}
.story-mini{min-height:210px}
.story-mini .person{margin-top:auto}
.story-explore .actions{margin-top:26px}

/* Humanus Letter cross-links: title and publication date only. */
.letter-more .grid{align-items:stretch}
.letter-card{min-height:160px;justify-content:flex-start;gap:14px}
.letter-card .date{display:inline-flex;align-self:flex-start;margin:0;background:rgba(240,176,74,.2);color:var(--gold-t);padding:6px 11px;border-radius:999px;font:700 12px/1.2 var(--sans);letter-spacing:.06em}
.letter-card h3{font-size:22px;margin:0}
.letter-card h3 a{text-decoration:none}
.letter-card h3 a:hover{color:var(--gold)}
.error-page .actions{margin-top:30px}
.redirect-page{max-width:720px;margin:15vh auto;padding:24px;text-align:center}
.redirect-page p{margin:0 0 20px}

@media(max-width:900px){
  .stories-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-invite{margin-left:22px;margin-right:22px;padding:38px 32px}
}
@media(max-width:760px){
  .hero-home .home-one-line{white-space:normal;font-size:clamp(34px,8vw,46px);max-width:100%}
  .topic-groups,.topic-directory{grid-template-columns:1fr}
  .stories-grid{grid-template-columns:1fr}
  .story-card{min-height:0}
  .community-hero{padding:48px 0 30px}
  .community-hero h1{font-size:clamp(34px,8vw,46px)}
  .community-hero p{font-size:17px}
  .community-stories{padding:18px 0 42px}
  .story-invite{margin:0 16px 48px;padding:30px 24px;border-radius:20px}
  .story-invite .wrap{flex-direction:column;align-items:stretch;gap:22px}
  .story-invite .button{width:100%;min-width:0}
  .actions>.button{width:100%;max-width:340px;min-width:0}
}

/* Equal-width action pairs (and groups) across the site. */
.actions>.button{width:250px;min-width:250px;padding-left:18px;padding-right:18px}
.hero.hero-home .actions>.button{width:250px;min-width:250px;padding-left:18px;padding-right:18px}
.story-invite .button{width:250px;padding-left:18px;padding-right:18px}
@media(max-width:760px){.actions>.button{width:100%;min-width:0}.hero.hero-home .actions>.button{width:100%;min-width:0}}


/* V27 refinement: targeted alignment, balanced actions and clearer editorial components. */
:root { --content-gutter: clamp(20px, 4vw, 32px); }
.wrap,.inner,.fwrap { width:100%; margin-inline:auto; }
.wrap,.inner { padding-inline:var(--content-gutter); }
.band .wrap > .eyebrow, .band .wrap > h2, .band .wrap > .lead, .band .wrap > .faqmore, .band .wrap > .sources { text-align:center; margin-inline:auto; }
.band .wrap > .prose, .band .wrap > .home-intro-copy, .band .wrap > .about-focus,
.band .wrap > .role-closing, .band .wrap > .pillar-closing { text-align:left; margin-inline:auto; }
.band .wrap > h2 { max-width:900px; }
.band .wrap > .lead { max-width:760px; }
.hero .inner { width:100%; }
.hero .herotext { width:100%; margin-inline:auto; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; text-align:center; line-height:1.25; box-sizing:border-box; }
.actions { display:flex; align-items:stretch; justify-content:center; gap:12px; flex-wrap:wrap; }
.actions > .button { width:250px; min-width:250px; min-height:52px; }
.hero-home .home-one-line { max-width:none; width:100%; white-space:nowrap; font-size:clamp(31px,4vw,52px); letter-spacing:-.04em; line-height:1.08; }
.home-intro-copy { max-width:780px; margin-top:22px; color:var(--muted); font-size:18px; line-height:1.8; }
.topic-groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
.topic-card { min-height:100%; text-align:left; }
.topic-card .more { margin-top:auto; }
.home-discovery .card,.home-stories .story-card { text-align:left; }
.home-process .steps { text-align:left; }
.home-story-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.home-letter .letter-card { text-align:left; }
.pillars-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.pillars-grid .card { text-align:left; }
.pillar-label { display:block; color:var(--green); font:700 12px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase; margin-bottom:16px; }
.deep .pillar-label { color:var(--gold); }
.pillar-current { border:2px solid var(--gold) !important; }
.pillar-status { margin-top:auto !important; font-size:13px; font-weight:700; letter-spacing:.04em; }
.deep .pillar-status { color:var(--gold) !important; }
.founder-story { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:40px; align-items:center; max-width:980px; margin:38px auto 0; text-align:left; }
.founder-copy p { color:var(--muted); margin:0 0 18px; }
.founder-copy .byline { font-weight:700; color:var(--green); }
.founder-quote { margin:0; padding:34px; border-radius:22px; background:var(--green); color:#fff; font:500 clamp(24px,2.8vw,34px)/1.3 var(--serif); }
.about-focus { margin-top:32px; }
.values-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; gap:16px; max-width:1160px; margin:38px auto 0; }
.value-card { min-width:0; padding:22px 20px; border:1px solid var(--line); border-radius:18px; background:#fff; text-align:left; }
.value-card > span { display:block; color:var(--green); font-size:12px; font-weight:700; letter-spacing:.12em; margin-bottom:14px; }
.value-card h3 { margin:0 0 8px; }
.value-card p { margin:0; color:var(--muted); }
.pillar-closing { max-width:780px; margin:32px auto 0; text-align:center; color:var(--muted); }
.role-grid .card { text-align:left; }
.role-closing { max-width:800px; }
.letter-index-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:960px; margin:38px auto 0; }
.letter-index-grid .letter-card { text-align:left; min-height:165px; }
.letter-editorial-note { max-width:760px; margin:30px auto 0; color:var(--muted); font-size:15px; text-align:center; }
.date-undated { background:#eee9df !important; color:#6c6b64 !important; }
.story-invite .wrap { align-items:center; }
.story-invite .button { display:inline-flex; align-items:center; justify-content:center; }
.story-card .person { width:100%; }
.story-detail-hero .byline { display:inline-block; margin-top:16px; font-size:15px; font-weight:600; color:var(--muted); }
.story-more .wrap,.story-explore .wrap { text-align:center; }
.error-page .actions>.button { min-width:210px; }
/* Consistent alignment for cards and section headings on narrow screens. */
@media(max-width:900px) {
  .pillars-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .founder-story { grid-template-columns:1fr; max-width:760px; }
}
@media(max-width:760px) {
  .wrap,.inner { padding-inline:20px; }
  .band { padding:56px 0; }
  .band .wrap > .eyebrow, .band .wrap > h2, .band .wrap > .lead { text-align:center; }
  .band .wrap > .prose, .band .wrap > .home-intro-copy, .band .wrap > .role-closing, .band .wrap > .pillar-closing { text-align:left; }
  .home-one-line { white-space:normal !important; font-size:clamp(34px,8vw,43px) !important; line-height:1.12 !important; max-width:100%; }
  .topic-groups,.home-story-grid,.pillars-grid,.letter-index-grid { grid-template-columns:1fr; }
  .actions { width:min(100%,380px); margin-inline:auto; display:grid; grid-template-columns:1fr; gap:10px; }
  .actions>.button,.hero-home .actions>.button,.story-invite .button { width:100%; min-width:0; max-width:none; }
  .founder-story { gap:22px; }
  .founder-quote { padding:26px; }
  .values-grid { display:grid; grid-template-columns:1fr; }
  .value-card { max-width:none; min-width:0; width:100%; padding:20px; }
  .value-card:nth-child(4), .value-card:nth-child(5), .value-card:last-child { grid-column:auto; justify-self:stretch; }
  .story-invite { margin:0 16px 48px; padding:28px 22px; }
  .story-invite .wrap { padding:0; align-items:stretch; }
  .letter-card { min-height:0; }
  .community-hero .inner { padding-inline:20px; }
  .story-detail-hero h1 { overflow-wrap:anywhere; }
}
@media(max-width:420px) {
  .values-grid { grid-template-columns:1fr; }
  .value-card:last-child { grid-column:auto; max-width:none; }
  .hero h1 { overflow-wrap:normal; }
  .fcols { gap:22px 16px; }
}

@media(min-width:761px){.values-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.value-card{min-height:190px}}

/* v28 alignment and contrast fixes */
.letter-card .date{background:var(--green-t);color:var(--green)}
.home-intro .wrap{max-width:820px;text-align:center}
.band .wrap>.home-intro-copy,.band .wrap>.founder-origin-home{text-align:center!important;margin-inline:auto;max-width:720px}
.founder-origin-home{margin-top:26px;padding:20px 26px;background:var(--orange-t);border:1px solid var(--gold);border-radius:16px;color:var(--dark)}
.home-process .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-process .steps li{padding:70px 24px 24px}
.home-process .steps li::before{left:24px;top:22px}
.closing .button.dark{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
.platform-grid{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center}
.platform-grid .card{text-align:center;align-items:center}

@media(max-width:900px){.home-process .steps{grid-template-columns:1fr}.home-process .steps li{padding:26px 24px 26px 74px}.home-process .steps li::before{left:22px;top:24px}.platform-grid{grid-template-columns:1fr}}

.founder-letter{max-width:720px;margin:34px auto 0;text-align:left}
.founder-letter p{margin:0 0 18px;font-size:18px;line-height:1.7}
.founder-letter .founder-quote{margin:30px 0;font-size:clamp(22px,2.6vw,30px);background:var(--green);color:#fff}
.founder-letter .byline{color:var(--green);font-weight:700;margin-top:24px}
.founder-letter .lived-in{font-size:15px;opacity:.85}
.founder-letter .lived-in span{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:4px}

.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:1000px;margin:44px auto 0;text-align:left}
.stat{border-top:2px solid var(--dark);padding-top:18px}
.stat b{display:block;font:600 clamp(46px,5.4vw,68px)/1 var(--serif);color:var(--dark)}
.stat p{margin:12px 0 0;font-size:17px}
.sources{max-width:900px;margin:36px auto 0;font-size:13px;line-height:1.6;text-align:center;opacity:.85}
.sources a{text-decoration:underline}
.whynow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:36px;max-width:1000px;margin:40px auto 0;align-items:stretch;text-align:left}
.statrows .row{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;padding:22px 0;border-top:1px solid var(--line)}
.statrows .row:last-child{border-bottom:1px solid var(--line)}
.statrows b{font:600 clamp(30px,3.4vw,40px)/1.1 var(--serif);color:var(--orange-d)}
.statrows p{margin:0}
.whynow-quote{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:32px;border-radius:22px;background:var(--dark);color:#fff}
.whynow-quote p{margin:0;font:italic 500 clamp(22px,2.4vw,28px)/1.35 var(--serif);color:#fff}
.whynow-quote strong{color:var(--gold);font-size:17px}
.platform-grid .card .more{align-self:center}
@media(max-width:900px){.stat-grid{grid-template-columns:1fr;gap:26px}.whynow{grid-template-columns:1fr}.statrows .row{grid-template-columns:110px 1fr;gap:16px}}

/* Final responsive alignment pass */
@media (max-width:1080px) and (min-width:761px){.hero-home .home-one-line{white-space:normal}}
@media (max-width:900px) and (min-width:761px){
  .pillars-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .values-grid .value-card{grid-column:span 2}
  .values-grid .value-card:nth-child(4){grid-column:2 / span 2}
  .values-grid .value-card:nth-child(5){grid-column:4 / span 2}
}
@media (max-width:760px){.hero-home .home-one-line{white-space:normal}}

/* Final responsive alignment pass */
@media (max-width:1080px) and (min-width:761px){.hero-home .home-one-line{white-space:normal}}
@media (max-width:900px) and (min-width:761px){
  .pillars-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .values-grid .value-card{grid-column:span 2}
  .values-grid .value-card:nth-child(4){grid-column:2 / span 2}
  .values-grid .value-card:nth-child(5){grid-column:4 / span 2}
}
@media (max-width:760px){.hero-home .home-one-line{white-space:normal}}

/* Final responsive alignment pass */
@media (max-width:1080px) and (min-width:761px){.hero-home .home-one-line{white-space:normal}}
@media (max-width:900px) and (min-width:761px){
  .pillars-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .values-grid .value-card{grid-column:span 2}
  .values-grid .value-card:nth-child(4){grid-column:2 / span 2}
  .values-grid .value-card:nth-child(5){grid-column:4 / span 2}
}
@media (max-width:760px){.hero-home .home-one-line{white-space:normal}}

/* Final responsive alignment pass */
@media (max-width:1080px) and (min-width:761px){.hero-home .home-one-line{white-space:normal}}
@media (max-width:900px) and (min-width:761px){
  .pillars-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .values-grid .value-card{grid-column:span 2}
  .values-grid .value-card:nth-child(4){grid-column:2 / span 2}
  .values-grid .value-card:nth-child(5){grid-column:4 / span 2}
}
@media (max-width:760px){.hero-home .home-one-line{white-space:normal}}


/* Humanus content and layout refinements */
.role-switch-callout{max-width:980px;margin:28px auto 0;padding:26px 30px;background:#fff;border:1px solid #e4e8e2;border-radius:20px;box-shadow:0 8px 24px rgba(20,48,31,.045);text-align:left}
.role-switch-callout h3{margin:0 0 10px;color:var(--dark);font-size:clamp(21px,2.2vw,27px)}
.role-switch-callout p{margin:0;color:var(--muted);font-size:16px;line-height:1.7;max-width:850px}
.values-grid .value-card{background:#fff!important;border:1px solid #dfe5df!important;box-shadow:0 6px 20px rgba(20,48,31,.045)}
.page-note{max-width:760px;margin:24px auto 0;padding:14px 18px;border-left:3px solid #c7cec7;background:#f4f5f2;color:#727c74;font-size:13px;line-height:1.65;border-radius:0 10px 10px 0}
.note-label{display:inline-block;margin-right:7px;color:#59665d;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.role-faq-link{margin-top:22px}
.story-card,.story-mini,.letter-card{position:relative}
.story-card h2 a:after,.story-card h3 a:after,.story-mini h3 a:after,.letter-card h3 a:after{content:"";position:absolute;inset:0;z-index:1}
.story-card:hover h2 a,.story-card:hover h3 a,.story-mini:hover h3 a,.letter-card:hover h3 a{color:var(--green)}
.story-invite .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;max-width:1080px;margin-inline:auto;padding:0}
.story-invite .invite-copy{width:100%;max-width:700px;min-width:0}
.story-invite p{max-width:680px}
@media(max-width:900px){.story-invite .wrap{grid-template-columns:1fr;gap:24px}.story-invite .invite-copy{max-width:none}}
@media(max-width:760px){.role-switch-callout{padding:22px 20px}.role-faq-link .button{width:100%}.story-invite .wrap{display:flex;flex-direction:column;align-items:stretch;gap:22px}.story-invite .invite-copy{max-width:none}.story-invite .button{align-self:stretch}}

section.faq[id]{scroll-margin-top:92px}


/* V36 refinements requested for the Humanus website */
.home-letter .actions .button.no-wrap{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;font-size:clamp(13px,1.6vw,16px);padding-inline:20px;}

/* Keep the phrase together in the About heading. */
#founder .founder-story{display:block;max-width:900px;margin:38px auto 0;text-align:center;}
#founder .founder-copy{text-align:center;max-width:900px;margin:0 auto;}
#founder .founder-copy>p:first-child{max-width:850px;margin:0 auto 24px;text-align:center;}
#founder .founder-copy>p:not(:first-child){max-width:850px;margin:22px auto;text-align:center;}
#founder .founder-quote{display:block;max-width:860px;margin:0 auto 24px;padding:28px 34px;text-align:center;}
#founder .founder-copy .byline{text-align:center;margin:22px auto 0;}

#meaningful-connection .role-switch-callout{max-width:900px;margin:24px auto 36px;text-align:center;}
#meaningful-connection .role-intro{max-width:820px;margin:0 auto;text-align:center;}

#three-pillars .about-pillars{align-items:stretch;}
#three-pillars .about-pillars>.card{height:100%;display:flex;flex-direction:column;border:1px solid rgba(28,111,73,.42);}
#three-pillars .about-pillars>.pillar-current{border:2px solid var(--green)!important;}
#three-pillars .pillar-label{color:var(--green);}
#three-pillars .about-pillars>.card h3{color:var(--green);}
#three-pillars .pillar-status{color:var(--green)!important;}
#three-pillars .pillar-status{margin-top:auto;padding-top:16px;}

.closing .actions .button:first-child{border:2px solid rgba(255,255,255,.9);}

.stories-grid{grid-auto-rows:1fr;align-items:stretch;}
.stories-grid>.story-card{height:100%;display:flex;flex-direction:column;}
.stories-grid>.story-card>p{flex:0 0 auto;}
.stories-grid>.story-card .person{margin-top:auto;}

.story-more .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}


/* V37 refinements requested for the Humanus website */
/* Keep the service-fee note sized to its text while retaining the shared Seeker/Giver style. */
.page-note{display:block;width:fit-content;max-width:min(100%,760px);box-sizing:border-box;margin-inline:auto;}

/* Submission prompts: the ellipsis sits below the full set of prompt cards. */
.qlist-ellipsis{margin:22px auto 0;text-align:center;color:var(--muted);font-size:24px;line-height:1;letter-spacing:.18em;}

/* Topic directory closing note follows the cards as a quiet continuation. */
.topic-directory-ellipsis{margin:30px 0 10px;text-align:center;color:var(--muted);font-size:24px;line-height:1;letter-spacing:.18em;}
.topic-directory-note{max-width:760px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px;line-height:1.7;}

/* Story detail: Keep exploring above the three related stories, Share your story below. */
.story-more .story-explore-top{margin:0 auto 28px;}
.story-more .story-share-bottom{margin:28px auto 0;}
.story-more .story-explore-top .button,.story-more .story-share-bottom .button{min-width:210px;}
@media(max-width:760px){
  .topic-directory-note{padding-inline:6px;}
  .story-more .story-explore-top,.story-more .story-share-bottom{width:min(100%,380px);}
  .story-more .story-explore-top .button,.story-more .story-share-bottom .button{width:100%;}
}


/* V38 refinements requested for the Humanus website */
/* Keep the role statement visually separated into a clear lead and supporting sentence. */
#meaningful-connection .role-intro .role-intro-lead{display:block;margin:0 0 12px;}
#meaningful-connection .role-intro .role-intro-details{display:block;}

/* Give the current Humanus Letter block a distinct brand-tinted background from Stories. */
main>.band.home-letter{background:var(--green-t);}

/* Add context and the value of shared experience to the Home introduction. */
.home-intro .home-intro-context,.home-intro .home-intro-value{max-width:780px;margin:22px auto 0;color:var(--muted);font-size:18px;line-height:1.8;text-align:center;}
.home-intro .home-intro-value{margin-top:12px;}
@media(max-width:760px){
  .home-intro .home-intro-context,.home-intro .home-intro-value{font-size:16px;line-height:1.75;}
}


/* V39 refinements: complete wordmark, balanced Home section colours. */
header .brand{flex:0 0 auto;min-width:max-content;overflow:visible;}
header .brand img{display:block;width:128px;height:auto;max-width:none;object-fit:contain;flex:none;}
.ftop .brand{flex:0 0 auto;overflow:visible;}
.ftop .brand img{max-width:none;flex:none;object-fit:contain;}
@media(max-width:760px){header .brand img{width:120px;}}
main>.band.home-letter{background:var(--gold-t);}


/* V40 logo correction: use the full transparent wordmark without vertical clipping. */
header .brand,
.ftop .brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  overflow: visible !important;
  line-height: 0;
  height: auto;
  min-height: 0;
}
header .brand img {
  display: block;
  flex: none;
  width: 136px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center;
  overflow: visible;
  clip-path: none;
}
.ftop .brand img {
  display: block;
  flex: none;
  width: 144px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center;
  overflow: visible;
  clip-path: none;
}
.hero.hero-home {
  overflow: visible !important;
}
.hero.hero-home .brandmark {
  display: block;
  flex: none;
  width: min(390px, 76vw) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: min(390px, 76vw) !important;
  object-fit: contain !important;
  object-position: center;
  overflow: visible;
  clip-path: none;
  margin: 0 auto 26px;
  position: relative;
  z-index: 2;
}
@media (max-width:760px) {
  header .brand img { width: 124px !important; }
  .ftop .brand img { width: 132px !important; }
  .hero.hero-home .brandmark { width: min(330px, 82vw) !important; max-width: 82vw !important; }
}


/* V41: simpler Home opening, clearer emotional-life themes, and icon-only social links. */
.hero.hero-home .herotext { max-width: 960px; }
.hero.hero-home .brandmark { margin-bottom: 24px; }
.hero.hero-home .home-one-line { margin: 0 auto; max-width: 100%; white-space: normal; }
.hero.hero-home .actions { margin-top: 30px; }
.hero.hero-home { padding-top: 76px; padding-bottom: 76px; }
.home-emotion-tags { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; margin:22px auto 2px; padding:0; list-style:none; }
.home-emotion-tags li span {
  padding: 8px 16px;
  border: 1px solid rgba(28,111,73,.28);
  background: var(--gold-t);
  color: var(--dark);
  font-size: 14px;
  font-weight: 700;
}
.socials { align-items: center; gap: 12px; }
.socials a {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.socials a img { display: block; width: 24px; height: 24px; object-fit: contain; }
.socials a:hover {
  background: var(--gold-t);
  border-color: var(--gold-t);
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.ftop .socials { gap: 13px; margin-top: 24px; }
.ftop .socials a { width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,255,255,.32); background: #fff; }
.ftop .socials a img { width: 24px; height: 24px; }
@media(max-width:760px) {
  .hero.hero-home { padding-top: 58px; padding-bottom: 58px; }
  .hero.hero-home .brandmark { margin-bottom: 20px; }
  .hero.hero-home .actions { margin-top: 24px; }
  .home-emotion-tags { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; margin:22px auto 2px; padding:0; list-style:none; }
  .home-emotion-tags li span { padding: 7px 13px; font-size: 13px; }
  .ftop .socials { gap: 10px; }
  .ftop .socials a { width: 42px; height: 42px; min-width: 42px; }
  .ftop .socials a img { width: 22px; height: 22px; }
}

/* V43: centered popular topics; official app-store social icons */
.ftop .socials a { width:48px; height:48px; min-width:48px; padding:0; border-radius:13px; background:transparent; border:0; box-shadow:none; }
.ftop .socials a img { width:38px; height:38px; max-width:38px; max-height:38px; object-fit:contain; border-radius:9px; display:block; }
.ftop .socials a:hover { background:transparent; transform:translateY(-2px); box-shadow:none; }
.home-emotion-tags { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; margin:22px auto 2px; padding:0; list-style:none; }
.home-emotion-tags li span { display:inline-flex; align-items:center; white-space:nowrap; padding:8px 14px; border:1px solid rgba(28,111,73,.30); border-radius:999px; background:var(--gold-t); color:var(--dark); font-size:14px; font-weight:700; }
.home-emotion-tags .topic-ellipsis span { border:0; background:transparent; padding-inline:3px; font-size:22px; line-height:1; color:var(--muted); }
@media (max-width:700px) { .home-emotion-tags { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; margin:22px auto 2px; padding:0; list-style:none; } .home-emotion-tags li span { padding:7px 11px; font-size:13px; } }

/* ===== V44: photography, app screens and podcast ===== */
/* phone frame: slim dark-green bezel around any screenshot */
.phone{position:relative;margin:0;padding:6px;border-radius:32px;background:linear-gradient(160deg,#1a5238,#0b3b27);box-shadow:0 26px 44px -22px rgba(11,74,48,.55),0 2px 0 rgba(255,255,255,.12) inset}
.phone img{display:block;width:100%;height:auto;border-radius:26px;background:#fff}
.phone-item{margin:0;text-align:center}
.phone-item figcaption{margin-top:16px;font-size:14px;font-weight:700;line-height:1.4;color:var(--green)}

/* row of phones (How it works) */
.phone-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;max-width:940px;margin:64px auto 0;align-items:start}
.phone-row .phone-item:nth-child(even){margin-top:34px}
.phone-row .phone{max-width:210px;margin-inline:auto}

/* phone + stacked cards (Feed band) */
.feature-split{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:64px;align-items:center;max-width:980px;margin:44px auto 0}
.feature-split .stack{display:grid;gap:18px}
.feature-split .stack .card{text-align:left}
.feature-split .stack .card p{margin-bottom:0}

/* card with a cropped phone on top (Find support / Share experience) */
.card-media{margin:-28px -28px 24px;height:290px;overflow:hidden;border-radius:19px 19px 0 0;background:linear-gradient(180deg,var(--green-t) 0%,var(--gold-t) 100%);display:flex;justify-content:center;align-items:flex-start;padding-top:28px}
.card-media .phone{width:min(196px,64%);border-radius:30px 30px 0 0;padding:6px 6px 0;flex:none}
.card-media .phone img{border-radius:25px 25px 0 0}

/* About: role callout + welcome screen */
.role-split{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:56px;align-items:center;max-width:980px;margin:28px auto 36px}
#meaningful-connection .role-split .role-switch-callout{max-width:none;margin:0;text-align:left}
#meaningful-connection .role-split .role-intro{max-width:none;margin:0;text-align:left}
.role-split .phone-item{height:330px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start}
.role-split .phone-item .phone{width:210px;flex:none;border-radius:32px 32px 0 0;padding:6px 6px 0;box-shadow:0 0 0 1px rgba(255,255,255,.28),0 26px 44px -22px rgba(0,0,0,.45)}
.role-split .phone-item .phone img{border-radius:26px 26px 0 0}

/* Download hero: phones rising from the bottom edge */
.hero.hero-showcase{padding-bottom:0}
.hero-phones{display:flex;justify-content:center;align-items:flex-start;gap:26px;height:340px;overflow:hidden;margin:46px auto 0;padding:0 24px;max-width:760px}
.hero-phones .phone{flex:0 1 210px;width:210px;border-radius:32px 32px 0 0;padding:6px 6px 0}
.hero-phones .phone img{border-radius:26px 26px 0 0}
.hero-phones .phone:nth-child(2){margin-top:0}
.hero-phones .phone:nth-child(1),.hero-phones .phone:nth-child(3){margin-top:38px}
.hero-showcase .hero-phones .phone{box-shadow:0 -10px 40px -14px rgba(11,74,48,.35)}

/* Home: three place photographs under the intro */
.photo-wrap{margin-top:56px}
.photo-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:920px;margin:0 auto;align-items:end}
.photo-trio figure{margin:0;overflow:hidden;border-radius:24px;background:var(--beige);box-shadow:0 22px 40px -24px rgba(20,48,31,.5)}
.photo-trio img{display:block;width:100%;height:100%;object-fit:cover}
.photo-trio .p1{aspect-ratio:3/4}
.photo-trio .p2{aspect-ratio:3/4.45}
.photo-trio .p3{aspect-ratio:3/4}
.photo-trio .p1 img{object-position:25% 70%}
.photo-trio .p2 img{object-position:50% 90%}

/* Story photo */
.article-photo{margin:0 0 38px;border-radius:22px;overflow:hidden;aspect-ratio:16/10;background:var(--beige);box-shadow:0 18px 36px -24px rgba(20,48,31,.5)}
.article-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}

/* Podcast: two player screens */
.podcast-pair{margin:44px 0 6px;text-align:center}
.podcast-pair .pair{display:flex;justify-content:center;gap:22px}
.podcast-pair .phone{width:min(190px,42%)}
.podcast-pair .phone+.phone{margin-top:30px}
.podcast-pair figcaption{margin-top:22px;font-size:15px;font-weight:700;color:var(--green)}
.steps+.podcast-pair{margin-top:56px}

@media(max-width:900px){
  .feature-split{grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:36px}
  .role-split{grid-template-columns:minmax(0,1fr) 190px;gap:34px}
}
@media(max-width:760px){
  .phone-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;margin-top:44px}
  .phone-row .phone{max-width:170px}
  .phone-row .phone-item:nth-child(even){margin-top:24px}
  .feature-split{grid-template-columns:1fr;gap:30px}
  .feature-split>.phone-item .phone{width:210px;margin-inline:auto}
  .role-split{grid-template-columns:1fr;gap:30px}
  .role-split .phone-item{height:290px}
  .role-split .phone-item .phone{width:190px;margin-inline:auto}
  .card-media{height:260px}
  .hero-phones{height:270px;gap:12px;padding:0 16px;margin-top:34px}
  .hero-phones .phone{flex:1 1 0;width:auto;min-width:0;border-radius:22px 22px 0 0;padding:4px 4px 0}
  .hero-phones .phone img{border-radius:18px 18px 0 0}
  .hero-phones .phone:nth-child(1),.hero-phones .phone:nth-child(3){margin-top:30px}
  .photo-wrap{margin-top:40px}
  .photo-trio{gap:10px}
  .photo-trio figure{border-radius:16px}
  .article-photo{border-radius:16px;margin-bottom:28px}
  .podcast-pair .pair{gap:14px}
  .podcast-pair .phone{width:44%}
}
.podcast-pair figcaption{text-wrap:balance}

/* ===== V45: letter images, podcast link ===== */
.letter-fig{margin:38px 0;text-align:center}
.letter-fig img{display:block;width:100%;height:auto;margin:0 auto;border-radius:14px}
.letter-fig.portrait img{width:min(100%,420px)}
.letter-fig.small img{width:min(100%,240px);border-radius:10px}
.letter-fig.wide img{border-radius:10px}
.letter-fig figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.podcast-link{display:block;color:inherit;text-decoration:none}
.podcast-link:hover .phone{transform:translateY(-4px)}
.podcast-link .phone{transition:transform .25s ease}
.podcast-pair figcaption a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.podcast-pair figcaption a:hover{color:var(--orange-d)}
.hero .byline{margin-top:18px}

/* ===== V48: story photos + letter card photos ===== */
.story-photo{margin:34px 0;text-align:center}
.story-photo img{display:block;width:100%;height:auto;margin:0 auto;border-radius:16px}
.story-photo.portrait img{width:min(100%,400px)}
.letter-card.has-photo{padding:0;overflow:hidden;gap:0;min-height:0}
.letter-thumb{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--beige)}
.letter-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.letter-card.has-photo:hover .letter-thumb img{transform:scale(1.04)}
.letter-card.has-photo .lc-body{display:flex;flex-direction:column;gap:14px;padding:24px 28px 30px}
@media(max-width:760px){.story-photo{margin:26px 0}.story-photo img{border-radius:12px}.letter-card.has-photo .lc-body{padding:20px 22px 26px}}

/* ===== V50: podcast, fades, role cards, handwriting, motion ===== */
@font-face{font-family:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat.woff2) format("woff2")}
@font-face{font-family:"Mrs Saint Delafield";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/signature.woff2) format("woff2")}

/* podcast: two identical phones, gently fanned over a soft glow */
.podcast-pair{position:relative;margin:58px 0 10px;text-align:center;isolation:isolate}
.podcast-pair::before{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:min(560px,96%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(240,176,74,.30) 0%,rgba(28,111,73,.12) 46%,rgba(28,111,73,0) 70%)}
.podcast-pair .pair{display:flex;justify-content:center;align-items:flex-start;gap:0}
.podcast-pair .phone{width:min(206px,42%);flex:none;align-self:flex-start;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.podcast-pair .phone+.phone{margin-top:0;margin-left:-18px}
.podcast-pair .phone:first-child{transform:rotate(-4deg) translateY(10px);z-index:1}
.podcast-pair .phone+.phone{transform:rotate(3.5deg) translateY(-8px)}
.podcast-link:hover .phone:first-child{transform:rotate(-6deg) translateY(2px) translateX(-6px)}
.podcast-link:hover .phone+.phone{transform:rotate(5.5deg) translateY(-16px) translateX(6px)}
.podcast-pair figcaption{margin-top:34px}
@media(max-width:560px){.podcast-pair .phone{width:44%}.podcast-pair .phone+.phone{margin-left:-14px}}

/* app phones: bottoms dissolve into the page */
.hero-phones{height:370px;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%)}
.hero-showcase .hero-phones .phone{box-shadow:0 0 0 1px rgba(255,255,255,.55),0 -14px 44px -16px rgba(11,74,48,.28)}
.card-media .phone{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%)}
@media(max-width:760px){.hero-phones{height:290px}}

/* about: role choice cards cropped from the app */
.role-split{grid-template-columns:minmax(0,1fr) minmax(300px,410px);gap:56px;align-items:center}
.role-cards{margin:0;position:relative}
.role-cards::before{content:"";position:absolute;inset:-26px -22px;border-radius:30px;background:radial-gradient(circle at 70% 30%,rgba(240,176,74,.30),rgba(240,176,74,0) 65%)}
.role-cards img{position:relative;display:block;width:100%;height:auto;border-radius:22px;background:#fff;box-shadow:0 0 0 7px rgba(255,255,255,.16),0 34px 50px -26px rgba(0,0,0,.55)}
@media(max-width:760px){.role-split{grid-template-columns:1fr;gap:34px}.role-cards{max-width:400px;margin:0 auto}}

/* founder: handwritten opening and signature */
#founder .founder-copy>p.hand{font:500 clamp(26px,2.9vw,33px)/1.5 "Caveat","Segoe Script","Bradley Hand",cursive;color:#1f3b73;max-width:820px;text-wrap:balance;transform:rotate(-.6deg);letter-spacing:.005em}
#founder .founder-copy .byline.hand-sign{font:400 clamp(44px,5vw,58px)/1.1 "Mrs Saint Delafield","Segoe Script",cursive;color:#1f3b73;transform:rotate(-3deg);margin-top:20px;display:inline-block;padding:0 8px;background:none;letter-spacing:.01em}

/* motion layer */
.scroll-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--orange));pointer-events:none}
header{transition:box-shadow .3s,background .3s}
header.scrolled{box-shadow:0 10px 30px -18px rgba(11,74,48,.45);background:rgba(255,253,249,.88);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.button{position:relative;overflow:hidden}
.button::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);pointer-events:none}
.stat b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#0b4a30;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
.hero .brandmark{animation:rise .9s cubic-bezier(.2,.7,.2,1) both,floaty 7s ease-in-out 1s infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-.6deg)}}
.button:hover::after{animation:shine .8s ease}
@keyframes shine{to{left:130%}}
.button{transition:background .2s,color .2s,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 22px -12px rgba(11,74,48,.55)}
/* words rise in */
.split .w{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(7px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--i)*55ms),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i)*55ms),filter .8s calc(var(--i)*55ms)}
.split.in .w{opacity:1;transform:none;filter:none}
/* chips pop */
.js .chips li{opacity:0;transform:translateY(12px) scale(.94);transition:opacity .5s calc(var(--ci,0)*70ms),transform .5s cubic-bezier(.3,1.4,.5,1) calc(var(--ci,0)*70ms)}
.js .chips.in li{opacity:1;transform:none}
.chips li span{transition:transform .25s,background .25s,border-color .25s}
.chips li:hover span{transform:translateY(-3px) rotate(-1.5deg);background:#fff}
/* media entrances */
.js .m-in{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .m-in.in{opacity:1;transform:none}
.js .story-photo.m-in img,.js .letter-fig.m-in img{clip-path:inset(0 0 100% 0 round 16px);transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1) .1s}
.js .story-photo.m-in.in img,.js .letter-fig.m-in.in img{clip-path:inset(0 0 0 0 round 16px)}
.js .podcast-pair.m-in .phone:first-child{transform:rotate(-12deg) translateY(40px) translateX(30px)}
.js .podcast-pair.m-in .phone+.phone{transform:rotate(10deg) translateY(30px) translateX(-30px)}
.js .podcast-pair.m-in.in .phone:first-child{transform:rotate(-4deg) translateY(10px)}
.js .podcast-pair.m-in.in .phone+.phone{transform:rotate(3.5deg) translateY(-8px)}
.js .podcast-pair.m-in.in .podcast-link:hover .phone:first-child{transform:rotate(-6deg) translateY(2px) translateX(-6px)}
.js .podcast-pair.m-in.in .podcast-link:hover .phone+.phone{transform:rotate(5.5deg) translateY(-16px) translateX(6px)}
/* floating phones */
.hero-phones .phone{animation:bob 7s ease-in-out infinite}
.hero-phones .phone:nth-child(2){animation-delay:-2.3s}.hero-phones .phone:nth-child(3){animation-delay:-4.6s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.role-cards{animation:bob 8s ease-in-out infinite}
/* handwriting wipe */
.js .hand.m-in,.js .hand-sign.m-in{opacity:1;transform:rotate(-.6deg);clip-path:inset(0 100% 0 0);transition:clip-path 2.6s cubic-bezier(.4,.1,.2,1)}
.js .hand-sign.m-in{transform:rotate(-2deg);transition-duration:1.6s}
.js .hand.m-in.in,.js .hand-sign.m-in.in{clip-path:inset(0 -2% 0 0)}
/* cards */
.card{will-change:transform}
.card:hover{box-shadow:0 22px 40px -26px rgba(11,74,48,.45)}
.letter-thumb img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.letter-card:hover .letter-thumb img{transform:scale(1.06)}
.letter-thumb{overflow:hidden}
.eyebrow{position:relative}
.eyebrow::after{content:"";display:block;width:0;height:2px;margin:8px auto 0;background:var(--gold);transition:width .9s cubic-bezier(.2,.7,.2,1) .2s;position:absolute;left:50%;bottom:-6px;transform:translateX(-50%)}
.in>.eyebrow::after,.eyebrow.in::after{width:36px}
.value-card,.stat{transition:transform .3s,box-shadow .3s}
.value-card:hover,.stat:hover{transform:translateY(-4px)}
}
@media(prefers-reduced-motion:reduce){.scroll-bar{display:none}}
.hero{overflow:hidden}
html,body{overflow-x:clip}
.hero-phones{padding-top:16px;height:386px;box-sizing:border-box}
@media(max-width:760px){.hero-phones{height:306px}}
h1.split,h2.split{display:block!important}

@media(prefers-reduced-motion:no-preference){
.js .m-hand{clip-path:inset(-10% 100% -10% 0);transition:clip-path 2.8s cubic-bezier(.45,.1,.25,1)}
.js .m-hand.in{clip-path:inset(-10% -2% -10% 0)}
.js .hand-sign.m-hand{transition:clip-path 1.5s cubic-bezier(.45,.1,.25,1) 2.7s}
}
#founder .founder-copy>p.hand{margin-bottom:36px!important}
.hero-phones{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 42%,rgba(0,0,0,.5) 66%,transparent 94%);mask-image:linear-gradient(to bottom,#000 0,#000 42%,rgba(0,0,0,.5) 66%,transparent 94%)}
.card-media .phone{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 150px,rgba(0,0,0,.45) 205px,transparent 258px);mask-image:linear-gradient(to bottom,#000 0,#000 150px,rgba(0,0,0,.45) 205px,transparent 258px)}
@media(max-width:760px){.card-media .phone{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 125px,rgba(0,0,0,.45) 180px,transparent 228px);mask-image:linear-gradient(to bottom,#000 0,#000 125px,rgba(0,0,0,.45) 180px,transparent 228px)}}

/* V53: role choice swap */
.role-split{display:block!important;max-width:980px;margin:28px auto 36px}
#meaningful-connection .role-split .role-switch-callout{max-width:900px;margin:0 auto}
.role-swap{margin:44px auto 4px;max-width:640px;position:relative}
.swap-track{display:grid;grid-template-columns:1fr 1fr;gap:26px;position:relative;align-items:start}
.swap-track .rc{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.26));will-change:transform}
.swap-ico{position:absolute;z-index:3;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--ink);box-shadow:0 8px 16px -6px rgba(0,0,0,.4)}
@media(max-width:560px){.swap-track{gap:16px}.swap-ico{width:34px;height:34px;margin:-17px 0 0 -17px}.swap-ico svg{width:16px;height:16px}.role-swap{margin-top:34px}}
@media(prefers-reduced-motion:no-preference){
.swap-track .rc-a{animation:swapA 9s cubic-bezier(.5,0,.3,1) infinite}
.swap-track .rc-b{animation:swapB 9s cubic-bezier(.5,0,.3,1) infinite}
.swap-ico{animation:swapSpin 9s cubic-bezier(.5,0,.3,1) infinite}
.role-swap:hover .rc,.role-swap:hover .swap-ico{animation-play-state:paused}
@keyframes swapA{0%,36%{translate:0 0;scale:1;z-index:2}43%{translate:calc(50% + 13px) -18px;scale:1.08}50%,86%{translate:calc(100% + 26px) 0;scale:1;z-index:1}93%{translate:calc(50% + 13px) 18px;scale:.92}100%{translate:0 0;scale:1;z-index:2}}
@keyframes swapB{0%,36%{translate:0 0;scale:1;z-index:1}43%{translate:calc(-50% - 13px) 18px;scale:.92}50%,86%{translate:calc(-100% - 26px) 0;scale:1;z-index:2}93%{translate:calc(-50% - 13px) -18px;scale:1.08}100%{translate:0 0;scale:1;z-index:1}}
@keyframes swapSpin{0%,36%{rotate:0deg}50%,86%{rotate:180deg}100%{rotate:360deg}}
}
.role-swap{max-width:780px}

/* V54: role toggle + five-step phone row */
.phone-row{grid-template-columns:repeat(5,minmax(0,1fr));max-width:1080px;gap:24px}
.phone-row .phone-item:nth-child(even){margin-top:34px}
.phone-row .phone{max-width:190px}
.phone-row .phone-item figcaption{font-size:13.5px}
@media(max-width:900px){.phone-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}.phone-row .phone-item:nth-child(5){grid-column:1/-1;max-width:50%;margin:0 auto}}
.role-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:700px;margin:44px auto 6px;padding:7px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 24px 40px -26px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rt-thumb{position:absolute;z-index:0;left:7px;top:7px;bottom:7px;width:calc(50% - 7px);border-radius:999px;background:#fffdf9;box-shadow:0 12px 22px -10px rgba(0,0,0,.45)}
.rt-opt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:14px;padding:20px 18px;text-align:left;color:rgba(255,255,255,.82)}
.rt-opt svg{flex:none}
.rt-txt{display:flex;flex-direction:column;line-height:1.2}
.rt-txt strong{font:500 clamp(20px,2.4vw,26px)/1.15 var(--serif);letter-spacing:-.01em}
.rt-txt small{font-size:14px;opacity:.8;margin-top:4px}
.rt-need{color:var(--ink)}
@media(max-width:560px){.role-toggle{margin-top:32px;padding:5px}.rt-thumb{left:5px;top:5px;bottom:5px;width:calc(50% - 5px)}.rt-opt{flex-direction:column;gap:6px;padding:16px 8px;text-align:center}.rt-txt{align-items:center}.rt-txt small{font-size:12.5px}}
@media(prefers-reduced-motion:no-preference){
.rt-thumb{animation:rtThumb 8s infinite}
.rt-need{animation:rtNeed 8s infinite}
.rt-give{animation:rtGive 8s infinite}
.rt-opt svg{animation:rtPop 8s infinite}
.rt-give svg{animation-name:rtPop2}
.role-toggle:hover .rt-thumb,.role-toggle:hover .rt-opt,.role-toggle:hover .rt-opt svg{animation-play-state:paused}
@keyframes rtThumb{0%,34%{transform:translateX(0);background:#fffdf9;animation-timing-function:cubic-bezier(.65,0,.2,1)}46%,84%{transform:translateX(100%);background:#f0b04a;animation-timing-function:cubic-bezier(.65,0,.2,1)}96%,100%{transform:translateX(0);background:#fffdf9}}
@keyframes rtNeed{0%,34%{color:#14301f}46%,84%{color:rgba(255,255,255,.82)}96%,100%{color:#14301f}}
@keyframes rtGive{0%,34%{color:rgba(255,255,255,.82)}46%,84%{color:#14301f}96%,100%{color:rgba(255,255,255,.82)}}
@keyframes rtPop{0%,30%{transform:scale(1) rotate(0)}38%{transform:scale(1.25) rotate(-12deg)}46%,100%{transform:scale(1) rotate(0)}}
@keyframes rtPop2{0%,80%{transform:scale(1) rotate(0)}88%{transform:scale(1.25) rotate(90deg)}96%,100%{transform:scale(1) rotate(0)}}
}

/* V55 */
#meaningful-connection .role-split .role-switch-callout,#meaningful-connection .role-split .role-intro{text-align:center}
#founder .founder-copy .byline.hand-sign{transform:none!important}
.role-toggle{max-width:500px;margin:34px auto 4px;padding:5px;background:#fffdf9;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px rgba(11,74,48,.12),0 18px 30px -20px rgba(0,0,0,.55)}
.rt-thumb{left:5px;top:5px;bottom:5px;width:calc(50% - 5px);background:#0b4a30;box-shadow:none}
.rt-opt{padding:13px 12px;gap:10px;color:#53695c}
.rt-opt svg{width:22px;height:22px}
.rt-txt strong{font:600 17px/1.15 var(--sans);letter-spacing:0}
.rt-txt small{font-size:12.5px;opacity:.85;margin-top:3px}
.rt-need{color:#fff}
@media(max-width:560px){.role-toggle{margin-top:26px}.rt-opt{padding:12px 6px}.rt-txt strong{font-size:15.5px}}
@media(prefers-reduced-motion:no-preference){
@keyframes rtThumb{0%,34%{transform:translateX(0);background:#0b4a30;animation-timing-function:cubic-bezier(.65,0,.2,1)}46%,84%{transform:translateX(100%);background:#f0b04a;animation-timing-function:cubic-bezier(.65,0,.2,1)}96%,100%{transform:translateX(0);background:#0b4a30}}
@keyframes rtNeed{0%,34%{color:#fff}46%,84%{color:#53695c}96%,100%{color:#fff}}
@keyframes rtGive{0%,34%{color:#53695c}46%,84%{color:#14301f}96%,100%{color:#53695c}}
}
/* V56 green-band cards */
.band.green .grid .card{background:#f7f2e7;border:1px solid rgba(240,176,74,.55);box-shadow:0 18px 30px -22px rgba(0,0,0,.55)}
.band.green .grid .card h3{color:#0b4a30}
.band.green .grid .card p{color:#3f5a4b}
/* V59 footer legal links on one line */
footer nav[aria-label="Legal"]{display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;gap:12px 18px}
.legalpart h2[id]{scroll-margin-top:110px}
footer nav[aria-label="Legal"] .fh{flex:0 0 100%}
footer nav[aria-label="Legal"] a{white-space:nowrap;display:inline-block}
.legalhead h1{font-size:clamp(17px,5.3vw,44px);white-space:nowrap;letter-spacing:-.01em}
/* V63 centred button, toucan beside it */
.cta-row{position:relative;display:flex;justify-content:center;margin-top:30px;animation:rise .8s cubic-bezier(.2,.7,.2,1) .24s both}
.cta-row .actions{margin-top:0}
.toucan{position:absolute;left:calc(50% + 138px);top:50%;margin:0;width:clamp(78px,8vw,112px);translate:0 -52%;background:none;border:0;border-radius:0;overflow:visible}
.toucan img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 12px rgba(11,74,48,.2))}
@media(prefers-reduced-motion:no-preference){.toucan img{transform-origin:50% 100%;animation:tbob2 4.5s ease-in-out infinite}}
@keyframes tbob2{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-3px)}}
@media(max-width:520px){.cta-row .actions,.cta-row .actions .button{width:auto}.cta-row .actions .button{padding:14px 26px}.toucan{left:calc(50% + 112px);width:66px}}
@media(max-width:380px){.toucan{display:none}}


/* V63 polish */
html{scroll-padding-top:92px}
.button{transition:transform .25s ease,background-color .25s,border-color .25s,box-shadow .25s,translate .25s cubic-bezier(.2,.7,.2,1)}
.button:active{transform:scale(.97)}
@media(prefers-reduced-motion:no-preference){
.letter-thumb{overflow:hidden}
.letter-thumb img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.letter-card:hover .letter-thumb img{transform:scale(1.07)}
.flinks a,.fcols a{transition:translate .25s ease,color .2s}
.flinks a:hover,.fcols a:hover{translate:4px 0}
.story-category{transition:transform .3s ease,background-color .3s}
.story-card:hover .story-category{transform:translateX(3px)}
.avatar{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
}

/* V64 */
/* no lifting on hover: colour change only */
.card:hover,.steps li:hover,.chips a:hover,.js .card.reveal.in:hover{transform:none}
.chips li:hover span{transform:none}
.podcast-link:hover .phone{transform:none}
/* podcast: fanned but on one line */
.podcast-pair .phone:first-child{transform:rotate(-4deg)}
.podcast-pair .phone+.phone{transform:rotate(3.5deg)}
.podcast-link:hover .phone:first-child{transform:rotate(-6deg) translateX(-6px)}
.podcast-link:hover .phone+.phone{transform:rotate(5.5deg) translateX(6px)}
.js .podcast-pair.m-in.in .phone:first-child{transform:rotate(-4deg)}
.js .podcast-pair.m-in.in .phone+.phone{transform:rotate(3.5deg)}
.js .podcast-pair.m-in.in .podcast-link:hover .phone:first-child{transform:rotate(-6deg) translateX(-6px)}
.js .podcast-pair.m-in.in .podcast-link:hover .phone+.phone{transform:rotate(5.5deg) translateX(6px)}
@media(prefers-reduced-motion:no-preference){
/* every app screen drifts gently, each on its own beat */
.phone{animation:drift 7.5s ease-in-out infinite}
.phone-item:nth-child(2) .phone{animation-delay:-1.6s}.phone-item:nth-child(3) .phone{animation-delay:-3.1s}.phone-item:nth-child(4) .phone{animation-delay:-4.7s}.phone-item:nth-child(5) .phone{animation-delay:-6s}
.card-media .phone,.stack .card:nth-child(2) .phone{animation-delay:-2.2s}
.hero-phones .phone{animation:bob 7s ease-in-out infinite}
.hero-phones .phone:nth-child(2){animation-delay:-2.3s}.hero-phones .phone:nth-child(3){animation-delay:-4.6s}
.podcast-pair .phone,.podcast-pair .phone+.phone{animation:drift 7s ease-in-out infinite;animation-delay:0s}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -9px}}
/* lines draw, numbers pop */
.stat{position:relative}
.stat::before{content:"";position:absolute;left:0;top:-2px;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .3s}
.stats.in .stat::before,.stat.in::before{transform:scaleX(1)}
.stats .stat:nth-child(2)::before{transition-delay:.5s}.stats .stat:nth-child(3)::before{transition-delay:.7s}
.js .steps li::before{transform:scale(.3);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0ms) + .3s),opacity .4s calc(var(--d,0ms) + .3s)}
.js .steps li.in::before{transform:none;opacity:1}
.js ol.numbered li::before{opacity:0;translate:-10px 0;transition:opacity .6s calc(var(--d,0ms) + .25s),translate .7s cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + .25s)}
.js ol.numbered li.in::before{opacity:1;translate:0 0}
/* cards: accent line sweeps under the title on hover */
.more{transition:letter-spacing .3s,color .2s}
.card:hover .more{letter-spacing:.02em}
/* qlist: quiet border colour shift */
.qlist li{transition:border-color .3s,background-color .3s}
.qlist li:hover{border-color:var(--green);background:#fbf8ef}
}
@media(prefers-reduced-motion:reduce){.phone{animation:none}}

/* V67 */
.whynow-quote p{font-size:clamp(18px,1.8vw,22px);line-height:1.4}
/* V72 legal meta on one line */
.legalmeta{white-space:nowrap}
@media(max-width:560px){.legalmeta{font-size:clamp(8.5px,2.45vw,13px);letter-spacing:0}}

/* V75 footer: 3 columns, legal links stacked */
.fcols{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.fcols{grid-template-columns:1fr 1fr}}
footer nav[aria-label="Legal"]{display:block}
footer nav[aria-label="Legal"] .fh{flex:none}
footer nav[aria-label="Legal"] a{display:block}

/* V77 hero wordmark: no float */
.hero .brandmark{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}

/* V80 launch badges: equal height, one row */
.fbadges{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:34px}
.fbadges a{display:inline-flex;align-items:center;border-radius:10px;transition:opacity .2s}
.fbadges a:hover{opacity:.85}
.fbadges img{height:44px;width:auto;display:block;border-radius:8px}
@media(max-width:560px){.fbadges{gap:12px}.fbadges img{height:38px}}

/* V81 footer: three columns centred as a group, same column pitch */
@media(min-width:1000px){.fcols{grid-template-columns:397px 397px max-content;column-gap:0;justify-content:center}}