/* ============================================================
   SMeasy — shared styles
   ============================================================ */
:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --muted: #6b7280;
  --line: #e4e4e7;
  --brand: #5a6bc4;        /* periwinkle, darkened for AA text contrast on white */
  --brand-dark: #454f9c;
  --accent: #b7cc00;       /* lime, darkened for use on light surfaces */
  --lime: #ddff55;         /* true logo lime -- accent-on-dark / highlight only, not text */
  --periwinkle: #8a9aec;   /* true logo periwinkle -- decorative use, not small text */
  --radius: 14px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }

/* Layout ------------------------------------------------------ */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.muted { color: var(--muted); }

/* Header ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
/* Wordmark is a single SVG asset (brand/logo.svg) so it scales cleanly and can
   be reused for the favicon, letterhead, etc. Edit that file to change the
   wordmark -- typeface and "Bio" placement both live there, not here. */
/* flex:0 0 auto + max-width:none stop the global `img{max-width:100%}` from
   resolving against a zero-width flex item and collapsing the logo to 0x0. */
/* Height is of the whole lockup incl. the "Bio" line, so the "SMeasy" wordmark
   itself reads at roughly half this. */
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 64px; width: auto; max-width: none; display: block; }
@media (max-width: 620px){
  .site-header .container { height: 68px; }
  .logo img { height: 50px; }
}
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { color: var(--ink); font-weight: 500; font-size: 15px; }
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cart-badge {
  display: none; min-width: 20px; height: 20px; padding: 0 6px;
  align-items: center; justify-content: center;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}

/* Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; cursor: pointer; transition: .15s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); text-decoration: none; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Hero -------------------------------------------------------- */
.hero { padding: 88px 0 64px; }
.hero h1 { font-size: 46px; line-height: 1.1; margin: 0 0 16px; letter-spacing: -1px; }
.hero p.lead { font-size: 20px; color: var(--muted); max-width: 640px; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Cards & grids ---------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px){ .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.card-pad { padding: 24px; }

.value-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.value-card h3 { margin: 0 0 8px; font-size: 18px; }
.value-card p { margin: 0; color: var(--muted); font-size: 15px; }

/* Product card ----------------------------------------------- */
.product-card { display: flex; flex-direction: column; }
.product-schem {
  background: linear-gradient(180deg,#f4f4f5,#fff);
  color: var(--ink); padding: 24px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line); min-height: 150px;
}
.product-card .card-pad { display: flex; flex-direction: column; flex: 1; }
.product-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--brand); }
.product-card h3 { margin: 6px 0 8px; font-size: 18px; }
.product-card p { color: var(--muted); font-size: 14px; margin: 0 0 16px; flex: 1; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.price { font-size: 20px; font-weight: 800; }
.price small { font-size: 12px; font-weight: 500; color: var(--muted); display: block; }

/* Product detail --------------------------------------------- */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 820px){ .detail { grid-template-columns: 1fr; } }
.detail-schem { background: linear-gradient(180deg,#f4f4f5,#fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 48px; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.spec-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec-table th { color: var(--muted); font-weight: 600; width: 45%; }
.qty-row { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.qty-row input { width: 72px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }

/* Cart / checkout -------------------------------------------- */
.cart-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cart-table th, .cart-table td { padding: 16px; text-align: left; border-bottom: 1px solid var(--line); }
.cart-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cart-table td.num, .cart-table th.num { text-align: right; }
.cart-qty { width: 60px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.link-danger { color: #dc2626; cursor: pointer; font-size: 13px; background: none; border: none; }
.summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.summary-row { display: flex; justify-content: space-between; margin: 8px 0; }
.summary-row.total { font-size: 20px; font-weight: 800; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px){ .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 15px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }

.notice { background: #f4f4f5; border: 1px solid #d4d4d8; color: #1a1a1a; padding: 12px 14px; border-radius: 10px; font-size: 14px; margin: 12px 0; }

.confirm { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; text-align: center; box-shadow: var(--shadow); }
.confirm .check { width: 64px; height: 64px; border-radius: 50%; background: #e4e4e7; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 34px; margin: 0 auto 16px; }

/* Category cards (landing) ----------------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
@media (max-width: 720px){ .cat-grid { grid-template-columns: 1fr; } }
.cat-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
  color: var(--ink); transition: .15s; text-decoration: none;
}
.cat-card:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; box-shadow: 0 6px 28px rgba(0,0,0,.10); }
.cat-card .cat-icon { background: linear-gradient(180deg,#f4f4f5,#fff); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; align-items: center; justify-content: center; }
.cat-card .cat-icon svg { width: 120px; height: 70px; }
.cat-card h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.cat-card p { margin: 0; color: var(--muted); font-size: 15px; flex: 1; }
/* The whole card is the link, so this cannot be a real <button> — a button is
   not valid inside an <a>. It is a span painted to read as one, which is what
   Marco asked for: the click target has to be visible on the card, not a line
   of text you have to know is clickable. margin-right:auto stops it stretching
   to the full card width in the flex column. */
.cat-card .cat-go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-right: auto; padding: 10px 18px;
  background: var(--brand); color: #fff;
  border-radius: 10px; font-weight: 600; font-size: 14px;
  transition: .15s;
}
.cat-card:hover .cat-go { background: var(--brand-dark); text-decoration: none; }

/* Product list (category page) ------------------------------- */
.product-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 28px; }
/* Three columns, specs on the right — Marco, 2026-08-14: "I liked the
   description on the side." The middle column is wider than the 280px it used
   to be, and takes the extra from the name column, which only holds a name, a
   price and one button. */
.product-row {
  display: grid; grid-template-columns: 190px 1.4fr 1fr; gap: 32px;
  align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line);
}
.product-row .pr-name h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; }
.product-row .pr-price { font-weight: 800; font-size: 16px; }
.product-row .pr-price small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.product-row .pr-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* THE SCHEMATIC WAS NOT FILLING THIS BOX (Marco, 2026-08-14: "you had space not
   used in the box"). Two reasons, both fixed here:
     1. the sizing rule targeted `svg`, but the schematics are <img>, so it
        never applied and the drawing sat at its intrinsic size;
     2. min-height 110px plus 14px padding held the box taller than the drawing,
        leaving an empty band above and below it.
   The image now fills the width and the box is sized by its content. Do not put
   min-height back. */
.product-row .pr-schem {
  background: linear-gradient(180deg,#f4f4f5,#fff);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; display: flex; align-items: center; justify-content: center;
}
.product-row .pr-schem img { display: block; width: 100%; height: auto; }
/* Single-product category: the drawing has moved to the figure at the top of
   the page, so the row has no picture and its two remaining columns share the
   width. See the soloFigureSrc note in category.html. */
.product-row--noschem { grid-template-columns: 190px 1fr; }
/* Without the picture the spec column runs the full page width, which leaves
   each value a long way from its label. */
.product-row--noschem .pr-specs { max-width: 620px; }

/* Hero launch card ---------------------------------------------------- */
/* The hero used to be one column of text with the right half empty. */
.hero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; }
@media (max-width: 900px){ .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.launch-note {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
}
.launch-note .ln-flag { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.launch-note .ln-lead { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--brand); }
.launch-note .ln-body { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.launch-note .ln-ask { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.launch-note .btn { width: 100%; text-align: center; }

/* Shared product statement under a platform blurb ---------------------- */
.product-statement { max-width: 680px; margin-top: 14px; }

/* The two steps on the order confirmation ------------------------------ */
.order-todo { margin: 8px 0 20px; padding-left: 22px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.order-todo li { margin-bottom: 8px; }
.order-todo strong { color: var(--ink); }

/* First-time-supplier note under the cart's order button --------------- */
.vendor-ask {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
.vendor-ask .btn { display: block; width: 100%; margin-top: 10px; font-size: 14px; }

/* Enquiry card in the category grid ----------------------------------- */
/* Sells nothing, so it must not look like the cards that do: dashed border,
   no shadow, no picture. Same size and position, different weight. */
.cat-card--ask {
  background: linear-gradient(180deg,#f7f8fe,#fff);
  border-style: dashed; border-color: var(--periwinkle); box-shadow: none;
  justify-content: center;
}
.cat-card--ask:hover { border-style: dashed; box-shadow: none; }
.cat-card--ask h3 { color: var(--brand); }

/* Contact dialog ------------------------------------------------------ */
/* Native <dialog>: Esc closes it and the backdrop comes free.
   Branded rather than neutral (Marco, 2026-08-14) — logo at the top, a
   periwinkle rule under it, and the address itself set in the brand colour on
   a tint of it, so the one thing you are meant to take is the one thing that
   carries colour. */
.contact-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.contact-dialog::backdrop { background: rgba(26,26,26,.5); }
/* The dialog is padding-free so this strip can run edge to edge. */
.contact-dialog > * { margin-left: 30px; margin-right: 30px; }
.contact-dialog .cd-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0; padding: 18px 30px 16px;
  border-bottom: 3px solid var(--periwinkle);
  background: linear-gradient(180deg,#f7f8fe,#fff);
}
.contact-dialog .cd-logo { height: 34px; width: auto; max-width: none; display: block; }
.contact-dialog .cd-close {
  border: 0; background: none; color: var(--muted); font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 2px;
}
.contact-dialog .cd-close:hover { color: var(--ink); }
.contact-dialog .cd-name { margin: 22px 30px 0; font-size: 21px; font-weight: 800; letter-spacing: -.2px; }
.contact-dialog .cd-org { margin: 3px 30px 0; color: var(--muted); font-size: 14px; }
.contact-dialog .cd-mail {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px 30px 0;
}
.contact-dialog .cd-address {
  flex: 1 1 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; color: var(--brand-dark); overflow-wrap: anywhere;
  background: #f2f4fd; border: 1px solid #dfe3fa; border-radius: 8px;
  padding: 10px 12px;
}
.contact-dialog .cd-mail .btn-copy {
  border-color: var(--brand); background: var(--brand); color: #fff; padding: 10px 18px;
}
.contact-dialog .cd-mail .btn-copy:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.contact-dialog .cd-mail .btn-copy.is-copied { background: var(--brand-dark); border-color: var(--brand-dark); }
.contact-dialog .cd-alt { margin: 16px 30px 24px; font-size: 13px; }
.contact-dialog .cd-alt a { color: var(--muted); }
.contact-dialog .cd-alt a:hover { color: var(--brand); }

/* Copy-and-paste flanking sequences ---------------------------------- */
/* Sits directly under the schematic and matches its width, so the drawing and
   the sequences you design against it read as one unit. The sequence itself is
   the thing being taken away, so it gets the monospace and the room; the button
   is quiet until you are on it. */
.seq-block { margin-top: 18px; max-width: 720px; }
.seq-block h4 { margin: 0 0 10px; font-size: 14px; }
.seq-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.seq-row .seq-label { color: var(--muted); font-size: 13px; flex: 1 1 190px; }
.seq-row .seq-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .04em; color: var(--ink);
  background: #f4f4f5; border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 9px; overflow-wrap: anywhere;
}
.btn-copy {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn-copy:hover { border-color: var(--brand); color: var(--brand); }
.btn-copy.is-copied { border-color: var(--brand); background: var(--brand); color: #fff; }

.product-row .pr-intro p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.pr-specs { width: 100%; border-collapse: collapse; }
.pr-specs th, .pr-specs td { text-align: left; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.pr-specs th { color: var(--muted); font-weight: 600; width: 42%; }
@media (max-width: 860px){
  .product-row { grid-template-columns: 1fr; gap: 16px; }
}

/* Category mechanism figure ---------------------------------- */
/* One drawing per category explaining how the construct works — the same
   panel treatment as the product schematics so it reads as artwork, not as a
   decorative banner. Sits under the blurb on a category page and under the
   detail block on a product page. */
.mech-figure {
  margin: 28px 0 0; padding: 24px;
  background: linear-gradient(180deg,#f4f4f5,#fff);
  border: 1px solid var(--line); border-radius: var(--radius);
  max-width: 720px;
}
.mech-figure img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.mech-figure figcaption {
  margin: 18px auto 0; max-width: 560px;
  color: var(--muted); font-size: 14px; line-height: 1.5;
}
@media (max-width: 560px){ .mech-figure { padding: 16px; } }

.empty { text-align: center; padding: 64px 0; color: var(--muted); }

/* Breadcrumb / misc ------------------------------------------ */
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.page-title { font-size: 34px; margin: 0 0 8px; letter-spacing: -.5px; }
.section-eyebrow { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 13px; }

/* Footer ------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 40px 0; margin-top: 40px; color: var(--muted); font-size: 14px; }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }

/* Pre-launch band --------------------------------------------
   Shown on every page while SITE_STATUS.prelaunch is true (js/catalog.js
   injects it). Deliberately not dismissible and not sticky: it sits at the top
   of every page load so the disclosure is unmissable on arrival. */
.prelaunch-band {
  background: var(--brand-dark);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 0;
}
.prelaunch-band .container { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.prelaunch-band strong { color: var(--lime); font-weight: 700; }
.prelaunch-band a { color: #fff; text-decoration: underline; font-weight: 600; white-space: nowrap; }
.prelaunch-band a:hover { color: var(--lime); }

/* Pricing while pre-launch ----------------------------------- */
.price-block { margin: 6px 0 18px; }
.price-block .price-list { font-weight: 800; font-size: 22px; }
.price-block .price-list small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.price-founder {
  margin-top: 8px; display: inline-flex; align-items: baseline; gap: 8px;
  background: #f3f5fd; border: 1px solid #dbe0f6; border-radius: 8px;
  padding: 7px 11px; font-size: 14px;
}
.price-founder b { color: var(--brand-dark); font-size: 16px; }
.avail-note {
  margin: 12px 0 0; font-size: 13px; color: var(--muted);
  border-left: 3px solid var(--line); padding-left: 10px;
}

/* Founding-customer page ------------------------------------- */
.deposit-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow); max-width: 560px;
}
.deposit-amount { font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.deposit-amount small { display: block; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.terms-list { margin: 0; padding: 0; list-style: none; }
.terms-list li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.terms-list li:last-child { border-bottom: 0; }
.terms-list .t-mark { color: var(--brand); font-weight: 800; flex: none; }
.draft-flag {
  background: #fff8e6; border: 1px solid #ecd9a6; border-radius: 10px;
  padding: 14px 16px; font-size: 14px; color: #6b5828; margin: 24px 0;
}

/* Collaboration invitation ------------------------------------
   Shown in place of a product list when a category deliberately has no
   products (currently DNA Curtains > Custom made products). */
.collab-invite {
  margin-top: 28px; padding: 40px;
  background: linear-gradient(180deg,#f4f5fb,#fff);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-align: center;
}
.collab-invite h2 { margin: 0 0 12px; font-size: 26px; letter-spacing: -.3px; }
.collab-invite p {
  margin: 0 auto 22px; max-width: 520px;
  color: var(--muted); font-size: 17px;
}

/* "Activate a new configuration and colour" banner ------------
   On every product (Marco, 2026-08-13). Two forms from the same markup:
   the full banner closes a product page and a category page, and the compact
   strip sits inside each row of a category listing. Both are one big <a> to a
   pre-written email, so the whole banner is the click target.
   Lime on periwinkle is the logo pairing; the lime is the true #ddff55 here
   because it sits on a dark brand fill, not on white. */
.config-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 28px; padding: 20px 24px;
  background: var(--brand-dark); color: #fff;
  border-radius: var(--radius); transition: .15s;
}
.config-banner:hover { background: #3a4287; text-decoration: none; }
.config-banner .cb-text { display: flex; flex-direction: column; gap: 4px; }
.config-banner .cb-lead { font-weight: 700; font-size: 17px; color: var(--lime); }
.config-banner .cb-sub { font-size: 15px; color: rgba(255,255,255,.9); }
.config-banner .cb-go { font-size: 22px; font-weight: 700; flex: none; color: var(--lime); }

/* Compact strip, inside a product row. Same link, one line, no sub-copy —
   the full banner at the foot of the category carries the explanation. */
.config-banner--compact {
  margin-top: 14px; padding: 9px 14px; border-radius: 10px;
  gap: 12px;
}
.config-banner--compact .cb-lead { font-size: 13.5px; }
.config-banner--compact .cb-go { font-size: 16px; }

/* "In preparation now" note ----------------------------------
   Marks the constructs Marco is making for customers right now, so the first
   product in each category reads as available-soon rather than aspirational. */
.inprep-note {
  margin: 8px 0 0; padding: 5px 10px;
  display: inline-block; border-radius: 999px;
  background: #f2f7e0; border: 1px solid #d6e39a; color: #4e5a12;
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
}

/* Ordering page ----------------------------------------------
   The four steps, and the supplier table a purchasing office reads. */
.steps { display: grid; gap: 20px; margin-top: 32px; max-width: 780px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-n {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.step h3 { margin: 4px 0 6px; font-size: 18px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* Supplier / FAQ table. Wider label column than .spec-table because the labels
   here are phrases ("Send purchase orders to"), not one-word spec names. */
.vendor-table {
  width: 100%; max-width: 780px; border-collapse: collapse; margin-top: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.vendor-table th, .vendor-table td {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line);
  font-size: 15px; vertical-align: top;
}
.vendor-table tr:last-child th, .vendor-table tr:last-child td { border-bottom: 0; }
.vendor-table th { color: var(--muted); font-weight: 600; width: 38%; }
@media (max-width: 620px){
  .vendor-table th, .vendor-table td { display: block; width: auto; }
  .vendor-table th { border-bottom: 0; padding-bottom: 0; }
}

/* Quotation document -----------------------------------------
   A page that has to survive being printed, saved as a PDF and forwarded into a
   purchasing system. Deliberately plain: black on white, ruled, no gradients or
   brand fills, because it is read as a financial document and often printed in
   mono. Colours are set explicitly rather than inherited, so the print stylesheet
   has nothing to undo. */
.quote-doc {
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px; max-width: 820px;
}
.quote-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.quote-meta h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: 2px; text-align: right; }
.quote-meta table { border-collapse: collapse; margin-left: auto; }
.quote-meta th, .quote-meta td { font-size: 13px; padding: 3px 0 3px 16px; text-align: right; }
.quote-meta th { color: var(--muted); font-weight: 600; }

.quote-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 32px 0; }
@media (max-width: 620px){ .quote-parties { grid-template-columns: 1fr; } }
.quote-parties h3 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted);
}
.quote-parties p { margin: 0; font-size: 14px; line-height: 1.6; }

.quote-items { width: 100%; border-collapse: collapse; margin: 8px 0 24px; }
.quote-items th, .quote-items td { padding: 10px 8px; font-size: 14px; text-align: left; }
.quote-items thead th {
  border-bottom: 2px solid #1a1a1a; font-size: 11px;
  text-transform: uppercase; letter-spacing: .6px;
}
.quote-items tbody td { border-bottom: 1px solid var(--line); }
.quote-items .num, .quote-items th.num { text-align: right; }
.quote-items tfoot th { text-align: right; font-weight: 600; color: var(--muted); }
.quote-items tfoot td { text-align: right; }
.quote-items tfoot tr.grand th, .quote-items tfoot tr.grand td {
  border-top: 2px solid #1a1a1a; font-size: 17px; font-weight: 800; color: #1a1a1a;
  padding-top: 12px;
}
.quote-terms h3 { margin: 0 0 8px; font-size: 15px; }
.quote-terms table { width: 100%; border-collapse: collapse; }
.quote-terms th, .quote-terms td {
  text-align: left; padding: 7px 0; font-size: 13px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.quote-terms th { color: var(--muted); font-weight: 600; width: 30%; padding-right: 16px; }
.quote-foot { margin: 18px 0 0; font-size: 13px; color: var(--muted); }

/* Print: the quotation alone, edge to edge, nothing else on the paper. */
@media print {
  .no-print, .site-header, .site-footer, .prelaunch-band { display: none !important; }
  body { background: #fff; }
  .section { padding: 0; }
  .container { max-width: none; padding: 0; }
  .quote-doc { border: 0; border-radius: 0; padding: 0; max-width: none; }
  a { color: #1a1a1a; text-decoration: none; }
}

/* Ordering-is-open band --------------------------------------
   Same band, different message, for a visitor who can actually order. Green
   rather than brand-purple so it reads as "you're through", not as the standing
   pre-launch notice they may have seen before. */
.prelaunch-band--open { background: #2f5d3a; }
.prelaunch-band--open strong { color: #d7f59a; }

/* Category card with no icon --------------------------------
   The grid stretches every card to the tallest one. Normally .cat-card p has
   flex:1 so it absorbs the slack and pins "View products" to the bottom — but
   with no icon there is far more slack, which left a large gap under the text.
   Centre the whole block instead and let the paragraph size to its content. */
.cat-card--noicon { justify-content: center; }
.cat-card--noicon p { flex: 0 1 auto; }