:root {
  font-family: Albert, system-ui, sans-serif;
  color-scheme: dark;
  color: #eef1ed;
  background: #0d1212;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: clip;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid #c5dfc0;
  outline-offset: 5px;
}
.showcase-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  background: linear-gradient(#0d1212ef, #0d121280, transparent);
  z-index: 30;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 17px;
}
.showcase-header nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 12px;
  color: #bcc6bf;
}
.showcase-header .store {
  border: 1px solid #ffffff30;
  border-radius: 30px;
  padding: 11px 17px;
  color: #fff;
}
.overline,
.part-label {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
  color: #a8beb0;
}
.screen-story {
  height: 520svh;
  background: radial-gradient(ellipse at 50% 12%, #47615b36, transparent 50%);
}
.screen-sticky {
  height: 100svh;
  position: sticky;
  top: 0;
  overflow: hidden;
  perspective: 1400px;
}
.screen-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 390px;
  height: 844px;
  transform: translate(-50%, -50%) scale(var(--hero-scale, 0.68));
  transform-origin: center;
  perspective: 1200px;
}
.screen-pose {
  width: 390px;
  height: 844px;
  transform-origin: 50% 43%;
  transform-style: preserve-3d;
}
.screen-canvas {
  position: relative;
  width: 390px;
  height: 844px;
}
.screen-ribbon {
  position: absolute;
  left: -780px;
  top: 0;
  width: 1950px;
  height: 844px;
  mask-image: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.13) 30%,
    rgba(0, 0, 0, 0.2) 39.9%,
    black 40%,
    black 60%,
    rgba(0, 0, 0, 0.2) 60.1%,
    rgba(0, 0, 0, 0.13) 75%,
    transparent
  );
  overflow: hidden;
}
.screen-track {
  position: absolute;
  left: 780px;
  top: 0;
  display: flex;
  width: 1170px;
  height: 844px;
}
.screen-track > .wl-screen {
  flex: 0 0 390px;
}
.screen-track .wl-screen {
  pointer-events: none;
}
.outside-blur {
  position: absolute;
  top: 0;
  width: 780px;
  height: 844px;
  backdrop-filter: blur(5px);
  pointer-events: none;
}
.outside-left {
  right: 100%;
}
.outside-right {
  left: 100%;
}
.screen-canvas .wl-frame-only {
  box-shadow: 0 30px 70px #0008;
}
.hero-copy {
  position: absolute;
  left: 7%;
  top: 45%;
  width: min(24%, 285px);
  pointer-events: none;
  opacity: 0;
}
.hero-copy h1 {
  font-family: Alegreya, Georgia, serif;
  font-size: clamp(34px, 3.5vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.7px;
  margin: 15px 0;
}
.hero-copy > p:last-child {
  color: #abbcb3;
  font-size: 14px;
  line-height: 1.7;
  max-width: 225px;
}
.hero-progress {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 310px;
  text-align: center;
}
.progress-track {
  height: 3px;
  background: #ffffff20;
  position: relative;
}
.progress-value {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #d9e3d4;
}
.progress-track .hold {
  position: absolute;
  top: -2px;
  height: 7px;
  background: #ffffff22;
}
.hold.now {
  left: 25%;
  width: 25%;
}
.hold.hourly {
  left: 50%;
  width: 23%;
}
.hold.daily {
  left: 73%;
  width: 27%;
}
.progress-track i {
  position: absolute;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a9b9af;
}
.progress-track .start {
  left: -3px;
}
.progress-track .end {
  right: -3px;
}
.progress-labels {
  position: relative;
  height: 23px;
  margin-top: 12px;
}
.progress-labels button {
  position: absolute;
  transform: translateX(-50%);
  border: 0;
  background: none;
  color: #c4d1c9;
  font-size: 11px;
  padding: 0 8px;
}
.progress-labels button:nth-child(1) {
  left: 37.5%;
}
.progress-labels button:nth-child(2) {
  left: 61.5%;
}
.progress-labels button:nth-child(3) {
  left: 86.5%;
}
.progress-labels button[aria-current="step"] {
  color: white;
}
.hero-progress > p {
  color: #889b8e;
  font-size: 10px;
  margin: 0;
}
.hero-progress > p span {
  margin-left: 9px;
}
.signal-story {
  height: 360svh;
  background: #e4e8df;
  color: #1b3028;
  position: relative;
}
.signal-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
}
.signal-heading {
  position: absolute;
  top: 85px;
  left: 7%;
  z-index: 2;
  pointer-events: none;
}
.signal-heading .overline {
  color: #677f6c;
}
.signal-heading h2 {
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  letter-spacing: -1.8px;
  line-height: 1.04;
  margin: 13px 0;
}
.signal-heading h2 em,
.composition-section h2 em {
  font-family: Alegreya, Georgia, serif;
  font-weight: 400;
}
.signal-heading > p:not(.overline) {
  font-size: 13px;
  color: #647b6a;
  max-width: 300px;
  line-height: 1.6;
}
.signal-viewport {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%) scale(var(--signal-scale, 1));
  width: 1100px;
  height: 560px;
  transform-origin: center;
}
.signal-canvas {
  position: relative;
  width: 1100px;
  height: 560px;
}
.signal-origin {
  position: absolute;
  top: 245px;
  left: 20px;
  width: 366px;
  z-index: 2;
}
.signal-origin .part-label {
  color: #738271;
}
.signal-origin .wl-signals {
  box-shadow: 0 25px 65px #18322228;
}
.signal-origin .wl-signal-row {
  pointer-events: none;
}
.connection {
  position: absolute;
  left: 362px;
  top: 245px;
  width: 340px;
  height: 240px;
  overflow: visible;
}
.connection path {
  fill: none;
  stroke: #6a8975;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.connection-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.connection-head {
  opacity: 0;
}
.signal-destination {
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 720px;
  width: 366px;
  transform: rotate(-3deg);
  transform-origin: 50% 60%;
}
.signal-destination .part-label {
  color: #738271;
}
.signal-destination .wl-stack {
  box-shadow: 0 30px 70px #1b302830;
}
.tap-ring {
  position: absolute;
  right: 20px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  border: 2px solid #badbfa;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.signal-progress {
  position: absolute;
  bottom: 38px;
  left: 7%;
  width: 160px;
  height: 2px;
  background: #284b3520;
}
.signal-progress > span {
  display: block;
  height: 100%;
  background: #355a43;
  width: 0;
}
.signal-actions {
  position: absolute;
  right: 7%;
  bottom: 27px;
  display: flex;
  gap: 20px;
}
.signal-actions button {
  border: 0;
  background: transparent;
  color: #35503f;
  font-size: 11px;
  padding: 8px 0;
}
.composition-section {
  padding: 110px 7% 130px;
  max-width: 1500px;
  margin: auto;
}
.composition-section > div:first-child {
  max-width: 440px;
}
.composition-section h2 {
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.4px;
  margin: 20px 0;
}
.composition-section > div:first-child > p:not(.overline) {
  color: #9cafa2;
  line-height: 1.7;
  font-size: 14px;
}
.composition-section a {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: #d4e6c5;
  border-bottom: 1px solid #d4e6c544;
  padding-bottom: 7px;
}
.composition-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  margin: 80px auto 0;
  max-width: 1000px;
  perspective: 1600px;
}
.composition-device {
  transform: rotateY(13deg) rotateX(5deg) rotateZ(-5deg);
  transform-style: flat;
}
.composition-detail {
  width: 100%;
  max-width: 440px;
}
.composition-detail > .wl-signals {
  box-shadow: 0 25px 55px #0005;
}
.detail-note {
  font-size: 11px;
  color: #97a99e;
  line-height: 1.7;
  margin: 15px 0;
}
.detail-tabs {
  display: flex;
  gap: 8px;
  margin: 22px 0;
}
.detail-tabs button {
  padding: 8px 13px;
  background: transparent;
  color: #b9c6bc;
  border: 1px solid #ffffff25;
  border-radius: 22px;
  font-size: 11px;
}
.detail-tabs button[aria-pressed="true"] {
  background: #d6e2ce;
  color: #1c3023;
}
.detail-graph-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 366/542;
}
.detail-graph-wrap > .wl-stack {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--detail-scale, 1));
  transform-origin: top left;
}
footer {
  border-top: 1px solid #ffffff15;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 35px 7%;
  font-size: 10px;
  color: #8fa696;
}
#showcase-error {
  position: fixed;
  bottom: 12px;
  left: 12px;
  background: #612e2e;
  color: white;
  padding: 20px;
  z-index: 90;
}
@media (max-width: 850px) {
  .hero-copy {
    left: 5%;
    width: 24%;
    top: 41%;
  }
  .hero-copy h1 {
    font-size: 32px;
  }
  .hero-copy > p:last-child {
    font-size: 11px;
  }
  .signal-heading {
    top: 85px;
  }
  .signal-heading h2 {
    font-size: 44px;
  }
  .composition-pair {
    gap: 35px;
  }
  .showcase-header nav {
    gap: 15px;
  }
  .signal-viewport {
    top: 60%;
  }
}
@media (max-width: 600px) {
  .showcase-header {
    height: 66px;
    padding: 0 5%;
  }
  .brand {
    font-size: 14px;
    gap: 6px;
  }
  .brand img {
    width: 23px;
    height: 23px;
  }
  .showcase-header nav > a:first-child {
    display: none;
  }
  .showcase-header .store {
    font-size: 10px;
    padding: 9px 12px;
  }
  .hero-copy {
    left: 7%;
    top: 82px;
    width: 86%;
    text-align: center;
  }
  .hero-copy .overline {
    display: none;
  }
  .hero-copy h1 {
    font-size: 30px;
    margin: 0;
  }
  .hero-copy > p:last-child {
    display: none;
  }
  .screen-stage {
    top: 49%;
  }
  .hero-progress {
    bottom: 22px;
    width: 260px;
  }
  .signal-sticky {
    min-height: 660px;
  }
  .signal-heading {
    left: 7%;
    top: 78px;
  }
  .signal-heading h2 {
    font-size: 37px;
  }
  .signal-heading > p:not(.overline) {
    max-width: 245px;
  }
  .signal-viewport {
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--signal-scale, 0.62));
    transform-origin: center;
  }
  .signal-actions {
    right: 7%;
    bottom: 23px;
    gap: 15px;
  }
  .signal-actions button {
    font-size: 10px;
  }
  .signal-progress {
    width: 80px;
    bottom: 35px;
  }
  .composition-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .composition-pair {
    grid-template-columns: 1fr;
    gap: 70px;
    margin-top: 50px;
  }
  .composition-device {
    max-width: 330px;
    margin: auto;
    width: 90%;
  }
  .composition-detail {
    max-width: 380px;
    margin: auto;
  }
  .composition-section h2 {
    font-size: 42px;
  }
  footer {
    flex-direction: column;
    gap: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-story {
    height: auto;
  }
  .screen-sticky {
    height: 100svh;
    min-height: 650px;
    position: relative;
  }
  .screen-ribbon {
    mask-image: linear-gradient(
      to right,
      transparent 39.99%,
      black 40%,
      black 60%,
      transparent 60.01%
    );
  }
  .outside-blur {
    display: none;
  }
  .composition-device {
    transform: none;
  }
  .signal-story {
    height: auto;
  }
  .signal-sticky {
    position: relative;
    min-height: 800px;
    height: auto;
    padding: 90px 7% 60px;
    overflow: visible;
  }
  .signal-heading {
    position: static;
  }
  .signal-viewport {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    transform: none !important;
  }
  .signal-canvas {
    width: 100%;
    height: auto;
    transform: none !important;
    display: grid;
    gap: 35px;
  }
  .signal-origin,
  .signal-destination {
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    max-width: 366px;
    width: 100%;
    margin: auto;
  }
  .signal-destination .wl-stack {
    max-width: 100%;
  }
  .connection,
  .signal-progress,
  .tap-ring {
    display: none;
  }
  .signal-actions {
    position: static;
    justify-content: center;
    margin-top: 25px;
  }
  .signal-origin .wl-signal-row {
    pointer-events: auto;
  }
}
.showcase-header.is-light {
  background: linear-gradient(#e4e8dff0, #e4e8df99, transparent);
  color: #183028;
}
.showcase-header.is-light nav {
  color: #3e5b49;
}
.showcase-header.is-light .store {
  color: #183028;
  border-color: #18302835;
}

/* Explicit preview override for reduced-motion verification, without changing OS settings. */
:root[data-motion="reduce"] .screen-story {
  height: auto;
}
:root[data-motion="reduce"] .screen-sticky {
  height: 100svh;
  min-height: 650px;
  position: relative;
}
:root[data-motion="reduce"] .screen-ribbon {
  mask-image: linear-gradient(
    to right,
    transparent 39.99%,
    black 40%,
    black 60%,
    transparent 60.01%
  );
}
:root[data-motion="reduce"] .outside-blur {
  display: none;
}
:root[data-motion="reduce"] .composition-device {
  transform: none;
}
:root[data-motion="reduce"] .signal-story {
  height: auto;
}
:root[data-motion="reduce"] .signal-sticky {
  position: relative;
  min-height: 800px;
  height: auto;
  padding: 90px 7% 60px;
  overflow: visible;
}
:root[data-motion="reduce"] .signal-heading {
  position: static;
}
:root[data-motion="reduce"] .signal-viewport {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  transform: none !important;
}
:root[data-motion="reduce"] .signal-canvas {
  width: 100%;
  height: auto;
  transform: none !important;
  display: grid;
  gap: 35px;
}
:root[data-motion="reduce"] .signal-origin,
:root[data-motion="reduce"] .signal-destination {
  position: relative;
  left: auto;
  top: auto;
  transform: none !important;
  max-width: 366px;
  width: 100%;
  margin: auto;
}
:root[data-motion="reduce"] .signal-destination .wl-stack {
  max-width: 100%;
}
:root[data-motion="reduce"] .connection,
:root[data-motion="reduce"] .signal-progress,
:root[data-motion="reduce"] .tap-ring {
  display: none;
}
:root[data-motion="reduce"] .signal-actions {
  position: static;
  justify-content: center;
  margin-top: 25px;
}
:root[data-motion="reduce"] .signal-origin .wl-signal-row {
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .signal-destination {
    height: calc(566px * var(--reduced-graph-scale, 1));
  }
  .signal-destination > .wl-stack {
    width: 366px;
    max-width: none;
    transform: scale(var(--reduced-graph-scale, 1));
    transform-origin: top left;
  }
}
:root[data-motion="reduce"] .signal-destination {
  height: calc(566px * var(--reduced-graph-scale, 1));
}
:root[data-motion="reduce"] .signal-destination > .wl-stack {
  width: 366px;
  max-width: none;
  transform: scale(var(--reduced-graph-scale, 1));
  transform-origin: top left;
}
@media (prefers-reduced-motion: reduce) {
  .signal-viewport {
    overflow: clip;
  }
}
:root[data-motion="reduce"] .signal-viewport {
  overflow: clip;
}

.screen-canvas > .wl-shared-shell {
  overflow: visible;
}
.screen-canvas > .wl-shared-shell > .wl-background {
  border-radius: 42px;
}
.screen-ribbon {
  pointer-events: none;
}

/* Location cuts affect the contents, never the scroll pose or device frame. */
.screen-track,
.screen-canvas > .wl-shared-shell {
  transition: opacity 180ms ease;
}
.scenario-changing .screen-track,
.scenario-changing > .wl-shared-shell {
  opacity: 0.12;
}
.scenario-controls {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}
.scenario-controls button {
  border: 0;
  background: none;
  color: #b0bac9;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 7px 2px;
}
.scenario-controls button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .screen-track,
  .screen-canvas > .wl-shared-shell {
    transition: none;
  }
}
[data-motion="reduce"] .screen-track,
[data-motion="reduce"] .screen-canvas > .wl-shared-shell {
  transition: none;
}
/* Replacing forecast content must not move the scroll-driven timeline. */
.screen-story {
  overflow-anchor: none;
}

/* City identity is independent from the scroll checkpoints and solid app chrome. */
.scenario-changing .screen-track,
.scenario-changing > .wl-shared-shell {
  opacity: 1;
}
.city-outgoing {
  pointer-events: none !important;
  position: absolute !important;
  z-index: 4;
  margin: 0 !important;
}
.screen-track.city-outgoing {
  top: 0;
  left: 0;
  transition: none;
}
.wl-identity > .city-outgoing {
  left: 0;
  top: 0;
}
.location-note {
  position: absolute;
  right: 6%;
  top: 48%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e6ece9;
  padding: 12px 14px;
  border: 1px solid rgb(220 235 229 / 10%);
  border-radius: 20px;
  background: rgb(16 23 24 / 68%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 28px rgb(0 0 0 / 16%);
  z-index: 8;
}
.location-copy-wrap {
  position: relative;
  min-width: 210px;
}
.location-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.location-copy strong {
  font-size: 16px;
  font-weight: 500;
}
.location-copy span {
  font-size: 12px;
  color: #aab9b6;
  white-space: nowrap;
}
.location-copy.city-outgoing {
  inset: 0;
  background: transparent;
}
.city-countdown {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.city-countdown svg {
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 1.5;
}
.city-countdown-track {
  stroke: #ffffff25;
}
.city-countdown-value {
  stroke: #d1dfc5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
}
.city-play-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
}
#scenario-next {
  border: 0;
  background: none;
  color: #b7c4bf;
  cursor: pointer;
  font-size: 20px;
  padding: 10px;
}
.location-note button:focus-visible {
  outline: 1px solid #d1dfc5;
  outline-offset: 4px;
  border-radius: 50%;
}
.location-note button:disabled {
  cursor: default;
  opacity: 0.5;
}
@media (max-width: 1100px) {
  .location-note {
    top: auto;
    bottom: 100px;
    padding: 10px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    gap: 8px;
  }
  .location-copy strong {
    font-size: 13px;
  }
  .location-copy span {
    font-size: 10px;
  }
  .location-copy-wrap {
    min-width: 190px;
  }
  .city-countdown,
  .city-countdown svg {
    width: 34px;
    height: 34px;
  }
}
.wl-shared-shell > .wl-background.city-outgoing {
  z-index: 0;
}

/* Give the enlarged settled device its own space on wide layouts. */
@media (min-width: 1101px) {
  .hero-progress {
    left: 7%;
    bottom: 46px;
    width: 260px;
    transform: none;
  }
}


.closing-section { position: relative; isolation: isolate; overflow: hidden; min-height: 780px; display: grid; place-items: center; padding: 110px 24px 90px; box-sizing: border-box; text-align: center; color: #f3f1e7; background: radial-gradient(ellipse at 50% 95%, #59717d 0%, #293c53 35%, #101a2d 67%, #0d151d 100%); }
#closing-atmosphere { position: absolute; inset: 0; z-index: -1; opacity: .7; pointer-events: none; }
.closing-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, #101a2d70, transparent 70%); }
.closing-content { max-width: 720px; }
.closing-sun { margin-bottom: 20px; filter: drop-shadow(0 0 24px #f3d45b55); }
.closing-content .overline { color: #c3cfcf; font-size: 11px; letter-spacing: .2em; }
.closing-content h2 { font-size: clamp(48px, 6.4vw, 86px); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; margin: 22px 0; }
.closing-content h2 em { font-family: Georgia, serif; font-weight: 400; }
.closing-description { color: #d1dadb; font-size: 18px; line-height: 1.5; margin-bottom: 32px; }
.closing-download { display: inline-flex; align-items: center; gap: 22px; padding: 18px 25px; background: #f1f1e6; color: #14222b; border-radius: 32px; text-decoration: none; font-size: 15px; font-weight: 600; box-shadow: 0 10px 40px #070f2433; }
.closing-download:hover { background: white; }
.closing-download:focus-visible { outline: 2px solid white; outline-offset: 6px; }
.closing-platform { color: #b8c8cd; font-size: 12px; margin-top: 14px; }
.closing-lenses { color: #bbc9cb; font-size: 13px; line-height: 1.7; margin: 50px auto 0; max-width: 330px; }
@media(max-width: 600px) {
  .closing-section { min-height: 730px; padding: 90px 22px 65px; }
  .closing-description { font-size: 16px; }
  .closing-download { gap: 14px; font-size: 14px; padding: 17px 21px; }
}

/* Shared section bounds: fixed-header clearance plus a consistent breathing room. */
:root { --site-header-height: 80px; --section-gutter: 7vw; --section-space: 40px; --section-top: calc(var(--site-header-height) + var(--section-space)); }
.showcase-header { height: var(--site-header-height); padding-inline: var(--section-gutter); }
main > section { scroll-margin-top: var(--section-top); }
.closing-section { padding: var(--section-top) var(--section-gutter) var(--section-space); }
.signal-heading { top: var(--section-top); left: var(--section-gutter); }
.signal-actions { right: var(--section-gutter); bottom: var(--section-space); }
.signal-progress { left: var(--section-gutter); bottom: var(--section-space); }
footer { padding: var(--section-space) var(--section-gutter); }
@media (max-width: 700px) {
  :root { --section-gutter: 24px; --section-space: 28px; }
}
@media (max-width: 600px) { :root { --site-header-height: 66px; } }
:root[data-motion="reduce"] .signal-sticky { padding: var(--section-top) var(--section-gutter) var(--section-space); }
@media (prefers-reduced-motion: reduce) {
  .signal-sticky { padding: var(--section-top) var(--section-gutter) var(--section-space); }
}

.coming-soon { cursor: default; }
.closing-download.coming-soon:hover { background: #f1f1e6; }

/* Keep moving content legible beneath the fixed site chrome. */
.showcase-header {
  background: rgb(13 18 18 / 94%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.showcase-header.is-light { background: rgb(228 232 223 / 94%); }
html { scroll-padding-top: var(--section-top); }
@media (max-width: 1100px) {
  .signal-viewport {
    top: var(--signal-center, 60%);
  }
  .signal-destination {
    mask-image: linear-gradient(to bottom, black max(0px, calc(var(--signal-visible-height, 560px) - 48px)), transparent var(--signal-visible-height, 560px));
  }
}
:root[data-motion="reduce"] .signal-destination { mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  .signal-destination { mask-image: none; }
}

/* Let the reduced-motion single-column canvas shrink below its 366px contents. */
:root[data-motion="reduce"] .signal-canvas { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) {
  .signal-canvas { grid-template-columns: minmax(0, 1fr); }
}

/* Landing-page structure: one introduction, then two short demonstrations. */
.screen-story { height: 280svh; }
.signal-story { height: 165svh; }
.closing-section { min-height: 75svh; }
.hero-copy { top: var(--section-top); left: var(--section-gutter); width: 39%; max-width: 540px; opacity: 1; pointer-events: auto; z-index: 5; text-align: left; }
.hero-copy h1, .signal-heading h2, .closing-content h2 {
  font-family: Albert, system-ui, sans-serif; font-style: normal; font-weight: 400;
  letter-spacing: -.04em; line-height: 1.06; text-wrap: balance;
}
.hero-copy h1 { font-size: clamp(38px, 4.4vw, 64px); margin: 0 0 20px; }
.hero-copy #hero-description { display: block; max-width: 440px; font-size: 17px; line-height: 1.55; color: #b9c6bd; margin: 0 0 24px; }
.download-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.hero-download { background: #f1f1e6; color: #14222b; border-radius: 30px; padding: 15px 21px; font-size: 14px; font-weight: 600; }
.hero-copy p.download-platform { display: block; margin: 12px 0 0; font-size: 12px; color: #b8c8cd; line-height: 1.5; }
.screen-stage { left: 70%; }
.screen-ribbon { mask-image: linear-gradient(to right, transparent 39.99%, black 40%, black 60%, transparent 60.01%); }
.outside-blur { display: none; }
.hero-progress { z-index: 6; bottom: 18px; }
.signal-heading { max-width: 470px; }
.signal-heading h2 { font-size: clamp(32px, 3.7vw, 52px); }
.signal-heading > p:not(.overline) { max-width: 390px; }
.closing-content h2 { font-size: clamp(38px, 5vw, 64px); }
.closing-lenses { margin-top: 30px; }
@media(max-width: 700px) {
  .hero-copy { top: 94px; width: calc(100% - 48px); max-width: none; }
  .hero-copy h1 { font-size: 38px; margin-bottom: 16px; }
  .hero-copy #hero-description { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
  .hero-copy p.download-platform { font-size: 12px; }
  .screen-stage { left: 50%; }
  .hero-progress { bottom: 12px; padding: 12px 0 8px; width: calc(100% - 48px); background: #0d1212f5; border-radius: 14px; }
  .progress-track { margin-inline: 12px; }
  .hero-progress > p { display: none; }
  .progress-labels { margin-bottom: 0; }
  .signal-heading { width: calc(100% - 48px); }
  .signal-heading h2 { font-size: 32px; margin: 10px 0; }
  .signal-heading > p:not(.overline) { max-width: none; font-size: 13px; }
  .closing-section { min-height: 75svh; }
}
:root[data-motion="reduce"] .screen-story { height: auto; }
:root[data-motion="reduce"] .screen-sticky { height: 1120px; }
:root[data-motion="reduce"] .screen-stage { top: 760px !important; }
@media(prefers-reduced-motion: reduce) {
  .screen-story { height: auto; }
  .screen-sticky { height: 1120px; }
  .screen-stage { top: 760px !important; }
}

/* Static, fully revealed stories for the OS preference as well as the preview override. */
:root[data-motion="reduce"] .signal-story { height: auto; }
@media(prefers-reduced-motion: reduce) {
  .signal-story { height: auto; }
}

main > section { scroll-margin-top: 0; }
/* The hero demonstrates Signals; omit the lower Readings card beneath the tab bar. */
.screen-track .wl-readings { display: none; }
:root[data-motion="reduce"] .signal-heading { width: 100%; }
@media(prefers-reduced-motion: reduce) {
  .signal-heading { width: 100%; }
}

/* One quiet row above the centered device; revealed after the introduction. */
.location-note {
  top: calc(var(--site-header-height) + 16px); bottom: auto;
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(420px, calc(100% - 48px));
  gap: 6px; padding: 3px 8px; border-radius: 14px; opacity: 0;
}
.location-copy-wrap { flex: 1; min-width: 0; }
.location-copy { flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; white-space: nowrap; }
.location-copy strong { font-size: 12px; }
.location-copy span { font-size: 10px; }
.city-countdown { width: 30px; height: 32px; display: grid; place-items: center; }
.city-countdown svg { width: 24px; height: 24px; }
.city-play-icon { font-size: 8px; }
#scenario-next { width: 30px; height: 32px; padding: 0; font-size: 16px; }
:root[data-motion="reduce"] .location-note { top: 400px; }
@media(prefers-reduced-motion: reduce) {
  .location-note { top: 400px; }
}

/* Signals get room to show the full graph; only the mobile tail fades. */
.signal-viewport { top: var(--signal-center, 60%); }
@media (min-width: 701px) { .signal-destination { mask-image: none; } }
@media (max-width: 700px) {
  .signal-destination { mask-image: linear-gradient(to bottom, black calc(var(--signal-visible-height, 600px) - 20px), transparent var(--signal-visible-height, 600px)); }
}
:root[data-motion="reduce"] .signal-destination { mask-image: none; }
@media (prefers-reduced-motion: reduce) { .signal-destination { mask-image: none; } }

/* Centre desktop hero copy independently of its scroll-driven transform. */
@media (min-width: 701px) {
  .hero-copy { top: 50%; translate: 0 -50%; }
}

/* Air quality stays within the weather story, with a quiet smoke atmosphere. */
.air-quality-story { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; padding: 100px 8vw; background: #242724; color: #eef0e7; }
#air-quality-atmosphere { position: absolute; inset: 0; z-index: -1; opacity: .42; pointer-events: none; }
.air-quality-copy { max-width: 470px; }
.air-quality-copy h2 { font-size: clamp(32px, 3.7vw, 52px); font-weight: 400; line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; margin: 24px 0; }
.air-quality-copy > p { font-size: 17px; line-height: 1.6; color: #d1d4c8; }
.air-quality-copy .overline { margin: 0; }
.air-quality-visual { width: min(100%, 366px); margin: 0; justify-self: center; }
.air-quality-graph-wrap { width: 100%; height: calc(566px * var(--aq-scale, 1)); }
#air-quality-graph { width: 366px; transform: scale(var(--aq-scale, 1)); transform-origin: top left; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px #0004; }
.air-quality-visual figcaption { margin-top: 20px; color: #d1d4c8; font-size: 12px; line-height: 1.7; }
.air-quality-visual figcaption span { display: block; opacity: .65; font-size: 10px; }
@media(max-width: 700px) {
 .air-quality-story { grid-template-columns: 1fr; gap: 34px; padding: 70px 24px; }
 .air-quality-copy > p { font-size: 16px; }
}

#air-quality-atmosphere .wl-celestial-controls { display: none; }

/* Editorial close-ups: atmospheric detail without device frames. */
.detail-montage { padding: 100px 7vw 110px; background: #10191c; color: #edf0e7; }
.detail-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; max-width: 1120px; margin: 0 auto 42px; }
.detail-heading h2 { font-size: clamp(34px, 4.5vw, 62px); font-weight: 400; letter-spacing: -.045em; margin: 0; }
#detail-pause { color: #b4c6c6; border: 0; background: none; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.detail-composition { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 280px 240px; gap: 20px; max-width: 1120px; margin: auto; }
.detail-frame { position: relative; overflow: hidden; border-radius: 22px; isolation: isolate; }
.detail-rain { grid-row: 1 / 3; background: linear-gradient(155deg, #364e5b, #15232d 65%, #172328); }
#detail-rain-scene { position: absolute; inset: -12% -18%; }
#detail-rain-scene .wl-celestial-controls { display: none; }
.detail-rain-label { position: absolute; bottom: 30px; left: 30px; right: 30px; display: flex; justify-content: space-between; color: #d5e3e9; font-size: 13px; letter-spacing: .02em; }
.detail-rain-label span:last-child { opacity: .55; }
.detail-solar { background: linear-gradient(155deg, #405b65, #24383e); }
#detail-solar-scene { position: absolute; inset: 15px -15px -50px; }
.detail-solar-label { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; pointer-events: none; font-size: 10px; color: #c7d5d4; }
.detail-solar-label strong { display: block; font-size: 15px; font-weight: 400; color: #f2dfb0; margin-top: 5px; }
@media(max-width: 700px) {
 .detail-montage { padding: 65px 24px 70px; }
 .detail-heading { align-items: flex-start; margin-bottom: 28px; }
 .detail-heading h2 { max-width: 220px; }
 .detail-composition { grid-template-columns: 1fr; grid-template-rows: 330px 240px 230px; gap: 14px; }
 .detail-rain { grid-row: auto; }
 .detail-rain-label { left: 22px; right: 22px; bottom: 24px; }
 }

.detail-composition { grid-template-rows: 240px 320px; }
@media(max-width:700px) { .detail-composition { grid-template-rows: 330px 240px 300px; } }

.detail-cycle-track { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #ffffff12; z-index: 3; }
.detail-cycle-progress { display: block; height: 100%; background: #d4e7e780; transform: scaleX(0); transform-origin: left; }
@media(prefers-reduced-motion:reduce) { .detail-cycle-track { display: none; } }
:root[data-motion="reduce"] .detail-cycle-track { display: none; }

/* Autoplay Signal stories replace the scroll-controlled journey. */
.signal-story { height: auto; }
.signal-sticky { position: relative; height: auto; min-height: 0; overflow: hidden; padding: 90px 7vw 55px; }
.signal-heading { position: static; width: auto; max-width: 560px; }
.signal-graph-deck { position: relative; width: min(100%,410px); height: calc(625px * var(--signal-deck-scale,1)); justify-self: center; }
.signal-graph-panel { position: absolute; top: 0; left: 0; width: 366px; opacity: .22; filter: blur(3px); transform: translate(24px,-12px) rotate(5deg) scale(calc(var(--signal-deck-scale,1) * .92)); transform-origin: top left; transition: transform 700ms cubic-bezier(.22,1,.36,1),opacity 600ms, filter 600ms; }
.signal-graph-panel.is-front { z-index: 2; opacity: 1; filter: blur(0); transform: rotate(1.5deg) scale(var(--signal-deck-scale,1)); }
.signal-graph-panel.is-front[data-horizon="hourly"] { transform: rotate(-1.5deg) scale(var(--signal-deck-scale,1)); }
.signal-graph-panel .wl-stack { border-radius: 20px; overflow: hidden; box-shadow: 0 22px 50px #18322225; }
@media(max-width:700px) {
 .signal-sticky { padding: 65px 24px 40px; }
 .signal-graph-deck { width: min(100%,390px); }
}
:root[data-motion="reduce"] .signal-sticky { min-height: 0; }
:root[data-motion="reduce"] .signal-graph-panel { transition: none; }
@media(prefers-reduced-motion:reduce) { .signal-sticky { min-height:0; } .signal-graph-panel { transition:none; } }


/* Home Screen widgets: a quiet wallpaper crop, without another device frame. */
.widget-story { display:grid;grid-template-columns:1fr 1.15fr;gap:7vw;align-items:center;padding:110px 8vw;background:#eeeae1;color:#353b34; }
.widget-copy {max-width:460px}.widget-copy h2 {font-size:clamp(34px,3.7vw,52px);font-weight:400;line-height:1.07;letter-spacing:-.04em;margin:24px 0;text-wrap:balance}
.widget-copy>p:not(.overline){font-size:17px;line-height:1.6;color:#62685e}.widget-copy .widget-lock-copy{margin-top:26px}
.widget-wallpaper {padding:75px 32px 30px;border-radius:34px;background:radial-gradient(ellipse at 90% 0%,#b0b69a,transparent 65%),linear-gradient(145deg,#788976,#384e46 70%,#263f39);box-shadow:inset 0 0 0 1px #fff2;min-width:0;color:#f3f1e6}
.widget-stack-stage{position:relative}.widget-stack{aspect-ratio:364/170;width:100%;overflow:hidden;border-radius:26px;background:#141414;box-shadow:0 16px 36px #12251d55;touch-action:pan-x;position:relative;outline-offset:5px}
.widget-face{position:absolute;inset:0;width:100%;height:100%;transition:transform .7s cubic-bezier(.22,.75,.2,1),opacity .7s;transform:translateY(110%);opacity:0;pointer-events:none}
.widget-face.is-current{transform:translateY(0);opacity:1}.widget-face.is-above{transform:translateY(-110%)}
.widget-stack-dots{position:absolute;right:-27px;top:50%;transform:translateY(-50%);display:grid;gap:0}.widget-stack-dots button{width:24px;height:24px;background:none;border:0;padding:8px;cursor:pointer}.widget-stack-dots button:after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:#fff5;transition:background .3s}.widget-stack-dots button[aria-pressed=true]:after{background:#fff}
.widget-controls{display:flex;justify-content:center;align-items:center;gap:20px;font-size:12px;margin-top:20px;letter-spacing:.03em}.widget-controls button{border:1px solid #fff4;border-radius:20px;background:transparent;color:inherit;padding:6px 12px;cursor:pointer;font:inherit}
.widget-lock-example{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:52px;padding-top:28px;border-top:1px solid #ffffff25;font-size:12px;color:#e1e6d7}.widget-lock-circle{width:64px;height:64px;border-radius:50%;background:#ffffff18;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.widget-lock-circle img{object-fit:contain;filter:brightness(0) invert(1)}.widget-lock-circle strong{font-size:20px}
@media(max-width:760px){.widget-story{grid-template-columns:1fr;padding:70px 24px;gap:30px}.widget-wallpaper{padding:52px 24px 26px;border-radius:26px}.widget-copy>p:not(.overline){font-size:16px}.widget-stack{border-radius:20px}.widget-stack-dots{right:-24px}.widget-lock-example{margin-top:35px}}
@media(prefers-reduced-motion:reduce){.widget-face{transition:none}}
html[data-motion=reduce] .widget-face{transition:none}
.widget-wallpaper{width:100%;max-width:580px;box-sizing:border-box;justify-self:center}
.widget-face image{filter:brightness(0) invert(1)}
#widgets{scroll-margin-top:80px}

/* Inline Lock Screen weather in its actual context; crop out system status chrome. */
.widget-lock-example{display:block;margin:48px 0 0;padding:36px 12px 8px;text-align:center}
.widget-lock-crop{position:relative;width:100%;aspect-ratio:2.35;overflow:hidden;border-radius:16px 16px 0 0;mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%)}
.widget-lock-crop img{display:block;position:absolute;left:0;top:0;width:100%;height:auto;transform:translateY(-7%);filter:brightness(.65) contrast(2)}
.widget-lock-example figcaption{margin-top:18px;font-size:12px;color:#e1e6d7}

/* Give the alternating metric close-up room for the complete time index. */
.detail-composition{grid-template-rows:240px 375px}
@media(max-width:700px){.detail-composition{grid-template-rows:330px 240px 340px}}

.detail-description { max-width: 580px; margin: 16px 0 0; color: var(--muted, #aab5af); font-size: 17px; line-height: 1.6; }

/* Two-card montage: weather motion beside the solar path. */
.detail-composition { grid-template-columns: 1.3fr 1fr; grid-template-rows: 420px; }
.detail-rain { grid-row: auto; }
@media(max-width:700px) { .detail-composition { grid-template-columns: 1fr; grid-template-rows: 330px 240px; } }
.signal-heading > p.signal-timeline-note { margin-top: 10px; }

/* Hero stop captions: wide screens only, after the opening copy fades. */
.hero-stops { position: absolute; left: var(--section-gutter); top: 50%; translate: 0 -50%; width: min(300px, 24vw); z-index: 5; pointer-events: none; opacity: 0; }
.hero-stop { position: absolute; inset: 0 auto auto 0; width: 100%; translate: 0 -50%; opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.22,1,.36,1); }
.hero-stop.is-active { opacity: 1; transform: none; }
.hero-stop .overline { color: #8fa397; margin: 0 0 12px; }
.hero-stop h2 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; color: #eef1ea; margin: 0 0 14px; }
.hero-stop > p:last-child { font-size: 15px; line-height: 1.55; color: #b9c6bd; margin: 0; }
@media (max-width: 959px) { .hero-stops { display: none; } }
:root[data-motion="reduce"] .hero-stops { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-stops { display: none; } }

/* A quiet maker credit under the closing call to action. */
.closing-maker { margin: 30px 0 0; font-size: 13px; line-height: 1.5; color: #b8c8cd; }
.closing-maker a { color: #e9eee8; text-decoration: underline; text-decoration-color: #ffffff55; text-underline-offset: 4px; }
.closing-maker a:hover { text-decoration-color: currentColor; }
.closing-maker a:focus-visible { outline: 2px solid white; outline-offset: 4px; border-radius: 2px; }

/* Free and Premium: a first-pass comparison before the closing. */
.plans-story { padding: 100px var(--section-gutter) 110px; background: #10191c; color: #edf0e7; }
.plans-intro { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.plans-intro h2 { font-size: clamp(32px, 3.8vw, 52px); font-weight: 400; line-height: 1.06; letter-spacing: -.04em; margin: 18px 0; text-wrap: balance; }
.plans-intro > p:last-child { font-size: 17px; line-height: 1.6; color: #b9c6bd; margin: 0; }
.plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 0 auto; }
.plan { border: 1px solid #ffffff1f; border-radius: 22px; padding: 30px 32px 26px; background: #ffffff05; }
.plan--premium { border-color: #f2dfb055; background: linear-gradient(160deg, #f2dfb012, #ffffff04 60%); }
.plan h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 18px; }
.plan--premium h3 { color: #f2dfb0; }
.plan-lead { font-size: 14px; color: #b9c6bd; margin: -8px 0 14px; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid #ffffff12; font-size: 15px; line-height: 1.45; color: #dfe5dd; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: #9fb8a6; }
.plan--premium li::before { background: #f2dfb0; }
@media (max-width: 700px) {
  .plans-story { padding: 70px var(--section-gutter) 75px; }
  .plans-intro { text-align: left; margin-bottom: 32px; }
  .plans-intro > p:last-child { font-size: 16px; }
  .plans-grid { grid-template-columns: 1fr; gap: 14px; }
  .plan { padding: 24px 22px 18px; }
}

/* Signals: one card beside its graph, joined by a line from the active row to the graph headline. */
.signal-sticky { padding: 110px 7vw 110px; }
.signal-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 9vw; max-width: 1120px; margin: 0 auto; }
.signal-side { max-width: 440px; }
.signal-picker { margin-top: 34px; }
.signal-list.wl-signals { box-shadow: 0 18px 45px #18322222; }
.signal-list .wl-signal-row { position: relative; opacity: .48; transition: opacity 300ms ease; }
.signal-list .wl-signal-row:hover { opacity: .8; }
.signal-list .wl-signal-row.is-active { opacity: 1; }
.signal-row-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; opacity: 0; transition: opacity 300ms ease;
  background: linear-gradient(var(--metric), var(--metric)) no-repeat 0 0 / calc(var(--signal-progress, 0) * 100%) 100%, #ffffff17; }
.is-autoplaying .wl-signal-row.is-active .signal-row-progress { opacity: 1; }
.signal-auto-controls { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 13px; color: #5d705f; }
#signal-replay { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #53645140; border-radius: 20px; padding: 8px 14px 8px 12px; background: #ffffff55; color: #1b3028; font: inherit; font-weight: 500; cursor: pointer; }
#signal-replay:hover { background: #ffffff99; }
#signal-replay[hidden] { display: none; }
#signal-replay:focus-visible { outline: 2px solid #1b3028; outline-offset: 3px; }
.signal-replay-icon { width: 8px; height: 10px; border-inline: 3px solid currentColor; box-sizing: border-box; }
#signal-replay[aria-pressed="true"] .signal-replay-icon { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.signal-connector { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 300ms ease; }
.signal-connector.is-ready { opacity: 1; }
.signal-connector-line { fill: none; stroke: #2f4a36; stroke-opacity: .78; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.signal-node circle { transform-box: fill-box; transform-origin: center; }
.signal-node-ring { fill: none; stroke: var(--metric, #2f4a36); stroke-width: 2; opacity: 0; }
.signal-node--start .signal-node-core { fill: #e4e8df; stroke: var(--metric, #2f4a36); stroke-width: 3; }
.signal-node--end .signal-node-core { fill: var(--metric, #2f4a36); stroke: #1b3028; stroke-width: 2.5; }
.signal-pulse { opacity: 0; }
.signal-pulse-halo { fill: var(--metric, #2f4a36); opacity: .35; filter: blur(3px); }
.signal-pulse-core { fill: var(--metric, #2f4a36); stroke: #fff; stroke-width: 2; }
.signal-graph-deck { justify-self: center; }
@media (max-width: 899px) {
  .signal-sticky { padding: 70px 24px 60px; }
  .signal-layout { grid-template-columns: 1fr; gap: 40px; }
  .signal-side { max-width: 520px; }
  .signal-connector { display: none; }
}

/* Home Screen framing: the stack sits in the top row with its name, above faded placeholder icons
   sized to the iOS grid (a medium widget spans four icon columns). */
.widget-wallpaper { padding-top: 48px; }
.home-widget-name { margin: 8px 0 0; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: #f3f1e6d0; }
.home-icons { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 8%; row-gap: 16px; margin-top: 22px; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); }
.home-icon { display: grid; justify-items: center; gap: 7px; }
.home-icon i { width: 100%; aspect-ratio: 1; border-radius: 23%; background: linear-gradient(160deg, #ffffff2e, #ffffff12); box-shadow: inset 0 0 0 1px #ffffff1a; }
.home-icon:nth-child(3n+2) i { background: linear-gradient(160deg, #ffffff24, #ffffff0d); }
.home-icon b { width: 56%; height: 5px; border-radius: 3px; background: #ffffff2a; }
/* Stack page dots: the current one stretches into a pill that fills over each hold. */
.widget-stack-dots { gap: 2px; }
.widget-stack-dots button { width: 22px; height: auto; padding: 4px 8px; }
.widget-stack-dots button:after { display: none; }
.widget-dot-fill { position: relative; display: block; width: 6px; height: 6px; border-radius: 3px; overflow: hidden; background: #ffffff55; transition: height .35s cubic-bezier(.22,1,.36,1), background .3s; }
.widget-stack-dots button[aria-pressed=true] .widget-dot-fill { height: 20px; background: #ffffff45; }
.widget-story:not(.is-rotating) .widget-stack-dots button[aria-pressed=true] .widget-dot-fill { background: #fff; }
.widget-story.is-rotating .widget-stack-dots button[aria-pressed=true] .widget-dot-fill::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleY(var(--widget-progress, 0)); transform-origin: top; }
.widget-controls { gap: 14px; margin-top: 18px; font-size: 13px; letter-spacing: 0; }
#widget-play { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; font-weight: 500; }
#widget-play:hover { background: #ffffff14; }
#widget-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#widget-play[hidden] { display: none; }
.widget-play-icon { width: 8px; height: 10px; border-inline: 3px solid currentColor; box-sizing: border-box; }
#widget-play[aria-pressed="true"] .widget-play-icon { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.widget-status { color: #f3f1e6c0; }
.widget-status strong { color: #f3f1e6; font-weight: 600; }
@media (max-width: 760px) {
  .widget-wallpaper { padding-top: 36px; }
  .home-icons { row-gap: 12px; margin-top: 18px; }
  .home-icon b { height: 4px; }
}