/* ==========================================================================
   AutoHanger — design system
   Accent taken from hydraulischerabgleich.net (#005566 / #003D4A).
   Neutrals are biased toward that teal so the greys read as chosen.
   ========================================================================== */

:root{
  --accent:#005566;
  --accent-hover:#00404E;
  --accent-tint:#DBEAEE;
  --accent-line:#8FB6C0;
  /* text that sits directly on an --accent fill */
  --on-accent:#FFFFFF;

  /* Dark bands — the hero, the figures band and the call to action. These stay
     a dark ground in BOTH themes, so they need their own tokens: inverting the
     accent would flip them to a light ground and put light text on light. */
  --band-bg:#00404E;
  --band-bg-2:#00606F;
  --band-ink:#FFFFFF;
  --band-ink-2:#B7D5DD;
  --band-hi:#7FD6E8;
  --band-line:rgba(255,255,255,.24);
  --band-fill:rgba(255,255,255,.07);
  --band-btn-bg:#FFFFFF;
  --band-btn-ink:#00404E;
  --band-btn-hover:#D9ECF0;

  --paper:#E7EEF0;
  --surface:#FFFFFF;
  --surface-2:#D6E3E7;
  --surface-3:#C4D5DB;

  --ink:#0C1417;
  --ink-2:#3C4D54;
  --ink-3:#556970;

  --rule:#C0D0D5;
  --rule-2:#96ACB3;

  --ok:#1B6A48; --ok-tint:#E2F0E9;
  --warn:#8A5600; --warn-tint:#F7EFDD;
  --stop:#A2400F; --stop-tint:#F8E9E1;

  --shadow:0 1px 2px rgba(12,20,23,.05), 0 14px 34px -22px rgba(12,20,23,.30);
  --maxw:1140px;
  --radius:2px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent:#4FB4CA;
    --accent-hover:#6CC4D8;
    --accent-tint:#0C2A31;
    --accent-line:#2A5C68;
    --on-accent:#04181D;

    --band-bg:#0A222A;
    --band-bg-2:#0E323D;
    --band-ink:#EAF3F5;
    --band-ink-2:#9FC0C9;
    --band-hi:#6FCBE0;
    --band-line:rgba(234,243,245,.20);
    --band-fill:rgba(234,243,245,.06);
    --band-btn-bg:#4FB4CA;
    --band-btn-ink:#04181D;
    --band-btn-hover:#6CC4D8;

    --paper:#080F12;
    --surface:#101A1E;
    --surface-2:#18262B;
    --surface-3:#213238;

    --ink:#E8EFF1;
    --ink-2:#A1B2B8;
    --ink-3:#72848B;

    --rule:#22333A;
    --rule-2:#35494F;

    --ok:#59B98C; --ok-tint:#11291F;
    --warn:#D6A44E; --warn-tint:#2A2213;
    --stop:#E08A5C; --stop-tint:#2C1C13;

    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --accent:#4FB4CA;
  --accent-hover:#6CC4D8;
  --accent-tint:#0C2A31;
  --accent-line:#2A5C68;
  --on-accent:#04181D;

  --band-bg:#0A222A;
  --band-bg-2:#0E323D;
  --band-ink:#EAF3F5;
  --band-ink-2:#9FC0C9;
  --band-hi:#6FCBE0;
  --band-line:rgba(234,243,245,.20);
  --band-fill:rgba(234,243,245,.06);
  --band-btn-bg:#4FB4CA;
  --band-btn-ink:#04181D;
  --band-btn-hover:#6CC4D8;

  --paper:#080F12;
  --surface:#101A1E;
  --surface-2:#18262B;
  --surface-3:#213238;

  --ink:#E8EFF1;
  --ink-2:#A1B2B8;
  --ink-3:#72848B;

  --rule:#22333A;
  --rule-2:#35494F;

  --ok:#59B98C; --ok-tint:#11291F;
  --warn:#D6A44E; --warn-tint:#2A2213;
  --stop:#E08A5C; --stop-tint:#2C1C13;

  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,.9);
}

/* --------------------------------------------------------------- base --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  overflow-wrap:anywhere;
  hyphens:auto;
  font-family:Archivo,"Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  text-wrap:balance;
  margin:0;
  letter-spacing:-.018em;
}
h1{font-size:clamp(31px,4.6vw,50px);font-weight:700;line-height:1.07}
h2{font-size:clamp(24px,3.1vw,34px);font-weight:600;line-height:1.14}
h3{font-size:19px;font-weight:600;line-height:1.3}
p{margin:0}
img{max-width:100%;height:auto;display:block}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:1px}

code{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:.86em;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:var(--radius);padding:1px 5px;color:var(--ink);
}
strong{color:var(--ink);font-weight:600}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);
  padding:11px 18px;z-index:100;font-weight:600}
.skip:focus{left:0}

/* ------------------------------------------------------------- header --- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(9px);
  border-bottom:1px solid var(--rule);
}
.head-inner{display:flex;align-items:center;gap:22px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-family:Archivo,sans-serif;font-weight:700;color:var(--ink);
  font-size:16.5px;letter-spacing:-.02em}
.brand-vendor{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);
  letter-spacing:.11em;text-transform:uppercase}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.site-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.site-nav a{
  display:block;padding:8px 11px;font-size:15px;color:var(--ink-2);
  text-decoration:none;border-radius:var(--radius);
}
.site-nav a:hover{color:var(--accent);background:var(--accent-tint)}
.site-nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.lang-switch{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px!important;
  letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--rule-2);padding:6px 11px!important;color:var(--ink-2)!important;
}
.lang-switch:hover{border-color:var(--accent);color:var(--accent)!important}

.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule-2);
  border-radius:var(--radius);width:42px;height:38px;cursor:pointer;align-items:center;
  justify-content:center;color:var(--ink)}
.bars,.bars::before,.bars::after{display:block;width:17px;height:1.5px;background:currentColor;
  position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-5px}
.bars::after{top:5px}

/* ------------------------------------------------------------ buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:Archivo,sans-serif;font-weight:600;font-size:15px;
  padding:11px 22px;border-radius:var(--radius);text-decoration:none;
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);
  color:var(--on-accent)}
.btn.ghost{border-color:var(--rule-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
.btn.big{font-size:16.5px;padding:14px 30px}
.btn.disabled{background:var(--surface-2);color:var(--ink-3);border-color:var(--rule);
  cursor:not-allowed;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* --------------------------------------------------------------- hero --- */
.hero{
  /* solid colour first: the gradient is a background-image, so without this the
     band would have no ground of its own if it ever failed to paint */
  background-color:var(--band-bg);
  background-image:linear-gradient(142deg, var(--band-bg) 0%, var(--band-bg-2) 100%);
  position:relative;overflow:hidden;
}
/* Drafting paper: the grid recedes to a substrate so the schematic drawn on
   top of it reads as the subject rather than as decoration. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);
  background-size:52px 52px;
  opacity:.05;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 72% 6%, #000 15%, transparent 78%);
  mask-image:radial-gradient(ellipse 85% 80% at 72% 6%, #000 15%, transparent 78%);
}
/* The schematic itself — a single-line ventilation and piping network, drawn
   in the convention the product's own users draw in. */
/* The schematic spans the whole band, anchored bottom so its DN 80 headers run
   along the foot of the hero. Two mask layers, multiplied together:

     1. a vignette, so the drawing dissolves toward all four borders instead of
        being cut off by them
     2. a left-to-right ramp that eases it back over the text column — full
        strength there would drop the body copy under AA

   mask-composite multiplies the layers. Without it they would add instead,
   which shows more of the drawing rather than breaking the page. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/mep-network.svg") no-repeat center bottom/cover;
  opacity:.24;
  -webkit-mask-image:
    radial-gradient(ellipse 54% 58% at 58% 54%, #000 24%, rgba(0,0,0,.5) 62%, transparent 94%),
    linear-gradient(to right, rgba(0,0,0,.26) 0%, rgba(0,0,0,.38) 34%, #000 62%);
  mask-image:
    radial-gradient(ellipse 54% 58% at 58% 54%, #000 24%, rgba(0,0,0,.5) 62%, transparent 94%),
    linear-gradient(to right, rgba(0,0,0,.26) 0%, rgba(0,0,0,.38) 34%, #000 62%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.hero-grid{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center;padding-top:82px;padding-bottom:82px}
.hero-text{max-width:36rem}
.hero h1{color:var(--band-ink)}
.hero .lead{font-size:19.5px;color:var(--band-ink-2);margin-top:18px;max-width:34rem}
.hero .lead strong{color:var(--band-ink)}
.hero-note{margin-top:20px;font-size:14.5px;color:var(--band-ink-2);opacity:.82}
.badge{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  background:var(--accent-tint);color:var(--accent);border:1px solid var(--accent-line);
  padding:4px 10px;border-radius:var(--radius);margin-bottom:20px;
}
/* on a dark band the badge and buttons invert */
.hero .badge{background:var(--band-fill);color:var(--band-ink);border-color:var(--band-line)}
.hero .btn.primary{background:var(--band-btn-bg);color:var(--band-btn-ink);
  border-color:var(--band-btn-bg)}
.hero .btn.primary:hover{background:var(--band-btn-hover);color:var(--band-btn-ink);
  border-color:var(--band-btn-hover)}
.hero .btn.ghost{border-color:var(--band-line);color:var(--band-ink)}
.hero .btn.ghost:hover{border-color:var(--band-ink);background:var(--band-fill);
  color:var(--band-ink)}
.hero .compare.placeholder{background:var(--band-fill);border-color:var(--band-line)}
.hero .compare.placeholder p{color:var(--band-ink-2)}
.hero .compare{border-color:var(--band-line)}

/* ----------------------------------------------------------- sections --- */
.sec{padding:76px 0;border-bottom:1px solid var(--rule)}
.sec.tinted{background:var(--surface)}
.sec.deep{background:var(--surface-2)}

/* Filled band — used where the content deserves to stop the page, such as the
   verified figures. Dark ground in both themes, so it reads on its own terms
   rather than inverting with the theme. */
.sec.accent{
  background-color:var(--band-bg);
  background-image:linear-gradient(142deg, var(--band-bg) 0%, var(--band-bg-2) 100%);
  border-bottom:none;position:relative;overflow:hidden;
}
.sec.accent::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);
  background-size:52px 52px;opacity:.045;
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 15% 50%, #000 10%, transparent 72%);
  mask-image:radial-gradient(ellipse 70% 100% at 15% 50%, #000 10%, transparent 72%);
}
/* same schematic, cropped from the other side so the two bands do not twin */
.sec.accent::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/mep-network.svg") no-repeat left center/cover;
  opacity:.15;
  -webkit-mask-image:radial-gradient(ellipse 30% 88% at 88% 46%, #000 6%, transparent 74%);
  mask-image:radial-gradient(ellipse 30% 88% at 88% 46%, #000 6%, transparent 74%);
}
.sec.accent > .wrap{position:relative;z-index:1}
.sec.accent h1,.sec.accent h2,.sec.accent h3{color:var(--band-ink)}
.sec.accent .eyebrow{color:var(--band-hi)}
.sec.accent .subline{color:var(--band-ink-2)}
.sec.accent .prose{color:var(--band-ink-2)}
.sec.accent .prose strong{color:var(--band-ink)}
.sec.accent a{color:var(--band-hi)}
.sec.accent code{background:var(--band-fill);border-color:var(--band-line);color:var(--band-ink)}
.sec.accent .stats{background:var(--band-line);border-color:var(--band-line)}
.sec.accent .stat{background:transparent}
.sec.accent .stat .v{color:var(--band-ink)}
.sec.accent .stat .v.hi{color:var(--band-hi)}
.sec.accent .stat .l{color:var(--band-ink-2)}
.sec.accent .stats-src{color:var(--band-ink-2)}
.sec.accent .note{background:var(--band-fill);border-color:var(--band-line);
  border-left-color:var(--band-hi)}
.sec.accent .note p{color:var(--band-ink-2)}
.sec.accent .note strong{color:var(--band-ink)}
.sec.accent .steps{background:var(--band-line);border-color:var(--band-line)}
.sec.accent .step{background:transparent}
.sec.accent .step-n{background:var(--band-hi);color:var(--band-bg)}
.sec.accent .step-body p{color:var(--band-ink-2)}
.sec.accent .shot img{border-color:var(--band-line)}
.sec.accent .shot figcaption{color:var(--band-ink-2)}
.sec-head{max-width:60rem;margin-bottom:34px}
/* A section that is only a heading — the page title above a run of steps —
   carries no body to space away from. */
.sec-head:only-child{margin-bottom:0}
.eyebrow{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:13px;
}
.subline{font-size:18.5px;color:var(--ink-3);margin-top:10px;max-width:56ch;
  font-weight:400}
.sec-head h2 + .subline{margin-top:8px}

/* --------------------------------------------------------------- prose --- */
.prose{max-width:68ch}
.prose p{margin:16px 0}
.prose p:first-child{margin-top:0}
.prose ul,.prose ol{margin:16px 0;padding-left:22px}
.prose li{margin:8px 0}
.prose h3{margin:34px 0 10px}
/* Two blocks listed under one section are emitted as plain siblings with no
   wrapper of their own, so the gap between them belongs here. */
.prose + .spec,.spec + .prose,
.prose + .cards,.cards + .prose,
.prose + .video,.prose + .video-placeholder{margin-top:30px}

/* --------------------------------------------------------------- cards --- */
.cards{display:grid;gap:16px}
.cards.cols-auto{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.cards.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cards.cols-3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;
}
.sec.tinted .card{background:var(--paper)}
.card .kicker{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.card h3{font-size:17.5px}
.card p{font-size:15.5px;color:var(--ink-2)}

/* --------------------------------------------------------------- steps --- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius)}
.step{display:flex;gap:22px;padding:26px 26px;background:var(--surface)}
.sec.tinted .step{background:var(--paper)}
.step-n{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:Archivo,sans-serif;font-weight:700;font-size:16px;
  background:var(--accent);color:var(--on-accent);font-variant-numeric:tabular-nums;
}
.step-body{flex:1;min-width:0}
.step-body h3{margin-bottom:6px}
.step-body p{font-size:15.5px;max-width:62ch}
.shot{margin:18px 0 0}
.shot img{border:1px solid var(--rule);border-radius:var(--radius);width:100%}
.shot figcaption{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  margin-top:8px}

/* --------------------------------------------------------------- stats --- */
.stats{
  /* 150px lets all six figures sit on one row down to roughly a 980px viewport;
     below that they wrap 3+3 rather than stranding one on its own line */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);
}
.stat{background:var(--surface);padding:22px 20px}
.sec.tinted .stat{background:var(--paper)}
.stat .v{
  font-family:Archivo,sans-serif;font-size:31px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.035em;line-height:1.05;
  white-space:nowrap;
}
.stat .v.hi{color:var(--accent)}
.stat .l{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:9px;line-height:1.5;
}
.stats-src{font-size:13.5px;color:var(--ink-3);margin-top:14px}

/* -------------------------------------------------------------- tables --- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface)}
.sec.tinted .tablewrap{background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:620px}
th{
  background:var(--surface-2);text-align:left;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
  font-weight:600;padding:12px 15px;border-bottom:1px solid var(--rule-2);white-space:nowrap;
}
table.sortable th{cursor:pointer;user-select:none}
table.sortable th::after{content:"";display:inline-block;width:0;height:0;margin-left:7px;
  vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid var(--ink-3);opacity:.35}
table.sortable th[aria-sort="ascending"]::after{border-top:none;
  border-bottom:4px solid var(--accent);opacity:1}
table.sortable th[aria-sort="descending"]::after{border-top-color:var(--accent);opacity:1}
td{padding:12px 15px;border-bottom:1px solid var(--rule);vertical-align:top;
  font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}
.table-note{font-size:13.5px;color:var(--ink-3);margin-top:14px;max-width:70ch}

/* ---------------------------------------------------- property compare --- */
/* Two property sheets for the same element. A stylised comparison in the
   site's own language — deliberately not a facsimile of the Revit interface. */
.props-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);margin:24px 0 0}
.sec.tinted .props-wrap{background:var(--paper)}
table.props{border-collapse:collapse;width:100%;min-width:540px;font-size:15px}

table.props .props-corner{background:transparent;border:none;padding:0;width:1%}
table.props thead th{
  background:transparent;text-align:left;padding:16px 18px 13px;vertical-align:bottom;
  border-bottom:2px solid var(--rule-2);width:38%;text-transform:none;letter-spacing:0;
}
table.props thead th.after{background:var(--accent-tint);border-bottom-color:var(--accent)}
.props-kicker{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}
table.props thead th.after .props-kicker{color:var(--accent)}
.props-title{display:block;font-family:Archivo,sans-serif;font-size:16px;font-weight:600;
  color:var(--ink);line-height:1.25}

table.props tbody th{
  background:transparent;text-align:left;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;padding:11px 18px;white-space:nowrap;
  border-bottom:1px solid var(--rule);
}
table.props td{padding:11px 18px;border-bottom:1px solid var(--rule);color:var(--ink);
  font-variant-numeric:tabular-nums}
table.props td.after{background:var(--accent-tint)}
table.props td.before{color:var(--ink-2)}
/* the dash still has to be readable — it carries the meaning "no value here",
   so it gets a lighter colour rather than reduced opacity */
table.props td.empty{color:var(--ink-3)}
table.props tbody tr:last-child th,
table.props tbody tr:last-child td{border-bottom:none}

.props-note{font-size:13.5px;color:var(--ink-3);margin:12px 0 0;max-width:74ch}

/* comparison slider caption */
.cmp-caption{font-size:14px;color:var(--band-ink-2);margin:12px 0 0;max-width:46ch}

/* --------------------------------------------------------------- notes --- */
.note{
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  background:var(--surface);padding:20px 24px;border-radius:var(--radius);
  max-width:74ch;
}
.sec.tinted .note{background:var(--paper)}
.note h3{font-size:16.5px;margin-bottom:8px}
.note p{font-size:15.5px;margin:0}
.note p + p{margin-top:12px}
.note.warn{border-left-color:var(--warn)}
.note.stop{border-left-color:var(--stop)}

/* ---------------------------------------------------------------- spec --- */
.spec{margin:0;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);max-width:56rem}
.sec.tinted .spec{background:var(--paper)}
.spec-row{display:grid;grid-template-columns:minmax(160px,236px) 1fr;gap:20px;
  padding:13px 20px;border-bottom:1px solid var(--rule)}
.spec-row:last-child{border-bottom:none}
.spec dt{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.spec dd{margin:0;color:var(--ink);font-size:15.5px}

/* ------------------------------------------------------------ outcomes --- */
.outcomes{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius)}
.outcome{display:flex;gap:20px;align-items:flex-start;padding:20px 24px;background:var(--surface)}
.sec.tinted .outcome{background:var(--paper)}
.outcome-tag{
  flex:none;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius);
  background:var(--accent-tint);color:var(--accent);border:1px solid var(--accent-line);
  min-width:112px;text-align:center;
}
.outcome.good .outcome-tag{background:var(--ok-tint);color:var(--ok);border-color:currentColor}
.outcome.mid .outcome-tag{background:var(--warn-tint);color:var(--warn);border-color:currentColor}
.outcome.last .outcome-tag{background:var(--stop-tint);color:var(--stop);border-color:currentColor}
.outcome h3{font-size:16.5px;margin-bottom:4px}
.outcome p{font-size:15px;max-width:62ch}

/* --------------------------------------------------------------- video --- */
.video{max-width:900px}
.video video{width:100%;border:1px solid var(--rule);border-radius:var(--radius);
  background:#000;display:block}
.chapters{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chapters button{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius);padding:7px 12px;
  color:var(--ink-2);cursor:pointer;
}
.chapters button:hover{border-color:var(--accent);color:var(--accent)}
.chapters .t{color:var(--accent);font-weight:600;margin-right:6px}

.video-placeholder,.compare.placeholder{
  border:1px dashed var(--rule-2);border-radius:var(--radius);background:var(--surface);
  padding:52px 32px;text-align:center;max-width:900px;
}
.sec.tinted .video-placeholder{background:var(--paper)}
.video-placeholder p,.compare.placeholder p{color:var(--ink-3);font-size:15.5px;
  max-width:44ch;margin:0 auto}
/* while the screenshots are outstanding the placeholder still previews the
   callouts, so its own copy is pinned to the corners and out of their way */
.compare.placeholder{display:block;padding:0}
.compare.placeholder > .badge{position:absolute;left:16px;top:14px;margin:0;z-index:3}
.compare.placeholder > p{
  position:absolute;left:16px;right:16px;bottom:12px;margin:0;z-index:3;
  font-size:11px;line-height:1.5;text-align:left;max-width:none;
}

/* ------------------------------------------------------------- compare --- */
.compare{
  position:relative;border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;background:var(--surface-2);aspect-ratio:4/3;
}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Cut-out images: no panel, so the model composites straight onto the band.
   'contain' rather than 'cover' — a cut-out must not be cropped, and the
   spare area is simply the band showing through.
   A soft scrim sits underneath: the hero already carries the schematic at
   full width, and two technical drawings on top of each other read as mush. */
.compare.plain{
  border:none;border-radius:0;background:none;overflow:visible;
}
.compare.plain::before{
  content:"";position:absolute;inset:-6% -4%;pointer-events:none;
  background:radial-gradient(ellipse 52% 54% at 50% 52%,
    rgba(2,20,26,.5) 0%, rgba(2,20,26,.34) 52%, transparent 78%);
}
/* ::before paints before the element's children, so the scrim already sits
   underneath — the children must keep their own positioning untouched. */
.compare.plain img{object-fit:contain}
.compare .cmp-b{clip-path:inset(0 0 0 var(--split,50%))}

/* ---- callouts -------------------------------------------------------- */
/* Each callout carries the same clip as the image it belongs to, so dragging
   the slider reveals the annotation together with the state it describes. */
.cmp-note{position:absolute;inset:0;pointer-events:none}
.cmp-note.b{clip-path:inset(0 0 0 var(--split,50%))}
.cmp-note.a{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0)}

.cmp-lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cmp-lead line{stroke:rgba(255,255,255,.62);stroke-width:1.4;stroke-dasharray:5 4}
.cmp-note.b .cmp-lead line{stroke:var(--band-hi);opacity:.85;stroke-dasharray:none}

.cmp-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.cmp-note.b .cmp-dot{background:var(--band-hi);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--band-hi) 30%, transparent)}

.cmp-panel{
  position:absolute;width:41%;min-width:142px;
  background:rgba(4,22,27,.78);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);
  padding:7px 10px 8px;
}
.cmp-note.b .cmp-panel{border-color:color-mix(in srgb, var(--band-hi) 55%, transparent)}
.cmp-panel-title{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);
  margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.16);
}
.cmp-note.b .cmp-panel-title{color:var(--band-hi)}
.cmp-row{display:flex;gap:8px;align-items:baseline;justify-content:space-between;
  font-size:10.5px;line-height:1.42}
.cmp-row + .cmp-row{margin-top:1px}
.cmp-row .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.cmp-row .v{color:#fff;text-align:right;font-variant-numeric:tabular-nums}
/* the dash says "no value here", so it has to stay readable like any text */
.cmp-row .v.empty{color:rgba(255,255,255,.62)}
.compare input[type=range]{
  position:absolute;inset:auto 0 0 0;width:100%;margin:0;height:100%;
  background:transparent;-webkit-appearance:none;appearance:none;cursor:ew-resize;
}
.compare input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:3px;height:100%;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);cursor:ew-resize;
}
.compare input[type=range]::-moz-range-thumb{
  width:3px;height:100%;background:#fff;border:none;border-radius:0;cursor:ew-resize;
}
.cmp-label{
  position:absolute;bottom:14px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;background:rgba(4,20,24,.82);color:#fff;
  padding:5px 10px;border-radius:var(--radius);pointer-events:none;
}
.cmp-label.a{left:14px}
.cmp-label.b{right:14px}

/* --------------------------------------------------------------- plans --- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:16px;
  align-items:start}
.plan{
  position:relative;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:28px 26px 30px;display:flex;flex-direction:column;gap:5px;
}
.sec.tinted .plan{background:var(--paper)}
.plan.featured{border-color:var(--accent);box-shadow:var(--shadow)}
.plan-flag{
  position:absolute;top:-1px;right:20px;transform:translateY(-50%);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;background:var(--accent);
  color:var(--on-accent);padding:4px 11px;border-radius:var(--radius);
}
.plan h3{font-size:18px}
.plan-price{font-family:Archivo,sans-serif;font-size:33px;font-weight:700;color:var(--ink);
  letter-spacing:-.035em;margin-top:12px;line-height:1.1;font-variant-numeric:tabular-nums}
.plan-per{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  letter-spacing:.05em;margin-bottom:6px}
.plan-lead{font-size:15px;color:var(--ink-2);margin-top:10px}
.plan-features{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:10px;flex:1}
.plan-features li{position:relative;padding-left:24px;font-size:15px}
.plan-features li::before{
  content:"";position:absolute;left:0;top:.55em;width:11px;height:6px;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}
.plan .btn{width:100%}

/* ------------------------------------------------------------ download --- */
.download-box{
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);
  padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  max-width:56rem;
}
.sec.tinted .download-box{background:var(--paper)}
.download-meta{display:flex;flex-wrap:wrap;gap:8px 24px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3)}

/* ----------------------------------------------------------------- faq --- */
.faq{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);
  max-width:74ch}
.sec.tinted .faq{background:var(--paper)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item:last-child{border-bottom:none}
.faq-item summary{
  cursor:pointer;padding:16px 22px;font-family:Archivo,sans-serif;font-weight:600;
  color:var(--ink);font-size:16px;list-style:none;display:flex;justify-content:space-between;
  gap:16px;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:"IBM Plex Mono",monospace;
  color:var(--accent);font-size:19px;flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-a{padding:0 22px 20px}
.faq-a p{font-size:15.5px;margin:0}
.faq-a p + p{margin-top:12px}

/* ----------------------------------------------------------------- cta --- */
.cta{background:var(--band-bg);padding:66px 0;text-align:center;
  border-bottom:1px solid var(--rule)}
.cta h2{color:var(--band-ink)}
.cta p{color:var(--band-ink-2);max-width:52ch;margin:14px auto 0;font-size:17.5px}
.cta a{color:var(--band-ink)}
.cta .actions{justify-content:center}
.cta .btn.primary{background:var(--band-btn-bg);color:var(--band-btn-ink);
  border-color:var(--band-btn-bg)}
.cta .btn.primary:hover{background:var(--band-btn-hover);color:var(--band-btn-ink);
  border-color:var(--band-btn-hover)}
.cta .btn.ghost{border-color:var(--band-line);color:var(--band-ink)}
.cta .btn.ghost:hover{border-color:var(--band-ink);background:var(--band-fill);
  color:var(--band-ink)}

/* ---------------------------------------------------------------- form --- */
.contact-form{max-width:38rem;display:grid;gap:17px}
.field{display:grid;gap:6px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea{
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-2);border-radius:var(--radius);padding:11px 13px;width:100%;
}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-tint)}
.hp{position:absolute;left:-9999px;opacity:0}
.form-consent{font-size:13.5px;color:var(--ink-3);max-width:52ch}
.contact-form .btn{justify-self:start}

/* --------------------------------------------------------------- legal --- */
.legal{max-width:70ch}
.legal-block{margin-bottom:32px}
.legal-block h3{margin-bottom:10px}
.legal-block p{margin:12px 0;font-size:15.5px}

/* -------------------------------------------------------------- footer --- */
.site-foot{background:var(--surface);border-top:1px solid var(--rule);padding-top:46px}
.foot-inner{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;
  padding-bottom:34px}
.foot-brand{max-width:30rem}
.foot-brand p{color:var(--ink-3);font-size:14.5px;margin-top:8px}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-start}
.foot-nav a{font-size:14.5px;color:var(--ink-2);text-decoration:none}
.foot-nav a:hover{color:var(--accent)}
.foot-legal{border-top:1px solid var(--rule);padding-top:20px;padding-bottom:30px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3)}

/* ----------------------------------------------------- gate (404, root) --- */
body.gate{display:grid;place-items:center;min-height:100vh;text-align:center;
  background:var(--paper)}
.gate-inner{padding:40px 28px;max-width:34rem}
.gate-inner h1{font-size:clamp(26px,4vw,38px)}
.gate-inner .alt{color:var(--ink-3);font-weight:500}
.gate-inner p{margin-top:16px;color:var(--ink-3)}
.gate-inner .actions{justify-content:center}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-top:56px;padding-bottom:56px}
  .hero-text{max-width:none}
  /* single column puts the copy across the full width, so the drawing steps
     back evenly and keeps only the border vignette */
  .hero::after{
    opacity:.14;
    -webkit-mask-image:radial-gradient(ellipse 62% 52% at 52% 66%,
      #000 18%, rgba(0,0,0,.45) 60%, transparent 94%);
    mask-image:radial-gradient(ellipse 62% 52% at 52% 66%,
      #000 18%, rgba(0,0,0,.45) 60%, transparent 94%);
    -webkit-mask-composite:source-over;
    mask-composite:add;
  }
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .sec{padding:56px 0}
  .menu-toggle{display:flex}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--rule);padding:10px 20px 18px;
  }
  .site-nav.open{display:flex}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav a{padding:11px 4px;border-bottom:1px solid var(--rule)}
  .lang-switch{margin-top:14px;align-self:flex-start}
  /* two callout panels would cover the model at this size and overflow the
     frame; the corner labels, the caption and the properties table on the
     features page carry the same point */
  .cmp-note{display:none}
  .step{flex-direction:column;gap:14px;padding:22px 20px}
  .outcome{flex-direction:column;gap:12px}
  .outcome-tag{min-width:0}
  .spec-row{grid-template-columns:1fr;gap:4px}
  .foot-inner{flex-direction:column;gap:26px}
}