/* Examples and pricing: retain the approved Optical glass in inner surfaces.
   Colors are from the actually served website palette; content and actions are unchanged. */
@media screen and (forced-colors:none) {
  body.optical-site {
    --surface-refine-neutral:var(--opt-reading);
    --surface-refine-cyan:#80e6ff;
    --surface-refine-red:color-mix(in srgb,#9b1930 64%,var(--navy));
    --surface-refine-red-accent:#d184a3;
    --surface-refine-green:#15392f;
    --surface-refine-green-accent:#9ce3c5;
    --surface-refine-amber:var(--status-amber-base);
    --surface-refine-amber-accent:var(--status-amber-accent);
    --surface-refine-shadow-ink:#060a23;
  }
  body.optical-site[data-appearance="light"] {
    --surface-refine-neutral:#eaf0fb;
    --surface-refine-cyan:#0369a1;
    --surface-refine-red:#fff0f1;
    --surface-refine-red-accent:#9b1930;
    --surface-refine-green:#e7fbf3;
    --surface-refine-green-accent:#116345;
    --surface-refine-amber:var(--status-amber-base);
    --surface-refine-amber-accent:var(--status-amber-accent);
    --surface-refine-shadow-ink:#1e3b73;
  }

  body.optical-site main #proposal-review-example .launch-review :is(.launch-evidence,.launch-finding,.launch-correction),
  body.optical-site main #scope-change :is(.scope-timeline,.change-map>article,.change-map .small-grid article,.change-map .impact-summary,.change-map .impact-stable),
  body.optical-site main #comparison-matrix :is(.matrix-desktop,.matrix-offer,.matrix-intro>p),
  body.optical-site main #operating-boundaries .offer-terms>.section-note,
  body.optical-site main #plans>.container>.plans-intro {
    --surface-refine-base:var(--surface-refine-neutral);
    --surface-refine-accent:var(--surface-refine-cyan);
    --surface-refine-edge:var(--opt-edge);
    position:relative;
    border:1px solid transparent!important;
    border-radius:18px!important;
    background:linear-gradient(140deg,
      color-mix(in srgb,var(--surface-refine-base) var(--surface-refine-reflection-base,82%),#fff),
      var(--surface-refine-base) 32%,var(--surface-refine-base) 68%,
      color-mix(in srgb,var(--surface-refine-base) 91%,var(--surface-refine-accent))) padding-box,
      var(--surface-refine-edge) border-box!important;
    box-shadow:inset 1px 2px 2px #ffffff6b,
      inset -1px -2px 3px color-mix(in srgb,var(--surface-refine-accent) 22%,transparent),
      0 8px 20px -12px color-mix(in srgb,var(--surface-refine-shadow-ink) 75%,transparent),
      0 0 24px -16px color-mix(in srgb,var(--surface-refine-accent) 60%,transparent)!important;
    backdrop-filter:blur(18px) saturate(145%);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
  }
  /* Preserve the timeline figure geometry and every animated child. */
  body.optical-site main #scope-change .scope-timeline { border-radius:24px!important; }
  /* A top reflection replaces the former vertical evidence/finding rails. */
  body.optical-site main #proposal-review-example .launch-review :is(.launch-evidence,.launch-finding,.launch-correction)::before,
  body.optical-site main #scope-change :is(.scope-timeline,.change-map>article,.change-map .small-grid article,.change-map .impact-summary,.change-map .impact-stable)::before,
  body.optical-site main #comparison-matrix :is(.matrix-desktop,.matrix-offer,.matrix-intro>p)::before,
  body.optical-site main #operating-boundaries .offer-terms>.section-note::before,
  body.optical-site main #plans>.container>.plans-intro::before {
    content:""; position:absolute; inset:auto; top:0; left:18px; right:24px;
    width:auto; height:2px; border-radius:50%; pointer-events:none;
    background:linear-gradient(90deg,transparent,#fff 20%,var(--surface-refine-accent) 48%,transparent 84%);
    box-shadow:0 1px 10px -1px color-mix(in srgb,var(--surface-refine-accent) 60%,transparent);
    padding:0; mask:none; -webkit-mask:none;
  }
  body.optical-site main #proposal-review-example .launch-review .launch-finding {
    --surface-refine-base:var(--surface-refine-red);
    --surface-refine-accent:var(--surface-refine-red-accent);
    --surface-refine-edge:linear-gradient(125deg,#fff,var(--surface-refine-red-accent) 26%,#d184a380 56%,var(--surface-refine-red-accent) 88%,#fff);
  }
  body.optical-site main #proposal-review-example .launch-review .launch-correction,
  body.optical-site main #scope-change .change-map .impact-tiles .impact-stable {
    --surface-refine-base:var(--surface-refine-green);
    --surface-refine-accent:var(--surface-refine-green-accent);
    --surface-refine-edge:linear-gradient(125deg,#fff,var(--surface-refine-green-accent) 26%,#70b8a080 56%,var(--surface-refine-green-accent) 88%,#fff);
  }
  /* Risk and unconfirmed change retain amber; only the actual finding is red. */
  body.optical-site main #scope-change :is(.change-map>article,.change-map .small-grid article:not(.impact-decision)) {
    --surface-refine-base:var(--surface-refine-amber);
    --surface-refine-accent:var(--surface-refine-amber-accent);
    --surface-refine-reflection-base:90%;
    --surface-refine-edge:linear-gradient(125deg,#fff,var(--surface-refine-amber-accent) 26%,var(--status-amber-mid-edge) 56%,var(--surface-refine-amber-accent) 88%,#fff);
  }
  body.optical-site main #proposal-review-example .launch-review :is(.launch-finding,.launch-correction) :is(h4,p),
  body.optical-site main #scope-change .change-map :is(.impact-summary,.small-grid article)>:is(h4,strong,p,ul,li) {
    color:var(--opt-ink)!important;
  }
  body.optical-site main #proposal-review-example .launch-review .launch-correction h4,
  body.optical-site main #scope-change .change-map .impact-stable span { color:var(--surface-refine-green-accent)!important; }
  body.optical-site main #scope-change .change-map .small-grid article:not(.impact-decision) span { color:var(--surface-refine-amber-accent)!important; }
  body.optical-site main #scope-change .change-map .small-grid article.impact-decision span { color:var(--opt-muted)!important; }
  body.optical-site main #proposal-review-example .launch-review .launch-evidence blockquote {
    background:transparent!important; border:0!important; box-shadow:none!important;
    color:var(--opt-ink)!important;
  }

  /* Keep the table dense and quiet; the existing Proposal Review column frame stays intact. */
  body.optical-site main #comparison-matrix .matrix-desktop table { border-radius:inherit; }
  body.optical-site main #comparison-matrix .matrix-desktop :is(thead th,.matrix-group th),
  body.optical-site main #comparison-matrix .matrix-offer :is(header,.matrix-group-header) {
    background:linear-gradient(135deg,#ffffff12,transparent 65%),var(--surface-refine-neutral)!important;
    box-shadow:inset 0 1px 1px #ffffff40;
  }
  body.optical-site main #comparison-matrix .matrix-desktop tbody tr:not(.matrix-group):nth-child(odd),
  body.optical-site main #comparison-matrix .matrix-offer li:nth-child(odd) {
    background:color-mix(in srgb,var(--surface-refine-neutral) 94%,#fff)!important;
  }
  body.optical-site main #comparison-matrix .matrix-desktop tbody tr:not(.matrix-group):nth-child(even),
  body.optical-site main #comparison-matrix .matrix-offer li:nth-child(even) {
    background:var(--surface-refine-neutral)!important;
  }
  body.optical-site main #comparison-matrix :is(.matrix-desktop tfoot,.matrix-offer footer) {
    background:linear-gradient(135deg,#ffffff0d,transparent 70%),var(--surface-refine-neutral)!important;
  }
  body.optical-site main #comparison-matrix .matrix-desktop thead th:first-child { border-top-left-radius:17px; }
  body.optical-site main #comparison-matrix .matrix-desktop thead th:last-child { border-top-right-radius:17px; }
  body.optical-site main #comparison-matrix .matrix-desktop tfoot th:first-child { border-bottom-left-radius:17px; }
  body.optical-site main #comparison-matrix .matrix-desktop tfoot td:last-child { border-bottom-right-radius:17px; }
  body.optical-site main #comparison-matrix .matrix-offer { overflow:visible; }
  body.optical-site main #comparison-matrix .matrix-offer header { border-radius:17px 17px 0 0; }
  body.optical-site main #comparison-matrix .matrix-offer footer { border-radius:0 0 17px 17px; }
  body.optical-site main #comparison-matrix .matrix-offer.matrix-emphasized {
    --surface-refine-edge:linear-gradient(125deg,#fff,#80e6ff 26%,var(--blue) 60%,#80e6ff);
    border-top-width:3px!important;
  }
  body.optical-site main #comparison-matrix .matrix-desktop thead th.matrix-emphasized {
    background:linear-gradient(135deg,#0369a14d,transparent 75%),var(--surface-refine-neutral)!important;
  }
  body.optical-site[data-appearance="light"] main #comparison-matrix .matrix-desktop thead th.matrix-emphasized {
    background:linear-gradient(135deg,#0369a11a,transparent 75%),var(--surface-refine-neutral)!important;
  }
  /* Legacy captions use white surface ink; keep prices readable on light glass. */
  body.optical-site[data-appearance="light"] main #comparison-matrix .matrix-desktop thead span:not(.matrix-start-tab),
  body.optical-site[data-appearance="light"] main #comparison-matrix .matrix-offer header p {
    color:var(--opt-muted)!important;
  }
}
@media screen and (prefers-reduced-transparency:reduce) and (forced-colors:none) {
  body.optical-site main #proposal-review-example .launch-review :is(.launch-evidence,.launch-finding,.launch-correction),
  body.optical-site main #scope-change :is(.scope-timeline,.change-map>article,.change-map .small-grid article,.change-map .impact-summary,.change-map .impact-stable),
  body.optical-site main #comparison-matrix :is(.matrix-desktop,.matrix-offer,.matrix-intro>p),
  body.optical-site main #operating-boundaries .offer-terms>.section-note,
  body.optical-site main #plans>.container>.plans-intro {
    background:var(--surface-refine-base)!important;
    border-color:var(--surface-refine-accent)!important;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}
/* Pricing disclosures span their card; the next action has its own breathing room. */
body.optical-site main .pricing-card>.offer-scope {
  align-self:stretch; width:100%; min-width:0; margin:auto 0 20px;
}
body.optical-site main .pricing-card>.offer-scope>summary {
  width:100%; min-height:48px;
}
body.optical-site main .pricing-card>.offer-scope>summary::after {
  margin-inline-start:auto;
}
body.optical-site main .pricing-card>.offer-action { margin-top:0!important; }

/* Extend the existing inner-surface material only to uncovered evidence steps,
   reading quotes and related-work tabs. Existing outer glass stays unchanged. */
@media screen and (forced-colors:none) {
  body.optical-site main#main :is(.demo-stepbar>li,.related-tabs>button),
  body.optical-site main#main :is(.demo-panel,.panel,.document-body)>blockquote,
  body.optical-site main#main.document-page blockquote {
    --inner-base:var(--surface-refine-neutral);
    --inner-accent:var(--surface-refine-cyan);
    --inner-ink:var(--opt-ink);
    border:1px solid transparent!important;
    border-radius:12px!important;
    color:var(--inner-ink)!important;
    background:linear-gradient(140deg,
      color-mix(in srgb,var(--inner-base) 92%,#fff),
      var(--inner-base) 34%,var(--inner-base) 74%,
      color-mix(in srgb,var(--inner-base) 96%,var(--inner-accent))) padding-box,
      linear-gradient(135deg,#ffffff70,
        color-mix(in srgb,var(--inner-accent) 32%,transparent) 38%,
        color-mix(in srgb,var(--inner-accent) 14%,transparent) 72%,#ffffff38) border-box!important;
    box-shadow:inset 0 1px 1px #ffffff38,
      inset 0 -1px 1px color-mix(in srgb,var(--inner-accent) 12%,transparent),
      0 5px 12px -10px color-mix(in srgb,var(--surface-refine-shadow-ink) 65%,transparent)!important;
    /* Painted reflections avoid added nested backdrop blur and animation. */
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  /* A complete fine rim replaces the legacy cyan quote rail. */
  body.optical-site main#main :is(.demo-panel,.panel,.document-body)>blockquote,
  body.optical-site main#main.document-page blockquote { border-left-width:1px!important; }
  body.optical-site main#main .demo-stepbar>li { border-radius:10px!important; }
  body.optical-site main#main :is(.demo-stepbar>li[aria-current="step"],.related-tabs>button[aria-selected="true"]) {
    --inner-base:var(--blue);
    --inner-accent:#80e6ff;
    --inner-ink:#fff;
    border-color:color-mix(in srgb,var(--inner-accent) 65%,transparent)!important;
    box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 1px #0c23404d,
      0 5px 12px -10px color-mix(in srgb,var(--surface-refine-shadow-ink) 65%,transparent)!important;
  }
  body.optical-site main#main .related-tabs>button:focus-visible {
    outline:3px solid var(--surface-refine-cyan)!important; outline-offset:3px;
  }
}
@media screen and (prefers-reduced-transparency:reduce) and (forced-colors:none) {
  body.optical-site main#main :is(.demo-stepbar>li,.related-tabs>button),
  body.optical-site main#main :is(.demo-panel,.panel,.document-body)>blockquote,
  body.optical-site main#main.document-page blockquote {
    background:var(--inner-base)!important; border-color:var(--inner-accent)!important;
    box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  }
  body.optical-site main#main :is(.demo-stepbar>li[aria-current="step"],.related-tabs>button[aria-selected="true"]) {
    background:var(--blue)!important; color:#fff!important;
    border-color:var(--blue)!important; box-shadow:none!important;
  }
}
@media screen and (forced-colors:active) {
  body.optical-site main#main :is(.demo-stepbar>li,.related-tabs>button),
  body.optical-site main#main :is(.demo-panel,.panel,.document-body)>blockquote,
  body.optical-site main#main.document-page blockquote,
  body.optical-site[data-appearance="light"] main#main :is(.demo-stepbar>li,.related-tabs>button),
  body.optical-site[data-appearance="light"] main#main :is(.demo-panel,.panel,.document-body)>blockquote,
  body.optical-site[data-appearance="light"] main#main.document-page blockquote {
    forced-color-adjust:auto; color:CanvasText!important; background:Canvas!important;
    border:1px solid CanvasText!important; box-shadow:none!important;
    backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  }
  body.optical-site main#main :is(.demo-stepbar>li[aria-current="step"],.related-tabs>button[aria-selected="true"]),
  body.optical-site[data-appearance="light"] main#main :is(.demo-stepbar>li[aria-current="step"],.related-tabs>button[aria-selected="true"]) {
    color:HighlightText!important; background:Highlight!important;
    border-color:Highlight!important; box-shadow:none!important;
  }
  body.optical-site main#main .related-tabs>button:focus-visible {
    outline:3px solid Highlight!important; outline-offset:3px;
  }
}

/* Shared table/card glass: one continuous reading surface, not a blur on each cell. */
@media screen and (forced-colors:none) {
 body.optical-site main#main #comparison-matrix :is(.matrix-desktop,.matrix-offer) {
  background:linear-gradient(125deg,color-mix(in srgb,var(--surface-refine-neutral) 76%,var(--surface)),var(--surface-refine-neutral) 32%,color-mix(in srgb,var(--surface-refine-neutral) 92%,var(--surface-refine-cyan)) 76%,color-mix(in srgb,var(--surface-refine-neutral) 86%,var(--surface))) padding-box,var(--surface-refine-edge) border-box!important;
  box-shadow:inset 1px 2px 2px color-mix(in srgb,var(--surface) 48%,transparent),inset -1px -2px 3px color-mix(in srgb,var(--surface-refine-cyan) 24%,transparent),0 16px 36px -22px color-mix(in srgb,var(--surface-refine-shadow-ink) 80%,transparent)!important;
  backdrop-filter:none;-webkit-backdrop-filter:none;
 }
 body.optical-site main#main #comparison-matrix .matrix-desktop :is(table,tbody,tfoot),
 body.optical-site main#main #comparison-matrix .matrix-offer :is(section,footer) {background:transparent!important;}
 body.optical-site main#main #comparison-matrix .matrix-desktop tbody tr:not(.matrix-group):nth-child(odd),
 body.optical-site main#main #comparison-matrix .matrix-offer li:nth-child(odd) {background:color-mix(in srgb,var(--opt-ink) 4%,transparent)!important;}
 body.optical-site main#main #comparison-matrix .matrix-desktop tbody tr:not(.matrix-group):nth-child(even),
 body.optical-site main#main #comparison-matrix .matrix-offer li:nth-child(even) {background:transparent!important;}
 body.optical-site main#main #comparison-matrix .matrix-desktop :is(thead th,.matrix-group th),
 body.optical-site main#main #comparison-matrix .matrix-offer :is(header,.matrix-group-header) {
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 10%,transparent),transparent 64%),color-mix(in srgb,var(--surface-refine-neutral) 35%,transparent)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 28%,transparent);
  border-top-color:color-mix(in srgb,var(--surface-refine-neutral) 55%,transparent);
 }
 body.optical-site main#main #comparison-matrix .matrix-desktop thead th.matrix-emphasized,
 body.optical-site main#main #comparison-matrix .matrix-offer.matrix-emphasized>header {
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface-refine-cyan) 16%,transparent),transparent 75%),color-mix(in srgb,var(--surface-refine-neutral) 45%,transparent)!important;
  border-top-color:var(--surface-refine-cyan);
 }
 body.optical-site main#main #comparison-matrix .matrix-desktop :is(th,td),
 body.optical-site main#main #comparison-matrix .matrix-offer :is(li,.matrix-terms dd) {border-bottom-color:color-mix(in srgb,var(--opt-ink) 16%,transparent);}
}
@media screen and (prefers-reduced-transparency:reduce) and (forced-colors:none) {
 body.optical-site main#main #comparison-matrix :is(.matrix-desktop,.matrix-offer) {background:var(--surface-refine-neutral)!important;}
}

/* Group bands make each comparison section distinct without extra backdrop layers. */
@media screen and (forced-colors:none) {
 body.optical-site main#main #comparison-matrix .matrix-desktop .matrix-group th,
 body.optical-site main#main #comparison-matrix .matrix-offer .matrix-group-header,
 body.optical-site main#main #comparison-matrix .matrix-desktop thead th:first-child {
  background:linear-gradient(125deg,color-mix(in srgb,var(--surface) 18%,transparent),transparent 44%),linear-gradient(100deg,color-mix(in srgb,var(--surface-refine-neutral) 78%,var(--surface-refine-cyan)),color-mix(in srgb,var(--surface-refine-neutral) 91%,var(--surface-refine-cyan)))!important;
  color:var(--opt-ink)!important;font-weight:800;line-height:1.45;
  border-top:1px solid color-mix(in srgb,var(--surface-refine-cyan) 48%,var(--surface-refine-neutral));
  border-bottom:1px solid color-mix(in srgb,var(--surface-refine-cyan) 42%,var(--surface-refine-neutral));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 44%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--surface-refine-shadow-ink) 30%,transparent);
 }
 body.optical-site main#main #comparison-matrix .matrix-desktop .matrix-group th {padding:20px 24px;font-size:14px;letter-spacing:.08em;}
 body.optical-site main#main #comparison-matrix .matrix-desktop thead th:first-child {padding:24px;font-size:18px;}
 body.optical-site main#main #comparison-matrix .matrix-offer .matrix-group-header {padding:18px 20px;font-size:13px;letter-spacing:.07em;}
 /* Emphasize the operating boundary with the existing neutral/cyan glass material. */
 body.optical-site main#main #operating-boundaries .offer-terms>.section-note {
  max-width:none;width:100%;padding:clamp(22px,3vw,36px);margin-top:32px;font-size:17px;line-height:1.7;text-wrap:balance;
  background:linear-gradient(125deg,color-mix(in srgb,var(--surface-refine-neutral) 78%,var(--surface)),var(--surface-refine-neutral) 38%,color-mix(in srgb,var(--surface-refine-neutral) 91%,var(--surface-refine-cyan))) padding-box,var(--opt-edge) border-box!important;
  box-shadow:inset 1px 2px 2px color-mix(in srgb,var(--surface) 58%,transparent),inset -1px -2px 3px color-mix(in srgb,var(--surface-refine-cyan) 28%,transparent),0 18px 38px -22px color-mix(in srgb,var(--surface-refine-shadow-ink) 90%,transparent)!important;
  backdrop-filter:none;-webkit-backdrop-filter:none;
 }
}
body.optical-site main#main :is(#operating-boundaries,#pricing-access) .boundary-keep {white-space:nowrap;color:inherit;}
@media screen and (prefers-reduced-transparency:reduce) and (forced-colors:none) {
 body.optical-site main#main #comparison-matrix .matrix-desktop .matrix-group th,
 body.optical-site main#main #comparison-matrix .matrix-offer .matrix-group-header,
 body.optical-site main#main #comparison-matrix .matrix-desktop thead th:first-child {background:color-mix(in srgb,var(--surface-refine-neutral) 86%,var(--surface-refine-cyan))!important;}
 body.optical-site main#main #operating-boundaries .offer-terms>.section-note {background:var(--surface-refine-neutral)!important;}
}
