/* jms-blocks.css: replacement blocks for retired 14-17. Loads after jms-v3.css. v3 look only. */

/* 14 -> fault rows: static numbered rows (.irb) inside the industry detail band */
.fault-rows .tb-panel > .kicker, .fault-rows .tb-panel > h2 { position: relative; }
.irb-faults { margin-top: 1.6rem; margin-bottom: 1.6rem; }
.irb-faults .row { min-height: 300px; }
.irb-faults .copy p { color: inherit; opacity: .92; }
.irb-faults .row:nth-child(odd) .copy p, .irb-faults .row:nth-child(odd) h3 { color: #fff; }
.irb-faults .row:nth-child(odd) .fit { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.82); }
.irb-faults .row:nth-child(odd) .fit a { color: #FFC20E; }
.irb-faults .row:nth-child(even) .fit a { color: #0b3f86; }
.irb-faults .fit a { font-weight: 700; }
.fault-rows .ind-links { margin-top: 1.4rem; }
@media (max-width: 860px) {
  .irb-faults .row { grid-template-columns: 1fr; min-height: 0; }
  .irb-faults .row:nth-child(even) .art { order: 0; }
  .irb-faults .art { min-height: 150px; }
  .irb-faults .art .pic { width: 96px; height: 96px; }
  .irb-faults .art .big { font-size: 8rem; bottom: -1.4rem; }
  .irb-faults .txt { padding: 1.6rem 1.25rem 2rem; }
}

/* 15 -> spec panel: dark panel, yellow top rule, photo + yellow-keyed spec tiles */
.tb-ov.spec-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0;
  background: #0E0E0E; color: #fff; border-top: 6px solid #FFC20E;
  box-shadow: 0 18px 40px rgba(14,14,14,.18);
}
.tb-ov.spec-panel > figure { margin: 0; border: 0 !important; box-shadow: none !important; padding: 0 !important; background: #0E0E0E; }
.tb-ov.spec-panel > figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-ov.spec-panel > div { padding: 2rem clamp(1.2rem, 3vw, 2.4rem) 2.2rem; }
body.v3 .tb-ov.spec-panel h2 { color: #fff; margin: 0 0 1.2rem; }
.tb-ov.spec-panel .tb-dl { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0; }
.tb-ov.spec-panel .tb-dl > div { display: block !important; background: #181d21; border-left: 4px solid #FFC20E; padding: .8rem .95rem .9rem; border-bottom: 0 !important; }
.tb-ov.spec-panel .tb-dl > div:nth-child(even) { border-left-color: #317bc8; }
.tb-ov.spec-panel dt { color: #FFC20E !important; font-size: .72rem !important; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; margin: 0 0 .3rem; }
.tb-ov.spec-panel .tb-dl > div:nth-child(even) dt { color: #8fbbe8 !important; }
.tb-ov.spec-panel dd { color: #fff !important; margin: 0; line-height: 1.5; font-size: .98rem; }
@media (max-width: 900px) {
  .tb-ov.spec-panel { grid-template-columns: 1fr; }
  .tb-ov.spec-panel > figure img { height: auto; }
}
@media (max-width: 560px) {
  .tb-ov.spec-panel .tb-dl { grid-template-columns: 1fr; }
}

/* 16 -> dark-header table: black head with yellow labels, zebra rows; stacks into dark-titled cards on phones */
.spec-table.spec-dark { border-collapse: collapse; width: 100%; border-top: 6px solid #FFC20E; }
.spec-table.spec-dark thead th { background: #0E0E0E !important; color: #FFC20E !important; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; padding: .9rem 1rem !important; border: 0 !important; }
.spec-table.spec-dark tbody th { font-family: var(--display); font-weight: 800; color: #0E0E0E; border-left: 4px solid #FFC20E; padding: .9rem 1rem !important; background: #fff; }
.spec-table.spec-dark tbody tr:nth-child(even) th { border-left-color: #0b3f86; }
.spec-table.spec-dark tbody td { padding: .9rem 1rem !important; background: #fff; color: #131f23; border-bottom: 1px solid #e3e6e9 !important; }
.spec-table.spec-dark tbody tr:nth-child(even) th, .spec-table.spec-dark tbody tr:nth-child(even) td { background: #f4f5f2; }
.spec-table.spec-dark .spec-link a { font-weight: 700; color: #0b3f86; white-space: nowrap; }
.spec-table.spec-dark .spec-link a::after { content: " \2192"; }
@media (max-width: 760px) {
  .spec-table.spec-dark thead { display: none; }
  .spec-table.spec-dark, .spec-table.spec-dark tbody, .spec-table.spec-dark tr, .spec-table.spec-dark th, .spec-table.spec-dark td { display: block; width: auto; }
  .spec-table.spec-dark { border-top: 0; }
  .spec-table.spec-dark tr { margin: 0 0 1rem; border-top: 6px solid #FFC20E; box-shadow: 0 10px 24px rgba(14,14,14,.08); }
  .spec-table.spec-dark tbody th, .spec-table.spec-dark tbody tr:nth-child(even) th { background: #0E0E0E; color: #fff; border-left: 0; }
  .spec-table.spec-dark td::before { content: attr(data-label); display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #0b3f86; margin-bottom: .25rem; }
  .spec-table.spec-dark td.spec-link::before { content: none; }
}

/* 17 -> problem cards (.solx-oc) for the former card grids */
.cards-v3 .solx-cards { grid-auto-rows: auto !important; }
.cards-v3 .solx-cards.solx-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
.cards-v3 .solx-oc { min-height: 0 !important; }
.cards-v3 .solx-oc .st-l { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: #0b3f86; margin: 0 0 .35rem; }
.cards-v3 .solx-oc p + p { margin-top: .6rem; }
.cards-v3 .solx-after { padding-bottom: 3rem; margin-top: -1.6rem; }
.cards-v3 .solx-after .lead:empty { display: none; }
@media (max-width: 860px) {
  .cards-v3 .solx-cards.solx-two { grid-template-columns: 1fr; }
}

/* 15 fix: photo fills the panel height on desktop */
.tb-ov.spec-panel { align-items: stretch; }
.tb-ov.spec-panel > figure { position: relative; min-height: 320px; }
.tb-ov.spec-panel > figure img { position: absolute; inset: 0; aspect-ratio: auto; }
@media (max-width: 900px) {
  .tb-ov.spec-panel > figure { min-height: 0; }
  .tb-ov.spec-panel > figure img { position: static; aspect-ratio: 3 / 2; }
}
.tb-ov.spec-panel .tb-dl{border-top:0!important;padding-top:0!important}

/* Overflow fixes (scoped to the widths that overflowed; no change elsewhere) */
/* /citations @<=600: long codes and links forced the item past the viewport */
@media (max-width: 600px) {
  .citation-list { grid-template-columns: minmax(0, 1fr); }
  .citation-item code, .citation-item a { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
}
/* /system configurator @861-1339: five industry buttons ran past the viewport; use three columns there */
@media (min-width: 861px) and (max-width: 1339px) {
  .station-try .ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---------- Guide template blocks (v3 look) ---------- */
/* text-lead: one paragraph in v3 type, max 46rem */
.band.text-lead { padding: 3.2rem 0 1.4rem; }
.band.text-lead h2 { margin: 0 0 .8rem; }
.band.text-lead p { max-width: 46rem; font-size: 1.12rem; line-height: 1.65; margin: 0; color: #131f23; }

/* diagram: static figure on white, yellow rule */
.pp-white.guide-fig { padding: 1rem 0 3rem; }
.guide-fig .pp-diagram { margin: 0 auto; max-width: 860px; border-top: 6px solid #FFC20E; background: #fff; box-shadow: 0 18px 40px rgba(14,14,14,.10); padding: 1rem; }
.guide-fig .pp-diagram svg { display: block; width: 100%; height: auto; }

/* problem-cards with art: SVG thumbnail replaces the icon tile */
.cards-v3 .solx-oc.oc-art { padding-top: 1rem; }
.cards-v3 .solx-oc .oc-fig { margin: 0 0 1rem; background: #0E0E0E; border-bottom: 4px solid #FFC20E; }
.cards-v3 .solx-oc:nth-child(even) .oc-fig { border-bottom-color: #0b3f86; }
.cards-v3 .solx-oc .oc-fig svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.cards-v3 .solx-cards.solx-four { gap: 1.4rem; }
.cards-v3 .solx-oc p a { font-weight: 700; }

/* strips (static): list inside the right half, closing note */
.strips-v3 { padding-top: 3.2rem; }
.strips-v3 .r ul { margin: 0; padding-left: 1.1rem; }
.strips-v3 .r li { font-weight: 600; color: #131f23; line-height: 1.5; margin: 0 0 .35rem; }
.strips-v3 .strip-note { max-width: 46rem; margin: 1.6rem 0 0; line-height: 1.6; font-size: 1.02rem; }
.strips-v3 .strip-note a { font-weight: 700; }

/* spec-table-dark with many columns: keep a readable width, scroll inside .spec-scroll */
@media (min-width: 761px) {
  .spec-table.spec-dark.spec-wide5 { min-width: 980px; }
  .spec-table.spec-dark.spec-wide5 thead th:first-child { width: 11rem; }
}
.spec-band .spec-intro { max-width: 46rem; }

/* related-chips: label + chips on a light band */
.band.related-chips { padding: 1.4rem 0 2.6rem; }
.related-chips .sc-ind { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

/* problem-cards, fault variant (.cards-fault): fault as title, light as a highlighted label, reason as body */
.cards-fault .solx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-fault .solx-oc { display: flex; flex-direction: column; }
.cards-fault .solx-oc h3 { min-height: 0; }
.cards-fault .solx-oc .lt { margin: .5rem 0 .8rem; background: #0E0E0E; color: #fff; font-weight: 700; padding: .6rem .8rem .7rem; border-left: 4px solid #FFC20E; line-height: 1.4; }
.cards-fault .solx-oc:nth-child(even) .lt { border-left-color: #317bc8; }
.cards-fault .solx-oc .lt .kk { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #FFC20E; margin-bottom: .2rem; }
.cards-fault .solx-oc:nth-child(even) .lt .kk { color: #8fbbe8; }
.cards-fault .solx-oc .why .kk { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #0b3f86; margin-bottom: .2rem; }
@media (max-width: 1000px) { .cards-fault .solx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .cards-fault .solx-cards { grid-template-columns: 1fr; } }

/* problem-cards, spec variant (.cards-spec): one card per option, attributes as labeled lines (.oc-dl) */
.cards-spec .solx-band .band-lead { color: rgba(255,255,255,.86); max-width: 46rem; margin: .6rem 0 0; line-height: 1.6; }
.cards-spec .solx-cards.solx-two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-spec .solx-oc h3 { font-size: 1.4rem; margin-bottom: .8rem; }
.cards-spec .oc-dl { margin: 0; }
.cards-spec .oc-dl > div { padding: .7rem 0 .75rem; border-top: 1px dashed #d8dde2; }
.cards-spec .oc-dl > div:first-child { border-top: 0; padding-top: .2rem; }
.cards-spec .oc-dl dt { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #0b3f86; margin: 0 0 .25rem; }
.cards-spec .oc-dl dd { margin: 0; line-height: 1.55; color: #131f23; }
/* first line highlighted like the light-by-fault label */
.cards-spec .oc-dl > div:first-child { background: #0E0E0E; padding: .6rem .8rem .7rem; border-left: 4px solid #FFC20E; margin-bottom: .3rem; }
.cards-spec .solx-oc:nth-child(even) .oc-dl > div:first-child { border-left-color: #317bc8; }
.cards-spec .oc-dl > div:first-child dt { color: #FFC20E; }
.cards-spec .solx-oc:nth-child(even) .oc-dl > div:first-child dt { color: #8fbbe8; }
.cards-spec .oc-dl > div:first-child dd { color: #fff; font-weight: 700; }
.cards-compare .solx-cards.solx-two-up { max-width: 60rem; }
@media (max-width: 640px) { .cards-spec .solx-cards.solx-two-up { grid-template-columns: 1fr; } }

/* ===== 9. Service template (services-v1): price card variant, pending chip, hub links ===== */
.cards-price .price-slot { margin: .5rem 0 .2rem; font-family: var(--display, "Barlow Condensed", sans-serif); line-height: 1.1; }
.cards-price .price-from { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: #4A4A46; font-family: var(--body, Roboto, sans-serif); }
.cards-price .price-amt { font-size: 2.4rem; font-weight: 700; color: #0E0E0E; }
.cards-price .price-unit { font-size: .9rem; font-weight: 600; color: #4A4A46; font-family: var(--body, Roboto, sans-serif); }
.cards-v3 .solx-oc .chip-pending { display: inline-block; margin: .25rem 0 .5rem; padding: .22rem .6rem; border-radius: 999px; background: #FFC20E; color: #111; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cards-v3 .solx-oc .chip-pending + p { margin-top: .2rem; }
.cards-v3 .solx-oc .addon-q { margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed #d8dde2; font-size: .8rem; font-weight: 700; color: #0b3f86; text-transform: uppercase; letter-spacing: .06em; }
.cards-v3 .svc-links { list-style: none; margin: .8rem 0 0; padding: 0; }
.cards-v3 .svc-links li { border-top: 1px solid #e3e6ea; }
.cards-v3 .svc-links a { display: block; padding: .55rem 0; font-weight: 700; color: #0b3f86; text-decoration: none; }
.cards-v3 .svc-links a::after { content: " →"; }
.cards-v3 .svc-links a:hover { text-decoration: underline; }
.proof-slot[hidden] { display: none !important; }
#how .strip-note, #how-we-work .strip-note { font-weight: 600; }
.cards-v3 .band-lead a { color: #FFC20E; }

/* ===== 11. FAQ (canonical, one column: answer always directly under its question) ===== */
.faq-v3 .faq-list { display: flex; flex-direction: column; gap: 1rem; max-width: 52rem; margin-top: 1.6rem; }
.faq-v3 .faq-item { background: #fff; border: 1px solid #e3e6ea; border-left: 6px solid #FFC20E; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.faq-v3 .faq-q { display: flex; align-items: baseline; gap: .8rem; margin: 0; padding: 1rem 1.25rem; background: #0E0E0E; color: #fff; font-size: 1.15rem; line-height: 1.3; }
.faq-v3 .faq-q .kk { flex: none; color: #FFC20E; font-weight: 800; font-size: .85rem; letter-spacing: .08em; }
.faq-v3 .faq-a { padding: 1rem 1.25rem 1.1rem 3.05rem; }
.faq-v3 .faq-a p { margin: 0; line-height: 1.55; color: #1b1b1b; }
.faq-v3 .faq-a p + p { margin-top: .6rem; }
@media (max-width: 600px) {
  .faq-v3 .faq-q { font-size: 1.02rem; padding: .9rem 1rem; }
  .faq-v3 .faq-a { padding: .9rem 1rem 1rem 2.6rem; }
}
.cards-v3 .svc-links .svc-soon { display: block; padding: .55rem 0; font-weight: 600; color: #6b7280; }
.cards-v3 .svc-links .svc-soon em { font-style: normal; margin-left: .3rem; padding: .05rem .45rem; border-radius: 999px; background: #FFC20E; color: #111; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
