/* Responsive geometry follows the available space, including live fold/unfold resizing. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

.hero,
.journey-layout,
.benefits-layout,
.faq-layout,
.principles,
.launch-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.benefits-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.launch-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

.hero > *,
.journey-layout > *,
.benefits-layout > *,
.faq-layout > *,
.principle > *,
.step-content,
.demo-area,
.demo-word-row > h3,
.launch-panel > *,
.footer-main > * {
  min-width: 0;
}

/* Size the artwork itself instead of shrinking an oversized fixed canvas. */
.hero-visual,
[dir=ltr] .hero-visual {
  width: 100%;
  max-width: 550px;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1.08;
  margin: 0 auto;
  transform: none;
}
[dir=ltr] .hero-visual { transform: scaleX(-1); }
.phone-figure { width: 46%; max-width: 234px; top: 2%; }
.phone { border-width: 6px; border-radius: 30px; }
.phone img { border-radius: 23px; }
.orbit { width: 88%; height: auto; aspect-ratio: 1; }
.hero-visual .orbit-two { width: 100%; height: auto; }
.visual-bird { width: 80%; }
.visual-word { left: 0; top: 5%; font-size: clamp(34px, 5vw, 63px); }
.floating-word { left: 0; bottom: 16%; width: 42%; max-width: 214px; padding: 12px 14px; }
.floating-word-row { gap: 6px; }
.floating-word-row strong { font-size: clamp(17px, 2.2vw, 27px); }
.floating-label { overflow-wrap: anywhere; font-size: 8px; }
.floating-word > span:last-child { font-size: clamp(13px, 1.5vw, 17px); }
.word-count { right: 0; top: 24%; width: 28%; max-width: 147px; padding: 12px 10px; }
.word-count strong { font-size: clamp(22px, 2.7vw, 32px); }
.word-count > span:last-child { overflow-wrap: anywhere; }
.count-star { right: -5px; top: -16px; font-size: 32px; }
.sound-badge { flex-shrink: 0; width: 26px; height: 26px; }

.step { overflow-wrap: anywhere; }
.step-number { flex-shrink: 0; }
.steps { min-width: 0; }
.demo-word-row { gap: 10px; }
.demo-word-row h3 { font-size: clamp(28px, 4.5vw, 48px); overflow-wrap: anywhere; }
.demo-caption, .demo-example p, .demo-bottomline > span { overflow-wrap: anywhere; }
.demo-bottomline { flex-wrap: wrap; }
.review-days > div { flex-wrap: wrap; gap: clamp(4px, 1vw, 10px); }
.review-days span { flex: 0 0 auto; width: clamp(20px, 4.8vw, 26px); height: clamp(20px, 4.8vw, 26px); }
.quiet-ring { max-width: 100%; height: auto; aspect-ratio: 1; }
.quiet-art h3, .launch-copy h2 { overflow-wrap: anywhere; }
.footer-links > a { font-size: 11px; }
.legal-page .site-header { flex-wrap: wrap; padding-block: 12px; }

.dedication {
  max-width: 680px;
  margin: 0 auto 28px;
  padding-inline: 8px;
  text-align: center;
  font-size: 13px;
  line-height: 2.2;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.dedication::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 auto 16px;
  background: var(--gold);
}

/* A small tablet or unfolded phone needs room for the demo, not narrower columns. */
@media (max-width: 720px) {
  .hero, .journey-layout, .benefits-layout, .faq-layout, .launch-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero { padding-block: 40px 25px; gap: 28px; }
  .hero-copy { padding-bottom: 0; }
  .hero-intro { max-width: 520px; font-size: 14px; }
  [dir=ltr] .hero-intro { font-size: 14px; }
  .hero-visual, [dir=ltr] .hero-visual {
    max-width: 410px;
    aspect-ratio: 1 / 1.35;
    margin: 0 auto;
  }
  .phone-figure { width: 56%; }
  .floating-word { bottom: 17%; }
  .journey-layout { gap: 30px; }
  .benefits-layout { gap: 30px; }
  .quiet-art { width: 100%; max-width: 390px; margin-inline: auto; }
  .faq-layout { gap: 28px; }
  .launch-panel { padding: clamp(25px, 5vw, 40px); }
  .launch-art { position: absolute; width: 170px; height: 155px; bottom: 10px; inset-inline-end: -39px; opacity: .14; pointer-events: none; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 9px; }
  .principle { justify-content: flex-start; padding-block: 17px; gap: 18px; }
  .principle + .principle { border-inline-start: 0; border-top: 1px solid var(--border); }
  .principle strong { font-size: 12px; }
  .principle div > span { font-size: 10px; }
  .demo-card { padding-inline: clamp(18px, 5vw, 29px); }
}

@media (max-width: 360px) {
  .wrap { width: calc(100% - 32px); }
  .site-header { gap: 8px; }
  .brand { gap: 6px; }
  .brand img { width: 33px; height: 33px; }
  .brand-type strong { font-size: 21px; }
  [dir=ltr] .brand-type > span { font-size: 15px; }
  .brand-type > span { font-size: 7px; letter-spacing: 1px; }
  .language-link { font-size: 10px; gap: 5px; }
  .hero h1 { font-size: clamp(36px, 13vw, 46px); }
  [dir=ltr] .hero h1 { font-size: clamp(36px, 13vw, 47px); }
  .hero-actions { gap: 10px 18px; }
  .hero-actions .button { max-width: 100%; }
  .hero-visual, [dir=ltr] .hero-visual { aspect-ratio: 1 / 1.44; }
  .phone-figure { width: 58%; }
  .phone { border-width: 4px; border-radius: 23px; }
  .phone img { border-radius: 18px; }
  .floating-word { padding: 9px; width: 44%; }
  .floating-label { font-size: 7px; }
  .floating-word-row { flex-wrap: wrap; }
  .floating-word-row strong { font-size: 17px; }
  .word-count { width: 30%; padding: 9px 6px; }
  .word-count > span:last-child { font-size: 7px; }
  .word-count strong { font-size: 22px; }
  .count-star { font-size: 25px; }
  .sound-badge { width: 22px; height: 22px; }
  .steps { margin-inline-start: 8px; }
  .step { gap: 10px; }
  .step-indicator { display: none; }
  .step-content strong { font-size: 16px; }
  .step.is-active::before { inset-inline-start: -8px; }
  .demo-area { padding-inline: 0 9px; }
  .demo-word-row { flex-wrap: wrap; }
  .demo-word-row h3 { font-size: 30px; }
  .demo-word-row .audio-button { margin-inline-start: auto; }
  .demo-bottomline > span { max-width: 100%; }
  h2, .faq-heading h2 { font-size: 27px; }
  .launch-panel h2, [dir=ltr] .launch-panel h2 { font-size: 29px; }
}

/* Keep reading columns on either side of a hardware hinge when exposed by the browser.
   Browsers without segment support retain the fluid width-based layouts above. */
@media (horizontal-viewport-segments: 2) {
  body {
    --segment-pad: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --first-segment: env(viewport-segment-width 0 0);
    --last-segment: env(viewport-segment-width 1 0);
    --hinge-width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
    padding-right: 0;
    padding-left: 0;
  }
  [dir=rtl] body {
    --first-segment: env(viewport-segment-width 1 0);
    --last-segment: env(viewport-segment-width 0 0);
  }
  .wrap { width: calc(100% - 2 * var(--segment-pad)); max-width: none; }
  .hero, .journey-layout, .benefits-layout, .faq-layout, .principles, .site-header {
    display: grid;
    grid-template-columns: minmax(0, calc(var(--first-segment) - 2 * var(--segment-pad))) minmax(0, calc(var(--last-segment) - 2 * var(--segment-pad)));
    column-gap: calc(var(--hinge-width) + 2 * var(--segment-pad));
  }
  .site-header nav { display: none; }
  .header-actions { justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
  .site-header > * { min-width: 0; }
  .section-heading { max-width: calc(var(--first-segment) - 2 * var(--segment-pad)); }
  .hero h1, [dir=ltr] .hero h1 { font-size: clamp(30px, calc(var(--first-segment) / 7), 65px); }
  .hero-visual, [dir=ltr] .hero-visual { aspect-ratio: 1 / 1.4; }
  .phone-figure { width: 54%; }
  .principle { align-self: start; justify-content: flex-start; }
  .principle + .principle { border-inline-start: 0; border-top: 0; }
  .principles { row-gap: 15px; }
  .demo-word-row { flex-wrap: wrap; }
  .demo-word-row h3 { font-size: clamp(28px, calc(var(--last-segment) / 11), 48px); }
  .launch-panel {
    padding: var(--segment-pad);
    grid-template-columns: minmax(0, calc(var(--first-segment) - 3 * var(--segment-pad))) minmax(0, calc(var(--last-segment) - 3 * var(--segment-pad)));
    column-gap: calc(var(--hinge-width) + 2 * var(--segment-pad));
  }
  .launch-art { position: relative; width: 100%; height: auto; inset: auto; opacity: .92; }
  .launch-panel h2 { font-size: clamp(27px, calc(var(--first-segment) / 12), 45px); }
  .footer-main, .footer-bottom {
    display: grid;
    grid-template-columns: minmax(0, calc(var(--first-segment) - 2 * var(--segment-pad))) minmax(0, calc(var(--last-segment) - 2 * var(--segment-pad)));
    gap: calc(var(--hinge-width) + 2 * var(--segment-pad));
  }
  .footer-main > *, .footer-bottom > * { min-width: 0; max-width: 100%; }
  .footer-links { justify-content: flex-end; }
  .dedication { max-width: calc(var(--first-segment) - 2 * var(--segment-pad)); margin-inline: 0 auto; }
  .legal-document { width: calc(var(--first-segment) - 2 * var(--segment-pad)); max-width: 780px; margin-inline: var(--segment-pad) auto; }
}