/* phone2-revert.css (r94): overrides for the sections Sabrina sent back to
   the r76 OLD phone design, scoped under .p2 (only active while content.js
   says "phone design: new", so it never touches "phone design: old" or PC).
   Everything else about these sections is the untouched r76 CSS in
   css/mobile.css and css/sections.css; this file only fixes what Sabrina
   flagged. */

/* ---------------------------------------------------------------- full bleed
   r94: on a real phone the toolbar hides after the page settles, the real
   visible screen grows past --app-h (measured once at load), and a section
   sized to exactly --app-h then falls short, showing a strip of the next
   section at its bottom. max(var(--app-h),100lvh) means the section is
   never shorter than the LARGEST the real viewport can be. This also fixes
   the CEO quote: fall.js's own scroll math (js/fall.js "pinned()") reads
   the LIVE innerHeight, but the section's CSS height was fixed to the
   stale --app-h; once the toolbar hid, the two fell out of sync and the
   word-by-word reveal finished over a much shorter scroll than it was built
   for, reading as "not spread out". Sizing the section itself off the same
   live-viewport figure keeps fall.js's math and the rendered box in sync,
   so the r76 pacing is restored. */
.p2 #statement{
  height:max(var(--app-h,100svh),100lvh);
  min-height:max(var(--app-h,100svh),100lvh);
}
.p2 #industries,
.p2 #publish{
  min-height:max(var(--app-h,100svh),100lvh);
}
.p2 #independent{
  height:calc(max(var(--app-h,100svh),100lvh) * 2.8);
}
.p2 .fall{
  height:max(var(--app-h,100svh),100lvh);
}
.p2 #demo{
  min-height:max(var(--app-h,100svh),100lvh);
}
.p2 .demo__stage{
  height:max(var(--app-h,100svh),100lvh);
}

/* ---------------------------------------------------------------- industries
   r94: the phone gets the SAME crossfade as the computer (js/page.js sets
   .ind--fade on .p2 as well as on a computer now); swipe and tap still move
   to the next/previous industry (unchanged pointer handlers), only the
   visual change is a fade instead of a sideways slide. The dots and the
   gold fill bar under the photo are untouched. */

/* r98: the phone's industry photos are all the same shape now (the m/ind-*
   -full.webp set, 1080x1620, 2:3). js/mobile.js and js/page.js still churn
   --kw at runtime (a static guess, then a measured desktop ratio, then the
   real phone-photo ratio once it decodes), and each of those writes was
   resizing .ind__stage/.ind__ph live, which read as the title (and the name
   under the photo) jumping during a transition. Locking the number here
   (an author !important beats their inline style writes) makes the stage a
   fixed box that never resizes again, on this phone build only. */
.p2 #industries .ind__stage,
.p2 #industries .ind__ph{
  --kw:.6667 !important;
  --ar:.6667 !important;
}

/* r98: the industry NAME must never double up with the outgoing one mid
   transition (Sabrina, top priority: "the titles of each industries still
   overlap when transitioning"). The photo crossfade is completely
   untouched (still .ind__slide fading exactly as built). js/page.js moves
   the two live .ind__cap nodes (same nodes, same text, same a11y) out from
   inside .ind__ph/.ind__slide onto #ind-stage itself, once, at setup, so
   the name's own opacity is never multiplied by the photo's fade and it can
   run on an independent clock: js/page.js adds/removes .is-shown on the
   moved .p2i-cap: the outgoing name drops to 0 fully first (200ms), only
   THEN does the incoming name start fading in (250ms) after that gap, so
   at most one name is ever readable. This rule repositions the moved node
   to sit exactly where it always sat: centred in the reserved strip above
   the photo (the same var(--caprow) mobile.css already reserves via
   .ind__stage's own height and .ind__ph's top offset), instead of the old
   "bottom:calc(100% + Npx) relative to .ind__ph" math, which no longer
   applies once the node is no longer a child of .ind__ph. */
.p2 #industries .ind__cap.p2i-cap{
  position:absolute;left:0;right:0;top:0;bottom:auto;height:var(--caprow,50px);
  margin:0;padding:0 clamp(16px,4vw,56px);z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  opacity:0;transition:opacity 200ms ease;
}
.p2 #industries .ind__cap.p2i-cap.is-shown{
  opacity:1;transition:opacity 250ms ease;
}
@media (prefers-reduced-motion:reduce){
  .p2 #industries .ind__cap.p2i-cap{transition:none}
}

/* ---------------------------------------------------------------- CEO quote
   r98: Sabrina, the pinned screen must be evenly spread top to bottom (top
   of screen -> the falling pixels' zone -> the line -> the name), not
   centred as one lump that leaves a big band at the top and a small one at
   the bottom. js/fall.js's word reveal, the falling pixels and the sentence
   itself are all untouched; only the vertical layout of the pinned stage
   changes. space-evenly plus a zero height marker (js/fall.js) as the first
   child gives four equal gaps: top of screen, marker (where the pixels
   land), the line, the name, bottom of screen. The old fixed margin-top on
   the line (a hand-set offset above the sentence) and on the name are
   dropped so flexbox alone controls the spacing. */
.p2 #independent .fall__stage{
  justify-content:space-evenly;
}
.p2 #independent .fall__line{
  margin-top:0;
}
.p2 #independent .fall__by{
  margin-top:0;
}
.p2 #independent .p2-fallmark{
  display:block;width:1px;height:0;flex:0 0 auto;
}
/* r102: Sabrina, the quote must fill the screen top to bottom like "We own
   the platform. You own the network." (the statement): the same condensed
   uppercase type, and js/fall.js sizes it so the block of words is as tall
   as the screen allows (about three quarters of it, the pixels' landing
   zone above and the name below share the rest). The word by word grey to
   dark reveal and the falling pixels are untouched. */
.p2 #independent .fall__stage{padding:0 var(--p2-gut,20px)}
.p2 #independent .fall__line{
  width:100%;max-width:none;margin:0;
  font-family:'Archivo',sans-serif;font-stretch:64%;font-weight:800;text-transform:uppercase;
  letter-spacing:-.012em;line-height:.9;text-wrap:balance;
}
.p2 #independent .fall__by{font-size:13px}

/* ---------------------------------------------------------------- who we are
   The r76 accordion already centres itself (flex column, justify-content
   center), but leaves an even but noticeable empty band above and below the
   five strips. Tightening the section padding and sizing the grid off the
   same live-viewport figure as the rest of the page reclaims that slack: the
   title and the five strips use the full height (more room now that the
   section is never shorter than the real screen), still perfectly centred,
   with no dead band top or bottom. */
.p2 #strips{
  min-height:max(var(--app-h,100svh),100lvh);
  padding-top:clamp(14px,3.2dvh,26px);
  padding-bottom:clamp(14px,3.2dvh,26px);
  overflow:hidden;
}
.p2 .strips{
  height:calc(max(var(--app-h,100svh),100lvh) - 2 * clamp(14px,3.2dvh,26px) - var(--gap-title) - 1.25 * var(--title));
}

/* ---------------------------------------------------------------- publish
   r94: no 300ms tap-ambiguity wait on the toggles, so the wipe starts the
   instant a real finger lifts. */
.p2 #publish .seg button{touch-action:manipulation}

/* r94: the pulsing #FF9900 glow (js/mobile.js adds/removes .is-glow) on the
   Breakfast toggle of the FIRST (top) screen, same soft PC "goglow" look,
   no hard edge, until the visitor taps any toggle. */
.p2 #publish .seg button.is-glow{
  animation:p2goglow 2.6s ease-in-out infinite;
}
@keyframes p2goglow{
  0%,100%{box-shadow:0 0 14px 2px rgba(255,153,0,.4),0 0 32px 8px rgba(255,153,0,.16)}
  50%{box-shadow:0 0 20px 5px rgba(255,153,0,.75),0 0 46px 14px rgba(255,153,0,.32)}
}
@media (prefers-reduced-motion:reduce){
  .p2 #publish .seg button.is-glow{animation:none;box-shadow:0 0 18px 4px rgba(255,153,0,.5)}
}

/* ---------------------------------------------------------------- nine facts
   Old one-at-a-time crossfade (page.js "6. the figures", unchanged JS), but
   restyled as a band (about 28-32% of the real screen, no dead space inside
   it) laid over the TOP of the contact photo. #demo's own top screen (the
   headline) starts at 12.9% of its height (see mobile.css "contact: the new
   tall three-screen wall"), so the band's overlap into #demo is kept well
   under that so the headline screen is never covered. The band keeps a solid
   ground for its own (non-overlapping) height, then fades to transparent
   over the small strip it overlaps, so the seam into the photo reads as one
   soft transition rather than a hard cut. Text is bigger and dead centre,
   equal space above and below (a single flex-centred box). The coloured
   word alternates orange/blue fact to fact (the DOM order is fixed and the
   loop always advances by one, so nth-of-type is a stable alternation). */
.p2 #numbers{
  min-height:0;height:clamp(190px,calc(max(var(--app-h,100svh),100lvh) * .30),290px);
  margin-bottom:-52px;   /* overlap: well inside #demo's safe top 12.9% (~109px on a 844px screen) */
  position:relative;z-index:2;
  padding:0 var(--p2-gut,20px) 52px;box-sizing:border-box;   /* r95: centre the text in the visible part, above the 52px overlap */
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(180deg,#050A10 0%,#050A10 68%,rgba(5,10,16,0) 100%);
}
.p2 #numbers .pixfield{display:none}
.p2 .beats{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.p2 .beats__stage{position:relative;width:100%;height:auto;padding:0;display:block}
.p2 .beats__line{
  position:absolute;left:0;right:0;top:50%;
  display:flex!important;flex-direction:row;align-items:baseline;justify-content:center;
  gap:.3em;flex-wrap:nowrap;white-space:nowrap;
  opacity:0;transform:translateY(-50%);
  transition:opacity .36s var(--p2-ease,ease);
}
/* r102: back to the fade (Sabrina: no sliding). Each fact fades in where it
   sits, like the hero count, and the old one fades out fully first
   (page.js still adds .is-out for the ~360ms handoff). Nothing moves. */
.p2 .beats__line.is-on{
  opacity:1;transform:translateY(-50%);
  transition:opacity .5s var(--p2-ease,ease);
}
.p2 .beats__line.is-out{
  opacity:0;transform:translateY(-50%);
  transition:opacity .3s ease-in;
}
.p2 .beats__fig,.p2 .beats__word{
  font-family:'Archivo',sans-serif;font-stretch:64%;font-weight:800;text-transform:uppercase;
  line-height:.9;letter-spacing:-.01em;font-size:clamp(21px,6.6vw,34px);
}
.p2 .beats__fig{color:var(--p2-paper,#F3F1EC)}
.p2 .beats__word{margin-left:0}
.p2 .beats__line:nth-of-type(odd) .beats__word{color:var(--p2-orange,#FF9900)}
.p2 .beats__line:nth-of-type(even) .beats__word{color:var(--p2-blue,#56B0E4)}

/* r98: mobile.css's older "figure on top, word under it" rule for these
   same spans (`.beats__fig,.beats__word{max-width:...;text-wrap:balance}`)
   was still reaching a fact that is too long to sit beside its word on one
   row here (Every feature included. / No hidden fees.), force-wrapping
   each span onto two lines and cramming both halves together. Cancelled
   for this band; a fact that does not fit beside its word on one row gets
   page.js's own .p2-stack instead (below), a clean two-line stack, not a
   forced mid-word wrap. */
.p2 #numbers .beats__fig,
.p2 #numbers .beats__word{
  white-space:nowrap;text-wrap:nowrap;max-width:none;
}
/* the incoming/outgoing name is never both on screen, so a fact that is too
   wide to sit beside its word on one line stacks instead: the fig on its
   own line, the word on its own line under it, both still centred and
   still vertically centred as one block in the band (same .beats__line
   top:50%/translateY(-50%) as every other fact - only the row becomes a
   column). js/page.js measures this per fact and adds .p2-stack. */
.p2 .beats__line.p2-stack{
  flex-direction:column;align-items:center;gap:.14em;
}
.p2 .beats__line.p2-stack .beats__word{margin-left:0}

/* ---------------------------------------------------------------- contact
   Nothing else changes: the r76 wall, headline, fields and button render
   exactly as before. #demo only needs an explicit stacking context so the
   facts band above (z-index:2) always paints over its top edge, never under
   it, whatever else on the page picks up a z-index. */
.p2 #demo{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  /* page.js shows every beat at once under reduced motion (no rotation); on
     the band that would stack eight lines on the same spot, illegible.
     Here they stack normally instead, so the section grows to fit them; the
     tradeoff is this one section is not a thin band under reduced motion,
     but it is readable, and it no longer overlaps the contact photo. */
  .p2 #numbers{height:auto;margin-bottom:0;padding:20px var(--p2-gut,20px)}
  .p2 .beats__stage{height:auto}
  .p2 .beats__line{position:static;transform:none;opacity:1;transition:none;margin-bottom:8px}
  .p2 .beats__line::before{display:none}
}

/* ---------------------------------------------------------------- contact
   r96: three scrims over the wall photo (behind .demo__h and .form, which
   are untouched) switch the "screens" on top to bottom as the section
   arrives; js/phone2/revert.js adds them and times the reveal. Percentages
   match .demo__h/.form exactly (see css/mobile.css "contact: the new tall
   three-screen wall"). Decoration only: the form is never dimmed, disabled
   or reflowed, and any tap or focus in the section lights everything at
   once (js/phone2/revert.js). */
.p2 .p2-cscrim{
  position:absolute;left:13%;right:14%;
  background:#05090F;opacity:.82;pointer-events:none;
  transition:opacity 520ms var(--p2-ease,ease);
}
.p2 .p2-cscrim.is-off{opacity:0}
.p2 .form .btn{transition:text-shadow 640ms var(--p2-ease,ease)}
.p2 .form .btn::after{transition:box-shadow 640ms var(--p2-ease,ease)}
/* r97: the glow sits on the words and the gold bar, not on the whole screen-sized button box */
.p2 .form .btn.p2-cglow{text-shadow:0 0 18px rgba(255,153,0,.5)}
.p2 .form .btn.p2-cglow::after{box-shadow:0 0 12px 2px rgba(255,153,0,.6),0 0 28px 8px rgba(255,153,0,.28)}
@media (prefers-reduced-motion:reduce){
  .p2 .p2-cscrim{transition:none}
  .p2 .form .btn,.p2 .form .btn::after{transition:none}
}