/* ============================================================================
   appbrew.com/resources
   Every value in this sheet is named by ~/.appbrew-web/web.md (the record).
   Where a value is not in the record it is marked NEW and listed in NOTES.md.
   Anatomy is cofounder.co/resources, measured 27 Sep 2026; type, colour,
   spacing and imagery are the Milo system as built on /milo-v2.
   ========================================================================= */

/* ---- faces: the record's three, nothing else ---------------------------- */
@font-face{font-family:'Doppio';font-weight:300;font-style:normal;font-display:swap;
  src:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c1d13db97bb813d27a_Doppio-Light.ttf') format('truetype')}
@font-face{font-family:'Doppio';font-weight:400;font-style:normal;font-display:swap;
  src:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c1547dbe41cb1d7a8f_Doppio-Regular.ttf') format('truetype')}
@font-face{font-family:'Doppio';font-weight:500;font-style:normal;font-display:swap;
  src:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c1e48381cd3358a976_Doppio-Medium.ttf') format('truetype')}

:root{
  --dop:"Doppio","Inter",system-ui,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* every caption run uses this triple — the record names one of each */
  --cap-ls:.12em; --cap-lh:1.3; --cap-fw:500;

  /* paper */
  --cream:#FAF8F5;
  --canvas:#F0EBE2;

  /* ink */
  --ink:#231B10;
  --ink-70:rgba(35,27,16,.74);
  --ink-45:rgba(35,27,16,.69);
  --rule:rgba(35,27,16,.14);

  /* system ink — a role, not an accent */
  --blue:#0033A0;
  --blue-950:#062265;
  --blue-100:#DBE7FF;

  /* the highlight: one moment per fold. #FC401F is display-numeral only
     (3.36:1 on cream); nothing on this page sets orange under 24px, so
     --orange-ink is not declared here. */
  --orange:#FC401F;

  /* radii */
  --r-plate:40px; --r-surface:16px; --r-control:12px; --r-chip:8px; --r-pill:999px;

  /* The one shadow. web.md transcribes it as ink 8% · y4 · blur 24, but the
     built page paints ink 10% · y10 · blur 30 on 30 surfaces — the reference
     wins on a consistency brief. Proposed record change, see NOTES.md. */
  --lift:0 10px 30px rgba(35,27,16,.10);
  --card:#FCFBF9;   /* A's card value, resolved on cream — opaque, see NOTES */

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);   /* the record names exactly one */
  --t-fast:120ms; --t:200ms; --t-slow:320ms;

  /* measure & gutter */
  --gutter:64px;
  --content:1200px;
  --prose-art:720px;   /* C16 measure */
}
@media (max-width:1024px){ :root{ --gutter:40px } }
@media (max-width:640px){  :root{ --gutter:24px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:17px; font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input{font:inherit; color:inherit}
::selection{background:var(--blue-100)}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px;
  border-radius:var(--r-chip)}

.wrap{ width:100%; max-width:calc(var(--content) + var(--gutter)*2);
       margin:0 auto; padding-inline:var(--gutter) }

/* ---- the record's type scale ------------------------------------------- */
.h1{color:var(--ink); font-family:var(--dop); font-weight:500; font-size:clamp(46px,5.4vw,78px);
    line-height:1.04; letter-spacing:-.022em; margin:0}
.h2{color:var(--ink); font-family:var(--dop); font-weight:500; font-size:clamp(34px,4.4vw,52px);
    line-height:1.08; letter-spacing:-.022em; margin:0}
.h3{color:var(--ink); font-family:var(--dop); font-weight:500; font-size:21px; line-height:1.2;
    letter-spacing:-.012em; margin:0}
.body{font-size:17px; line-height:1.55; color:var(--ink-70); margin:0}
.cap{font-family:var(--mono); font-weight:500; font-size:13px; line-height:1.3;
     letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin:0}
.cap.mute{color:var(--ink-45)}

/* ---- C19 buttons -------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 24px; border-radius:var(--r-control); border:0;
  font-size:17px; font-weight:500; line-height:1.55; white-space:nowrap; cursor:pointer;
  transition:background var(--t) var(--ease), transform var(--t) var(--ease),
             border-color var(--t) var(--ease), color var(--t) var(--ease)}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue-950)}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink-45)}
.btn:active{transform:scale(.98); transition-duration:var(--t-fast)}

/* every arrow on the page is one glyph at one size */
.arw{width:16px; height:16px; flex:none}

/* text action — one treatment: blue, hairline underline that fills on hover */
.tlink{position:relative; display:inline-flex; align-items:center; gap:8px;
  color:var(--blue); font-size:17px; font-weight:500; white-space:nowrap}
.tlink::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; opacity:.34; transform-origin:left;
  transition:opacity var(--t) var(--ease)}
.tlink:hover::after{opacity:1}
.tlink .arw{transition:transform var(--t) var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}

/* ==========================================================================
   C1 · nav — a static stand-in for the shared Webflow component
   ========================================================================== */
/* The live site carries this as a shared Webflow component on 52 pages. This
   is a stand-in matched to it property by property (measured on /milo-v2,
   27 Sep) so the two pages read as one site. Its 14.5/13.5px type is the
   component's, not the page's ladder — see NOTES.md. */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; height:68px;
  display:flex; align-items:center}
.nav::before{content:""; position:absolute; inset:0; display:block;
  background:rgba(250,248,245,.72); opacity:0;
  -webkit-backdrop-filter:blur(18px) saturate(1.8);
  backdrop-filter:blur(18px) saturate(1.8);
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent);
  mask-image:linear-gradient(to bottom,#000 58%,transparent);
  transition:opacity var(--t-slow) var(--ease)}
.nav.is-stuck::before{opacity:1}
.nav .wrap{display:flex; align-items:center; gap:32px; position:relative}
.nav-logo{display:flex; align-items:center; height:44px; flex:none}
.nav-logo img{height:24px; width:auto}
.nav-links{display:flex; align-items:center; gap:4px; margin-inline:auto}
.nav-links a{position:relative; display:inline-flex; align-items:center; gap:6px; height:36px;
  padding:0 12px; border-radius:var(--r-chip); white-space:nowrap;
  font-size:14.5px; font-weight:500; line-height:1.375; color:#363A48;
  transition:color var(--t) var(--ease), background var(--t) var(--ease)}
.nav-links a::after{content:""; position:absolute; inset:-4px 0}  /* 44px target */
.nav-links a:hover{color:var(--ink); background:var(--canvas)}
.nav-links a[aria-current]{color:var(--blue); background:var(--canvas)}
.nav-links svg{opacity:.5}
.nav-cta{display:flex; align-items:center; gap:10px; flex:none}
.nav-cta .btn{font-size:13.5px; padding:0 16px; border-radius:var(--r-control)}
.nav-cta .btn-ghost{height:42px; background:rgba(250,248,245,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px var(--rule),
             0 1px 2px rgba(35,27,16,.06)}
.nav-cta .btn-primary{height:40px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px -8px rgba(0,51,160,.4)}
.nav-burger{display:none; flex-direction:column; width:40px; height:40px;
  align-items:center; justify-content:center; gap:5px; cursor:pointer;
  background:rgba(250,248,245,.6); border:0; border-radius:var(--r-control);
  box-shadow:inset 0 0 0 1px var(--rule)}
.nav-burger i{display:block; width:16px; height:1.5px; background:var(--ink);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease)}

/* ==========================================================================
   B · page head
   ========================================================================== */
.head{padding-top:164px; text-align:center}   /* nav 68 + the record's 96 */
.head .cap{margin-bottom:24px}
.head h1{font-size:clamp(34px,4.4vw,52px); line-height:1.08; max-width:19ch;
  margin-inline:auto}
.head .body{max-width:56ch; margin-top:24px; margin-inline:auto}

/* ==========================================================================
   C · featured — the picture in a mount, beside the claim
   ========================================================================== */
.feat{margin-top:64px}
.feat h2{font-size:clamp(27px,2.6vw,34px); line-height:1.12}
.feat a{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:64px; align-items:center}
.feat-copy{padding-block:8px}
/* The mount, measured off the reference: the picture is recessed INTO a sheet
   of paper that lifts off the page — an inset shadow top-left plus the one
   shadow outside. Not a flat band. */
.feat-plate{position:relative; border-radius:var(--r-control);
  aspect-ratio:16/9; background:var(--cream); padding:11px 10px;
  box-shadow:var(--lift), 2px 3px 5px rgba(35,27,16,.10) inset;
  transition:box-shadow var(--t) var(--ease)}
.feat a:hover .feat-plate{box-shadow:0 20px 56px rgba(35,27,16,.13),
  2px 3px 5px rgba(35,27,16,.10) inset}
.feat-plate > img:first-child{width:100%; height:100%; object-fit:cover;
  border-radius:var(--r-chip); display:block}
/* the one orange moment on this fold: Milo's mark, on glass */
.feat-plate .feat-milo{position:absolute; left:34px; bottom:26px;
  width:132px; height:auto; object-fit:contain;
  filter:drop-shadow(0 12px 28px rgba(35,27,16,.18));
  transition:transform var(--t-slow) var(--ease)}
.feat a:hover .feat-milo{transform:translateY(-6px)}

.feat-meta{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.feat-meta .dash{width:16px; height:1px; background:var(--rule)}
.feat h2{margin:0 0 20px}
.feat .body{margin-bottom:28px; max-width:46ch}

/* ==========================================================================
   D · proof line + name marquee (C9 read as a moving wall)
   ========================================================================== */
.proof{margin-top:96px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:48px; align-items:center}
.proof p{margin:0; font-size:17px; line-height:1.55; color:var(--ink-70);
  max-width:44ch; text-indent:0}
.proof .fig{font-family:var(--dop); font-weight:500; font-size:52px;
  line-height:1; letter-spacing:-.022em; color:var(--orange);
  font-variant-numeric:tabular-nums; float:left; margin:2px 12px 0 0}
.mq{position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex; width:max-content; gap:48px;
  animation:mq 52s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
/* C9 sets this wall in ink-45. A paints its own at full ink, but there the
   wall is the fold's subject; here it shares a fold with the proof figure,
   and a moving max-contrast ribbon outranks a static numeral. */
.mq span{font-family:var(--dop); font-weight:500; font-size:21px; line-height:1.4;
  letter-spacing:.005em; color:var(--ink-45); white-space:nowrap;
  transition:color var(--t) var(--ease)}
.mq span:hover{color:var(--ink)}
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(calc(-50% - 24px))}}

/* ==========================================================================
   E+F · the library band — canvas ground, cream folders on it
   ========================================================================== */
/* No band: A is a cream page throughout and canvas is a surface, not a
   ground. A canvas band here inverted the ratio (A paints cream:canvas
   3.5:1 by area; a banded build measured 0.7:1). */
.library{margin-top:96px; padding-block:0 96px}

/* The reveal on row one must clear the filter bar rather than bury it: the
   sheet rises (its height − 8), so the gap below the bar has to exceed that.
   128 on the gap scale against a 143px sheet leaves 11px of clearance. */
.bar{display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap; margin-bottom:128px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{height:44px; padding:0 18px; display:inline-flex; align-items:center; gap:8px;
  border-radius:var(--r-chip); background:transparent; cursor:pointer;
  border:0; box-shadow:inset 0 0 0 1px var(--rule); color:var(--ink-70);
  font-family:var(--mono); font-weight:var(--cap-fw); font-size:13px;
  line-height:var(--cap-lh); letter-spacing:var(--cap-ls); text-transform:uppercase;
  transition:background var(--t) var(--ease), color var(--t) var(--ease),
             box-shadow var(--t) var(--ease)}
.chip b{font-weight:500; font-variant-numeric:tabular-nums; opacity:.5}
.chip:hover{background:var(--canvas); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--blue); color:#fff;
  box-shadow:inset 0 0 0 1px var(--blue)}
.chip[aria-pressed="true"] b{opacity:.66}
.bar .count{font-family:var(--mono); font-weight:var(--cap-fw); font-size:13px;
  line-height:var(--cap-lh); letter-spacing:var(--cap-ls); text-transform:uppercase;
  color:var(--ink-45); font-variant-numeric:tabular-nums}

/* ---- the folder card ---------------------------------------------------- */
/* The row gap must exceed the sheet's rise (its height − 8) or a hovered
   card in row two lifts its photograph over the row above. Sheet 119, rise
   111, gap 128. The column gap stays tight; the reference is asymmetric too. */
.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:128px 32px}
.cell{min-width:0}
.cell[hidden]{display:none}

.card{position:relative; display:block; padding-top:4px}
/* 1 · the folder's back edge */
/* cream on the canvas band, so the folder's back edge is actually visible */
/* the folder's back sheet: a step down in paper, as a real folder's is */
.card-tab{position:relative; z-index:1; height:22px;
  border-radius:var(--r-surface) var(--r-surface) 0 0; background:var(--canvas);
  box-shadow:0 -2px 12px rgba(35,27,16,.05)}
/* 2 · the sheet that slides out of it.
   At rest it sits behind the body (z2 under z3) and only its own 12px cream
   edge shows above the tab; on hover it rises clear of the folder. */
.card-peek{position:absolute; z-index:2; top:18px; left:50%; width:calc(100% - 40px);
  aspect-ratio:2.9; padding:8px 8px 0;
  border-radius:var(--r-control) var(--r-control) 0 0;
  background:var(--card);
  box-shadow:var(--lift);   /* row 13: never border and shadow on one surface */
  transform:translateX(-50%) translateY(0);
  transition:transform var(--t-slow) var(--ease)}
.card-peek img{width:100%; height:100%; object-fit:cover;
  border-radius:var(--r-chip) var(--r-chip) 0 0}
/* 3 · the folder body */
.card-body{position:relative; z-index:3; display:flex; flex-direction:column;
  min-height:296px; padding:22px 28px 26px; background:var(--card);
  border-radius:0 0 var(--r-surface) var(--r-surface);
  box-shadow:var(--lift);
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease)}

.card-meta{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:20px}
.card-kind{font-family:var(--mono); font-weight:var(--cap-fw); font-size:13px;
  line-height:var(--cap-lh); letter-spacing:var(--cap-ls); text-transform:uppercase;
  color:var(--ink-45);
  transition:color var(--t) var(--ease)}
.card-date{font-family:var(--mono); font-weight:var(--cap-fw); font-size:13px;
  line-height:var(--cap-lh); letter-spacing:var(--cap-ls); text-transform:uppercase; color:var(--ink-45); font-variant-numeric:tabular-nums;
  white-space:nowrap}
.card-title{font-family:var(--dop); font-weight:500; font-size:21px; line-height:1.2;
  letter-spacing:-.012em; color:var(--ink); margin:0 0 12px}
.card-deck{font-size:17px; line-height:1.5; color:var(--ink-70); margin:0}
.card-cta{margin-top:auto; padding-top:24px; display:inline-flex; align-items:center;
  gap:8px; font-family:var(--mono); font-weight:var(--cap-fw); font-size:13px;
  line-height:var(--cap-lh); letter-spacing:var(--cap-ls); text-transform:uppercase;
  color:var(--blue);   /* the record's one text-action colour, at rest */
  transition:color var(--t) var(--ease)}
.card-cta .arw{width:14px; height:14px; opacity:0; transform:translateX(-6px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease)}

.card:hover .card-peek{transform:translateX(-50%) translateY(calc(-100% + 8px))}
.card:hover .card-body{box-shadow:0 20px 56px rgba(35,27,16,.13)}
.card:hover .card-kind{color:var(--ink-70)}
.card:hover .card-cta{color:var(--blue-950)}
.card:hover .card-cta .arw{opacity:1; transform:translateX(0)}
.card:focus-visible{outline:none}
.card:focus-visible .card-body{box-shadow:inset 0 0 0 2px var(--blue), var(--lift)}
.card:focus-visible .card-peek{transform:translateX(-50%) translateY(calc(-100% + 8px))}

.more{margin-top:48px; display:flex; justify-content:center}

/* ==========================================================================
   H · tools — a book in a sleeve. Hover draws it out.
   ========================================================================== */
.tools{margin-top:128px}
.tools > .cap{margin-bottom:24px}
/* one heading form for every titled section: cap, h2 left, caption right */
.sec-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:32px; flex-wrap:wrap; margin-bottom:48px}
.sec-head h2{margin:0; max-width:18ch}

.shelf{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px 28px}

/* A pocket is three layers: a back panel, the book, and a front lip drawn over
   the book's foot. The book slides BETWEEN them — it is never clipped, so it
   can rise clear of the sleeve's top on hover. */
.bk{display:block; position:relative; padding-top:56px}
.bk-sleeve{display:block; position:absolute; inset:56px 0 0 0;
  border-radius:var(--r-control); background:var(--canvas)}
.bk-lip{position:absolute; left:0; right:0; bottom:0; z-index:2; height:56px;
  border-radius:0 0 var(--r-control) var(--r-control); background:var(--canvas);
  box-shadow:0 -10px 24px rgba(35,27,16,.07);
  display:flex; align-items:center; justify-content:center}
.bk-open{font-family:var(--mono); font-weight:var(--cap-fw); font-size:13px;
  line-height:var(--cap-lh); letter-spacing:var(--cap-ls); text-transform:uppercase;
  color:var(--ink-45); display:inline-flex; align-items:center; gap:8px;
  transition:color var(--t) var(--ease)}
.bk-open .arw{width:14px; height:14px; opacity:0; transform:translateX(-6px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease)}
.bk:hover .bk-open{color:var(--blue)}
.bk:hover .bk-open .arw{opacity:1; transform:translateX(0)}

/* the book: a spine on the left, the cover to its right */
.bk-book{display:block; position:relative; z-index:1; margin:10px 10px 0;
  border-radius:var(--r-chip); background:var(--card);
  box-shadow:var(--lift);
  transform:translateY(0); transition:transform 500ms var(--ease),
    box-shadow var(--t) var(--ease)}
.bk:hover .bk-book{box-shadow:0 20px 56px rgba(35,27,16,.13)}
.bk:hover .bk-book, .bk:focus-visible .bk-book{transform:translateY(-52px)}
.bk-cover{position:relative; display:block; padding:18px 16px 16px 26px}
.bk-cover::before{content:""; position:absolute; inset:0 auto 0 0; width:12px;
  border-radius:var(--r-chip) 0 0 var(--r-chip);
  background:linear-gradient(90deg,rgba(35,27,16,.09),rgba(35,27,16,0))}
.bk-n{display:block; font-family:var(--mono); font-weight:var(--cap-fw);
  font-size:13px; line-height:var(--cap-lh); letter-spacing:var(--cap-ls);
  text-transform:uppercase; color:var(--blue); margin-bottom:10px}
.bk-t{display:block; font-family:var(--dop); font-weight:500; font-size:21px;
  line-height:1.2; letter-spacing:-.012em; color:var(--ink);
  margin:0 0 16px; min-height:2.4em}
.bk-shot{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  object-position:top left; border-radius:var(--r-chip)}
.bk-foot{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px 14px 26px; border-top:1px solid var(--rule)}
.bk-k{font-family:var(--mono); font-weight:var(--cap-fw); font-size:13px;
  line-height:var(--cap-lh); letter-spacing:var(--cap-ls); text-transform:uppercase;
  color:var(--ink-45)}
.bk-foot .arw{color:var(--ink-45); transition:color var(--t) var(--ease),
  transform var(--t) var(--ease)}
.bk:hover .bk-foot .arw{color:var(--blue); transform:translateX(3px)}

/* the newsletter is part of this block, not a fold of its own */
.tools-sub{display:flex; align-items:center; justify-content:space-between;
  gap:40px; flex-wrap:wrap; margin-top:64px; padding-top:40px;
  border-top:1px solid var(--rule)}
.tools-sub h3{margin:0 0 8px}
.tools-sub .body{max-width:44ch}

/* ==========================================================================
   I · C14 close card
   ========================================================================== */
/* C14 · a normal section, the same shape as the one above it */
.close{margin-block:128px 128px}
.close > .cap{margin-bottom:24px}
.close .body{margin:0; max-width:52ch}
.h2.light{font-weight:500; letter-spacing:-.022em}
.sub{display:flex; gap:12px; flex:none; flex-wrap:nowrap}
.sub input{height:48px; width:320px; padding:0 16px;
  border-radius:var(--r-control); border:0; background:var(--cream);
  box-shadow:inset 0 0 0 1px var(--rule); font-size:17px;
  transition:box-shadow var(--t) var(--ease)}
.sub input::placeholder{color:var(--ink-45)}
.sub input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--blue)}
/* C14's one blue text link, in the record's single treatment */
.close .body a{position:relative; color:var(--blue); font-weight:500;
  box-shadow:inset 0 -1px 0 rgba(0,51,160,.34);
  transition:box-shadow var(--t) var(--ease)}
.close .body a:hover{box-shadow:inset 0 -1px 0 var(--blue)}
.close .fine a{color:var(--blue)}

/* C4 · the prompt card — a real prompt, handed to the live composer */
.ask{max-width:860px; margin:48px 0 0;
  background:var(--cream); border-radius:var(--r-surface);
  box-shadow:inset 0 0 0 1px var(--rule)}
.ask-prompt{margin:0; padding:28px 28px 24px; font-size:21px; line-height:1.4;
  font-weight:500; color:var(--ink)}
.ask .caret{display:inline-block; width:2px; height:.95em; margin-left:3px;
  vertical-align:-2px; background:var(--blue); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ask-foot{display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:20px 20px 20px 28px; border-top:1px solid var(--rule);
  flex-wrap:nowrap}
.ask-reach{font-size:17px; line-height:1.55; color:var(--ink-45); max-width:460px}
.ask-go{padding-right:6px; gap:12px}
.ask-go .disc{width:32px; height:32px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.18); display:grid; place-items:center; flex:none;
  transition:transform var(--t) var(--ease)}
.ask-go .up{width:16px; height:16px}
.ask-go:hover .disc{transform:translateY(-2px)}

/* ==========================================================================
   C15 · footer — /milo-v2's own footer, values transcribed from milo.css
   ========================================================================== */
.foot{background:var(--canvas); color:rgba(35,27,16,.66); padding:64px 40px 0}
.foot-in{max-width:1220px; margin:0 auto}
.foot-top{display:grid; grid-template-columns:1.5fr repeat(5,1fr); gap:40px 28px;
  padding-bottom:44px; border-bottom:1px solid rgba(35,27,16,.09)}
.foot-mark img{height:24px; width:auto; display:block}
.foot-mark p{margin:16px 0 0; font-size:14.5px; line-height:1.55;
  color:var(--ink-45); max-width:30ch}
.foot-col{border:0}
.foot-col summary{list-style:none}
.foot-col summary::-webkit-details-marker{display:none}
.foot-col summary .chev{display:none}
@media (min-width:641px){ .foot-col summary{pointer-events:none} }
.foot-col h4{font-family:var(--mono); font-size:12px; letter-spacing:var(--cap-ls);
  text-transform:uppercase; font-weight:var(--cap-fw); color:var(--ink-45);
  margin:0 0 14px; line-height:var(--cap-lh)}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:9px}
.foot-col li{margin:0; padding:0}
.foot-col a{font-size:14.5px; color:var(--ink-70); text-decoration:none;
  transition:color var(--t) var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-bot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:24px; font-size:13px; color:var(--ink-45)}
.foot-social{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.foot-social a{color:inherit; text-decoration:none;
  transition:color var(--t) var(--ease)}
.foot-social a:hover{color:var(--ink)}
.foot-sign{margin-top:52px; overflow:hidden; height:.86em; pointer-events:none;
  font-family:var(--dop); font-weight:300; font-size:clamp(54px,15.6vw,226px);
  line-height:.86; letter-spacing:-.035em; color:rgba(35,27,16,.06);
  text-align:center; user-select:none}

/* ==========================================================================
   reveal
   ========================================================================== */
.rv{opacity:0; transform:translateY(16px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease)}
.rv.in{opacity:1; transform:none}

/* ==========================================================================
   phone — designed, not stacked
   ========================================================================== */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat a{gap:40px}
  .proof{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr 1fr; gap:40px}
}
@media (max-width:860px){
  /* the featured card only stacks once the split would squeeze the claim */
  .head{padding-top:132px}
  .feat a{grid-template-columns:1fr; gap:32px}
  .feat-plate{aspect-ratio:16/9}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  /* the links collapse before they can wrap; the CTA pair stays until phone */
  .nav .wrap{gap:16px}
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .nav-burger{display:flex}
  .bar{margin-bottom:112px}
  .head h1{max-width:20ch}
}
@media (max-width:640px){
  body{font-size:17px}
  .head{padding-top:112px}
  .head .cap{margin-bottom:16px}
  .feat{margin-top:40px}
  .feat-plate{aspect-ratio:.8}
  .feat h2{margin-bottom:16px}
  .feat .body{margin-bottom:24px}
  .proof{margin-top:64px}
  .library{margin-top:64px; padding-block:40px 64px}
  .bar{margin-bottom:24px}
  .nav-cta .btn-ghost{display:none}
  .chips{overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;
    margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter)}
  .chips::-webkit-scrollbar{display:none}
  .mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .chip{flex:none}
  .grid{grid-template-columns:1fr; gap:40px}
  .card{padding-top:0}
  .card-tab{display:none}   /* nothing slides out of it here */
  .card-body{min-height:0; padding:20px 24px 24px;
    border-radius:var(--r-surface)}
  .card-peek{box-shadow:none}
  /* A phone has no hover, so the sheet cannot slide — but fifteen full-width
     photographs stacked in a column is a slog (measured: 31% void against the
     references' 48–54%). The folder keeps its shape and the sheet becomes a
     square thumbnail set into the body's top right, so the imagery is still
     on the page and the list stays scannable. */
  .card-peek{top:44px; left:auto; right:20px; width:72px; aspect-ratio:1;
    padding:0; transform:none; z-index:4;
    border-radius:var(--r-chip); overflow:hidden;
    box-shadow:inset 0 0 0 1px var(--rule)}
  .card-peek img{border-radius:var(--r-chip)}
  .card-meta, .card-title{padding-right:88px}
  .card-cta{padding-top:20px}
  .card-cta .arw{opacity:1; transform:none}
  .tools{margin-top:80px}
  .sec-head{margin-bottom:32px}
  .shelf{grid-template-columns:1fr; gap:40px}
  .bk{padding-top:44px}
  .bk-sleeve{inset:44px 0 0 0}
  .bk:hover .bk-book, .bk:focus-visible .bk-book{transform:translateY(-40px)}
  .feat-plate{aspect-ratio:4/3}
  .tool{height:auto; padding-block:16px; gap:14px}
  .tool-k{display:none}
  .tools-sub{margin-top:40px; padding-top:32px; gap:24px}
  .tools-sub .sub{width:100%; flex-wrap:wrap}
  .sub input{width:100%}
  .close{margin-block:80px 80px}
  .ask{margin-top:32px}
  .ask-prompt{padding:20px 20px 16px; font-size:17px}
  .ask-foot{padding:16px 20px; gap:16px; flex-wrap:wrap}
  .ask-go{width:100%}
  .proof .fig{font-size:34px}
  .feat-plate .feat-milo{width:96px; left:24px; bottom:24px}
  /* C15: accordion on a phone — six expanded columns was three screens tall */
  .foot{padding:48px 20px 0}
  .foot-top{grid-template-columns:1fr; gap:0; padding-bottom:24px}
  .foot-mark{margin-bottom:24px}
  .foot-col{border-top:1px solid var(--rule)}
  .foot-col summary{display:flex; align-items:center; justify-content:space-between;
    min-height:52px; cursor:pointer; list-style:none}
  .foot-col summary h4{margin:0}
  .foot-col summary .chev{display:block; width:16px; height:16px; color:var(--ink-45);
    transition:transform var(--t) var(--ease)}
  .foot-col[open] summary .chev{transform:rotate(180deg)}
  .foot-col ul{padding-bottom:20px}
  .foot-bot{flex-direction:column; gap:12px; padding-top:20px;
    border-top:1px solid rgba(35,27,16,.09)}
  .foot-sign{margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  .mq-track{animation:none}
}


/* ==========================================================================
   C16 · article — the template every blog, brand story and podcast page uses
   ========================================================================== */
.art{padding-top:164px}
.art-back{position:absolute; left:var(--gutter); top:152px;
  display:inline-flex; align-items:center; gap:8px; height:44px;
  font-family:var(--mono); font-weight:var(--cap-fw); font-size:13px;
  line-height:var(--cap-lh); letter-spacing:var(--cap-ls); text-transform:uppercase;
  color:var(--ink-45); transition:color var(--t) var(--ease)}
.art-back:hover{color:var(--blue)}
.art-back .arw{transform:rotate(180deg); transition:transform var(--t) var(--ease)}
.art-back:hover .arw{transform:rotate(180deg) translateX(4px)}
.art-head{text-align:center; max-width:880px; margin:0 auto}
.art-chip{display:inline-flex; align-items:center; height:32px; padding:0 14px;
  border-radius:var(--r-pill); background:var(--canvas);
  font-family:var(--mono); font-weight:var(--cap-fw); font-size:13px;
  line-height:var(--cap-lh); letter-spacing:var(--cap-ls); text-transform:uppercase;
  color:var(--blue)}
.art-head h1{margin:24px 0 0; font-size:clamp(34px,4.4vw,52px); line-height:1.08}
.art-meta{margin:24px 0 0; font-family:var(--mono); font-weight:var(--cap-fw);
  font-size:13px; line-height:var(--cap-lh); letter-spacing:var(--cap-ls);
  text-transform:uppercase; color:var(--ink-45)}
.art-lede{margin:32px auto 0; max-width:62ch; font-family:var(--dop);
  font-weight:300; font-size:21px; line-height:1.4; color:var(--ink-70)}
/* the same frame the featured card uses, so the two pages are one system */
.art-plate{margin:64px auto 0; max-width:1080px; position:relative;
  border-radius:var(--r-control); background:var(--canvas); padding:10px}
.art-plate img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--r-chip); display:block}
.art-body{max-width:var(--prose-art); margin:80px auto 0}
.art-body p{margin:0 0 24px; font-size:17px; line-height:1.55; color:var(--ink-70)}
/* the last child's bottom margin collapses out of the article locally but is
   contained inside Webflow's embed wrapper — 24px of drift. Zero it. */
.art-body > *:last-child{margin-bottom:0}
.art-body h2{margin:64px 0 24px; font-family:var(--dop); font-weight:500;
  font-size:27px; line-height:1.2; letter-spacing:-.012em; color:var(--ink)}
.art-body h3{margin:40px 0 16px; font-family:var(--dop); font-weight:500;
  font-size:21px; line-height:1.2; letter-spacing:-.012em; color:var(--ink)}
.art-body blockquote{margin:48px 0; padding:0 0 0 24px;
  border-left:2px solid var(--blue); font-family:var(--dop); font-weight:300;
  font-size:27px; line-height:1.24; letter-spacing:-.012em; color:var(--ink)}
.art-fig{margin:48px 0; padding:32px; background:var(--canvas);
  border-radius:var(--r-surface); text-align:center}
.art-fig b{display:block; font-family:var(--dop); font-weight:500;
  font-size:clamp(34px,4.4vw,52px); line-height:1; letter-spacing:-.022em;
  color:var(--orange); font-variant-numeric:tabular-nums}
.art-fig span{display:block; margin-top:12px; font-size:17px; line-height:1.55;
  color:var(--ink-45)}
.art-body a{color:var(--blue); box-shadow:inset 0 -1px 0 rgba(0,51,160,.34);
  transition:box-shadow var(--t) var(--ease)}
.art-body a:hover{box-shadow:inset 0 -1px 0 var(--blue)}

@media (max-width:1080px){ .art-back{position:static; margin-bottom:32px} }
@media (max-width:640px){
  .art{padding-top:112px}
  .art-head h1{margin-top:16px}
  .art-lede{font-size:17px; margin-top:24px}
  .art-plate{margin-top:40px; padding:6px}
  .art-plate img{aspect-ratio:4/3}
  .art-body{margin-top:64px}
  .art-body h2{margin:64px 0 16px}
  .art-body h3{margin:40px 0 12px}
  .art-body blockquote{margin:40px 0}
  .art-fig{margin:40px 0; padding:24px}
}