/* WEB-COMPLETE-01 · Claude patch. Load after every existing stylesheet on / and /pricing (a file, not an inline
   <style>: the site's CSP blocks inline styles). Selectors carry body.optical-site to outrank approved-home.css.
   Existing site values only. No new colors. */

/* ---------- H-8 value section ---------- */
body.optical-site .approved-home .ah-value { padding: 0; }
body.optical-site .approved-home .ah-value-panel { position: relative; padding: 56px; border-radius: 24px; }
body.optical-site .approved-home .ah-value-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
body.optical-site .approved-home .ah-value-text { grid-column: 1 / span 5; }
body.optical-site .approved-home .ah-value-text .ah-eyebrow { margin: 0 0 12px; }
body.optical-site .approved-home .ah-value h2 { font-size: 49px; line-height: 1.12; letter-spacing: -0.055em; font-weight: 500; text-wrap: balance; }
body.optical-site .approved-home .ah-value h2 em { display: block; font-style: normal; }
body.optical-site .approved-home .ah-value-sub { margin: 24px 0 0; font-size: 16px; line-height: 1.6; color: rgb(208, 224, 246); }
body.optical-site .approved-home .ah-value-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; align-items: stretch; }
body.optical-site .approved-home .ah-value-card {
  position: relative; padding: 32px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 35%, rgba(255, 255, 255, 0.015) 70%, rgba(151, 188, 255, 0.09) 100%), rgba(12, 23, 46, 0.5);
  border: 1px solid rgba(175, 223, 255, 0.38);
  box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.35), inset -1px -2px 3px rgba(166, 173, 255, 0.22), 0 18px 40px -20px rgba(0, 0, 0, 0.6), 0 0 40px -22px rgba(85, 202, 255, 0.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
}
body.optical-site .approved-home .ah-value-label { margin: 0; }
body.optical-site .approved-home .ah-value-rule { width: 32px; height: 1px; margin: 16px 0; border: 0; background: rgba(167, 231, 255, 0.45); }
body.optical-site .approved-home .ah-value-when { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(208, 224, 246); }
body.optical-site .approved-home .ah-value-with { margin-top: 16px; color: #a7e7ff; }
body.optical-site .approved-home .ah-value-body { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: rgb(208, 224, 246); }
body.optical-site .approved-home .ah-value-close { margin: 48px 0 0; max-width: calc((100% - 11 * 32px) / 12 * 8 + 7 * 32px); font-size: 16px; line-height: 1.6; color: rgb(208, 224, 246); }

/* Align "Today" and "With Stratum" rows across the three cards (desktop). */
@media (min-width: 1024px) {
  body.optical-site .approved-home .ah-value-cards { grid-template-rows: repeat(6, auto); row-gap: 0; }
  body.optical-site .approved-home .ah-value-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; }
}
/* Hero and closing buttons share one height. */
body.optical-site .approved-home .ah-actions .button.outline,
body.optical-site .approved-home .ah-statement-actions .button.outline { min-height: 48px; display: inline-flex; align-items: center; }

/* Catch Point visual (fallback: still + node glow). No border, shadow or radius on the image (V-8). */
body.optical-site .approved-home .ah-value-visual { grid-column: 6 / span 7; margin: 0; }
body.optical-site .approved-home .lp32-catch-point-fallback {
  position: relative; margin: 0; aspect-ratio: 16 / 9; background: #060b19; overflow: hidden; border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(175, 223, 255, 0.38), 0 24px 64px -24px rgba(0, 0, 0, 0.65), 0 0 54px -18px rgba(85, 202, 255, 0.35);
}
/* Liquid-glass face over the still: reflective edge and soft top-left sheen, like the site's console. */
body.optical-site .approved-home .lp32-catch-point-fallback::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 55%, rgba(151, 188, 255, 0.06) 100%);
  box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.35), inset -1px -2px 3px rgba(166, 173, 255, 0.25);
}
body.optical-site .approved-home .lp32-catch-point-fallback .ah-motion-toggle { z-index: 2; }
body.optical-site .approved-home .lp32-catch-point-fallback picture,
body.optical-site .approved-home .lp32-catch-point-fallback img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
body.optical-site .approved-home .lp32-catch-point-fallback .node-glow {
  position: absolute; left: 50%; top: 49.9%; width: 6.75%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgb(242 176 70 / .42) 0%, rgb(242 176 70 / .18) 30%, transparent 70%);
  opacity: .6; animation: lp32-node-glow 4s ease-in-out infinite;
}
/* Catch Point labels: HTML text under the visual, aligned to the desktop panel centers (22.5%, 50%, 77.5%). */
body.optical-site .approved-home .ah-catch-labels { position: relative; height: 32px; margin-top: 16px; font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(184, 199, 223); }
body.optical-site .approved-home .ah-catch-labels span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
body.optical-site .approved-home .ah-catch-labels span:nth-child(1) { left: 22.5%; }
body.optical-site .approved-home .ah-catch-labels span:nth-child(2) { left: 50%; }
body.optical-site .approved-home .ah-catch-labels span:nth-child(3) { left: 77.5%; }
body.optical-site .approved-home .ah-catch-labels .is-catch b { display: block; font-weight: 500; }
body.optical-site .approved-home .ah-catch-labels .is-catch em { display: block; font-style: normal; color: #a7e7ff; }
/* Below 1280 the visual is too narrow to pin labels under each panel: three equal columns instead, in reading order. */
@media (max-width: 1279px) {
  body.optical-site .approved-home .ah-catch-labels { height: auto; display: flex; gap: 12px; letter-spacing: 0.08em; }
  body.optical-site .approved-home .ah-catch-labels span { position: static; transform: none; flex: 1 1 0; text-align: center; white-space: normal; }
}
@keyframes lp32-node-glow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
body.optical-site .approved-home .lp32-catch-point-fallback[data-paused="true"] .node-glow { animation-play-state: paused; }
body.optical-site .approved-home .ah-motion-toggle {
  position: absolute; top: 12px; right: 12px; min-width: 44px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(175, 223, 255, 0.55); background: rgba(12, 23, 46, 0.72);
  color: #f6f9ff; font: 500 13px/1 Geist, Arial, sans-serif; cursor: pointer;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.28), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}
body.optical-site .approved-home .ah-motion-toggle:focus-visible { outline: 2px solid #a7e7ff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  body.optical-site .approved-home .lp32-catch-point-fallback .node-glow { animation: none; opacity: .6; }
  body.optical-site .approved-home .lp32-catch-point-fallback[data-user-play="true"] .node-glow { animation: lp32-node-glow 4s ease-in-out infinite !important; }
  body.optical-site .approved-home .lp32-catch-point-fallback[data-paused="true"] .node-glow { animation-play-state: paused !important; }
}

/* 1024 to 1279: give the heading room so "Not in delivery." stays on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.optical-site .approved-home .ah-value-text { grid-column: 1 / span 6; }
  body.optical-site .approved-home .ah-value-visual { grid-column: 7 / span 6; }
}

@media (max-width: 1023px) {
  body.optical-site .approved-home .ah-value-panel { padding: 32px 24px; }
  body.optical-site .approved-home .ah-value-head { display: block; }
  body.optical-site .approved-home .ah-value h2 { font-size: 36px; }
  body.optical-site .approved-home .ah-value-visual { margin-top: 32px; }
  body.optical-site .approved-home .lp32-catch-point-fallback { aspect-ratio: 4 / 5; }
  body.optical-site .approved-home .lp32-catch-point-fallback .node-glow { left: 50.1%; top: 50%; width: 10%; }
  body.optical-site .approved-home .ah-value-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  body.optical-site .approved-home .ah-value-card { padding: 24px; }
  body.optical-site .approved-home .ah-value-close { max-width: none; margin-top: 32px; }
}
@media (max-width: 480px) { body.optical-site .approved-home .ah-value h2 { font-size: 32px; } }

/* ---------- H-9 closing link row ---------- */
/* v7: one centered axis. Eyebrow box centered (it was a 34em box pinned left). Three buttons of one size in one row
   (one primary, two glass), then the two text links centered underneath. Phones: full-width stack. */
body.optical-site .approved-home .ah-statement > .ah-eyebrow { margin-left: auto; margin-right: auto; }
body.optical-site .approved-home .ah-statement .ah-statement-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 32px; }
body.optical-site .approved-home .ah-statement .ah-statement-actions > .button { box-sizing: border-box; min-height: 48px; margin: 0; padding: 13px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; font-weight: 650; line-height: 21px; border-radius: 14px; white-space: nowrap; }
body.optical-site .approved-home .ah-statement .ah-statement-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 32px; margin-top: 16px; }
body.optical-site .approved-home .ah-statement .ah-statement-links a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 767px) {
  body.optical-site .approved-home .ah-statement .ah-statement-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin-inline: auto; gap: 12px; }
  body.optical-site .approved-home .ah-statement .ah-statement-actions > .button { width: 100%; white-space: normal; text-align: center; }
  body.optical-site .approved-home .ah-statement .ah-statement-links { flex-direction: column; gap: 0; margin-top: 12px; }
}

/* ---------- /pricing polish (selectors carry main#main to outrank page-structure.css) ---------- */
/* Card labels align left with their text: 12 px label to text, 24 px between groups. */
body.optical-site main#main .acp-pricing .acp-offer-scope .disclosure-content h3 { text-align: left; margin: 24px 0 12px; }
body.optical-site main#main .acp-pricing .acp-offer-scope .disclosure-content h3:first-child { margin-top: 16px; }
/* "Clear terms before you buy." with its line directly underneath, on the grid edge. */
body.optical-site main#main .acp-decision-help div.acp-sectionhead { display: block; }
body.optical-site main#main .acp-decision-help .acp-sectionhead h2 { margin-bottom: 0; }
body.optical-site main#main .acp-decision-help .acp-sectionhead p { margin: 24px 0 0; text-align: left; }
/* "What each offer includes": 24 px heading to panel, 32 px panel to table. */
body.optical-site main#main #comparison-matrix div.matrix-intro h3 { margin-bottom: 24px; }
body.optical-site main#main #comparison-matrix div.matrix-intro { margin-bottom: 0; }
body.optical-site main#main #comparison-matrix div.matrix-desktop { margin-top: 32px; }
/* START HERE sits inside the Proposal Review column header; the five header names share one top line. */
body.optical-site main#main #comparison-matrix thead th { vertical-align: top !important; padding-top: 52px !important; position: relative; }
body.optical-site main#main #comparison-matrix thead th:first-child { padding-top: 69px !important; }
body.optical-site main#main #comparison-matrix th span.matrix-start-tab { position: absolute !important; top: 14px !important; bottom: auto !important; left: 50% !important; height: auto !important; margin: 0 !important; }
body.optical-site main#main #comparison-matrix thead th button.matrix-select { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; }

/* ---------- Contrast fixes (WCAG AA on the rendered page), existing site colors only ---------- */
/* Dark theme */
body.optical-site:not([data-appearance="light"]) .approved-home .ah-homehero .ah-eyebrow { color: #ffffff !important; -webkit-text-fill-color: #ffffff; }
body.optical-site:not([data-appearance="light"]) .approved-home .ah-value .ah-eyebrow { color: #e9fcff !important; -webkit-text-fill-color: #e9fcff; }
body.optical-site:not([data-appearance="light"]) main#main .acp-pricing-page .acp-eyebrow { color: #ffffff !important; -webkit-text-fill-color: #ffffff; }
body.optical-site:not([data-appearance="light"]) main#main .acp-pricing .acp-plan > h2 { background: none !important; -webkit-text-fill-color: #f6f9ff !important; color: #f6f9ff !important; }
body.optical-site main#main #comparison-matrix .matrix-start-tab { background: #0369a1 !important; color: #ffffff !important; }
body.optical-site .site-header .header-cta { color: #ffffff !important; opacity: 1 !important; }
/* Light theme */
body.optical-site[data-appearance="light"] .approved-home .ah-catch-labels { color: #40536f; }
body.optical-site[data-appearance="light"] .approved-home .ah-catch-labels .is-catch em { color: rgb(0, 88, 128); }
body.optical-site[data-appearance="light"] main .approved-home .ah-statement a:not(.button) { color: rgb(0, 88, 128) !important; }
/* v6 pricing contrast. Selectors checked against the live cascade on 18 Oct.
   v5 lost here: approved-commercial-pages.css colors the START HERE label with a two-ID rule,
   the light eyebrow rule is (1,5,2), and the check marks are gradient text with a transparent fill. */
/* START HERE card label: beats the (2,4,2) rule that kept the dark-theme color in light. */
body.optical-site[data-appearance="light"] main#main .acp-page #offers .acp-plan > .offer-priority-label { color: rgb(0, 72, 108) !important; -webkit-text-fill-color: rgb(0, 72, 108) !important; }
/* Pricing eyebrows (PRICING and the card numbers): beats the (1,5,2) light rule. */
body.optical-site[data-appearance="light"] main#main .acp-page.acp-pricing-page section .acp-eyebrow { color: rgb(0, 72, 108) !important; -webkit-text-fill-color: rgb(0, 72, 108) !important; }
/* Matrix check marks (table, mobile lists, legend): solid fill instead of the near-white gradient. */
body.optical-site[data-appearance="light"] main#main #comparison-matrix .matrix-yes { color: rgb(0, 72, 108) !important; -webkit-text-fill-color: rgb(0, 72, 108) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; }
/* Plan cards on phones, dark: deeper tint and softer top sheen so the hero glow behind the first card
   cannot wash out the plan name. Blur, border, ring and inset highlights are unchanged. */
@media (max-width: 767px) {
  body.optical-site:not([data-appearance="light"]) main#main .acp-page #offers .acp-plan {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 35%, rgba(255, 255, 255, 0.02) 70%, rgba(151, 188, 255, 0.10) 100%), rgba(12, 23, 46, 0.74) !important;
  }
}

/* Light theme glass for the value cards (the site restyles .ah-glass itself). */
body.optical-site[data-appearance="light"] .approved-home .ah-value-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62) 45%, rgba(112, 229, 255, 0.10)), rgba(234, 240, 251, 0.6);
  border-color: rgba(104, 125, 156, 0.45);
  box-shadow: inset 0 1px 0 #ffffff, 0 10px 24px -16px rgba(30, 59, 115, 0.26);
}

/* LP-32 motion · append to the end of web-complete-claude.css (v7). The frame, glass sheen, aspect ratios
   (16:9 at 1024 px and up, 4:5 below) and the Pause/Play pill already come from v7. */
body.optical-site .approved-home .lp32-catch-point-motion video { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; background: #060b19; }
body.optical-site .approved-home .lp32-catch-point-motion .node-glow { display: none; }