/* Landing 2D -- app/templates/landing/index_2d.html and sections/2d/.
   The shop front: sticky header, section rail, a photographed masthead,
   ruled sections, dense tables. Phone first, system fonts, no framework,
   no web font, no canvas. Budget: this file under 32 KB
   (tests/test_landing_2d.py). Steel theme per CLAUDE.md.
   NO scroll-behavior:smooth anywhere (probes photograph mid-glide).

   The v4-* block at the bottom is deliberate: the Quick Purchase dialog
   and its script are shared with the cinematic page under their v4 names,
   so this sheet defines the same selectors and the 2D page never loads
   v4.css. Keep the two blocks in step. */

:root {
  --bg: #0a0b0d;
  --bg-2: #0e0f12;
  --card: #1a1a1a;
  --card-2: #111214;
  --line: #2a2a2a;
  --gold: #d4af37;
  --gold-2: #e2c252;
  --gold-line: rgba(212, 175, 55, .45);
  --ink: #f2f2f2;
  --ink-2: #d9d9d9;
  --ink-3: #bdbdbd;
  --ink-4: #8f8f8f;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --flat-header-h: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body.flat {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* The search hides rows with the attribute; a grid or flex rule on the
   row must not win over it. */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
p { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
.flat-icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.flat-nb { white-space: nowrap; }
.flat-dim { color: var(--ink-4); }
.flat-price { color: var(--gold); font-weight: 600; }
.flat-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.flat-skip { position: absolute; left: -999px; top: 0; }
.flat-skip:focus {
  left: 8px; top: 8px; z-index: 100; background: var(--gold); color: #000;
  padding: 6px 10px; border-radius: 4px; text-decoration: none; font-weight: 700;
}

/* ---- buttons ---------------------------------------------------------- */
.flat-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px;
  border: 2px solid var(--gold); border-radius: 4px;
  background: var(--gold); color: #000;
  font-weight: 700; font-size: 15px; line-height: 1.2; font-family: inherit;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.flat-btn:hover { background: var(--gold-2); border-color: var(--gold-2); }
.flat-btn-ghost { background: transparent; color: var(--ink); border-color: rgba(255, 255, 255, .55); }
.flat-btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.flat-btn-sm { min-height: 32px; padding: 0 12px; font-size: 13.5px; }
.flat-door { color: var(--gold); text-decoration: none; font-weight: 600; }
.flat-door:hover { color: var(--gold-2); text-decoration: underline; }

/* ---- header ----------------------------------------------------------- */
.flat-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-2); border-bottom: 1px solid var(--gold-line);
}
.flat-header-row {
  display: flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 16px;
}
.flat-brand { display: inline-flex; align-items: center; flex: none; }
.flat-brand img { width: auto; height: 26px; }
.flat-header-nav { display: flex; align-items: center; gap: 14px; margin-left: auto; min-width: 0; }
.flat-phone {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap;
}
.flat-phone:hover { color: var(--gold-2); }
.flat-login { color: var(--ink-3); text-decoration: none; font-size: 14px; }
.flat-login:hover { color: #fff; }
/* The 3D switch, OFF on this page: grey track, knob left. The cinematic
   page draws it ON in v4.css. */
.flat-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  color: var(--ink-3); text-decoration: none; font-size: 13px; font-weight: 700;
}
.flat-toggle:hover { color: #fff; }
.flat-toggle-track {
  position: relative; width: 30px; height: 16px; border-radius: 8px;
  background: var(--line); border: 1px solid #4a4a4a;
}
.flat-toggle-knob {
  position: absolute; top: 1px; left: 1px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ink-3);
}
.flat-search {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 10px; margin: 0;
}
.flat-search input {
  flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 4px;
  background: #0f1013; color: var(--ink); font: inherit; font-size: 14.5px;
}
.flat-search input::placeholder { color: var(--ink-4); }
.flat-search input:focus { border-color: var(--gold); outline: none; }
.flat-count { flex: none; font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }
.flat-empty {
  margin: 12px 20px 0; padding: 10px 12px;
  border: 1px solid var(--gold-line); background: var(--card); font-size: 14px;
}
.flat-empty a { color: var(--gold); }

/* ---- body: rail + main ------------------------------------------------ */
.flat-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.flat-rail {
  position: sticky; top: var(--flat-header-h); align-self: start;
  max-height: calc(100vh - var(--flat-header-h));
  overflow: auto; padding: 16px 12px 16px 16px;
  border-right: 1px solid var(--line); font-size: 14px;
}
.flat-rail-list { list-style: none; margin: 0; padding: 0; }
.flat-rail-list li { margin: 0; }
.flat-rail-list a {
  display: block; padding: 5px 8px; border-radius: 3px;
  color: var(--ink-2); text-decoration: none;
}
.flat-rail-list a:hover { background: var(--card); color: #fff; }
.flat-rail-contact {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.flat-rail-contact a { color: var(--ink-2); text-decoration: none; }
.flat-rail-contact a:hover { color: var(--gold-2); }
.flat-rail-contact .flat-btn { margin-top: 6px; color: #000; }
.flat-rail-phone { font-weight: 700; color: #fff !important; }
.flat-main { min-width: 0; padding: 18px 20px 40px; }

/* ---- sections --------------------------------------------------------- */
.flat-sec { padding: 22px 0 10px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--flat-header-h) + 8px); }
.flat-sec:first-child { padding-top: 4px; border-top: 0; }
.flat-sec-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--gold-line);
}
.flat-sec-head h2 { font-size: 19px; }
.flat-mark {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; color: var(--gold); opacity: .8;
}
.flat-h3 { font-size: 15px; margin: 0 0 6px; color: var(--ink-2); }
.flat-more { margin-top: 10px; font-size: 14px; }

/* Masthead: the fold */
.flat-h1 { font-size: 26px; margin: 0 0 6px; }
.flat-scope { font-size: 16px; color: var(--ink-2); max-width: 72ch; }
.flat-cred { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 14.5px; color: var(--ink); max-width: 72ch; }
.flat-seal { width: 40px; height: 40px; flex: none; }
.flat-where { margin: 8px 0 0; font-size: 14px; color: var(--ink-3); }
.flat-where a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.flat-where a:hover { color: var(--gold-2); }
.flat-quote { margin: 14px 0 0; border-left: 3px solid var(--gold); padding: 2px 0 2px 14px; max-width: 72ch; }
.flat-quote p { font-size: 15.5px; color: var(--ink); }
.flat-quote footer { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

/* The masthead grid: text beside the photograph of the floor. Both
   columns minmax(0, ...) -- a bare fr would grow to the image's
   intrinsic width (lessons 2026-09-04, twice). */
.flat-mast { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px 28px; align-items: start; }
.flat-mast-text { min-width: 0; }
.flat-pitch { margin: 10px 0 0; max-width: 62ch; color: var(--ink-2); font-size: 15.5px; }
.flat-mast-actions { margin: 14px 0 0; }
.flat-mast-fig { margin: 0; min-width: 0; }
.flat-mast-fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--line); }
.flat-mast-fig figcaption { font-size: 12px; margin-top: 4px; }
.flat-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }

/* What we build: six photographed cards, a ruled grid with 1px gaps
   over the line colour, and the gallery strip. */
.flat-fams {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.flat-fam { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 0 12px; background: var(--card); }
.flat-fam-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.flat-fam-h { font-size: 15.5px; padding: 8px 14px 0; }
.flat-fam-lede { padding: 0 14px; font-size: 13.5px; color: var(--ink-2); }
.flat-fam-list { margin: 2px 0 0; padding: 0 14px 0 30px; font-size: 13px; color: var(--ink-3); }
.flat-fam-list li { margin: 0 0 2px; }
.flat-fam-door { margin: auto 14px 0; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--gold); text-decoration: none; }
.flat-fam-door:hover { color: var(--gold-2); text-decoration: underline; }
.flat-strip { display: flex; gap: 10px; overflow-x: auto; margin: 14px 0 0; padding-bottom: 6px; scrollbar-width: thin; }
.flat-strip-item { flex: none; width: 160px; margin: 0; }
.flat-strip-item img { display: block; width: 160px; height: 120px; object-fit: cover; border: 1px solid var(--line); }
.flat-strip-item figcaption { font-size: 11.5px; line-height: 1.3; color: var(--ink-4); margin-top: 3px; max-height: 2.6em; overflow: hidden; }

/* The building: the machine table. Row headers are labels, not a
   second header row; the model sits under the name; a status tag says
   what is not yet in production. */
.flat-shop-table th[scope="row"] {
  text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink);
  border-bottom: 1px solid var(--line); white-space: normal; width: 30%;
}
.flat-model { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.flat-status { background: rgba(212, 175, 55, .14); color: var(--gold); border: 1px solid var(--gold-line); vertical-align: 1px; margin-left: 4px; }
.flat-cap { color: var(--ink-2); }
.flat-shop-line { margin: 10px 0 0; max-width: 84ch; font-size: 14px; color: var(--ink); }

/* The paper: row headers wrap (the spec-table rule is nowrap, and a
   nowrap "Shop drawings, piece marks and weld maps" widened every phone
   to 394 px -- the geometry probe caught it, 2026-09-05). */
.flat-spec-table.flat-paper-table th[scope="row"] { white-space: normal; width: 36%; }

/* Send us a job: the six ways, a ruled two-column list; the steps. */
.flat-arrive-grid, .flat-paper-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; }
.flat-ways {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.flat-way { background: var(--card); padding: 10px 12px 12px; min-width: 0; }
.flat-way-h { display: block; margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--gold); text-decoration: none; overflow-wrap: anywhere; }
.flat-way-h:hover { color: var(--gold-2); text-decoration: underline; }
.flat-way p { font-size: 13.5px; color: var(--ink-2); }
.flat-steps { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.flat-steps li { margin: 0 0 8px; }
.flat-steps b { color: var(--ink); }

/* Company: the quotes wall and who runs it. */
.flat-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 14px; }
.flat-quotes .flat-quote { margin: 0; }
.flat-who { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; max-width: 72ch; }
.flat-who-img { width: 96px; height: auto; flex: none; border: 1px solid var(--line); }
.flat-who p { font-size: 13.5px; color: var(--ink-2); }

/* ---- tables ----------------------------------------------------------- */
.flat-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.flat-table th {
  text-align: left; padding: 6px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--gold-line); white-space: nowrap;
}
.flat-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.flat-table tbody tr:nth-child(even) { background: var(--card-2); }
.flat-table tbody tr:hover { background: #16171a; }
/* position: relative is load-bearing: the sr-only <th> labels are absolutely
   positioned, and without a positioned wrap their static position sits at
   the table's far edge, outside the scroll clip -- a 1 px box at x=660 that
   widened every phone to the table. The wrap as containing block clips it. */
.flat-table-wrap { overflow-x: auto; position: relative; }
.flat-tag {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.flat-stock { color: #58c17a; }
.flat-lead { color: var(--ink-3); }

/* Company */
.flat-letter-ico { width: 22px; height: 22px; vertical-align: -6px; margin-right: 4px; }
.flat-letters { margin-bottom: 12px; }
.flat-refs { color: var(--ink-2); margin: 0 0 10px; font-size: 14px; }
.flat-counters { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 0; }
.flat-counters div { display: flex; flex-direction: column; }
.flat-counters dt { font-size: 24px; font-weight: 800; color: var(--gold); line-height: 1.1; }
.flat-counters dd { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.flat-company-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.flat-nap { line-height: 1.55; font-size: 14.5px; }
.flat-nap-name { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin: 0 0 4px; }
.flat-nap address { font-style: normal; }
.flat-nap a { color: var(--ink-2); text-decoration: none; }
.flat-nap a:hover { color: var(--gold-2); }
.flat-doors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 0; }
.flat-footer-links {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px;
}
.flat-footer-links a { color: var(--ink-3); text-decoration: none; }
.flat-footer-links a:hover { color: var(--gold-2); }
.flat-legal { margin-top: 10px; font-size: 12.5px; color: var(--ink-4); }

/* ---- rack / products / design / process sections ---------------------- */
.flat-sec-sub { flex: 1 1 auto; font-size: 13px; color: var(--ink-3); }
.flat-group { margin: 0 0 16px; }
.flat-group .flat-h3 { margin: 4px 0 6px; }
.flat-lede { max-width: 72ch; color: var(--ink-2); margin: 0 0 10px; }
.v4-dxf + .flat-lede { margin-top: 12px; } /* the card leads the cut lane */
.flat-size { font-weight: 600; white-space: nowrap; }
.flat-call { color: var(--ink-3); }
.flat-order { white-space: nowrap; text-align: right; }
.flat-order .flat-btn { vertical-align: middle; margin-right: 6px; }
.flat-fineprint { font-size: 12.5px; max-width: 90ch; margin: 4px 0 0; }
.flat-product-cell { display: flex; gap: 10px; align-items: flex-start; min-width: 220px; }
.flat-product-thumb { width: 56px; height: 56px; object-fit: cover; flex: none; border: 1px solid var(--line); background: #000; }
.flat-product-name { color: var(--gold); text-decoration: none; font-weight: 600; }
.flat-product-name:hover { color: var(--gold-2); text-decoration: underline; }
.flat-product-cell p { font-size: 12.5px; margin-top: 2px; }
.flat-design-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.flat-spec-table th[scope="row"] {
  text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink);
  border-bottom: 1px solid var(--line); white-space: nowrap; width: 1%;
}
.flat-artifacts { display: flex; flex-direction: column; gap: 10px; }
.flat-artifact { margin: 0; }
.flat-artifact img { display: block; width: 100%; border: 1px solid var(--line); }
.flat-artifact figcaption { font-size: 12px; margin-top: 4px; }

/* ---- shared with the cinematic page: quick purchase dialog ------------ */
.v4-dim { color: var(--ink-4); }
.v4-price { color: var(--gold); font-weight: 600; }
.v4-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  border: 2px solid transparent; border-radius: 4px;
  font-weight: 700; font-size: 15px; line-height: 1.2; font-family: inherit;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.v4-btn-gold { background: var(--gold); border-color: var(--gold); color: #000; }
.v4-btn-gold:hover { background: var(--gold-2); border-color: var(--gold-2); }
.v4-btn-ghost { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.v4-btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.v4-btn-sm { min-height: 32px; padding: 0 12px; font-size: 13.5px; }
.v4-dialog {
  background: #0b0e15; color: var(--ink);
  border: 1px solid var(--gold-line); border-radius: 8px;
  padding: 0; width: min(440px, calc(100vw - 32px));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6);
}
.v4-dialog::backdrop { background: rgba(2, 3, 6, .72); }
.v4-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.v4-dialog-head h2 { margin: 0; font-size: 17px; }
.v4-dialog-close {
  background: none; border: 0; color: var(--ink-3); font-size: 24px;
  line-height: 1; cursor: pointer; padding: 2px 6px;
}
.v4-dialog-close:hover { color: #fff; }
.v4-dialog-body { padding: 16px 18px; }
.v4-dialog-name { font-weight: 700; margin: 0 0 2px; }
.v4-dialog-specs { font-size: 13.5px; margin: 0 0 4px; }
.v4-dialog-stock { color: var(--gold); font-size: 13px; margin: 0 0 14px; }
.v4-field { margin: 0 0 14px; }
.v4-field label, .v4-delivery legend { display: block; font-size: 13.5px; color: var(--ink-2); margin: 0 0 6px; }
.v4-qty-row { display: flex; align-items: center; gap: 8px; }
.v4-step {
  width: 34px; height: 34px; border-radius: 6px;
  border: 1px solid var(--line); background: #141822; color: var(--ink);
  font-size: 17px; cursor: pointer;
}
.v4-step:hover { border-color: var(--gold); }
.v4-dialog input[type="number"] {
  width: 84px; padding: 7px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: #10141d; color: var(--ink);
  font: inherit; text-align: center;
}
.v4-delivery { border: 0; padding: 0; margin: 0 0 14px; }
.v4-delivery label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; color: var(--ink); margin: 0 0 7px; cursor: pointer;
}
.v4-delivery input { accent-color: var(--gold); }
.v4-price-box { border-top: 1px solid var(--line); padding-top: 12px; font-size: 14.5px; }
.v4-price-box p { display: flex; justify-content: space-between; margin: 0 0 6px; }
.v4-price-total { font-size: 16.5px; font-weight: 700; }
.v4-store-ok { color: #58c17a; font-size: 14px; margin: 10px 0 0; }
.v4-store-err { color: #e26d6d; font-size: 14px; margin: 10px 0 0; }
.v4-dialog-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  padding: 14px 18px; border-top: 1px solid var(--line);
}

/* ---- cut, training --------------------------------------------------- */
.flat-training-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px;
}
.flat-cut-limits { max-width: 720px; }
/* Row headers in the cut table read as labels, not as a second header
   row: plain weight and case, and they wrap. */
.flat-cut-table th[scope="row"] {
  font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink); border-bottom: 1px solid var(--line); white-space: normal;
}
.flat-actions-tight { margin: 12px 0 6px; }
.flat-cap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flat-cap-head .flat-h3 { margin: 0; }
.flat-cert-mark { width: 44px; height: 44px; flex-shrink: 0; }
.flat-note { border-left: 2px solid var(--gold); padding: 1px 0 1px 11px; margin: 10px 0; }
.flat-note-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 3px;
}
.flat-note p { margin: 0; color: var(--ink-3); font-size: 13.5px; }
/* The shared drop cards (landing/sections/_dxf_drop.html, _bom_drop.html)
   keep their v4- names on this page: one partial, one script, two pages.
   Rules verbatim from v4.css, folded where the two cards agree. */
.v4-dxf, .v4-bom { display: block; margin: 12px 0 4px; }
.v4-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.v4-dxf-drop, .v4-bom-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 132px; padding: 20px 16px; text-align: center;
  border: 1px dashed var(--gold); border-radius: 8px; background: rgba(212, 175, 55, .05);
  color: var(--ink-2); cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.v4-dxf-drop:hover, .v4-dxf-drop.is-hover, .v4-bom-drop:hover, .v4-bom-drop.is-hover { background: rgba(212, 175, 55, .12); }
.v4-dxf-drop-main, .v4-bom-drop-main { color: var(--gold); font-weight: 600; font-size: 15px; }
.v4-dxf-drop-sub, .v4-bom-drop-sub, .v4-dxf-drop-load, .v4-bom-drop-load { color: var(--ink-3); font-size: 13px; }
.v4-dxf-drop-load, .v4-bom-drop-load { display: none; }
[data-state="loading"] .v4-dxf-drop-sub, [data-state="loading"] .v4-bom-drop-sub { display: none; }
[data-state="loading"] .v4-dxf-drop-load, [data-state="loading"] .v4-bom-drop-load { display: block; }
[data-state="live"] .v4-dxf-drop, [data-state="live"] .v4-dxf-alt { display: none; }
.v4-dxf-alt {
  display: block; margin: 10px auto 0; padding: 0; border: 0; background: none;
  color: var(--gold); font: inherit; font-size: 13px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.v4-dxf-alt:hover { color: #fff; }
.v4-dxf-mount:empty { display: none; }
.v4-bom-drop-err { display: block; color: #DC143C; font-size: 13px; margin-top: 8px; }
.v4-bom-drop-err:empty { display: none; }
.v4-bom-alt { color: var(--ink-3); font-size: 13px; margin: 10px 0 0; }
.v4-bom-alt a { color: var(--gold); }

/* ---- responsive -------------------------------------------------------- */
/* Never hide .flat-phone, .flat-seal or .flat-cred under a max-width rule:
   the header phone and the CWB mark are scored in the fold at every width. */
@media (max-width: 899px) {
  /* minmax(0, 1fr), never 1fr: the nowrap chip row below has a 1000 px
     min-content and a bare 1fr column would grow to hold it. */
  .flat-body { grid-template-columns: minmax(0, 1fr); }
  .flat-rail {
    position: static; max-height: none; overflow: visible;
    padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--line);
  }
  /* One scrolling row of chips, not four wrapped: the cut lane leads the
     page and a wrapped index pushed its card off the first phone screen
     (2026-09-04). The row scrolls inside itself; the document never widens. */
  .flat-rail-list { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; }
  .flat-rail-list li { flex: none; }
  .flat-rail-list a {
    padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--card); font-size: 13px; white-space: nowrap;
  }
  .flat-rail-contact { display: none; }
  /* The photograph leads on a phone (DOM order is unchanged: the fold
     the harness reads is still H1, scope, CWB, quote). Wider than tall
     so the H1 is on the first screen. */
  .flat-mast { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .flat-mast-fig { order: -1; }
  .flat-mast-fig img { aspect-ratio: 16 / 9; }
  .flat-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flat-quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  /* minmax(0, 1fr), never bare 1fr: 1fr is minmax(auto, 1fr), and auto
     is the column's min-content -- a nowrap row header inside a
     scroll wrap made a column 380 px wide on a 360 px phone. */
  .flat-design-grid, .flat-training-grid, .flat-arrive-grid, .flat-paper-grid { grid-template-columns: minmax(0, 1fr); }
  .flat-artifacts { flex-direction: row; }
  .flat-artifact { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 699px) {
  .flat-login { display: none; }
  .flat-company-grid { grid-template-columns: 1fr; }
  .flat-perlb { display: none; }
  /* The machine table stacks: name, what, capacity as three lines per
     machine; nothing scrolls sideways. [hidden] still wins (important). */
  .flat-shop-table, .flat-shop-table tbody { display: block; }
  .flat-shop-table thead { display: none; }
  .flat-shop-table tr { display: block; padding: 8px 6px; border-bottom: 1px solid var(--line); }
  /* th[scope="row"] here too: the desktop rule (30 % wide, ruled) has the
     attribute's specificity and would keep the name in a narrow column. */
  .flat-shop-table th[scope="row"], .flat-shop-table td { display: block; width: auto; padding: 0; border: 0; }
  .flat-shop-table td { font-size: 13px; }
  .flat-shop-table .flat-cap { color: var(--ink-3); }
  .flat-shop-table .flat-cap:empty { display: none; }
  /* Wide tables (.flat-stack) become two-column rows: size | price on
     the first line, availability | door on the second, weight or spec
     under. Six columns scrolling sideways hid the Buy button on every
     phone. The header row goes; each cell says what it is, the product
     tiers through their data-th caption. */
  .flat-stack, .flat-stack tbody { display: block; }
  .flat-stack thead { display: none; }
  .flat-stack tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px; row-gap: 2px; align-items: start;
    padding: 8px 6px; border-bottom: 1px solid var(--line);
  }
  .flat-stack td { display: block; padding: 0; border: 0; }
  .flat-stack .flat-perlb { display: none; } /* outranks the block rule above */
  .flat-stack .flat-size { grid-column: 1; grid-row: 1; white-space: normal; }
  .flat-stack .flat-price-cell { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
  .flat-stack .flat-stock, .flat-stack .flat-lead { grid-column: 1; grid-row: 2; }
  .flat-stack .flat-sub { grid-column: 1; grid-row: 3; font-size: 12.5px; }
  .flat-stack .flat-order { grid-column: 2; grid-row: 2 / 4; align-self: end; text-align: right; }
  .flat-stack .flat-order .flat-door { display: block; margin-top: 6px; }
  .flat-products-table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .flat-products-table .flat-product-cell { grid-column: 1 / -1; min-width: 0; }
  .flat-products-table .flat-tier::before {
    content: attr(data-th); display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4);
  }
  .flat-products-table .flat-lead-cell { grid-column: 1 / 3; }
  .flat-products-table .flat-order { grid-column: 3; grid-row: auto; align-self: start; }
  .flat-products-table .flat-order .flat-door { margin-top: 0; }
}
@media (max-width: 559px) {
  .flat-quote-btn { display: none; }
  .flat-brand img { height: 22px; }
  .flat-header-row { gap: 10px; padding: 0 12px; }
  .flat-search { padding: 0 12px 10px; }
  .flat-main { padding: 14px 12px 32px; }
  .flat-empty { margin: 12px 12px 0; }
  .flat-fams, .flat-ways { grid-template-columns: minmax(0, 1fr); }
  .flat-h1 { font-size: 22px; }
  .flat-quote p { font-size: 14px; }
  .flat-who-img { width: 72px; }
}
@media (max-width: 399px) {
  .flat-toggle-label { display: none; }
  .flat-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}