/* Wave 1 · shared components + footer (slice: footer / inc/template-tags.php).
   Spec Sheet: hairline grids, mono labels and numerals, fewer soft cards. */

/* ---------- section head ---------- */
.section-head .eyebrow::after { content: ""; flex: 0 1 96px; border-top: 1px solid var(--rule-strong); opacity: .9; }
.section-head .display + .lede { margin-top: 14px; }

/* ---------- trade strip: a six-cell spec block ---------- */
.trade-strip {
  margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
  background: var(--rule-strong); border: 1px solid var(--rule-strong);
  border-radius: 6px; box-shadow: none; overflow: hidden;
}
.trade-strip > div { background: var(--surface); padding: 14px 16px 16px; display: grid; gap: 10px; align-content: start; border: 0 !important; }
.trade-strip dt { font: 500 .66rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.trade-strip .ts-n { font: inherit; color: var(--accent-ink); line-height: 1; }
.trade-strip dd { margin: 0; display: grid; gap: 4px; }
.trade-strip dd b { font: 600 clamp(1.2rem, 1.9vw, 1.55rem)/1.05 var(--f-mono); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trade-strip dd span { font-size: .8rem; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 1080px) { .trade-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .trade-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trade-strip > div { padding: 12px 12px 14px; } }

/* ---------- price tier table ---------- */
.pricing .tiers-scroll { border: 1px solid var(--rule-strong); border-radius: 6px; box-shadow: none; }
.pricing .tiers thead th { background: var(--surface-2); border-bottom: 1px solid var(--rule-strong); }
.pricing .tiers td { vertical-align: middle; }
.pricing .tiers .tier-n { font: 600 .78rem/1 var(--f-mono); color: var(--accent-ink); letter-spacing: .04em; }
.pricing .tiers .tier-p { min-width: 140px; }
.pricing .tiers .tier-p span { font-weight: 600; color: var(--ink); }
.tier-bar { display: block; width: 96px; height: 3px; margin-top: 7px; background: var(--rule); position: relative; }
.tier-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 100%); background: var(--ink-2); transition: background-color .25s; }
.pricing .tiers tbody tr:hover { background: var(--bg); }
.pricing .tiers tbody tr.on .tier-bar::after { background: var(--accent); }
.pricing .tiers .save { font-size: .82rem; }
.pricing .calc { border: 1px solid var(--rule-strong); border-radius: 6px; box-shadow: none; }

/* ---------- process steps (markup in templates; numerals as spec tags) ---------- */
.process .dot { width: auto; min-width: 44px; height: 28px; padding: 0 10px; border-radius: 4px; border: 0; background: var(--navy); color: #fff; font: 600 .74rem/1 var(--f-mono); letter-spacing: .06em; }
.process-line { top: 13px; border-top-width: 1px; }
.process-line i { top: -1px; }
.process li > b { padding-top: 6px; }
.steps4 li { box-shadow: none; border-color: var(--rule-strong); border-radius: 6px; }
.steps4 li::before { font-size: .72rem; letter-spacing: .08em; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }

/* ---------- CTA band (colors owned by 10-system.css; layout and meta row here) ---------- */
.cta-band .cta-inner { align-items: flex-end; }
.cta-band .cta-copy { max-width: 720px; }
.cta-k { margin: 0 0 14px; font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #9db6ff; display: flex; gap: 10px; align-items: center; }
.cta-k::before { content: ""; width: 22px; border-top: 2px solid currentColor; }
.cta-meta { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.22); }
.cta-meta li { padding: 14px 16px 0 0; font-size: .88rem; line-height: 1.4; color: #fff; min-width: 0; overflow-wrap: anywhere; }
.cta-meta li + li { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.16); }
.cta-meta span { display: block; margin-bottom: 6px; font: 500 .64rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #8fa3c2; }
.cta-meta a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); }
.cta-meta a:hover { border-bottom-color: #fff; }
@media (max-width: 860px) {
  .cta-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-meta li:nth-child(3) { padding-left: 0; border-left: 0; }
  .cta-meta li:nth-child(n+3) { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
}
@media (max-width: 480px) {
  .cta-band .cta-actions, .cta-band .cta-actions .btn { width: 100%; }
  .cta-meta { grid-template-columns: 1fr; }
  .cta-meta li, .cta-meta li + li { padding-left: 0; border-left: 0; }
  .cta-meta li + li { margin-top: 0; border-top: 1px solid rgba(255,255,255,.22); }
  .cta-meta li { padding-bottom: 12px; }
}

/* ---------- footer ---------- */
/* A deeper navy than the CTA band, so the two dark blocks read as separate. */
.foot { background: #08121f; border-top: 1px solid rgba(255,255,255,.1); padding-top: clamp(44px, 5vw, 64px); }
.foot-id { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px 48px; align-items: end; padding-bottom: clamp(32px, 4vw, 44px); margin-bottom: clamp(32px, 4vw, 44px); border-bottom: 1px solid rgba(255,255,255,.14); }
.foot-id-line { margin: 0; max-width: 34ch; font: 500 clamp(1.25rem, 2.2vw, 1.7rem)/1.25 var(--f-display); letter-spacing: -.015em; color: #e6ecf5; text-wrap: balance; }
.foot-id-line b { color: #fff; font-weight: 600; }
.foot-spec { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; overflow: hidden; }
.foot-spec > div { background: #08121f; padding: 12px 14px; display: grid; gap: 6px; }
.foot-spec dt { font: 500 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #8fa3c2; }
.foot-spec dd { margin: 0; font: 500 .86rem/1.3 var(--f-mono); color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .foot-id { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .foot-spec { grid-template-columns: 1fr; } }

.foot-h { color: #8fa3c2; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot ul a { color: #d9e1ee; transition: color .2s; }
.foot ul a:hover { color: #fff; text-decoration: underline; text-decoration-color: #9db6ff; }
.foot-brand p { color: #b6c3d6; font-size: .88rem; }
.foot-brand address { color: #d9e1ee; font-size: .88rem; }
.foot-certs .foot-h { border-bottom: 0; padding-bottom: 0; }
.foot-base { color: #8fa3c2; font: 400 .76rem/1.5 var(--f-mono); letter-spacing: .02em; }
.foot-base a { color: #d9e1ee; }

/* Desktop: a wider contact column so the email and its Copy button share a line. */
@media (min-width: 1081px) {
  .foot-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr); }
}
.foot-contact li:first-child a { white-space: nowrap; }
.foot-grid .social { margin: 4px 0 16px; }

/* Certification row. Footer link-list rules (.foot ul, .foot ul a) would turn this
   list into a single stacked column of squeezed badges, so restate it as a grid. */
.foot-certs .cert-badges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.foot-certs .cert-badges a {
  display: grid; justify-items: start; align-content: start; gap: 8px; min-height: 0; min-width: 0;
  padding: 8px 8px 10px; color: #fff; text-decoration: none;
}
.foot-certs .cert-badges a:hover { text-decoration: none; }
.foot-certs .cert-badges img { height: 40px; width: auto; max-width: 100%; aspect-ratio: 160 / 64; object-fit: contain; flex: none; }
.foot-certs .cert-badges small { padding-left: 2px; }
@media (max-width: 1080px) { .foot-certs .cert-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }