/* ============================================================
   SHINDO — module product pages (Radiation first; Weather, Air … reuse this)
   Layout and motion follow the Cleo "Autopilot" product-page family:
   full-bleed hero with floating glass, two-column intro, a rounded window
   the app glides through, four "how it works" cards, a highlight image card,
   tabbed isometric screens, two immersive cards, a colour-split statement,
   QR call-to-action and footnotes. Each module sets its own colour below.
   ============================================================ */
.mod { --mc: #E0805F; --mc-soft: #F3E3D9; --mc-deep: #2A1B17; --mc-ink: #8A4A33; }
.mod--radiation { --mc: #E0805F; --mc-soft: #F4E4DA; --mc-deep: #2A1B17; --mc-ink: #9A4F35;
  --hero-bg: radial-gradient(70% 60% at 30% 20%, #5a3426 0%, rgba(90,52,38,0) 60%), radial-gradient(60% 60% at 80% 80%, #24343c 0%, rgba(36,52,60,0) 60%), linear-gradient(180deg, #2a1b17 0%, #171416 100%);
  --win-bg: radial-gradient(60% 50% at 20% 25%, rgba(224,128,95,0.55) 0%, rgba(224,128,95,0) 60%), radial-gradient(50% 50% at 85% 70%, rgba(120,150,170,0.45) 0%, rgba(120,150,170,0) 60%), linear-gradient(180deg, #3a2620 0%, #1d1719 100%);
  --panel-bg: radial-gradient(70% 60% at 70% 30%, #fff6f0 0%, rgba(255,246,240,0) 60%), linear-gradient(160deg, #F2DCCF 0%, #E9CDBE 45%, #D9B9AA 100%);
  --duo-a: radial-gradient(60% 50% at 30% 30%, rgba(224,128,95,0.5), rgba(224,128,95,0) 60%), linear-gradient(180deg, #3b2721 0%, #1b1517 100%);
  --duo-b: radial-gradient(60% 50% at 70% 25%, rgba(150,120,200,0.45), rgba(150,120,200,0) 60%), linear-gradient(180deg, #2b2238 0%, #151419 100%);
  --glow: 224,128,95; --speck: 255,236,220; --shadow-tint: 120,70,50; }
.mod--transit { --mc: #3FC1B0; --mc-soft: #DDF1EC; --mc-deep: #0F2226; --mc-ink: #1F7A6E;
  --hero-bg: radial-gradient(70% 60% at 28% 18%, #134a4a 0%, rgba(19,74,74,0) 60%), radial-gradient(60% 60% at 82% 82%, #1f2d4a 0%, rgba(31,45,74,0) 60%), linear-gradient(180deg, #0f2226 0%, #0d1117 100%);
  --win-bg: radial-gradient(60% 50% at 20% 25%, rgba(63,193,176,0.45) 0%, rgba(63,193,176,0) 60%), radial-gradient(50% 50% at 85% 70%, rgba(90,120,200,0.4) 0%, rgba(90,120,200,0) 60%), linear-gradient(180deg, #14292e 0%, #0e1318 100%);
  --panel-bg: radial-gradient(70% 60% at 70% 30%, #f2fbf9 0%, rgba(242,251,249,0) 60%), linear-gradient(160deg, #D6EEE9 0%, #C3E3DD 45%, #AFD3CE 100%);
  --duo-a: radial-gradient(60% 50% at 30% 30%, rgba(90,120,200,0.4), rgba(90,120,200,0) 60%), linear-gradient(180deg, #172238 0%, #0f1219 100%);
  --duo-b: radial-gradient(60% 50% at 70% 25%, rgba(63,193,176,0.42), rgba(63,193,176,0) 60%), linear-gradient(180deg, #11292b 0%, #0d1214 100%);
  --glow: 63,193,176; --speck: 220,255,248; --shadow-tint: 30,90,85; }

/* ---------- 1 · Hero ---------- */
.ap-hero { position: relative; height: 100svh; min-height: 700px; overflow: hidden; color: #fff; isolation: isolate;
  background: var(--hero-bg); }
.ap-hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ap-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(23,20,22,0), rgba(23,20,22,0.55)); }
.ap-hero__copy { position: absolute; z-index: 3; left: clamp(24px, 4.6vw, 88px); top: calc(var(--nav-h) + clamp(28px, 6vh, 72px)); max-width: min(600px, 88vw); display: grid; gap: 22px; will-change: transform, opacity; }
.ap-hero__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 3.7vw, 62px); line-height: 1.06; letter-spacing: -0.035em; text-shadow: 0 2px 30px rgba(0,0,0,0.25); }
.ap-hero__stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ap-phone, .ap-shard { position: absolute; left: 63%; top: 55%; will-change: transform; transition: opacity 1.1s var(--ease); }
.ap-phone { width: clamp(230px, 21vw, 340px); aspect-ratio: 9 / 19.5; border-radius: clamp(34px, 3vw, 48px); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.08);
  box-shadow: 0 60px 120px rgba(0,0,0,0.45), 0 0 0 6px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
  transform: translate(-50%, -50%); }
.ap-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ap-phone__sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,214,190,0.22) 44%, rgba(170,220,255,0.18) 52%, rgba(255,255,255,0) 64%);
  background-size: 260% 100%; animation: sheen 7s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
.ap-shard { width: clamp(190px, 17vw, 290px); border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 40px 90px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4); transform: translate(-50%, -50%); }
.ap-shard img { display: block; width: 100%; height: auto; }
.ap-shard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%); pointer-events: none; }
.ap-hero:not(.is-in) .ap-shard, .ap-hero:not(.is-in) .ap-phone { opacity: 0; }

/* ---------- 2 · Intro ---------- */
.ap-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: clamp(24px, 4vw, 80px);
  padding: clamp(110px, 13vw, 200px) clamp(24px, 4.6vw, 88px) clamp(90px, 10vw, 150px); align-items: start; }
.ap-intro .eyebrow { margin-top: 0.8em; }
.ap-intro__body { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(23px, 2.25vw, 36px); line-height: 1.28; letter-spacing: -0.02em; color: var(--ink); }

/* ---------- 3 · Window ---------- */
.ap-window { padding: 0 var(--inset); }
.ap-window__frame { position: relative; height: clamp(640px, 108vh, 1040px); border-radius: var(--radius-xl); overflow: hidden; isolation: isolate;
  background: var(--win-bg); }
.ap-window__screen { position: absolute; left: 50%; top: 0; width: min(520px, 64%); border-radius: 38px; overflow: hidden; z-index: 1;
  border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 60px 140px rgba(0,0,0,0.5); transform: translate3d(-50%, 12%, 0); will-change: transform; }
.ap-window__screen img { display: block; width: 100%; height: auto; }
.ap-bubble { position: absolute; z-index: 2; margin: 0; padding: 18px 26px; border-radius: 26px 26px 26px 6px; color: var(--ink);
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.7vw, 28px); letter-spacing: -0.02em; white-space: nowrap;
  background: rgba(255,255,255,0.78); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25), inset 0 1px 0 #fff; will-change: transform; }
.ap-bubble--1 { left: 9%; top: 26%; } .ap-bubble--2 { right: 8%; top: 48%; border-radius: 26px 26px 6px 26px; } .ap-bubble--3 { left: 13%; top: 70%; }
.ap-window__note { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0; padding: 80px clamp(24px, 8vw, 160px) 34px; text-align: center; color: rgba(255,255,255,0.85); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.45;
  background: linear-gradient(to bottom, rgba(29,23,25,0), rgba(29,23,25,0.85) 60%); }

/* ---------- 4 · How it works ---------- */
.ap-how { padding: clamp(90px, 10vw, 160px) clamp(24px, 4.6vw, 88px); }
.ap-h2 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 3.3vw, 54px); line-height: 1.08; letter-spacing: -0.03em; }
.ap-h3 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 2.6vw, 42px); line-height: 1.1; letter-spacing: -0.03em; }
.ap-how__grid { margin-top: clamp(36px, 4vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ap-step { min-height: clamp(260px, 22vw, 340px); padding: 30px 28px 34px; border-radius: 30px; background: #ECE8E3; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; transition: transform 500ms var(--ease), background 500ms var(--ease); }
.ap-step:hover { transform: translateY(-4px); background: #E7E2DC; }
.ap-step p { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-faint); }
.ap-step b { display: block; font-weight: 500; color: var(--ink); }
.ap-dots { display: block; width: 46px; height: 46px; }
.ap-dots svg { width: 100%; height: 100%; display: block; }

/* ---------- 5 · Highlight ---------- */
.ap-highlight { padding: 0 var(--inset); }
.ap-highlight__card { position: relative; height: clamp(560px, 94vh, 1000px); border-radius: var(--radius-xl); overflow: hidden; color: #fff; isolation: isolate; background: #10202e; }
.ap-highlight__img { position: absolute; inset: 0; z-index: 0; }
.ap-highlight__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: blur(34px) saturate(1.25) brightness(0.75); transform: scale(calc(var(--hz, 1.15) + 0.15)); will-change: transform; }
.ap-highlight__phone { position: absolute; z-index: 2; right: clamp(24px, 9vw, 160px); top: 50%; height: 88%; aspect-ratio: 780 / 1695; border-radius: clamp(28px, 2.6vw, 44px); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 60px 140px rgba(0,0,0,0.55), 0 0 0 6px rgba(255,255,255,0.05); transform: translateY(calc(-50% + var(--hy, 0px))); will-change: transform; }
.ap-highlight__phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-highlight__card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,14,24,0.55) 0%, rgba(8,14,24,0) 60%); }
.ap-highlight__copy { position: absolute; z-index: 3; left: clamp(24px, 4vw, 72px); top: clamp(32px, 5vw, 72px); max-width: min(560px, 46%); display: grid; gap: 18px; }

/* ---------- 6 · Tabbed isometric features ---------- */
.ap-feat { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(16px, 2vw, 24px) var(--inset) 0 clamp(24px, 4.6vw, 88px); }
.ap-feat__copy { display: grid; gap: 30px; justify-items: start; }
.ap-feat__copy > .ap-feat__text { grid-area: 1 / 1; }
.ap-feat__copy { grid-template-areas: "t" "b"; } .ap-feat__copy > .btn { grid-area: b; }
.ap-feat__text { display: grid; gap: 16px; opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); pointer-events: none; }
.ap-feat__text.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ap-feat__text p { margin: 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.ap-feat__panel { position: relative; height: clamp(600px, 96vh, 1000px); border-radius: var(--radius-xl); overflow: hidden; perspective: 2200px;
  background: var(--panel-bg); }
.ap-feat__tabs { position: absolute; z-index: 3; top: 26px; left: 50%; transform: translateX(-50%); }
.seg--light { background: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.75); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 10px 30px rgba(var(--shadow-tint),0.12); }
.seg--light button { color: var(--ink); height: 44px; padding: 0 24px; font-size: 15px; }
.seg--light button:hover { background: rgba(255,255,255,0.4); color: var(--ink); }
.seg--light button[aria-selected="true"] { background: rgba(255,255,255,0.92); box-shadow: 0 4px 14px rgba(var(--shadow-tint),0.14), inset 0 1px 0 #fff; }
.ap-iso { position: absolute; inset: 0; transform-style: preserve-3d; }
.ap-iso__stack { position: absolute; left: 44%; top: 56%; width: clamp(240px, 26vw, 400px); transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(52deg) rotateZ(-34deg) translateZ(-40px); opacity: 0; transition: opacity 700ms var(--ease), transform 900ms var(--ease); }
.ap-iso__stack.is-on { opacity: 1; transform: translate(-50%, -50%) rotateX(52deg) rotateZ(-34deg) translateZ(0); }
.ap-iso__stack img { display: block; width: 100%; height: auto; border-radius: 26px; border: 1px solid rgba(255,255,255,0.7);
  box-shadow: -30px 40px 60px rgba(var(--shadow-tint),0.25), inset 0 1px 0 #fff; }
.ap-iso__stack img + img { position: absolute; left: 22%; top: 30%; width: 92%; transform: translateZ(70px); transition: transform 900ms var(--ease); }
.ap-iso__stack.is-on img + img { transform: translateZ(110px); }

/* ---------- 7 · Immersive duo ---------- */
.ap-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--inset); padding: var(--inset); }
.ap-duo__card { position: relative; height: clamp(600px, 96vh, 1000px); border-radius: var(--radius-xl); overflow: hidden; color: #fff; isolation: isolate; }
.ap-duo__card--a { background: var(--duo-a); }
.ap-duo__card--b { background: var(--duo-b); }
.ap-duo__media { position: absolute; left: 50%; top: 10%; width: min(400px, 70%); transform: translateX(-50%); will-change: transform; }
.ap-duo__media img { display: block; width: 100%; border-radius: 28px; border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 50px 120px rgba(0,0,0,0.5); }
.ap-duo__cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 120px clamp(24px, 3vw, 44px) clamp(26px, 3vw, 44px); background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.55) 55%); }
.ap-duo__cap h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -0.02em; }
.ap-duo__cap p { margin: 0; max-width: 38ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.75); }
.ap-calc { position: absolute; left: 50%; top: 12%; width: min(440px, 82%); transform: translateX(-50%); padding: 28px 28px 24px; border-radius: 30px; display: grid; gap: 18px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 40px 100px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.3); font-variant-numeric: tabular-nums; }
.ap-calc__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.ap-calc__rate { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.75); }
.ap-calc__rate b { font-family: var(--font-display); font-size: clamp(38px, 3.6vw, 56px); font-weight: 700; color: #fff; letter-spacing: -0.03em; margin-right: 4px; }
.ap-calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; }
.ap-calc__range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #D9826B 0%, #D9826B 36%, #E8B04A 52%, #E68A45 76%, #D9534F 100%); }
.ap-calc__range::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #D9826B 0%, #D9826B 36%, #E8B04A 52%, #E68A45 76%, #D9534F 100%); }
.ap-calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(224,128,95,0.35), 0 6px 18px rgba(0,0,0,0.35); }
.ap-calc__range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(224,128,95,0.35), 0 6px 18px rgba(0,0,0,0.35); }
.ap-calc__range:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 99px; }
.ap-calc__band { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,0.1); font-size: 14px; font-weight: 500; }
.ap-calc__band i { width: 10px; height: 10px; border-radius: 50%; background: var(--bc, #D9826B); }
.ap-calc__rows { margin: 0; display: grid; }
.ap-calc__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 16px; }
.ap-calc__rows dt { color: rgba(255,255,255,0.8); } .ap-calc__rows dd { margin: 0; font-weight: 700; }
.ap-calc__fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.55); }

/* ---------- 8 · Statement ---------- */
.ap-statement { padding: clamp(110px, 13vw, 200px) 24px clamp(80px, 9vw, 140px); text-align: center; }
.ap-statement h2 { margin: 0 auto; max-width: 1100px; font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3vw, 48px); line-height: 1.18; letter-spacing: -0.025em; }
.ap-accent { color: var(--mc); }

/* ---------- 9 · QR ---------- */
.ap-qr { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: clamp(60px, 8vw, 120px) clamp(24px, 6vw, 140px) clamp(80px, 10vw, 150px); }
.ap-qr__copy { display: grid; gap: 28px; justify-items: end; text-align: right; }
.ap-qr .qr { justify-self: start; width: min(340px, 64vw); }

/* ---------- 10 · Notes ---------- */
.ap-notes { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 4.6vw, 88px) clamp(70px, 8vw, 120px); display: grid; gap: 14px; text-align: center; }
.ap-notes p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.ap-notes a { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ap-how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-feat { grid-template-columns: minmax(0, 1fr); padding: 0 var(--inset); }
  .ap-feat__copy { padding: 0 12px; }
  .ap-feat__panel { height: clamp(520px, 110vw, 820px); }
}
@media (max-width: 900px) {
  .ap-hero { min-height: 640px; }
  .ap-phone, .ap-shard { left: 50%; top: 71%; }
  .ap-hero__title { font-size: 34px; }
  .ap-phone { width: 50vw; }
  .ap-shard { width: 40vw; }
  .ap-intro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ap-window__frame { height: 150vw; max-height: 860px; }
  .ap-window__screen { width: 74%; border-radius: 28px; }
  .ap-bubble { font-size: 16px; padding: 12px 16px; } .ap-bubble--1 { left: 5%; } .ap-bubble--2 { right: 5%; } .ap-bubble--3 { left: 7%; }
  .ap-how__grid { grid-template-columns: minmax(0, 1fr); }
  .ap-step { min-height: 0; gap: 28px; }
  .ap-highlight__card { height: 150vw; max-height: 820px; }
  .ap-highlight__copy { max-width: 86%; }
  .ap-highlight__phone { right: 50%; top: auto; bottom: -12%; height: 72%; transform: translate(50%, var(--hy, 0px)); }
  .ap-iso__stack { width: 56vw; }
  .ap-duo { grid-template-columns: minmax(0, 1fr); }
  .ap-duo__card { height: 150vw; max-height: 820px; }
  .ap-qr { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ap-qr__copy { justify-items: center; text-align: center; }
  .ap-qr .qr { justify-self: center; }
  .seg--light button { padding: 0 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-phone__sheen { animation: none; }
  .ap-feat__text, .ap-iso__stack { transition: none; }
}
@media (max-width: 900px) {
  .ap-calc { top: 5%; width: 88%; padding: 20px; gap: 12px; }
  .ap-calc__hd { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ap-calc__rows div { font-size: 14px; padding: 9px 0; } .ap-calc__rows dd { white-space: nowrap; }
  .ap-calc__fine { display: none; }
}

/* ============================================================
   Build_08 — Transit page pieces
   ============================================================ */
/* Route: how the status reaches you, drawn as a rail line. A train runs along it as you scroll,
   and each station lights up as the train arrives. */
.ap-route { padding: clamp(90px, 10vw, 160px) clamp(24px, 4.6vw, 88px) clamp(70px, 8vw, 120px); }
.ap-route__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 80px); align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.ap-route__head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }
.ap-route__track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); padding-top: 70px; }
.ap-route__rail { position: absolute; left: 0; right: 0; top: 24px; height: 8px; border-radius: 99px; background: rgba(26,29,33,0.09); overflow: hidden; }
.ap-route__rail i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--rp, 0)); background: linear-gradient(90deg, var(--mc), #7DD9CD); border-radius: inherit; }
.ap-route__train { position: absolute; top: 9px; left: calc(var(--rp, 0) * (100% - 74px)); width: 74px; height: 38px; border-radius: 12px 20px 12px 12px; background: var(--ink); box-shadow: 0 10px 24px rgba(26,29,33,0.25); display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.ap-route__train::before, .ap-route__train::after { content: ""; width: 16px; height: 12px; border-radius: 3px; background: rgba(255,255,255,0.85); }
.ap-route__train::after { background: var(--mc); width: 22px; margin-left: auto; border-radius: 3px 8px 3px 3px; }
.ap-stop { position: relative; display: grid; gap: 12px; align-content: start; opacity: 0.35; transition: opacity 500ms var(--ease); }
.ap-stop.is-on { opacity: 1; }
.ap-stop::before { content: ""; position: absolute; left: 0; top: -53px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 5px solid rgba(26,29,33,0.18); transition: border-color 400ms var(--ease), transform 400ms var(--ease); }
.ap-stop.is-on::before { border-color: var(--mc); transform: scale(1.12); }
.ap-stop__code { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mc-ink); }
.ap-stop h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 1.8vw, 28px); letter-spacing: -0.02em; }
.ap-stop p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.ap-stop small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }

/* Line picker demo (duo card b) */
.ap-lines { position: absolute; left: 50%; top: 8%; width: min(440px, 84%); transform: translateX(-50%); display: grid; gap: 14px; will-change: transform; }
.ap-lines__hd { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.ap-lines__list { list-style: none; margin: 0; padding: 6px; border-radius: 24px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; gap: 2px; }
.ap-lines__list button { width: 100%; display: grid; grid-template-columns: 6px 1fr auto 28px; align-items: center; gap: 14px; padding: 12px 14px; border: 0; border-radius: 18px; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background 250ms var(--ease); }
.ap-lines__list button:hover { background: rgba(255,255,255,0.07); }
.ap-lines__list button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.ap-lines__list .bar { width: 4px; height: 26px; border-radius: 4px; background: var(--lc); }
.ap-lines__list .nm { display: grid; font-size: 15px; } .ap-lines__list .nm small { font-size: 12px; color: rgba(255,255,255,0.5); }
.ap-lines__list .st { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(91,214,160,0.16); color: #7FE0B0; white-space: nowrap; }
.ap-lines__list .st.bad { background: rgba(240,90,80,0.18); color: #FF7A70; }
.ap-lines__list .star { width: 28px; height: 28px; display: grid; place-items: center; color: rgba(255,255,255,0.4); transition: color 250ms var(--ease), transform 300ms cubic-bezier(.34,1.56,.5,1); }
.ap-lines__list button[aria-pressed="true"] .star { color: var(--mc); transform: scale(1.15); }
.ap-push { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 22px; color: var(--ink);
  background: rgba(245,245,247,0.86); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  transform-origin: top center; transition: opacity 400ms var(--ease), transform 500ms cubic-bezier(.34,1.56,.5,1); }
.ap-push[hidden] { display: grid; opacity: 0; transform: translateY(-14px) scale(0.96); pointer-events: none; }
.ap-push img, .ap-push .ic { width: 38px; height: 38px; border-radius: 9px; background: #12171c; display: grid; place-items: center; color: var(--mc); font-weight: 700; font-size: 13px; }
.ap-push b { display: block; font-size: 14px; } .ap-push div span { display: block; font-size: 13.5px; line-height: 1.35; color: rgba(26,29,33,0.75); }
.ap-push time { align-self: start; font-size: 12px; color: rgba(26,29,33,0.5); }
.ap-lines__note { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.55); }

@media (max-width: 1100px) {
  .ap-route__head { grid-template-columns: minmax(0, 1fr); }
  .ap-route__track { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 52px; gap: 36px; }
  .ap-route__rail { left: 15px; right: auto; top: 0; bottom: 0; width: 8px; height: auto; }
  .ap-route__rail i { transform-origin: top; transform: scaleY(var(--rp, 0)); }
  .ap-route__train { display: none; }
  .ap-stop::before { left: -52px; top: 2px; }
}
@media (max-width: 900px) { .ap-lines { top: 4%; width: 90%; } .ap-lines__list button { padding: 10px; gap: 10px; } }

/* iPhone frames inside module sections */
.ap-phone.iphone { width: clamp(240px, 21vw, 340px); }
.ap-window__screen.iphone { width: min(480px, 58%); }
.ap-highlight__phone.iphone { height: auto; width: min(380px, 30%); top: 7%; transform: translateY(var(--hy, 0px)); }
.ap-duo__media--phone.iphone { width: min(330px, 58%); top: 7%; }
.ap-duo__media--phone img { border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 900px) {
  .ap-phone.iphone { width: 52vw; }
  .ap-window__screen.iphone { width: 72%; }
  .ap-highlight__phone.iphone { width: 58%; right: 50%; top: auto; bottom: -30%; transform: translate(50%, var(--hy, 0px)); }
  .ap-duo__media--phone.iphone { width: 46%; top: 5%; }
}

/* ============================================================
   Build_09 — Weather & Typhoons page
   ============================================================ */
.mod--weather { --mc: #F2A541; --mc-soft: #F6E8D2; --mc-deep: #0d1a33; --mc-ink: #9A6418;
  --hero-bg: radial-gradient(70% 60% at 25% 18%, #1d3566 0%, rgba(29,53,102,0) 60%), radial-gradient(55% 55% at 80% 80%, #4a2a1a 0%, rgba(74,42,26,0) 60%), linear-gradient(180deg, #0f1a33 0%, #0b0e17 100%);
  --win-bg: radial-gradient(60% 50% at 20% 25%, rgba(110,150,255,0.40) 0%, rgba(110,150,255,0) 60%), radial-gradient(50% 50% at 85% 70%, rgba(242,165,65,0.35) 0%, rgba(242,165,65,0) 60%), linear-gradient(180deg, #13203d 0%, #0c0f18 100%);
  --panel-bg: radial-gradient(70% 60% at 70% 30%, #fbf6ee 0%, rgba(251,246,238,0) 60%), linear-gradient(160deg, #DCE4F5 0%, #CBD6EE 45%, #B8C5E2 100%);
  --duo-a: radial-gradient(60% 50% at 30% 30%, rgba(110,150,255,0.40), rgba(110,150,255,0) 60%), linear-gradient(180deg, #14213f 0%, #0c0f18 100%);
  --duo-b: radial-gradient(60% 50% at 70% 25%, rgba(242,165,65,0.38), rgba(242,165,65,0) 60%), linear-gradient(180deg, #2a1f14 0%, #121014 100%);
  --glow: 110,150,255; --speck: 225,235,255; --shadow-tint: 40,60,110; }
.ap-duo__media--card { position: absolute; left: 50%; top: 16%; width: min(480px, 82%); transform: translateX(-50%); }
.ap-duo__media--card img { display: block; width: 100%; border-radius: 26px; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 50px 120px rgba(0,0,0,0.5); }

/* ---------- Advisory alerts ---------- */
.wx-alert { position: relative; margin: 0 var(--inset); border-radius: var(--radius-xl); overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(70% 60% at 75% 30%, #2b3f6b 0%, rgba(43,63,107,0) 60%), linear-gradient(180deg, #16223f 0%, #0b0f1a 100%); transition: background 800ms var(--ease); }
.wx-alert[data-hazard="snow"] { background: radial-gradient(70% 60% at 75% 30%, #5a6a86 0%, rgba(90,106,134,0) 60%), linear-gradient(180deg, #2a3446 0%, #121620 100%); }
.wx-alert[data-hazard="storm"] { background: radial-gradient(70% 60% at 75% 30%, #3b4758 0%, rgba(59,71,88,0) 60%), linear-gradient(180deg, #1c232e 0%, #0d1015 100%); }
.wx-alert[data-hazard="thunder"] { background: radial-gradient(70% 60% at 75% 30%, #3a2f5c 0%, rgba(58,47,92,0) 60%), linear-gradient(180deg, #1a1530 0%, #0b0a14 100%); }
.wx-alert[data-hazard="waves"] { background: radial-gradient(70% 60% at 75% 30%, #1b4a6b 0%, rgba(27,74,107,0) 60%), linear-gradient(180deg, #0f2a3d 0%, #08121a 100%); }
.wx-alert[data-level="emergency"]::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(226,72,58,0.6), inset 0 0 160px rgba(226,72,58,0.35); animation: emerg 1.6s ease-in-out infinite; }
@keyframes emerg { 50% { opacity: 0.35; } }
.wx-alert__sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.wx-alert__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 90px); align-items: center;
  padding: clamp(60px, 7vw, 120px) clamp(24px, 5vw, 96px); min-height: clamp(720px, 100vh, 980px); }
.wx-alert__copy { display: grid; gap: 22px; align-content: center; }
.wx-alert__copy > p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.75); }
.wx-alert__controls { display: grid; gap: 12px; margin-top: 10px; }
.wx-alert__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.wx-chips, .wx-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-chips button, .wx-levels button { appearance: none; cursor: pointer; display: grid; gap: 1px; text-align: left; padding: 10px 16px; border-radius: 16px; font: inherit; color: #fff;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease), opacity 300ms; }
.wx-chips button b, .wx-levels button b { font-weight: 500; font-size: 15px; }
.wx-chips button small, .wx-levels button small { font-size: 12px; color: rgba(255,255,255,0.55); font-family: var(--font-jp); }
.wx-chips button:hover, .wx-levels button:hover { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.wx-chips button[aria-checked="true"] { background: rgba(255,255,255,0.92); color: var(--ink); border-color: #fff; }
.wx-chips button[aria-checked="true"] small { color: rgba(26,29,33,0.6); }
.wx-levels button[data-v="advisory"][aria-checked="true"] { background: #E8C74A; color: #1a1d21; border-color: #E8C74A; }
.wx-levels button[data-v="warning"][aria-checked="true"] { background: #EE7A2F; color: #fff; border-color: #EE7A2F; }
.wx-levels button[data-v="emergency"][aria-checked="true"] { background: #8E1F6A; color: #fff; border-color: #C64B9A; }
.wx-levels button[aria-checked="true"] small { color: inherit; opacity: 0.75; }
.wx-levels button:disabled { opacity: 0.28; cursor: not-allowed; transform: none; }
.wx-chips button:focus-visible, .wx-levels button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wx-alert__fine { margin: 4px 0 0; max-width: 52ch; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.5); }
.wx-alert__device { justify-self: center; width: min(360px, 80%); }
.wx-alert[data-level="emergency"] .wx-alert__device .iphone { animation: buzz 2.4s ease-in-out infinite; }
@keyframes buzz { 0%, 86%, 100% { transform: none; } 88% { transform: translateX(-3px) rotate(-0.6deg); } 90% { transform: translateX(3px) rotate(0.6deg); } 92% { transform: translateX(-2px); } 94% { transform: translateX(2px); } }
.wx-lock { position: absolute; inset: 0; z-index: 0; isolation: isolate; display: flex; flex-direction: column; align-items: center; color: #fff; padding: 22% 5% 0; font-variant-numeric: tabular-nums; }
.wx-lock__sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #2a3c66 0%, #141c33 55%, #0a0d16 100%); transition: background 800ms var(--ease); }
.wx-alert[data-hazard="snow"] .wx-lock__sky { background: linear-gradient(180deg, #8a96ab 0%, #3c4558 55%, #171b24 100%); }
.wx-alert[data-hazard="thunder"] .wx-lock__sky { background: linear-gradient(180deg, #4a3b78 0%, #1d1838 55%, #0b0a14 100%); }
.wx-alert[data-hazard="waves"] .wx-lock__sky { background: linear-gradient(180deg, #2a6a92 0%, #10344c 55%, #08121a 100%); }
.wx-alert[data-hazard="storm"] .wx-lock__sky { background: linear-gradient(180deg, #4d5a6e 0%, #20262f 55%, #0d1015 100%); }
.wx-lock__date { font-size: clamp(12px, 1.1vw, 16px); font-weight: 600; opacity: 0.85; }
.wx-lock__time { font-family: var(--font-display); font-weight: 600; font-size: clamp(58px, 6.2vw, 92px); line-height: 1; letter-spacing: -0.02em; }
.wx-note { position: absolute; left: 4.5%; right: 4.5%; top: 41%; display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 12px 13px 13px; border-radius: 22px; color: var(--ink);
  background: rgba(240,242,246,0.82); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(-30px) scale(0.94); }
.wx-note.is-in { animation: notein 700ms cubic-bezier(.34,1.56,.5,1) forwards; }
@keyframes notein { from { opacity: 0; transform: translateY(-30px) scale(0.94); } to { opacity: 1; transform: none; } }
.wx-note__icon { width: 40px; height: 40px; border-radius: 10px; background: #12171c; color: var(--mc); display: grid; place-items: center; font-family: var(--font-jp); font-weight: 700; font-size: 12px; }
.wx-alert[data-level="emergency"] .wx-note__icon { background: #8E1F6A; color: #fff; }
.wx-note__top { display: flex; justify-content: space-between; font-size: 12px; color: rgba(26,29,33,0.55); } .wx-note__top b { font-weight: 600; color: rgba(26,29,33,0.8); }
.wx-note__title { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.wx-alert[data-level="emergency"] .wx-note__title { color: #A3175E; }
.wx-note__text { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; }

/* ---------- Forecast circles ---------- */
.wx-cone { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 90px); align-items: center;
  padding: clamp(90px, 10vw, 160px) var(--inset) clamp(70px, 8vw, 120px) clamp(24px, 4.6vw, 88px); }
.wx-cone__copy { display: grid; gap: 20px; }
.wx-cone__copy > p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.wx-cone__steps { display: flex; flex-wrap: wrap; gap: 6px; }
.wx-cone__steps button { appearance: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; padding: 10px 16px; border-radius: 99px; border: 1px solid rgba(26,29,33,0.12); background: #fff; color: var(--ink); transition: background 300ms, color 300ms; font-variant-numeric: tabular-nums; }
.wx-cone__steps button[aria-checked="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.wx-cone__read { margin: 6px 0 0; display: flex; gap: 32px; flex-wrap: wrap; }
.wx-cone__read div { display: grid; gap: 4px; } .wx-cone__read dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.wx-cone__read dd { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wx-cone__read .c-rad { color: var(--mc-ink); }
.wx-cone__stage { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: #0d1a33; box-shadow: var(--shadow-card); }
.wx-cone__svg { display: block; width: 100%; height: auto; }
.cn__c { fill: url(#cg); stroke: #F2A541; stroke-width: 1.5; stroke-opacity: 0.35; transform-box: fill-box; transform-origin: center; transform: scale(0.6); opacity: 0; transition: transform 700ms cubic-bezier(.34,1.56,.5,1), opacity 500ms, stroke-opacity 400ms; }
.cn__d { fill: #F2A541; opacity: 0.25; transition: opacity 400ms; }
.cn__t { fill: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; opacity: 0; transition: opacity 180ms; }
.cn.is-past .cn__c { opacity: 0.45; transform: none; } .cn.is-past .cn__d { opacity: 0.8; }
.cn.is-on .cn__c { opacity: 1; transform: none; stroke-opacity: 1; stroke-width: 2.5; } .cn.is-on .cn__d { opacity: 1; } .cn.is-on .cn__t { opacity: 1; }
.cn__storm .cn__spin { transform-origin: 0 0; animation: spin 2.4s linear infinite; }
.cn__storm + .cn__t { opacity: 0.8; }
@keyframes spin { to { transform: rotate(-360deg); } }
.wx-cone__cap { position: absolute; left: 20px; right: 20px; bottom: 16px; margin: 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.55); }

/* ---------- AI briefing ---------- */
.wx-ai { position: relative; height: 330vh; margin: 0 var(--inset); border-radius: var(--radius-xl); color: #fff;
  background: radial-gradient(60% 40% at 50% 30%, rgba(124,92,255,0.30), rgba(124,92,255,0) 70%), linear-gradient(180deg, #1b1630 0%, #110f1c 60%, #0d0c14 100%); }
.wx-ai__sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; border-radius: var(--radius-xl); }
.wx-ai__head { position: absolute; left: clamp(24px, 4vw, 72px); top: clamp(90px, 13vh, 130px); max-width: min(460px, 34%); display: grid; gap: 16px; z-index: 2; }
.wx-ai__head .eyebrow { color: #B9AEFF; }
.wx-ai__chips span { position: absolute; left: 50%; top: 54%; z-index: 1; white-space: nowrap; padding: 10px 16px; border-radius: 99px; font-size: 14px; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(185,174,255,0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); will-change: transform, opacity; }
.wx-ai__chips span:first-child { border-color: rgba(242,165,65,0.6); }
.wx-ai__phone.iphone { position: absolute; left: 50%; top: 54%; width: min(320px, 27vw); z-index: 3; transform: translate(-50%, -50%) scale(calc(0.86 + var(--pc, 0) * 0.14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 60px 140px rgba(0,0,0,0.6), 0 0 calc(var(--pc, 0) * 120px) rgba(124,92,255,0.45); }
.wx-ai__phone .iphone__screen > img.wx-ai__report { bottom: auto; height: auto; object-fit: fill; will-change: transform; }
.wx-ai__points { position: absolute; right: clamp(24px, 4vw, 72px); top: 50%; transform: translateY(-50%); width: min(340px, 28%); list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; z-index: 2; }
.wx-ai__points li { display: grid; gap: 4px; padding-left: 18px; border-left: 2px solid rgba(255,255,255,0.12); opacity: 0.25; transform: translateX(12px); transition: opacity 500ms var(--ease), transform 500ms var(--ease), border-color 500ms; }
.wx-ai__points li.is-on { opacity: 1; transform: none; border-color: #A99BFF; }
.wx-ai__points b { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; }
.wx-ai__points span { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.72); }
.wx-ai__fine { position: absolute; left: clamp(24px, 4vw, 72px); bottom: 28px; max-width: min(420px, 32%); margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.5); z-index: 2; }

@media (max-width: 1100px) {
  .wx-alert__inner { grid-template-columns: minmax(0, 1fr); }
  .wx-cone { grid-template-columns: minmax(0, 1fr); padding: clamp(80px, 10vw, 120px) var(--inset); }
  .wx-cone__copy { padding: 0 12px; }
  .wx-ai__head { max-width: none; right: 24px; top: 90px; }
  .wx-ai__head .ap-h2 { font-size: clamp(26px, 6vw, 40px); }
  .wx-ai__phone.iphone { width: min(250px, 46vw); top: 58%; }
  .wx-ai__points { right: 16px; left: 16px; width: auto; top: auto; bottom: 22px; transform: none; display: block; }
  .wx-ai__points li { display: none; padding: 14px 16px; border: 0; border-radius: 18px; background: rgba(20,16,36,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: none; }
  .wx-ai__points li.is-on:not(:has(~ li.is-on)) { display: grid; opacity: 1; }
  .wx-ai__fine { display: none; }
}
@media (max-width: 900px) {
  .wx-alert__inner { padding: 64px 20px 56px; }
  .wx-alert__device { width: 78%; }
  .wx-chips button, .wx-levels button { padding: 8px 12px; }
  .wx-ai__chips span { font-size: 12px; padding: 7px 11px; }
  .wx-cone__cap { position: static; padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-alert[data-level="emergency"]::after, .wx-alert[data-level="emergency"] .wx-alert__device .iphone, .cn__storm .cn__spin { animation: none; }
  .wx-ai { height: auto; } .wx-ai__sticky { position: relative; }
}