/* Shared styles for every page, light theme only. The look follows the investor deck: Roboto (self-hosted, Latin subset),
   the deck's browns and tans, white and tan sections mixed, numerals instead of icons. */

@font-face{font-family:"Roboto";font-weight:300;font-style:normal;font-display:swap;src:url("/fonts/roboto-light.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/roboto-regular.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-weight:500;font-style:normal;font-display:swap;src:url("/fonts/roboto-medium.woff2") format("woff2");}

:root{
  --paper:#FFFFFF; --tan:#F7F1E9; --surface:#FFFFFF; --ink:#2B2119; --ink-soft:#7D6C5C; --taupe:#A89886;
  --line:#EBE1D3; --line-strong:#D9C9B4; --accent:#945523; --accent-ink:#945523; --accent-tint:#EFE5D8;
  --on-accent:#FFFFFF; --on-accent-soft:#EFE5D8; --gain:#4E6B3A; --loss:#A6432C; --close:#945523; --on-close:#FFFFFF; --on-close-soft:#EFE5D8;
  --font:"Roboto",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:72rem; --measure:40rem;
}
:root{color-scheme:light;}
html{font-size:100%;}
@media (min-width:1600px){html{font-size:112.5%;}}
@media (min-width:2200px){html{font-size:125%;}}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:300;
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);}
a{color:inherit}
b,strong{font-weight:500;}
h1,h2,h3,h4{font-weight:400;text-wrap:balance;letter-spacing:-.01em;line-height:1.15;margin:0;}
.kicker{font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1rem;}
.lede{color:var(--ink-soft);max-width:var(--measure);}
.muted{color:var(--ink-soft);}

/* header: large on desktop, medium on small laptops and tablets, full-width rows on phones */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;min-height:6.25rem;padding-top:.9rem;padding-bottom:.9rem;}
/* The logo's height is set in em, so the name and the logo keep one ratio at every size. */
.brand{display:flex;align-items:center;gap:.35em;text-decoration:none;color:var(--accent-ink);
  font-weight:400;font-size:2.6rem;letter-spacing:.16em;line-height:1;}
.brand img{display:block;height:1.25em;width:auto;}
/* Two blocks after the name: the links (only Blog for now) and the button. On desktop the links sit
   centred in the space between the name and the button; the blocks wrap onto separate lines when
   the links grow too long to fit. */
.actions{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.9rem 2.2rem;}
.bar nav{margin:0;} /* links sit beside the button on the right; with one link, centering left it adrift */
.navlinks{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 2.2rem;}
.nav-link{font-size:1.35rem;font-weight:400;white-space:nowrap;text-decoration:none;color:var(--ink-soft);
  padding:.35rem 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;}
.nav-link:hover,.nav-link.active{color:var(--accent-ink);border-color:var(--accent);}
.nav-cta{font-size:1.08rem;font-weight:500;text-decoration:none;white-space:nowrap;background:var(--accent);
  color:var(--on-accent);padding:.85rem 1.4rem;border-radius:4px;transition:filter .15s;}
.nav-cta:hover{filter:brightness(1.08);}
@media (max-width:1180px){
  .bar{min-height:5rem;gap:.8rem 1rem;}
  .brand{font-size:1.9rem;}
  .actions{column-gap:1.6rem;}
  .nav-link{font-size:1.2rem;}
  .nav-cta{font-size:.98rem;padding:.65rem 1.1rem;}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--on-accent);
  text-decoration:none;font-family:inherit;font-size:1.05rem;font-weight:500;line-height:1.2;border:0;cursor:pointer;
  padding:.95rem 1.5rem;border-radius:4px;transition:transform .15s ease,filter .15s ease;}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.textlink{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px;font-weight:400;}
.textlink:hover{border-color:var(--accent);}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}}

/* sections: white by default, tan where marked, a brown closing band */
.sec{padding:clamp(3.4rem,7vw,5.5rem) 0;}
.sec.tan{background:var(--tan);}
.sec.close{background:var(--close);color:var(--on-close);}
.head{max-width:46rem;margin-bottom:2.6rem;}
.head.wide{max-width:none;} /* heading runs the full width of the elements beneath it */
.head h2{font-size:clamp(1.75rem,3.6vw,2.5rem);}
.head p{color:var(--ink-soft);margin:1rem 0 0;font-size:1.08rem;}

/* hero */
.hero{padding-top:clamp(3.4rem,8vw,6.5rem);padding-bottom:clamp(3rem,6vw,4.5rem);}
.hero h1{font-size:clamp(2.6rem,6.2vw,4.4rem);max-width:15ch;font-weight:400;}
.hero .proof{border-top:0;padding-top:0;margin-top:1.8rem;font-size:.92rem;}
.hero .lede{font-size:clamp(1.12rem,2.2vw,1.35rem);margin-top:1.5rem;}
.hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:2.3rem;}
.proof{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);max-width:46rem;color:var(--ink-soft);font-size:1rem;}

/* the gap strip */
.gap{display:grid;grid-template-columns:1fr auto 1.3fr auto 1fr;align-items:stretch;gap:.9rem;margin-bottom:2.4rem;}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1.3rem 1.3rem 1.4rem;}
.stage .kicker{color:var(--taupe);margin-bottom:.55rem;}
.stage h3{font-size:1.5rem;}
.stage p{margin:.4rem 0 0;color:var(--ink-soft);font-size:.95rem;}
/* The outer stages are what others already do: outlined, not filled, so they read as outside Clearwood
   and apart from the solid failure cards below. The filled middle stage is the Clearwood layer. */
.stage.other{background:transparent;border:1px dashed var(--line-strong);}
.stage.other h3{font-weight:400;color:var(--ink-soft);}
.stage .who{margin:1rem 0 0;padding-top:.7rem;border-top:1px solid var(--line);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);}
.stage.hot .who{border-top-color:var(--on-accent-soft);color:var(--on-accent);}
.stage.hot{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.stage.hot .kicker{color:var(--on-accent-soft);}
.stage.hot h3{font-weight:500;}
.stage.hot p{color:var(--on-accent-soft);}
.arrow{align-self:center;color:var(--accent-ink);font-size:1.6rem;font-weight:300;}

/* a smaller heading inside a section, over a group of cards */
.subhead{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:0 0 1.2rem;padding-top:2rem;border-top:1px solid var(--line-strong);}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1.5rem 1.4rem;}
.tan .card{border-color:transparent;}
.card h3{font-size:1.15rem;font-weight:500;margin-bottom:.5rem;}
.card p{margin:0;color:var(--ink-soft);font-size:.97rem;}

/* the three-layer stack */
.stack{display:grid;gap:.75rem;}
.layer{display:grid;grid-template-columns:minmax(13rem,18rem) 1fr;gap:1.5rem;align-items:center;
  background:var(--tan);border-radius:6px;padding:1.35rem 1.6rem;}
.layer h3{font-size:1.3rem;}
.layer .sub{margin:.25rem 0 0;color:var(--ink-soft);font-size:.92rem;}
.layer .what{margin:0;color:var(--ink);font-size:1rem;}
.layer .what span{color:var(--ink-soft);display:block;font-size:.92rem;margin-top:.2rem;}
.layer.cw{background:var(--accent);color:var(--on-accent);}
.layer.cw h3{font-weight:500;}
.layer.cw .sub,.layer.cw .what span{color:var(--on-accent-soft);}
.layer.cw .what{color:var(--on-accent);font-weight:400;}
.after-stack{max-width:46rem;margin:2rem 0 0;color:var(--ink-soft);}

/* hero: text beside the illustrative value-and-risk card */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(23rem,29rem);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.hero-text{--h1:clamp(2.5rem,4.8vw,4rem);}
.hero-grid .hero-text h1{font-size:var(--h1);}
/* The eyebrow is sized to run the width of the headline's first line ("Prove your AI risk"):
   0.25 of the headline size, measured for Roboto at these letter spacings. Re-measure if either text changes. */
.hero-text .kicker{font-size:calc(var(--h1) * .25);letter-spacing:.14em;white-space:nowrap;margin-bottom:1.1rem;}
.hcard{background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:1.3rem 1.4rem 1.1rem;
  box-shadow:0 1px 2px rgba(43,33,25,.05),0 14px 40px rgba(43,33,25,.08);}
.hc-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.hc-top .kicker{margin:0;color:var(--ink);}
.tag{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);
  background:var(--accent-tint);border:1px solid var(--line-strong);padding:.25rem .55rem;border-radius:3px;}
.hc-when{margin:.35rem 0 0;font-size:.85rem;color:var(--taupe);}
.hc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.hc-kpis.two{grid-template-columns:repeat(2,1fr);}
.hc-kpis .v{font-size:1.55rem;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;}
.hc-kpis .v.gain{color:var(--gain);}
.hc-kpis .v.loss{color:var(--loss);}
.hc-kpis .net .v{font-weight:500;color:var(--ink);}
.hc-kpis .l{margin-top:.4rem;font-size:.78rem;line-height:1.35;color:var(--ink-soft);}
.hc-chart{padding-top:1rem;padding-bottom:.2rem;}
.hc-risk{margin-top:1rem;padding:1rem 0 .7rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:baseline;}
.hc-risk .st-h{grid-column:1 / -1;}
/* One grid for both rows, so the two figures share a right edge. */
.rrow{display:contents;}
.rrow > span{grid-column:1;padding-top:.6rem;font-size:.88rem;color:var(--ink);line-height:1.35;}
.rrow b{grid-column:2;grid-row:span 2;align-self:center;justify-self:end;text-align:right;padding-top:.6rem;
  font-size:2.3rem;line-height:1;font-weight:500;color:var(--loss);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
/* An invisible % after 12 lines its last digit up with the 5 in 2.5%. */
.rrow b .ghost{visibility:hidden;}
.rrow em{grid-column:1;padding-bottom:.6rem;font-style:normal;font-size:.78rem;color:var(--taupe);}
.rrow .ok{font-weight:500;color:var(--gain);background:color-mix(in srgb,var(--gain) 12%,transparent);padding:.05rem .4rem;border-radius:3px;margin-left:.2rem;}
.hc-foot{margin:.8rem 0 0;padding-top:.8rem;border-top:1px solid var(--line);font-size:.78rem;line-height:1.45;color:var(--ink-soft);}

/* small chart pieces, shared */
.st-h{font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);margin:0 0 1.4rem;}
.bars{display:flex;align-items:flex-end;gap:.5rem;height:4.6rem;border-bottom:1px solid var(--line-strong);}
.wbar{flex:1;position:relative;background:var(--line-strong);border-radius:2px 2px 0 0;}
.wbar.now{background:var(--accent);}
.wbar.dip{background:var(--loss);}
.wbar .val{position:absolute;bottom:100%;left:-.6rem;right:-.6rem;text-align:center;font-size:.72rem;
  color:var(--ink-soft);padding-bottom:.2rem;font-variant-numeric:tabular-nums;white-space:nowrap;}
.wbar.now .val{color:var(--ink);font-weight:500;}
.wks{display:flex;gap:.5rem;margin-top:.35rem;}
.wks span{flex:1;text-align:center;font-size:.66rem;color:var(--taupe);white-space:nowrap;}
.dipnote{margin:.7rem 0 0;font-size:.8rem;color:var(--ink-soft);}
.dipnote i{display:inline-block;width:.6rem;height:.6rem;border-radius:2px;background:var(--loss);margin-right:.45rem;}

/* behind every number */
.behind{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.panel{background:var(--surface);border-radius:8px;padding:1.4rem 1.5rem;}
.drivers{list-style:none;margin:0;padding:0;}
.drivers li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 0;border-top:1px solid var(--line);}
.drivers li:first-child{border-top:0;padding-top:0;}
.drivers b{display:block;font-weight:400;color:var(--ink);}
.drivers span{display:block;font-size:.85rem;color:var(--taupe);margin-top:.15rem;}
.drivers em{font-style:normal;color:var(--loss);font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap;}
.drivers.near em{color:var(--ink-soft);}
.mini4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.2rem;}
.mini4 div{font-size:.93rem;color:var(--ink-soft);border-top:1px solid var(--line-strong);padding-top:.9rem;}
.mini4 b{color:var(--ink);font-weight:500;}

/* numbered steps */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.step{border-top:2px solid var(--accent);padding-top:1rem;}
.num{font-size:2.2rem;font-weight:300;color:var(--accent-ink);line-height:1;}
.step h3{font-size:1.15rem;font-weight:500;margin:.7rem 0 .35rem;}
.step p{margin:0;color:var(--ink-soft);font-size:.95rem;}
.note{margin:2rem 0 0;color:var(--ink-soft);}

/* the path */
.path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.9rem;align-items:stretch;}
.pstep{background:var(--tan);border-radius:6px;padding:1.5rem 1.4rem;}
.pstep .spec{font-size:.82rem;letter-spacing:.04em;color:var(--taupe);margin:.35rem 0 .7rem;font-weight:400;}
.pstep h3{font-size:1.3rem;}
.pstep p{margin:0;color:var(--ink-soft);font-size:.95rem;}
.pstep .textlink{display:inline-block;margin-top:.9rem;}
.pstep.first{background:var(--accent);color:var(--on-accent);}
.pstep.first h3{font-weight:500;}
.pstep.first .spec,.pstep.first p,.pstep.first .num{color:var(--on-accent-soft);}
.pstep.first .textlink{color:var(--on-accent);border-color:var(--on-accent-soft);}

/* three doors */
.door{display:block;text-decoration:none;background:var(--tan);border-radius:6px;padding:1.5rem 1.4rem;
  border:1px solid transparent;transition:border-color .15s;}
.door:hover{border-color:var(--accent);}
.door h3{font-size:1.2rem;}
.door p{margin:.45rem 0 1rem;color:var(--ink-soft);font-size:.95rem;}
.door .go{color:var(--accent-ink);font-weight:500;font-size:.95rem;}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.person img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;margin-bottom:1rem;}
.person h3{font-size:1.3rem;}
.person .role{font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:.35rem 0 .6rem;}
.person p{margin:0;color:var(--ink-soft);font-size:.95rem;}
.charter{margin:2.4rem 0 0;color:var(--ink-soft);}

/* closing band */
.close h2{font-size:clamp(1.9rem,4vw,2.7rem);max-width:20ch;}
.close .lede{color:var(--on-close-soft);margin-top:1rem;font-size:1.1rem;}
.close .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:2rem;}
.close .btn{background:var(--on-close);color:var(--close);}
.close .mail-note{color:var(--on-close);}
.close a.mail{color:var(--on-close);text-decoration:none;border-bottom:1px solid var(--on-close-soft);}

/* standalone pages: start, auditors, privacy, thank you */
.page{max-width:46rem;padding-top:clamp(2.8rem,6vw,4.5rem);padding-bottom:clamp(3.2rem,7vw,5.5rem);}
.page h1{font-size:clamp(2.1rem,4.8vw,3.2rem);}
.page .lede{margin:1.4rem 0 0;font-size:1.12rem;}
.page h2{font-size:clamp(1.3rem,2.6vw,1.6rem);margin:2.8rem 0 1rem;}
.page p{margin:0 0 1.2rem;}
.page a:not(.btn):not(.backlink){color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line-strong);}
.page a:not(.btn):not(.backlink):hover{border-color:var(--accent);}
.label{display:inline-block;font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-tint);padding:.25rem .55rem;border-radius:3px;margin-bottom:1rem;}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;}
.ticks li{background:var(--tan);border-radius:6px;padding:.95rem 1.1rem;color:var(--ink-soft);}
.ticks li b{color:var(--ink);}
.runs{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:run;}
.runs li{display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;color:var(--ink-soft);}
.runs li::before{counter-increment:run;content:counter(run,decimal-leading-zero);font-size:1.4rem;font-weight:300;color:var(--accent-ink);line-height:1.2;}
.runs li b{color:var(--ink);}
.refs{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;}
.refs li{border-left:2px solid var(--accent);padding:.1rem 0 .1rem 1rem;color:var(--ink-soft);}

/* forms */
.form{margin-top:1.4rem;max-width:34rem;}
.field{display:grid;gap:.4rem;margin-bottom:1.3rem;}
.field label{font-size:.85rem;font-weight:400;color:var(--ink-soft);}
.field input,.field textarea{font-family:inherit;font-weight:300;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:4px;padding:.7rem .8rem;width:100%;}
.field textarea{min-height:8rem;resize:vertical;line-height:1.5;}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cf-turnstile{margin:0 0 1.3rem;}
.formnote{font-size:.9rem;color:var(--ink-soft);margin:1.1rem 0 0;}
.form .btn+.formnote{margin-top:1.6rem;} /* room between the button and the first note */
.form .formnote+.formnote{margin-top:.5rem;} /* the two notes read as one block */

/* blog */
.blog-head{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(1.6rem,3vw,2.4rem);}
.blog-head h1{font-size:clamp(2.2rem,5vw,3.2rem);}
.blog-head .lede{margin:1rem 0 0;}
.postlist{display:grid;gap:1.25rem;max-width:46rem;padding-bottom:clamp(2rem,5vw,3rem);}
.postcard{display:block;background:var(--tan);border:1px solid transparent;border-radius:6px;
  padding:1.6rem 1.5rem;text-decoration:none;transition:border-color .15s;}
.postcard:hover{border-color:var(--accent);}
.postcard .pdate{font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);}
.postcard h2{font-size:1.45rem;margin:.55rem 0 .5rem;}
.postcard p{margin:0;color:var(--ink-soft);font-size:.97rem;}
.postcard .more{display:inline-block;margin-top:.95rem;font-size:.9rem;font-weight:500;color:var(--accent-ink);}
.post{max-width:44rem;padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3.2rem,7vw,5.5rem);}
.backlink{display:inline-block;font-size:.85rem;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px;margin-bottom:1.6rem;}
.backlink:hover{color:var(--accent-ink);border-color:var(--accent);}
.post h1{font-size:clamp(2rem,4.6vw,3rem);}
.post .meta{font-size:.85rem;color:var(--ink-soft);margin:1.1rem 0 0;}
.post .dek{font-size:1.18rem;line-height:1.5;color:var(--ink-soft);margin:1.5rem 0 0;}
.post-body{margin-top:2.4rem;}
.post-body p{margin:0 0 1.25rem;}
.post-body h2{font-size:clamp(1.4rem,3vw,1.8rem);margin:2.5rem 0 1rem;scroll-margin-top:100px;}
.post-body a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line-strong);}
.post-body a:hover{border-color:var(--accent);}
.post-body h3{font-size:1.2rem;margin:2rem 0 .8rem;}
.post-body ul,.post-body ol{margin:0 0 1.25rem;padding-left:1.4rem;}
.post-body li{margin:0 0 .6rem;}
.post-body figure{margin:2rem 0;}
.post-body figure img{display:block;width:100%;height:auto;border-radius:6px;}
.post-body figcaption{margin:.6rem 0 0;font-size:.82rem;color:var(--taupe);}
.post-body .fnref{font-size:.7em;line-height:0;}
.post-body .fnref a{border-bottom:0;}
.post-body .footnotes{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.2rem;
  font-size:.88rem;color:var(--ink-soft);}

/* the three doors at the end of the blog index and every post */
.cta-block{border-top:1px solid var(--line);margin-top:3rem;padding-top:2.2rem;max-width:56rem;padding-bottom:clamp(2.4rem,5vw,3.5rem);}
.cta-block h2{font-size:clamp(1.3rem,3vw,1.7rem);margin:0 0 1.4rem;}
.cta-block .grid3 .door{padding:1.2rem 1.2rem;}
.signup{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.6rem;max-width:40rem;}
/* At the end of the blog index and posts the signup is the whole block, so it needs no second rule. */
.cta-block .signup{border-top:0;margin-top:0;padding-top:0;}
/* A single door above the signup (the air-travel post's protocol invitation). */
.door-single{max-width:32rem;margin-bottom:2.4rem;}
.signup h3{font-size:1.1rem;font-weight:500;margin:0 0 .9rem;}
.signup form{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;position:relative;}
.signup input[type="email"]{flex:1 1 16rem;font-family:inherit;font-weight:300;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:4px;padding:.7rem .8rem;}
.signup input[type="email"]:focus{outline:2px solid var(--accent);outline-offset:1px;}
.signup .btn{padding:.72rem 1.2rem;}

footer{border-top:1px solid var(--line);}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center;
  padding:1.8rem clamp(1.25rem,4vw,3rem);font-size:.85rem;color:var(--ink-soft);}
.footlinks{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;}
.footlinks a{text-decoration:none;border-bottom:1px solid transparent;}
.footlinks a:hover{color:var(--ink);border-color:var(--accent);}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* the home page's example card (hero), and one traced failure under "Evidence behind every number" */
.hc-big{padding:1rem 0;margin-top:1rem;border-top:1px solid var(--line);}
.hc-big .v{font-size:3.4rem;line-height:1;font-weight:500;color:var(--loss);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.hc-big .v span{font-size:1.05rem;font-weight:400;color:var(--ink-soft);letter-spacing:0;margin-left:.4rem;}
.hc-big p{margin:.55rem 0 0;font-size:.85rem;color:var(--ink-soft);line-height:1.4;}
.excard{background:var(--surface);border-radius:8px;overflow:hidden;}
.ex-chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:1rem 1.5rem;border-bottom:1px solid var(--line);}
.chip{font-size:.8rem;border:1px solid var(--line-strong);border-radius:99px;padding:.18rem .7rem;color:var(--ink-soft);white-space:nowrap;}
.chip b{color:var(--ink);font-weight:500;}
.chip b.bad{color:var(--loss);}
.chip.topic{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:500;}
.chip.example{background:var(--accent-tint);border-color:var(--line-strong);color:var(--accent-ink);font-weight:500;letter-spacing:.04em;} /* ties the example to the hero card */
.ex-body{display:grid;grid-template-columns:1fr 1fr;}
.ex-part{padding:1.4rem 1.5rem;}
.ex-part + .ex-part{border-left:1px solid var(--line);}
.excard .st-h{margin-bottom:.6rem;}
.ex-part .q{margin:0;font-size:1.12rem;line-height:1.55;color:var(--ink);font-weight:400;}
.ex-part.rec .q{color:var(--ink-soft);font-weight:300;}
.excard mark{background:color-mix(in srgb,var(--loss) 14%,transparent);color:inherit;border-bottom:2px solid var(--loss);padding:0 .1em;}
.ex-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:var(--accent-tint);}
.ex-foot > div{padding:1.1rem 1.5rem;font-size:.93rem;line-height:1.5;color:var(--ink);}
.ex-foot > div + div{border-left:1px solid var(--line-strong);}
.ex-foot .st-h{color:var(--accent-ink);margin-bottom:.35rem;}
@media (max-width:900px){
  .ex-body,.ex-foot{grid-template-columns:1fr;}
  .ex-part + .ex-part,.ex-foot > div + div{border-left:0;border-top:1px solid var(--line);}
}
@media (max-width:560px){
  .hc-big .v{font-size:2.7rem;}
  .ex-part,.ex-foot > div{padding:1.1rem 1rem;}
  .ex-chips{padding:.9rem 1rem;}
}

/* reveal on scroll */
.rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease;}
.rise.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none;}}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;}
  .hcard{max-width:34rem;}
}
@media (max-width:900px){
  .gap,.path{grid-template-columns:1fr;}
  .arrow{justify-self:center;transform:rotate(90deg);line-height:1;}
  .grid3,.grid2,.team{grid-template-columns:1fr;}
  .steps4{grid-template-columns:1fr 1fr;}
  .behind{grid-template-columns:1fr;}
  .mini4{grid-template-columns:1fr 1fr;}
  .layer{grid-template-columns:1fr;gap:.6rem;}
}
/* Small tablets and phones held sideways keep the desktop arrangement on one line, a size down. */
@media (max-width:820px){
  .brand{font-size:1.6rem;}
  .actions{column-gap:1.3rem;}
  .nav-link{font-size:1.15rem;}
  .nav-cta{font-size:.95rem;padding:.6rem 1rem;}
}
/* Phones held upright: the name gets its own line. */
/* The menu button exists only for upright phones. */
.menu-btn{display:none;}

/* Phones held upright: one slim row (name left, menu button right) that sticks to the top. The
   links and the call to action move into a full-screen menu, so the hero's button is the only one
   on the first screen. Without JavaScript the menu can't open, so the links stay in the bar. */
@media (max-width:600px){
  header{background:var(--paper);backdrop-filter:none;}
  .bar{flex-wrap:nowrap;min-height:4.25rem;padding-top:.6rem;padding-bottom:.6rem;}
  .brand{font-size:1.45rem;}
  .js .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
    margin-right:-10px;padding:10px;background:none;border:0;cursor:pointer;color:var(--accent-ink);}
  .menu-btn span{display:block;height:2px;width:24px;background:currentColor;border-radius:1px;
    transition:transform .2s ease,opacity .2s ease;}
  .open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .open .menu-btn span:nth-child(2){opacity:0;}
  .open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

  .js .actions{display:none;}
  .js .open .actions{display:flex;position:fixed;top:4.25rem;left:0;right:0;bottom:0;z-index:19;overflow-y:auto;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:1rem clamp(1.25rem,4vw,3rem) 2rem;background:var(--paper);border-top:1px solid var(--line);}
  .js .open .bar nav{margin:0;}
  .js .open .navlinks{flex-direction:column;align-items:stretch;gap:0;}
  .js .open .nav-link{display:block;font-size:1.6rem;padding:1rem 0;border-bottom:1px solid var(--line);}
  .js .open .nav-link:hover{border-color:var(--line);}
  .js .open .nav-cta{display:block;text-align:center;font-size:1.1rem;padding:1rem;margin-top:1.6rem;}
  body.menu-open{overflow:hidden;}

  /* No JavaScript: the menu can't open, so the links and the button take a second line under the name. */
  html:not(.js) .bar{flex-wrap:wrap;}
  html:not(.js) .actions{flex:1 1 100%;justify-content:space-between;column-gap:1rem;}
  html:not(.js) .bar nav{margin:0;}
  html:not(.js) .nav-link{font-size:1.1rem;}
  html:not(.js) .nav-cta{font-size:.9rem;padding:.55rem .8rem;}
}
/* Phones: the four steps stack. */
@media (max-width:560px){
  .steps4,.mini4{grid-template-columns:1fr;}
  .hcard{padding:1.1rem 1rem 1rem;}
  .hc-kpis{gap:.6rem;}
  .hc-kpis .v{font-size:1.25rem;}
  .bars,.wks{gap:.35rem;}
  .wks span{font-size:.6rem;}
}