/* Empire Five · 10-system: the ruled "spec sheet" treatment of shared components.
   Load order: main.css, then 10-catalog ... 10-resources, then THIS file, then 20-*, then 30-*.
   So this file wins over 10-* page parts on equal specificity; keep selectors here generic and
   leave page-specific looks to the page slices (scope them, or put them in 20-/30- files).
   Tokens, base, type, buttons, chips, fields and hover rules live in main.css.
   Principles: hairline rules instead of shadows, mono labels, square corners, left-aligned measure,
   accent used only for actions, selected states and key numbers. */

/* ---------- section bands ---------- */
/* Two plain bands in a row get a hairline so each reads as a new sheet. */
.band + .band:not(.band-alt):not(.cta-band) { border-top: 1px solid var(--rule); }

/* ---------- linked cards: an accent rule draws across the top on hover ---------- */
.guide-card, .link-card { position: relative; }
.guide-card::after, .link-card::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.guide-card:hover::after, .link-card:hover::after { transform: scaleX(1); }

/* Sport tiles: same idea along the bottom edge. */
.sport::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.sport:hover::before, .sport:focus-visible::before { transform: scaleX(1); }

/* ---------- feature grids: no boxes, a ruled column per point ---------- */
.feature-grid { column-gap: var(--s-6); row-gap: var(--s-6); }
.feature-grid > .card, .band-alt .feature-grid > .card { background: transparent; border: 0; border-top: 1px solid var(--rule-ink); border-radius: 0; padding: var(--s-4) 0 0; }

/* ---------- steps: numbered columns on an ink rule ---------- */
.steps4 { gap: var(--s-5); }
.steps4 li { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: var(--s-4) 0 0; }
.steps4 li::before { font-size: var(--t-label); letter-spacing: .1em; padding-bottom: 0; border-bottom: 0; margin-bottom: 2px; }
.steps4.compact li { padding: var(--s-3) 0 0; }
.make-step .n, .steps-simple li::before { border-radius: var(--radius); }
.chain-steps button { border-radius: var(--radius); }

/* ---------- tables, pricing and number blocks ---------- */
.tiers-scroll { border-color: var(--rule-strong); }
.tiers thead th { background: var(--surface); border-bottom: 1px solid var(--rule-ink); color: var(--ink-2); }
.tiers tbody tr:hover { background: var(--surface-2); }
.tiers tbody tr.on { background: var(--accent-soft); }
.trade-strip { border-color: var(--rule-strong); }
.trade-strip b { font-variant-numeric: tabular-nums; }
.tier-card, .moq-box { border-top: 2px solid var(--ink); }
.price-summary { border-color: var(--rule-strong); }
.stat-row div { border-top: 1px solid var(--rule-ink); padding-top: var(--s-3); }

/* ---------- methods ---------- */
.method-ph { background: repeating-linear-gradient(135deg, var(--surface-2) 0 1px, transparent 1px 10px), var(--surface); }

/* ---------- FAQ: a ruled list, not a stack of boxes ---------- */
.faqs { gap: 0; border-top: 1px solid var(--rule-ink); }
.faq, .band-alt .faq { background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
.faq summary { padding: 18px 0; }
.faq summary:hover { color: var(--accent-ink); }
.faq-a { padding: 0 0 18px; max-width: 70ch; }
.faq-toc { border-radius: var(--radius-lg); }
.faq-toc a { border-radius: var(--radius); }
.faq-page .faqs { margin-bottom: var(--s-7); }
.faq-page .faqs:last-child { margin-bottom: 0; }

/* ---------- banners and notes ---------- */
.caveat, .price-basis-note { border-radius: 0; border-left-width: 3px; }
.custom-banner { border: 1px solid var(--accent-line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.pcard-custom-card, .pcard.pcard-custom { border: 1px dashed #9fb3e8; }
.pcard.pcard-custom .custom-art { border-bottom-style: dashed; }
.custom-plus { border-radius: var(--radius); }
.custom-tags i { border-radius: 2px; }
.custom-add { border-width: 1px; border-radius: var(--radius); }
.notice { border-radius: var(--radius); }
.drop { border-width: 1px; border-radius: var(--radius); }

/* ---------- breadcrumbs: a mono path ---------- */
.crumbs ol { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- certificates ---------- */
.cert-badges a, .cert-badges img { border-radius: var(--radius); }

/* ---------- order builder: square selection marks ---------- */
.choice { border-radius: var(--radius); }
.tick { border-radius: 2px; }
.line, .picker, .empty-lines { border-radius: var(--radius); }
.line-head img, .line-custom-ico, .line-remove, .sizes-grid input, .pms button, .files li { border-radius: var(--radius); }
.stepper .bar { border-radius: 0; height: 3px; }

/* ---------- one ripple per button ----------
   20-system.js already draws .ef-rip on every .btn. The header (.ef-ripple) and factory
   (.ef20-ripple) slices add their own on the same buttons, which doubled the effect.
   Hide the slice copies on buttons only; their ripples on cards and nav links still show. */
.btn > .ef-ripple, .btn > .ef20-ripple { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sport::before, .guide-card::after, .link-card::after { transition: none; }
}