/* tsakanikas.io — shared design system.
   Extracted from index.html when framework.html was added: two pages copy-pasting
   400 lines of tokens and components is a guarantee they drift apart. Page-specific
   rules stay in that page's own <style> block. */

  :root{
    --void:#08171A;--deep:#0C2025;--deep-2:#102C31;--card:#0E262B;
    --signal:#27E39A;--signal-2:#16C586;--amber:#F0B341;
    /* --fg-dim was #577073 — only 3.46:1 on --void, i.e. it failed WCAG AA for the small
       text it is used on (labels, band ranges, the footer line). #7A9394 clears 4.5:1 on
       every surface it actually sits on, the worst being --deep-2 at 4.51:1. */
    --fg:#E2F0ED;--fg-mute:#7E9B9B;--fg-dim:#7A9394;
    --line:rgba(226,240,237,.10);--line-2:rgba(226,240,237,.16);
    --display:'Space Grotesk',sans-serif;--body:'IBM Plex Sans',sans-serif;--mono:'IBM Plex Mono',monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);background:var(--void);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 30px}
  h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.018em}
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);display:inline-flex;align-items:center;gap:9px}
  .eyebrow::before{content:"";width:18px;height:1px;background:var(--signal);opacity:.7}

  nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(8,23,26,.72);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
  .brand{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;display:flex;align-items:center;gap:11px}
  .brand .glyph{width:26px;height:26px;border-radius:7px;background:linear-gradient(140deg,var(--signal),var(--signal-2));color:#04130D;display:grid;place-items:center;font-size:.8rem;font-weight:700}
  .nav-links{display:flex;align-items:center;gap:30px}
  .nav-links a.lnk{font-family:var(--mono);font-size:.82rem;color:var(--fg-mute);transition:color .15s}
  .nav-links a.lnk:hover{color:var(--fg)}
  .nav-end{display:flex;align-items:center;gap:12px;flex:none}
  .cta-short{display:none}

  /* Mobile menu. Below 880px the inline links do not fit, so they move into a drawer.
     Hiding them with no replacement (what this used to do) meant a phone visitor could
     not reach the Framework, the worked example or the writing at all — the three pages
     that do the actual selling. The button is markup on every page and is display:none
     on desktop, so there is one nav to keep in sync, not two. */
  .nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:9px;
              width:42px;height:38px;cursor:pointer;place-items:center;color:var(--fg)}
  .nav-toggle:hover{border-color:var(--signal)}
  .nav-toggle svg{width:19px;height:19px;display:block}
  .nav-toggle .ico-x{display:none}
  .nav-toggle[aria-expanded="true"] .ico-bars{display:none}
  .nav-toggle[aria-expanded="true"] .ico-x{display:block}
  .btn{font-family:var(--body);font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;display:inline-flex;align-items:center;gap:9px}
  .btn-primary{background:var(--signal);color:#04130D;box-shadow:0 0 0 0 rgba(39,227,154,.4)}
  .btn-primary:hover{background:#3DEDA8;transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(39,227,154,.5)}
  .btn-ghost{border-color:var(--line-2);color:var(--fg)}
  .btn-ghost:hover{border-color:var(--signal);color:#fff}
  .btn .arw{transition:transform .15s}
  .btn:hover .arw{transform:translateX(3px)}

  .hero{position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(820px 480px at 82% -8%, rgba(39,227,154,.13), transparent 60%),radial-gradient(600px 400px at 0% 30%, rgba(22,197,134,.06), transparent 60%);pointer-events:none}
  .grid-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:radial-gradient(rgba(226,240,237,.055) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);mask-image:linear-gradient(to bottom,#000 0%,transparent 78%)}
  .scan{position:absolute;left:0;right:0;height:1px;top:0;background:linear-gradient(90deg,transparent,rgba(39,227,154,.5),transparent);animation:scan 7s linear infinite;pointer-events:none;opacity:.5}
  @keyframes scan{0%{top:0}100%{top:100%}}
  .hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center;padding:92px 0 96px}
  .h1{font-size:clamp(2.5rem,5.4vw,4.15rem);color:#fff;margin:20px 0 22px}
  .h1 em{font-style:normal;background:linear-gradient(120deg,var(--signal),#7BF0C6);-webkit-background-clip:text;background-clip:text;color:transparent}
  .lead{font-size:1.14rem;color:var(--fg-mute);max-width:31em;margin-bottom:32px}
  .cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
  .ticker{display:flex;align-items:center;gap:18px;margin-top:30px;font-family:var(--mono);font-size:.78rem;color:var(--fg-mute);flex-wrap:wrap}
  .ticker .pulse{width:8px;height:8px;border-radius:50%;background:var(--signal);animation:pulse 2.2s infinite}
  .ticker b{color:var(--fg);font-weight:500}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(39,227,154,.5)}70%{box-shadow:0 0 0 9px rgba(39,227,154,0)}100%{box-shadow:0 0 0 0 rgba(39,227,154,0)}}

  .panel{background:linear-gradient(180deg,var(--deep-2),var(--deep));border:1px solid var(--line-2);border-radius:18px;padding:26px;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);position:relative}
  .panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
  .pname{font-family:var(--mono);font-size:.8rem;color:var(--fg-mute);display:flex;align-items:center;gap:8px}
  .pname .d{width:7px;height:7px;border-radius:50%;background:var(--signal)}
  .pill{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:6px;background:rgba(240,179,65,.14);color:var(--amber);border:1px solid rgba(240,179,65,.4);transition:all .45s}
  .pill.ready{background:rgba(39,227,154,.16);color:var(--signal);border-color:rgba(39,227,154,.5)}
  .gauge-wrap{display:flex;justify-content:center;margin:6px 0 14px;position:relative}
  .gauge{width:188px;height:188px;transform:rotate(-90deg)}
  .gauge .track{fill:none;stroke:rgba(226,240,237,.08);stroke-width:11}
  .gauge .prog{fill:none;stroke:url(#gg);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1)}
  .gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .gnum{font-family:var(--display);font-weight:700;font-size:2.9rem;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
  .glbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);margin-top:4px}
  .checks{list-style:none;margin-top:6px}
  .ck{display:flex;align-items:center;gap:11px;padding:8px 2px;border-top:1px solid var(--line);opacity:.38;transition:opacity .45s}
  .ck.on{opacity:1}
  .ck .mk{flex:none;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;background:rgba(226,240,237,.05);border:1px solid var(--line-2);transition:background .35s,border-color .35s}
  .ck.on .mk{background:var(--signal);border-color:var(--signal)}
  .ck .mk svg{width:11px;height:11px;opacity:0;transform:scale(.4);transition:all .3s .05s}
  .ck.on .mk svg{opacity:1;transform:scale(1)}
  .ck span{font-family:var(--mono);font-size:.8rem;color:var(--fg)}
  .spark{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}
  .spark .lab{font-family:var(--mono);font-size:.66rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.1em;flex:none}
  .spark svg{flex:1}
  .spark .sv{font-family:var(--mono);font-size:.74rem;color:var(--signal);flex:none}

  .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;background:rgba(255,255,255,.012)}
  .strip-in{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:center}
  .strip .t{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
  .strip .c{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--fg-mute);opacity:.85;transition:color .15s,opacity .15s}
  .strip .c:hover{color:var(--fg);opacity:1}

  .section{padding:104px 0;border-top:1px solid var(--line);position:relative}
  .lead-head{font-size:clamp(1.9rem,3.8vw,2.85rem);color:#fff;max-width:15em;margin-top:18px}
  .two{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;margin-top:36px}
  .two p{color:var(--fg-mute);font-size:1.08rem;max-width:33em}
  .two p+p{margin-top:20px}   /* the reset zeroes margins; this replaces a <br><br> */
  .two p strong{color:var(--fg);font-weight:600}
  .statcard{background:linear-gradient(165deg,var(--deep-2),var(--deep));border:1px solid var(--line-2);border-left:3px solid var(--amber);border-radius:14px;padding:30px}
  .statcard .big{font-family:var(--display);font-weight:700;font-size:3rem;color:#fff;line-height:1}
  .statcard .sub{color:var(--fg-mute);font-size:.95rem;margin-top:10px}

  .asof{margin-top:30px;padding:16px 20px;border-left:2px solid var(--signal);background:rgba(39,227,154,.045);
        border-radius:0 10px 10px 0;font-size:.92rem;color:var(--fg-mute);line-height:1.6;max-width:60em}
  .asof span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
  .asof em{font-style:normal;color:var(--fg)}

  .caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
  .cap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;transition:transform .2s,border-color .2s,background .2s}
  .cap:hover{transform:translateY(-4px);border-color:rgba(39,227,154,.4);background:var(--deep-2)}
  .cap .num{font-family:var(--mono);font-size:.72rem;color:var(--signal);letter-spacing:.1em}
  .cap h3{font-size:1.16rem;color:#fff;margin:14px 0 8px}
  .cap p{color:var(--fg-mute);font-size:.94rem;line-height:1.55}

  /* --- Self-assessment ------------------------------------------------------ */
  .sc-wrap{display:grid;grid-template-columns:1fr 372px;gap:36px;margin-top:40px;align-items:start}
  .sc-dim{border-top:1px solid var(--line);padding:22px 0 6px}
  .sc-dim:first-child{border-top:none;padding-top:4px}
  .sc-dhead{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
  .sc-dhead .n{font-family:var(--mono);font-size:.72rem;color:var(--signal);letter-spacing:.1em}
  .sc-dhead h3{font-size:1.05rem;color:#fff}
  .sc-dhead .w{font-family:var(--mono);font-size:.7rem;color:var(--fg-dim);margin-left:auto}
  .sc-q{padding:13px 0 15px;border-top:1px solid rgba(226,240,237,.05)}
  .sc-q:first-of-type{border-top:none}
  .sc-q p{color:var(--fg);font-size:.97rem;line-height:1.5;margin-bottom:11px}
  .sc-opts{display:flex;flex-wrap:wrap;gap:7px}
  .sc-opts button{font-family:var(--mono);font-size:.73rem;color:var(--fg-mute);background:transparent;
    border:1px solid var(--line-2);padding:7px 12px;border-radius:6px;cursor:pointer;
    transition:border-color .15s,color .15s,background .15s}
  .sc-opts button:hover{border-color:rgba(39,227,154,.45);color:var(--fg)}
  .sc-opts button[aria-pressed="true"]{background:rgba(39,227,154,.14);border-color:var(--signal);color:var(--signal)}

  .sc-progress{font-family:var(--mono);font-size:.74rem;color:var(--fg-dim);text-align:center;margin-top:2px}
  .sc-bars{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
  .sc-bar{display:flex;align-items:center;gap:10px;padding:5px 0}
  .sc-bar .lbl{font-family:var(--mono);font-size:.68rem;color:var(--fg-mute);flex:none;width:8.4em}
  .sc-bar .track2{flex:1;height:5px;border-radius:3px;background:rgba(226,240,237,.08);overflow:hidden}
  .sc-bar .fill{height:100%;border-radius:3px;background:var(--signal);width:0;transition:width .5s cubic-bezier(.16,1,.3,1)}
  .sc-bar .fill.low{background:var(--amber)}
  .sc-bar .val{font-family:var(--mono);font-size:.68rem;color:var(--fg-dim);flex:none;width:2.4em;text-align:right}

  .sc-verdict{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
  .sc-verdict h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
                 color:var(--signal);font-weight:400;margin-bottom:10px}
  .sc-verdict p{color:var(--fg-mute);font-size:.88rem;line-height:1.55;margin-bottom:10px}
  .sc-verdict p strong{color:var(--fg);font-weight:600}
  .sc-verdict .gapline{display:flex;gap:9px;padding:7px 0;border-top:1px solid rgba(226,240,237,.05);
                       font-size:.85rem;color:var(--fg-mute);line-height:1.45}
  .sc-verdict .gapline b{color:var(--amber);font-weight:500;flex:none;font-family:var(--mono);font-size:.72rem;padding-top:2px}
  .sc-privacy{font-family:var(--mono);font-size:.68rem;color:var(--fg-dim);line-height:1.55;
              margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
  .sc-reset{background:none;border:none;color:var(--fg-dim);font-family:var(--mono);font-size:.7rem;
            cursor:pointer;text-decoration:underline;padding:0;margin-top:10px}
  .sc-reset:hover{color:var(--fg-mute)}

  .offer{margin-top:42px;background:radial-gradient(700px 300px at 90% 0%, rgba(39,227,154,.12), transparent 60%),linear-gradient(170deg,var(--deep-2),var(--deep));border:1px solid var(--line-2);border-radius:20px;padding:52px;display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
  .offer h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.5rem);margin:14px 0 16px}
  .offer p{color:var(--fg-mute);max-width:30em;margin-bottom:26px}
  .spec{list-style:none}
  .spec li{display:flex;gap:16px;padding:15px 0;border-top:1px solid var(--line)}
  .spec li:first-child{border-top:none}
  .spec .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);flex:none;width:88px;padding-top:3px}
  .spec .v{color:var(--fg);font-size:.96rem}

  .builds{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:42px}
  .build{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;transition:transform .2s,border-color .2s}
  .build:hover{transform:translateY(-4px);border-color:rgba(39,227,154,.35)}
  .build .metric{font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--signal);line-height:1}
  .build .metric small{font-family:var(--mono);font-size:.72rem;color:var(--fg-mute);font-weight:400;letter-spacing:.06em;display:block;margin-top:6px;text-transform:uppercase}
  .build h3{font-size:1.22rem;color:#fff;margin:18px 0 9px}
  .build p{color:var(--fg-mute);font-size:.95rem;margin-bottom:18px}
  .tags{display:flex;flex-wrap:wrap;gap:7px}
  .tag{font-family:var(--mono);font-size:.69rem;color:var(--fg-mute);border:1px solid var(--line-2);padding:4px 9px;border-radius:5px}
  .more{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-family:var(--mono);font-size:.84rem;color:var(--signal);font-weight:500;transition:gap .15s}
  .more:hover{gap:13px}

  /* flex-wrap, because four links -- Watch, Repo, a named evidence link and Deep dive -- do
     not fit one 330px line and a nowrap flex row does not care: it overflows its card and takes
     the document with it. Measured at 390px, the last two pushed the page to 397px. */
  .bfoot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:20px;
         padding-top:15px;border-top:1px solid var(--line)}
  .blink{min-width:0}
  .blink{font-family:var(--mono);font-size:.78rem;color:var(--fg-mute);display:inline-flex;align-items:center;gap:7px;transition:color .15s}
  .blink:hover{color:var(--signal)}
  .blink svg{width:13px;height:13px;flex:none}
  button.blink{background:none;border:none;padding:0;cursor:pointer}

  .evgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  .ev{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
      display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
  .ev:hover{border-color:rgba(39,227,154,.32);transform:translateY(-3px)}
  .ev img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line);background:#0A1A1D}
  .ev figcaption{padding:19px 21px 21px;color:var(--fg-mute);font-size:.9rem;line-height:1.55}
  .ev figcaption b{display:block;color:#fff;font-family:var(--display);font-weight:600;font-size:1rem;
                   line-height:1.3;margin-bottom:7px}
  .ev figcaption code{font-family:var(--mono);font-size:.84em;color:var(--fg)}
  .ev figcaption a{display:inline-block;margin-top:11px;font-family:var(--mono);font-size:.76rem;
                   color:var(--signal);transition:opacity .15s}
  .ev figcaption a:hover{opacity:.75}

  /* 16:9 cards. The walkthroughs were 3:4 for the LinkedIn feed, which is right on a phone
     and wrong on a laptop — a portrait video wastes about 60% of the screen and reads as
     reposted social content. tools/video/build_wide.py composites each portrait master into
     a 1920x1080 frame whose right side carries the title, the number and the stack, so the
     horizontal space is filled with information instead of black bars. */
  .vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:42px}
  .vcard{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);cursor:pointer;text-align:left;transition:transform .2s,border-color .2s,box-shadow .2s}
  .vcard:hover{transform:translateY(-4px);border-color:rgba(39,227,154,.45);box-shadow:0 24px 50px -28px rgba(0,0,0,.8)}
  /* height:auto is load-bearing: the width/height attributes on the <img> map to a
     presentational height, and a specified height wins over aspect-ratio — the card
     renders 900px tall and object-fit crops the poster to a vertical slice. */
  .vcard img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.86;transition:opacity .2s}
  .vcard:hover img{opacity:1}
  .vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 52%,rgba(8,23,26,.88) 100%);pointer-events:none}
  /* The poster banner puts the title and the number on the right; the play glyph sits over
     the video slot on the left rather than on top of the metric. */
  .vplay{position:absolute;top:50%;left:23%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(39,227,154,.92);color:#04130D;display:grid;place-items:center;z-index:2;transition:transform .2s,background .2s}
  .vplay svg{width:20px;height:20px;margin-left:3px}
  .vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.09);background:var(--signal)}
  .vmeta{position:absolute;right:0;bottom:0;z-index:2;padding:14px 16px}
  .vmeta b{font-family:var(--display);font-weight:600;font-size:1rem;color:#fff;line-height:1.2}
  .vmeta i{font-family:var(--mono);font-style:normal;font-size:.72rem;color:var(--fg-mute);flex:none}
  .vnote{font-family:var(--mono);font-size:.76rem;color:var(--fg-dim);margin-top:20px}

  .lb[hidden]{display:none}
  .lb{position:fixed;inset:0;z-index:100;background:rgba(4,12,14,.93);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 20px}
  .lb video{width:min(100%,1500px);aspect-ratio:16/9;max-height:82vh;object-fit:contain;border-radius:14px;border:1px solid var(--line-2);background:#000;box-shadow:0 50px 110px -40px rgba(0,0,0,.9)}
  .lb-t{font-family:var(--mono);font-size:.82rem;color:var(--fg-mute);margin-top:16px;text-align:center}
  .lb-x{position:absolute;top:20px;right:22px;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);background:rgba(14,38,43,.85);color:var(--fg);font-size:1.1rem;cursor:pointer;display:grid;place-items:center;transition:border-color .15s,color .15s}
  .lb-x:hover{border-color:var(--signal);color:#fff}

  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
  .chip{font-family:var(--mono);font-size:.78rem;color:var(--fg-mute);border:1px solid var(--line-2);padding:8px 13px;border-radius:7px}
  .chip.green{color:var(--signal);border-color:rgba(39,227,154,.35)}

  /* --- Long-form articles ---------------------------------------------------- */
  .prose{padding:64px 0 96px}
  .prose .wrap{max-width:760px}
  .prose-index{padding-top:64px}
  .crumb{font-family:var(--mono);font-size:.76rem;color:var(--fg-dim);margin-bottom:26px}
  .crumb a{color:var(--fg-mute)} .crumb a:hover{color:var(--signal)}
  .prose h1{font-size:clamp(2rem,4.2vw,3rem);color:#fff;line-height:1.08;margin-bottom:14px}
  .artmeta{font-family:var(--mono);font-size:.78rem;color:var(--fg-dim);letter-spacing:.04em;
           padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .prose h2{font-size:clamp(1.45rem,2.8vw,1.85rem);color:#fff;margin:52px 0 14px;line-height:1.2}
  .prose h3{font-size:1.2rem;color:#fff;margin:36px 0 10px}
  .prose p{color:var(--fg-mute);font-size:1.06rem;line-height:1.72;margin:0 0 20px}
  .prose p strong,.prose li strong{color:var(--fg);font-weight:600}
  .prose em{color:var(--fg)}
  /* :not(.btn) matters — .prose a is more specific than .btn-primary, so without it the
     button's dark label is repainted signal-green on a signal-green fill and disappears. */
  .prose a:not(.btn){color:var(--signal);text-decoration:underline;text-underline-offset:3px;
           text-decoration-thickness:1px;text-decoration-color:rgba(39,227,154,.4)}
  .prose a:not(.btn):hover{text-decoration-color:var(--signal)}
  .prose ul,.prose ol{color:var(--fg-mute);font-size:1.06rem;line-height:1.7;margin:0 0 22px;padding-left:1.25em}
  .prose li{margin-bottom:9px}
  .prose li::marker{color:var(--signal)}
  /* overflow-wrap on inline code, because inline code is the one thing in this prose with no
     spaces to break at. `DIM_COLUMNS: tuple[str, ...] = ("driver_id", ...)` in a sentence is a
     single unbreakable run, and on a 390px screen it pushed the whole document to 439px -- the
     page scrolled sideways, not the code. Block code keeps its own scroller: breaking a line of
     Python mid-token to avoid a scrollbar makes it wrong rather than narrow. */
  .prose code{font-family:var(--mono);font-size:.87em;color:var(--fg);background:rgba(226,240,237,.06);
              padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}
  .prose pre code{overflow-wrap:normal}
  .prose pre{background:var(--deep);border:1px solid var(--line-2);border-radius:12px;padding:20px 22px;
             overflow-x:auto;margin:0 0 24px}
  .prose pre code{background:none;padding:0;font-size:.86rem;line-height:1.6;color:var(--fg-mute)}
  .prose blockquote{margin:0 0 24px;padding:4px 0 4px 22px;border-left:2px solid var(--signal)}
  .prose blockquote p{color:var(--fg);font-size:1.08rem;margin-bottom:10px}
  .prose blockquote p:last-child{margin-bottom:0}
  .prose hr{border:none;border-top:1px solid var(--line);margin:44px 0}
  .prose figure{margin:34px 0}
  .prose figure img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line-2);background:#0A1A1D}
  .prose figcaption{font-size:.88rem;color:var(--fg-dim);line-height:1.55;margin-top:11px;
                    padding-left:14px;border-left:2px solid var(--line-2)}
  .prose table{width:100%;border-collapse:collapse;font-size:.93rem;margin-bottom:8px}
  .prose th{text-align:left;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
            color:var(--fg-dim);font-weight:400;padding:0 14px 11px 0;border-bottom:1px solid var(--line-2)}
  .prose td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg-mute)}
  .prose .tblwrap{overflow-x:auto;margin-bottom:26px}

  .artfoot{margin-top:64px;padding-top:34px;border-top:1px solid var(--line)}
  .artfoot>p{color:var(--fg-mute);margin-bottom:20px}
  .prevnext{display:flex;gap:16px;justify-content:space-between;margin-top:40px;padding-top:26px;
            border-top:1px solid var(--line);flex-wrap:wrap}
  .pn{font-family:var(--mono);font-size:.8rem;color:var(--fg-mute);max-width:19em;line-height:1.45;transition:color .15s}
  .pn:hover{color:var(--signal)}
  .pn.next{margin-left:auto;text-align:right}

  .wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
  .wcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;
         transition:transform .2s,border-color .2s}
  .wcard:hover{transform:translateY(-4px);border-color:rgba(39,227,154,.35)}
  .wcard .wnum{font-family:var(--mono);font-size:.72rem;color:var(--signal);letter-spacing:.1em}
  .wcard h3{font-family:var(--display);font-weight:600;font-size:1.2rem;color:#fff;margin:12px 0 10px;line-height:1.25}
  .wcard p{color:var(--fg-mute);font-size:.94rem;line-height:1.6;margin-bottom:16px}
  .wcard .wmeta{font-family:var(--mono);font-size:.72rem;color:var(--fg-dim)}

  .foot{border-top:1px solid var(--line);padding:108px 0 60px;text-align:center;position:relative;overflow:hidden}
  .foot::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 300px at 50% 0%, rgba(39,227,154,.1), transparent 65%);pointer-events:none}
  .foot h2{font-size:clamp(2.2rem,5vw,3.4rem);color:#fff;margin-bottom:32px;position:relative}
  .foot .cta-row{justify-content:center;position:relative}
  .foot small{display:block;margin-top:34px;font-family:var(--mono);font-size:.74rem;color:var(--fg-dim);letter-spacing:.06em}

  /* Footer sitemap. Plain links, no JavaScript: this is what a crawler follows and what a
     visitor with the drawer closed still has. Every page the site owns is reachable here. */
  .footnav{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
           margin-top:54px;padding-top:30px;border-top:1px solid var(--line)}
  .footnav a{font-family:var(--mono);font-size:.8rem;color:var(--fg-mute);transition:color .15s}
  .footnav a:hover{color:var(--signal)}

  /* Stack index. A named, honest inventory of what was actually used in the six builds —
     the query someone types is "Unity Catalog column mask GDPR", not "responsible AI". */
  .stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
  .stack-col{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
  .stack-col h3{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.14em;
                text-transform:uppercase;color:var(--signal);margin-bottom:16px}
  .stack-col ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
  .stack-col li{font-family:var(--mono);font-size:.72rem;color:var(--fg-mute);
                border:1px solid var(--line-2);padding:5px 9px;border-radius:6px}
  /* Risk & human oversight spans the row: it comes first and the other six answer to it,
     which is also how the trust-layer diagram draws it — a band across the top of the panel.
     Seven cards in a 3-column grid would otherwise leave an orphan. */
  .cap-wide{grid-column:1/-1}

  .stack-note{font-family:var(--mono);font-size:.76rem;color:var(--fg-dim);margin-top:24px}

  /* The one diagram on the site. Inline SVG, brand palette, no image request — and it says
     the positioning in five seconds, which six paragraphs of capability copy cannot. */
  .diagram{margin-top:52px}
  .diagram svg{display:block;width:100%;height:auto;min-width:0}
  .diagram figcaption{font-size:.9rem;color:var(--fg-dim);line-height:1.6;margin-top:18px;
                      padding-left:15px;border-left:2px solid var(--line-2);max-width:44em}
  /* Two cuts of the same diagram, one wide and one tall, swapped at the breakpoint. This
     used to be one 1200x400 SVG pinned at 700px inside `overflow-x:auto`, which on a phone
     showed 47% of it and asked the reader to drag for the rest -- measured at a 390px
     viewport before this was written. Shrinking it instead is not an option: at 360px the
     labels fall under 7px. The content is a sequence, so on a narrow screen it stacks.
     Both selectors are qualified with .diagram, because `.diagram svg{display:block}` above
     is (0,1,1) and a bare `.dg-tall` is (0,1,0) -- the block wins and both cuts render.
     The breakpoint is 900px, not the 700 that was here before. The smallest label in the wide
     cut is 11.5 units of a 1200 viewBox, so it renders at 11.5 x (width/1200): at a 768px
     viewport that is 6.5px, which is not a diagram, it is a texture. 900px is where it clears
     8px. The tall cut is capped at 420px and centred, or on a 768px tablet it would stretch to
     708x1573 and become a scroll of its own. */
  .diagram .dg-tall{display:none}
  @media(max-width:900px){
    .diagram .dg-wide{display:none}
    .diagram .dg-tall{display:block;max-width:420px;margin-inline:auto}
  }

  /* The home page carries a teaser; the assessment itself lives on score.html. Fourteen
     questions inline pushed the reference builds and the receipts ~2,500px down the page,
     and asked for three minutes of work before showing any reason to give them. */
  .scoreteaser{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
  @media(max-width:880px){ .scoreteaser{grid-template-columns:1fr;gap:34px} }

  /* The one photograph on the site. A one-person consultancy sells a person, and the About
     section was text only. It is a real portrait, not a stock image — the site's own rule. */
  .aboutgrid{display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:start}
  .portrait{margin-top:22px}
  .portrait img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line-2);
                background:var(--card)}
  .portrait figcaption{font-family:var(--mono);font-size:.76rem;color:var(--fg);margin-top:13px;
                       display:flex;flex-direction:column;gap:3px}
  .portrait figcaption span{color:var(--fg-dim);font-size:.72rem}
  @media(max-width:880px){
    .aboutgrid{grid-template-columns:1fr;gap:8px}
    .portrait{max-width:220px}
  }

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  :focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:5px}

  /* Keyboard users land on the nav first; this lets them jump past it. */
  .skip{position:absolute;left:-9999px;top:0;z-index:200}
  .skip:focus{left:14px;top:14px;padding:11px 18px;background:var(--signal);color:#04130D;
              border-radius:8px;font-weight:600;font-size:.92rem}

  .framework-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;margin-top:38px;align-items:start}
  .dimlist{list-style:none}
  .dimrow{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line)}
  .dimrow:first-child{border-top:none}
  .dimrow .dn{font-family:var(--mono);font-size:.72rem;color:var(--signal);flex:none;width:22px}
  .dimrow .dname{color:var(--fg);font-size:.98rem;flex:1}
  .dimrow .dw{font-family:var(--mono);font-size:.74rem;color:var(--fg-mute);flex:none}
  .mat{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .mat .lvl{font-family:var(--mono);font-size:.7rem;color:var(--fg-mute);border:1px solid var(--line-2);padding:5px 10px;border-radius:6px}
  .scale-card{background:linear-gradient(180deg,var(--deep-2),var(--deep));border:1px solid var(--line-2);border-radius:16px;padding:26px;box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
  .bandbar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:12px 0 18px}
  .bandbar i{flex:1}
  .bandbar .b1{background:rgba(240,179,65,.45)}
  .bandbar .b2{background:rgba(240,179,65,.8)}
  .bandbar .b3{background:var(--signal-2)}
  .bandbar .b4{background:var(--signal)}
  .bandrow{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:.74rem;padding:8px 0;border-top:1px solid var(--line)}
  .bandrow b{color:var(--fg);font-weight:500}
  .bandrow .r{color:var(--fg-dim)}
  .maps{margin-top:15px;padding-top:13px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--signal)}
  .maps .ml{color:var(--fg-dim);text-transform:uppercase;letter-spacing:.12em;margin-right:9px}

  @media(max-width:880px){
    .nav-toggle{display:grid}
    /* nav has backdrop-filter, which makes it the containing block for a fixed child --
       so top:66px is measured from the bar, not the viewport. Solid background, not the
       bar's translucent one: at .97 alpha the hero headline still ghosted through. */
    .nav-links{position:fixed;left:0;right:0;top:66px;display:none;flex-direction:column;
               align-items:stretch;gap:0;padding:6px 30px 22px;background:var(--void);
               border-bottom:1px solid var(--line-2);box-shadow:0 24px 40px -20px rgba(0,0,0,.8);
               max-height:calc(100dvh - 66px);overflow-y:auto}
    .nav-links.open{display:flex}
    .nav-links a.lnk{font-size:1rem;padding:15px 2px;border-bottom:1px solid var(--line)}
    .nav-end .btn{font-size:.84rem;padding:9px 14px}
    .hero-in{grid-template-columns:minmax(0,1fr);gap:46px;padding:64px 0 72px}
    .two{grid-template-columns:minmax(0,1fr);gap:26px}
    .caps{grid-template-columns:minmax(0,1fr)}
    .offer{grid-template-columns:minmax(0,1fr);padding:34px;gap:30px}
    .builds{grid-template-columns:minmax(0,1fr)}
    .sc-wrap{grid-template-columns:minmax(0,1fr);gap:26px}
    .evgrid{grid-template-columns:minmax(0,1fr)}
    .wgrid{grid-template-columns:minmax(0,1fr)}
    .prose{padding:44px 0 64px}
    .sc-result .panel{position:static!important}
    .vgrid{grid-template-columns:minmax(0,1fr)}
    .stack-grid{grid-template-columns:1fr}
    .framework-grid{grid-template-columns:1fr;gap:30px}
    .section{padding:74px 0}
    .lb video{width:100%}
  }
  @media(max-width:540px){
    /* On a phone the bar holds the glyph, the CTA and the menu button — the wordmark is
       the one of the four that the <h1> immediately below already says. */
    .brand .bname{display:none}
    .cta-long{display:none}
    .cta-short{display:inline}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}.scan{display:none}
  }


  /* A real scan of a real repository, sitting where the visitor is already deciding
     whether to score their own. It is deliberately not the author's best system. */
  .scanproof{margin:46px auto 0;max-width:820px}
  .scanproof a{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;
    background:var(--card);transition:border-color .2s,transform .2s,box-shadow .2s}
  .scanproof a:hover{border-color:rgba(39,227,154,.45);transform:translateY(-4px);
    box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
  .scanproof img{display:block;width:100%;height:auto}
  .scanproof figcaption{color:var(--fg-mute);font-size:.92rem;line-height:1.6;margin-top:16px;
    max-width:60ch}
  .scanproof figcaption strong{color:var(--fg);font-weight:600}
  .scanproof figcaption a{display:inline;border:none;background:none;color:var(--signal);
    white-space:nowrap;margin-left:4px}
  .scanproof figcaption a:hover{transform:none;box-shadow:none;text-decoration:underline}

  /* Six equal tiles is six equal decisions. One leads, five follow. */
  .vcard-lead{grid-column:1 / -1}
  .vcard-lead .vmeta i{font-size:.9rem}
  @media(max-width:880px){ .vcard-lead{grid-column:auto} }

  /* The maturity scale is a climb, and a list of four rows is flat. */
  .ladder{display:block;width:100%;height:auto;margin:18px 0 4px}

  /* Seven sections of prose tell you what the framework is; one picture shows you,
     so the sections are read because they are wanted rather than to orient. */
  .dimmap{margin:30px 0 8px;padding:24px 26px;border:1px solid var(--line);
    border-radius:14px;background:var(--card)}
  .dimmap svg{display:block;width:100%;height:auto}
  .dimmap figcaption{color:var(--fg-dim);font-size:.88rem;line-height:1.6;margin-top:18px;
    border-top:1px solid var(--line);padding-top:14px;max-width:64ch}