/* ============================================================
   HexaNex Electronics - pages.css
   Theme variant P1 · "Blueprint Lab" (revised)

   Interior pages: About / Service / FAQ / Blog / Article / Product detail /
   RFQ / Quote result / Contact / Feedback / Search / Policy / 404.
   Loaded after main.css and only from those pages.

   Same rules as main.css: no content elevation, nothing moves on hover, one
   accent, one radius scale.
   ============================================================ */

/* ---------- Section rhythm ---------- */
.hx-page-sec{padding:clamp(52px,7vw,86px) 0}
.hx-page-sec-tint{background:var(--panel)}
.hx-page-sec-dark{background:var(--ink);color:#c6d2e2}
.hx-page-sec-dark h2,.hx-page-sec-dark h3{color:#fff}
.hx-page-sec-dark .hx-kicker{color:var(--teal-l)}
.hx-page-sec-dark .hx-muted,.hx-page-sec-dark .hx-sec-head p{color:#93a3ba}
.hx-page-sec-dark .hx-ticks li::before{background:var(--teal)}

/* The teal band used for closing calls to action. Kept deliberately far from the
   ink footer so the two never read as one block. */
.hx-band{background:var(--teal-band);color:#dff2f4}
.hx-band h2{color:#fff}
.hx-band .hx-muted,.hx-band p{color:#bfe2e5}

.hx-narrow{max-width:900px;margin:0 auto}
.hx-narrow-wide{max-width:1080px;margin:0 auto}
.hx-read{max-width:1080px;margin:0 auto}

.hx-sec-head-center{max-width:none;text-align:center;margin-left:auto;margin-right:auto}
.hx-sec-head-center .hx-muted{max-width:62ch;margin-left:auto;margin-right:auto}

/* ---------- Tick list ---------- */
.hx-ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.hx-ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem}
.hx-ticks li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;
  background:var(--teal);border-radius:1px}
.hx-ticks-tight{gap:8px;margin-top:14px}
.hx-ticks-tight li{font-size:.88rem;color:var(--muted)}

/* ---------- Two-column split ---------- */
.hx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.6vw,60px);align-items:center}
.hx-split-rev .hx-split-art{order:2}
.hx-split-art img{width:100%;height:auto;display:block;border-radius:var(--radius);
  aspect-ratio:10/7;object-fit:cover}
.hx-split-copy h2{margin-top:.15em}
.hx-split-copy p{color:var(--text)}

/* ---------- Panels ----------
   A panel groups something that genuinely belongs together: a form, a data
   table, a summary. It is a border, never an elevation. */
.hx-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.hx-page-sec-tint .hx-panel{background:#fff}
.hx-page-sec .hx-panel{padding:clamp(20px,2.6vw,28px)}
.hx-panel + .hx-panel{margin-top:20px}
.hx-panel-title{font-size:1.28rem;margin:0 0 .4em}
.hx-panel-lead{font-size:.93rem;color:var(--muted);margin:0 0 20px}

/* ---------- Grids ---------- */
.hx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hx-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}

/* A ruled index: hairline above each item, no boxes, no lift. */
.hx-index{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}
.hx-index-item{padding:18px 0;border-top:1px solid var(--line)}
.hx-index-item h3{font-size:1rem;margin:0 0 .3em}
.hx-index-item p{margin:0;font-size:.9rem;color:var(--muted)}
.hx-index-4{grid-template-columns:repeat(4,1fr)}
/* on the ink band the hairline has to read against the dark ground */
.hx-page-sec-dark .hx-index-item{border-top-color:rgba(255,255,255,.18)}

.hx-fglyph{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:var(--radius);background:var(--teal-soft);margin-bottom:14px}
.hx-fglyph svg{width:21px;height:21px;fill:none;stroke:var(--teal-ink);stroke-width:1.7}
.hx-fnum{font-family:var(--font-mono);font-weight:700;font-size:.98rem;color:var(--teal-ink)}

/* ---------- Numbered rows (icon + text) ---------- */
.hx-rows{display:grid;gap:16px;margin-top:22px}
.hx-row{display:flex;gap:16px;align-items:flex-start;padding-top:16px;
  border-top:1px solid var(--line)}
.hx-row:first-child{border-top:none;padding-top:0}
.hx-row .hx-fglyph{margin-bottom:0;flex:none;width:38px;height:38px}
.hx-row .hx-fglyph svg{width:19px;height:19px}
.hx-row h3{font-size:1rem;margin-bottom:.2em}
.hx-row p{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- QC steps (product page) ---------- */
.hx-steps{display:grid;gap:26px}
.hx-steps .hx-step{display:flex;flex-direction:column}
.hx-step-img{width:100%;height:auto;aspect-ratio:31/20;object-fit:cover;
  border-radius:var(--radius);margin-bottom:14px}
.hx-step h3{font-size:1rem;margin-bottom:.35em}
.hx-step p{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- Order tiers - a ruled comparison, not four boxes ---------- */
.hx-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;
  border-top:1px solid var(--line)}
.hx-tier{padding:20px 0;display:flex;flex-direction:column}
.hx-tier-name{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--teal-ink);margin:0 0 10px}
.hx-tier-qty{margin:0 0 10px;font-size:.86rem;color:var(--muted)}
.hx-tier-qty span{display:block;font-family:var(--font-mono);font-weight:700;font-size:1.45rem;
  color:var(--ink);letter-spacing:-.02em;margin-bottom:3px}
.hx-tier-desc{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- FAQ accordion ---------- */
.hx-faq-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,3.6vw,48px);align-items:start;margin-top:40px}
.hx-faq-row-rev{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.hx-faq-art img{width:100%;height:auto;display:block;border-radius:var(--radius);
  aspect-ratio:10/7;object-fit:cover}
.hx-acc{display:grid;gap:0;border-top:1px solid var(--line)}
.hx-acc-item{border-bottom:1px solid var(--line)}
.hx-acc-item summary{list-style:none;cursor:pointer;padding:17px 44px 17px 0;position:relative;
  color:var(--ink);font-weight:650;font-size:.99rem;line-height:1.4}
.hx-acc-item summary::-webkit-details-marker{display:none}
.hx-acc-item summary::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.hx-acc-item[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.hx-acc-item summary:hover{color:var(--teal-ink)}
.hx-acc-body{padding:0 44px 20px 0}
.hx-acc-body p{margin:0;font-size:.93rem;color:var(--muted)}

/* ---------- Blog list ---------- */
.hx-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
/* The catalogue hands back ten articles a page - one short of three full rows - and the
   related strip at the foot of an article is often two, so a fixed three left the tail row
   holding one card and two empty slots. Both grids therefore take their column count from
   the number of items, computed in the template and handed over as `is-c<n>`.
   Scoped to the wide layout on purpose: below 1081px these grids are pinned to two columns
   and then one, where ten items divide cleanly, and a (0,2,0) `.is-c2` selector would
   otherwise outrank those media-query rules and break the narrow layouts. */
@media (min-width:1081px){
  .hx-post-grid.is-c1,.hx-related-grid.is-c1{grid-template-columns:1fr}
  .hx-post-grid.is-c2,.hx-related-grid.is-c2{grid-template-columns:repeat(2,1fr)}
  .hx-post-grid.is-c3,.hx-related-grid.is-c3{grid-template-columns:repeat(3,1fr)}
  .hx-post-grid.is-c4,.hx-related-grid.is-c4{grid-template-columns:repeat(4,1fr)}
}
.hx-postcard{display:flex;flex-direction:column}
.hx-postcard-img{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:12/7;
  background:#eef3f8}
.hx-postcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.hx-postcard-body{padding:16px 0 0;display:flex;flex-direction:column;flex:1}
.hx-postcard-date{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);margin:0 0 8px}
.hx-postcard-body h3{font-size:1.06rem;line-height:1.35;margin-bottom:.45em}
.hx-postcard-body h3 a{color:var(--ink);text-decoration:none}
.hx-postcard-body h3 a:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.hx-postcard-desc{font-size:.9rem;color:var(--muted);margin:0 0 14px;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hx-postcard-more{margin-top:auto;font-size:.87rem;font-weight:650;color:var(--teal-ink);
  text-decoration:none}
.hx-postcard-more:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Article ---------- */
.hx-article-layout{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(24px,3.2vw,44px);align-items:start}
.hx-article-side{display:grid;gap:20px;position:sticky;
  top:calc(var(--hx-head-h,112px) + 24px)}
.hx-article-main{min-width:0}

.hx-side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px}
.hx-side-title{font-size:1.12rem;margin-bottom:.55em}
.hx-side-lead{font-size:.9rem;color:var(--text);margin-bottom:.7em}
.hx-side-sub{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  margin:0 0 6px;font-weight:700}
.hx-side-tags{font-size:.9rem;color:var(--ink-2);margin:0}
.hx-side-tags span{color:var(--teal-ink);font-weight:600}
.hx-side-card .hx-btn{margin-top:18px}
.hx-side-form .hx-field{margin-bottom:11px}

.hx-prose{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3.2vw,38px)}
.hx-prose h2{font-size:1.42rem;margin:1.4em 0 .5em}
.hx-prose h3{font-size:1.16rem;margin:1.3em 0 .45em}
.hx-prose h2:first-child,.hx-prose h3:first-child{margin-top:0}
.hx-prose p{margin:0 0 1.05em;color:var(--text)}
.hx-prose ul,.hx-prose ol{margin:0 0 1.1em;padding-left:1.3em}
.hx-prose li{margin-bottom:.5em}
.hx-prose a{color:var(--teal-ink);font-weight:600}
.hx-prose img{max-width:100%;height:auto;border-radius:var(--radius);margin:1.2em 0}
.hx-prose blockquote{margin:1.2em 0;padding:14px 20px;border-left:3px solid var(--teal);
  background:var(--paper);color:var(--ink-2)}
.hx-prose blockquote p:last-child{margin-bottom:0}
.hx-prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.92rem}
.hx-prose th,.hx-prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.hx-prose th{background:var(--paper);color:var(--ink);font-weight:650}

.hx-related{margin-top:44px}
.hx-related h2{font-size:1.35rem;margin-bottom:18px}
.hx-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hx-related-card{display:flex;flex-direction:column;text-decoration:none}
.hx-related-art{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:12/7;
  background:#eef3f8}
.hx-related-art img{width:100%;height:100%;object-fit:cover;display:block}
.hx-related-body{display:block;padding:12px 0 0}
.hx-related-date{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);
  margin-bottom:6px}
.hx-related-title{display:block;color:var(--ink);font-size:.97rem;line-height:1.35;
  font-weight:650;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.hx-related-card:hover .hx-related-title{color:var(--teal-ink);
  text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Product detail
   ============================================================ */
.hx-crumb-mark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:rgba(0,166,180,.16);border:1px solid rgba(0,166,180,.4);
  margin-bottom:12px}
.hx-crumb-mark svg{width:21px;height:21px;fill:none;stroke:var(--teal-l);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.hx-crumb-mark-warn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32)}
.hx-crumb-mark-warn svg{stroke:#fff}

/* Three columns of equal height: gallery, key facts, inquiry. */
.hx-pd-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(22px,2.8vw,38px);align-items:stretch}
.hx-pd-grid>.hx-pd-gallery,.hx-pd-grid>.hx-pd-info,.hx-pd-grid>.hx-pd-inquiry{
  display:flex;flex-direction:column;height:100%}

/* The frame holds the render; the strip under it holds the payment and carrier marks.
   Putting the marks here rather than in the middle column does two things at once: the
   plate gets shorter, so the square render fills almost all of it, and the middle column
   is left to its own text.
   The render is `contain`, never `cover`: cover crops the widest packages at the leads,
   and a part half out of frame is worse than a part with a margin round it. */
.hx-pd-gallery{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;padding:0}
/* The plate is white, matching the ground the catalogue photographs are shot on, and
   the render is held well inside it rather than run to the edges. At 12px the square
   render filled 94% of the column and the part read as a wall of picture next to the
   facts beside it; the margin is what makes it read as a product shot. */
.hx-pd-art{position:relative;display:block;width:100%;flex:1;min-height:0;border:none;
  padding:clamp(20px,4vw,52px);background:#fff;border-radius:0;cursor:zoom-in}
.hx-pd-art img{width:100%;height:100%;object-fit:contain;display:block}

.hx-pd-info{min-width:0}
.hx-pd-info .hx-part-brand{margin-bottom:6px}
.hx-pd-part{font-size:clamp(1.4rem,2.2vw,1.95rem);word-break:break-word;margin-bottom:.55em;
  font-family:var(--font-mono);font-weight:600;letter-spacing:-.02em}
/* No content is added to the middle column to fill it. The leftover height the two
   neighbouring cards create is shared out between the existing rows, so it reads as a
   generously spaced parameter list rather than one empty block above the button. */
.hx-pd-facts{margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:0;
  flex:1 1 auto;align-content:space-between}
.hx-pd-facts dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  font-weight:700;padding:11px 18px 11px 0;border-top:1px solid var(--line-soft);align-self:start}
.hx-pd-facts dd{margin:0;padding:11px 0;border-top:1px solid var(--line-soft);font-size:.94rem;
  color:var(--ink-2);word-break:break-word}
.hx-pd-facts dt:first-of-type,.hx-pd-facts dd:first-of-type{border-top-color:var(--line)}
.hx-pd-facts dd a{color:var(--teal-ink);font-weight:600}
.hx-pd-stock{font-family:var(--font-mono);font-weight:700;color:var(--ink)}
.hx-pd-stock-note{color:var(--muted);font-size:.85rem;margin-left:8px}

.hx-pd-buy{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--line-soft)}
/* Accepted payment methods and carriers, closing the gallery card. */
.hx-pd-pay{padding:14px 12px 4px;border-top:1px solid var(--line-soft);background:#fff;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hx-pd-pay-chip{display:flex;align-items:center;justify-content:center;height:34px;
  padding:0 7px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.hx-pd-pay-chip img{max-width:100%;max-height:19px;width:auto;height:auto;object-fit:contain}
.hx-pd-qty{display:flex;flex-direction:column;gap:5px;flex:1 1 120px;max-width:160px}
.hx-pd-qty span{font-size:.79rem;font-weight:650;color:var(--ink)}
.hx-pd-qty input{border:1px solid #c8d3e0;border-radius:var(--radius);padding:.66rem .82rem;
  font-family:var(--font-mono);font-size:.94rem;color:var(--ink);background:#fff;width:100%}
.hx-pd-qty input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.hx-field-error{margin:10px 0 0;font-size:.85rem;color:#c0392b}
.hx-field input.is-error,.hx-field textarea.is-error,.hx-pd-qty input.is-error{
  border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}

.hx-pd-inquiry{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px}
.hx-pd-inquiry h3{font-size:1.12rem;margin-bottom:.35em}
.hx-pd-inquiry-lead{font-size:.87rem;color:var(--muted);margin-bottom:16px}
.hx-pd-form{display:flex;flex-direction:column;flex:1}
.hx-pd-form .hx-field{margin-bottom:11px}
.hx-pd-form .hx-btn{margin-top:auto}
.hx-pd-form textarea{resize:vertical}

/* ---------- Specifications ----------
   Full container width, set as a two-column list of parameter/value pairs.
   A single narrow table left two thirds of the row empty. */
.hx-spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin:0}
.hx-spec-grid>div{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);
  border-top:1px solid var(--line);padding:11px 0}
.hx-spec-grid dt{font-size:.86rem;color:var(--muted);margin:0;padding-right:14px;
  word-break:break-word}
.hx-spec-grid dd{margin:0;font-size:.9rem;color:var(--ink-2);word-break:break-word}

/* ---------- Trust modules: shipping, payment, quality ---------- */
.hx-trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;align-items:stretch}
.hx-trust-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.hx-page-sec-tint .hx-trust-card{background:#fff}
.hx-trust-fig{display:block;width:100%;height:auto;aspect-ratio:31/20;object-fit:cover}
.hx-trust-body{padding:22px;display:flex;flex-direction:column;flex:1}
.hx-trust-card h3{font-size:1.04rem;margin:0 0 .6em}
.hx-trust-card h3 + h3{margin-top:1.2em}
.hx-trust-card p{font-size:.91rem;color:var(--muted);margin:0 0 .8em}
.hx-trust-card p:last-child{margin-bottom:0}
.hx-mini-table{width:100%;border-collapse:collapse;font-size:.87rem;margin-bottom:14px}
.hx-mini-table th,.hx-mini-table td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.hx-mini-table th{background:var(--paper);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);font-weight:700}
.hx-mini-table td{color:var(--text)}
.hx-partners{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 4px}
.hx-partners b{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2);
  border:1px solid var(--line);background:var(--paper);border-radius:var(--radius-sm);
  padding:.24rem .55rem;font-weight:600}
.hx-trust-note{font-size:.85rem;color:var(--muted);margin:14px 0 0}

.hx-assure{margin-top:30px;background:var(--teal-soft);border:1px solid #b7dfe3;
  border-radius:var(--radius);padding:24px}
.hx-assure h3{font-size:1.04rem;margin-bottom:.4em}
.hx-assure p{margin:0;font-size:.92rem;color:var(--ink-2)}

.hx-pd-modal-card{width:min(720px,100%)}
.hx-pd-modal-art img{width:100%;height:auto;display:block;border-radius:var(--radius)}

/* ============================================================
   Forms
   ============================================================ */
.hx-form-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.8vw,30px);margin-bottom:22px}
.hx-form-title{font-size:1.22rem;margin-bottom:.5em}
.hx-form-hint{font-size:.89rem;color:var(--muted);margin:0 0 20px}
.hx-form-block-note{background:var(--paper)}
.hx-form-note{font-size:.82rem;color:var(--muted);margin:12px 0 0}
/* a policy link inside a small-print note still has to look like a link */
.hx-form-note a{color:var(--teal-ink);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.hx-form-error{margin:16px 0 0;padding:12px 16px;border:1px solid #c0392b;
  background:rgba(192,57,43,.06);color:#c0392b;border-radius:var(--radius);font-size:.89rem}
.hx-form-actions{margin-top:6px}
.hx-actions-after{margin-top:28px}
.hx-form-actions-center{text-align:center;display:flex;gap:12px;justify-content:center;
  flex-wrap:wrap;margin-top:24px}
.hx-form-actions .hx-form-note{max-width:56ch}
.hx-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hx-field-wide{grid-column:1 / -1}

/* RFQ line items - one grid that reflows to stacked blocks, no duplicate markup */
.hx-qhead{display:grid;grid-template-columns:1.4fr 1fr 1.6fr .8fr .9fr 40px;gap:12px;
  padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:14px}
/* Child, not descendant. As `.hx-qhead span` this also matched the `.hx-req` marker nested
   inside a heading cell, and at (0,1,1) it beat the marker's own (0,1,0) colour rule - so
   the asterisks in this row rendered muted grey while every other required marker on the
   site was red. Same trap `.hx-field>span` documents further down. */
.hx-qhead>span{font-size:.71rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--muted)}
#hxQrows{display:grid;gap:14px}
.hx-qrow{display:grid;grid-template-columns:1.4fr 1fr 1.6fr .8fr .9fr 40px;gap:12px;
  align-items:start}
.hx-qrow-x{align-self:center;width:36px;height:36px;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff;color:var(--muted);font-size:1.15rem;line-height:1}
.hx-qrow-x:hover{border-color:#c0392b;color:#c0392b}
/* Wide layout only: the column headings come from .hx-qhead, so the per-field label is
   dropped and the field gives up its bottom margin.
   Both rules have to be written against .hx-qrow, because the shared form rules are more
   specific than a bare class selector - `.hx-field>span` is (0,1,1) and beats
   `.hx-qrow-label`, `.hx-field` is (0,1,0) and ties with it. Written the short way the
   label rendered on desktop as well, duplicating the heading row.
   The margin is not only spacing: the x button centres against the grid row, and a 12px
   margin under every field made that row 12px taller than the inputs, which is what put
   the button 7.4px above the input's centre line (measured, not estimated). */
@media (min-width:961px){
  .hx-qrow .hx-qrow-label{display:none}
  .hx-qrow .hx-field{margin-bottom:0}
}
#hxAddRow{margin-top:18px}

/* Quote result summary */
.hx-summary{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hx-summary-head,.hx-summary-row{display:grid;grid-template-columns:1.4fr 1fr 1.6fr .7fr .9fr;
  gap:12px;padding:13px 16px}
.hx-summary-head{background:var(--paper);border-bottom:1px solid var(--line)}
.hx-summary-head span{font-size:.71rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--muted)}
.hx-summary-row{border-top:1px solid var(--line-soft);font-size:.91rem;color:var(--ink-2);
  word-break:break-word}
.hx-summary-row:first-child{border-top:none}
.hx-summary-contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hx-summary-contact dt{font-size:.71rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--muted);margin-bottom:3px}
.hx-summary-contact dd{margin:0;font-size:.94rem;color:var(--ink-2);word-break:break-word}
.hx-summary-contact-wide{grid-column:1 / -1}

/* ---------- Contact page ---------- */
.hx-split-form{align-items:start}
.hx-contact-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.hx-contact-list li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;
  border-top:1px solid var(--line)}
.hx-contact-list li:first-child{border-top:none;padding-top:0}
.hx-contact-list .hx-fglyph{margin-bottom:0;flex:none}
.hx-contact-list b{display:block;color:var(--ink);font-weight:650;font-size:.94rem;margin-bottom:2px}
.hx-contact-list a{color:var(--teal-ink);font-weight:600;text-decoration:none;display:block}
.hx-contact-list a:hover{text-decoration:underline;text-underline-offset:3px}
.hx-contact-list address{font-style:normal;color:var(--muted);font-size:.91rem;line-height:1.6}
.hx-contact-sub{display:block;font-size:.83rem;color:var(--muted)}
.hx-contact-note{margin-top:24px;font-size:.91rem;color:var(--muted)}
.hx-contact-note a{color:var(--teal-ink);font-weight:600}

/* ---------- Callout band ---------- */
.hx-callout{display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap}
.hx-callout h2{margin-bottom:.3em}
.hx-callout p{margin:0;max-width:58ch}
.hx-callout-actions{display:flex;gap:10px;flex-wrap:wrap}
/* a callout sitting in a band carries its own vertical rhythm */
.hx-band .hx-callout{padding-top:clamp(36px,4.5vw,54px);padding-bottom:clamp(36px,4.5vw,54px)}

/* ---------- Policy pages ---------- */
.hx-policy-update{font-size:.84rem;color:var(--muted);margin:0 0 1.2em;padding-bottom:1em;
  border-bottom:1px solid var(--line-soft)}
.hx-policy-update strong{color:var(--ink)}
.hx-policy-contact{list-style:none;padding:0}
.hx-policy-contact li{display:flex;gap:8px;align-items:flex-start}
.hx-policy-contact strong{color:var(--ink);flex:none;min-width:88px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hx-post-grid,.hx-related-grid{grid-template-columns:1fr 1fr}
  .hx-grid-4,.hx-tiers{grid-template-columns:1fr 1fr;gap:0 28px}
  .hx-pd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .hx-pd-inquiry{grid-column:1 / -1}
  .hx-article-layout{grid-template-columns:1fr}
  .hx-article-side{position:static}
  .hx-index-4{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .hx-grid-3,.hx-index{grid-template-columns:1fr 1fr}
  .hx-split{grid-template-columns:1fr;gap:30px}
  .hx-split-rev .hx-split-art{order:0}
  .hx-split-art{max-width:560px}
  .hx-faq-row,.hx-faq-row-rev{grid-template-columns:1fr}
  .hx-faq-art{max-width:520px}
  .hx-faq-art{display:none}
  .hx-trust-grid{grid-template-columns:1fr}
  .hx-spec-grid{grid-template-columns:1fr}
  .hx-qhead{display:none}
  .hx-qrow{grid-template-columns:1fr 1fr;padding:16px;border:1px solid var(--line);
    border-radius:var(--radius);background:var(--paper);position:relative}
  .hx-qrow .hx-qrow-label{display:block}
  .hx-qrow-x{position:absolute;top:8px;right:12px;width:30px;height:30px;font-size:1rem}
  .hx-qrow .hx-field:nth-child(3){grid-column:1 / -1}
}
@media (max-width:760px){
  .hx-grid-3,.hx-grid-4,.hx-post-grid,.hx-related-grid,.hx-index,.hx-index-4,.hx-tiers{
    grid-template-columns:1fr;gap:0}
  .hx-steps{grid-template-columns:1fr}
  .hx-index-item{padding:16px 0}
  .hx-pd-grid{grid-template-columns:1fr}
  .hx-form-grid{grid-template-columns:1fr}
  .hx-summary-head{display:none}
  .hx-summary-row{grid-template-columns:1fr;gap:6px;padding:16px}
  .hx-summary-row span{display:grid;grid-template-columns:130px 1fr;gap:10px}
  .hx-summary-row span::before{content:attr(data-label);font-size:.71rem;text-transform:uppercase;
    letter-spacing:.07em;font-weight:700;color:var(--muted)}
  .hx-summary-contact{grid-template-columns:1fr}
  .hx-callout{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .hx-qrow{grid-template-columns:1fr}
  .hx-qrow .hx-field:nth-child(3){grid-column:auto}
  .hx-pd-facts{grid-template-columns:1fr}
  .hx-pd-facts dt{padding-bottom:2px}
  .hx-pd-facts dd{padding-top:0;border-top:none}
  .hx-callout-actions .hx-btn{width:100%}
  .hx-spec-grid>div{grid-template-columns:1fr;gap:2px}
}