/* solutions.css — the Solutions page only.
 *
 * Owner 2026-09-08: "These pictures should be in their own card side by side
 * smaller with the text below it redesigned the CSS page for solutions to be a
 * professional engineering style page."
 *
 * So: a specification sheet, not a brochure. The devices are the ones an
 * engineering document uses and nothing else — a numbered plate at a size you
 * can read rather than a magazine bleed, a captioned figure, a ruled table of
 * properties, a hairline grid, and one accent used only where a value needs
 * weight. No gradients, no shadows on content, no full-bleed photography.
 *
 * Every colour here is one of site.css's :root
 * tokens. Mobile first: one column is the base rule, wider screens add columns.
 */

/* ── the sheet ── */
.solution-stack{display:grid;gap:26px}
.solution{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);
    scroll-margin-top:88px}

/* ── head: an identifier, a title, a one-line abstract ── */
.solution-head{padding:20px 20px 16px;border-bottom:1px solid var(--line)}
.solution-head .eyebrow{margin-bottom:6px;font-size:.68rem;letter-spacing:.18em;color:var(--muted)}
.solution-head h3{font-size:clamp(1.35rem,4.6vw,1.9rem);line-height:1.12;letter-spacing:-.02em;
    margin:0 0 8px;text-wrap:balance}
.solution-lede{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0;max-width:78ch}
.tag-alpha{display:inline-block;vertical-align:2px;margin-left:9px;padding:3px 8px;
    border:1px solid var(--orange);color:var(--orange);background:#fff;border-radius:2px;
    font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}

/* ── the plate: its own card, framed, captioned, deliberately not large ── */
.plate{margin:0;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--soft)}
.plate-frames{display:grid;gap:10px;grid-template-columns:1fr}
.plate img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
    border:1px solid var(--line);background:#fff}
.plate figcaption{margin:9px 0 0;color:var(--muted);font-size:.76rem;line-height:1.45;
    letter-spacing:.01em}

/* ── body: properties, ruled ── */
.solution-body{display:grid;gap:0;padding:0}
.solution-col{padding:16px 20px}
.solution-col+.solution-col{border-top:1px solid var(--line)}
.solution-col h4{margin:0 0 6px;font-size:.66rem;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted)}
.solution-col h4+p{margin:0 0 16px;color:var(--ink);font-size:.9rem;line-height:1.6}
.solution-col h4+p:last-child{margin-bottom:0}
.solution-col h4:not(:first-child){margin-top:2px}
/* The trade is the half an engineer is actually weighing. */
.solution-trade{border-left:2px solid var(--orange);padding-left:12px}

.solution-points{list-style:none;padding:0;margin:0}
.solution-points li{position:relative;padding:8px 0 8px 20px;border-top:1px solid var(--line);
    font-size:.87rem;line-height:1.5}
.solution-points li:first-child{border-top:0}
.solution-points li:before{content:"";position:absolute;left:0;top:15px;width:8px;height:1px;
    background:var(--blue)}
.solution-points li:first-child:before{top:7px}

/* ── foot: the configurations, as data ── */
.solution-foot{display:grid;gap:12px;padding:14px 20px 18px;border-top:1px solid var(--line);
    background:var(--soft)}
.solution-pending{margin:0;max-width:66ch;color:var(--muted);font-size:.87rem;line-height:1.55}
.solution-pending b{color:var(--ink)}
.solution-note{margin:0;color:var(--muted);font-size:.76rem;line-height:1.5}
.solution-foot .button{justify-self:start}
/* THE WHOLE CARD IS THE WAY IN (owner 2026-09-10). The heading's link is
   stretched over the card, so the photograph and the section lead to the
   solution's own products; the part-number chips are retired. */
.solution.is-link{position:relative;transition:border-color .15s,box-shadow .15s}
.solution.is-link:hover{border-top-color:var(--blue);box-shadow:0 10px 28px rgba(6,29,59,.08)}
.solution-go{color:inherit}
.solution-go::after{content:"";position:absolute;inset:0;z-index:1}
.solution-go:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.solution-count{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.solution.is-link:hover .solution-count{text-decoration:underline}

/* ── tablet ── */
@media(min-width:680px){
  .solution-head{padding:24px 26px 18px}
  .plate{padding:18px 26px}
  .solution-body{grid-template-columns:1fr 1fr}
  .solution-col{padding:18px 26px}
  .solution-col+.solution-col{border-top:0;border-left:1px solid var(--line)}
  .solution-foot{grid-template-columns:1fr auto;align-items:center;padding:16px 26px 20px}
  .solution-pending,.solution-count{grid-column:1}
  .solution-foot .button{grid-column:2;justify-self:end}
  .solution-note{grid-column:1/-1}
}

/* ── desktop: the plate sits beside the head, still at plate size ── */
@media(min-width:1000px){
  .solution{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
      grid-template-areas:"plate head" "plate body" "plate foot"}
  .solution>*{min-width:0}
  .plate{grid-area:plate;border-bottom:0;border-right:1px solid var(--line);
      align-content:start;padding:22px}
  .solution-head{grid-area:head;padding:24px 28px 18px}
  .solution-body{grid-area:body}
  .solution-col{padding:18px 28px}
  .solution-foot{grid-area:foot;padding:16px 28px 20px}
}

/* site.css fixes the decision cards at four columns; these are the narrow cases. */
@media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.feature-grid{grid-template-columns:1fr!important}}

/* THE COMPACT HEADER'S PARAGRAPH SITS BELOW THE HEADLINE, NOT ON IT. site.css
   sets the page-hero h1 margin to 0 after giving it 24px, and at a .96 line
   height the paragraph ran into the headline's descenders — on Products and on
   each solution's own page (seen 2026-09-10). */
.page-hero.compact h1+p{margin-top:18px}

/* HOW TO DECIDE: the question cards sit in the navy band, and their headings
   inherited the band's white on a pale card, which made them invisible. */
.section-dark .feature-grid h3{color:var(--ink)}