/* [COMPANY] site stylesheet.
   Extends the line card system in ../../../linecard/linecard.html:
   the same five tokens, the same three families, the same solid blocks,
   thick rules, accent bars and mono chips, rescaled from print points to
   screen pixels. Nothing here is borrowed from any other project. */

:root{
  --ink:#11141b;
  --ink-2:#4a5162;
  --accent:#e2451a;
  --paper:#ffffff;
  --tint:#f1efec;
  --rule:#11141b;
  --shell:#d9d6d2;
  --line:#d5d1cc;

  --sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display:"Archivo", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --wrap:1080px;
  --gutter:24px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ background:var(--shell); -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; }

a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
a:hover{ color:var(--accent); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:#fff; padding:10px 16px; z-index:60;
  font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.14em;
}
.skip:focus{ left:0; }

/* ---------- header ---------- */
.site-header{ background:var(--ink); color:#fff; }
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:74px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px;
}
.wordmark{
  font-family:var(--display); font-weight:800; font-size:1.5rem;
  letter-spacing:-0.022em; line-height:1; color:#fff; text-decoration:none;
}
.wordmark span{ color:var(--accent); }
.wordmark:hover{ color:#fff; }

.nav{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; }
.nav a{
  font-family:var(--mono); font-weight:500; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:#c9cdd6;
  text-decoration:none; padding:6px 0; border-bottom:3px solid transparent;
  white-space:nowrap;
}
.nav a:hover{ color:#fff; border-bottom-color:var(--ink-2); }
.nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--accent); }

.badge{
  display:inline-block; min-width:20px; margin-left:7px; padding:1px 5px;
  background:var(--accent); color:#fff; font-family:var(--mono); font-weight:600;
  font-size:.68rem; line-height:1.4; text-align:center;
}
.badge[hidden]{ display:none; }

.accentbar{ height:6px; background:var(--accent); }
.inkbar{ height:6px; background:var(--ink); }

/* ---------- hero ---------- */
.hero{ background:var(--ink); color:#fff; padding:56px 0 52px; }
.hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2rem, 5.4vw, 3.1rem); line-height:1.04; letter-spacing:-0.024em;
  max-width:19ch;
}
.hero h1 .accent{ color:var(--accent); }
.hero .lead{ margin-top:20px; font-size:1.06rem; max-width:60ch; color:#e6e8ec; }
.hero .lead + .lead{ margin-top:10px; color:#a9b0be; font-size:.98rem; }

.pagehead{ padding:44px 0 34px; border-bottom:6px solid var(--ink); }
.pagehead h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.75rem, 4.4vw, 2.5rem); line-height:1.06; letter-spacing:-0.022em;
}
.pagehead .lead{ margin-top:14px; font-size:1.02rem; color:var(--ink-2); max-width:66ch; }

.kicker{
  font-family:var(--mono); font-weight:600; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:12px;
}
.kicker.on-ink{ color:var(--accent); }
.kicker.quiet{ color:var(--ink-2); }

/* ---------- sections ---------- */
.sec{ padding:44px 0; }
.sec.tinted{ background:var(--tint); }
.sec.inked{ background:var(--ink); color:#fff; }
.sec.inked h2, .sec.inked h3{ color:#fff; }
.sec.inked p{ color:#dfe2e8; }

.sec-head{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  border-top:4px solid var(--rule); padding-top:10px; margin-bottom:22px;
}
.sec-head h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.2rem, 2.6vw, 1.6rem); letter-spacing:-0.012em; text-transform:uppercase;
}
.sec-head .note{
  font-size:.85rem; color:var(--ink-2); margin-left:auto; text-align:right;
  max-width:44ch; line-height:1.4;
}
.sec.inked .sec-head{ border-top-color:var(--accent); }
.sec.inked .sec-head .note{ color:#a9b0be; }

h3{ font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-0.006em; }

p + p{ margin-top:12px; }
.prose p{ max-width:72ch; }
.prose p + h3{ margin-top:26px; }
.prose h3 + p{ margin-top:8px; }
.prose > * + .list{ margin-top:12px; }

/* ---------- panels, chips, lists ---------- */
.panel{
  background:var(--tint); padding:18px 20px; border-left:6px solid var(--accent);
}
.panel h3{ font-family:var(--mono); font-weight:600; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:8px; }
.panel p{ font-size:.95rem; color:var(--ink-2); }
.panel.on-paper{ background:var(--paper); border:2px solid var(--ink); border-left:6px solid var(--accent); }

.chip{
  display:inline-block; background:var(--ink); color:#fff;
  font-family:var(--mono); font-weight:600; font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; padding:4px 8px; margin-bottom:8px;
}
.chip.accent{ background:var(--accent); }
.chip.outline{ background:transparent; color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }

.list{ list-style:none; }
.list li{
  position:relative; padding-left:16px; margin-bottom:7px; font-size:.95rem; line-height:1.45;
}
.list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; background:var(--accent);
}
.list.ink li::before{ background:var(--ink); }
.sec.inked .list li::before{ background:var(--accent); }

.cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.cols-2{ display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:start; }
.col h3{
  font-family:var(--display); font-weight:800; font-size:1rem; text-transform:uppercase;
  letter-spacing:.01em; border-top:4px solid var(--accent); padding-top:10px; margin-bottom:12px;
}
.col p{ font-size:.95rem; margin-bottom:10px; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.step{ border-top:4px solid var(--ink); padding-top:12px; }
.step .num{
  font-family:var(--display); font-weight:800; font-size:1.7rem; line-height:1;
  color:var(--accent); display:block; margin-bottom:8px;
}
.step p{ font-size:.94rem; line-height:1.42; }
.sec.inked .step{ border-top-color:var(--accent); }

.steps-numbered{ counter-reset:s; list-style:none; }
.steps-numbered li{
  counter-increment:s; position:relative; padding-left:44px; margin-bottom:16px;
  border-top:2px solid var(--line); padding-top:12px;
}
.steps-numbered li::before{
  content:counter(s, decimal-leading-zero); position:absolute; left:0; top:12px;
  font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--accent);
}
.steps-numbered li b{ font-weight:600; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--ink); color:#fff; text-decoration:none;
  font-family:var(--mono); font-weight:600; font-size:.76rem;
  letter-spacing:.13em; text-transform:uppercase; padding:14px 22px;
  border:0; cursor:pointer; line-height:1.2; text-align:center;
}
.btn:hover{ background:var(--accent); color:#fff; }
.btn.accent{ background:var(--accent); }
.btn.accent:hover{ background:var(--ink); }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:#fff; }
.btn.small{ padding:9px 14px; font-size:.68rem; letter-spacing:.1em; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.sec.inked .btn.ghost{ color:#fff; box-shadow:inset 0 0 0 2px #fff; }
.sec.inked .btn.ghost:hover{ background:#fff; color:var(--ink); }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ---------- tables ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; contain:paint; }
/* contain:paint keeps a wide table's overflow inside its own scroller, so a narrow
   viewport never gains a horizontal page scroll. */
table.grid{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:600px; }
table.grid th{
  font-family:var(--mono); font-weight:600; font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; text-align:left; color:var(--ink);
  border-bottom:3px solid var(--ink); padding:8px 10px 8px 0; white-space:nowrap;
}
table.grid td{ border-bottom:1px solid var(--line); padding:10px 10px 10px 0; vertical-align:top; }
table.grid td.mpn{ font-family:var(--mono); font-weight:600; font-size:.86rem; white-space:nowrap; }
table.grid td.num, table.grid th.num{ text-align:left; }
table.grid tr:last-child td{ border-bottom:2px solid var(--ink); }
table.grid .muted{ color:var(--ink-2); font-size:.86rem; }

/* ---------- line card families ---------- */
.family{ border-top:4px solid var(--ink); padding-top:14px; margin-bottom:34px; }
.family .desc{ font-size:.95rem; color:var(--ink-2); max-width:78ch; margin-bottom:14px; }
.family .ask{
  background:var(--tint); border-left:6px solid var(--accent); padding:12px 16px;
  font-size:.92rem; color:var(--ink-2);
}

/* ---------- forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.field{ display:flex; flex-direction:column; }
.field.wide{ grid-column:1 / -1; }
.field label{
  font-family:var(--mono); font-weight:600; font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; margin-bottom:6px;
}
.field .hint{ font-size:.8rem; color:var(--ink-2); margin-top:6px; }
.field .req{ color:var(--accent); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="file"], select, textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--ink); background:var(--paper);
  border:2px solid var(--ink); padding:10px 12px; width:100%; border-radius:0;
  appearance:none; -webkit-appearance:none;
}
select{
  background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                   linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:38px;
}
textarea{ min-height:110px; resize:vertical; line-height:1.45; }
input:focus, select:focus, textarea:focus{ outline:3px solid var(--accent); outline-offset:1px; }
input.qty{ width:78px; text-align:center; font-family:var(--mono); font-weight:600; padding:8px 6px; }
input.inline{ padding:7px 9px; font-size:.88rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert{ padding:14px 18px; border-left:6px solid var(--accent); background:var(--tint);
  font-size:.94rem; margin-bottom:20px; }
.alert.quiet{ border-left-color:var(--ink); }
.alert[hidden]{ display:none; }

.empty{ background:var(--tint); padding:26px 22px; border-left:6px solid var(--ink-2);
  color:var(--ink-2); font-size:.95rem; }

.counts{
  display:flex; gap:26px; flex-wrap:wrap; font-family:var(--mono); font-weight:600;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2);
  margin-top:16px;
}
.counts b{ color:var(--accent); }

.refbox{ background:var(--ink); color:#fff; padding:30px 26px; margin-bottom:8px; }
.refbox .kicker{ color:var(--accent); }
.refbox .ref{
  font-family:var(--mono); font-weight:600; font-size:clamp(1.5rem, 5.6vw, 2.4rem);
  letter-spacing:.04em; word-break:break-all;
}

.suggest{ position:relative; }
.suggest-list{
  position:absolute; left:0; right:0; top:100%; z-index:20; background:var(--paper);
  border:2px solid var(--ink); border-top:0; max-height:320px; overflow-y:auto; list-style:none;
}
.suggest-list[hidden]{ display:none; }
.suggest-list li{ padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--line); font-size:.9rem; }
.suggest-list li:last-child{ border-bottom:0; }
.suggest-list li:hover, .suggest-list li.active{ background:var(--tint); }
.suggest-list .s-mpn{ font-family:var(--mono); font-weight:600; }
.suggest-list .s-meta{ display:block; color:var(--ink-2); font-size:.8rem; }

.photo-box{
  background:var(--tint); border:3px dashed var(--ink-2); color:var(--ink-2);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; min-height:200px;
}

/* ---------- footer ---------- */
.site-footer{ margin-top:0; }
.footer-contact{
  background:var(--accent); color:#fff; padding:16px 0;
}
.footer-contact .wrap{
  display:flex; flex-wrap:wrap; gap:6px 26px; align-items:baseline;
  font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.05em;
}
.footer-contact .name{
  font-family:var(--display); font-weight:800; font-size:.95rem;
  letter-spacing:.02em; text-transform:uppercase;
}
.footer-contact a{ color:#fff; }
.footer-note{ background:var(--ink); color:#a9b0be; padding:20px 0; font-size:.85rem; }
.footer-note p{ max-width:88ch; }
.footer-note a{ color:#fff; }
.footer-links{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px 20px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cols{ grid-template-columns:1fr 1fr; }
  .cols-2{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .sec-head .note{ margin-left:0; text-align:left; }
}

@media (max-width:640px){
  :root{ --gutter:18px; }
  .site-header .wrap{ min-height:0; align-items:flex-start; }
  .nav{ gap:2px 16px; }
  .cols{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .hero{ padding:40px 0 36px; }
  .sec{ padding:34px 0; }
  .btn{ width:100%; }
  .btn.small{ width:auto; }
  .btn-row .btn{ width:100%; }
}

@media (max-width:380px){
  body{ font-size:15px; }
  .wordmark{ font-size:1.3rem; }
}

/* ---------- checkbox field ---------- */
.field.check{ display:block; }
label.checkbox{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  font-family:var(--sans); font-size:.95rem; font-weight:400; line-height:1.45;
  letter-spacing:normal; text-transform:none; margin-bottom:0;
  background:var(--paper); border:2px solid var(--ink); padding:14px 16px;
}
label.checkbox input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:22px; height:22px; margin:0; border:2px solid var(--ink);
  background:var(--paper); cursor:pointer; border-radius:0; position:relative; top:1px;
}
label.checkbox input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
label.checkbox input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:1px; width:6px; height:12px;
  border:solid #fff; border-width:0 3px 3px 0; transform:rotate(42deg);
}
label.checkbox input[type="checkbox"]:focus{ outline:3px solid var(--accent); outline-offset:2px; }
label.checkbox .req{ color:var(--accent); font-family:var(--mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; margin-left:6px; white-space:nowrap; }

/* ---------- recap, the printable spec sheet ---------- */
.print-letterhead{ display:none; }
.recap-h{
  font-family:var(--display); font-weight:800; font-size:1rem; text-transform:uppercase;
  letter-spacing:.01em; border-top:4px solid var(--accent); padding-top:10px;
  margin:30px 0 12px;
}
table.grid.narrow{ min-width:0; }
table.grid.narrow th[scope="row"]{
  font-family:var(--mono); font-weight:600; font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; text-align:left; vertical-align:top; white-space:normal;
  width:34%; border-bottom:1px solid var(--line); padding:10px 16px 10px 0;
}
table.grid.narrow td{ white-space:pre-wrap; }
.json-block{
  font-family:var(--mono); font-size:.76rem; line-height:1.5; color:var(--ink);
  background:var(--tint); border-left:6px solid var(--ink); padding:16px 18px;
  max-height:340px; overflow:auto; white-space:pre; word-break:normal;
}
body.recap-mode #main > [data-step]{ display:none; }

/* ---------- print ---------- */
@media print{
  html, body{ background:#fff; color:#000; font-size:11pt; }
  @page{ margin:14mm; }
  .site-header, .accentbar, .site-footer, .skip, .noprint,
  body.recap-mode #main > [data-step]{ display:none !important; }
  .sec{ padding:0; background:#fff !important; }
  .wrap{ max-width:none; padding:0; }
  .print-letterhead{
    display:flex; justify-content:space-between; align-items:baseline;
    border-bottom:3px solid #000; padding-bottom:6px; margin-bottom:12px;
  }
  .print-mark{ font-family:var(--display); font-weight:800; font-size:15pt; letter-spacing:-0.02em; }
  .print-meta{ font-family:var(--mono); font-size:8pt; letter-spacing:.16em; text-transform:uppercase; }
  .refbox{ background:#fff; color:#000; border:2px solid #000; padding:10px 12px; margin-bottom:10px; }
  .refbox .kicker{ color:#000; }
  .refbox .ref{ font-size:16pt; }
  .alert{ background:#fff; border-left:4px solid #000; padding:6px 12px; margin-bottom:10px; }
  .sec-head{ border-top-width:3px; margin-bottom:8px; padding-top:6px; }
  .sec-head .note{ color:#000; }
  .recap-h{ border-top-color:#000; margin:13px 0 6px; padding-top:6px; page-break-after:avoid; }
  /* the on-screen scroller must not clip or fragment the printed sheet */
  .table-scroll{ overflow:visible; contain:none; max-width:none; }
  /* the two short answer tables move whole rather than split across a page */
  #recap-company, #recap-answers{ page-break-inside:avoid; }
  table.grid{ min-width:0; width:100%; font-size:9.5pt; }
  table.grid th{ color:#000; border-bottom:2px solid #000; }
  table.grid td{ border-bottom:1px solid #999; padding:6px 10px 6px 0; }
  table.grid .muted{ color:#000; font-size:9pt; }
  table.grid.narrow th[scope="row"]{ color:#000; padding:6px 14px 6px 0; }
  thead{ display:table-header-group; }
  tr, li{ page-break-inside:avoid; }
  .counts{ color:#000; margin-top:10px; }
  .counts b{ color:#000; }
  .steps-numbered li{ border-top-color:#999; margin-bottom:6px; padding-top:6px; }
  .steps-numbered li::before{ color:#000; }
  a{ color:#000; text-decoration:none; }
}