/* Section 2, "How it works": the house from the scene above shrinks into the Care365 app on a phone,
   then the app steps through five moments (healthy, check-up, alert, restored, protected). Same colours as the site. */
.ax { position: relative; z-index: 6; height: var(--ax-len, 560vh); margin-top: calc(-1 * max(100svh, 540px));
  --green: #19c26a; --amber: #ffb020; --red: #ff4a1f; --ink: #f5f3ee; --ink-2: rgba(245, 243, 238, 0.58); --line: rgba(245, 243, 238, 0.1); }
.ax__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; background: transparent; }
.ax__stage.is-solid { background: #050404; }
/* while the house takes over, the scene above waits in place underneath */
.px__stage.is-held { position: fixed; top: 0; left: 0; right: 0; }

/* the phone body: graphite, one thin line of light on the rim; the screen itself is the lens above it */
.ax-phone { position: absolute; left: 0; top: 0; opacity: 0; border-radius: 15%/7%;
  background: linear-gradient(145deg, #2a2b2e 0%, #121315 40%, #0c0d0e 60%, #222326 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 2px #070708, 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.8); }
/* the lens: full screen at first (the house as the scene left it), then exactly the phone's screen */
.ax-lens { position: absolute; left: 0; top: 0; overflow: hidden; opacity: 0; background: #0a0a0b; will-change: transform, width, height; }
.ax-lens img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none;  filter: saturate(1.2); }
.ax-ui { position: absolute; inset: 0; opacity: 0; font-size: calc(var(--sw, 330px) / 360 * 16px); }
.ax-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the panels light up one by one, left to right, as the phone lands: each brightens, then settles into a slow breath */
.ax-fx .cell { fill: rgb(25, 194, 106); mix-blend-mode: screen; opacity: 0; }
.is-lit .ax-fx .cell { animation: ax-cell-on 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d) both, ax-cell-breathe 3.6s ease-in-out calc(var(--d) + 0.9s) infinite; }
@keyframes ax-cell-on { 0% { opacity: 0; } 35% { opacity: 0.75; } 100% { opacity: 0.34; } }
@keyframes ax-cell-breathe { 0%, 100% { opacity: 0.34; } 50% { opacity: 0.2; } }
.ax-fx .p7, .ax-fx .led { opacity: 0; transition: opacity 0.6s ease; }
.ax-fx .p7 { fill: rgba(255, 176, 32, 0.85); }
.ax-fx .led { fill: var(--red); }
[data-state="alert"] .ax-fx .p7 { opacity: 1; animation: ax-breathe 1.3s ease-in-out infinite; }
[data-state="alert"] .ax-fx .led { opacity: 1; animation: ax-blink 1.4s steps(1) infinite; }
@keyframes ax-breathe { 50% { opacity: 0.5; } }
@keyframes ax-blink { 50% { opacity: 0.15; } }
.ax-shade { position: absolute; left: 0; right: 0; top: 0; opacity: 0; } /* placed by how.js under the photo's bottom edge */
.ax-ui::before { content: ""; position: absolute; inset: 0 0 auto; height: 16%; background: linear-gradient(180deg, rgba(10, 10, 11, 0.45), rgba(10, 10, 11, 0)); }
.ax-island { position: absolute; z-index: 3; top: 2.4%; left: 50%; width: 31%; height: 3.6%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.ax-homebar { position: absolute; z-index: 3; bottom: 1.1%; left: 50%; width: 35%; height: 0.32em; transform: translateX(-50%); border-radius: 9px; background: rgba(245, 243, 238, 0.85); }

/* the one place on the screen where things happen: each moment fades in over the last */
/* every screen starts at the same line: the eyebrow and headline never move, the details sit under them */
.ax-zone { position: absolute; left: 7.5%; right: 7.5%; top: 59%; bottom: 7%; }
.ax-st { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(0.6em); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.ax-st.is-on { opacity: 1; transform: none; }
.ax-eye { display: flex; align-items: center; gap: 0.55em; font-size: 0.78em; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); }
.ax-eye i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0.7em rgba(25, 194, 106, 0.85); }
.ax-eye i.a { background: var(--amber); box-shadow: 0 0 0.7em rgba(255, 176, 32, 0.85); }
.ax-big { margin: 0.3em 0 0; font-size: 2.6em; font-weight: 400; letter-spacing: -0.045em; line-height: 1.02; }
.ax-big em { font-style: normal; font-size: 0.42em; letter-spacing: -0.01em; color: var(--ink-2); margin-left: 0.25em; }
.ax-soft { margin: 0.4em 0 0; font-size: 1em; color: var(--ink-2); }
.ax-rows { margin-top: 1.4em; border-top: 1px solid var(--line); }
.ax-row { display: flex; justify-content: space-between; align-items: center; padding: 0.85em 0; border-bottom: 1px solid var(--line); font-size: 0.98em; }
.ax-row span { color: var(--ink-2); }
.ax-row .ok { color: var(--green); }
.ax-bars { display: flex; align-items: flex-end; gap: 0.28em; height: 3.2em; margin-top: 1.1em; }
.ax-bars i { flex: 1; border-radius: 0.2em; background: var(--green); opacity: 0.9; }
.ax-bars i.later { background: rgba(245, 243, 238, 0.12); }
/* the latest hour, the one producing right now: it pulses, a live reading */
.ax-bars i.now { position: relative; box-shadow: 0 0 0.6em rgba(25, 194, 106, 0.55); animation: ax-live 1.6s ease-in-out infinite; }
@keyframes ax-live { 0%, 100% { opacity: 1; box-shadow: 0 0 0.9em rgba(25, 194, 106, 0.85); filter: brightness(1.25); } 50% { opacity: 0.55; box-shadow: 0 0 0.2em rgba(25, 194, 106, 0.2); filter: none; } }
.ax-ticks { display: flex; justify-content: space-between; margin-top: 0.45em; font-size: 0.7em; color: rgba(245, 243, 238, 0.35); }
.ax-rot { position: relative; height: 1.25em; margin-top: 0.35em; font-size: 1.8em; line-height: 1.1; letter-spacing: -0.035em; overflow: hidden; }
.ax-rot span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.is-on .ax-rot span { animation: ax-rot 7.5s infinite; }
.is-on .ax-rot span:nth-child(2) { animation-delay: 2.5s; }
.is-on .ax-rot span:nth-child(3) { animation-delay: 5s; }
@keyframes ax-rot { 0% { opacity: 0; transform: translateY(0.4em); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-0.4em); } }

/* beside the phone: "Always" stays, the word after it changes (watching, fixing, protecting) */
/* the words on the left: the title, and under it "Always" with the word that changes */
.ax-copy { position: absolute; z-index: 2; left: 0; top: 50%; transform: translateY(-50%); }
.ax-title { margin: 0; font-weight: 400; font-size: clamp(3rem, 5.6vw, 5.6rem); line-height: 0.96; letter-spacing: -0.045em; color: var(--ink); white-space: nowrap; }
.ax-title span { display: block; }
.ax-say { margin: 0.9em 0 0;
  font-size: clamp(1.4rem, 1.9vw, 1.9rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.1; white-space: nowrap; color: var(--ink-2); }
.ax-say .ax-word { color: var(--ink); }
/* three thin lines under it, one per word, filling white as you scroll */
.ax-prog { display: flex; gap: 8px; margin-top: 22px; width: min(260px, 100%); }
.ax-prog i { flex: 1; height: 2px; border-radius: 2px; background: rgba(245, 243, 238, 0.16); overflow: hidden; }
.ax-prog b { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.ax-word { position: relative; display: inline-grid; vertical-align: baseline; } /* the words share one cell: same baseline as "Always", as wide as the longest */
.ax-word i { grid-area: 1 / 1; font-style: normal; opacity: 0; transform: translateY(0.35em); filter: blur(4px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
.ax-word i.is-on { opacity: 1; transform: none; filter: none; }
.ax-label { position: absolute; z-index: 2; margin: 0; opacity: 0; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 243, 238, 0.35); white-space: nowrap; }

/* reduced motion: the phone, still, on its first moment */
.is-still .ax { height: auto; margin-top: 0; }
.is-still .ax__stage { position: relative; background: #050404; }

/* the beat between the problem and the app, on the full-screen dusk house */
.ax-full { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;  transition: opacity 0.22s ease; }
.ax-full .fcell { fill: rgb(25, 194, 106); mix-blend-mode: screen; opacity: 0; }
.ax-full .fpipe { fill: none; stroke: rgb(15, 226, 46); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the beat between the problem and the app: three lines solved, each shown on the house ---- */
/* each problem line and its solved twin share one cell, so the row never shifts */
.px-sw { display: inline-grid; justify-items: start; text-align: left; }
.px-sw b { grid-area: 1 / 1; font-weight: inherit; white-space: nowrap; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.px-sw b:nth-child(2) { opacity: 0; transform: translateY(6px); }
.px-status li.is-fixed .px-sw b:nth-child(1) { opacity: 0; transform: translateY(-6px); }
.px-status li.is-fixed .px-sw b:nth-child(2) { opacity: 1; transform: none; }
.px-status li i { transition: background-color 0.5s ease, box-shadow 0.5s ease; }
.px-status li.is-fixed i { background: #19c26a; box-shadow: 0 0 8px rgba(25, 194, 106, 0.85); }
/* the headline's answer sits exactly over the headline */
.px__title { transition: opacity 0.6s ease; }
.px-fix { position: absolute; left: 0; right: 0; top: 0.98em; opacity: 0; } /* one short line, sitting where the headline's second line sat */
/* the promise sits just above the answer, in the empty line the old headline left: "On site within 48 hours." then "Taken care of." */
.px-48 { position: absolute; left: 0; right: 0; top: calc(0.98 * clamp(2.4rem, 4.85vw, 4.7rem)); margin: 0; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -0.012em; color: rgba(245, 243, 238, 0.92); text-shadow: 0 1px 12px rgba(8, 12, 22, 0.55); opacity: 0; transform: translateY(calc(-112% + 8px)); transition: opacity 0.6s ease 0.1s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
.px__copy.is-fixed .px-48 { opacity: 1; transform: translateY(-112%); }
.px__copy.is-fixed .px__title:not(.px-fix) { opacity: 0; }
.px__copy.is-fixed .px-fix { opacity: 1; transition-delay: 0.25s; }
/* the inverter's light, fixed */
.px-led.is-green { background: #19c26a; box-shadow: 0 0 5px 1px rgba(25, 194, 106, 0.95), 0 0 14px 3px rgba(25, 194, 106, 0.4); animation: none; }
.px__stage.is-leaving .px__copy, .px__stage.is-leaving .px-led { opacity: 0 !important; transition: opacity 0.22s ease; }
/* the van: a cut-out rendered from the same camera, laid exactly over the house picture */
.ax-van, .ax-van-in { filter: brightness(0.8) saturate(1.1); } /* settles the white van into the dusk */
.ax-lens img.ax-van-in { filter: brightness(0.8) saturate(1.1); }
.ax-van { position: absolute; left: 0; top: 0; max-width: none; opacity: 0; transform-origin: 22% 72%; pointer-events: none; will-change: transform, opacity; }
.ax-full .fpipe { opacity: 0; }
.ax-full .fdot { fill: rgb(15, 226, 46); opacity: 0; }
/* the day's energy on the left, the system size on the same line at the right, small and quiet */
.ax-big--row { display: flex; justify-content: space-between; align-items: baseline; }
.ax-big--row small { font-size: 0.36em; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
/* back online: a small white signal mark on the inverter, its bars pulsing outward, and a pulse of light running down the line to it */
.ax-full .fsig { opacity: 0; transition: opacity 0.5s ease; filter: drop-shadow(0 0 2px rgba(6, 10, 18, 0.75)); }
.ax-full .fsig.is-on { opacity: 1; }
.ax-full .fsig circle { fill: #fff; }
.ax-full .fsig path { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; }
.ax-full .fsig.is-on > * { animation: ax-sig 1.5s ease-in-out 4.5 both; }
.ax-full .fsig > :nth-child(2) { animation-delay: 0.16s !important; }
.ax-full .fsig > :nth-child(3) { animation-delay: 0.32s !important; }
.ax-full .fsig > :nth-child(4) { animation-delay: 0.48s !important; }
@keyframes ax-sig { 0%, 100% { opacity: 0.18; } 50% { opacity: 1; } }
.ax-full .fflow { fill: none; stroke: #e6fff0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ax-full .fflow.is-on { animation: ax-flow 1.5s cubic-bezier(0.4, 0, 0.6, 1) 3 both; }
@keyframes ax-flow { 0% { stroke-dashoffset: var(--a); opacity: 0; } 12% { opacity: 0.9; } 85% { opacity: 0.9; } 100% { stroke-dashoffset: var(--b); opacity: 0; } }

/* ---- phones (how.js adds .ax--m): one idea per screen. The van on its own screen, the house with its fixes, the title
   alone on black, then the app as a sheet that comes up under the finger. Nothing here applies on a big screen. ---- */
.ax--m .ax-phone, .ax--m .ax-van, .ax--m .ax-van-in, .ax--m .ax-island, .ax--m .ax-homebar, .ax--m .ax-prog { display: none; }
.ax--m .ax-full .fpipe, .ax--m .ax-full .fflow { stroke-width: 2.4; }
/* the van's screen: the driveway corner of the same dusk picture, the van pulling in */
.am-van { position: absolute; inset: 0; z-index: 2; overflow: hidden; opacity: 0; background: #050404; pointer-events: none; transition: opacity 0.7s ease; }
.am-van.is-on { opacity: 1; }
.am-van img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; user-select: none; }
.am-drive { filter: saturate(1.2); }
.am-vanimg { filter: brightness(0.8) saturate(1.1); transform-origin: 40% 75%; will-change: transform, opacity; }
.am-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 26, 0.55) 0%, rgba(8, 14, 26, 0.25) 36%, rgba(8, 14, 26, 0) 56%); }
.px__copy.am-copy { opacity: 1; }
/* the fixes: three green lines arrive one by one, then the headline rolls in above them, on the same line as every headline */
.px__copy.am-fix { z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.am-fixh { opacity: 0; transition: none; }
.am-list li { opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.am-list li.is-on { opacity: 1; transform: none; }
/* the title's screen: the house dims under the finger */
.am-black { position: absolute; inset: 0; z-index: 3; background: #050404; opacity: 0; pointer-events: none; }
.ax--m .ax-copy { z-index: 4; left: var(--edge); right: var(--edge); top: 50%; transform: translateY(-56%); text-align: center; pointer-events: none; opacity: 0; will-change: opacity, translate; }
.ax--m .ax-title { font-size: min(11.6vw, 4.6rem); }
.ax--m .ax-say { margin-top: 22px; font-size: 22px; }
.ax--m .ax-say { display: none; }
/* the app: the whole screen, blending in out of the dark; its words flow in one after another (how.js) */
.ax--m .ax-lens { z-index: 5; opacity: 0; visibility: hidden; will-change: opacity; }
.ax--m .ax-ui { opacity: 1; }
.ax--m .ax-zone { top: 52%; }
.ax--m .ax-st { opacity: 0; transform: none; transition: none; }
.ax--m .ax-st .ax-eye, .ax--m .ax-st .ax-big, .ax--m .ax-st .ax-row { opacity: 0; will-change: opacity, transform, filter; }
.ax--m .ax-label { z-index: 6; }
.am-dots { position: absolute; z-index: 6; left: 0; right: 0; bottom: 50px; display: flex; justify-content: center; gap: 8px; opacity: 0; pointer-events: none; }
.am-dots i { width: 22px; height: 2px; border-radius: 2px; background: rgba(245, 243, 238, 0.18); transition: background-color 0.35s ease; }
.am-dots i.on { background: #f5f3ee; }
/* the three lines stand in one tidy column on a phone; the promise has its own screen there (the van's) */
@media (max-width: 819.98px) {
  .px-status { display: grid; justify-content: center; justify-items: start; gap: 9px; }
  .px-48 { display: none; }
}