/* Open Loop — shared stylesheet.
   Built into dist/style.css by build.py and linked from every page, so the
   five pages cannot drift apart visually and the browser caches it once.

   Design direction: bolder than the original. Heavier display type, a dark
   hero band, sharper corners, scroll-reveal motion. The amber (#FFD84D) is
   the brand and does not move — it is in the logo, the theme-color and the
   social card. */

:root{
  --ground:#F4F5F7; --surface:#FFFFFF; --surface-2:#EAECF0;
  --line:#D5DAE1; --line-soft:#E4E7EC;
  /* --muted is checked against ground, surface AND surface-2; #69727E read
     4.47:1 on the ground, just under WCAG AA. This clears 4.5 on all three. */
  --ink:#0F1318; --ink-2:#39424D; --muted:#636B77;
  --accent:#8A6100; --mark:#FFD84D; --on-mark:#0F1318;
  --good:#16805F;
  /* the dark band used for the hero and the closing CTA, in both themes */
  --block:#0F1318; --block-2:#1A2029; --on-block:#F2F0EB;
  --on-block-2:#B9C0CA; --block-line:#2B333E;
  --shadow:0 1px 2px rgba(15,19,24,.06), 0 10px 30px rgba(15,19,24,.07);
  --r-sm:4px; --r:6px; --r-lg:10px;
  --maxw:1120px; --readw:70ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1014; --surface:#151A20; --surface-2:#1C222A;
    --line:#2A323C; --line-soft:#212831;
    --ink:#F0EEE9; --ink-2:#C6CBD2; --muted:#8B939E;
    --accent:#FFD84D;
    --good:#5FD3A0;
    --block:#05070A; --block-2:#11161C; --on-block:#F0EEE9;
    --on-block-2:#B9C0CA; --block-line:#242C35;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 34px rgba(0,0,0,.38);
  }
}
:root[data-theme="dark"]{
  --ground:#0D1014; --surface:#151A20; --surface-2:#1C222A;
  --line:#2A323C; --line-soft:#212831;
  --ink:#F0EEE9; --ink-2:#C6CBD2; --muted:#8B939E;
  --accent:#FFD84D;
  --good:#5FD3A0;
  --block:#05070A; --block-2:#11161C; --on-block:#F0EEE9;
  --on-block-2:#B9C0CA; --block-line:#242C35;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 34px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{background:var(--ground);color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",sans-serif;
  text-wrap:balance;margin:0;letter-spacing:-.03em;font-weight:800}
p{margin:0} a{color:inherit}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:inline-block}
.tc{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--mark);outline-offset:3px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px;top:0;background:var(--mark);color:var(--on-mark);
  padding:12px 18px;font-weight:700;z-index:99;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink);background:var(--ground);
  position:sticky;top:0;z-index:20}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:16px;padding-bottom:16px}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:21px;
  letter-spacing:-.04em;display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink)}
.loop{width:26px;height:17px;border:3.5px solid var(--mark);border-radius:99px;
  display:inline-block;border-right-color:transparent;transform:rotate(-20deg);
  flex:none}
.nav{display:flex;gap:24px;align-items:center;font-size:15px;color:var(--ink-2);
  font-weight:500}
.nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--mark)}
.nav a.btn:hover{border-bottom-color:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:none;cursor:pointer;
  font-family:"Public Sans",sans-serif;font-size:15px;font-weight:700;
  padding:13px 22px;border-radius:var(--r);text-decoration:none;
  background:var(--mark);color:var(--on-mark);letter-spacing:-.01em;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
.btn:hover{filter:brightness(1.05);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(255,216,77,.34)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--ink);filter:none}
.btn-lg{font-size:16.5px;padding:16px 30px}
/* on the dark band */
.on-dark .btn-ghost{color:var(--on-block);box-shadow:inset 0 0 0 2px var(--block-line)}
.on-dark .btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--on-block)}

/* ---------- dark band ---------- */
.band{background:var(--block);color:var(--on-block);
  border-bottom:2px solid var(--ink)}
.band p{color:var(--on-block-2)}
.band .eyebrow{color:var(--mark)}
.band a{color:var(--on-block)}

/* ---------- sections ---------- */
section{padding:84px 0;border-top:1px solid var(--line-soft)}
section:first-of-type{border-top:none}
.sec-head{margin-bottom:44px;max-width:var(--readw)}
.sec-head h2{font-size:clamp(29px,4.2vw,46px);line-height:1.05;margin-top:14px;
  max-width:22ch}
.sec-head p{margin-top:16px;max-width:62ch;color:var(--ink-2);font-size:18px}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--ink);padding:44px 0 64px;
  color:var(--muted);font-size:14.5px;background:var(--surface)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  margin-bottom:36px}
.foot-grid h4{font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:0 0 14px;font-weight:500}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:10px}
.foot-grid a{color:var(--ink-2);text-decoration:none}
.foot-grid a:hover{color:var(--ink);text-decoration:underline}
.foot-blurb{color:var(--ink-2);max-width:34ch;margin-top:12px}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--line-soft)}

/* ---------- prose (content pages) ---------- */
.prose{max-width:var(--readw)}
.prose h2{font-size:clamp(25px,3.4vw,34px);line-height:1.12;
  margin:52px 0 16px;scroll-margin-top:90px}
.prose h3{font-size:20px;font-weight:700;margin:34px 0 10px;letter-spacing:-.02em}
.prose p{margin:0 0 18px;color:var(--ink-2)}
.prose p strong{color:var(--ink);font-weight:600}
/* Markers are absolutely positioned, NOT grid columns. A grid list item turns
   every child AND every bare text run into its own grid item, so
   "<li><strong>Lead-in</strong> then more text</li>" drops that trailing text
   into the narrow marker column, where it wraps one word per line. Keep list
   content in normal inline flow. */
.prose ul,.prose ol{margin:0 0 20px;padding-left:0;list-style:none;
  display:flex;flex-direction:column;gap:11px;color:var(--ink-2)}
.prose li{position:relative;padding-left:28px}
.prose li::before{content:"";position:absolute;left:3px;top:.6em;
  width:7px;height:7px;border-radius:2px;background:var(--mark)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;
  background:none;width:auto;height:auto;
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted);
  font-weight:500;line-height:1.85}
.prose a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--mark);text-decoration-thickness:2px;
  text-underline-offset:3px}
.prose a:hover{background:var(--mark);color:var(--on-mark);
  text-decoration-color:transparent}
.lede{font-size:20.5px;line-height:1.55;color:var(--ink-2);
  margin:0 0 34px;max-width:60ch}
.lede strong{color:var(--ink);font-weight:600}
blockquote{margin:28px 0;padding:2px 0 2px 22px;
  border-left:4px solid var(--mark);color:var(--ink);font-size:18.5px}
blockquote p{color:var(--ink)}

/* ---------- glanceable pattern ----------
   Every guide answers its own question in the first box, then offers the
   detail behind expanders. Nothing is deleted from the argument; it just
   stops arriving all at once. <details> needs no JavaScript and stays
   readable (and printable) when it fails. */
.answer{background:var(--surface);border:2px solid var(--ink);
  border-radius:var(--r-lg);padding:26px 28px;margin:0 0 36px;max-width:var(--readw)}
.answer .k{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin-bottom:12px}
.answer p{font-size:21px;line-height:1.45;color:var(--ink);margin:0;
  letter-spacing:-.01em}
.answer p + p{margin-top:12px;font-size:16.5px;color:var(--ink-2)}
.answer strong{background:var(--mark);color:var(--on-mark);
  padding:1px .18em;border-radius:3px;font-weight:700}

/* key points: the scannable middle of a guide */
.keys{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:2px;
  max-width:var(--readw)}
/* Same absolute-marker rule as .prose li, and for the same reason. */
.keys li{position:relative;padding:13px 0 13px 26px;
  border-top:1px solid var(--line-soft);color:var(--ink-2);font-size:16.5px}
.keys li:first-child{border-top:none}
.keys li b{color:var(--ink)}
.keys li::before{content:"";position:absolute;left:0;top:1.28em;
  width:9px;height:9px;border-radius:2px;background:var(--mark)}

/* expander */
.dets{max-width:var(--readw);margin:0 0 36px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details{border-top:1px solid var(--line-soft)}
details:first-of-type{border-top:none}
summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;
  position:relative;font-size:17px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;
  height:11px;margin-top:-6px;
  border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s ease}
details[open] > summary::after{transform:rotate(-135deg)}
summary:hover{color:var(--accent)}
summary:hover::after{border-color:var(--accent)}
details > *:not(summary){margin-left:0}
details .in{padding:0 0 22px}
details .in > *:last-child{margin-bottom:0}
@media (prefers-reduced-motion: reduce){ summary::after{transition:none} }

/* callout box used through the content pages */
.note{background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--mark);border-radius:0 var(--r) var(--r) 0;
  padding:22px 24px;margin:28px 0}
.note p{margin:0;color:var(--ink-2)}
.note strong{color:var(--ink)}

/* comparison + data tables */
.tbl-scroll{overflow-x:auto;margin:28px 0;
  border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:15.5px;
  background:var(--surface);min-width:520px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
thead th{background:var(--surface-2);font-weight:700;color:var(--ink);
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:2px solid var(--line)}
tbody tr:last-child td{border-bottom:none}
td{color:var(--ink-2)}
td strong{color:var(--ink)}

/* page hero for content pages */
.page-hero{padding:60px 0 54px}
.page-hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.02;
  max-width:19ch;margin-top:16px}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 8px;opacity:.5}
.meta-row{margin-top:22px;display:flex;gap:22px;flex-wrap:wrap;
  font-size:13.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace}

/* closing CTA shared by the content pages */
.endcta{background:var(--block);color:var(--on-block);border-radius:var(--r-lg);
  padding:44px;margin:64px 0 0;display:grid;grid-template-columns:1fr auto;
  gap:32px;align-items:center}
.endcta h2{font-size:clamp(24px,3vw,32px);line-height:1.1;max-width:20ch;
  color:var(--on-block)}
.endcta p{margin-top:12px;color:var(--on-block-2);max-width:48ch}

/* ---------- cross-links between the guides ----------
   Own section with real space beneath it, so the cards never collide with the
   footer's top rule. */
.readnext{margin-top:72px;padding-top:38px;padding-bottom:88px;
  border-top:1px solid var(--line-soft)}
.readnext h2{font-size:23px;margin:10px 0 22px;letter-spacing:-.025em}
.more{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.more a{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:22px 24px 20px;
  text-decoration:none;position:relative;overflow:hidden;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
/* amber edge that wipes in on hover — the affordance that says "clickable" */
.more a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--mark);transform:scaleY(0);transform-origin:top;
  transition:transform .2s ease}
.more a:hover{border-color:var(--ink);transform:translateY(-3px);
  box-shadow:var(--shadow)}
.more a:hover::before{transform:scaleY(1)}
.more .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:9px}
.more strong{display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:18px;font-weight:700;letter-spacing:-.025em;margin-bottom:7px;
  color:var(--ink);line-height:1.25}
.more .d{font-size:14.5px;color:var(--muted);line-height:1.5;margin-bottom:16px}
.more .go{margin-top:auto;font-size:14px;font-weight:700;color:var(--accent);
  display:inline-flex;align-items:center;gap:7px}
.more .go::after{content:"→";transition:transform .18s ease}
.more a:hover .go::after{transform:translateX(4px)}
@media (prefers-reduced-motion: reduce){
  .more a,.more a::before,.more .go::after{transition:none}
}

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(18px);
    transition:opacity .5s cubic-bezier(.2,.7,.3,1),
               transform .5s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  /* Once the CTA stacks, the button must NOT inherit the column's full width —
     a 700px-wide button reads as a broken layout, not a call to action. */
  .endcta{grid-template-columns:1fr;padding:32px}
  .endcta .btn{justify-self:start}
  .more{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  section{padding:60px 0}
  /* Drop the text links, KEEP the button. Hiding the whole nav takes the
     only persistent call to action away from every phone visitor. */
  .nav a:not(.btn){display:none}
  .nav{gap:0}
  .nav a.btn{padding:11px 18px;font-size:14.5px}
  .masthead .wrap{padding-top:14px;padding-bottom:14px}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .foot-grid{grid-template-columns:1fr}
  .lede{font-size:18.5px}
  .endcta{padding:26px 22px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}