/* DevAutomation Labs — site stylesheet.
   Hand-edited, no build step. Bump the filename (site.v3.css) when you change it:
   the Cache-Control header in next.config.mjs pins this file for a year. */

/* Self-hosted, latin subset only — it covers every glyph used on the site.
   Replaces two render-blocking third-party requests (fonts.googleapis.com for the
   stylesheet, then fonts.gstatic.com for the files), each needing its own DNS + TLS
   handshake. Now same-origin and preloaded in <head>. Inter Tight is a variable font:
   all four weights resolve to one file. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-tight-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-tight-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-tight-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-tight-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#F2F2EF; --card:#FFFFFF; --ink:#141414; --ink2:#5C5C56;
  --line:#CFCFC7; --signal:#D9410F;
  /* Between --line and --ink2, for rules that need weight without going dark. */
  --line-mid:#A3A39B;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Safari: strip native control chrome so borders/backgrounds render flat */
input,select,textarea,button{-webkit-appearance:none;appearance:none;border-radius:0;font:inherit;color:inherit}
textarea{resize:vertical}
body{background:var(--bg);color:var(--ink);font-family:'Inter Tight',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-weight:600;line-height:1.1;letter-spacing:-.025em}
.mono{font-family:'IBM Plex Mono',monospace}
.tag{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.tag b{color:var(--signal);font-weight:500}

/* top bar */
.bar{border-bottom:1px solid var(--line);background:var(--bg);position:-webkit-sticky;position:sticky;top:0;z-index:50}
.bar-in{display:flex;justify-content:space-between;align-items:stretch;height:60px}
.mark{align-self:center}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.mark .glyph{width:26px;height:26px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;color:var(--signal)}
.bar nav{display:flex;gap:0;align-items:stretch}
.bar nav a{display:flex;align-items:center;padding:0 16px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink2);border-left:1px solid var(--line)}
.bar nav a:hover{color:var(--ink);background:#fff}
/* Client Login is the one nav item existing customers come back for — colour it
   so it reads apart from the marketing links without competing with the CTA. */
.bar nav a.login{color:var(--signal);font-weight:500}
.bar nav a.login:hover{color:var(--signal);background:#fff}
.bar nav a.cta{background:var(--ink);color:#fff;border-left:1px solid var(--ink)}
.bar nav a.cta:hover{background:var(--signal);color:#fff}

/* hero — full width statement */
.hero{border-bottom:1px solid var(--line)}
.hero-main{padding:96px 0 88px}
.hero h1{font-size:clamp(2.8rem,7vw,5.4rem);letter-spacing:-.035em;max-width:16em}
.hero h1 span{color:var(--signal)}
.hero .deck{font-size:1.18rem;color:var(--ink2);margin-top:26px;max-width:50ch}
.acts{margin-top:38px;display:flex;gap:10px;flex-wrap:wrap}
/* capability strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);overflow:hidden}
.strip-in{display:flex;align-items:stretch;max-width:1180px;margin:0 auto}
.strip-in span{flex:1 1 auto;min-width:0;padding:16px 18px;border-left:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-in span:first-child{border-left:none;color:var(--signal)}
.btn{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border:1px solid var(--ink);color:var(--ink);background:none;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--ink);color:#fff}
.btn.fill{background:var(--ink);color:#fff}
.btn.fill:hover{background:var(--signal);border-color:var(--signal)}
/* spec table (in About) */
.spec{border:1px solid var(--line);background:var(--card)}
.spec dl{display:grid;grid-template-columns:auto 1fr}
.spec dt,.spec dd{padding:13px 18px;border-bottom:1px solid var(--line);font-size:.85rem}
.spec dl>*:nth-last-child(-n+2){border-bottom:none}
.spec dt{font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border-right:1px solid var(--line);white-space:nowrap}
.spec dd{font-weight:500}

section{border-bottom:1px solid var(--line);padding:64px 0}
.head{max-width:62ch;margin-bottom:40px}
.head h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.head p{color:var(--ink2);margin-top:12px}

/* services: bordered table cells, square corners */
.svc{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--line);gap:1px}
.svc>div{background:var(--card);padding:28px 26px}
.svc .hdr{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.svc .idx{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--signal);border:1px solid var(--line);padding:4px 7px}
.svc h3{font-size:1.12rem}
.svc p{color:var(--ink2);font-size:.93rem;margin-bottom:16px}
.svc ul{list-style:none}
.svc li{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--ink2);padding:6px 0;border-top:1px dotted var(--line)}

/* idea band */
.idea{background:var(--ink);color:#F2F2EF;border-bottom:none}
.idea h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.idea h2 span{color:#FF7A45}
.idea .head p{color:#A3A39B}
.idea .tag{color:#A3A39B}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #3A3A34;background:#3A3A34;gap:1px}
.grid4>div{background:var(--ink);padding:24px 20px}
.grid4 h3{font-size:.96rem;margin-bottom:8px}
.grid4 p{font-size:.86rem;color:#A3A39B}
.idea .btn{border-color:#F2F2EF;color:#F2F2EF;margin-top:34px}
.idea .btn:hover{background:#F2F2EF;color:var(--ink)}

/* process: numbered ruled list */
.proc{border-top:1px solid var(--line)}
.proc .p{display:grid;grid-template-columns:80px 240px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.proc .p .k{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--signal);letter-spacing:.1em}
.proc .p h3{font-size:1.05rem}
.proc .p p{color:var(--ink2);font-size:.93rem}

/* who */
.who{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);background:var(--line);gap:1px}
.who>div{background:var(--card);padding:24px}
.who h3{font-size:1rem;margin-bottom:6px}
.who p{color:var(--ink2);font-size:.92rem}

/* about */
.ab{display:grid;grid-template-columns:1.3fr 1fr;gap:56px}
.ab p{color:var(--ink2);margin-bottom:16px}
.ab .note{border:1px solid var(--line);background:var(--card);padding:24px}
.ab .note .tag{display:block;margin-bottom:10px}
.ab .note p{color:var(--ink);font-size:1.02rem;margin:0}

/* contact — the closing section. Process, Who, and About all sit on the page
   background, so without its own surface this one just drifts. A white band
   under a heavy rule marks it as the place to act. */
#contact{background:var(--card);border-top:3px solid var(--line-mid);padding:56px 0 64px}
.ct{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start}
.ct h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:14px}
.ct .lead{color:var(--ink2);margin-bottom:20px}
.ct .direct{font-family:'IBM Plex Mono',monospace;font-size:.84rem}
.ct .direct a{color:var(--signal)}
/* The form is far taller than the intro text, leaving the left column empty.
   This restates the process to balance the column. */
.ct .next{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}
.ct .next .tag{display:block;margin-bottom:10px}
.ct .next ol{list-style:none}
.ct .next li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:7px 0;font-size:.89rem;color:var(--ink2);align-items:baseline}
.ct .next .k{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--signal)}
/* Sits on the same white as the section behind it, so the outline has to do the
   work of separating them — heavier than a hairline, but grey so it frames the
   form without shouting. */
form{border:2px solid var(--line-mid);background:var(--card)}
.fr{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--line)}
.fr:last-of-type{border-bottom:none}
.fr label{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);padding:16px;border-right:1px solid var(--line);display:flex;align-items:center}
.fr input,.fr select,.fr textarea{border:none;background:none;padding:14px 16px;font-family:'Inter Tight',sans-serif;font-size:.96rem;color:var(--ink);width:100%;display:block}
.fr select{padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235C5C56' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
.fr input:focus,.fr select:focus,.fr textarea:focus{outline:none;background-color:#FFF8F5;box-shadow:inset 0 0 0 2px var(--signal)}
.fr select:focus{background-color:#FFF8F5}
.fsub{padding:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fsub .fine{font-size:.76rem;color:var(--ink2)}
.fsub .fine a{color:var(--ink2)}
/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields
   but not positioned ones. Never announced to screen readers (aria-hidden). */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Submission result, revealed by the ?sent= param the client area redirects to. */
.formnote{display:none;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--signal);background:var(--card);font-size:.88rem;margin-bottom:18px}
.formnote.show{display:block}
.formnote.ok{border-left-color:#1f7a4d}
.formnote strong{color:var(--ink)}

/* ---- submission feedback ------------------------------------------------ */
/* The note belongs with the form, not beside it. On the homepage the contact
   section is a two-column grid, so a confirmation rendered in the left column
   appeared well away from where the visitor was actually looking.
   On success the note covers the form and the form fades back. On an error it
   stays inline above the form, because the visitor still has to be able to fix
   the field and resubmit — fading it out would trap them. */
.formwrap{position:relative}
.formwrap form{transition:opacity .25s ease, filter .25s ease}
.formwrap.done form{opacity:.14;filter:saturate(.2);pointer-events:none}
.formwrap.done .formnote{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100% - 40px));margin:0;z-index:5;
  padding:26px 28px;border:2px solid var(--line-mid);
  box-shadow:0 20px 48px rgba(20,20,20,.16);font-size:.95rem
}
.formwrap.done .formnote.ok{border-color:#1f7a4d}
.formnote .again{
  display:block;margin-top:14px;background:none;border:none;padding:0;
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal);cursor:pointer;text-decoration:underline
}
@media(prefers-reduced-motion:reduce){.formwrap form{transition:none}}

footer{padding:26px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:var(--ink2)}
footer a{color:var(--ink2)}
@media(max-width:900px){
 .ab,.ct{grid-template-columns:1fr}
 .hero-main{padding:56px 0 48px;max-width:none}
 .strip-in{flex-wrap:wrap}
 .strip-in span{flex:1 1 50%;border-top:1px solid var(--line)}
 .svc,.grid4,.who{grid-template-columns:1fr}
 .proc .p{grid-template-columns:1fr}
 .fr{grid-template-columns:1fr}
 .fr label{border-right:none;border-bottom:1px solid var(--line)}
}

/* ==========================================================================
   Added for the multi-page site (Phase 3). Everything above this line is the
   original homepage stylesheet, moved out of index.html unchanged apart from
   the removal of `.bar nav a:not(.cta){display:none}`, which the mobile
   drawer below replaces.
   ========================================================================== */

/* ---- header: mobile drawer -------------------------------------------- */
/* CSS-only. A visually-hidden checkbox drives the panel via :checked, so the
   nav works with JavaScript disabled. The checkbox stays focusable so the
   menu is reachable by keyboard. */
.navtoggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.navwrap{display:flex;align-items:stretch}
.burger{display:none}
/* The bar CTA appears twice in the markup: once inside <nav>, which becomes the
   mobile drawer, and once as a sibling of it so the button survives when the
   drawer closes. Exactly one of the two is displayed at any width. */
.navwrap>a.cta{display:none;align-items:center;padding:0 16px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:#fff;border-left:1px solid var(--ink);line-height:1.2}
.navwrap>a.cta:hover{background:var(--signal)}
.burger .bars{display:block;width:15px;height:9px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}
.burger .bars::after{content:"";position:absolute;top:50%;left:0;right:0;height:0;border-top:1.5px solid currentColor;transform:translateY(-50%)}

/* ---- breadcrumbs ------------------------------------------------------- */
.crumbs{border-bottom:1px solid var(--line);background:var(--card)}
.crumbs ol{max-width:1180px;margin:0 auto;padding:13px 28px;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.crumbs li{display:flex;align-items:center;gap:9px}
.crumbs li+li::before{content:"/";color:var(--line-mid)}
.crumbs a{color:var(--ink2);text-decoration:none}
.crumbs a:hover{color:var(--signal)}
.crumbs [aria-current]{color:var(--ink)}

/* ---- interior page hero ------------------------------------------------ */
.phero{border-bottom:1px solid var(--line)}
.phero .in{padding:66px 0 58px;max-width:44rem}
.phero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);letter-spacing:-.032em;margin-top:18px}
.phero h1 span{color:var(--signal)}
.phero .deck{font-size:1.1rem;color:var(--ink2);margin-top:22px}
.phero .acts{margin-top:32px;display:flex;gap:10px;flex-wrap:wrap}

/* ---- long-form body copy ----------------------------------------------- */
.prose{max-width:44rem}
.prose p{color:var(--ink2);margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.prose ul{color:var(--ink2);padding-left:20px;margin:0 0 16px}
.prose li{margin-bottom:7px}
.prose h3{font-size:1.06rem;margin:28px 0 9px}
.prose a{color:var(--signal)}
/* The direct answer that sits immediately under an h2. Phase 4 leans on this. */
.answer{font-size:1.06rem;color:var(--ink);border-left:3px solid var(--signal);padding-left:18px;margin-bottom:22px;max-width:44rem}

/* ---- related links ----------------------------------------------------- */
.rel{border-top:1px solid var(--line);background:var(--card)}
.rel .in{padding:44px 0}
.rel .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.rel .cols>a{background:var(--card);padding:22px;text-decoration:none;display:block}
.rel .cols>a:hover{background:var(--bg)}
.rel h3{font-size:.98rem;color:var(--ink);margin-bottom:7px}
.rel p{font-size:.87rem;color:var(--ink2)}

/* ---- closing call to action -------------------------------------------- */
.band{border-top:1px solid var(--line);background:var(--ink);color:#fff}
.band .in{padding:56px 0;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.band h2{font-size:clamp(1.5rem,3vw,2.1rem);max-width:20ch}
.band p{color:#A3A39B;margin-top:10px;max-width:46ch;font-size:.95rem}
.band .btn{border-color:#fff;color:#fff}
.band .btn:hover{background:#fff;color:var(--ink)}
.band .btn.fill{background:var(--signal);border-color:var(--signal);color:#fff}
.band .btn.fill:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* ---- footer sitemap ---------------------------------------------------- */
/* Every page stays two clicks from anywhere, drawer open or not. */
.fsite{border-top:1px solid var(--line);padding:46px 0 8px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.fsite h2{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);font-weight:400;margin-bottom:14px}
.fsite ul{list-style:none}
.fsite li{margin-bottom:9px}
.fsite a{font-size:.88rem;color:var(--ink);text-decoration:none}
.fsite a:hover{color:var(--signal)}

/* ---- FAQ --------------------------------------------------------------- */
/* Deliberately not a <details> accordion. Answer engines and crawlers extract
   visible, self-contained passages most reliably, and there is nothing here
   worth hiding behind a click. */
.faq{max-width:48rem;margin-top:24px}
.faq .q{padding-top:26px;margin-top:26px;border-top:1px solid var(--line)}
.faq .q:first-child{padding-top:0;margin-top:0;border-top:none}
.faq h3{font-size:1.12rem;letter-spacing:-.02em;margin-bottom:12px}
.faq .a{font-size:1.02rem;color:var(--ink);border-left:3px solid var(--signal);padding-left:18px;margin-bottom:16px}
.faq p{color:var(--ink2);margin-bottom:13px}
.faq p:last-child{margin-bottom:0}
.faq ul{color:var(--ink2);padding-left:20px;margin:0 0 13px}
.faq li{margin-bottom:6px}
.faq strong{color:var(--ink);font-weight:600}
.faq a{color:var(--signal)}

/* ---- definition and comparison blocks ---------------------------------- */
.cmp{border:1px solid var(--line);background:var(--card);margin:20px 0 6px;overflow-x:auto}
.cmp table{border-collapse:collapse;width:100%;min-width:520px}
.cmp th,.cmp td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.9rem}
.cmp tr:last-child td{border-bottom:none}
.cmp th{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:400;background:var(--bg)}
.cmp td:first-child{color:var(--ink);font-weight:600;width:22%}
.cmp td{color:var(--ink2)}
.def{border-left:3px solid var(--line-mid);padding:4px 0 4px 18px;margin:18px 0}
.def dt{font-weight:600;color:var(--ink);margin-bottom:5px}
.def dd{color:var(--ink2);font-size:.94rem}

/* ---- policy / long document pages -------------------------------------- */
/* Scoped to `main` on purpose. These pages share the header and footer with
   every other page, so an unscoped `.doc h2` would restyle the footer sitemap
   headings and an unscoped `.doc .wrap` would squeeze the header to 820px. */
.doc main{padding:60px 0 72px;line-height:1.7}
.doc main .wrap{max-width:820px}
.doc main h1{font-size:clamp(2rem,4vw,2.9rem);margin:10px 0 6px}
.doc main h2{font-size:1.2rem;margin:38px 0 10px;padding-top:20px;border-top:1px solid var(--line);font-family:inherit;letter-spacing:-.025em;text-transform:none;color:var(--ink);font-weight:600}
.doc main h2 .n{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--signal);letter-spacing:.1em;margin-right:10px}
.doc main p{color:var(--ink2);margin-bottom:14px}
.doc main ul{color:var(--ink2);padding-left:20px;margin-bottom:14px}
.doc main li{margin-bottom:6px}
.doc main strong{color:var(--ink);font-weight:600}
.doc main a{color:var(--signal)}
.doc main .updated{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink2);letter-spacing:.1em;text-transform:uppercase}
.doc main .intro{margin-top:28px;padding:20px 22px;border:1px solid var(--line);background:var(--card);color:var(--ink2);font-size:.95rem}
.back{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink2)}
.back:hover{color:var(--ink)}

/* ---- responsive -------------------------------------------------------- */
@media(max-width:900px){
  .bar nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 10px 26px rgba(20,20,20,.07);z-index:60}
  .navtoggle:checked~.bar-in nav{display:flex}
  .bar nav a{border-left:none;border-top:1px solid var(--line);padding:15px 28px;font-size:.78rem}
  .bar nav a.cta{display:none}
  .burger{display:flex;align-items:center;gap:9px;padding:0 15px;border-left:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);cursor:pointer;-webkit-user-select:none;user-select:none}
  .burger:hover{color:var(--ink)}
  .navwrap>a.cta{display:flex}
  .navtoggle:focus-visible~.bar-in .burger{outline:2px solid var(--signal);outline-offset:-2px}
  .phero .in{padding:46px 0 40px}
  .rel .cols{grid-template-columns:1fr}
  .band .in{padding:42px 0;flex-direction:column;align-items:flex-start;gap:22px}
  .fsite{grid-template-columns:repeat(2,1fr);gap:26px}
}
@media(max-width:560px){
  .fsite{grid-template-columns:1fr}
}