/* Phones get their own composition, readable type and touch-sized controls.
   State, forecasts and playback remain shared with the desktop experience. */
.launch-art picture{display:block;width:100%;height:100%}
@media(max-width:760px){
 html{scroll-padding-top:12px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .launch-header{height:calc(68px + env(safe-area-inset-top));min-height:calc(68px + env(safe-area-inset-top));padding:calc(10px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));gap:12px;background:#080b0e96}
 .launch-header .brand{min-height:44px;font-size:18px;letter-spacing:3.5px;gap:9px}
 .launch-header .nav-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 13px;font-size:12px;white-space:nowrap}
 .launch-header .nav-cta span{margin-left:12px}
 .launch-hero{display:flex;flex-direction:column;align-items:center;min-height:0;padding:calc(96px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 24px max(20px,env(safe-area-inset-left));overflow:hidden}
 .launch-intro{display:contents;animation:none;transform:none}
 .launch-kicker{order:0;justify-content:center;text-align:center;max-width:100%;font-size:9px;letter-spacing:.55px;line-height:1.6;gap:8px;margin:0 0 16px}
 .launch-hero h1{order:1;max-width:100%;font-size:clamp(31px,8.8vw,59px);letter-spacing:-.06em;line-height:1.12;text-align:center;margin:0 0 18px}
 .launch-hero h1 em{font-size:1.48em;line-height:1.03;letter-spacing:-.065em;padding-right:.09em}
 .launch-promise{order:2;text-align:center;font-size:16px;line-height:1.5;letter-spacing:-.25px;max-width:350px;margin:0;color:#dfdfdb}
 .launch-art{order:3;position:relative;inset:auto;z-index:auto;width:min(100%,420px);height:clamp(215px,65vw,310px);margin:2px 0 5px;flex:none;animation:none;isolation:isolate}
 .launch-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;aspect-ratio:1}
 .launch-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--bg),transparent 15%,transparent 86%,var(--bg)),linear-gradient(90deg,var(--bg),transparent 9%,transparent 91%,var(--bg))}
 .launch-hero:before{display:none}
 .launch-description,.launch-ambition,.artifact-caption{display:none}
 .launch-actions{order:4;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .launch-invitation.button{width:100%;min-height:54px;justify-content:space-between;font-size:15px;padding:16px 20px;border-radius:6px;gap:16px}
 .launch-model-link{min-height:44px;justify-content:center;font-size:12px;gap:12px}
 .launch-bottom{order:5;position:static;inset:auto;width:100%;max-width:440px;min-height:0;padding-top:17px;margin-top:8px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 17px;font-size:9px;line-height:1.5;letter-spacing:.2px;text-align:center}
 .launch-development{font-size:9px;gap:6px}.launch-bottom a{display:none}
 .lens-experience.section{padding:44px max(16px,env(safe-area-inset-right)) 50px max(16px,env(safe-area-inset-left))}
 .lens-introduction{padding-inline:4px;max-width:520px;margin:0 auto}
 .lens-introduction .section-label{font-size:10px;line-height:1.5;letter-spacing:.6px;margin-bottom:14px}
 .lens-introduction h2{font-size:clamp(34px,9vw,49px);line-height:1.15;letter-spacing:-1.8px;margin-bottom:15px}
 .lens-introduction h2 em{letter-spacing:-1.8px}
 .lens-introduction>p{font-size:14px;line-height:1.65;margin-bottom:22px}
 .lens-instructions,.experience-note{display:none}
 .time-lens{padding:16px;border-radius:12px;scroll-margin-top:8px;max-width:520px;margin-inline:auto}
 .time-lens:before{inset-inline:20px}
 .lens-topline{padding-bottom:14px;align-items:flex-start;gap:12px}
 .lens-topline .mono{font-size:10px;line-height:1.5;letter-spacing:.3px}
 .lens-topline .lens-demo{font-size:9px;line-height:1.7;letter-spacing:0;text-align:right}
 .lens-heading{padding-top:17px;min-height:83px;gap:10px}
 #hero-lens-status{font-size:10px;letter-spacing:.3px;line-height:1.5;margin-bottom:7px}
 .lens-heading h2{font-size:25px;line-height:1.18;letter-spacing:-.9px}
 .lens-asset{font-size:11px;padding:8px;line-height:1.4;flex-shrink:0}
 .lens-horizons{margin-top:16px;gap:10px;align-items:center}
 .lens-horizons>.mono{font-size:10px;letter-spacing:.2px;max-width:66px;line-height:1.5}
 .lens-horizons>div{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:260px}
 .lens-horizons button{min-width:44px;min-height:44px;font-size:12px;border-radius:5px}
 .lens-actions{margin-top:16px;gap:8px;min-height:54px}
 .lens-actions .button{min-width:0;min-height:54px;font-size:14px;line-height:1.35;white-space:normal;padding:12px;border-radius:5px}
 .lens-actions .utility-button{max-width:100px;min-width:82px;min-height:54px;padding:8px;font-size:12px;line-height:1.4;border-radius:5px}
 .lens-prices{order:5;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:9px;padding-top:17px;margin-top:18px}
 .lens-prices>div>.mono{font-size:10px;letter-spacing:0;line-height:1.45;min-height:32px}
 #hero-horizon{display:block;margin:3px 0 0;font-size:10px}
 .lens-prices strong{font-size:30px;line-height:1.2;letter-spacing:-1px;margin-top:7px}
 .lens-price-arrow{font-size:17px;align-self:end;line-height:1.2;padding-bottom:8px}
 .lens-canvas{order:6;height:180px;margin:12px -4px 0}
 .lens-canvas text{font-size:10px}
 .lens-detail{order:7;font-size:12px;line-height:1.6;min-height:38px;margin:8px 0}
 .lens-expand{order:8;min-height:44px;font-size:12px;line-height:1.5;padding:8px 0;gap:10px;text-align:center}
 .foresight-story.section{padding-block:48px 40px}
 .story-intro{padding-inline:20px;margin-bottom:23px}
 .story-intro .section-label{font-size:10px;letter-spacing:.5px;line-height:1.5;margin-bottom:18px}
 .story-intro h2{font-size:clamp(30px,8.5vw,43px);letter-spacing:-1.6px;line-height:1.2;margin-bottom:20px}
 .story-intro>p{font-size:14px;line-height:1.75}
 .story-foundation{max-width:none}.story-foundation .foundation-status{font-size:13px}
 .futures-art{height:240px}
 .futures-art figcaption{font-size:9px;line-height:1.5;letter-spacing:.4px;inset-inline:20px}
 .horizon-story{padding:15px 20px 0}
 .horizon-story article{grid-template-columns:76px minmax(0,1fr);gap:20px;padding-block:20px}
 .horizon-number{font-size:56px}.horizon-number>span{font-size:12px;margin-left:7px}
 .horizon-story h3{font-size:19px;line-height:1.25}.horizon-story p{font-size:13px;line-height:1.65}
 .forecast-section{padding:48px 16px 52px}
 .forecast-section .section-heading h2{font-size:clamp(32px,8.7vw,42px);line-height:1.12}
 .forecast-section .section-heading>p{font-size:14px;line-height:1.65;margin-top:17px}
 .record-story,.chain-story{padding:48px 20px}
 .record-manifesto .section-label,.chain-story .section-label,.build-story .section-label{font-size:10px;line-height:1.6;letter-spacing:.3px}
 .record-manifesto h2,.chain-story .section-heading h2,.build-story h2{font-size:clamp(34px,9.5vw,44px);line-height:1.15}
 .record-manifesto>p,.chain-story .section-heading>p,.build-story>div>p{font-size:14px;line-height:1.75}
 .model-research summary{font-size:14px;min-height:52px;padding-block:14px}
 .model-research p{font-size:13px;line-height:1.7}
 .record-disclosure>summary{min-height:100px;padding:23px 49px 23px 20px}
 .record-disclosure>summary .mono{font-size:10px;line-height:1.5}
 .record-disclosure>summary strong{font-size:25px}
 .record-disclosure .prophecy-main{padding:20px}
 .record-disclosure .prophecy-main p,.record-details dd{font-size:12px;line-height:1.65}
 .chain-story .venue>span:nth-child(2){font-size:20px;line-height:1.4}
 .chain-story .venue>span:nth-child(2)>small{font-size:12px;line-height:1.5}
 .chain-story .venue-detail{padding:24px 20px}.chain-story .venue-detail p{font-size:14px;line-height:1.7}
 .build-story{padding:8px 20px 48px}
 .build-stages{margin-top:28px}.build-stages .mono{font-size:11px;line-height:1.5}
 .build-stages p{font-size:14px;line-height:1.65}.build-label{font-size:10px;line-height:1.5}
 .launch-closing{padding:65px 20px 75px}
 .launch-closing>.mono{font-size:9px;line-height:1.6;letter-spacing:.5px}
 .launch-closing h2{font-size:clamp(46px,13vw,64px);line-height:1.03}
 .launch-closing .button{width:100%;max-width:440px;min-height:54px;font-size:14px;padding:16px 18px}
 footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
 .footer-top{flex-wrap:wrap;gap:18px}.footer-top>a{min-height:44px;display:inline-flex;align-items:center}
 .footer-top>.mono{font-size:10px;line-height:1.5}.footer-bottom p{font-size:12px;line-height:1.75}
 .footer-bottom>.mono{font-size:10px;line-height:1.65}
}
@media(max-width:360px){
 .launch-header{padding-inline:16px;gap:10px}.launch-header .brand{font-size:16px;letter-spacing:3px}
 .launch-header .nav-cta{font-size:11px;padding-inline:10px}.launch-header .nav-cta span{margin-left:8px}
 .launch-hero{padding:calc(88px + env(safe-area-inset-top)) 16px 24px}.launch-kicker{font-size:8px;letter-spacing:.25px;gap:6px}
 .launch-hero h1{font-size:31px;margin-bottom:15px}.launch-promise{font-size:15px;line-height:1.5}
 .launch-art{height:215px}.launch-bottom{gap:8px 12px;font-size:8px}.launch-development{font-size:8px}
 .lens-experience.section{padding-inline:12px}.time-lens{padding:14px}.lens-topline .mono{font-size:9px}
 .lens-heading h2{font-size:23px}.lens-heading{gap:8px}.lens-asset{font-size:10px}
 .lens-horizons>.mono{max-width:60px;font-size:9px}.lens-prices strong{font-size:27px}.lens-canvas{height:168px}
 .horizon-story article{grid-template-columns:68px minmax(0,1fr);gap:16px}.horizon-story h3{font-size:18px}
}
@media(max-width:760px) and (max-height:700px){
 .launch-hero{padding-top:calc(84px + env(safe-area-inset-top))}.launch-kicker{margin-bottom:10px}.launch-hero h1{margin-bottom:12px}
 .launch-promise{font-size:15px}.launch-art{height:190px}.launch-model-link{min-height:44px}
 .launch-bottom{margin-top:4px;padding-top:12px}.lens-canvas{height:160px}
}
@media(max-width:760px) and (orientation:landscape){
 .launch-art{height:200px}.launch-hero{padding-top:calc(88px + env(safe-area-inset-top))}.launch-hero h1{font-size:44px}
}
@media(forced-colors:active){.launch-art,.launch-art:after{display:none}}
/* Observatory mobile overrides. Append after the current site styles.
   Existing IDs, shared state, desktop layouts and [hidden] behavior stay intact. */
@media (max-width: 760px) {
  #forecast .demo-tools {
    gap: 10px;
  }

  #forecast .chain-label {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .2px;
  }

  #forecast .demo-tools > div {
    width: 100%;
    gap: 8px;
  }

  #forecast .demo-tools .utility-button {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
  }

  #forecast .share-feedback {
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  #forecast #demo-share-url {
    min-width: 0;
    min-height: 48px;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    line-height: 1.4;
  }

  #demo-terminal .terminal-top {
    gap: 8px;
    padding: 13px 12px;
  }

  #demo-terminal .terminal-title,
  #demo-terminal .demo-tag {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .1px;
  }

  #demo-terminal .terminal-title {
    min-width: 0;
  }

  #demo-terminal .terminal-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    padding: 12px;
  }

  #demo-terminal .horizon-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    min-width: 0;
  }

  #demo-terminal .horizon-control > .mono,
  #demo-terminal .scenario-controls > .mono {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .3px;
  }

  #demo-terminal .terminal-controls > .segmented,
  #demo-terminal .horizon-control .segmented,
  #demo-terminal .scenario-controls .segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  #demo-terminal .segmented button,
  #demo-terminal .scenario-controls .segmented button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 5px;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: normal;
  }

  #demo-terminal .scenario-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 12px;
  }

  #demo-terminal .demo-steps li {
    min-width: 0;
    padding: 10px 3px;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0;
  }

  #demo-terminal .demo-steps li > span {
    font-size: 11px;
  }

  #demo-terminal .walkthrough-main {
    gap: 12px;
    padding: 16px 12px;
  }

  #demo-terminal .stage-copy > .mono {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .3px;
  }

  #demo-terminal .stage-copy h3 {
    font-size: 23px;
    line-height: 1.2;
    margin: 8px 0;
  }

  #demo-terminal .stage-copy p {
    min-height: 0;
    font-size: 14px;
    line-height: 1.55;
  }

  #demo-terminal .walkthrough-actions {
    margin: 0;
    gap: 8px;
  }

  #demo-terminal .walkthrough-actions .button {
    min-height: 48px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
  }

  #demo-terminal .playback-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(74px, .5fr);
    gap: 8px;
    margin: 0;
  }

  #demo-terminal .playback-controls .utility-button {
    min-width: 0;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
  }

  #demo-terminal .motion-note {
    font-size: 12px;
    line-height: 1.5;
  }

  /* The stage heading and comparison already convey this summary. */
  #demo-terminal .scene-summary,
  .demo-focus #demo-terminal .scene-summary {
    display: none;
  }

  #demo-terminal .demo-visual,
  .demo-focus #demo-terminal .demo-visual {
    min-width: 0;
    padding: 16px 12px;
  }

  #demo-terminal .chart-heading .mono {
    font-size: 11px;
    line-height: 1.5;
  }

  #demo-terminal .chart-price {
    font-size: 26px;
    line-height: 1.2;
  }

  #demo-terminal .chart-price span {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  #demo-terminal .chart-key {
    font-size: 11px !important;
    gap: 6px;
    letter-spacing: 0;
  }

  #demo-terminal .time-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding-top: 10px;
  }

  #demo-terminal .time-slider label {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .2px;
    white-space: normal;
  }

  #demo-terminal .time-slider output {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  #demo-terminal .time-slider input {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
  }

  #demo-terminal .vision-label {
    min-height: 0;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0;
    gap: 4px;
  }

  #demo-terminal .vision-price {
    min-height: 0;
    margin-top: 8px;
  }

  #demo-terminal .vision-price strong {
    font-size: 24px;
    line-height: 1.2;
  }

  #demo-terminal #vision-move {
    font-size: 12px;
    line-height: 1.5;
  }

  #demo-terminal .vision-comparison p {
    min-height: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  #demo-terminal .vision-comparison .vision-verdict {
    min-height: 0;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.5;
  }

  #demo-terminal .quantile-details summary {
    min-height: 48px;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.5;
  }

  #demo-terminal .quantile-details summary .mono {
    float: none;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  #demo-terminal .forecast-metric > span,
  #demo-terminal .forecast-metric small {
    font-size: 11px;
    line-height: 1.5;
  }

  #demo-terminal .forecast-metric strong {
    font-size: 20px;
    line-height: 1.3;
  }

  #demo-terminal .record-area,
  .demo-focus #demo-terminal .record-area {
    min-height: 0;
    margin-top: 12px;
    padding-top: 14px;
  }

  #demo-terminal[data-stage="0"] .record-area,
  #demo-terminal[data-stage="1"] .record-area {
    display: none;
  }

  #demo-terminal[data-stage="2"] .record-area,
  #demo-terminal[data-stage="3"] .record-area,
  #demo-terminal[data-stage="4"] .record-area {
    display: block;
  }

  #demo-terminal .record-preview {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #demo-terminal .record-preview .mono,
  #demo-terminal .record-preview time {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  #demo-terminal .record-preview strong {
    font-size: 20px;
    line-height: 1.3;
  }

  #demo-terminal .decision-strip .mono,
  #demo-terminal .activity-panel > .mono {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .2px;
  }

  #demo-terminal .decision-strip strong {
    font-size: 18px;
    line-height: 1.4;
  }

  #demo-terminal .decision-strip p,
  #demo-terminal #demo-events li {
    font-size: 14px;
    line-height: 1.55;
  }

  #demo-terminal #demo-events time {
    font-size: 11px;
    line-height: 1.5;
  }

  #demo-terminal .demo-status {
    min-height: 0;
    font-size: 13px;
    line-height: 1.5;
    padding: 12px;
  }

  #demo-terminal .terminal-footer,
  .demo-focus #demo-terminal .terminal-footer {
    font-size: 14px;
    line-height: 1.55;
    padding: 14px 12px;
  }

  #demo-terminal .terminal-footer .mono {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .2px;
  }
}

@media (max-width: 360px) {
  #demo-terminal .quantile-details .forecast-readout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #demo-terminal .quantile-details .forecast-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
  }

  #demo-terminal .quantile-details .forecast-metric + .forecast-metric {
    border-top: 1px solid var(--line);
  }

  #demo-terminal .quantile-details .forecast-metric > span {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }

  #demo-terminal .quantile-details .forecast-metric strong {
    margin: 0;
    white-space: nowrap;
  }
}