/* Shared v2 components (plan 2026-10-13 section 7.4), loaded on every public page through the shell assets block.
   Device and industry cards, proof strip, steps, need picker, FAQ, closing band, text links. Tokens only. */

/* Text link: midnight, weight 600, trailing arrow. */
.text-arrow { display: inline-block; padding-block: 10px; color: var(--stz-midnight-950); font-size: 16px; font-weight: 600; line-height: 24px; text-decoration: none; }
a[href^="tel:"] { white-space: nowrap; }
.text-arrow:hover { color: var(--stz-midnight-950); text-decoration: underline; text-underline-offset: 4px; }

/* Section eyebrow (above H2s only): midnight-700, not crimson. */
.v2-eyebrow { margin: 0 0 var(--stz-space-3); color: var(--stz-midnight-700); font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 16px; text-transform: uppercase; }

/* Device cards: a 4:3 stage behind every Clover image (never midnight or crimson behind a device). */
.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stz-space-5); margin: 0; padding: 0; }
.device-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--stz-space-4) var(--stz-space-4) var(--stz-space-5); border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); }
.device-card:has(h3 a):hover { border-color: var(--stz-midnight-950); }
.device-stage { margin: 0 0 var(--stz-space-4); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--stz-radius-stage); background: var(--stz-stage-gradient); }
.device-stage img { display: block; width: 100%; height: 100%; object-fit: contain; filter: var(--stz-device-shadow); }
.device-stage--white { background: var(--stz-white); box-shadow: inset 0 0 0 1px var(--stz-rule); }
.device-stage--white img { filter: none; }
.device-kind { margin: 0; color: var(--stz-midnight-700); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.device-card h3 { margin: var(--stz-space-1) 0 var(--stz-space-2); color: var(--stz-midnight-950); font-size: 20px; font-weight: 700; line-height: 28px; }
.device-card h3 a { color: inherit; text-decoration: none; }
.device-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.device-card h3 a:focus-visible { outline: none; }
.device-card h3 a:focus-visible::after { outline: var(--stz-focus-ring); outline-offset: var(--stz-focus-offset); }
.device-card > p { margin: 0 0 var(--stz-space-3); color: var(--stz-text-muted); font-size: 15px; line-height: 1.55; }
.device-best { margin: 0 0 var(--stz-space-3); color: var(--stz-text-muted); font-size: 15px; line-height: 1.55; }
.device-facts { margin: 0 0 var(--stz-space-3); padding: 0; list-style: none; border-top: 1px solid var(--stz-rule); }
.device-facts li { padding-block: 8px; border-bottom: 1px solid var(--stz-rule); color: var(--stz-midnight-950); font-size: 15px; line-height: 1.4; }
.device-more { margin-top: auto; color: var(--stz-midnight-950); font-size: 15px; font-weight: 600; }
.device-card:has(h3 a):hover .device-more { text-decoration: underline; text-underline-offset: 4px; }
.device-textonly { display: grid; place-items: center; margin: 0 0 var(--stz-space-4); aspect-ratio: 4 / 3; border-radius: var(--stz-radius-stage); background: var(--stz-band); color: var(--stz-text-muted); font-size: 14px; }

/* Industry cards: the whole card is the link; a tinted stage with the recommended device, then setup chips. */
.industry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stz-space-4); margin: 0; padding: 0; list-style: none; }
.industry-card a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); color: var(--stz-midnight-950); text-decoration: none; overflow: hidden; }
.industry-card a:hover { border-color: var(--stz-midnight-950); }
.industry-card a:hover .industry-title { text-decoration: underline; text-underline-offset: 4px; }
.industry-card--featured { grid-column: span 2; grid-row: span 2; }
.industry-stage { display: block; aspect-ratio: 16 / 9; background: var(--stz-stage); }
.industry-card--featured .industry-stage { aspect-ratio: auto; flex: 1 1 auto; min-height: 220px; }
.industry-stage--food { background: radial-gradient(60% 60% at 50% 45%, #ffffff, var(--stz-tint-food)); }
.industry-stage--retail { background: radial-gradient(60% 60% at 50% 45%, #ffffff, var(--stz-tint-retail)); }
.industry-stage--beauty { background: radial-gradient(60% 60% at 50% 45%, #ffffff, var(--stz-tint-beauty)); }
.industry-stage img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8px 12%; filter: var(--stz-device-shadow); }
.industry-body { display: grid; gap: 6px; padding: var(--stz-space-4); }
.industry-title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.industry-card--featured .industry-title { font-size: 22px; }
.industry-setup { color: var(--stz-midnight-700); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.industry-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.industry-chips li { padding: 3px 10px; border: 1px solid var(--stz-rule); border-radius: 999px; background: var(--stz-band); color: var(--stz-midnight-950); font-size: 13px; line-height: 20px; }

/* Proof strip: one of at most two midnight bands per page. */
.proof-strip { background: var(--stz-midnight-950); color: #d6d5db; }
.proof-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stz-space-6); margin: 0; padding: var(--stz-space-8) 0; list-style: none; }
.proof-list li { display: grid; gap: 4px; padding-left: var(--stz-space-4); border-left: 2px solid rgba(255, 255, 255, .18); font-size: 15px; line-height: 1.5; }
.proof-list strong { color: var(--stz-white); font-size: 17px; font-weight: 700; }
.proof-list a { color: var(--stz-white); text-decoration: underline; text-underline-offset: 3px; }
.proof-strip :focus-visible { outline-color: var(--stz-focus-on-brand); }

/* Steps: three numbered steps; crimson numerals are an action-adjacent accent. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stz-space-6); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding-top: var(--stz-space-5); border-top: 1px solid var(--stz-rule); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: var(--stz-space-3); color: var(--stz-crimson-600); font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.steps h3 { margin: 0 0 var(--stz-space-2); color: var(--stz-midnight-950); font-size: 20px; font-weight: 700; line-height: 28px; }
.steps p { margin: 0; color: var(--stz-text-muted); font-size: 16px; line-height: 1.6; }
.steps:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .steps:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Need picker: the only block (besides /get-started/) that mixes needs. No tinted icon tiles. */
.need-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--stz-space-3); margin: 0; padding: 0; list-style: none; }
.need-tile { display: flex; flex-direction: column; gap: var(--stz-space-2); height: 100%; min-height: 160px; padding: var(--stz-space-5); border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); color: var(--stz-midnight-950); text-decoration: none; }
.need-tile:hover { border-color: var(--stz-midnight-950); }
.need-tile strong { font-size: 17px; font-weight: 700; line-height: 1.3; }
.need-tile span { color: var(--stz-text-muted); font-size: 15px; line-height: 1.5; }
.need-tile .need-go { margin-top: auto; color: var(--stz-midnight-950); font-size: 15px; font-weight: 600; }
.need-tile:hover .need-go { text-decoration: underline; text-underline-offset: 4px; }
.need-tile--lead { border-color: var(--stz-midnight-950); box-shadow: inset 0 3px 0 var(--stz-crimson-600); }

/* FAQ: details rows, at least 56px tall. */
.faq { display: grid; gap: var(--stz-space-2); }
.faq details { border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--stz-space-4); min-height: 56px; padding: var(--stz-space-3) var(--stz-space-5); color: var(--stz-midnight-950); font-size: 17px; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: 0 0 auto; color: var(--stz-midnight-950); font-size: 24px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0; padding: 0 var(--stz-space-5) var(--stz-space-5); max-width: 68ch; color: var(--stz-text-muted); line-height: 1.65; }
.faq details p a { color: var(--stz-midnight-950); font-weight: 600; }

/* Closing band (the second midnight band): heading, line, the page's CTA block with the approval line. */
.close-band { background: var(--stz-midnight-950); color: #d6d5db; }
.close-band .close-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--stz-space-8) var(--stz-space-12); align-items: center; padding-block: var(--stz-space-12); }
.close-band h2 { margin: 0 0 var(--stz-space-3); color: var(--stz-white); font-size: clamp(28px, 1.4rem + 1.4vw, 36px); font-weight: 700; line-height: 1.17; letter-spacing: -0.02em; }
.close-band p { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.6; }
.close-band .apply-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stz-space-3) var(--stz-space-4); margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.close-band .apply-cta-note { flex: 1 1 100%; margin: var(--stz-space-1) 0 0; color: #d6d5db; font-size: 15px; }
.close-band .apply-cta-book { color: var(--stz-white); }
.close-band .stz-btn--outline.apply-cta-call { border-color: var(--stz-white); color: var(--stz-white); }
.close-band .stz-btn--outline.apply-cta-call:hover { background: var(--stz-white); color: var(--stz-midnight-950); }
.close-band :focus-visible { outline-color: var(--stz-focus-on-brand); }

@media (max-width: 1099px) {
  .device-grid, .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .need-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .need-links li:first-child { grid-column: 1 / -1; }
  .close-band .close-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .steps, .steps:has(> li:nth-child(4)) { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-4); }
  .proof-list { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-4); padding-block: var(--stz-space-7); }
  .close-band .close-inner { padding-block: var(--stz-space-10); }
  .close-band .apply-cta { flex-direction: column; align-items: stretch; }
  .close-band .apply-cta-book { justify-content: center; }
}
@media (max-width: 599px) {
  /* Device cards: a scroll-snap row with the next card peeking. */
  .device-grid--home { display: flex; gap: var(--stz-space-3); margin-inline: calc(-1 * var(--stz-space-4)); padding: 0 var(--stz-space-4) var(--stz-space-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--stz-space-4); overscroll-behavior-x: contain; }
  .device-grid--home .device-card { flex: 0 0 82%; scroll-snap-align: start; }
  .device-grid:not(.device-grid--home) { grid-template-columns: minmax(0, 1fr); }
  /* Industries: a compact list with a 72px thumbnail. */
  .industry-grid { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-2); }
  .industry-card--featured { grid-column: auto; grid-row: auto; }
  .industry-card a { flex-direction: row; align-items: center; }
  .industry-stage, .industry-card--featured .industry-stage { flex: 0 0 72px; width: 72px; height: 72px; min-height: 0; aspect-ratio: 1; margin: 8px 0 8px 8px; border-radius: 10px; }
  .industry-stage img { padding: 6px; }
  .industry-body { padding: var(--stz-space-3); gap: 4px; }
  .industry-title, .industry-card--featured .industry-title { font-size: 17px; }
  .industry-setup { display: none; }
  .industry-chips li { font-size: 12px; padding: 1px 8px; }
  .need-links { grid-template-columns: minmax(0, 1fr); }
  .need-tile { min-height: 0; }
}

/* --- Site v2 Package B: Clover content pages (devices, chooser, guides, comparisons, locations) --- */
/* Worked receipts (cash discount) and the NAP card, shared by the homepage and the generated pages. */
.receipts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stz-space-4); }
.receipt { margin: 0; padding: var(--stz-space-5); border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); font-variant-numeric: tabular-nums; }
.receipt figcaption { margin-bottom: var(--stz-space-3); color: var(--stz-midnight-700); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.receipt dl { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--stz-space-3); margin: 0; font-size: 16px; }
.receipt dt { color: var(--stz-text-muted); }
.receipt dd { margin: 0; color: var(--stz-midnight-950); text-align: right; }
.receipt .total { padding-top: 8px; border-top: 1px solid var(--stz-rule); color: var(--stz-midnight-950); font-weight: 700; }
.receipt-note { grid-column: 1 / -1; margin: 0; color: var(--stz-text-muted); font-size: 14px; line-height: 1.5; }
.local-card { padding: var(--stz-space-7); border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); }
.local-card h3 { margin: 0 0 var(--stz-space-3); font-size: 20px; line-height: 28px; }
.local-card address { color: var(--stz-midnight-950); font-size: 17px; line-height: 1.6; }
.local-card .local-phone { display: inline-flex; align-items: center; min-height: 44px; color: var(--stz-midnight-950); font-size: 20px; font-weight: 700; text-decoration: none; }
.local-towns { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--stz-space-4) 0; padding: 0; list-style: none; }
.local-towns li { padding: 4px 12px; border: 1px solid var(--stz-rule); border-radius: 999px; background: var(--stz-band); color: var(--stz-midnight-950); font-size: 15px; }
.local-card .local-email { display: inline-flex; align-items: center; min-height: 44px; color: var(--stz-midnight-950); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.local-card h3 { font-weight: 700; }
.local-card address { font-style: normal; }
.local-card p { margin: var(--stz-space-3) 0 0; color: var(--stz-text-muted); font-size: 15px; line-height: 1.55; }
.local-card .local-phone, .local-card .local-email, .local-card .text-arrow { display: flex; width: fit-content; }

/* Heading with a product image: the device is the LCP element, on a light stage (never midnight or crimson). */
.resource-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--stz-space-10); align-items: center; }
.resource-hero-copy { min-width: 0; }
.resource-hero-copy h1 { max-width: 18ch; }
.resource-hero-stage { margin: 0; padding: var(--stz-space-5); border-radius: var(--stz-radius-stage); background: var(--stz-stage-gradient); }
.resource-hero-stage img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; filter: var(--stz-device-shadow); }
.resource-hero-stage--white { background: var(--stz-white); box-shadow: inset 0 0 0 1px var(--stz-rule); }
.resource-hero-stage--white img { filter: none; }
.resource-heading:has(.resource-hero) { background: var(--stz-white); }

/* Sections: one rhythm for every generated Clover page. */
.stz-section { margin-block: 0; padding-block: var(--stz-space-10); border-top: 1px solid var(--stz-rule); scroll-margin-top: 88px; }
.resource-content > .stz-section:first-child { padding-top: 0; border-top: 0; }
.stz-section h2 { max-width: 30ch; margin: 0 0 var(--stz-space-4); color: var(--stz-midnight-950); font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.17; letter-spacing: -0.02em; }
.section-lead { max-width: 64ch; margin: 0 0 var(--stz-space-6); color: var(--stz-text-muted); font-size: 18px; line-height: 1.6; }
.section-note, .muted { max-width: 64ch; margin: var(--stz-space-5) 0 0; color: var(--stz-text-muted); }
.fine-print { max-width: 72ch; margin: var(--stz-space-3) 0 0; color: var(--stz-text-muted); font-size: 14px; line-height: 1.5; }
.table-title { margin: var(--stz-space-8) 0 var(--stz-space-4); color: var(--stz-midnight-950); font-size: 20px; font-weight: 700; line-height: 28px; }
.split > div > .table-title:first-child, .chooser-chart > .table-title:first-child { margin-top: 0; }
.section-foot-link { margin: var(--stz-space-5) 0 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--stz-space-10); align-items: start; }
.split--center { align-items: center; }
.split .prose p { color: var(--stz-text-muted); font-size: 17px; }
.check-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stz-space-3) var(--stz-space-8); }
.check-list li { font-size: 16px; }
.device-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.device-grid--two .device-stage { aspect-ratio: 16 / 9; }
.table-scroll + .device-grid, .table-scroll + .fine-print + .device-grid, .section-lead + .device-grid { margin-top: var(--stz-space-6); }
.device-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.industry-grid--all { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards with a title and a paragraph (cost parts, local services, comparisons). Flat: a border, no shadow. */
.parts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--stz-space-4); }
.parts-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.part-card { position: relative; padding: var(--stz-space-6); border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); }
.part-card h3 { margin: 0 0 var(--stz-space-2); color: var(--stz-midnight-950); font-size: 19px; font-weight: 700; line-height: 1.35; }
.part-card p { margin: 0; color: var(--stz-text-muted); font-size: 16px; line-height: 1.6; }
.part-card .v2-eyebrow { margin-bottom: var(--stz-space-2); }
.part-card--link h3 a { color: inherit; text-decoration: none; }
.part-card--link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.part-card--link:hover { border-color: var(--stz-midnight-950); }
.part-card--link:hover h3 a { text-decoration: underline; text-underline-offset: 4px; }

/* Compare tables: a scroll container with a sticky first column; midnight marks, no red. */
.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); }
.table-scroll:focus-visible { outline: var(--stz-focus-ring); outline-offset: var(--stz-focus-offset); }
.compare-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; }
.compare-table th, .compare-table td { padding: 12px 16px; border-bottom: 1px solid var(--stz-rule); text-align: left; vertical-align: top; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table thead th { background: var(--stz-band); color: var(--stz-midnight-950); font-weight: 700; }
.compare-table tbody th { color: var(--stz-midnight-950); font-weight: 600; }
.compare-table td { color: var(--stz-text-muted); }
.compare-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 132px; background: var(--stz-white); box-shadow: 1px 0 0 var(--stz-rule); }
.compare-table thead th:first-child { background: var(--stz-band); }
.compare-table .is-pick, .compare-table .is-ours { box-shadow: inset 0 3px 0 var(--stz-crimson-600); }
.compare-table--versus thead .is-ours { background: var(--stz-midnight-950); color: var(--stz-white); }
.compare-table--versus td:nth-child(2) { color: var(--stz-midnight-950); }
.compare-table--versus sup a { margin-left: 2px; color: var(--stz-midnight-700); font-size: 12px; font-weight: 600; }
.compare-table--math { min-width: 0; max-width: 720px; font-variant-numeric: tabular-nums; }
.compare-table--math td:last-child { color: var(--stz-midnight-950); font-weight: 600; }
.compare-table--lineup { min-width: 860px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.spec-table th, .spec-table td { padding: 12px 0; border-bottom: 1px solid var(--stz-rule); text-align: left; vertical-align: top; }
.spec-table th { width: 36%; padding-right: var(--stz-space-4); color: var(--stz-midnight-700); font-weight: 600; }
.spec-table td { color: var(--stz-midnight-950); }

/* Verdict (comparisons) and the always / never rules (cash discount). */
.verdict-grid, .rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stz-space-4); }
.verdict-col, .rules { padding: var(--stz-space-6); border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); }
.verdict-col--pick { border-color: var(--stz-midnight-950); box-shadow: inset 0 3px 0 var(--stz-crimson-600); }
.verdict-col h3, .rules h3 { margin: 0 0 var(--stz-space-4); color: var(--stz-midnight-950); font-size: 20px; font-weight: 700; }
.verdict-col .check-list, .rules .check-list { margin: 0; }
.never-list { display: grid; gap: var(--stz-space-3); margin: 0; padding: 0; list-style: none; }
.never-list li { position: relative; padding-left: var(--stz-space-7); color: var(--stz-text); font-size: 16px; line-height: 1.5; }
.never-list li::before, .never-list li::after { content: ""; position: absolute; left: 3px; top: 10px; width: 14px; height: 2px; background: var(--stz-midnight-950); transform: rotate(45deg); }
.never-list li::after { transform: rotate(-45deg); }

/* Sources (comparisons, cash discount). */
.sources { padding-block: var(--stz-space-8); border-top: 1px solid var(--stz-rule); }
.sources h2 { margin: 0 0 var(--stz-space-3); color: var(--stz-midnight-950); font-size: 20px; font-weight: 700; }
.sources-list { margin: 0; padding-left: 1.4em; color: var(--stz-text-muted); font-size: 15px; line-height: 1.6; }
.sources-list li { margin-bottom: var(--stz-space-2); }
.sources-list a { color: var(--stz-midnight-950); overflow-wrap: anywhere; }
.sources-list li:target { background: var(--stz-band); }

/* The Clover chooser (/clover/devices/#chooser): radios as large tap targets; the fit chart works without JS. */
.chooser-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--stz-space-8); align-items: start; }
.chooser-form { display: grid; gap: var(--stz-space-5); padding: var(--stz-space-6); border: 1px solid var(--stz-midnight-950); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); }
.chooser-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.chooser-step legend { margin-bottom: var(--stz-space-3); padding: 0; color: var(--stz-midnight-950); font-size: 17px; font-weight: 700; }
.chooser-options { display: flex; flex-wrap: wrap; gap: var(--stz-space-2); }
.chooser-option { position: relative; display: inline-flex; }
.chooser-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chooser-option span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--stz-border-control); border-radius: 8px; background: var(--stz-white); color: var(--stz-midnight-950); font-size: 15px; line-height: 1.3; cursor: pointer; }
.chooser-option input:checked + span { border-color: var(--stz-midnight-950); background: var(--stz-midnight-950); color: var(--stz-white); }
.chooser-option input:focus-visible + span { outline: var(--stz-focus-ring); outline-offset: var(--stz-focus-offset); }
.chooser-submit { justify-self: start; min-height: 48px; padding: 12px 24px; border-radius: 8px; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.chooser-result { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--stz-space-6); align-items: center; padding: var(--stz-space-6); border: 1px solid var(--stz-midnight-950); border-radius: var(--stz-radius-card-v2); box-shadow: inset 0 3px 0 var(--stz-crimson-600); background: var(--stz-white); }
.chooser-result[hidden], .chooser-form[hidden] { display: none; }
.chooser-result .device-stage { margin: 0; }
.chooser-result h3 { margin: var(--stz-space-1) 0 var(--stz-space-2); color: var(--stz-midnight-950); font-size: 24px; font-weight: 700; line-height: 1.25; }
.chooser-result p { margin: 0 0 var(--stz-space-3); color: var(--stz-text-muted); }
.chooser-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stz-space-3) var(--stz-space-5); margin-top: var(--stz-space-4); }
.chooser-actions .stz-btn { min-height: 48px; padding: 12px 24px; border-radius: 8px; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; }

@media (max-width: 1099px) {
  .resource-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: var(--stz-space-6); }
  .parts-grid--four, .device-grid--four, .industry-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chooser-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .resource-hero { grid-template-columns: minmax(0, 1fr); }
  .resource-hero-stage { width: 100%; max-width: 360px; padding: var(--stz-space-3); }
  .split, .verdict-grid, .rules-grid, .check-list--cols { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-5); }
  .stz-section { padding-block: var(--stz-space-8); }
  .receipts { gap: var(--stz-space-2); }
  .receipt { padding: var(--stz-space-4); }
  .chooser-result { grid-template-columns: minmax(0, 1fr); }
  .chooser-result .device-stage { max-width: 240px; }
  .chooser-form, .verdict-col, .rules, .part-card { padding: var(--stz-space-5); }
}
@media (max-width: 599px) {
  .parts-grid--four, .device-grid--four, .device-grid--two, .industry-grid--all { grid-template-columns: minmax(0, 1fr); }
  .compare-table th:first-child { min-width: 112px; }
}

/* Contact-only /book/ (package_production.contact_only_booking): call, email and the page CTA. */
.booking-contact { padding: var(--stz-space-6); border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); }
.booking-contact h2 { margin-top: 0; font-size: 28px; line-height: 34px; }
.booking-contact h3 { margin: var(--stz-space-6) 0 var(--stz-space-2); font-size: 20px; }
.booking-contact-line { display: flex; flex-wrap: wrap; gap: var(--stz-space-3) var(--stz-space-6); align-items: baseline; }
.booking-contact-phone { font-size: 28px; font-weight: 700; color: var(--stz-midnight-950); text-decoration: none; }
.booking-contact-phone:hover { color: var(--stz-crimson-600, #d90a2c); }
.booking-contact-email { font-weight: 600; color: var(--stz-midnight-950); overflow-wrap: anywhere; }
.booking-contact .apply-cta { display: flex; flex-wrap: wrap; gap: var(--stz-space-3); margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* Policies (Package C): the last-updated line. */
.policy-updated { color: var(--stz-text-muted); font-size: 15px; }

/* --- Fix pass 2026-10-12 (visual and conversion review): approved Clover photos, photo or text business cards,
   a compact stepper and stacked receipts on phones, the statement visual, the chooser result first. --- */
.photo-figure { margin: 0; overflow: hidden; border-radius: var(--stz-radius-stage); background: var(--stz-band); }
.photo-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.resource-hero-stage--photo { padding: 0; overflow: hidden; background: var(--stz-band); }
.resource-hero-stage--photo img { filter: none; object-fit: cover; }
.device-in-use { margin-top: var(--stz-space-6); }
.split--story { align-items: center; }
.compare-nudge { margin: var(--stz-space-3) 0 0; color: var(--stz-text-muted); font-size: 15px; line-height: 1.5; }
.compare-nudge .text-arrow { padding-block: 6px; font-size: 15px; }
.local-links { margin-block: var(--stz-space-8); padding: var(--stz-space-5) var(--stz-space-6); border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-band); }
.local-links-title { margin: 0 0 var(--stz-space-3); color: var(--stz-text); font-size: 16px; line-height: 1.6; }
.local-links ul { display: flex; flex-wrap: wrap; gap: var(--stz-space-2) var(--stz-space-5); margin: 0; padding: 0; list-style: none; }
.local-links a { display: inline-block; padding-block: 10px; color: var(--stz-midnight-950); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.underwriting-checklist { margin-bottom: var(--stz-space-6); }
.part-card--link h3 a span { color: var(--stz-midnight-700); }

/* Business cards: a real photo of that kind of business, or a text card with a rule on top (never a borrowed device). */
.industry-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stz-band); }
.industry-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.industry-card a:hover .industry-photo img { transform: scale(1.03); }
.industry-card--featured .industry-photo { aspect-ratio: auto; flex: 1 1 auto; min-height: 260px; }
.industry-card--text a { border-top: 3px solid var(--stz-crimson-600); }
.industry-card--text .industry-body { align-content: start; height: 100%; }
.industry-more { margin-top: auto; padding-top: var(--stz-space-2); color: var(--stz-midnight-950); font-size: 14px; font-weight: 600; }
.industry-grid--all .industry-card--text .industry-body { padding-top: var(--stz-space-5); }
.industry-grid--text { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1099px) { .industry-grid--text { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .industry-grid--text { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .industry-photo img { transition: none; } .industry-card a:hover .industry-photo img { transform: none; } }

/* Clover Flex Pocket card (no device page). */
.device-card--pocket .device-stage img { padding: 4%; }

/* Merchant services hero: an annotated example statement (no rates or amounts). */
.statement-visual { padding: var(--stz-space-6); }
.statement-sheet { position: relative; padding: var(--stz-space-6) var(--stz-space-5) var(--stz-space-5); border: 1px solid var(--stz-rule); border-radius: 10px; background: var(--stz-white); box-shadow: var(--stz-raise); }
.statement-tag { position: absolute; top: -12px; left: var(--stz-space-5); margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--stz-midnight-950); color: var(--stz-white); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.statement-head { display: grid; grid-template-columns: 2fr 1fr; gap: var(--stz-space-4); margin: 0 0 var(--stz-space-4); }
.statement-head span { display: block; height: 10px; border-radius: 4px; background: var(--stz-rule); }
.statement-lines { display: grid; gap: var(--stz-space-3); margin: 0; padding: 0; list-style: none; }
.statement-lines li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 72px; grid-template-areas: "pin label bar" "pin note note"; gap: 2px var(--stz-space-3); align-items: center; padding-bottom: var(--stz-space-3); border-bottom: 1px dashed var(--stz-rule); }
.statement-pin { grid-area: pin; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--stz-midnight-950); color: var(--stz-white); font-size: 14px; font-weight: 700; }
.statement-label { grid-area: label; color: var(--stz-midnight-950); font-weight: 700; font-size: 15px; }
.statement-bar { grid-area: bar; height: 10px; border-radius: 4px; background: var(--stz-rule); }
.statement-note { grid-area: note; color: var(--stz-text-muted); font-size: 13px; line-height: 1.4; }
.statement-rate { margin: var(--stz-space-4) 0 0; padding: var(--stz-space-3) var(--stz-space-4); border-radius: 8px; background: var(--stz-band); color: var(--stz-midnight-950); font-size: 15px; }
.statement-visual figcaption { margin-top: var(--stz-space-3); color: var(--stz-text-muted); font-size: 13px; text-align: center; }

/* Chooser: once there is a result, it takes the right-hand column and the fit chart moves below. */
.chooser-result { scroll-margin-top: 96px; }
@media (min-width: 1100px) {
  .chooser-grid:has(.chooser-result:not([hidden])) .chooser-result { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .chooser-grid:has(.chooser-result:not([hidden])) .chooser-chart { grid-column: 1 / -1; }
  .chooser-result .chooser-stage { max-width: 420px; }
}

@media (max-width: 599px) {
  /* Business cards keep the photo full width on phones (no 72px thumbnails); text cards stay compact. */
  .industry-card--photo a, .industry-card--text a { flex-direction: column; align-items: stretch; }
  .industry-card--featured .industry-photo { min-height: 0; aspect-ratio: 16 / 10; flex: 0 0 auto; }
  .industry-card--photo .industry-photo { aspect-ratio: 16 / 10; }
  .industry-grid { gap: var(--stz-space-3); }
  /* The four-step strip: one numbered row per step, the number beside the title and text. */
  .process-strip { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-3); }
  .process-strip li { grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--stz-space-3); row-gap: 0; align-items: start; }
  .process-strip li::before { grid-row: span 2; width: 32px; height: 32px; margin: 0; }
  .statement-visual { padding: var(--stz-space-3); }
  .local-links { padding: var(--stz-space-4); }
}
@media (max-width: 767px) {
  .resource-hero-stage--photo { max-width: none; padding: 0; }
}
@media (max-width: 520px) {
  .receipts { grid-template-columns: minmax(0, 1fr); }
}

/* Online Clover shop (2026-10-13): Add to cart on device pages and device cards, the shop CTA on /clover/pricing/.
   Add to cart is the crimson primary; "Get a quote instead" is the midnight outline secondary. No prices on this site. */
.cart-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stz-space-3); margin-top: var(--stz-space-6); }
.stz-btn.cart-button, .stz-btn.cart-quote { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; max-width: 100%; padding: 12px 28px; border-radius: var(--stz-radius-btn); font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-transform: none; white-space: normal; text-align: center; }
.stz-btn.cart-button { box-shadow: var(--stz-shadow-btn); }
.stz-btn--outline.cart-quote { border: 1.5px solid var(--stz-midnight-950); background: transparent; color: var(--stz-midnight-950); }
.stz-btn--outline.cart-quote:hover { background: var(--stz-midnight-950); color: var(--stz-white); }
.cart-note { max-width: 60ch; margin: var(--stz-space-3) 0 0; color: var(--stz-text-muted); font-size: 15px; line-height: 1.5; }
.cart-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--stz-space-5); margin: var(--stz-space-1) 0 0; }
.cart-more .text-arrow { font-size: 15px; }
.cart-call { display: inline-flex; align-items: center; min-height: 44px; color: var(--stz-midnight-950); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.cart-call:hover { color: var(--stz-midnight-950); text-decoration-thickness: 2px; }
.cart-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stz-space-3); margin-top: var(--stz-space-6); }
.cart-cta-buttons { display: flex; flex-wrap: wrap; gap: var(--stz-space-3); }
.cart-cta .cart-note, .cart-cta .apply-cta-note { flex: 1 1 100%; margin: var(--stz-space-1) 0 0; }
.cta-band--midnight .cart-cta .cart-note, .service-intro.cta-band--midnight .cart-cta .apply-cta-note { color: var(--stz-gray-300); }
.cta-band--midnight .stz-btn--outline.cart-quote { border-color: var(--stz-white); color: var(--stz-white); }
.cta-band--midnight .stz-btn--outline.cart-quote:hover { background: var(--stz-white); color: var(--stz-midnight-950); }
.device-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--stz-space-4); margin-top: auto; }
.device-actions .device-more { margin-top: 0; }
.device-buys { display: flex; flex-wrap: wrap; gap: 0 var(--stz-space-4); }
.device-buy { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; color: var(--stz-midnight-950); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.device-buy:hover { color: var(--stz-crimson-600); }
.device-buy:focus-visible { outline: var(--stz-focus-ring); outline-offset: 2px; }
.shop-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--stz-space-4) var(--stz-space-6); padding: var(--stz-space-6); border: 1px solid var(--stz-rule); border-radius: var(--stz-radius-card-v2); background: var(--stz-white); }
.shop-cta .prose { flex: 1 1 420px; min-width: 0; }
.shop-cta .prose p:last-child { margin-bottom: 0; }
.stz-btn.shop-button { min-height: 52px; padding: 12px 28px; font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
@media (max-width: 767px) {
  .cart-row, .cart-cta, .cart-cta-buttons { flex-direction: column; align-items: stretch; }
  .stz-btn.cart-button, .stz-btn.cart-quote { min-height: 48px; width: 100%; }
  .shop-cta { padding: var(--stz-space-5); }
  .stz-btn.shop-button { width: 100%; white-space: normal; }
}