/* atomhome.ai — resets, keyframes and font faces only. No component classes:
   all component styling lives inline on the elements. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #040B13;
  color: #E9F1F7;
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}
a { color: #34E08C; text-decoration: none; }
a:hover { color: #7BEEB4; }
::selection { background: rgba(52,224,140,0.25); color: #E9F1F7; }
input::placeholder, textarea::placeholder { color: #6E7F8F; }

@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes nucleus { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.84); opacity: 0.72; } }
@keyframes pulsering { 0% { transform: scale(0.55); opacity: 0.85; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes drain { 0% { width: 100%; } 80%,100% { width: 0%; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes twinkle { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }

[data-rail-track]::-webkit-scrollbar { height: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* The home page's sticky "45 seconds" sequence only works when a full 100vh
   pane can hold its two columns. Below that, it degrades to a plain stacked
   section with every step and frame visible — nothing is ever clipped.
   (Cannot be expressed inline: it is a media query overriding runtime styles.) */
@media (max-width: 1100px), (max-height: 800px) {
  [data-seq-runway] { height: auto !important; }
  [data-seq-pane] {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    padding: 84px 32px !important;
    align-items: flex-start !important;
  }
  [data-seq-pane] > div:last-child {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  [data-seq-frames] { display: flex !important; flex-direction: column !important; gap: 20px !important; min-height: 0 !important; }
  [data-seq-frame] {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  [data-seq-step] {
    opacity: 1 !important;
    transform: none !important;
    border-color: #122334 !important;
    background: transparent !important;
  }
  [data-seq-bar] { height: 100% !important; }
}

/* Nav reflow. Cannot be inline: these are width breakpoints on the shared nav.
   Above 1240px the whole bar is one row with the ELECTRONS label spelled out;
   the label drops first, then the link group takes its own row deliberately
   rather than letting "Pricing" break off on its own. */
@media (max-width: 1240px) {
  [data-electrons-label] { display: none !important; }
}
@media (max-width: 1060px) {
  [data-navlinks] { order: 3 !important; flex-basis: 100% !important; margin-left: 0 !important; }
}

/* ==========================================================================
   MOBILE LAYOUT — Stage 2c.  Everything from here to the end of the file.

   THE RULE FOR THIS BLOCK, WITHOUT EXCEPTION
   ------------------------------------------
   Every declaration below lives inside a `@media (max-width: ...)` block, so
   none of it is ever evaluated on desktop. Desktop rendering is therefore
   byte-for-byte what it was before Stage 2c — not by careful review, but by
   construction. Do not add a rule here that sits outside a media query, and
   do not add a mobile rule anywhere else in this file.

   WHY EVERYTHING IS !important
   ----------------------------
   These pages carry their component styling in inline style="..." attributes,
   which outrank any stylesheet rule. Overriding them from a stylesheet
   requires !important. That is safe *here specifically* — and only here —
   because these blocks never match above the breakpoint, so an !important
   that cannot be reached on desktop cannot affect desktop. The same
   declaration written outside a media query would be a genuine hazard.
   There is no !important anywhere else in this file, and there must not be.

   BREAKPOINTS — these are the marketing-surface breakpoints. The E-series
   design wave inherits these two values; change them here, not per page.

     640px  primary.   Chosen from measurement, not convention. The nav's link
                       row needs a fixed 575px (its children are white-space:
                       nowrap and it cannot shrink), so every page carrying the
                       nav overflows the document by 185px at 390px and first
                       overflows just below 575px. 640px is the nearest round
                       value comfortably clear of that, so the mobile nav
                       engages *before* the break rather than at the moment of
                       failure. It is also below the point where the fluid
                       type has already bottomed out — every clamp() heading
                       hits its floor around 768px and is frozen from there
                       down, which is exactly the band that needs a bigger
                       mobile ramp. And it sits clear of the 1060px nav-reflow
                       tier above, so the two never interact.

     420px  narrow.    Only for things that genuinely stop fitting on a small
                       phone: the hero's three-stat row and the two-up field
                       grids on /contact. Nothing else keys off it.
   ========================================================================== */

@media (max-width: 640px) {

  /* ---------- 1. THE OVERFLOW FIX ------------------------------------------
     Cause, measured: [data-navlinks] is display:flex / flex-wrap:nowrap with
     flex-shrink:0 and white-space:nowrap children, so it reports min-width:
     auto = 542.5px of max-content and refuses to shrink. Sitting at left:32px
     it ends at x=574.5, which is the document's 575px scroll width on all 15
     nav-bearing pages. /signin, the one page with no nav, measures exactly
     390px — the control that proves it.

     Letting the row wrap and releasing its automatic minimum is the whole fix.
     Deliberately NOT overflow-x:hidden on html/body: that hides the symptom,
     breaks position:sticky in some browsers, and causes scroll-anchoring
     problems on iOS. (The pre-existing body{overflow-x:hidden} on line 12 is
     untouched Stage 1 code — but it is a net, and the layout should not need
     it. After this rule the document measures 390px at 390px without it.) */
  [data-navlinks] {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    gap: 2px 4px !important;
  }

  /* Second, independent cause — "/" only, and a latent bug in an existing rule.
     index.html:200 carries `overflow: clip` inline on [data-seq-pane], which
     contains the 700px decorative glow on the line below it (left:-140px, so
     it ends at x=560). The degraded-sequence rule at the top of this file
     (@media max-width:1100px) sets `overflow: visible !important` on that same
     pane, which un-clips the glow — so below 560px it widens the document on
     its own, independently of the nav. It only bites under 560px, which is
     inside this block.

     Restoring `overflow-x: clip` alone puts the horizontal clip back without
     touching the vertical axis, so the intent of the 1100px rule — every step
     and frame visible, nothing clipped away vertically — is preserved exactly.
     `clip` rather than `hidden` on purpose: hidden would force the other axis
     to `auto` and make the pane a scroll container, which is what breaks
     position:sticky.

     `position: relative` is required for the clip to bite at all. The 1100px
     rule also sets `position: static` on the pane, which moves the glow's
     containing block up to an ancestor — and an absolutely-positioned box is
     not clipped by an ancestor that isn't in its containing-block chain, so
     overflow-x alone does nothing. `relative` makes the pane the containing
     block again. It is deliberately not `sticky`: site.js:64 detects the
     degraded layout with `getComputedStyle(pane).position !== 'sticky'`, and
     `relative` still satisfies that, so the sequence stays degraded exactly
     as the 1100px rule intends. */
  [data-seq-pane] { position: relative !important; overflow-x: clip !important; }

  /* ---------- 2. NAV: ELECTRONS DISCLOSURE ---------------------------------
     The desktop pill goes away and the inert <details> in AtomNav.dc.html
     takes its place on its own row. Native disclosure, zero JS: support.js
     fetches and injects this partial asynchronously, so anything bound at
     DOMContentLoaded would find no nav in the DOM. */
  [data-electrons-pill] { display: none !important; }

  [data-electrons-disclosure] {
    display: block !important;
    flex-basis: 100% !important;
    margin: 4px 0 2px !important;
  }
  /* strip the default disclosure triangle in both engines */
  [data-electrons-summary] { list-style: none !important; }
  [data-electrons-summary]::-webkit-details-marker { display: none !important; }
  [data-electrons-summary]::marker { content: "" !important; }
  [data-electrons-disclosure][open] [data-electrons-chevron] {
    transform: translateY(2px) rotate(225deg) !important;
  }

  /* nav chrome: tighter gutters, 44px tap targets on every link.
     The row gap is deliberately small — this is sticky chrome sitting on top of
     every screenful, so two compact rows (four links, then the disclosure) is
     the budget. Anything more and the nav starts competing with the page. */
  [data-nav] > div { padding: 6px 22px !important; gap: 0 8px !important; }
  [data-navlinks] > a,
  [data-nav] > div > a[href="/"],
  [data-nav] a[href="/signin"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
  [data-nav] a[href="/contact"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* ---------- 3. IMPACT: TYPOGRAPHY ---------------------------------------
     The failure mode being fixed: every display heading is clamp()-based with
     a vw middle term, so below ~768px the vw term loses to the floor and the
     heading stops responding to the viewport entirely — the home h1 renders
     at 44px on a 1024px tablet and the same 44px on a 320px phone. That is
     what reads as timid. These rules re-open the ramp with a much steeper vw
     term, so the headline is proportionally LARGER on a phone than desktop
     ever makes it, and still fluid down to small phones.

     [style*="clamp("] is doing real work as a selector: it hits exactly the
     fluid display headings and leaves the fixed-size card headings
     (h2 at 22px, h3 at 17-22px) alone, which must not be inflated. */
  main h1[style*="clamp("] {
    font-size: clamp(38px, 13.2vw, 58px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.038em !important;
    max-width: none !important;
  }
  /* the home hero is the loudest thing on the site; keep it ahead of the rest.
     14.5vw and not more: measured at 390px, 16vw runs the headline to six lines
     and pushes the email field completely off the first screenful. 14.5vw keeps
     it dominant (56px against desktop's floored 44px) while leaving the lead
     paragraph in view, so the screen still resolves into a next action. */
  main h1[style*="clamp(44px"] {
    font-size: clamp(42px, 14.5vw, 64px) !important;
    line-height: 1.02 !important;
  }
  /* the hero eyebrow's 30px gap is desktop breathing room; at this width it is
     just a hole between the badge and the headline */
  main [style*="margin-bottom: 30px"][style*="border-radius: 999px"] { margin-bottom: 16px !important; }
  main h2[style*="clamp("] {
    font-size: clamp(28px, 9.4vw, 38px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
  /* lead paragraphs: nudged up for readability, not scaled down */
  main p[style*="clamp("] {
    font-size: clamp(17px, 4.6vw, 19px) !important;
    line-height: 1.58 !important;
  }

  /* ---------- 4. IMPACT: VERTICAL RHYTHM ----------------------------------
     Desktop bands run 84-116px top and bottom. At 88px a single band's
     padding alone eats a quarter of an 844px phone viewport, which is what
     turns the page into an undifferentiated scroll. Roughly a third comes
     off, and the side gutters go 32px -> 22px to widen the measure. */
  main > section {
    padding-top: 58px !important;
    padding-bottom: 62px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  /* Heroes open the page directly under the nav — they do not need a second
     58px gap on top of it. Pulling the first band up is what gets the headline
     AND its call to action into the same screenful. */
  main > section:first-child { padding-top: 34px !important; }
  main[style*="padding"] > div:first-child { padding-top: 0 !important; }
  /* /nucleus deliberately butts four sections together with no top padding —
     preserve that, or the page grows four 58px gaps it was designed without */
  main > section[style*="padding: 0 32px"] { padding-top: 0 !important; }
  /* /blog's bands are already tight; keep them tighter than the default */
  main > section[style*="padding: 84px 32px 56px"] { padding-bottom: 30px !important; }
  main > section[style*="padding: 56px 32px 40px"] { padding-top: 32px !important; padding-bottom: 26px !important; }
  main > section[style*="padding: 48px 32px 100px"] { padding-top: 28px !important; padding-bottom: 64px !important; }
  /* /privacy, /terms and /404 put the padding on <main> itself */
  main[style*="padding"] {
    padding-top: 52px !important;
    padding-bottom: 60px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  /* the nested article at /blog/we-timed-a-pool-visit */
  main > article[style*="padding: 72px 32px 40px"] { padding: 46px 22px 26px !important; }
  main > article[style*="padding: 40px 32px 96px"] { padding: 26px 22px 64px !important; }
  main > article > div[style*="padding: 72px 32px 40px"] { padding: 46px 22px 26px !important; }
  main > article > div[style*="padding: 40px 32px 96px"] { padding: 26px 22px 64px !important; }
  /* /signin is its own two-panel grid, no <main> at all */
  [data-glow-host][style*="padding: 44px 44px 56px"] { padding: 30px 22px 38px !important; }

  /* ---------- 5. IMPACT: LET ONE THING OWN THE SCREEN ---------------------
     The hero's orbit/phone column is a 520px-tall block sitting directly under
     the headline. On a phone it pushes the CTA off the first screenful and
     competes with the headline for the same attention. Shortening it lets the
     headline + form be the screenful, which is the one thing that should be. */
  [style*="min-height: 520px"] { min-height: 380px !important; }
  [style*="min-height: 560px"] { min-height: 400px !important; }
  [style*="min-height: 480px"] { min-height: 360px !important; }

  /* ---------- 6. TAP TARGETS ----------------------------------------------
     44px minimum on everything interactive. The footer link columns lose most
     of their gap in exchange, so the columns grow far less than 2x. */
  form input, form button, form textarea, form select { min-height: 44px !important; }
  footer a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
  /* The footer's link columns give up most of their 11px gap in exchange for
     44px rows, so the columns grow far less than doubling. The <span> is in here
     too — "HVAC — next Electron" is not a link but it sits in the same list and
     wraps to two lines, so it needs the same row box and a readable leading. */
  footer div[style*="flex-direction: column"] { gap: 2px !important; }
  footer div[style*="flex-direction: column"] > a,
  footer div[style*="flex-direction: column"] > span {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    line-height: 1.35 !important;
  }

  /* ---------- 7. FOOTER ---------------------------------------------------- */
  footer { padding: 48px 22px 30px !important; }
  footer > div > div:first-child { gap: 32px 22px !important; padding-bottom: 34px !important; }

  /* ---------- 8. FORMS ----------------------------------------------------
     The hero and closing forms are flex rows that wrap at this width, leaving
     a stranded natural-width button. Full-width reads as a real CTA. */
  form[data-waitlist] [data-form-body][style*="flex-wrap: wrap"] button { flex: 1 0 100% !important; }
  /* /contact's panel: the 34px inset costs 20% of the viewport width */
  form[data-waitlist][style*="padding: 34px"] { padding: 22px !important; }

  /* ---------- 9. MOTION ----------------------------------------------------
     starfield.js already gates its rAF loop on prefers-reduced-motion and on
     document visibility, and the ambient field is the page background, so it
     stays. This only stops the decorative orbit rings and the bobbing phone
     from animating for people who asked for less motion — the global
     reduced-motion rule at the top of this file already covers that, so this
     is belt and braces for the mobile-only min-height overrides above. */
  @media (prefers-reduced-motion: reduce) {
    [style*="min-height: 520px"] > div[style*="animation: orbit"] { display: none !important; }
  }
}

/* Narrow phones. Only the two things that genuinely stop fitting at 390px. */
@media (max-width: 420px) {
  /* hero stat row: three stats at a 44px gap need 3 lines; 2-up reads better */
  [style*="gap: 14px 44px"] { gap: 16px 26px !important; }
  /* /contact's two-up field grids fall to one column instead of 140px stumps */
  [style*="minmax(140px, 1fr)"] { grid-template-columns: 1fr !important; }
}