/* Site v7 round 3: the industry tabs, the pictures, the offer card, the stat cards of the industry pages. Every selector under .v7. */
.v7 .ind-line { margin: 0 0 24px; font-size: 20px; line-height: 30px; }
.v7 .ind-intro { margin: -8px 0 24px; max-width: 760px; font-size: 17px; line-height: 26px; color: var(--slate-dk); }   /* v7r3f ruling 4: the T2 intro, once, above the tabs */
.v7 .tablist { display: none; }
.v7 .js-tabs .tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }   /* v7r3f ruling 17: 2 by 2 below the width where four fit in one row (10.5) */
@media (min-width: 700px) {
  .v7 .js-tabs .tablist { display: flex; flex-wrap: wrap; }
}
.v7 .tab { min-height: 44px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 700 17px/1 "Archivo", sans-serif; cursor: pointer; }
.v7 .tab[aria-selected="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }
.v7 .tab:focus-visible { outline: 3px solid var(--marine); outline-offset: 2px; }
.v7 .panels { display: block; }
.v7 .js-tabs .panels { display: grid; }
.v7 .js-tabs .panel { grid-area: 1 / 1; visibility: hidden; }
.v7 .js-tabs .panel.on { visibility: visible; }
.v7 .panel + .panel { margin-top: 56px; }
.v7 .js-tabs .panel + .panel { margin-top: 0; }
.v7 .js-tabs .ind-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v7 .ind-top { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
.v7 .ind-top .ind-text h4 { margin: 0 0 8px; font-size: 22px; line-height: 30px; }
.v7 .ind-top .ind-text p { margin: 0 0 12px; }
.v7 .ind-top .stake { font-family: "Source Serif 4", Georgia, serif; font-size: 20px; line-height: 30px; }
.v7 .ind-pic { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 16px; border: 1px solid var(--rule); object-fit: cover; background: var(--stone); }
.v7 .ind-top .ind-pic { order: -1; }
.v7 #industries .ind-top .ind-pic { order: 0; }   /* v7r3n (10.13b "Phone order"): on the home tabs the text column (figure first) comes before the picture on a phone; the industry pages' reach bands keep the picture first. V7M_R3N_PIC_FIRST */
.v7 .ind-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
/* v7r3i (10.13): the tab figure block leads the text column: headline (the hook, display weight), subheadline, payoff line, source line (small, muted) */
.v7 .ind-top .ind-text .ind-fig { margin: 0 0 24px; }
.v7 .ind-top .ind-text .ind-fig .fig-h { margin: 0 0 10px; font: 800 24px/30px "Archivo", sans-serif; }
.v7 .ind-top .ind-text .ind-fig .fig-sub { margin: 0 0 10px; font-size: 17px; line-height: 25px; }
.v7 .ind-top .ind-text .ind-fig .fig-src { margin: 0; font-size: 14px; line-height: 20px; color: var(--slate-dk); }
/* v7r3m (10.13b): the payoff box, back in each tab between the subheadline and the source line. A light tint of the accent (--marine over --paper), a 1px accent-tint border,
   the quote cards' 16px radius, padding 14px 16px (12px minimum), the column's full width. A SQUARE check tag (as .o-tag, radius 6px; no circle) drawn in CSS, aria-hidden.
   Emphasis is the box and the check, never bold: body weight (400). Ink text on the tint is far above 4.5:1; 17px phone, 18px desktop. */
.v7 .ind-top .ind-text .ind-fig .fig-pay { display: flex; align-items: flex-start; gap: 12px; box-sizing: border-box; width: 100%; max-width: 100%; margin: 4px 0 16px; padding: 14px 16px;
  background: color-mix(in srgb, var(--marine) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--marine) 30%, var(--paper)); border-radius: 16px;
  color: var(--ink); font-weight: 400; font-size: 17px; line-height: 25px; overflow-wrap: anywhere; }
.v7 .ind-fig .pay-tag { flex: 0 0 auto; position: relative; width: 24px; height: 24px; margin-top: 0; border-radius: 6px; background: var(--marine); }
.v7 .ind-fig .pay-tag::before { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* cut1 (10-29): the home tabs' five cards, one clean style on the section's three type sizes (headline, body 17/18, source 14): the category a small muted label, the question the main text, nothing else */
.v7 #industries .panel > .cards-line { margin: 0 0 16px; font-size: 17px; line-height: 25px; color: var(--ink); }
.v7 #industries .panel > .quote-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.v7 #industries .panel > .quote-cards .benefit { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; }
.v7 #industries .panel > .quote-cards .benefit h3 { order: -1; margin: 0; font: 400 14px/20px "Archivo", sans-serif; color: var(--slate-dk); }
.v7 #industries .panel > .quote-cards .benefit p { margin: 0; font-family: inherit; font-size: 17px; line-height: 25px; font-weight: 400; color: var(--ink); }
.v7 .page-panel .panel { visibility: visible; }
@media (min-width: 1024px) {
  .v7 .ind-top { grid-template-columns: 7fr 5fr; align-items: start; }
  .v7 .ind-top .ind-pic { order: 0; }
  .v7 .ind-top .ind-text .ind-fig .fig-h { font-size: 28px; line-height: 34px; }
  .v7 .ind-top .ind-text .ind-fig .fig-sub { font-size: 18px; line-height: 27px; }
  .v7 .ind-top .ind-text .ind-fig .fig-pay { font-size: 18px; line-height: 27px; }
  .v7 .ind-fig .pay-tag { margin-top: 1px; }
  .v7 #industries .panel > .cards-line, .v7 #industries .panel > .quote-cards .benefit p { font-size: 18px; line-height: 27px; }
  .v7 #industries .panel > .quote-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .v7 .ind-top .ind-text .ind-fig .fig-h { font-size: 32px; line-height: 38px; }
}
/* offer card */
.v7 .rep-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.v7 .offer-card2 { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 28px; width: 100%; }   /* v7r3h: full container width at every width (was max 960, a ragged right edge) */
.v7 .o-price { margin: 0 0 20px; display: flex; flex-direction: column; gap: 4px; }
.v7 .o-price .amt { font: 800 72px/72px "Archivo", sans-serif; }
.v7 .o-price .per { font-family: "Source Serif 4", Georgia, serif; font-size: 20px; line-height: 28px; }
.v7 .o-facts { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
.v7 .o-fact { background: var(--stone); border-radius: 12px; padding: 16px; }
.v7 .o-fact p { margin: 0; }
.v7 .o-fact .num { font: 800 40px/44px "Archivo", sans-serif; }
.v7 .o-names p { font: 600 18px/26px "Archivo", sans-serif; }
.v7 .o-steps { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; position: relative; }
.v7 .o-step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.v7 .o-step h3 { margin: 0 0 4px; font-size: 18px; line-height: 26px; }
.v7 .o-step p { margin: 0; font-size: 16px; line-height: 24px; }
.v7 .o-tag { width: 32px; height: 32px; border-radius: 6px; background: var(--marine); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 16px/1 "Archivo", sans-serif; }
.v7 .o-tag::before { content: attr(data-n); }
.v7 .o-foot { display: flex; flex-direction: column; gap: 14px; }
.v7 .o-deliver { margin: 0; font-size: 15px; line-height: 22px; color: var(--slate-dk); }
/* v7r3f ruling 18: the card sits below the tick list at every width (one column, full container width, max 960); price row and fact tiles on top, the three steps in equal
   top-aligned columns with each label on one line, the delivery line and the monthly chip on one row under them */
.v7 .o-foot .chip { display: inline-flex; flex: none; align-self: flex-start; max-width: 420px; }
@media (min-width: 700px) {
  .v7 .offer-card2 { padding: 40px; }
  .v7 .o-price { flex-direction: row; align-items: baseline; gap: 16px; }
  .v7 .o-price .amt { font-size: 96px; line-height: 96px; }
  .v7 .o-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .v7 .o-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .v7 .o-steps::before { content: ""; position: absolute; left: 16px; right: 16px; top: 15px; height: 2px; background: var(--rule); }
  .v7 .o-step { position: relative; grid-template-columns: 1fr; gap: 10px; align-content: start; }
  .v7 .o-step h3 { white-space: nowrap; }
  .v7 .o-tag { position: relative; z-index: 1; }
  .v7 .o-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .v7 .o-foot .chip { align-self: center; white-space: nowrap; }
}
.v7 #close .chip { display: inline-flex; max-width: 420px; margin-top: 16px; }   /* v7r3f ruling 19: a normal inline chip like the others, not a full-width bar */
/* v7r4 (10.14): the future-proof line, once under the tab row, and the reach band's kinds list in the text column (no empty paper beside the picture) */
.v7 .ind-ai { margin: -8px 0 4px; max-width: 760px; font-size: 18px; line-height: 27px; color: var(--ink); }
.v7 .ind-ai-src { margin: 0 0 24px; max-width: 760px; font-size: 14px; line-height: 20px; color: var(--slate-dk); }
.v7 .page-panel .ind-top.reach-top { margin-bottom: 0; align-items: start; }
.v7 .page-panel .ind-text .reach-kinds { display: block; margin: 20px 0 0; padding: 0; }
.v7 .page-panel .ind-text .reach-kinds .benefit { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; padding: 12px 0; background: none; border: 0; border-radius: 0; border-top: 1px solid var(--rule); }
.v7 .page-panel .ind-text .reach-kinds .benefit:last-child { border-bottom: 1px solid var(--rule); }
.v7 .page-panel .ind-text .reach-kinds .benefit h3 { margin: 0; font: 700 16px/22px "Archivo", sans-serif; }
.v7 .page-panel .ind-text .reach-kinds .benefit p { margin: 0; font-size: 17px; line-height: 25px; }
@media (min-width: 1024px) {
  .v7 .page-panel .ind-text .reach-kinds .benefit { grid-template-columns: 170px 1fr; gap: 16px; align-items: baseline; padding: 11px 0; }
}