/* Phone snapping, on screens 600px wide or narrower (see snap-prototype.js). Pages is the default:
   strict snapping with every section fitted to one screen under the nav. ?snap=soft settles a section
   at the top when scrolling stops near it; ?snap=strict moves one stop per swipe; ?snap=off is off. */
.snap-dots{display:none}
.snap-stop{display:none}
@media(max-width:600px){
 html[data-snap]{scroll-padding-top:69px}
 html[data-snap=soft]{scroll-snap-type:y proximity}
 html:is([data-snap=strict],[data-snap=pages]){scroll-snap-type:y mandatory}
 /* scroll-margin-top 0: the site's own 80–96px anchor offsets would otherwise make every snap land that far low. */
 html[data-snap] :is(.snap-stop,#overview,#live-coverage,#capabilities,#spectrum-summary,#drones,#engagement-outcomes,.tl-contact){scroll-snap-align:start;scroll-margin-top:0}
 html[data-snap] :is(#spectrum-summary,#engagement-outcomes) .eng-stage{scroll-snap-align:center}
 html[data-snap] footer{scroll-snap-align:end}
 html:is([data-snap=strict],[data-snap=pages]) :is(.snap-stop,#overview,#live-coverage,#capabilities,#spectrum-summary,#drones,#engagement-outcomes,.tl-contact,:is(#spectrum-summary,#engagement-outcomes) .eng-stage){scroll-snap-stop:always}
 html[data-snap] .snap-stop{display:block;position:absolute;left:0;width:1px;height:1px;pointer-events:none}
 html[data-snap] .snap-stop--banner{top:69px}
}

/* Pages: each section is exactly one screen below the nav. Its blocks (copy, image, diagram) share
   the spare height evenly above, between and below them, and all text is centred. Heights use the
   small viewport (toolbars showing), which stays fixed while the browser's toolbar slides in and
   out: a height that followed it would resize every page and move every snap point mid-swipe. */
@media(max-width:600px){
 html[data-snap=pages]{--snap-page:calc(100svh - 69px)}
 html[data-snap=pages] .thunderlink-entrance{height:100svh}
 html[data-snap=pages] .tl-page :is(#overview,#live-coverage,#capabilities,#spectrum-summary,#drones,#engagement-outcomes){box-sizing:border-box;min-height:var(--snap-page);display:grid;grid-template-columns:minmax(0,1fr);align-content:space-evenly;gap:1rem;padding-block:1rem;margin-block:0;border-top:0}
 /* The diagram groups' own padding would leave strips between pages that flash past mid-swipe. */
 html[data-snap=pages] .tl-page .tl-content--diagrams{padding-block:0;border-top:0}
 html[data-snap=pages] .tl-page :is(.tl-feature__copy,.tl-section-heading) h2{font-size:1.8rem;line-height:1.08;margin-bottom:1rem}
 html[data-snap=pages] .tl-page .tl-section-heading h2{margin-bottom:.75rem}
 html[data-snap=pages] .tl-page :is(.tl-feature__copy,.tl-section-heading) p{font-size:.95rem;line-height:1.5}
 html[data-snap=pages] .tl-page :is(#overview,#live-coverage,#capabilities,#hardware-feedback,#spectrum-summary,#drones,#engagement-outcomes,.tl-contact){text-align:center}
 html[data-snap=pages] .tl-page :is(.tl-feature__copy,.tl-section-heading,.tl-intro__body) :is(h2,p){margin-inline:auto}

 /* Intro: a large centred name, the demo and the copy as three evenly spaced rows; no spec rows here. */
 html[data-snap=pages] .tl-page #overview{padding-block:.75rem}
 html[data-snap=pages] .tl-intro__top{display:contents}
 html[data-snap=pages] .tl-intro .tl-intro__name{font-size:min(17vw,5rem);margin:0;padding-right:.06em}
 html[data-snap=pages] .tl-page .tl-intro .tl-specs{display:none}
 html[data-snap=pages] .tl-intro__demo{width:84%;justify-self:center}
 /* Face-on demo: no tilt; the perspective stays, so lifted windows still come forward. */
 html[data-snap=pages] .tl-intro .tl-demo__stage{transform:none}
 html[data-snap=pages] .tl-intro__lead .tl-intro__body{gap:1rem;align-items:center}
 html[data-snap=pages] .tl-intro__body h2{font-size:1.8rem}
 html[data-snap=pages] .tl-intro__body p{font-size:.95rem;line-height:1.5}

 /* Map mock-up scaled as a whole, so its overlays stay in proportion. */
 html[data-snap=pages] .tl-page #live-coverage .cc-console{zoom:.6;width:100%}

 /* Hardware cycle: the pinned scene is one page, so its copy and diagram share the screen. */
 html[data-snap=pages] .feedback-story__scene{min-height:var(--snap-page)}
 /* Green screen like reverse engineering, with the diagram's light ink from the desktop green panel. */
 html[data-snap=pages] .thunderlink-green-streak .feedback-story__scene{background:var(--streak-color)}
 html[data-snap=pages] .thunderlink-green-streak .feedback-cycle{--cycle-ink:#eff2eb;--cycle-line:#e1e6df;--cycle-upgrade:#a1d09c;--lab-active:#d5efd0;--lab-caption:#e6ece2}
 html[data-snap=pages] .tl-page .feedback-story #hardware-feedback{flex:1 1 auto;align-content:space-evenly;gap:1rem;padding-block:1rem}
 html.prototype-diagonal[data-snap=pages] #hardware-feedback .tl-feature__copy{padding-bottom:0}
 /* Heading plus one short line; the desktop paragraphs, compatibility logos and trademarks stay out. */
 html[data-snap=pages] #hardware-feedback .tl-feature__copy > p:not(.tl-phone-copy),
 html[data-snap=pages] #hardware-feedback :is(.feedback-cycle__compatibility,.feedback-cycle__marks){display:none}
 html[data-snap=pages] #hardware-feedback .tl-phone-copy{display:block}
 /* Battlefield data feeds the Engineer from the top: a small radar beside its label, centred (cycle.js). */
 html[data-snap=pages] #hardware-feedback .feedback-cycle{--layout-field-top:1;--layout-field-size:50;--layout-field-gap:46}
 html[data-snap=pages] #hardware-feedback [data-node=field]{flex-direction:row;gap:6px;width:max-content}
 html[data-snap=pages] #hardware-feedback [data-node=field] strong{font-size:11px;white-space:nowrap}

 /* The cycle plays as a timed animation on its own page instead of following the scroll (story.js). */
 html[data-snap=pages] .feedback-story--autoplay{height:auto}
 html[data-snap=pages] .feedback-story--autoplay .feedback-story__scene{position:relative;top:0}

 /* Reverse engineering and the EM toolkit: three cards swipe sideways inside the one page. */
 /* Every card, first and last included, settles centred on screen: equal 10vw lead-in each side, the end one as a spacer. */
 html[data-snap=pages] .tl-page :is(#spectrum-summary,#engagement-outcomes) .engineering-stages{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--page-gutter));padding-inline:10vw 0;scrollbar-width:none}
 html[data-snap=pages] .tl-page :is(#spectrum-summary,#engagement-outcomes) .engineering-stages::-webkit-scrollbar{display:none}
 html[data-snap=pages] .tl-page :is(#spectrum-summary,#engagement-outcomes) .engineering-stages::after{content:'';flex:0 0 calc(10vw - .75rem)}
 html[data-snap=pages] .tl-page :is(#spectrum-summary,#engagement-outcomes) .eng-stage{flex:0 0 80vw;width:auto;scroll-snap-align:center}
 /* One dot per card under the looping cards (snap-prototype.js); the current card's dot is solid. */
 html[data-snap=pages] .snap-dots{display:flex;justify-content:center;gap:2px}
 /* Room for the dots: this page sits a little tighter to its edges and between its blocks. */
 html[data-snap=pages] .tl-page #spectrum-summary{gap:.5rem;padding-block:.5rem}
 html[data-snap=pages] .tl-page #spectrum-summary .tl-section-heading h2{margin-bottom:.6rem}
 html[data-snap=pages] .tl-page #spectrum-summary .tl-section-heading p{font-size:.88rem;line-height:1.45}
 html[data-snap=pages] .tl-content #spectrum-summary .eng-stage .eng-description{font-size:.8rem;line-height:1.4;padding-block-start:.6rem}
 html[data-snap=pages] .snap-dots button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
 html[data-snap=pages] .snap-dots button::before{content:'';width:7px;height:7px;border-radius:50%;background:#eff2eb;opacity:.35;transition:opacity .3s,transform .3s}
 html[data-snap=pages] .snap-dots button[aria-current]::before{opacity:1;transform:scale(1.2)}
 html[data-snap=pages] .tl-content :is(#spectrum-summary,#engagement-outcomes) .eng-stage .eng-description{font-size:.85rem;line-height:1.45;padding-block-start:.75rem}

 /* The shared toolkit cards use a tighter stack and captions on phone pages. */
 html[data-snap=pages] .tl-page #engagement-outcomes{gap:.5rem;padding-block:.5rem}
}
@media(max-width:600px){

 /* Contact and footer share the last page. */
 html[data-snap=pages] .tl-contact{box-sizing:border-box;min-height:calc(var(--snap-page) - var(--snap-footer,0px));display:flex;flex-direction:column;justify-content:center;align-items:center;padding-block:1.5rem}
 html[data-snap=pages] footer{padding-block:1.5rem 1rem;text-align:center}
 html[data-snap=pages] footer .footer__top{gap:1.25rem;justify-items:center}
 html[data-snap=pages] footer :is(.footer__nav,.footer__badges){justify-content:center}
 html[data-snap=pages] footer .footer__col ul{align-items:center;justify-content:center}
 html[data-snap=pages] footer .footer__badge{height:84px}
 html[data-snap=pages] footer .footer__bottom{margin-top:1.25rem;padding-top:1rem;align-items:center;justify-content:center}
}