/* STILL WATER. Companion, placed in a real photograph, with iOS style glass.
   Loaded on top of companion.css and scoped to html.still. Copy, fonts and spacing stay the same. */

html.still {
  /* Content sheets are near solid with no blur. Only the floating controls (nav, menu, role list) are glass. */
  --glass: rgba(249, 247, 254, 0.93);
  --glass-strong: rgba(249, 247, 254, 0.95);
  --glass-soft: rgba(255, 255, 255, 0.55);
  --glass-blur: blur(32px) saturate(170%);
  --glass-edge: rgba(255, 255, 255, 0.6);
  --glass-light: 0 16px 48px rgba(28, 10, 51, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  --night: rgba(13, 4, 25, 0.72);
}

/* The photographs stay still while the page moves over them */
.still-bg { display: none; }
html.still body { background: #8FA3C4 url("photos/horizon.jpg") center 45% / cover fixed no-repeat; }
html.still .still-bg {
  display: block; position: fixed; inset: 0; z-index: -2;
  background: center / cover no-repeat; opacity: 0;
  transition: opacity 1200ms var(--ease);
}
html.still .still-bg.on { opacity: 1; }
html.still .still-bg-boat { background-image: url("photos/boat.jpg"); background-position: center 55%; }
html.still .still-bg-horizon { background-image: url("photos/horizon.jpg"); background-position: center 45%; }
html.still .still-bg-sunrise { background-image: url("photos/sunrise.jpg"); background-position: center 40%; }
@media (prefers-reduced-motion: reduce) { html.still .still-bg { transition: opacity 200ms var(--ease); } }

/* One glass recipe */
html.still .site-nav,
html.still .hero-grid > div:first-child,
html.still #why .split,
html.still #benefits .container,
html.still #how .container,
html.still #safety .container,
html.still #providers .container,
html.still #faq .container {
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-light);
}
/* Apple keeps glass for the control layer: the content sheets keep the look, without the blur */
html.still .hero-grid > div:first-child,
html.still #why .split,
html.still #benefits .container,
html.still #how .container,
html.still #safety .container,
html.still #providers .container,
html.still #faq .container { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Sections become sheets floating over the water */
html.still #why, html.still #benefits, html.still #how, html.still #safety, html.still #providers, html.still #faq {
  z-index: 1; background: transparent; padding-block: var(--s-100);
}
html.still #benefits .container,
html.still #how .container,
html.still #safety .container,
html.still #providers .container,
html.still #faq .container,
html.still #why .split {
  width: calc(100% - var(--s-300)); max-width: 1200px; margin-inline: auto;
  padding: var(--s-400) var(--s-300); border-radius: var(--r-3xl);
}
@media (min-width: 768px) {
  html.still #benefits .container,
  html.still #how .container,
  html.still #safety .container,
  html.still #providers .container,
html.still #providers .container,
  html.still #faq .container,
  html.still #why .split { width: calc(100% - var(--s-500) * 2); padding: var(--s-600) var(--s-500); }
  html.still #why, html.still #benefits, html.still #how, html.still #safety, html.still #providers, html.still #faq { padding-block: var(--s-200); }
}
html.still .band-tint { background: transparent; }

/* Hero: the words sit on one sheet of glass */
html.still .hero { padding-bottom: var(--s-200); }
html.still .hero-grid > div:first-child { padding: var(--s-300) var(--s-200); border-radius: var(--r-3xl); background: var(--glass-strong); }
@media (min-width: 768px) { html.still .hero-grid > div:first-child { padding: var(--s-500); } }
html.still .hero-sub { color: var(--ink); }

/* Conversation */
html.still .device {
  padding: var(--s-75); border: 1px solid var(--glass-edge); background: var(--glass-soft); box-shadow: var(--glass-light);
}
html.still .screen { background: var(--glass-strong); }
html.still .chat-head { border-bottom-color: rgba(28, 10, 51, 0.12); }
html.still .bubble-ai { background: rgba(237, 227, 253, 0.9); }
html.still .handover { border-color: rgba(28, 10, 51, 0.14); }
html.still .illustration-note { color: var(--ink); }
html.still .chat-replay { margin-top: var(--s-100); background: var(--glass-strong); box-shadow: var(--glass-light); text-decoration: none; }

/* Controls: capsules that catch the light */
html.still .site-nav { background: rgba(255, 255, 255, 0.62); border-radius: var(--r-full); padding-inline: var(--s-100); }
html.still .nav-links a, html.still .menu-toggle { border-radius: var(--r-full); }
html.still .nav-links a { color: var(--ink); }
html.still .nav-links a:hover, html.still .nav-links a[aria-current="true"] { background: rgba(255, 255, 255, 0.72); }
html.still .btn {
  border-radius: var(--r-full); padding-inline: var(--s-200);
  box-shadow: 0 8px 24px rgba(123, 47, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
html.still .input { border-radius: var(--r-full); padding-inline: var(--s-200); background: rgba(255, 255, 255, 0.82); border-color: rgba(28, 10, 51, 0.5); }
html.still .form-success { background: rgba(237, 227, 253, 0.9); }
html.still .mobile-menu { background: rgba(247, 243, 254, 0.72); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* Partners: one thin sheet of glass across the page */
html.still .partners { margin-block: var(--s-100); border: 1px solid var(--glass-edge); border-inline: 0; background: var(--glass-strong); box-shadow: var(--glass-light); }
html.still .partners-title { color: var(--ink); }

/* Inside the sheets */
html.still .panel-tint { background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
html.still .panel-dark { background: rgba(13, 4, 25, 0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24); }
html.still .how-num { background: rgba(255, 255, 255, 0.72); }
html.still .how-step:not(:last-child)::after { background: rgba(28, 10, 51, 0.18); }
html.still .faq-item { box-shadow: inset 0 -1px 0 rgba(28, 10, 51, 0.14); }
html.still .faq-item:first-child { box-shadow: inset 0 1px 0 rgba(28, 10, 51, 0.14), inset 0 -1px 0 rgba(28, 10, 51, 0.14); }

html.still .role-card { background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
html.still .role-select { background-color: rgba(255, 255, 255, 0.82); }
html.still .role-trigger { padding-right: var(--s-300); }
html.still .role-list { border-radius: var(--r-3xl); background: rgba(255, 255, 255, 0.88); }
html.still .role-option { border-radius: var(--r-2xl); }

/* Night over the water for the tagline, closing form and footer */
html.still .tagline::before { background: rgba(13, 4, 25, 0.6); }
html.still .final::before { background: var(--night); }
html.still .site-footer { background: rgba(13, 4, 25, 0.94); }
html.still .band-dark .input { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }
html.still .band-dark .form-success { background: rgba(255, 255, 255, 0.12); }

@media (min-width: 1024px) {
  html.still .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-500); }
  html.still .hero-grid > div:first-child { padding: var(--s-400); }
  html.still #why .split { width: 640px; max-width: 640px; min-height: 0; margin-left: max(var(--s-500), calc((100% - var(--container)) / 2 + var(--s-500))); margin-block: 18vh; padding: var(--s-500); }
}

/* Accessibility and older browsers: solid sheets, still readable */
@media (prefers-reduced-transparency: reduce) {
  html.still { --glass: #F7F3FE; --glass-strong: #F7F3FE; --glass-soft: #F7F3FE; --night: rgba(13, 4, 25, 0.94); }
  html.still .site-nav { background: #F7F3FE; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.still { --glass: rgba(247, 243, 254, 0.96); --glass-strong: rgba(247, 243, 254, 0.96); --glass-soft: rgba(247, 243, 254, 0.9); }
  html.still .site-nav { background: rgba(247, 243, 254, 0.96); }
}

/* Increase Contrast: solid sheets and controls, firm edges */
@media (prefers-contrast: more) {
  html.still { --glass: #F7F3FE; --glass-strong: #F7F3FE; --glass-soft: #FFFFFF; --glass-edge: rgba(28, 10, 51, 0.4); }
  html.still .site-nav, html.still .mobile-menu { background: #F7F3FE; }
  html.still .input { border-color: var(--ink); }
  html.still .site-footer { background: #0D0419; }
}