/* Local interaction prototypes. They reuse the landing's existing colors and type. */

body[data-proposal="editorial"] main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card),
body[data-proposal="uso"] main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card),
body[data-proposal="decision"] main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card) {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
body[data-proposal="editorial"] main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card):hover,
body[data-proposal="uso"] main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card):hover,
body[data-proposal="decision"] main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card):hover { filter: brightness(1.08); }
body[data-proposal="editorial"] main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card):active,
body[data-proposal="uso"] main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card):active,
body[data-proposal="decision"] main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card):active { transform: translateY(1px) scale(.99); }
body[data-proposal="editorial"] main > section:not(.hero) :is(a,button,input,textarea,select,summary):focus-visible,
body[data-proposal="uso"] main > section:not(.hero) :is(a,button,input,textarea,select,summary):focus-visible,
body[data-proposal="decision"] main > section:not(.hero) :is(a,button,input,textarea,select,summary):focus-visible { outline: 3px solid var(--purple-light); outline-offset: 3px; }

/* All three proposals retain the base layout, palette, copy and section order. */
body[data-proposal="editorial"] .proposal-tab-enter { animation: proposal-tab-fluid .38s cubic-bezier(.2,.75,.25,1) both; }
body[data-proposal="uso"] .proposal-tab-enter { animation: proposal-content-step .48s cubic-bezier(.2,.75,.25,1) both; }
body[data-proposal="decision"] .proposal-tab-enter { animation: proposal-selection-feedback .4s ease both; }
@keyframes proposal-tab-fluid { from { opacity: .35; transform: translateY(9px) scale(.99); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes proposal-content-step { from { opacity: .25; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes proposal-selection-feedback { 0% { opacity: .55; transform: scale(.985); } 75% { opacity: 1; transform: scale(1.006); } 100% { transform: scale(1); } }
body[data-proposal="uso"] .experience-selector { position: sticky; z-index: 8; top: 150px; align-self: start; }
body[data-proposal="uso"] .experience-panel[aria-live="polite"] { scroll-margin-top: 165px; }
body[data-proposal="uso"] .experience-copy { transition: opacity .28s ease, transform .28s ease; }
body[data-proposal="uso"] .real-module.proposal-tab-enter,
body[data-proposal="uso"] .real-tour-detail.proposal-tab-enter { animation-duration: .42s; }
body[data-proposal="decision"] .experience-selector button.active,
body[data-proposal="decision"] .module-tab.active,
body[data-proposal="decision"] .product-plan-tab.active,
body[data-proposal="decision"] .gallery-tabs button.active,
body[data-proposal="decision"] .real-tour-tabs button.active { box-shadow: 0 0 0 2px var(--purple-light); }
body[data-proposal="decision"] .plan-card.selected { box-shadow: 0 0 0 3px var(--purple-light), var(--shadow); }
body[data-proposal="decision"] .experience-selector button,
body[data-proposal="decision"] .plan-card { min-height: 54px; }

/* Scroll reveals apply only to this local preview and never hide content. */
body[data-proposal="editorial"] main > section:not(.hero).proposal-in-view,
body[data-proposal="uso"] main > section:not(.hero).proposal-in-view,
body[data-proposal="decision"] main > section:not(.hero).proposal-in-view { animation: proposal-reveal .58s cubic-bezier(.2,.75,.25,1) both; }
@keyframes proposal-reveal { from { opacity: .62; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* FAQ details stay native and keyboard operable, with a clearer open state. */
body[data-proposal="editorial"] .faq summary,
body[data-proposal="uso"] .faq summary,
body[data-proposal="decision"] .faq summary { transition: padding .2s ease, color .2s ease; }
body[data-proposal="editorial"] .faq summary:hover,
body[data-proposal="uso"] .faq summary:hover,
body[data-proposal="decision"] .faq summary:hover { padding-left: 8px; }
body[data-proposal="editorial"] .faq details[open] summary,
body[data-proposal="uso"] .faq details[open] summary,
body[data-proposal="decision"] .faq details[open] summary { color: var(--purple-light); }
body[data-proposal="editorial"] .faq details[open] p,
body[data-proposal="uso"] .faq details[open] p,
body[data-proposal="decision"] .faq details[open] p { animation: proposal-faq-open .28s ease both; }
@keyframes proposal-faq-open { from { opacity: .35; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* Decision preview exposes the existing product panels side by side on request. */
.proposal-compare-button { margin-top: 14px; }
.proposal-comparison-open .experience-selector { display: grid !important; }
.proposal-comparison-open .experience-selector button[hidden] { display: flex !important; }
.proposal-comparison-open .experience-panel[hidden] { display: grid !important; }
.product-portal.proposal-comparison-open .experience-panel { display: grid !important; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; margin-top: 16px; }
.product-portal.proposal-comparison-open .experience-copy { position: static !important; }
.product-portal.proposal-comparison-open .experience-panel .product-gallery { min-width: 0; }
.proposal-comparison-open .experience-selector button.active { box-shadow: 0 0 0 2px var(--purple-light); }
.proposal-compare-button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--purple-light); }
@media(max-width:1050px) {
  body[data-proposal="uso"] .experience-selector { position: static; }
  .product-portal.proposal-comparison-open .experience-panel { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:760px) {
  .proposal-comparison-open .experience-selector { grid-template-columns: minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  body[data-proposal]:not([data-proposal="actual"]) main > section:not(.hero) :is(a,button,.module-tab,.gallery-tabs button,.plan-card,.proposal-tab-enter,.proposal-in-view,.faq summary,.capture-open img) { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Wide screens: improve readability below the hero without changing its layout. */
@media (min-width:1440px) {
  body[data-proposal]:not([data-proposal="actual"]) main > section:not(.hero) :is(p,li) {
    font-size:clamp(15px,.84vw,17px);
    line-height:1.7;
  }
  body[data-proposal]:not([data-proposal="actual"]) main > section:not(.hero) :is(small,.eyebrow) { font-size:12px; }
  body[data-proposal]:not([data-proposal="actual"]) main > section:not(.hero) button { font-size:14px; }
  body[data-proposal]:not([data-proposal="actual"]) main > section:not(.hero) .section-heading { gap:48px; margin-bottom:40px; }
  body[data-proposal]:not([data-proposal="actual"]) main > section:not(.hero) .section-heading h2 { font-size:clamp(48px,3vw,58px); }
  body[data-proposal]:not([data-proposal="actual"]) main > section:not(.hero) .section-heading>p { max-width:470px; }

  body[data-proposal]:not([data-proposal="actual"]) .proof-strip article:first-child strong { font-size:24px; }
  body[data-proposal]:not([data-proposal="actual"]) .proof-strip article:first-child span,
  body[data-proposal]:not([data-proposal="actual"]) .proof-strip article:not(:first-child) span { font-size:12px; }
  body[data-proposal]:not([data-proposal="actual"]) .proof-strip article:not(:first-child) strong { font-size:16px; }

  body[data-proposal]:not([data-proposal="actual"]) .experience-selector strong,
  body[data-proposal]:not([data-proposal="actual"]) .module-tab strong,
  body[data-proposal]:not([data-proposal="actual"]) .product-plan-tab strong { font-size:15px; }
  body[data-proposal]:not([data-proposal="actual"]) .experience-selector small,
  body[data-proposal]:not([data-proposal="actual"]) .module-tab small,
  body[data-proposal]:not([data-proposal="actual"]) .product-plan-tab small { font-size:12px; }
  body[data-proposal]:not([data-proposal="actual"]) .experience-feature-label { font-size:13px; }
  body[data-proposal]:not([data-proposal="actual"]) .experience-copy>p,
  body[data-proposal]:not([data-proposal="actual"]) .product-gallery .gallery-description { font-size:16px; line-height:1.7; }
  body[data-proposal]:not([data-proposal="actual"]) .experience-copy li { font-size:15px; }
  body[data-proposal]:not([data-proposal="actual"]) .experience-carousel-controls button,
  body[data-proposal]:not([data-proposal="actual"]) .gallery-tabs button,
  body[data-proposal]:not([data-proposal="actual"]) .capture-enlarge { font-size:14px; }
  body[data-proposal]:not([data-proposal="actual"]) .experience-carousel-controls #experience-position { font-size:13px; }
  body[data-proposal]:not([data-proposal="actual"]) .capture-proof,
  body[data-proposal]:not([data-proposal="actual"]) .capture-source { font-size:11px; }

  body[data-proposal]:not([data-proposal="actual"]) .real-module-heading h3 { font-size:clamp(26px,1.6vw,31px); }
  body[data-proposal]:not([data-proposal="actual"]) .real-module-heading small { font-size:11px; }
  body[data-proposal]:not([data-proposal="actual"]) .real-module-heading p { font-size:16px; line-height:1.65; }
  body[data-proposal]:not([data-proposal="actual"]) .module-carousel-controls button { font-size:13px; }
  body[data-proposal]:not([data-proposal="actual"]) .module-carousel-controls #module-position { font-size:12px; }
  body[data-proposal]:not([data-proposal="actual"]) .module-tools li,
  body[data-proposal]:not([data-proposal="actual"]) .module-boundary { font-size:15px; line-height:1.65; }

  body[data-proposal]:not([data-proposal="actual"]) .real-tour-tabs button { font-size:14px; }
  body[data-proposal]:not([data-proposal="actual"]) .real-tour-detail h3 { font-size:30px; }
  body[data-proposal]:not([data-proposal="actual"]) .real-tour-detail>div>p,
  body[data-proposal]:not([data-proposal="actual"]) .real-tour-steps p,
  body[data-proposal]:not([data-proposal="actual"]) .real-tour-detail .tour-boundary { font-size:15px; line-height:1.7; }
  body[data-proposal]:not([data-proposal="actual"]) .real-tour-steps strong { font-size:16px; }

  body[data-proposal]:not([data-proposal="actual"]) #product-downloads :is(p,li,small),
  body[data-proposal]:not([data-proposal="actual"]) #platform-downloads :is(p,li,small) { font-size:14px; line-height:1.65; }
  body[data-proposal]:not([data-proposal="actual"]) #product-downloads h3,
  body[data-proposal]:not([data-proposal="actual"]) #platform-downloads h3 { font-size:21px; }
  body[data-proposal]:not([data-proposal="actual"]) .download-explanation,
  body[data-proposal]:not([data-proposal="actual"]) .download-security { font-size:14px; }

  body[data-proposal]:not([data-proposal="actual"]) .plan-assurances span { font-size:12px; }
  body[data-proposal]:not([data-proposal="actual"]) .pricing-configurator label,
  body[data-proposal]:not([data-proposal="actual"]) .plans-section>.plan-note { font-size:15px; }
  body[data-proposal]:not([data-proposal="actual"]) .pricing-configurator :is(input,select) { font-size:16px; }
  body[data-proposal]:not([data-proposal="actual"]) .plan-card .plan-topline { font-size:11px; }
  body[data-proposal]:not([data-proposal="actual"]) .plan-card>small,
  body[data-proposal]:not([data-proposal="actual"]) .plan-card li { font-size:15px; line-height:1.6; }
  body[data-proposal]:not([data-proposal="actual"]) .plan-card .plan-footer em { font-size:13px; }
  body[data-proposal]:not([data-proposal="actual"]) .price-comparison-heading strong { font-size:20px; }
  body[data-proposal]:not([data-proposal="actual"]) .price-comparison-heading p,
  body[data-proposal]:not([data-proposal="actual"]) .comparison-caption { font-size:14px; }
  body[data-proposal]:not([data-proposal="actual"]) .price-comparison { font-size:15px; }
  body[data-proposal]:not([data-proposal="actual"]) .price-comparison th { font-size:13px; }

  body[data-proposal]:not([data-proposal="actual"]) .purchase-wizard { margin-top:65px; }
  body[data-proposal]:not([data-proposal="actual"]) .purchase-wizard>header h2 { font-size:30px; }
  body[data-proposal]:not([data-proposal="actual"]) .purchase-wizard>header p,
  body[data-proposal]:not([data-proposal="actual"]) .purchase-wizard label,
  body[data-proposal]:not([data-proposal="actual"]) .panel-heading>p { font-size:15px; line-height:1.65; }
  body[data-proposal]:not([data-proposal="actual"]) .purchase-wizard input,
  body[data-proposal]:not([data-proposal="actual"]) .purchase-wizard textarea,
  body[data-proposal]:not([data-proposal="actual"]) .purchase-wizard select { font-size:16px; }
  body[data-proposal]:not([data-proposal="actual"]) .purchase-steps li { font-size:13px; }
  body[data-proposal]:not([data-proposal="actual"]) .invoice-note :is(strong,small) { font-size:13px; }
  body[data-proposal]:not([data-proposal="actual"]) .wizard-actions button { font-size:14px; }

  body[data-proposal]:not([data-proposal="actual"]) .status-intro>p,
  body[data-proposal]:not([data-proposal="actual"]) .status-panel label { font-size:15px; line-height:1.7; }
  body[data-proposal]:not([data-proposal="actual"]) .faq { margin-top:115px; }
  body[data-proposal]:not([data-proposal="actual"]) .faq summary { font-size:16px; }
  body[data-proposal]:not([data-proposal="actual"]) .faq p { font-size:16px; }
}