/* Sub pages (blog, legal). Sits on top of shell.css, which is cut from the homepage styles, so colours, type, buttons, header and footer are the same. */
.js [data-reveal]{opacity:0;translate:0 22px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.js [data-reveal].in{opacity:1;translate:none}
.narrow{max-width:calc(820px + var(--pad)*2)}
.pg-hero{position:relative;overflow:hidden;padding-block:clamp(44px,6vw,92px) clamp(18px,3vw,36px)}
.pg-hero:before{content:'';position:absolute;right:-18%;top:-60%;width:min(900px,100vw);aspect-ratio:1;pointer-events:none;background:radial-gradient(closest-side,rgba(46,209,112,.13),rgba(46,209,112,0))}
.pg-hero .wrap{position:relative}
.pg-hero h1{font-size:clamp(40px,5.2vw,70px);max-width:18ch}
.pg-hero .lede{margin-top:20px}
.updated{margin-top:18px;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chip{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:100px;border:1px solid var(--line-2);background:var(--card);color:var(--body);font:500 14px/1 var(--sans);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s,transform .25s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.chip.on,.chip[aria-current=page]{background:var(--btn-dark-bg);color:var(--btn-dark-fg);border-color:transparent}
.chip:focus-visible{outline:2px solid #128A4B;outline-offset:3px}
.chip small{margin-left:8px;font:500 11px/1 var(--mono);opacity:.6}
.pg-body{padding-block:clamp(28px,4vw,56px) var(--sec)}

/* reading text */
.prose{font-size:18px;line-height:1.8;color:var(--body)}
.prose>*+*{margin-top:1.15em}
.prose h2,.prose h3{margin-top:2.2em;font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.015em;font-variation-settings:"opsz" 60}
.prose h4{margin-top:1.9em;font:600 19px/1.35 var(--sans);color:var(--ink);letter-spacing:0}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.7em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--green-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose ul,.prose ol{padding-left:1.45em}
.prose li{margin-top:.55em;padding-left:.2em}
.prose li::marker{color:var(--green-text);font-family:var(--mono);font-size:.85em}
.prose li>p{margin:0} .prose li>*+*{margin-top:.8em}
.prose img{border-radius:18px;margin-block:1.8em;width:100%;height:auto}
.legal-prose{font-size:16.5px;line-height:1.75;max-width:760px}
.legal-prose>ol{padding-left:1.7em;margin-top:2em}
.legal-prose>ol>li{padding-left:.4em}
.legal-prose>ol>li::marker{font-size:.95em;font-weight:500}
.legal-prose>ol>li>p:first-child{color:var(--ink)}

/* article */
.art-top{padding-block:clamp(28px,4vw,56px) 0}
.art-back{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 var(--sans);color:var(--muted);min-height:44px;transition:color .2s}
.art-back:hover{color:var(--ink)} .art-back .i{transform:rotate(180deg);width:18px;height:18px;transition:transform .35s var(--ease)} .art-back:hover .i{transform:rotate(180deg) translateX(4px)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:20px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.art-meta .cat{padding:8px 12px;border-radius:100px;background:var(--green-tint);color:var(--green-text)}
.art h1{margin-top:22px;font-size:clamp(36px,4.8vw,64px);max-width:22ch;letter-spacing:-.022em}
.art .lede{margin-top:22px;max-width:60ch}
.art-hero{margin:clamp(30px,4vw,52px) 0 0;border-radius:28px;overflow:hidden;aspect-ratio:2/1;background:#0d141a;box-shadow:var(--lift)}
.art-hero img{width:100%;height:100%;object-fit:cover}
.art-body{padding-block:clamp(36px,5vw,64px) 0}
.art-body .prose{max-width:720px;margin-inline:auto}
.art-note{max-width:720px;margin:48px auto 0;padding-top:22px;border-top:1px solid var(--line);font-size:13px;line-height:1.7;color:var(--faint)}
.art-note a{text-decoration:underline;text-underline-offset:2px} .art-note a:hover{color:var(--ink)}
.art-cta{padding-block:clamp(56px,7vw,100px) 0}
.cta-card{position:relative;overflow:hidden;isolation:isolate;border-radius:32px;padding:clamp(36px,6vw,80px);background:var(--green-deep);color:#EAF7EF;text-align:center}
.cta-card:before{content:'';position:absolute;inset:-30% -10% auto auto;width:min(700px,90%);aspect-ratio:1;z-index:-1;background:radial-gradient(closest-side,rgba(46,209,112,.28),rgba(46,209,112,0))}
.cta-card .eyebrow{color:var(--green-soft)} .cta-card .eyebrow:before{box-shadow:0 0 0 4px rgba(46,209,112,.22)}
.cta-card h2{color:#fff;font-size:clamp(32px,4.4vw,60px);max-width:16ch;margin-inline:auto} .cta-card h2 em{color:var(--green-soft)}
.cta-card p{margin:20px auto 0;max-width:44ch;color:#C9E7D5}
.cta-card .cta{justify-content:center}
.more{padding-block:clamp(56px,7vw,100px) 0}
.more .railhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.more .blog-grid{margin-top:36px}

/* blog index */
.blog-index .blog-grid{margin-top:0}
.blog-index .blog.hide{display:none}
.blog-index .bimg{height:210px}
.blog-index .empty{display:none;margin-top:40px;color:var(--muted)}
@media(max-width:860px){.blog-grid{grid-template-columns:minmax(0,1fr)} .art-hero{border-radius:22px}}
@media(max-width:560px){.prose{font-size:17px} .art h1{font-size:clamp(32px,9vw,40px)} .cta-card{border-radius:26px}}