/* ==========================================================================================================
   hardno.ai site stylesheet (shared by index.html and use-cases.html)

   The look: a dark control-room page. Near-black background, warm off-white text, and one loud color,
   signal red (#FF5B35), used only for things that mean "stop" or "this matters": the chip in the logo, the
   main buttons, the verdict stamps. Like a cockpit, everything is dim except the warning lights.

   Type: IBM Plex, loaded from Google Fonts in each page's <head>.
     - IBM Plex Sans Condensed for headlines (tall and tight, like a newspaper headline)
     - IBM Plex Sans for reading text
     - IBM Plex Mono for labels, tags and anything that should read like a machine printout
   Sizes use clamp(smallest, preferred, largest) so text scales smoothly from a phone to a big monitor
   without a separate phone layout for every element.

   Sections below, in order: color palette, page basics, type, layout blocks, cards and buttons, header and
   navigation, tables and verdicts, FAQ, status list, footer, rotating mottos, the use-cases page, brand.

   No dashes rule: the project avoids em and en dashes, so the build refuses any here; use plain hyphens.
   ========================================================================================================== */

/* ---- Color palette. Every color on the site comes from these named variables, so a change here changes it everywhere. */
:root{
  --bg:#0B0C0E;         /* page background, near black */
  --bg2:#0F1013;        /* alternate section background, one shade lighter, to separate sections */
  --card:#111216;       /* card and box backgrounds */
  --line:#23252A;       /* faint divider lines */
  --line2:#33363C;      /* stronger borders around cards and tables */
  --ink:#ECE9E2;        /* main text, warm off-white (easier on the eyes than pure white) */
  --muted:#C9C5BC;      /* secondary text */
  --dim:#9A978F;        /* labels and small print */
  --accent:#FF5B35;     /* signal red: stop, the chip, the main call to action */
  --accent-ink:#FF6A45; /* signal red tuned slightly lighter for small text, so it stays readable on black */
  --hold:#F2C14E;       /* amber: "hold for a human" verdicts */
  --hot:#17120F;        /* a dark red-brown wash behind highlighted rows and cards */
}

/* ---- Page basics */
*{box-sizing:border-box}                       /* widths include padding and borders, so boxes never overflow by surprise */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* in-page links glide; iPhones and Android phones keep the type size we set when the phone turns sideways */
img,svg{max-width:100%;height:auto}            /* a picture or drawing is never wider than the screen it is on */
body{overflow-wrap:break-word}                 /* a long web address or file name breaks across lines instead of pushing the page sideways */
.small,.mono,code,.formbox dd{overflow-wrap:anywhere}   /* the machine-printout text (addresses, record fields) breaks wherever it must on a narrow phone */
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:var(--accent-ink)}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}   /* the centered content column; 16px side margin on phones */
.wrap{padding-left:max(clamp(16px,4vw,40px),env(safe-area-inset-left));padding-right:max(clamp(16px,4vw,40px),env(safe-area-inset-right))}  /* written after the rule above on purpose: on a phone held sideways, keep text clear of the notch and the rounded corners */

/* ---- Type helpers and headings */
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.cond{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 20px}  /* small red label above a headline */
h1,h2,h3{font-family:'IBM Plex Sans Condensed',sans-serif;font-weight:700;margin:0}
h1{font-size:clamp(48px,8.2vw,124px);line-height:.94;letter-spacing:-.02em;max-width:13ch;margin-bottom:32px}  /* the one big headline per page */
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.01em;max-width:22ch;margin-bottom:24px}
h3{font-size:26px;font-weight:600;line-height:1.15}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:62ch;margin:0 0 16px}  /* intro paragraph; 62 characters wide reads comfortably */

/* ---- Layout blocks. Grids use auto-fit, so columns wrap into a single column on narrow screens by themselves;
   min(...px,100%) means a column never asks for more width than the screen has, so the smallest phones never scroll sideways. */
.sec{padding:clamp(72px,10vw,140px) 0;border-top:1px solid var(--line)}  /* one section of the page */
.alt{background:var(--bg2)}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.two{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

/* ---- Cards, tags and buttons */
.card{border:1px solid var(--line2);background:var(--card);padding:28px}
.card p{color:var(--muted);margin:10px 0 0;font-size:16px}
.hot{border:2px solid var(--accent);background:var(--hot)}   /* the highlighted card, the one about the chip itself */
.tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.hot .tag{color:var(--accent-ink)}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;font-weight:600;text-decoration:none;border:1px solid #4A4D54}  /* 52px tall: easy to hit with a thumb */
.btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}

/* ---- Header and navigation */
header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-weight:600;letter-spacing:.12em;font-size:14px}  /* the logo link, top left */
.nav{display:flex;gap:22px;font-family:'IBM Plex Mono',monospace;font-size:13px;white-space:nowrap}   /* one line, always; below 1100px the Menu button takes over */
.nav a{text-decoration:none;color:var(--muted)}
/* ---- The phone menu. On a wide screen the section links sit in a row (.nav) and the menu button is hidden.
   Under 820px the row hides and a Menu button (a native <details> box, so it opens and closes with no script)
   drops the same links down as a list, each 48px tall so a thumb can hit it. Same links, same order, on every
   screen size. */
.menu{display:none;position:relative;font-family:'IBM Plex Mono',monospace;font-size:13px}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line2);color:var(--ink);letter-spacing:.1em;text-transform:uppercase;font-weight:600;font-size:12px;font-family:'IBM Plex Mono',monospace}
.menu summary::-webkit-details-marker{display:none}   /* no triangle: the word Menu is the control */
.menu[open] summary{border-color:var(--accent);color:var(--accent-ink)}
.menu-list{position:absolute;right:0;top:calc(100% + 8px);min-width:260px;max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);z-index:20;box-shadow:0 12px 32px rgba(0,0,0,.5)}   /* taller than the screen: the list scrolls inside its box */
.menu-list a{display:flex;align-items:center;min-height:48px;padding:0 18px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.menu-list a:last-child{border-bottom:0}
@media (max-width:1100px){.nav{display:none}.menu{display:block}header.top .btn{display:none}}   /* narrower than 1100px: the Menu button replaces the row of links; the Get involved button moves into the menu */
@media (max-width:820px){header.top .wrap{gap:12px}}

/* ---- Tables (the comparison of defenses) and verdict badges */
table{width:100%;border-collapse:collapse;font-size:16px}
th{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--dim);text-align:left;font-weight:400;padding:14px 12px;border-bottom:1px solid var(--line2)}
td{padding:18px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
td:first-child,td:nth-child(2){color:var(--ink)}
tr.chip td{background:var(--hot);color:var(--ink);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent)}  /* the governor chip's row stands out */
.scroll{overflow-x:auto}   /* wide tables scroll sideways inside their box on phones instead of stretching the page */
.big{font-family:'IBM Plex Sans Condensed',sans-serif;font-size:64px;font-weight:700;line-height:1;display:block;margin:12px 0}  /* big numbers in the stat cards */
.verdict{font-family:'IBM Plex Mono',monospace;font-weight:600;letter-spacing:.06em;font-size:13px;padding:6px 10px;display:inline-block;white-space:nowrap}
.v-ok{border:2px solid var(--ink)}           /* allowed: an outline, quiet */
.v-hold{background:var(--hold);color:var(--bg)}  /* held for a human: amber */
.v-no{background:var(--accent);color:var(--bg)}  /* refused: solid red */
.banner{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;padding:clamp(28px,4vw,48px);background:var(--accent);color:var(--bg);margin-top:48px}  /* the full-width red callout */
.banner strong{font-family:'IBM Plex Sans Condensed',sans-serif;font-size:clamp(32px,4.4vw,56px);line-height:1;max-width:16ch}
.banner span{flex:1 1 320px;font-weight:500}

/* ---- Phone tables. A table with class "stack" keeps its columns on a wide screen. Under 700px each row becomes a
   card and each cell a label-and-value line, the label taken from the cell's data-label attribute (the same words
   as the column heading). Nothing is lost: every cell is still there, read top to bottom instead of left to right.
   The governor chip's row keeps its red outline as a red-edged card. */
@media (max-width:700px){
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack thead{display:none}   /* the column headings reappear as the label on every cell, so nothing is lost */
  table.stack tr{border:1px solid var(--line2);background:var(--card);padding:6px 16px 10px;margin-bottom:14px}
  table.stack td{display:grid;grid-template-columns:minmax(96px,.7fr) minmax(0,1.6fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
  table.stack td:last-child{border-bottom:0}
  table.stack td::before{content:attr(data-label);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:3px}
  table.stack td:first-child,table.stack td:nth-child(2){color:var(--ink)}
  table.stack tr.chip{border:2px solid var(--accent);background:var(--hot)}
  table.stack tr.chip td{border-top:0;border-bottom:1px solid var(--line2);background:transparent}
  table.stack tr.chip td:last-child{border-bottom:0}
  .scroll{overflow:visible}
  .verdict{white-space:normal}   /* a long verdict stamp wraps instead of running off the card */
}

/* ---- FAQ: native <details> boxes open and close with no script at all */
details:not(.menu){border-bottom:1px solid var(--line2);padding:22px 0}   /* the FAQ boxes; the phone menu is a details box too and is styled on its own */
details:not(.menu) summary{cursor:pointer;font-family:'IBM Plex Sans Condensed',sans-serif;font-size:24px;font-weight:600;min-height:44px}
details p{color:var(--muted);max-width:70ch}

/* ---- Status list (where the research stands) */
.status li{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);list-style:none}
.status ul{padding:0;margin:40px 0 0;border-top:1px solid var(--line2)}
.status .verdict{flex:0 0 130px;text-align:center}
.small{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--dim);margin-top:20px}

/* ---- Footer and the keyword chips in it (visible topic tags that also help search engines) */
footer{border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) 0 48px}
footer nav a{display:inline-flex;align-items:center;min-height:44px}   /* every link in the footer lists is tall enough for a thumb */
.card h3 a{display:inline-block;padding:7px 0}   /* the industry links on the front page: a taller target, same words */
.kw{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;padding:0;list-style:none}
.kw li{font-family:'IBM Plex Mono',monospace;font-size:12px;border:1px solid var(--line2);padding:6px 10px;color:var(--dim)}

/* ---- Rotating mottos. All four lines are in the page as a list. With no script, all four show. When
   site.js runs it adds the class "js" to <html>, and these rules then show one line at a time with a
   soft fade. Anyone whose device asks for reduced motion sees all four, still, and no pause button. */
.mottos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.mottos .wrap{display:flex;align-items:center;gap:20px;padding-top:28px;padding-bottom:28px}
.mottos ul{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:2.6em}   /* reserved height, so the page doesn't jump as lines change */
.mottos li{font-family:'IBM Plex Sans Condensed',sans-serif;font-weight:600;font-size:clamp(22px,2.6vw,34px);line-height:1.2;margin:6px 0;color:var(--ink)}
.mottos li::before{content:"\201C";color:var(--accent);margin-right:.06em}   /* red opening curly quote */
.mottos li::after{content:"\201D";color:var(--accent);margin-left:.02em}     /* red closing curly quote */
.mottos button{flex:0 0 auto;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;min-height:44px;padding:0 14px;background:transparent;color:var(--muted);border:1px solid var(--line2);cursor:pointer}
html.js .mottos li{display:none;margin:0}
html.js .mottos li.on{display:block;animation:fade .8s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.js .mottos li{display:block;margin:6px 0;animation:none}html.js .mottos button{display:none}}

/* ---- The use-cases page (case files: one sector per section) */
.kick{display:block;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 20px}  /* the small label above each case headline */
.sec.inv{background:var(--bg2)}
.front{padding:clamp(64px,9vw,128px) 0 clamp(48px,7vw,96px)}   /* the page's opening block */
.front h1 .ln{display:block}          /* each headline line on its own row */
.front h1 .bar{color:var(--accent)}
.deck{display:grid;gap:24px 48px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin-top:8px}  /* intro text beside a pull quote */
.deck p{margin:0;font-size:clamp(17px,1.5vw,20px);color:var(--muted)}
.deck .pull{font-family:'IBM Plex Sans Condensed',sans-serif;font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.2;color:var(--ink)}
.btn.red{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 0;padding:0;list-style:none}   /* the jump-to-a-sector buttons */
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line2);text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted)}
.toc a:hover{border-color:var(--accent);color:var(--ink)}
.cols{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.cols>div{border:1px solid var(--line2);background:var(--card);padding:28px}
.cols p{color:var(--muted);margin:10px 0 0;font-size:16px}
.num{display:block;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent-ink);margin-bottom:8px}
/* The pipeline: a row of boxes showing the path from AI to device. 1px gaps over a line-colored
   background draw the dividers. The last box (the chip) gets the red outline. */
.pipeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:32px}
.pipeline div{background:var(--bg);padding:18px 16px}
.pipeline div:last-child{background:var(--hot);box-shadow:inset 0 0 0 2px var(--accent)}
.pipeline b{display:block;font-family:'IBM Plex Sans Condensed',sans-serif;font-weight:600;font-size:20px;margin-bottom:6px}
.pipeline span{font-size:15px;color:var(--muted)}
@media (max-width:600px){.pipeline{grid-template-columns:minmax(0,1fr)}}   /* on a phone the row of boxes becomes one column, read top to bottom */
.case{display:grid;gap:28px 56px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));margin-top:32px}  /* one case file: story on one side, the form and steps on the other */
.case h4{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.case p{margin:0 0 14px;color:var(--muted)}
/* The form box: the one-time ticket the chip checks, drawn like a printed form with labels and values. */
.formbox{border:1px solid var(--line2);background:var(--card);font-size:15px}
.formbox .fh{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:10px 14px;border-bottom:1px solid var(--line2)}
.formbox dl{margin:0;display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.6fr);font-family:'IBM Plex Mono',monospace;font-size:13.5px}
.formbox dt,.formbox dd{margin:0;padding:9px 14px;border-bottom:1px solid var(--line)}
.formbox dt{color:var(--dim)}
/* Numbered steps (01, 02, 03...) drawn by CSS counters, so the numbers never go out of order when steps change. */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent-ink);padding-top:3px}
.steps li b{display:block;font-family:'IBM Plex Sans Condensed',sans-serif;font-weight:600;font-size:18px;color:var(--ink)}
.stamp-v{display:inline-block;margin-top:18px;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;letter-spacing:.08em;padding:8px 14px;background:var(--accent);color:var(--bg)}  /* the verdict stamp at the end of each case */
.stamp-v.hold{background:var(--hold)}
.close{font-family:'IBM Plex Sans Condensed',sans-serif;font-size:clamp(30px,4.2vw,56px);font-weight:700;line-height:1.05;max-width:24ch;margin:0}  /* the closing line of the page */

/* ---- Narrow phones (under 420px wide, most phones held upright): one step smaller on the biggest type, and the
   stat numbers and the red banner headline shrink so no word is wider than the screen. */
@media (max-width:420px){
  h1{font-size:clamp(40px,12.5vw,48px)}
  .big{font-size:48px}
  .banner strong{font-size:clamp(26px,8vw,32px)}
  .close{font-size:clamp(26px,8vw,30px)}
  summary{font-size:20px}
}

/* ---- The methodology pages (methodology.html and case-against.html).
   Everything here reflows: grids use auto-fit columns that never ask for more width than the screen has, the
   diagram and the step list switch from columns to a single stack under 820px, and the charts are CSS bars. */
.stack-card h3{font-size:22px;margin-top:8px}
.stack-card p{margin-top:6px}
.pipeline .num{display:block;margin-bottom:6px}
.pipeline .formula{display:block;font-family:'IBM Plex Mono',monospace;font-size:18px;color:var(--ink);margin-top:14px;overflow-wrap:anywhere}  /* a formula in machine type; wraps on a phone */
.pipeline.two-up{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.pipeline div:last-child{background:var(--bg);box-shadow:none}   /* on these pages the last box is not the chip; the red is given by .hot where it is meant */
.pipeline .num{color:var(--accent-ink)}
pre.math{font-family:'IBM Plex Mono',monospace;font-size:clamp(15px,1.6vw,20px);line-height:1.5;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:16px 18px;margin:14px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}  /* the theorem lines */
/* The enforcement-boundary diagram: three columns of boxes with an arrow between them. Under 820px the columns
   stack and each arrow turns to point down, so the same picture reads top to bottom on a phone. */
.arch{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1.1fr) 48px minmax(0,1fr);gap:16px;align-items:center;margin-top:40px;padding:24px;border:1px solid var(--line);background:var(--bg)}
.arch-col{display:flex;flex-direction:column;gap:12px}
.arch-col h4{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 4px}
.abox{border:1px solid var(--line2);background:var(--card);padding:14px 16px;font-size:16px;text-align:center}
.abox.gov{border:2px solid var(--accent);background:var(--hot);text-align:left;font-size:15px;color:var(--muted);line-height:1.5}
.abox.gov b{display:block;font-family:'IBM Plex Sans Condensed',sans-serif;font-weight:700;font-size:24px;color:var(--ink);margin-bottom:8px}
.arr{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:32px;line-height:1}
.arr::before{content:"\2192"}   /* a right-pointing arrow glyph */
.arch-band{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:16px}
.arch-band div{border:1px dashed var(--line2);background:var(--bg2);padding:14px 16px;font-size:14px;color:var(--muted);text-align:center}
.arch-band b{display:block;color:var(--ink);margin-bottom:4px}
@media (max-width:820px){.arch{grid-template-columns:minmax(0,1fr)}.arr{min-height:40px}.arr::before{content:"\2193"}}   /* a down-pointing arrow glyph */
/* The CSS bar chart: a label column, a bar column (two bars stacked for two series), and an optional value column. */
.bars{display:grid;grid-template-columns:minmax(80px,96px) minmax(0,1fr);gap:10px 16px;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);margin-top:20px}
.bars.one{grid-template-columns:minmax(80px,96px) minmax(0,1fr) 56px}
.bars div{display:flex;flex-direction:column;gap:4px}
.bars i{display:block;height:14px;background:var(--accent)}
.bars i.b2{background:var(--dim)}
.bars em{font-style:normal;color:var(--ink)}
.bars .cap{border-top:1px dashed var(--ink);position:relative;height:18px}
.bars .cap em{position:absolute;right:0;top:2px;font-size:12px}
.legend{display:flex;flex-wrap:wrap;gap:12px 24px;margin:14px 0 0;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;background:var(--accent);vertical-align:middle;margin-right:8px}
.legend i.b2{background:var(--dim)}
/* The nine-step flow: number, step, assurance in three columns; one column on a phone. Decision rows are tinted. */
.flow{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line2)}
.flow li{display:grid;grid-template-columns:56px minmax(0,1.2fr) minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:15px}
.flow .n{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--accent-ink);padding-top:4px}
.flow b{display:block;font-family:'IBM Plex Sans Condensed',sans-serif;font-weight:600;font-size:22px;color:var(--ink);margin-bottom:4px}
.flow .assure .tag{display:block;margin-bottom:4px}
.flow li.dec{background:var(--hot);box-shadow:inset 3px 0 0 var(--accent);padding-left:12px}
@media (max-width:820px){.flow li{grid-template-columns:40px minmax(0,1fr)}.flow .assure{grid-column:2}}
.always{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;padding:28px 32px;background:var(--card);border:1px dashed var(--line2);margin-top:24px}
.always strong{font-family:'IBM Plex Sans Condensed',sans-serif;font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.1;max-width:20ch}
.always span{flex:1 1 300px;color:var(--muted);font-size:16px}
/* The verdict grid on the case-against page: each card is a link to its section. */
.vgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.vcard{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line2);background:var(--card);padding:22px;text-decoration:none;color:var(--ink)}
.vcard:hover{border-color:var(--accent);color:var(--ink)}
.vcard.bites{border:2px solid var(--accent);background:var(--hot)}
.vcard .verdict{align-self:flex-start}
.vcard b{font-family:'IBM Plex Sans Condensed',sans-serif;font-weight:600;font-size:21px;line-height:1.15}
.vcard span:last-child{font-size:14px;color:var(--muted)}

/* ---- Brand: the hardno.ai logo in the header (an inline drawing, so it is crisp at any size) */
.brand .logo{height:34px;width:auto;display:block}
@media (max-width:480px){.brand .logo{height:28px}}   /* a little smaller on phones so the header fits */