/* Battery set piece: "24 hours with a home battery" (a 24-hour dial on the warm band) */
.bday { position: relative; }
.bday__pin { padding-block: clamp(56px, 6vw, 88px); }
.bday__grid { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
.bday h2 em { font-style: normal; color: var(--green-deep); display: block; }
.bday .lede { color: #5b5148; }

/* the dial */
.bday__stage { position: relative; width: min(100%, calc(100svh - var(--header-h) - 96px)); margin-inline: auto; perspective: 1400px; }
.bday__stage::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(243,192,76,.32), rgba(243,192,76,0) 68%); filter: blur(10px); z-index: -1; animation: bday-breathe 6s ease-in-out infinite; }
@keyframes bday-breathe { 50% { transform: scale(1.08); opacity: .7; } }
.bday__tilt { transform-style: preserve-3d; will-change: transform; }
.bday__dial { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 34px 44px rgba(60,38,20,.28)); }
.bday__orbit circle { fill: none; stroke: var(--green-deep); stroke-width: 1.6; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .7; }
.bday__orbit { transform-box: view-box; transform-origin: 320px 320px; animation: bday-orbit 60s linear infinite; }
@keyframes bday-orbit { to { transform: rotate(360deg); } }

.bday__stars circle { fill: #fff; animation: bday-twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bday-twinkle { 50% { opacity: .25; transform: scale(.6); } }
.bday__horizon { fill: rgba(47,107,38,.22); }

.bday__track { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.bday__flow { transition: opacity .5s; }
.bday__glow { fill: none; stroke-width: 16; stroke-linecap: round; opacity: .28; }
.bday__beads { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: .1 15; animation: bday-flow .9s linear infinite; }
@keyframes bday-flow { to { stroke-dashoffset: -15.1; } }
.bday__flow--sun .bday__glow, .bday__flow--sun .bday__beads { stroke: var(--sun); }
.bday__flow--bat .bday__glow, .bday__flow--bat .bday__beads { stroke: #8fe070; }
.bday__flow--grid .bday__glow, .bday__flow--grid .bday__beads { stroke: #cfe3ff; }
.bday__flow.is-hl .bday__glow { opacity: .55; stroke-width: 22; }

.bday__tile { fill: #fff; stroke: rgba(15,36,24,.12); }
.bday__pv { fill: #1a2638; stroke: #8f9aa6; stroke-width: 1; }
.bday__pv-sun { pointer-events: none; }
.bday__prog { fill: none; stroke: var(--green-deep); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100 100; }
.bday__roof { fill: #3b3f45; }
.bday__body { fill: #fff; }
.bday__win { fill: #44535c; transition: fill .4s; }
.bday__win.is-lit { fill: #ffd27a; }
.bday__door { fill: var(--green-dark); }
.bday__cap { fill: #d9e2d4; }
.bday__case { fill: #fff; stroke: rgba(15,36,24,.14); stroke-width: 1.5; }
.bday__level { fill: var(--green-deep); transform-box: fill-box; transform-origin: 50% 100%; }
.bday__level.is-low { fill: var(--coral); }
.bday__bolt { fill: #fff; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bday__bolt.is-on { opacity: 1; animation: bday-bolt 1.4s ease-in-out infinite; }
@keyframes bday-bolt { 50% { transform: scale(1.18); } }
.bday__pylon { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.bday__labels rect { fill: rgba(15,36,24,.82); }
.bday__labels text { fill: #fff; font-family: var(--body); font-weight: 700; font-size: 17px; text-anchor: middle; dominant-baseline: central; }

.bday__band { fill: none; stroke: var(--ink); stroke-width: 50; }
.bday__day { fill: none; stroke: var(--sun); stroke-width: 6; stroke-linecap: round; }
.bday__cheap { fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; }
.bday__tick { stroke: rgba(255,255,255,.4); stroke-width: 1.5; }
.bday__tick.is-major { stroke: #fff; stroke-width: 3; }
.bday__hr text { fill: #fff; font-family: var(--display); font-weight: 750; font-size: 21px; text-anchor: middle; dominant-baseline: central; }
.bday__cheaptxt { fill: #c9ecb9; font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; transition: opacity .3s; }
.bday__sun circle { fill: var(--sun); }
.bday__sun path { stroke: var(--sun); stroke-width: 3; stroke-linecap: round; }
.bday__moon path { fill: #e8eefc; }
.bday__pointer { fill: var(--coral); stroke: #fff; stroke-width: 3; stroke-linejoin: round; }

/* the copy: the clock, what is happening now, and which flows are live */
.bday__copy { display: grid; gap: 18px; align-content: center; }
.bday__now { display: grid; gap: 10px; padding: clamp(18px, 1.8vw, 26px); border-radius: var(--radius); background: #fff; box-shadow: 0 30px 50px -36px rgba(60,38,20,.45); border: 1px solid rgba(15,36,24,.08); }
.bday__clock span { display: block; min-width: 5ch; font-family: var(--display); font-weight: 800; font-size: clamp(48px, 4.6vw, 76px); line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bday__phases { display: grid; gap: 12px; }
.bday__phases h3 { font-size: clamp(20px, 1.5vw, 24px); color: var(--ink); }
.bday__phases p { color: #4a4038; font-size: var(--small); line-height: 1.5; margin-top: 4px; }
.bday__phases li { padding-left: 16px; border-left: 3px solid var(--line); }
.bday__phases li.is-on { border-left-color: var(--green-deep); }
/* with motion the four phases share one slot and the live one shows */
html.has-js.motion .bday__phases { display: grid; }
html.has-js.motion .bday__phases li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s, transform .55s var(--ease), visibility 0s .55s; border-left-color: var(--green-deep); }
html.has-js.motion .bday__phases li.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .1s, transform .55s var(--ease) .1s, visibility 0s; }

.bday__chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.bday__chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(15,36,24,.1); font-size: 15px; font-weight: 600; color: #6b625a; transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease); }
.bday__chip i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .5; }
.bday__chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bday__chip.is-on i { opacity: 1; }
.bday__chip--sun.is-on i { background: var(--sun); }
.bday__chip--bat.is-on i { background: #8fe070; }
.bday__chip--grid.is-on i { background: #cfe3ff; }
.bday__note { font-size: var(--small); color: #6b625a; text-wrap: pretty; }
.bday__quote { margin: 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--coral); }
.bday__quote p { font-size: var(--small); line-height: 1.5; color: #3a322b; }
.bday__quote footer { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--coral-deep); }

@media (min-width: 1000px) {
  .bday__pin { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--header-h) + 16px); padding-bottom: 24px; }
  .bday__pin > .wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); }
  .bday__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}
@media (min-width: 1000px) and (max-height: 860px) {
  /* short laptop screens: the copy tightens and the quote steps aside so the pinned scene fits under the header */
  .bday__copy { gap: 14px; }
  .bday__now { padding: 16px 20px; gap: 6px; }
  .bday__clock span { font-size: 52px; }
  .bday__quote { display: none; }
}
@media (max-width: 999px) {
  /* phones: heading and lede, the dial, the live card right under it (both fit one screen), then the flow chips */
  .bday__copy { display: contents; }
  .bday__copy > h2 { order: 1; } .bday__copy > .lede { order: 2; } .bday__stage { order: 3; } .bday__now { order: 4; } .bday__chips { order: 5; } .bday__note { order: 6; } .bday__quote { order: 7; }
  .bday__grid { gap: 18px; }
  .bday__stage { width: min(100%, 520px); }
  .bday__clock span { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .bday__orbit, .bday__stars circle, .bday__beads, .bday__bolt.is-on, .bday__stage::before { animation: none; }
}

/* this page's two-part headings: the coloured phrase always takes its own line, so the break never falls inside it */
.page-battery .svc-get h2 em, .page-battery .svc-fund h2 em { display: block; }
@media (max-width: 999px) {
  /* phones: the opener's charge meter shrinks to one line and a bar, clear of the tag on the photo's foot */
  .page-battery .touch-meter { top: 12px; right: 12px; width: min(210px, 56%); padding: 10px 12px; gap: 6px; border-radius: 12px; }
  .page-battery .touch-meter__top { font-size: 14px; white-space: nowrap; }
  .page-battery .touch-meter__top b { font-size: 20px; }
  .page-battery .touch-meter small { display: none; }
}