/* Phones, 600px and under (the phone layer, 3 October 2026): the launch night's phone rules, moved out of
   homepage-world.css unchanged apart from Discovery's box in K.2 (a later owner change, noted there). Every page links
   this file with media="(max-width:600px)" immediately after homepage-world.css, so the cascade order is the one they
   had at the end of that file. The menu's Industries card (every page) comes first: it was the only block in the middle
   of the file, and nothing after it there touches the same elements. */
/* Phones (3 October 2026, launch): under its button the card covered Demos and most of Pricing. Here it opens beside its
   button instead, on the same line, where it covers nothing and moves nothing; its label may take two lines. */
@media (max-width:600px){
 .world-industries--menu .world-industries-list{left:calc(100% + 12px);top:50%;transform:translateY(-50%);min-width:0;width:max-content;max-width:calc(100vw - 100% - 2 * var(--frame-inset) - 60px)}
 .world-industries--menu .world-industries-list a[href]{white-space:normal}
 .world-industries--menu.is-open .world-industries-list{animation-name:world-industries-in-side}
}
@keyframes world-industries-in-side{from{opacity:0;transform:translate(-6px,-50%)}}

/* --- K. Portrait phones, the launch pass (3 October 2026) ------------------------------------------------------------
   600px wide and under, outside the pinned stage. Each band is filled with its art instead of an empty row: page.js
   measure() sizes the bands to match (PHONE_OVERLAY, PHONE_RUNWAY). Heights use svh and lvh, never dvh, so nothing moves
   when the address bar shows or hides. Wider screens and the pinned stage are untouched. */
@media (max-width:600px){
 /* 0. On touch phones the canvas is held at the large viewport's height (page.js holdCanvasHeight sets --world-held-h), so
    the address bar showing or hiding never stretches it; without the variable it is 100dvh, as everywhere else. */
 .world-canvas{height:var(--world-held-h,100dvh)}

 /* 1. The hero is exactly the first screen with the address bar showing (100svh: its top inset, the header row, the
    poster, the horizon), both actions above the fold; the planet's crown sits at the panel's foot and the story follows. */
 body:not(.world-pinned) #hero{--hero-crown:clamp(52px,7svh,72px);--hero-pb:calc(var(--hero-crown) + 20px);--w4-top:72px;padding-bottom:var(--hero-pb)}
 body:not(.world-pinned) #hero .world-copy::before{height:calc(100svh - var(--frame-inset) - var(--w4-top) - var(--hero-pb))}
 body:not(.world-pinned) #hero .world-hero-horizon-planet{top:calc(100% - var(--hero-crown))}
 body:not(.world-pinned) #hero .world-hero-horizon-glow{height:42%}
 body:not(.world-pinned) #hero .world-hero-lockup{margin-bottom:16px}
 body:not(.world-pinned) #hero .world-title{margin-bottom:14px}
 body:not(.world-pinned) #hero .world-hero-sub{margin-bottom:20px}
 body:not(.world-pinned) #hero .world-actions{gap:10px;flex-wrap:wrap}
 body:not(.world-pinned) #hero .world-actions>a.world-button,body:not(.world-pinned) #hero .world-actions>a.world-text-link[data-demo]{min-height:46px;padding:0 13px 0 15px;gap:12px;font-size:14px}

 /* 2. Discovery (the owner, later on 3 October): the land is not held behind the copy. Its ridge sits 20px under the last
    paragraph (the row gap, page.js PHONE_LAND_GAP), full-bleed, and the copy and the land scroll together as one block; the
    band ends with the land, so nothing empty follows it. The box is always taller than 0.75 wide to 1 tall, so the land
    keeps its own composition (a 1.05:1 band, discovery-terrain.js) at the box's top with more near ground below, and with
    the copy's end in view it fills the screen. It rises under the copy by the sky above the ridge (--land-lift, 21.8% of
    the width; the sky is the canvas's own, so the box's top edge never shows). page.js measure() reads the lift back.
    PHONE DISCOVERY (owner, later still: "can you please shorten it?"): the box is the land's 1.05:1 band plus 2% of the width
    of near ground; discovery-terrain's phone render keeps the band at the box's top. */
 body.world-live:not(.world-pinned) .world-section.world-section--discovery{--land-h:calc(100vw / 1.05 + 2vw);--land-lift:calc(.218 * 100vw);grid-template-rows:auto auto;row-gap:20px;padding-bottom:0}
 body.world-live:not(.world-pinned) .world-section.world-section--discovery .world-art-track{grid-row:2;grid-column:1;width:auto;min-height:0;margin:calc(-1 * var(--land-lift)) -5vw 0;pointer-events:none}
 body.world-live:not(.world-pinned) .world-section--discovery .world-art{position:relative;top:0;height:var(--land-h);min-height:0}

 /* 3. Commitment: the whole window, centred (min(100vw - 32px, 70svh)), under its copy; the card inside the glass, across
    its top (about 72% of the glass), 13px type. The band is the copy and the window, which holds centred in the screen for
    a short runway (page.js PHONE_RUNWAY) before the dive into Boundaries. */
 body:not(.world-pinned) .world-section--commitment{--ph-d:min(100vw - 32px,70svh);--ph-drop:0px;--ph-top:max(16px,(100svh - var(--ph-d)) / 2);--ph-cw:calc(.575 * var(--ph-d))}
 body:not(.world-pinned) .world-section--commitment .world-art-track{min-height:0}
 body:not(.world-pinned) .world-section--commitment .world-art{top:var(--ph-top);margin-right:0;padding-top:0}
 body:not(.world-pinned) .world-porthole-frame{margin-left:calc((100% - var(--ph-d)) / 2)}
 body:not(.world-pinned) .world-section--commitment .world-comms{top:calc(var(--ph-top) + .13 * var(--ph-d));align-self:start;justify-self:start;width:var(--ph-cw);margin-top:calc(.13 * var(--ph-d));margin-left:calc((100% - var(--ph-cw)) / 2);
  padding:8px 10px 9px 8px;gap:5px;border-radius:12px;font-size:13px;line-height:1.3}
 body:not(.world-pinned) .world-section--commitment .world-comms::before,body:not(.world-pinned) .world-section--commitment .world-comms::after{display:none}
 body:not(.world-pinned) .world-section--commitment .world-comms-row{grid-template-columns:18px minmax(0,1fr);gap:6px}
 body:not(.world-pinned) .world-section--commitment .world-comms-who{width:18px;height:15px;margin-top:1px}
 body:not(.world-pinned) .world-section--commitment .world-comms-grille{padding:3px 0 0 3px;gap:3px}
 body:not(.world-pinned) .world-section--commitment .world-comms-grille i{height:12px}
 body:not(.world-pinned) .world-section--commitment .world-comms-lines{min-height:34px;gap:0}
 body:not(.world-pinned) .world-section--commitment .world-comms-typing{padding:6px 0 2px}
 body:not(.world-pinned) .world-section--commitment .world-comms-min{top:7px;right:7px;width:22px;height:22px}
 body:not(.world-pinned) .world-section--commitment .world-comms.has-min .world-comms-row:not(.world-comms-row--reply){padding-right:24px}

 /* 4, 6, 7. Boundaries' grid, Who it's for's sunbeams and Ask's nursery are drawn full-bleed behind their copy: their art
    boxes cover the band instead of taking a row of their own, so the copy reads straight over the scene. */
 body.world-live:not(.world-pinned) .world-section.world-section--boundaries,
 body.world-live:not(.world-pinned) .world-section.world-section--audience,
 body.world-live:not(.world-pinned) .world-section.world-section--ask{grid-template-rows:auto}
 body.world-live:not(.world-pinned) .world-section.world-section--boundaries .world-art-track,
 body.world-live:not(.world-pinned) .world-section.world-section--audience .world-art-track,
 body.world-live:not(.world-pinned) .world-section.world-section--ask .world-art-track{position:absolute;inset:0;grid-row:auto;grid-column:auto;min-height:0;z-index:0;pointer-events:none}
 body.world-live:not(.world-pinned) .world-section.world-section--boundaries .world-art,
 body.world-live:not(.world-pinned) .world-section.world-section--audience .world-art,
 body.world-live:not(.world-pinned) .world-section.world-section--ask .world-art{position:relative;top:0;height:100%;min-height:0}
 body.world-live:not(.world-pinned) .world-section.world-section--ask .world-copy{grid-row:1}
 /* On phones the lines are drawn wider, so besides the sheet's own dulling under the copy (boundaries-fabric.js, fed by
    page.js updateFabricText, which also gives the copy its weight there), the copy carries a soft halo of the section's
    black to keep the lines off its letters. */
 body.world-live:not(.world-pinned) .world-section--boundaries .world-copy{text-shadow:0 0 2px #161614,0 0 6px #161614,0 0 14px rgb(22 22 20 / .85)}
}
/* Reduced motion keeps Commitment's window and card in place (no sticky hold), as wider screens do. */
@media (max-width:600px) and (prefers-reduced-motion:reduce){
 body:not(.world-pinned) .world-section--commitment .world-art,body:not(.world-pinned) .world-section--commitment .world-comms{position:relative;top:auto}
}

/* --- K.A Who it's for and Ask, portrait phones (3 October 2026, launch night) -------------------------------------------
   The scenes themselves take phone settings in their modules (audience-rays.js and audience-nebula.js, PHONE blocks), and
   page.js hands them the scrolling copy's box (PHONE AUDIENCE, PHONE ASK). Here only Ask's band: a breath of the nursery
   below the two buttons before the footer comes over it (it was 50px), so the copy and the buttons sit inside the scene
   rather than on its last strip. page.js measure() reads the padding, so the band and the footer follow. */
@media (max-width:600px){
 body.world-live:not(.world-pinned) .world-section.world-section--ask{padding-bottom:max(50px,18svh)}
}

/* K.P Privacy, portrait phones (3 October 2026, launch night) -----------------------------------------------------------
   600px wide and under, outside the pinned stage, with the canvas live and motion allowed. The eclipse is the band's hero:
   a clear sky opens above the chat window (88vw, mirrored as PHONE.sky in world/privacy-eclipse.js, which centres the sun
   in it), so the window and the copy never cover the sun. It is the art box's own padding, so page.js measure() counts it
   in the band. No-JS, reduced motion and the WebGL fallback draw no eclipse and keep the window at the band's top. */
@media (max-width:600px) and (prefers-reduced-motion:no-preference){
 body.world-live:not(.world-pinned) .world-section--privacy .world-art{padding-top:88vw}
}

/* K.C Commitment and hero, portrait phones (3 October 2026, later) ----------------------------------------------------
   600px wide and under, outside the pinned stage; wider screens are untouched.
   1. The hero's horizon rises in about half the desktop time (planet 1.6s from .2s, the haze 1.8s from .3s), so its entry
      has finished before a thumb can scroll the hero away; the end state, and the haze's breathing after it, are the same.
      Longhands only, so Pause (animation-play-state) and reduced motion (animation:none) still apply.
   2. Commitment's timing is page.js (PHONE_RUNWAY[2], commitmentFlow): the window settles as it reaches mid-screen, holds
      there about half a screen with the card in the glass, then the card rises away and the view dives in. */
@media (max-width:600px){
 body:not(.world-pinned) #hero .world-hero-horizon-planet{animation-duration:1.6s;animation-delay:.2s}
 body:not(.world-pinned) #hero .world-hero-horizon-glow{animation-duration:1.8s,9s;animation-delay:.3s,2.1s}
}