/* Job Growth Lab — shared design system
   Structure and rhythm after anthropic.com: ivory ground, hairline rules,
   Styrene-alike sans for structure, Tiempos-alike serif for reading. */

:root{
  color-scheme:light;
  --bg:#F0EEE6;
  --surface:#FAF9F5;
  --card:#FFFFFF;
  --ink:#141413;
  --ink-2:#3D3D3A;
  --ink-3:#6B6A65;
  --clay:#3ABEFF;
  --clay-dk:#0086C7;
  --clay-text:#006DA3;
  --line:rgba(20,20,19,.11);
  --line-2:rgba(20,20,19,.20);
  --ground:#191917;
  --on-ground:#F0EEE6;
  --on-ground-2:rgba(240,238,230,.70);
  --on-ground-3:rgba(240,238,230,.48);
  --line-on-ground:rgba(240,238,230,.16);

  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --gut:clamp(14px,2.6vw,34px);
  --wrap:1200px;
  --step:clamp(64px,8vw,112px);
  --step-sm:clamp(44px,5vw,72px);
  --r:16px;
  --r-s:8px;
  --measure:64ch;
  --split:minmax(0,.78fr) minmax(0,1fr);
  --split-gap:clamp(24px,3vw,52px);
  --slate:#727072;
  --on-slate:#FAF9F5;
  --line-on-slate:rgba(250,249,245,.28);
  --head:22ch;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}
::selection{background:rgba(58,190,255,.30)}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;letter-spacing:-.021em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(38px,5.2vw,64px);line-height:1.06;letter-spacing:-.027em}
h2{font-size:clamp(27px,3vw,38px);line-height:1.14}
h3{font-size:clamp(20px,1.7vw,23px);line-height:1.24;letter-spacing:-.014em}
ul,ol{padding-left:1.15em}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--step)}
.sec-sm{padding-block:var(--step-sm)}

.skip{position:absolute;left:16px;top:-120px;z-index:20;padding:12px 16px;
  background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-s);
  font-family:var(--sans);font-size:14px;font-weight:600}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* ---------- header: sticky, one hairline ---------- */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:10;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px}
.brand{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.03em}
.brand img{height:28px;width:auto}
.brand .on-light{display:block}
.brand .on-dark{display:none}

.header-nav{display:flex;align-items:center;gap:24px;
  font-family:var(--sans);font-size:16px;font-weight:500;color:var(--ink)}
.header-nav a{padding-block:8px}
.header-nav a:hover{color:var(--clay-dk)}
.header-nav a.btn:hover{color:#FFF}
.header-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.header-nav .btn{color:var(--bg)}
@media (max-width:760px){
  .header-nav{gap:14px;font-size:14px}
  .header-inner{min-height:66px}
  .brand img{height:24px}
  .header-nav .hide-sm{display:none}
}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:40px;padding:0 17px;border-radius:var(--r-s);border:1px solid transparent;
  background:var(--ink);color:var(--bg);cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.003em;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn:hover{background:var(--clay-text);color:#FFF}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:transparent;color:var(--clay-dk);border-color:var(--clay)}
.btn.inv{background:var(--on-ground);color:var(--ground)}
.btn.inv:hover{background:var(--clay);color:#1a1a18}
.btn.lg{height:52px;padding:0 26px;font-size:16px}
.btn .ar{font-size:15px;line-height:1}

.text-link{display:inline-flex;align-items:center;gap:12px;padding-block:8px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line-2);transition:color .16s ease,border-color .16s ease}
.text-link:hover{color:var(--clay-dk);border-color:var(--clay)}
.arrow{font-size:18px;line-height:1}
.u{text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:7px;text-decoration-color:currentColor;cursor:pointer;
  transition:color .18s ease,text-decoration-color .18s ease}
a.u:hover,a.u:focus-visible{color:var(--clay-dk);text-decoration-color:var(--clay)}

/* ---------- small caps utility type ---------- */
.eyebrow,.number,.stage,.diagram-label,.detail-meta,.breadcrumb,.context-note,.section-bar,.preview-tag{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.085em;text-transform:uppercase;line-height:1.5;color:var(--ink-3)}
.eyebrow{color:var(--clay-text);margin-bottom:18px}
.lede,.lead{font-family:var(--serif);font-size:clamp(19px,1.6vw,22px);line-height:1.52;
  color:var(--ink-2);max-width:var(--measure)}
.prose-note,.overview-intro{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink-3);max-width:var(--measure)}

/* ---------- page heads ---------- */
.shd{max-width:var(--measure);margin-bottom:48px}
.shd:last-child{margin-bottom:0}
.shd h2{max-width:var(--head);margin-bottom:20px}
.shd p+p{margin-top:16px}
.shd.split{max-width:none;display:grid;grid-template-columns:var(--split);
  gap:var(--split-gap);align-items:start}
.shd.split>div>p+p{margin-top:16px}
@media (max-width:900px){.shd.split{grid-template-columns:minmax(0,1fr);gap:22px}}

.hero{padding-block:var(--step) var(--step-sm)}
.hero h1{max-width:18ch}
.hero .lede{margin-top:26px}
.hero .text-link{margin-top:28px}

/* hero: display headline needs the wide column, so it keeps its own geometry */
.home-hero{padding-top:120px;padding-bottom:56px}
.home-hero .hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.78fr);
  gap:clamp(32px,4vw,64px);align-items:start}
.home-hero h1{max-width:none;font-size:clamp(34px,5.2vw,61px);line-height:1.10;
  font-weight:700;letter-spacing:-0.022em}
.home-hero .hd > div:last-child{display:flex;flex-direction:column;gap:20px;padding-top:56px}
.home-hero .cta-row{display:flex;gap:10px;margin-top:40px}
.home-hero .cta-row .btn.lg{height:52px;padding:0 24px;font-size:16px}
.home-hero .cta-row .btn.lg .ar{font-size:17px}
.home-hero .lead{font-family:var(--serif);font-size:clamp(22px,1.9vw,28px);
  line-height:1.38;font-weight:500;letter-spacing:0;color:var(--ink);max-width:none}
@media (max-width:1000px){
  .home-hero{padding-top:76px;padding-bottom:44px}
  .home-hero .hd{grid-template-columns:minmax(0,1fr);gap:28px}
  .home-hero .hd > div:last-child{padding-top:0}
}
@media (max-width:760px){
  .home-hero{padding-top:64px;padding-bottom:36px}
  .home-hero .cta-row .btn.lg{height:46px;padding:0 18px;font-size:15px}
}

.context-hero{padding-block:var(--step-sm);border-bottom:1px solid var(--line)}
.context-hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:end}
.context-hero h1{font-size:clamp(34px,4.2vw,52px)}
.context-note{margin-top:20px}
@media (max-width:900px){.context-hero .wrap{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}}

.section-intro{display:grid;grid-template-columns:var(--split);
  gap:var(--split-gap);margin-block:var(--step) 40px;align-items:end}
.section-intro h2{max-width:var(--head)}
@media (max-width:900px){.section-intro{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}}

/* ---------- hairline index rows (the research/policy index) ---------- */
.section-bar{display:flex;justify-content:space-between;gap:16px;align-items:center;
  border-bottom:1px solid var(--line-2);padding-bottom:16px}
.component-row{display:grid;grid-template-columns:52px minmax(0,1.15fr) minmax(0,1fr) 22px;
  gap:clamp(18px,2.4vw,36px);align-items:center;
  border-bottom:1px solid var(--line);padding-block:30px;
  transition:background .16s ease}
.component-row:hover{background:color-mix(in srgb,var(--card) 60%,transparent)}
.component-row:hover .row-title{color:var(--clay-dk)}
.component-row .number{align-self:start;padding-top:6px}
.row-title{font-family:var(--sans);font-size:clamp(20px,2vw,26px);font-weight:600;
  letter-spacing:-.019em;line-height:1.2;margin-bottom:10px;transition:color .16s ease}
.row-copy{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:46ch}
.stage{display:block;margin-top:16px}
.component-row>.arrow{color:var(--ink-3);justify-self:end}
.component-row:hover>.arrow{color:var(--clay-dk)}

.mini-diagram{display:flex;gap:7px;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;min-height:118px;
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-2)}
.mini-diagram span:not(.mini-arrow){padding:9px 11px;border:1px solid var(--line-2);
  border-radius:var(--r-s);background:var(--bg);text-align:center;line-height:1.35}
.mini-diagram .mini-arrow{color:var(--ink-3)}
.mini-diagram .filled{background:var(--clay);border-color:var(--clay)!important;color:#1a1a18}

.journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;
  margin:0 0 34px;padding:0;border-block:1px solid var(--line-2)}
.journey li{padding:22px 24px;border-right:1px solid var(--line)}
.journey li:first-child{padding-left:0}
.journey li:last-child{border-right:0}
.journey b{display:block;font-family:var(--sans);font-size:17px;font-weight:600;margin:6px 0 4px}
.journey small{display:block;font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink-3)}
@media (max-width:820px){
  .journey{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey li{padding:18px!important;border-right:1px solid var(--line)}
  .journey li:nth-child(2n){border-right:0}
  .journey li:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

.bottom-note{display:grid;grid-template-columns:var(--split);
  gap:var(--split-gap);padding-block:var(--step-sm)}
.bottom-note h2{font-size:clamp(25px,2.5vw,32px)}
.bottom-note p{font-family:var(--serif);color:var(--ink-2);margin-bottom:18px;max-width:46ch}
@media (max-width:820px){.bottom-note{grid-template-columns:minmax(0,1fr);gap:20px}}

/* ---------- numbered process (homepage) ---------- */
.step{display:grid;grid-template-columns:var(--split);
  gap:var(--split-gap);align-items:start;
  border-top:1px solid var(--line);padding-top:30px;margin-top:30px}
.step:first-of-type{border-top:1px solid var(--line-2)}
.step h3{margin-top:12px;max-width:20ch}
.step .body{max-width:var(--measure)}
.step .body p+p{margin-top:14px}
@media (max-width:820px){.step{grid-template-columns:minmax(0,1fr);gap:14px}.step h3{margin-top:8px}}

.row{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.7fr);
  gap:clamp(20px,3.5vw,48px);align-items:baseline;
  border-top:1px solid var(--line-on-ground);padding-block:28px}
@media (max-width:820px){
  .row{grid-template-columns:36px minmax(0,1fr);gap:16px}
  .row p{grid-column:2}
}

/* ---------- dark band ---------- */
.band-dk{background:var(--ground);color:var(--on-ground)}
.band-dk h2,.band-dk h3{color:var(--on-ground)}
.band-dk .eyebrow{color:var(--clay)}
.band-dk .lead,.band-dk .lede{color:var(--on-ground-2)}
.band-dk .prose,.band-dk p{color:var(--on-ground-2)}
.band-dk .number,.band-dk .num{color:var(--on-ground-3)}

.panel{background:var(--ground);color:var(--on-ground);border-radius:var(--r);
  padding:clamp(28px,4vw,60px)}
.panel h2,.panel h3{color:var(--on-ground)}

/* ---------- contact form ---------- */
.contact-grid{display:grid;grid-template-columns:var(--split);
  gap:var(--split-gap);align-items:start}
.form-card{background:var(--bg);border-radius:var(--r);padding:clamp(24px,3vw,34px);color:var(--ink)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.085em;
  text-transform:uppercase;color:var(--ink-3)}
.field input{height:42px;padding:0 13px;min-width:0;
  border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--card);color:var(--ink);font-family:var(--sans);font-size:15px}
.form-stack{display:flex;flex-direction:column;gap:15px;margin-top:20px}
.form-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-note{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink-3)}
@media (max-width:820px){.contact-grid{grid-template-columns:minmax(0,1fr)}.form-pair{grid-template-columns:minmax(0,1fr)}}

/* ---------- article (explanation pages) ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-top:26px}
.breadcrumb a:hover{color:var(--clay-dk)}
.detail-hero{padding-block:36px 44px;border-bottom:1px solid var(--line)}
.detail-hero h1{font-size:clamp(34px,4.4vw,56px);max-width:16ch}
.detail-hero .lede{margin-top:22px;max-width:52ch}
.detail-meta{margin-top:24px}

.article-layout{display:grid;grid-template-columns:216px minmax(0,var(--measure));
  gap:clamp(32px,5vw,76px);padding-top:48px;align-items:start;
  max-width:1004px;margin-inline:auto}
.contents{position:sticky;top:calc(86px + env(safe-area-inset-top,0px))}
.contents h2{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.085em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.contents ol{list-style:none;padding:0;margin:0}
.contents li{border-top:1px solid var(--line)}
.contents li:first-child{border-top:0}
.contents a{display:block;font-family:var(--sans);font-size:14px;line-height:1.45;
  color:var(--ink-2);padding-block:9px}
.contents a:hover{color:var(--clay-dk)}
.contents .back-link{display:inline-block;margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line-2);font-family:var(--sans);font-size:14px;font-weight:600}

.prose{min-width:0}
.prose section{scroll-margin-top:96px;margin-bottom:46px}
.prose h2{font-size:clamp(23px,2.2vw,29px);margin-bottom:18px}
.prose p{font-family:var(--serif);font-size:19px;line-height:1.68;color:var(--ink-2);margin-bottom:18px}
.prose p a,.figcaption a{text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--line-2)}
.prose p a:hover{color:var(--clay-dk);text-decoration-color:var(--clay)}
.prose .source-note{font-family:var(--sans);font-size:14.5px;line-height:1.65;color:var(--ink-3);
  border-left:2px solid var(--clay);padding-left:16px;margin-top:26px}

/* ---------- figures inside articles ---------- */
.figure{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px);margin-block:26px}
.figure figcaption{font-family:var(--sans);font-size:13.5px;line-height:1.6;
  color:var(--ink-3);margin-top:18px}
.diagram-label{color:var(--clay-text);margin-bottom:16px;display:block}

.flow{list-style:none;margin:0;padding:0;counter-reset:steps}
.flow li{position:relative;padding:16px 4px 16px 46px;border-top:1px solid var(--line);
  counter-increment:steps;font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-2)}
.flow li::before{content:counter(steps,decimal-leading-zero);position:absolute;left:4px;top:19px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.flow strong{display:block;font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--ink)}
.flow span{color:var(--ink-3)}

.paired{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:820px){.paired{grid-template-columns:minmax(0,1fr)}}
.sample-panel{background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:18px;min-width:0}
.sample-panel strong{display:block;font-family:var(--sans);font-size:19px;font-weight:600;
  letter-spacing:-.017em;line-height:1.25;margin:10px 0}
.sample-panel p{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink-2);margin:10px 0}
.sample-field{border-bottom:1px solid var(--line);padding-block:11px;
  font-family:var(--sans);font-size:14px;line-height:1.45}
.sample-field small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.sample-action{background:var(--ink);color:var(--bg);border-radius:var(--r-s);
  padding:10px;margin-top:16px;text-align:center;
  font-family:var(--sans);font-size:13px;font-weight:600}

.chat{display:grid;gap:11px}
.bubble{max-width:90%;padding:14px 17px;border-radius:var(--r-s);
  background:var(--bg);border:1px solid var(--line-2);
  font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-2)}
.bubble small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.bubble.reply{justify-self:end;background:color-mix(in srgb,var(--clay) 16%,var(--bg));
  border-color:color-mix(in srgb,var(--clay) 34%,var(--line-2))}
.handover{border-top:1px solid var(--line-2);padding-top:16px;margin-top:18px;
  font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--ink-2)}

.checklist{margin:0}
.checklist div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:14px;
  padding-block:12px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:14.5px;line-height:1.55}
.checklist dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.checklist dd{margin:0;color:var(--ink-2)}
@media (max-width:820px){.checklist div{grid-template-columns:minmax(0,1fr);gap:4px}}

.decision{background:color-mix(in srgb,var(--clay) 13%,var(--bg));
  border:1px solid color-mix(in srgb,var(--clay) 30%,transparent);border-radius:var(--r-s);
  padding:16px;margin-top:16px;font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--ink-2)}

.figure table{width:100%;border-collapse:collapse;table-layout:fixed;
  font-family:var(--sans);font-size:13.5px;line-height:1.5}
.figure caption{text-align:left;font-family:var(--sans);font-size:14px;font-weight:600;margin-bottom:16px}
.figure th,.figure td{padding:11px 8px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top;overflow-wrap:anywhere;color:var(--ink-2)}
.figure thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.figure th:first-child{width:28%}
.figure th:nth-child(2){width:22%}

.related{border-top:1px solid var(--line-2);padding-top:30px;margin-block:44px 56px}
.related h2{font-size:clamp(21px,2vw,26px)}
.related-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-block:20px}
.related-links a{font-family:var(--sans);font-size:14.5px;font-weight:500;padding-block:8px;
  border-bottom:1px solid var(--line-2)}
.related-links a:hover{color:var(--clay-dk);border-color:var(--clay)}

@media (max-width:980px){
  .article-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:30px}
  .contents{position:static;border-bottom:1px solid var(--line);padding-bottom:20px}
  .contents ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
  .contents li{border-top:1px solid var(--line)}
  .contents li:nth-child(2){border-top:0}
  .contents .back-link{display:none}
  .component-row{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 20px}
}
@media (max-width:760px){
  .component-row{grid-template-columns:26px minmax(0,1fr) 20px;gap:12px;padding-block:24px}
  .component-row .mini-diagram{grid-column:2;grid-row:2;min-height:0;justify-content:flex-start;padding:14px}
  .component-row>.arrow{grid-column:3;grid-row:1}
  .section-bar{align-items:flex-start;flex-direction:column;gap:6px}
  .prose p{font-size:17.5px}
}
@media (max-width:440px){
  .mini-diagram{flex-direction:column;align-items:stretch;gap:5px}
  .mini-diagram .mini-arrow{align-self:center;transform:rotate(90deg);line-height:1}
}

/* ---------- contact page ---------- */
.contact{max-width:760px;padding-block:var(--step)}
.contact h1{font-size:clamp(34px,4.4vw,52px)}
.contact .lede{margin-block:22px}
.contact-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,28px);margin-block:26px;
  font-family:var(--serif);font-size:17px;line-height:1.62;color:var(--ink-2)}
.contact-panel p+p{margin-top:14px}
.contact-panel strong{color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--ground);color:var(--on-ground);
  padding-block:clamp(48px,6vw,72px) 40px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,64px)}
.footer-grid img{height:19px;width:auto}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col .eyebrow{color:var(--on-ground-3);margin-bottom:4px}
.footer-col a{font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--on-ground-2)}
.footer-col a:hover{color:var(--clay)}
.footer-blurb{font-family:var(--serif);font-size:16px;line-height:1.55;
  color:var(--on-ground-2);max-width:32ch}
.footer-base{margin-top:44px;padding-top:20px;border-top:1px solid var(--line-on-ground);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-family:var(--sans);font-size:13px;color:var(--on-ground-3)}
.footer-base a:hover{color:var(--clay)}
@media (max-width:820px){.footer-grid{grid-template-columns:minmax(0,1fr);gap:30px}}

.site-footer .footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:12px 24px;align-items:center;font-family:var(--sans);font-size:13px;color:var(--on-ground-3)}
.site-footer .footer-inner a:hover{color:var(--clay)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}
@media print{
  .site-header,.site-footer,.contents,.related,.skip{display:none}
  body{background:#fff;color:#111}
  .article-layout{display:block}
  .figure{break-inside:avoid}
}


/* ---------- three-up item grid (chrome-free: whitespace and type only) ---------- */
.grid{display:grid;gap:32px 40px;border-top:1px solid var(--line-2);padding-top:32px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.item{display:flex;flex-direction:column;gap:10px}
.item h3{max-width:20ch}
.item p{max-width:42ch}
@media (max-width:820px){
  .grid-3,.grid-2{grid-template-columns:minmax(0,1fr)}
  .grid{gap:0}
  .grid .item{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
  .grid .item:first-child{border-top:none;padding-top:0;margin-top:0}
}

/* ---------- quote-diary panel under the hero ---------- */
.dhead{display:flex;align-items:baseline;gap:18px;margin-bottom:26px}
.dhead h3{color:var(--on-ground);font-size:22px}
.dhead p{font-family:var(--serif);font-size:16px;color:var(--on-ground-3)}
.dhead svg{margin-left:auto;flex-shrink:0;align-self:center}
.kpi{display:flex;flex-wrap:wrap;gap:20px 52px;margin:0 0 34px}
.kpi > div{display:flex;flex-direction:column;gap:4px}
.kpi .kn{font-family:var(--sans);font-size:32px;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--on-ground)}
.kpi .kl{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--on-ground-3)}
.dayhd{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.085em;
  text-transform:uppercase;color:var(--on-ground-3);
  padding:26px 0 6px;border-top:1px solid var(--line-on-ground)}
.dayhd.first{border-top:none;padding-top:0}
.diary-row{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);gap:32px;
  align-items:baseline;padding:16px 0;border-top:1px solid rgba(240,238,230,.07)}
.diary-row .d{font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.02em;color:var(--on-ground-3)}
.diary-row .a{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--on-ground)}
.diary-row .n{font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--on-ground-3)}
.diary-row.is-open .a,.diary-row.is-open .n{color:rgba(240,238,230,.34);font-weight:500}
@media (max-width:760px){
  .kpi{gap:16px 32px}.kpi .kn{font-size:26px}
  .dayhd{padding-top:20px}
  .dhead{display:block}
  .dhead svg{display:none}
  .dhead p{margin-top:8px}
  .diary-row{grid-template-columns:minmax(0,1fr);gap:3px;padding:14px 0}
  .diary-row .d{order:-1}
}

/* .footer-col is a flex column: the default align-items:stretch overrules
   width:auto and smears the wordmark across the whole column. */
.footer-col img{align-self:flex-start;width:auto;max-width:180px}

/* ---------- problem-section collage ---------- */
.problem-figure{margin:40px 0 0}
.hero-figure{margin:0 auto;max-width:900px}
.hero-figure-wrap{padding-bottom:var(--step-sm)}
.hero-figure picture{display:block}
.hero-figure img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain;border-radius:12px;display:block}
.problem-figure img{width:100%;height:auto;border-radius:var(--r)}

/* ---------- process cards (how it works) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{display:flex;flex-direction:column;
  background:var(--slate);color:var(--on-slate);
  border-radius:var(--r);padding:clamp(22px,2.4vw,32px)}
.card h3{margin-bottom:12px;max-width:18ch;color:var(--on-slate)}
.card p{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--on-slate);max-width:34ch}
.card p+p{margin-top:12px}
.card-meta{margin:auto 0 0;padding-top:28px}
.card-meta>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-block:11px;border-bottom:1px solid var(--line-on-slate)}
.card-meta>div:first-child{border-top:1px solid var(--line-on-slate)}
.card-meta dt{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.085em;
  text-transform:uppercase;color:var(--on-slate)}
.card-meta dd{margin:0;font-family:var(--serif);font-size:16px;color:var(--on-slate)}
@media (max-width:900px){.card-grid{grid-template-columns:minmax(0,1fr)}.card p{max-width:var(--measure)}}
.how-more{margin-top:28px}

/* ---------- FAQ accordion ---------- */
.faq-list{border-top:1px solid var(--line-2)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:52px minmax(0,1fr) 22px;
  gap:clamp(16px,2.4vw,32px);align-items:baseline;
  padding-block:24px;cursor:pointer;list-style:none;
  transition:color .16s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .faq-q{color:var(--clay-dk)}
.faq summary:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:2px}
.faq .number{align-self:center}
.faq-q{font-family:var(--sans);font-size:clamp(17px,1.5vw,20px);font-weight:600;
  letter-spacing:-.014em;line-height:1.3;transition:color .16s ease}
.faq-mark{position:relative;width:14px;height:14px;align-self:center;justify-self:end}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:var(--ink-3);
  transition:transform .2s ease,opacity .2s ease}
.faq-mark::before{top:6px;left:0;width:14px;height:1.5px}
.faq-mark::after{left:6px;top:0;width:1.5px;height:14px}
.faq[open] .faq-mark::after{transform:rotate(90deg);opacity:0}
.faq[open] .faq-q{color:var(--ink)}
.faq-a{padding:0 calc(22px + clamp(16px,2.4vw,32px)) 26px calc(52px + clamp(16px,2.4vw,32px))}
.faq-a p{font-family:var(--serif);font-size:17px;line-height:1.62;color:var(--ink-2);max-width:56ch}
.faq-a p+p{margin-top:14px}
@media (max-width:760px){
  .faq summary{grid-template-columns:34px minmax(0,1fr) 18px;gap:12px;padding-block:20px}
  .faq-a{padding-left:46px;padding-right:0}
}

/* ---------- micro-interactions ---------- */
/* arrows lean into the direction they point */
.btn .ar,.text-link .arrow,.component-row>.arrow{transition:transform .22s cubic-bezier(.2,.6,.3,1)}
.btn:hover .ar,.text-link:hover .arrow{transform:translateX(3px)}
.component-row:hover>.arrow{transform:translate(2px,-2px)}
.btn{transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.btn:active{transform:translateY(1px)}

/* cards settle up a touch on hover */
.card{transition:transform .22s cubic-bezier(.2,.6,.3,1),background-color .22s ease}
@media (hover:hover){
  .card:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--slate) 88%,#fff)}
}

/* diary rows warm slightly as you read down them */
.diary-row{transition:background-color .18s ease}
.diary-row:hover{background:rgba(240,238,230,.045)}

/* faq: answer eases open where the browser can size it */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq::details-content{height:0;overflow:hidden;opacity:0;
    transition:height .28s cubic-bezier(.2,.6,.3,1),opacity .2s ease,content-visibility .28s allow-discrete;
    content-visibility:hidden}
  .faq[open]::details-content{height:auto;opacity:1;content-visibility:visible}
}
.faq-mark::before,.faq-mark::after{transition:transform .22s cubic-bezier(.2,.6,.3,1),opacity .18s ease,background-color .16s ease}
.faq summary:hover .faq-mark::before,.faq summary:hover .faq-mark::after{background:var(--clay-dk)}

/* sections rise in once, only where scroll-driven animation is supported */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
    .home .card-grid,.home .problem-figure,.home .shd.split,
    .home .faq-list,.home .panel,.home .related-links{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%}
  }
}