/* OPTIZAMI 4.0.0 — Responsive layout corrections. Original visual identity retained. */
:root {
  --visible-height: 100vh;
  --viewport-top: 0px;
  --menu-top: 80px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
@supports (height: 100dvh) { :root { --visible-height: 100dvh; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 0; }
/* The absolutely positioned halos previously escaped the static hero and enlarged
   the document. Contain their painting locally instead of merely hiding text. */
.hero { position: relative; isolation: isolate; }
.hero, .section { max-width: 100%; }
.hero-glow, .groupbuy-orb { pointer-events: none; }
.hero-grid > *, .drawers-layout > *, .drawer-grid > *, .journey-grid > *,
.split-feature > *, .groupbuy-grid > *, .pain-grid > *, .profile-grid > *,
.showcase-stage > *, .co-creation-grid > *, .cta-grid > *, .form-row > *,
.footer-grid > *, .profiles-gallery > * { min-width: 0; }
img { max-width: 100%; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #37bcae; outline-offset: 3px;
}
.shell { max-width: 1200px; }
/* Retain the approved floating, navy header at every breakpoint. */
.site-header {
  position: fixed; z-index: 1000; top: calc(8px + var(--safe-top));
  left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 24px - var(--safe-left) - var(--safe-right));
}
.site-header.scrolled { top: calc(8px + var(--safe-top)); }
.brand { flex-shrink: 0; }
.header-actions { min-width: 0; }
.menu-btn { flex: 0 0 44px; min-height: 44px; line-height: 1; }
.menu-backdrop {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(2, 14, 33, .52); touch-action: none;
}
.mobile-menu {
  position: fixed; z-index: 999; left: 50%; right: auto;
  top: var(--menu-top); transform: translateX(-50%);
  width: min(920px, calc(100% - 24px - var(--safe-left) - var(--safe-right)));
  max-height: max(44px, calc(var(--visible-height) + var(--viewport-top) - var(--menu-top) - 12px - var(--safe-bottom)));
  margin: 0; padding: 10px 14px;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.mobile-menu a, .mobile-menu button {
  min-height: 48px; font-size: 15px; padding: 13px 10px;
  overflow-wrap: anywhere; line-height: 1.45;
}
/* Screen-copy had white inherited headings on its light surface. */
.screen-copy { color: #102d53; }
.screen-copy h3 { color: #102d53; }
.screen-copy small { color: #087583; }
.screen-copy p, .screen-copy li { color: #4e6682; }
.screen-copy li { border-top-color: #dce6ee; }
.lead-form input:not([type=checkbox]) {
  min-width: 0; width: 100%; font-size: 16px; min-height: 48px;
}
.lead-form input[type=checkbox] {
  flex: 0 0 18px; width: 18px; height: 18px; padding: 0; accent-color: #078391;
}
.lead-form input:hover { transform: none; }
.interest-row label, .consent { line-height: 1.6; }

/* Dialog: actual visible viewport, with one scrollable content area and fixed
   control rows. The page underneath remains locked until the dialog is closed. */
.silmo-dialog {
  position: fixed; inset: auto; left: 0; top: var(--viewport-top);
  width: 100%; height: var(--visible-height); max-height: var(--visible-height);
  max-width: 100%; margin: 0; padding: 0; z-index: 1100;
  overflow: hidden; overscroll-behavior: none;
}
.silmo-dialog:fullscreen { top: 0; height: 100%; max-height: 100%; }
.silmo-shell {
  height: 100%; min-width: 0; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.silmo-topbar { min-width: 0; min-height: 64px; padding: 10px 18px; }
.silmo-topbar .slide-progress { min-width: 0; }
.silmo-topbar button { flex-shrink: 0; width: 44px; height: 44px; }
.silmo-topbar > img { height: 44px; width: auto; }
.slide-stage {
  min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-behavior: auto; touch-action: pan-y pinch-zoom;
}
.silmo-slide,
.silmo-slide.slide-cover,
.silmo-slide.slide-end,
.silmo-slide.slide-goal-slide {
  position: relative; inset: auto; width: 100%; height: auto; min-height: 100%;
  padding: clamp(24px, 4vh, 48px) clamp(24px, 5vw, 80px);
}
.silmo-slide > *, .slide-copy > *, .slide-end-copy > * { min-width: 0; }
.silmo-slide::before { inset: 12px; }
.silmo-slide h2 { line-height: 1.04; overflow-wrap: break-word; }
.silmo-slide .slide-tag { max-width: 100%; line-height: 1.5; }
.slide-cover .slide-triptych { justify-content: flex-start; }
.slide-cover-media { min-height: clamp(320px, 48vh, 500px); }
.slide-end-copy { min-width: 0; }
.slide-end-copy > p { color: #cbdbe9; line-height: 1.6; }
.slide-end .slide-final-actions { justify-content: flex-start; }
.split-slide.reverse .slide-media-stack { order: 1; }
.slide-mosaic .slide-image img { object-fit: contain; }
.silmo-jumps {
  display: flex; flex-wrap: nowrap; gap: 8px; padding: 8px 16px;
  min-width: 0; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #438995 #071c3f;
}
.jump-dot { flex: 1 0 auto; min-height: 44px; padding: 8px 12px; }
.silmo-controls {
  min-width: 0; min-height: 64px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  padding: 8px 16px;
}
.silmo-controls button { min-height: 44px; font-size: 14px; }
.silmo-controls button:last-child { justify-self: end; }
.presentation-mobile-count { display: none; }

@media (max-width: 1100px) {
  .desktop-nav { gap: 18px; }
  .header-actions .btn { padding-inline: 12px; }
}
@media (max-width: 1040px) {
  .desktop-nav { display: none; }
  .menu-btn { display: block; }
  .hero-grid, .drawers-layout, .journey-grid, .split-feature, .groupbuy-grid,
  .co-creation-grid, .cta-grid, .showcase-stage { grid-template-columns: minmax(0, 1fr); }
  .silmo-slide.slide-cover.active, .silmo-slide.slide-end.active { gap: 24px; }
  .silmo-slide h2 { font-size: clamp(36px, 5.8vw, 60px); }
  .slide-cover-media { width: min(100%, 660px); min-height: 320px; }
  .slide-cover .slide-triptych, .slide-end .slide-final-actions { justify-content: center; }
  .split-slide.reverse .slide-media-stack { order: initial; }
  .showcase-head .btn { white-space: normal; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: calc(86px + var(--safe-top)); }
  .shell { width: calc(100% - 32px - var(--safe-left) - var(--safe-right)); }
  .site-header {
    width: calc(100% - 16px - var(--safe-left) - var(--safe-right));
    max-width: none; height: 60px; padding: 6px 8px; gap: 10px;
  }
  .header-actions { margin-left: auto; }
  .brand { min-width: 72px; height: 46px; }
  .brand img { height: 38px; }
  .mobile-menu { width: calc(100% - 24px - var(--safe-left) - var(--safe-right)); }
  .section { padding: 64px 0; }
  .hero { min-height: 0; padding: calc(100px + var(--safe-top)) 0 54px; }
  .hero-grid { gap: 30px; }
  .hero h1 { max-width: 100%; font-size: clamp(36px, 10.6vw, 56px); line-height: 1.06; }
  .hero-lead { font-size: 17px; line-height: 1.65; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; line-height: 1.6; }
  .eyebrow > span { flex: 0 0 26px; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .btn, .text-link { white-space: normal; overflow-wrap: break-word; text-align: center; }
  .btn { min-height: 48px; }
  .hero-actions .btn { width: 100%; line-height: 1.4; }
  .hero-actions .btn > span, .text-link > span { flex-shrink: 0; }
  .hero-pills { gap: 8px; margin-top: 24px; }
  .hero-pills > span { font-size: 11px; }
  .prototype-note { line-height: 1.7; font-size: 11px; }
  .hero-visual { width: 100%; min-height: 0; margin: 0; padding-bottom: 0; }
  .browser-card.browser-main {
    position: relative; inset: auto; width: 100%; margin: 0;
    transform: none; animation: none;
  }
  .hero-visual .screen-crop { height: auto; aspect-ratio: 1.15; }
  .hero-visual .screen-crop img { object-position: top; }
  .hero-visual .hero-photo-card { position: relative; inset: auto; margin: 16px 0 0; animation: none; }
  .hero-mini-card, .hero-visual .float-chip { display: none; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2, .drawers-copy h2, .feature-copy h2, .groupbuy-copy h2,
  .co-copy h2, .cta-copy h2, .showcase-head h2 {
    font-size: clamp(30px, 8.6vw, 40px); line-height: 1.1; overflow-wrap: break-word;
  }
  .pain-card, .profile-card, .lead-form { padding: 24px; }
  .pain-card h3, .profile-card h3 { line-height: 1.16; }
  .drawer-detail { padding: 20px; gap: 14px; }
  .drawer-detail > div:last-child { min-width: 0; }
  .drawer-detail h3 { font-size: 23px; overflow-wrap: break-word; }
  .drawer-detail-icon { flex: 0 0 46px; width: 46px; height: 46px; }
  .journey-grid { gap: 28px; }
  .step { padding: 14px; gap: 12px; }
  .step > div { min-width: 0; }
  .search-demo { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 6px 10px; }
  .search-demo > span { grid-row: 1 / 3; }
  .search-demo em { grid-column: 2; margin: 0; }
  .result-card { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 8px 12px; }
  .result-card > div { min-width: 0; }
  .result-card .status { grid-column: 2; justify-self: start; margin: 0; }
  .result-card .result-label { max-width: calc(100% - 32px); }
  .feature-collage { min-height: 0; padding-bottom: 0; display: grid; gap: 16px; }
  .feature-photo-card, .browser-card.flat.feature-overlay {
    position: relative; inset: auto; width: 100%; margin: 0; transform: none;
  }
  .feature-photo-card { height: auto; aspect-ratio: 4/3; }
  .groupbuy-grid { gap: 32px; }
  .goal-card { padding: 24px; }
  .goal-head { flex-wrap: wrap; gap: 12px; }
  .goal-head strong { font-size: 38px; white-space: nowrap; }
  .stores { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .goal-foot { align-items: flex-start; gap: 12px; }
  .goal-foot > span { min-width: 0; }
  .goal-foot > b { flex-shrink: 0; white-space: nowrap; }
  .showcase-tabs { max-width: 100%; border-radius: 18px; padding: 6px; }
  .screen-tab { flex-shrink: 0; min-height: 44px; }
  .showcase-browser img { width: 100%; height: auto; max-height: none; }
  .screen-copy { padding: 24px; }
  .screen-copy h3 { font-size: 28px; line-height: 1.15; }
  .feedback-questions { grid-template-columns: 36px minmax(0,1fr); padding: 16px; gap: 10px; }
  .feedback-questions > p { padding: 4px 0 14px 8px; font-size: 15px; }
  .footer-grid { grid-template-columns: minmax(0,1fr); }
  .footer-actions a, .footer-actions button { min-height: 44px; padding: 10px 0; }
  /* Small-screen presentation: readable content, never shrunk to fit. */
  .silmo-topbar {
    grid-template-columns: auto minmax(0,1fr) auto auto;
    min-height: 60px; gap: 8px; padding: 8px 10px;
  }
  .silmo-topbar > span { display: none; }
  .silmo-topbar > img { height: 40px; }
  .silmo-topbar button { width: 44px; height: 44px; font-size: 22px; }
  .silmo-jumps { padding: 7px 10px; gap: 7px; }
  .jump-dot { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; font-size: 10px; border-radius: 13px; }
  .jump-dot > span { width: 22px; height: 22px; }
  .silmo-controls { min-height: 60px; gap: 8px; padding: 8px 10px; }
  .silmo-controls button { font-size: 13px; padding: 10px 12px; border-radius: 12px; }
  .silmo-controls .presentation-key-hint { display: none; }
  .silmo-controls .presentation-mobile-count { display: block; font-size: 12px; color: #d5e4f0; white-space: nowrap; }
  .silmo-slide.active,
  .silmo-slide.slide-cover.active,
  .silmo-slide.slide-end.active,
  .silmo-slide.split-slide.active {
    display: block !important; min-height: 100%; height: auto;
    padding: 24px 18px 28px; text-align: center;
  }
  .silmo-slide h2, .split-slide h2 { font-size: clamp(28px, 8.9vw, 42px); line-height: 1.1; margin: 0; }
  .silmo-slide .slide-tag { font-size: 10px; letter-spacing: .10em; padding: 8px 10px; margin-bottom: 18px; }
  .silmo-slide p, .split-slide p, .slide-cover .slide-copy p, .slide-end p {
    font-size: 16px !important; line-height: 1.6; margin: 18px auto 0; max-width: 100%;
  }
  .slide-triptych { gap: 6px; margin-top: 18px; justify-content: center; }
  .slide-triptych > span { font-size: 9px; padding: 8px 10px 8px 18px; }
  .slide-cover-media { min-height: 0; margin: 24px auto 0; width: 100%; }
  .slide-photo-card.large { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16/10; }
  .slide-photo-card.small { width: 80px; height: 80px; padding: 8px; bottom: 8px; right: 8px; border-radius: 16px; }
  .slide-cards { margin-top: 22px; display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
  .slide-cards.icon-cards > div {
    display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 4px 14px;
    padding: 16px; text-align: left;
  }
  .icon-cards img { grid-row: 1 / 4; width: 62px; height: 62px; margin: 0; align-self: center; }
  .slide-cards.icon-cards > div b { font-size: 18px; margin: 0; }
  .slide-cards h3 { margin: 0; font-size: 21px; line-height: 1.16; }
  .slide-cards p { margin: 0; font-size: 14px !important; }
  .slide-media-stack { padding: 0; margin-top: 24px; width: 100%; }
  .slide-image { max-height: none; border-radius: 18px; }
  .slide-image img, .slide-mosaic .slide-image img { width: 100%; height: auto; max-height: none; object-fit: contain; }
  .slide-floating-photo, .split-slide.reverse .slide-floating-photo {
    position: relative; inset: auto; width: 72%; max-width: 320px; height: auto;
    aspect-ratio: 16/9; margin: 16px auto 0; border-radius: 16px;
  }
  .slide-goal { width: 100%; margin-top: 24px; }
  .slide-inline-visual { margin: 20px auto 0; width: 110px; height: 110px; padding: 10px; }
  .slide-end-photo { height: auto; width: 100%; aspect-ratio: 16/10; margin-top: 24px; }
  .slide-final-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: 24px; }
  .slide-final-actions button, .slide-final-actions a { min-height: 48px; white-space: normal; font-size: 14px; line-height: 1.5; }
  .slide-end .slide-final-actions { justify-content: stretch; }
  .slide-cover-media::before, .slide-media-stack::before { display: none; }
}
@media (max-width: 360px) {
  .shell { width: calc(100% - 24px - var(--safe-left) - var(--safe-right)); }
  .pain-card, .profile-card, .lead-form, .goal-card, .screen-copy { padding: 20px; }
  .drawer-detail { display: block; }
  .drawer-detail-icon { margin-bottom: 12px; }
  .hero h1 { font-size: 36px; }
  .silmo-controls button { padding-inline: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .silmo-topbar { min-height: 52px; padding-block: 4px; }
  .silmo-topbar > img { height: 36px; }
  .silmo-jumps { padding-block: 4px; }
  .silmo-controls { min-height: 52px; padding-block: 4px; }
  .silmo-slide.active { padding-block: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
.silmo-topbar.no-fullscreen { grid-template-columns: auto minmax(0,1fr) auto auto; }
@media (max-width: 760px) {
  .silmo-topbar.no-fullscreen { grid-template-columns: auto minmax(0,1fr) auto; }
}
@media (max-width: 760px) {
  .slide-cover .slide-photo-card.large {
    height: clamp(145px, calc(var(--visible-height) * .24), 220px);
    aspect-ratio: auto;
  }
}