/* App Store release, 15 September 2026. Shared with the approved store artwork. */
.release-page { background: #f4f4eb; }
.launch-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--header-height); color: #fff8ec; background: #071d16; }
.launch-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(4,23,17,.96) 0%, rgba(4,23,17,.85) 36%, rgba(4,23,17,.1) 76%), url("assets/release-20260915/reading-room.webp") center / cover; }
.launch-inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; width: min(1240px, calc(100% - 96px)); margin: auto; padding: 68px 0 52px; }
.launch-copy { position: relative; z-index: 2; padding: 12px 0; }
.launch-availability { display: flex; gap: 10px; align-items: center; margin: 0 0 30px; color: #e4d6b8; font-size: 13px; letter-spacing: .045em; }
.launch-availability > span { width: 7px; height: 7px; border-radius: 50%; background: #d7b575; box-shadow: 0 0 0 5px #d7b57515; }
.launch-copy h1 { max-width: 700px; margin: 0; font: 400 clamp(52px, 5.8vw, 84px)/.99 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.launch-copy h1 em { color: #e1c38b; font-weight: 400; }
.launch-description { max-width: 490px; margin: 28px 0; color: #dddcd0; font-size: 18px; line-height: 1.65; }
.launch-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; }
.launch-store { display: inline-flex; justify-content: space-between; align-items: center; gap: 30px; min-height: 56px; padding: 16px 24px; border: 1px solid #f6edda; border-radius: 7px; color: #10392b; background: #f6edda; font-size: 16px; font-weight: 650; transition: background .2s, transform .2s; }
.launch-store:hover { background: #fffdf6; transform: translateY(-2px); }
.launch-tour { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; color: #fff8ec; }
.launch-note { margin: 16px 0 0; color: #c8cdbf; font-size: 12px; line-height: 1.6; }
.launch-android { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; margin-top: 18px; color: #d2d6c9; font-size: 13px; text-decoration: underline; text-decoration-color: #66786c; text-underline-offset: 5px; }
.launch-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; margin: 0; }
.launch-phone { width: min(100%, 286px); padding: 7px; border: 1px solid #c2c9ac; border-radius: 43px; background: #121b16; box-shadow: 0 25px 65px #0007, inset 0 0 0 2px #4c5548; transform: rotate(3deg); }
.launch-phone img { display: block; width: 100%; height: auto; border-radius: 35px; }
.launch-scene figcaption { display: flex; gap: 14px; font-size: 12px; line-height: 1.5; color: #f3ecdd; }
.launch-scene figcaption span { color: #d7b575; font-variant-numeric: tabular-nums; }
.launch-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 22px max(48px, calc((100vw - 1240px)/2)); border-top: 1px solid #e1c38b30; font-size: 12px; line-height: 1.5; color: #d4d9cc; }
.launch-bottom a { color: inherit; }
.launch-bottom a span { padding-left: 16px; }
.app-story { padding: 90px max(48px, calc((100vw - 1240px)/2)) 70px; background: #f4f4eb; scroll-margin-top: 90px; }
.app-story-heading { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 48px; margin-bottom: 36px; }
.app-story-heading h2 { margin: 14px 0 0; font: 400 clamp(36px, 4vw, 54px)/1.06 var(--serif); letter-spacing: -.025em; color: #123d2f; }
.app-story-heading > p { max-width: 360px; margin: 0 0 4px auto; font-size: 16px; line-height: 1.65; color: #516156; }
.app-story-track { display: flex; gap: 0; padding: 0; margin: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #a3b2a5 #e2e7dc; border-radius: 14px; background: #071d16; }
.app-story-track li { flex: 0 0 25%; min-width: 240px; scroll-snap-align: start; }
.app-story-track img { display: block; width: 100%; height: auto; }
.app-story-track:focus-visible { outline: 3px solid #8b6a2b; outline-offset: 6px; }
.app-story-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.app-story-footer p { margin: 0; font-size: 13px; color: #526153; }
.app-story-footer p span { padding-left: 12px; }
.app-story-controls { display: flex; gap: 8px; }
.app-story-controls[hidden] { display: none; }
.app-story-controls button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #45645160; border-radius: 50%; color: #173d2e; background: transparent; font-size: 21px; cursor: pointer; }
.app-story-controls button:hover:not(:disabled) { background: #e2e7dc; }
.app-story-controls button:disabled { opacity: .3; cursor: default; }
.release-qr { display: flex; align-items: center; gap: 28px; padding: 24px 0 34px; border-bottom: 1px solid #d6e5d531; color: #fff8ec; }
.release-qr img { flex: 0 0 132px; width: 132px; height: 132px; border-radius: 8px; }
.release-qr strong { display: block; font: 400 26px/1.15 var(--serif); }
.release-qr small { display: block; margin-top: 12px; font-size: 12px; line-height: 1.5; color: #c5d1c6; }
.release-platform-note { font-size: 12px !important; line-height: 1.7 !important; color: #c5d1c6 !important; }
.release-page a:focus-visible, .release-page button:focus-visible { outline: 3px solid #b58a3b; outline-offset: 5px; }
@media (min-width: 1440px) { .app-story-track li { flex-basis: 25%; } }
@media (max-width: 980px) { .launch-hero { margin-top: 0; } }
@media (max-width: 1100px) {
  .launch-inner { gap: 36px; width: calc(100% - 64px); }
  .launch-copy h1 { font-size: clamp(50px, 6.5vw, 70px); }
  .launch-description { font-size: 16px; }
  .launch-phone { width: 254px; }
  .launch-actions { gap: 12px 20px; }
  .app-story { padding-inline: 32px; }
}
@media (max-width: 700px) {
  .launch-inner { grid-template-columns: 1fr; width: calc(100% - 40px); gap: 44px; padding: 42px 0 34px; }
  .launch-hero::before { background-image: linear-gradient(180deg, #071d16fa 0%, #071d16eb 38%, #071d1620 85%), url("assets/release-20260915/reading-room.webp"); background-position: center, 60% bottom; }
  .launch-copy { padding: 0; }
  .launch-availability { margin-bottom: 25px; font-size: 12px; }
  .launch-copy h1 { font-size: clamp(45px, 12.8vw, 76px); }
  .launch-description { max-width: 440px; margin: 24px 0; font-size: 16px; }
  .launch-store { flex: 1 0 auto; max-width: 360px; font-size: 15px; padding-inline: 20px; }
  .launch-actions { gap: 6px 20px; }
  .launch-tour { font-size: 13px; }
  .launch-note { max-width: 340px; margin-top: 12px; }
  .launch-android { margin-top: 12px; font-size: 12px; }
  .launch-phone { width: 250px; }
  .launch-scene figcaption { font-size: 11px; }
  .launch-bottom { padding: 20px; font-size: 11px; flex-direction: column; gap: 10px; }
  .app-story { padding: 60px 20px 46px; }
  .app-story-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .app-story-heading h2 { font-size: clamp(34px, 9vw, 46px); }
  .app-story-heading > p { max-width: 410px; margin: 0; font-size: 15px; }
  .app-story-track li { flex-basis: 82%; min-width: 0; }
  .app-story-footer p { max-width: 210px; font-size: 12px; }
  .release-qr { gap: 22px; padding-top: 4px; }
  .release-qr img { width: 110px; height: 110px; flex-basis: 110px; }
  .release-qr strong { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .launch-store { transition: none; } }