/* Layout: one column of bands, 1200px content well, journey selector drives the section tiles. */
:root{
  /* Lymphoma Australia tokens from Figma "New Font Update 2026" */
  --sea:#009EB6;        /* Brilliant Sea */
  --sea-deep:#009EB6;
  --leaf:#6FB90B;       /* Hill Lands */
  --leaf-deep:#6FB90B;
  --btn-green:#6FB90B;      /* Hill Lands, per brand */
  --btn-green-hover:#5FA309;
  --ink:#1B1B1B;        /* Eerie Black */
  --ink-soft:#4A5255;
  --mist:#EFF3F3;       /* Maui Mist */
  --milky:#E6F6F8;      /* Milky Way */
  --leaf-tint:#F1F8E6;
  --paper:#FFFFFF;
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --line:#D9E2E3;
  --shadow:0 8px 24px rgba(27,27,27,.06);
  --font:"Figtree",Helvetica,Arial,sans-serif;
  --r:12px; color-scheme:light;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;margin:0}
h1,h2,h3,h4{margin:0;line-height:1.2;text-wrap:balance;font-weight:600}
h1{font-size:clamp(34px,5vw,48px)}
h2{font-size:clamp(26px,3.4vw,36px);color:var(--sea-deep)}
h3{font-size:20px}
p{margin:0}
a{color:var(--sea-deep)}
.band{padding-block:56px}
.band-inner{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mist{background:var(--mist)}
.milky{background:var(--milky)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf-deep)}
.lede{color:var(--ink-soft);font-size:18px;max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:6px;padding:14px 22px;font-weight:600;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:var(--font);transition:background-color .15s,color .15s,border-color .15s}
.btn-leaf{background:var(--btn-green);color:#fff}
.btn-leaf:hover{background:var(--btn-green-hover)}
.btn-sea{background:var(--sea-deep);color:#fff}
.btn-sm{padding:9px 14px;font-size:14px;gap:8px}
.btn-sm svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{border-color:var(--sea);color:var(--sea-deep);background:transparent}
.btn-ghost:hover{background:var(--sea);color:#fff}
.btn:focus-visible,.tile:focus-visible,.stage:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head p{color:var(--ink-soft);max-width:60ch}
.arw{display:grid;place-items:center;color:var(--sea-deep);position:relative;top:-1px;transition:transform .15s}
.arw svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a:hover .arw{transform:translateX(3px)}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;white-space:nowrap}
.icon{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
.icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.facts .btn{justify-self:start;margin-top:4px}

/* Breadcrumb */
.crumbs{font-size:14px;color:var(--ink-soft);padding-block:14px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--sea-deep)}
.crumbs b{color:var(--ink);font-weight:600}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:40px 64px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{color:var(--sea-deep);margin-top:10px}
.hero .lede{margin-top:16px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.leaves{position:absolute;right:-40px;top:-30px;width:min(46vw,520px);opacity:.9;mix-blend-mode:multiply;pointer-events:none}
.facts{position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:28px;display:grid;gap:18px}
.facts h3{color:var(--leaf-deep);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.fact{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.fact strong{display:block;font-size:17px}
.fact span{color:var(--ink-soft);font-size:15px}
.fact .icon{background:var(--milky);color:var(--sea);width:40px;height:40px}

/* Journey selector */
.journey-head{text-align:center;margin-bottom:28px}
.journey-head h2{margin-inline:auto}
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stage{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:20px 18px;text-align:left;cursor:pointer;font:inherit;color:inherit;text-decoration:none;display:grid;gap:10px;align-content:start;transition:border-color .15s,transform .15s}
.stage:hover{border-color:var(--leaf);background:var(--leaf-tint)}

.stage{position:relative}
.stage .sh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.stage .go{flex:none;display:grid;place-items:center;color:var(--sea-deep);transition:transform .15s}
.stage .go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stage:hover .go{transform:translateX(3px)}
.stage .icon{background:var(--milky);color:var(--sea);width:44px;height:44px}
.stage .icon .g,.row .icon .g,.fact .icon .g{stroke:var(--leaf)}
.stage strong{font-size:16px;line-height:1.25}
.stage span{font-size:14px;color:var(--ink-soft)}

/* Section tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tile{position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:26px;display:grid;grid-template-columns:auto 1fr;gap:16px;text-decoration:none;color:inherit;border:2px solid transparent;transition:border-color .15s}
.tile:hover{border-color:var(--sea)}
.tile .icon{background:var(--milky);width:48px;height:48px}
.tile .icon svg{width:28px;height:28px;stroke:none;fill:none}
.tile h3{color:var(--ink);font-size:19px;margin-bottom:6px}
.tile p{color:var(--ink-soft);font-size:15px}
.tile .th{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.tile .th h3{margin-bottom:0}
.tile .go{flex:none;height:23px;display:grid;place-items:center;color:var(--sea-deep);transition:transform .15s}
.tile .go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile:hover .go{transform:translateX(3px)}

/* Two-up callouts */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.callout{border-radius:var(--r);padding:28px;display:grid;gap:12px;align-content:start}
.callout.sea{background:var(--sea-deep);color:#fff}
.callout.sea h3,.callout.sea a{color:#fff}
.callout.leafy{background:var(--leaf-tint);border:2px solid var(--leaf)}
.callout.leafy h3{color:var(--leaf-deep)}
.callout ul{margin:0;padding-left:0;list-style:none;display:grid;gap:8px}
.callout li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.callout li::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;margin-top:9px;opacity:.7}
.callout .sub{font-size:15px;opacity:.9}
.callout .btn{justify-self:start;margin-top:6px}
.callout.sea .btn{background:#fff;color:var(--sea-deep);border-color:#fff}
.callout.sea .btn:hover{background:transparent;color:#fff}

/* Support band */
.alone{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:36px 40px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.alone .lede{font-size:17px}
.alone .ctas{display:grid;gap:16px;justify-items:stretch;text-align:center}
.alone .call{display:grid;gap:6px}
.btn-call{justify-content:center;font-size:22px;font-variant-numeric:tabular-nums;padding:12px 24px}
.btn-call svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.alone .ctas .btn-ghost{justify-content:center}
.alone .big{font-size:clamp(26px,3vw,34px);font-weight:800;color:var(--sea);font-variant-numeric:tabular-nums}
.alone .sec{font-weight:600;text-decoration:none;font-size:15px;justify-self:center}

/* Three columns */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.col h3{color:var(--ink);font-size:20px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.col h3 a{font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.list{display:grid;gap:10px}
.row{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-decoration:none;color:inherit}
.row .icon{width:36px;height:36px;background:var(--milky);color:var(--sea)}
.row .icon svg{width:18px;height:18px}
.row strong{display:block;font-size:15px}
.row span{font-size:13px;color:var(--ink-soft)}
.row .dl{width:34px;height:34px;border-radius:8px;background:var(--milky);color:var(--sea-deep);display:grid;place-items:center;flex:0 0 auto}
.row .dl svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.story{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:grid}
.story img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 30%}
.story .body{padding:18px 20px;display:grid;gap:8px}
.story h4{font-size:17px;color:var(--ink)}
.story .ex{font-size:15px;color:var(--ink-soft);line-height:1.5}
.story .who{font-size:14px;color:var(--ink-soft)}
.story .more{font-size:14px}

/* Closing band */
.close{padding-block:8px 24px}
.close-box{position:relative;overflow:hidden;background:#009EB6;color:#fff;border-radius:var(--r);padding:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.close-box>div,.close-box>a{position:relative;z-index:1}
.close h2{color:#fff;font-size:clamp(24px,3vw,32px);max-width:24ch}
.close p{max-width:56ch;margin-top:10px}
.close .btn{background:#fff;color:#009EB6;border-color:#fff}
.close .btn:hover{background:transparent;color:#fff}
.close .leaves{opacity:.22;mix-blend-mode:screen;right:-30px;top:-40px;width:min(40vw,360px)}
.sponsor{text-align:center;color:var(--ink-soft);font-size:14px;padding-block:32px;display:grid;gap:12px;justify-items:center}
.sponsor img{width:150px;max-width:100%}
.sponsor b{color:var(--ink)}

/* Block-type overlay for EJ and Aidan */
.blk{display:none;position:absolute;top:-11px;left:16px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:4px;z-index:2}
body.show-blocks .blk{display:inline-block}
body.show-blocks .has-blk{outline:1px dashed var(--sea);outline-offset:6px}
.has-blk{position:relative}
.toggle{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:10px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}

@media (max-width:1000px){
  .stages{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles,.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alone{grid-template-columns:1fr}
  .alone .ctas{justify-items:stretch;text-align:left}
  .alone .sec{justify-self:start}
}
@media (max-width:680px){
  .band{padding-block:40px}
  .hero-grid,.two,.tiles,.cols{grid-template-columns:1fr}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leaves{width:70vw;right:-80px;top:-60px;opacity:.5}
  .toggle{left:auto;right:max(16px,env(safe-area-inset-right,0px))}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* ==========================================================================
   Internal hub pages. One template, a fixed set of content blocks.
   Every subtype hub reuses: page header, hub nav, main column of blocks,
   sidebar (In this section, resources, need support), pager, closing band.
   ========================================================================== */

:root{
  --suggest-bg:#FDEEEC;   /* suggested content, not yet signed off */
  --suggest-line:#F0B4AC;
  --suggest-ink:#A23A2C;
}

/* Page header */
.page-head{position:relative;overflow:hidden;padding-block:36px 44px}
.page-head .leaves{width:min(34vw,360px);top:-50px;right:-30px;opacity:.7}
.page-head .band-inner{position:relative;z-index:1}
.page-head .back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf-deep);text-decoration:none}
.page-head .back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.page-head .back:hover{text-decoration:underline}
.page-head h1{color:var(--sea-deep);margin-top:10px;max-width:26ch}
.page-head .lede{margin-top:14px}

/* Hub navigation (same on every internal page) */
.hubnav{border-bottom:1px solid var(--line);background:var(--bg)}
.hubnav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.hubnav ul::-webkit-scrollbar{display:none}
.hubnav a{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:16px 14px 14px;font-size:15px;font-weight:600;color:var(--ink-soft);text-decoration:none;border-bottom:3px solid transparent}
.hubnav a:hover{color:var(--sea-deep)}
.hubnav a[aria-current="page"]{color:var(--sea-deep);border-bottom-color:var(--sea)}
.hubnav .hn-icon{width:22px;height:22px;display:grid;place-items:center}
.hubnav .hn-icon svg{width:22px;height:22px}

/* Main layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;padding-block:48px 64px}
.main{max-width:760px;min-width:0}

/* Text block */
.prose{font-size:17px;line-height:1.65}
.prose p{margin:0 0 16px}
.prose h3{font-size:21px;color:var(--ink);margin:28px 0 10px}
.prose h4{font-size:18px;color:var(--ink);margin:22px 0 8px}
.prose ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.prose li{position:relative;padding-left:22px}
.prose li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--leaf)}
.prose a{font-weight:600}
.sec{scroll-margin-top:24px;padding-top:8px}
.sec+.sec{margin-top:40px}
.sec>h2{margin-bottom:16px}
.sec>.has-blk{margin-top:20px}
.sec>.has-blk:first-of-type{margin-top:0}
.intro{margin-bottom:36px}

/* Key points */
.keypoints{background:var(--mist);border-radius:var(--r);padding:24px 28px}
.keypoints h3{margin:0 0 12px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf-deep)}
.keypoints ul{margin:0}

/* Callouts */
.note{border-radius:var(--r);padding:20px 24px;display:grid;gap:8px}
.note>:last-child{margin-bottom:0}
.note h4{margin:0;font-size:17px}
.note p,.note ul{margin:0}
.note.info{background:var(--milky);border-left:4px solid var(--sea)}
.note.info h4{color:var(--sea-deep)}
.note.ask{background:var(--leaf-tint);border-left:4px solid var(--leaf)}
.note.ask h4{color:var(--ink)}
.note .tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf-deep)}
.note.contact{background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line);grid-template-columns:1fr auto;align-items:center;gap:16px 24px}
.note.contact h4{color:var(--sea-deep)}
.note.contact p{color:var(--ink-soft)}

/* Card grid */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:8px;align-content:start;color:inherit;text-decoration:none;font-size:15px;line-height:1.55}
.card strong{font-size:17px;line-height:1.3;color:var(--ink)}
.card span{color:var(--ink-soft)}
.card img{width:100%;max-width:140px;height:auto;margin-bottom:4px}
a.card:hover{border-color:var(--sea)}
a.card .more{margin-top:4px;font-size:14px}

/* Accordion */
.acc{display:grid;gap:10px}
.acc details{border:1px solid var(--line);border-radius:10px;background:var(--card)}
.acc summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--sea-deep);border-bottom:2px solid var(--sea-deep);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.acc details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.acc summary:hover{color:var(--sea-deep)}
.acc .acc-body{padding:0 20px 18px;font-size:16px}
.acc .acc-body>:last-child{margin-bottom:0}

/* Image with caption */
.fig{margin:0;display:grid;gap:8px}
.fig img{border-radius:10px;max-width:100%;height:auto}
.fig.narrow img{max-width:360px}
.fig figcaption{font-size:14px;color:var(--ink-soft)}
.fig-ph{background:var(--mist);border-radius:10px;aspect-ratio:16/9;display:grid;place-items:center;color:var(--ink-soft);font-size:14px;font-weight:600}

/* Video spot */
.video{position:relative;display:grid;place-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:var(--r);aspect-ratio:16/9;text-decoration:none;text-align:center;padding:24px}
.video .play{width:64px;height:64px;border-radius:50%;background:var(--btn-green);display:grid;place-items:center}
.video .play svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.video strong{font-size:17px;max-width:40ch}
.video span{font-size:14px;opacity:.8}

/* Table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.tbl th{background:var(--milky);color:var(--ink);text-align:left;padding:12px 14px;font-weight:600}
.tbl td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.tbl td ul{margin:0}

/* Downloads (reuses .row from the hub) */
.dl-list{display:grid;gap:10px}

/* Suggested content: needs client sign-off */
.suggest{background:var(--suggest-bg);border:1px solid var(--suggest-line);border-radius:var(--r);padding:20px 24px}
.suggest .flag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--suggest-ink);margin-bottom:8px}
.suggest>:last-child{margin-bottom:0}
.lede.suggest{display:block;max-width:62ch;font-size:17px}

/* Pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.pager a{display:grid;gap:4px;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;text-decoration:none;color:inherit;background:var(--card)}
.pager a:hover{border-color:var(--sea)}
.pager .lbl{font-size:13px;color:var(--ink-soft);font-weight:600}
.pager strong{font-size:18px;color:var(--sea-deep);display:flex;align-items:center;gap:8px}
.pager .next{text-align:right}
.pager .next strong{justify-content:flex-end}
.pager .prev .arw{transform:scaleX(-1)}
.pager .prev:hover .arw{transform:scaleX(-1) translateX(3px)}

/* Sidebar */
.side{display:grid;gap:20px;min-width:0}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.side-card h2{font-size:19px;color:var(--ink);margin-bottom:12px}
.toc{position:sticky;top:20px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:2px solid var(--line)}
.toc a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-soft);text-decoration:none;font-size:15px;line-height:1.35}
.toc a:hover{color:var(--sea-deep)}
.toc a.on{color:var(--sea-deep);border-left-color:var(--sea);font-weight:600}
.side .list .row{padding:12px 14px}
.side-support{background:var(--milky);border-color:var(--milky)}
.side-support p{font-size:15px;color:var(--ink-soft);margin-bottom:14px}
.side-support .btn{width:100%;justify-content:center}
.side-support .mail{display:block;text-align:center;margin-top:12px;font-weight:600;font-size:15px;text-decoration:none}

/* Mobile "On this page" (replaces the sticky list) */
.toc-m{display:none;margin-bottom:28px;border:1px solid var(--line);border-radius:10px}
.toc-m summary{padding:14px 18px;font-weight:600;cursor:pointer}
.toc-m ol{margin:0;padding:0 18px 14px 36px;display:grid;gap:6px}
.toc-m a{text-decoration:none}

@media (max-width:1000px){
  .layout{grid-template-columns:1fr;gap:40px}
  .main{max-width:none}
  .toc{display:none}
  .toc-m{display:block}
  .side{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .layout{padding-block:32px 48px}
  .cards,.cards.c3,.pager,.side{grid-template-columns:1fr}
  .note.contact{grid-template-columns:1fr}
  .pager .next{text-align:left}
  .pager .next strong{justify-content:flex-start}
  .page-head .leaves{opacity:.35}
}

/* Review details (every page) */
.reviewed{margin-top:16px;font-size:14px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.reviewed .ph{background:var(--suggest-bg);color:var(--suggest-ink);border:1px solid var(--suggest-line);border-radius:4px;padding:1px 6px;font-weight:600}
.reviewed .dot{color:var(--line)}
.lede.suggest .flag{margin-bottom:4px}

/* Linked cards use the hub card pattern: heading with a plain arrow on the right */
.card .ch{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card .go{flex:none;height:22px;display:grid;place-items:center;color:var(--sea-deep);transition:transform .15s}
.card .go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.card:hover .go{transform:translateX(3px)}

/* Pager cards carry the section icon, same as the hub tiles and tab bar */
.pager a{grid-template-columns:auto 1fr;align-items:center;gap:16px}
.pager .next{grid-template-columns:1fr auto}
.pager a:not(:has(.pg-icon)){grid-template-columns:1fr}
.pager .pg-txt{display:grid;gap:4px;min-width:0}
.pager .pg-icon{width:48px;height:48px;background:var(--milky)}
.pager .pg-icon svg{width:28px;height:28px;stroke:none;fill:none}
@media (max-width:680px){
  .pager .next{grid-template-columns:auto 1fr}
  .pager .next .pg-icon{order:-1}
}

/* Stacked blocks in the page intro need space between them */
.intro{display:grid;gap:16px}

/* Whole sidebar follows the reader down the page; scrolls itself on short screens */
@media (min-width:1001px){
  .side{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin;padding:2px}
  .toc{position:static}
}

/* Section headings: fill the line before wrapping (no balanced early breaks) */
.sec>h2{text-wrap:pretty;font-size:clamp(24px,2.6vw,32px)}

/* Hub support CTA: grey panel like the site's newsletter band, with leaves */
.alone{position:relative;overflow:hidden;background:var(--mist);box-shadow:none}
.alone>*:not(.leaves){position:relative;z-index:1}
.alone .leaves{position:absolute;right:auto;left:58%;top:-60px;width:280px;opacity:.5;mix-blend-mode:multiply}
@media (max-width:1000px){.alone .leaves{left:auto;right:-50px;top:-60px;width:170px;opacity:.3}}

/* Callouts with a left rule: square the left corners so the rule sits straight */
.note.info,.note.ask{border-radius:0 var(--r) var(--r) 0}

/* Contact callout: flat Milky Way panel, no shadow, smaller phone text */
.note.contact{background:var(--milky);box-shadow:none;border:0}
.note.contact .btn-call{font-size:18px;padding:12px 20px}
.note.contact .btn-call svg{width:20px;height:20px}