/* Roles use the existing Lidra page's colors, type and corner vocabulary. */
:root {
  --page: #fafafa;
  --surface: #fff;
  --surface-soft: #eff0f3;
  --ink: #1d1d1f;
  --ink-secondary: #626269;
  --ink-muted: #6e6e73;
  --ink-inverse: #fff;
  --button: #202023;
  --button-hover: #424249;
  --line: #dfe1e6;
  --focus: #0071e3;
  --glass: #fafafae8;
  --radius-card: 28px;
  --radius-control: 24px;
  --radius-tile: 14px;
  --space-compact: 12px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-section: 96px;
  --type-meta: .875rem;
  --type-body: 1rem;
  --type-copy: 1.25rem;
  --type-title: 1.5rem;
  --type-price: 4rem;
  --motion-swap: 200ms;
  --motion-curve: cubic-bezier(.22, 1, .36, 1);
  --heading-gradient: linear-gradient(110deg, #33383f 10%, #7d8b9c 55%, #4e5663 90%);
}
.product-nav .brand { flex-shrink: 0; }
.product-nav nav { gap: var(--space-md); }
.product-nav nav a { display: inline-flex; align-items: center; min-height: 44px; }
.product-nav nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.product-nav nav .small-button { padding-block: 0; border-radius: var(--radius-control); }
.product-nav nav .nav-price { color: var(--ink-inverse); }
.veil-hero { padding-bottom: var(--space-xl); }
.veil-hero h1 span { background-image: var(--heading-gradient); }
.veil-hero .hero-copy { max-width: 36rem; padding-inline: var(--space-xs); }
.veil-hero .hero-actions { flex-wrap: nowrap; }
.veil-hero .button, .veil-demo-toggle { min-height: 48px; border-radius: var(--radius-control); }
.veil-hero .text-button { min-height: 48px; }
.veil-demo { max-width: 1000px; margin: var(--space-xl) auto 0; }
.veil-scene { display: grid; overflow: clip; border-radius: var(--radius-card); background: var(--surface-soft); }
.veil-scene-image { grid-area: 1 / 1; display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; }
.veil-scene-away { opacity: 0; }
.veil-scene.is-away .veil-scene-away { opacity: 1; }
.veil-moments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-sm); text-align: left; }
.veil-moment { display: flex; align-items: flex-start; gap: var(--space-compact); padding: var(--space-sm); border: 0; border-radius: var(--radius-tile); background: transparent; color: var(--ink-secondary); text-align: left; font: inherit; cursor: pointer; }
.veil-moment[aria-pressed="true"] { background: var(--surface-soft); color: var(--ink); }
.veil-moment-number { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink-secondary); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }
.veil-moment[aria-pressed="true"] .veil-moment-number { background: var(--button); color: var(--ink-inverse); }
.veil-moment strong { display: block; margin-bottom: var(--space-xs); font-size: var(--type-body); font-weight: 600; line-height: 1.5; }
.veil-moment strong + span { display: block; color: var(--ink-secondary); font-size: var(--type-meta); line-height: 1.5; }
.veil-demo-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-md); text-align: left; }
.veil-demo-caption p { margin: 0; color: var(--ink-secondary); font-size: var(--type-meta); line-height: 1.5; }
.veil-demo-toggle { background: var(--button); color: var(--ink-inverse); border: 0; padding: 0 var(--space-md); font-size: var(--type-body); font-weight: 500; flex-shrink: 0; }
.veil-demo-toggle span { margin-inline-start: var(--space-xs); font-size: var(--type-meta); }
.veil-settings { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-xl); }
.veil-settings-copy > p:not(.eyebrow) { max-width: 28rem; font-size: var(--type-copy); line-height: 1.6; color: var(--ink-secondary); margin: var(--space-md) 0 0; text-wrap: pretty; }
.veil-settings-window { margin: 0; }
.veil-settings-window img { display: block; width: 100%; height: auto; }
.veil-settings-window figcaption { margin-top: var(--space-sm); text-align: center; color: var(--ink-muted); font-size: var(--type-meta); line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.veil-privacy { background: var(--surface); }
.veil-privacy-inner { max-width: 1060px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.veil-privacy p { font-size: var(--type-copy); color: var(--ink-secondary); line-height: 1.6; margin: var(--space-md) 0 0; max-width: 28rem; text-wrap: pretty; }
.veil-privacy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.veil-privacy li { color: var(--ink-secondary); font-size: var(--type-body); line-height: 1.6; }
.veil-privacy li strong { color: var(--ink); font-size: var(--type-title); font-weight: 600; display: block; margin-bottom: var(--space-xs); letter-spacing: -.025em; }
.product-pricing { max-width: 1120px; margin: auto; text-align: center; }
.product-pricing > p { color: var(--ink-secondary); font-size: var(--type-copy); line-height: 1.5; margin: var(--space-md) 0 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); text-align: left; }
.product-card { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--surface-soft); color: var(--ink); display: flex; flex-direction: column; min-width: 0; }
.product-card.is-bundle { background: var(--button); color: var(--ink-inverse); }
.product-card-icons { display: flex; align-items: center; gap: var(--space-xs); min-height: 64px; margin-bottom: var(--space-md); }
.product-card-icons img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-tile); }
.product-card h3 { font-size: var(--type-title); font-weight: 600; margin: 0; letter-spacing: -.03em; }
.product-card .offer { color: inherit; font-size: var(--type-meta); font-weight: 500; min-height: 1.5em; margin: var(--space-xs) 0 0; }
.product-card .product-price { display: flex; gap: var(--space-xs); align-items: baseline; margin: var(--space-sm) 0 0; }
.product-price strong { font-size: var(--type-price); font-weight: 600; letter-spacing: -.055em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.product-price span { font-size: var(--type-meta); }
.product-card .regular-price { min-height: 1.5em; margin: var(--space-xs) 0 var(--space-md); font-size: var(--type-meta); color: var(--ink-secondary); }
.product-card.is-bundle .regular-price { color: var(--ink-inverse); }
.product-card ul { list-style: none; padding: 0; margin: 0 0 var(--space-lg); color: var(--ink-secondary); line-height: 1.6; font-size: var(--type-body); display: grid; gap: var(--space-xs); }
.product-card.is-bundle ul { color: var(--ink-inverse); }
.product-card .button { width: 100%; margin-top: auto; min-height: 48px; border-radius: var(--radius-control); font-size: var(--type-body); }
.product-card.is-bundle .button { background: var(--surface); color: var(--ink); }
.product-card .product-detail { display: inline-flex; min-height: 44px; justify-content: center; align-items: center; text-decoration: underline; font-size: var(--type-meta); margin-top: var(--space-xs); }
.product-pricing .compatibility { font-size: var(--type-meta); margin-top: var(--space-lg); }
.product-pricing .price-unavailable { color: var(--ink-secondary); font-size: var(--type-body); }
.other-product { max-width: 1060px; margin: auto; display: flex; align-items: center; gap: var(--space-lg); text-align: left; padding: var(--space-section) var(--space-md); }
.other-product > img { width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; }
.other-product h2 { font-size: clamp(2rem, 4vw, 3rem); }
.other-product p { font-size: var(--type-body); color: var(--ink-secondary); line-height: 1.6; margin: var(--space-sm) 0; max-width: 36rem; }
.other-product a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.checkout-preview { max-width: 42rem; margin: 0 auto; padding: var(--space-section) var(--space-md); }
.checkout-preview h1 { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -.045em; line-height: 1.1; }
.checkout-preview p { color: var(--ink-secondary); line-height: 1.6; font-size: var(--type-body); }
.checkout-preview .preview-label { font-size: var(--type-meta); color: var(--ink-muted); margin: 0 0 var(--space-md); }
.checkout-summary { margin-block: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--surface-soft); }
.checkout-summary h2 { font-size: var(--type-title); margin: 0; }
.checkout-summary .checkout-total { color: var(--ink); font-size: var(--type-price); letter-spacing: -.055em; font-weight: 600; line-height: 1.2; margin: var(--space-sm) 0; font-variant-numeric: tabular-nums; }
.checkout-summary ul { padding-inline-start: var(--space-md); line-height: 1.8; }
.checkout-preview a:not(.button) { text-decoration: underline; }
.checkout-preview .button { min-height: 48px; margin-top: var(--space-md); border-radius: var(--radius-control); }
@media (hover: hover) {
  .veil-demo-toggle:hover { background: var(--button-hover); }
  .veil-moment:hover { background: var(--surface-soft); }
  .product-card.is-bundle .button:hover { background: var(--surface-soft); }
}
.veil-demo-toggle:active, .product-card .button:active { transform: scale(.97); }
.veil-demo-toggle:focus-visible, .veil-moment:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .veil-scene-away { transition: opacity var(--motion-swap) var(--motion-curve); }
  .veil-demo-toggle { transition: background var(--motion-swap) var(--motion-curve), transform var(--motion-swap) var(--motion-curve); }
}
@media (max-width: 960px) {
  .product-grid { grid-template-columns: 1fr; max-width: 38rem; margin-inline: auto; }
  .product-card { padding: var(--space-lg); }
  .veil-privacy-inner, .veil-settings { grid-template-columns: 1fr; }
  .veil-privacy p { max-width: 38rem; }
  .veil-settings-window { max-width: 32rem; margin-inline: auto; }
}
@media (max-width: 650px) {
  .product-nav .nav-inner { padding-inline: var(--space-sm); gap: var(--space-sm); }
  .product-nav .brand { font-size: 1.125rem; gap: var(--space-xs); }
  .product-nav .brand img { width: 26px; height: 26px; }
  .product-nav nav { gap: var(--space-sm); font-size: var(--type-meta); }
  .product-nav nav > a:not(.small-button) { display: none; }
  .product-nav nav > .product-destination { display: inline-flex !important; }
  .product-nav nav .small-button { font-size: var(--type-meta); padding-inline: var(--space-sm); }
  .veil-hero h1 { font-size: clamp(2.75rem, 12vw, 3.625rem); }
  .veil-hero .hero-actions { gap: var(--space-sm); }
  .veil-demo { margin-top: var(--space-lg); }
  .veil-scene { border-radius: var(--radius-tile); }
  .veil-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
  .veil-moment { align-items: center; padding: var(--space-compact) var(--space-xs); gap: var(--space-xs); min-height: 48px; }
  .veil-moment strong { font-size: var(--type-meta); margin-bottom: 0; }
  .veil-moment strong + span { display: none; }
  .veil-demo-caption { align-items: flex-start; }
  .veil-demo-toggle { padding-inline: var(--space-sm); font-size: var(--type-meta); }
  .veil-privacy, .veil-settings, .product-pricing { padding-block: var(--space-xl); }
  .veil-privacy li strong { font-size: var(--type-copy); }
  .other-product { align-items: flex-start; gap: var(--space-md); padding-block: var(--space-xl); }
  .other-product > img { width: 64px; height: 64px; }
  .product-card { padding: var(--space-md); }
  .checkout-preview { padding-block: var(--space-xl); }
}
@media (max-width: 360px) {
  .product-nav nav { gap: var(--space-xs); }
  .product-nav nav .small-button { padding-inline: var(--space-compact); }
  .veil-hero .hero-actions { flex-direction: column; gap: var(--space-xs); }
  .veil-demo-caption { flex-direction: column; gap: var(--space-sm); }
  .other-product { flex-direction: column; }
}
@media print {
  .product-nav, .hero-actions, .veil-demo-toggle, footer { display: none; }
  body { background: var(--surface); color: var(--ink); }
  .section { padding-block: var(--space-md); }
  a[href]::after { content: " (" attr(href) ")"; }
}