/*
 * Car Tinting Heroes V2 — shared page design system.
 * Load fonts.css once, then this file. Settings may override :root tokens.
 * Opt a page into this system with <main class="cth-v2">. Components belong
 * inside that root; this stylesheet does not restyle legacy page content.
 * Use semantic elements: links for destinations, buttons for actions,
 * details/summary for FAQ, labelled native form controls and real tables.
 * .cth-section--dark is an optional accent section, not the default theme.
 */

/* Public tokens: the only unscoped declarations in this stylesheet. */
:root {
  --cth-color-action: #b93638;
  --cth-color-action-hover: #a72c2e;
  --cth-color-red: #d74a49;
  --cth-color-ink: #38383d;
  --cth-color-muted: #65656e;
  --cth-color-lavender: #dadeef;
  --cth-color-pale: #f1f2f8;
  --cth-color-line: #dcdde6;
  --cth-color-paper: #fafafd;
  --cth-color-white: #fff;
  --cth-color-dark: #1e1e22;
  --cth-color-dark-muted: #c5c5ce;
  --cth-color-dark-link: #ffb4b4;
  --cth-font-family: "CTH Montserrat", Arial, sans-serif;
  --cth-content-width: 1220px;
  --cth-reading-width: 760px;
  --cth-section-space: 90px;
  --cth-grid-gap: 24px;
  --cth-radius: 3px;
  --cth-shadow: 0 9px 22px #444f7010;
  --cth-sticky-offset: 105px;
}

/* Scoped baseline. Context tokens adapt light surfaces within dark sections. */
.cth-v2 {
  --cth-text-color: var(--cth-color-ink);
  --cth-text-muted: var(--cth-color-muted);
  --cth-link-color: var(--cth-color-action);
  --cth-focus-color: var(--cth-color-action);
  --cth-divider-color: var(--cth-color-line);
  --cth-outline-background: var(--cth-color-white);
  --cth-outline-ink: var(--cth-color-ink);
  --cth-outline-border: var(--cth-color-ink);
  --cth-soft-background: var(--cth-color-white);
  --cth-soft-hover: #fcf0f0;
  --cth-soft-ink: var(--cth-color-action);
  --cth-soft-border: #e8cdcf;
  margin: 0;
  padding: 0;
  min-width: 0;
  color: var(--cth-text-color);
  background: var(--cth-color-white);
  font: 400 15px/1.8 var(--cth-font-family);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
.cth-v2, .cth-v2 *, .cth-v2 *::before, .cth-v2 *::after { box-sizing: border-box; }
.cth-v2 :is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd) { margin: 0; }
.cth-v2 :is(h1,h2,h3,h4,h5,h6) {
  color: var(--cth-text-color);
  font-family: var(--cth-font-family);
  font-style: normal;
  font-weight: 700;
  line-height: 1.16;
  text-transform: none;
  overflow-wrap: break-word;
}
.cth-v2 h1 { font-size: clamp(34px,4.2vw,58px); font-weight: 800; letter-spacing: -2px; }
.cth-v2 h2 { font-size: clamp(32px,3.3vw,46px); font-weight: 750; letter-spacing: -1.4px; }
.cth-v2 h3 { font-size: 25px; letter-spacing: -.7px; }
.cth-v2 h4 { font-size: 19px; letter-spacing: -.3px; }
.cth-v2 :is(h5,h6) { font-size: 15px; letter-spacing: 0; }
.cth-v2 p { color: var(--cth-text-muted); }
.cth-v2 :is(strong,b) { font-weight: 700; }
.cth-v2 a { color: var(--cth-link-color); text-decoration: underline; text-underline-offset: 3px; }
.cth-v2 :is(button,input,select,textarea) { font: inherit; text-transform: none; letter-spacing: normal; }
.cth-v2 button { cursor: pointer; }
.cth-v2 :is(button,a,input,select,textarea,summary) { -webkit-tap-highlight-color: transparent; }
.cth-v2 :is(img,video) { max-width: 100%; height: auto; display: block; }
.cth-v2 svg { display: block; }
.cth-v2 [hidden] { display: none !important; }
.cth-v2 :focus-visible { outline: 3px solid var(--cth-focus-color); outline-offset: 5px; }
.cth-v2 [id] { scroll-margin-top: var(--cth-sticky-offset); }
.cth-v2 .cth-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cth-v2 .cth-container { width: min(var(--cth-content-width),calc(100% - 96px)); margin-inline: auto; }
.cth-v2 .cth-container--reading { max-width: var(--cth-reading-width); }
.cth-v2 .cth-reading { max-width: var(--cth-reading-width); }
.cth-v2 .cth-muted { color: var(--cth-text-muted); }
.cth-v2 .cth-accent { color: var(--cth-link-color); }
.cth-v2 .cth-small { font-size: 12px; line-height: 1.8; }
.cth-v2 .cth-lead { font-size: 16px; line-height: 1.85; }
.cth-v2 .cth-stack > * + * { margin-top: var(--cth-stack-space,18px); }
.cth-v2 .cth-prose { max-width: var(--cth-reading-width); }
.cth-v2 .cth-prose > * + * { margin-top: 18px; }
.cth-v2 .cth-prose :where(h2,h3,h4) { margin-top: 32px; }
.cth-v2 .cth-prose > :first-child { margin-top: 0; }
.cth-v2 .cth-prose :where(ul,ol) { padding-inline-start: 24px; color: var(--cth-text-muted); }
.cth-v2 .cth-prose li + li { margin-top: 8px; }
.cth-v2 .cth-prose blockquote { padding: 18px 24px; border-inline-start: 3px solid var(--cth-color-red); background: var(--cth-color-pale); color: var(--cth-color-ink); }

/* Reusable layout: explicit column counts collapse without fixed card heights. */
.cth-v2 .cth-grid { display: grid; gap: var(--cth-grid-gap); }
.cth-v2 .cth-grid > * { min-width: 0; }
.cth-v2 .cth-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.cth-v2 .cth-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.cth-v2 .cth-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.cth-v2 .cth-split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 65px; align-items: start; }
.cth-v2 .cth-split > * { min-width: 0; }
.cth-v2 .cth-split--equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
.cth-v2 .cth-split--center { align-items: center; }
.cth-v2 .cth-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.cth-v2 .cth-divider { border: 0; border-top: 1px solid var(--cth-divider-color); margin-block: 30px; }
.cth-v2 .cth-section { padding-block: var(--cth-section-space); }
.cth-v2 .cth-section--compact { padding-block: 54px; }
.cth-v2 .cth-section--paper { background: var(--cth-color-paper); }
.cth-v2 .cth-section--pale { background: var(--cth-color-pale); }
.cth-v2 .cth-section--lavender { background: var(--cth-color-lavender); }
.cth-v2 .cth-section--bordered { border-block: 1px solid var(--cth-divider-color); }
.cth-v2 .cth-section--dark {
  --cth-text-color: var(--cth-color-white);
  --cth-text-muted: var(--cth-color-dark-muted);
  --cth-link-color: var(--cth-color-dark-link);
  --cth-focus-color: #ffc1c1;
  --cth-divider-color: #4c4c56;
  --cth-outline-background: transparent;
  --cth-outline-ink: var(--cth-color-white);
  --cth-outline-border: #d9dbe7;
  --cth-soft-background: #333338;
  --cth-soft-hover: #44444b;
  --cth-soft-ink: #ffd1d1;
  --cth-soft-border: #8b7373;
  color: var(--cth-text-color);
  background: radial-gradient(ellipse at 18% 46%,#dadeef13,transparent 48%),var(--cth-color-dark);
}
.cth-v2 .cth-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; margin-bottom: 37px; }
.cth-v2 .cth-section-head > * { min-width: 0; }
.cth-v2 .cth-section-head h2 { margin-top: 17px; }
.cth-v2 .cth-section-head > p { max-width: 420px; font-size: 14px; line-height: 1.85; }
.cth-v2 .cth-section-head--center { display: block; text-align: center; max-width: 820px; margin-inline: auto; }
.cth-v2 .cth-section-head--center .cth-kicker { justify-content: center; }
.cth-v2 .cth-section-head--center > p { max-width: 640px; margin: 18px auto 0; }
.cth-v2 .cth-kicker { display: flex; align-items: center; gap: 11px; color: var(--cth-text-muted); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 1.8px; text-transform: uppercase; }
.cth-v2 .cth-kicker::before { content: ""; width: 22px; height: 3px; background: var(--cth-color-red); flex: 0 0 auto; }
.cth-v2 .cth-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.cth-v2 .cth-arrow { font: 400 23px/1 Arial,sans-serif; flex: 0 0 auto; }

/* Actions. Primary is red; outline and soft inherit the surface context. */
.cth-v2 .cth-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 49px; max-width: 100%; margin: 0; padding: 12px 22px;
  border: 1px solid var(--cth-color-action); border-radius: 2px;
  color: var(--cth-color-white); background: var(--cth-color-action); box-shadow: none;
  font: 650 12px/1.5 var(--cth-font-family); text-align: center; text-decoration: none;
  text-transform: none; letter-spacing: normal; white-space: normal; cursor: pointer;
  transition: transform .2s,background .2s,box-shadow .2s;
}
.cth-v2 .cth-button:visited { color: var(--cth-color-white); }
.cth-v2 .cth-button:hover { color: var(--cth-color-white); background: var(--cth-color-action-hover); border-color: var(--cth-color-action-hover); transform: translateY(-2px); }
.cth-v2 .cth-button--outline { color: var(--cth-outline-ink); border-color: var(--cth-outline-border); background: var(--cth-outline-background); box-shadow: 4px 4px 0 var(--cth-color-red); }
.cth-v2 .cth-button--outline:visited { color: var(--cth-outline-ink); }
.cth-v2 .cth-button--outline:hover { color: var(--cth-outline-ink); border-color: var(--cth-outline-border); background: var(--cth-outline-background); box-shadow: 2px 2px 0 var(--cth-color-red); transform: translate(2px,2px); }
.cth-v2 .cth-button--soft { color: var(--cth-soft-ink); border-color: var(--cth-soft-border); background: var(--cth-soft-background); }
.cth-v2 .cth-button--soft:visited { color: var(--cth-soft-ink); }
.cth-v2 .cth-button--soft:hover { color: var(--cth-soft-ink); border-color: var(--cth-soft-border); background: var(--cth-soft-hover); }
.cth-v2 .cth-button--small { min-height: 44px; font-size: 11px; padding: 10px 17px; }
.cth-v2 .cth-button--full { width: 100%; }
.cth-v2 .cth-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.cth-v2 .cth-button:focus-visible { outline-color: var(--cth-focus-color); outline-offset: 5px; }
.cth-v2 .cth-text-link { display: inline-flex; align-items: center; gap: 13px; padding-block: 8px; border-bottom: 1px solid currentColor; color: var(--cth-link-color); font-size: 12px; line-height: 1.6; font-weight: 650; text-decoration: none; }
.cth-v2 .cth-text-link:hover { text-decoration: underline; }

/* Hero: same light gradient and red accents as the approved homepage. */
.cth-v2 .cth-hero { position: relative; isolation: isolate; background: linear-gradient(125deg,#fafafd 5%,#f6f6fb 45%,#edf0f8 100%); padding-block: 62px 66px; }
.cth-v2 .cth-hero::before { content: ""; position: absolute; inset: 0 0 0 33%; z-index: -1; background: linear-gradient(135deg,#dadeef40,#dadeefe6); clip-path: polygon(34% 0,100% 0,100% 100%,0 100%); pointer-events: none; }
.cth-v2 .cth-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 60px; align-items: center; }
.cth-v2 .cth-hero-grid > * { min-width: 0; }
.cth-v2 .cth-hero h1 { margin-top: 17px; }
.cth-v2 .cth-hero-copy > p { margin-top: 20px; font-size: 14px; line-height: 1.9; max-width: 620px; }
.cth-v2 .cth-hero-copy .cth-actions { margin-top: 25px; }
.cth-v2 .cth-hero--center { text-align: center; }
.cth-v2 .cth-hero--center .cth-hero-copy { max-width: 850px; margin-inline: auto; }
.cth-v2 .cth-hero--center .cth-kicker,.cth-v2 .cth-hero--center .cth-actions { justify-content: center; }
.cth-v2 .cth-hero--center .cth-hero-copy > p { max-width: 780px; margin-inline: auto; }
.cth-v2 .cth-breadcrumbs { margin-bottom: 24px; font-size: 11px; line-height: 1.7; color: var(--cth-color-muted); }
.cth-v2 .cth-breadcrumbs ol { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.cth-v2 .cth-breadcrumbs li + li::before { content: "/"; margin-inline-end: 8px; color: #8a8b94; }
.cth-v2 .cth-price-cue { font-size: 12px; line-height: 1.8; margin-top: 20px; }
.cth-v2 .cth-price-cue strong { color: var(--cth-color-action); }

/* White components explicitly reset contrast when placed in a dark section. */
.cth-v2 :is(.cth-card,.cth-form,.cth-media-panel,.cth-faq-item,.cth-table-wrap,.cth-note,.cth-cta-band) {
  --cth-text-color: var(--cth-color-ink);
  --cth-text-muted: var(--cth-color-muted);
  --cth-link-color: var(--cth-color-action);
  --cth-focus-color: var(--cth-color-action);
  --cth-divider-color: var(--cth-color-line);
  --cth-outline-background: var(--cth-color-white);
  --cth-outline-ink: var(--cth-color-ink);
  --cth-outline-border: var(--cth-color-ink);
  --cth-soft-background: var(--cth-color-white);
  --cth-soft-hover: #fcf0f0;
  --cth-soft-ink: var(--cth-color-action);
  --cth-soft-border: #e8cdcf;
  color: var(--cth-text-color);
}
.cth-v2 .cth-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px; border: 1px solid var(--cth-color-line); border-radius: var(--cth-radius); background: var(--cth-color-white); }
.cth-v2 .cth-card--pale { background: var(--cth-color-pale); }
.cth-v2 .cth-card--rose { background: #fbf1f1; border-color: #eedcde; }
.cth-v2 .cth-card--featured { border-top: 3px solid var(--cth-color-red); box-shadow: var(--cth-shadow); }
.cth-v2 .cth-card--interactive { transition: transform .2s,border-color .2s,box-shadow .2s; }
.cth-v2 .cth-card--interactive:hover,.cth-v2 .cth-card--interactive:focus-within { border-color: #d29697; box-shadow: var(--cth-shadow); transform: translateY(-3px); }
.cth-v2 .cth-card > .cth-icon { width: 28px; height: 28px; margin-bottom: 24px; color: var(--cth-color-action); }
.cth-v2 .cth-card h3 { font-size: 24px; line-height: 1.2; margin-bottom: 15px; }
.cth-v2 .cth-card p { font-size: 13px; line-height: 1.9; }
.cth-v2 .cth-card p + p { margin-top: 12px; }
.cth-v2 .cth-card-footer { align-self: stretch; margin-top: auto; padding-top: 24px; }
.cth-v2 .cth-card-footer > .cth-text-link { width: 100%; justify-content: space-between; border-top: 1px solid var(--cth-color-line); border-bottom: 0; padding-top: 17px; }
.cth-v2 .cth-badge { display: inline-flex; padding: 4px 9px; border: 1px solid var(--cth-color-line); background: var(--cth-color-pale); color: var(--cth-color-ink); font-size: 10px; font-weight: 650; letter-spacing: .4px; line-height: 1.6; }
.cth-v2 .cth-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-block: 20px; color: var(--cth-text-color); }
.cth-v2 .cth-price strong { font-size: 42px; font-weight: 750; line-height: 1.1; letter-spacing: -2px; }
.cth-v2 .cth-price span { font-size: 12px; font-weight: 600; }
.cth-v2 .cth-check-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; font-size: 13px; line-height: 1.7; color: var(--cth-text-muted); }
.cth-v2 .cth-check-list li { display: flex; align-items: flex-start; gap: 10px; }
.cth-v2 .cth-check-list li::before { content: "✓"; color: var(--cth-link-color); font-weight: 700; flex: 0 0 auto; }
.cth-v2 .cth-note { padding: 18px 20px; border-inline-start: 2px solid var(--cth-color-red); background: var(--cth-color-pale); color: var(--cth-color-ink); font-size: 13px; line-height: 1.85; }
.cth-v2 .cth-note p { color: var(--cth-color-muted); }
.cth-v2 .cth-note a { color: var(--cth-color-action); }
.cth-v2 .cth-process { list-style: none; counter-reset: cth-step; padding: 0; margin: 24px 0; }
.cth-v2 .cth-process > li { counter-increment: cth-step; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 15px; padding: 23px 0; border-top: 1px solid var(--cth-divider-color); }
.cth-v2 .cth-process > li:last-child { border-bottom: 1px solid var(--cth-divider-color); }
.cth-v2 .cth-process > li::before { content: counter(cth-step,decimal-leading-zero); font-size: 11px; font-weight: 650; color: var(--cth-link-color); padding-top: 3px; }
.cth-v2 .cth-process h3 { font-size: 16px; letter-spacing: -.2px; line-height: 1.5; }
.cth-v2 .cth-process p { margin-top: 6px; font-size: 13px; line-height: 1.9; }

/* FAQ controls are scoped to these classes, never every details element. */
.cth-v2 .cth-faq { display: grid; gap: 10px; }
.cth-v2 .cth-faq-item { margin: 0; padding: 0; border: 1px solid #e1e2ea; border-inline-start: 3px solid transparent; background: var(--cth-color-paper); }
.cth-v2 .cth-faq-item > summary { position: relative; display: block; list-style: none; cursor: pointer; margin: 0; padding: 20px 50px 20px 20px; color: var(--cth-color-ink); font-size: 14px; line-height: 1.6; font-weight: 600; }
.cth-v2 .cth-faq-item > summary::-webkit-details-marker { display: none; }
.cth-v2 .cth-faq-item > summary::after { content: "+"; position: absolute; inset-inline-end: 19px; top: 22px; color: var(--cth-color-action); font: 400 22px/1 Arial,sans-serif; }
.cth-v2 .cth-faq-item[open] { border-inline-start-color: var(--cth-color-red); background: var(--cth-color-white); }
.cth-v2 .cth-faq-item[open] > summary { color: var(--cth-color-action); }
.cth-v2 .cth-faq-item[open] > summary::after { content: "−"; }
.cth-v2 .cth-faq-answer { padding: 0 24px 22px 20px; font-size: 14px; line-height: 1.9; }
.cth-v2 .cth-faq-answer > * + * { margin-top: 12px; }
.cth-v2 .cth-faq-answer :where(ul,ol) { padding-inline-start: 22px; }

/* Forms: pair each label with its control ID and errors with aria-describedby.
 * Styling does not submit data; pages must wire forms to a real endpoint. */
.cth-v2 .cth-form { padding: 31px 33px; background: var(--cth-color-white); border: 1px solid var(--cth-color-line); box-shadow: 7px 7px 0 #ffffff80; }
.cth-v2 .cth-form h3 { font-size: 27px; line-height: 1.25; }
.cth-v2 .cth-form > p { font-size: 13px; margin-top: 10px; }
.cth-v2 .cth-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 16px; margin-block: 24px; }
.cth-v2 .cth-field { min-width: 0; }
.cth-v2 .cth-field--full { grid-column: 1/-1; }
.cth-v2 .cth-field label { display: block; margin: 0 0 7px; color: var(--cth-color-ink); font-size: 12px; font-weight: 650; line-height: 1.6; }
.cth-v2 .cth-field label span { font-weight: 400; color: var(--cth-color-muted); }
.cth-v2 .cth-field :is(input,select,textarea) { display: block; width: 100%; min-height: 48px; margin: 0; padding: 11px 12px; border: 1px solid #d7d9e3; border-radius: 2px; background: #fcfcfe; color: var(--cth-color-ink); box-shadow: none; font: 400 14px/1.6 var(--cth-font-family); }
.cth-v2 .cth-field textarea { min-height: 112px; resize: vertical; }
.cth-v2 .cth-field :is(input,textarea)::placeholder { color: #73737e; opacity: 1; }
.cth-v2 .cth-field :is(input,select,textarea):focus { border-color: var(--cth-color-action); }
.cth-v2 .cth-field :is(input,textarea)[readonly] { background: #f4f5fa; color: var(--cth-color-action); }
.cth-v2 .cth-field :is(input,select,textarea):disabled { opacity: .65; cursor: not-allowed; }
.cth-v2 .cth-field [aria-invalid="true"] { border-color: var(--cth-color-action); }
.cth-v2 .cth-field-help,.cth-v2 .cth-field-error { display: block; margin-top: 6px; font-size: 11px; line-height: 1.7; }
.cth-v2 .cth-field-help { color: var(--cth-color-muted); }
.cth-v2 .cth-field-error { color: var(--cth-color-action); font-weight: 600; }
.cth-v2 .cth-check-field { display: flex; align-items: flex-start; gap: 10px; color: var(--cth-color-muted); font-size: 12px; line-height: 1.8; }
.cth-v2 .cth-check-field :is(input[type="checkbox"],input[type="radio"]) { width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; padding: 0; accent-color: var(--cth-color-action); flex: 0 0 auto; }
.cth-v2 .cth-form-note { margin-top: 14px; font-size: 11px; line-height: 1.8; color: var(--cth-color-muted); }
.cth-v2 .cth-form-status { padding: 13px 16px; border: 1px solid var(--cth-color-line); background: var(--cth-color-pale); margin-top: 18px; font-size: 13px; }

/* Tables stay semantic. Give the wrapper tabindex="0" and an accessible
 * label when it horizontally scrolls; use caption and scope on headers. */
.cth-v2 .cth-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--cth-color-line); background: var(--cth-color-white); }
.cth-v2 .cth-table { width: 100%; margin: 0; border-collapse: collapse; border-spacing: 0; color: var(--cth-color-ink); font-size: 13px; line-height: 1.8; }
.cth-v2 .cth-table caption { padding: 18px 20px; color: var(--cth-color-ink); text-align: left; font-size: 14px; font-weight: 650; }
.cth-v2 .cth-table :is(th,td) { padding: 17px 20px; border: 0; border-top: 1px solid var(--cth-color-line); text-align: left; vertical-align: top; }
.cth-v2 .cth-table thead th { background: var(--cth-color-pale); font-weight: 650; }
.cth-v2 .cth-table tbody th { font-weight: 600; }
.cth-v2 .cth-table tbody tr:nth-child(even) { background: var(--cth-color-paper); }
.cth-v2 .cth-table--compare { min-width: 640px; }
.cth-v2 .cth-table-note { margin-top: 12px; color: var(--cth-text-muted); font-size: 11px; line-height: 1.8; }

/* Media never fixes the content panel height. Image and panel can grow. */
.cth-v2 .cth-media { position: relative; min-width: 0; margin: 0; }
.cth-v2 .cth-media > :is(img,video) { width: 100%; border-radius: var(--cth-radius); }
.cth-v2 .cth-media--landscape > :is(img,video) { aspect-ratio: 3/2; object-fit: cover; }
.cth-v2 .cth-media--square > :is(img,video) { aspect-ratio: 1; object-fit: cover; }
.cth-v2 .cth-media > figcaption { color: var(--cth-text-muted); font-size: 11px; line-height: 1.7; margin-top: 10px; }
.cth-v2 .cth-image-note { display: block; color: inherit; font-size: 10px; font-weight: 400; line-height: 1.6; margin-top: 6px; }
.cth-v2 .cth-media-feature { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,350px); align-items: center; min-height: 390px; padding: 35px; margin: 0; background: var(--cth-color-pale); }
.cth-v2 .cth-media-feature > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; }
.cth-v2 .cth-media-panel { grid-column: 2; min-width: 0; padding: 33px; background: #fffffff5; border-bottom: 4px solid var(--cth-color-red); }
.cth-v2 .cth-media-panel h3 { font-size: 29px; line-height: 1.2; margin-block: 15px; }
.cth-v2 .cth-media-panel p { font-size: 13px; line-height: 1.9; }
.cth-v2 .cth-media-panel .cth-text-link { margin-top: 16px; }
.cth-v2 .cth-cta-band { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 32px 35px; border: 1px solid var(--cth-color-line); background: var(--cth-color-pale); }
.cth-v2 .cth-cta-band h3 { color: var(--cth-color-ink); font-size: 24px; }
.cth-v2 .cth-cta-band p { color: var(--cth-color-muted); font-size: 13px; margin-top: 10px; }
.cth-v2 .cth-cta-band > .cth-button { flex: 0 0 auto; }

/* Responsive widths mirror the approved 96/64/36px page gutters. */
@media (max-width:1100px) {
  .cth-v2 .cth-container { width: calc(100% - 64px); }
  .cth-v2 .cth-split,.cth-v2 .cth-hero-grid { gap: 36px; }
  .cth-v2 .cth-grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cth-v2 .cth-card { padding: 24px; }
}
@media (max-width:900px) {
  .cth-v2 .cth-hero-grid,.cth-v2 .cth-split { grid-template-columns: minmax(0,1fr); }
  .cth-v2 .cth-hero-copy > p { max-width: 720px; }
  .cth-v2 .cth-hero-grid > .cth-media { max-width: 680px; width: 100%; }
  .cth-v2 .cth-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cth-v2 .cth-section-head { gap: 30px; }
  .cth-v2 .cth-section-head > p { max-width: 340px; }
  .cth-v2 .cth-section-head--center > p { max-width: 640px; }
  .cth-v2 .cth-media-feature { grid-template-columns: minmax(0,1fr) minmax(280px,300px); padding: 22px; min-height: 350px; }
  .cth-v2 .cth-media-panel { padding: 25px; }
  .cth-v2 .cth-media-panel h3 { font-size: 26px; }
}
@media (max-width:650px) {
  .cth-v2 { --cth-section-space: 58px; --cth-grid-gap: 16px; --cth-sticky-offset: 84px; font-size: 14px; }
  .cth-v2 h1 { font-size: clamp(32px,8.5vw,40px); letter-spacing: -1.55px; }
  .cth-v2 h2 { font-size: 33px; letter-spacing: -1.2px; }
  .cth-v2 h3 { font-size: 24px; }
  .cth-v2 .cth-container { width: calc(100% - 36px); }
  .cth-v2 .cth-section--compact { padding-block: 38px; }
  .cth-v2 .cth-section-head { display: block; margin-bottom: 28px; }
  .cth-v2 .cth-section-head > p { max-width: 100%; margin-top: 18px; }
  .cth-v2 .cth-kicker { font-size: 9px; letter-spacing: 1.3px; gap: 9px; }
  .cth-v2 .cth-kicker::before { height: 2px; width: 18px; }
  .cth-v2 .cth-grid--2,.cth-v2 .cth-grid--3,.cth-v2 .cth-grid--4 { grid-template-columns: minmax(0,1fr); }
  .cth-v2 .cth-split,.cth-v2 .cth-hero-grid { gap: 30px; }
  .cth-v2 .cth-hero { padding-block: 34px 42px; }
  .cth-v2 .cth-hero::before { inset: 0; clip-path: polygon(100% 14%,100% 100%,0 100%,0 78%); }
  .cth-v2 .cth-hero-copy > p { font-size: 14px; margin-top: 18px; }
  .cth-v2 .cth-hero h1 { margin-top: 15px; }
  .cth-v2 .cth-breadcrumbs { font-size: 10px; margin-bottom: 20px; }
  .cth-v2 .cth-actions { gap: 12px; }
  .cth-v2 .cth-button { min-height: 46px; padding: 11px 17px; font-size: 11px; }
  .cth-v2 .cth-button--small { min-height: 44px; }
  .cth-v2 .cth-card { padding: 24px 22px; }
  .cth-v2 .cth-card h3 { font-size: 23px; }
  .cth-v2 .cth-faq-item > summary { padding: 18px 42px 18px 16px; font-size: 13px; }
  .cth-v2 .cth-faq-item > summary::after { inset-inline-end: 15px; top: 20px; }
  .cth-v2 .cth-faq-answer { padding: 0 18px 20px 16px; font-size: 13px; }
  .cth-v2 .cth-form { padding: 27px 22px; box-shadow: 5px 5px 0 #ffffff80; }
  .cth-v2 .cth-form h3 { font-size: 25px; }
  .cth-v2 .cth-fields { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .cth-v2 .cth-field :is(input,select,textarea) { font-size: 16px; }
  .cth-v2 .cth-table :is(th,td) { padding: 14px 16px; }
  .cth-v2 .cth-table { font-size: 12px; }
  .cth-v2 .cth-media-feature { display: block; min-height: 0; padding: 0; background: none; }
  .cth-v2 .cth-media-feature > img { position: static; height: 230px; object-position: 38% 45%; }
  .cth-v2 .cth-media-panel { position: relative; width: calc(100% - 28px); margin: -35px auto 0; padding: 26px 24px; border: 1px solid var(--cth-color-line); border-bottom: 3px solid var(--cth-color-red); background: var(--cth-color-white); }
  .cth-v2 .cth-media-panel h3 { font-size: 27px; margin-block: 12px; }
  .cth-v2 .cth-cta-band { display: block; padding: 25px 23px; }
  .cth-v2 .cth-cta-band h3 { font-size: 23px; }
  .cth-v2 .cth-cta-band > .cth-button { margin-top: 20px; }
}
@media (max-width:365px) {
  .cth-v2 .cth-container { width: calc(100% - 28px); }
  .cth-v2 .cth-form { padding: 25px 20px; }
  .cth-v2 .cth-card { padding-inline: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  .cth-v2 .cth-button,.cth-v2 .cth-card--interactive { transition: none; }
  .cth-v2 .cth-button:hover,.cth-v2 .cth-card--interactive:hover,.cth-v2 .cth-card--interactive:focus-within { transform: none; }
}
@media (forced-colors:active) {
  .cth-v2 .cth-button { border: 1px solid ButtonText; }
  .cth-v2 .cth-faq-item[open] { border-inline-start-color: Highlight; }
  .cth-v2 :focus-visible { outline-color: Highlight; }
}

.cth-v2 .cth-skip-link{position:fixed;top:-100px;left:20px;z-index:1000;background:var(--cth-color-white);color:var(--cth-color-ink);padding:12px 18px}.cth-v2 .cth-skip-link:focus{top:10px}