/* Halo page: its own accent, the animated notch and the page's mockups. Shared look comes from /styles.css. */
:root {
  --halo: #9b5cf6; --halo2: #e0539b;
  --halo-grad: linear-gradient(115deg, #6f8dff 0%, #9b5cf6 38%, #e0539b 72%, #f59a6b 100%);
  --wall: radial-gradient(120% 90% at 0% 0%, #b9cdff 0%, transparent 55%),
          radial-gradient(90% 90% at 100% 10%, #ffd3c2 0%, transparent 55%),
          radial-gradient(90% 120% at 50% 100%, #e3a9f0 0%, transparent 60%), #d9c8f7;
  --spring: linear(0, 0.028, 0.098, 0.193, 0.3, 0.408, 0.513, 0.609, 0.694, 0.767, 0.829, 0.88, 0.92, 0.952, 0.976, 0.993, 1.005, 1.013, 1.017, 1.019, 1.02, 1.018, 1.014, 1.009, 1.006, 1.003, 1.001, 1);
  --settle: cubic-bezier(.32, .72, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root { --halo: #b18bff; --halo2: #f27bb5;
    --wall: radial-gradient(120% 90% at 0% 0%, #2c3f86 0%, transparent 55%),
            radial-gradient(90% 90% at 100% 10%, #7a3b4a 0%, transparent 55%),
            radial-gradient(90% 120% at 50% 100%, #6a2f86 0%, transparent 60%), #2a1f45; }
}
.halo-page .feature .q { color: var(--halo); }
.halo-page .faq a, .halo-page .prose a { color: var(--halo); }
.grad { background: var(--halo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.halo-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: var(--shadow); }

/* ---------- the stage (a Mac screen) ---------- */
.stage { container-type: inline-size; position: relative; overflow: hidden; border-radius: 26px; background: var(--wall);
         box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.05); isolation: isolate; }
.stage.hero { height: clamp(320px, 50vw, 500px); max-width: 1000px; margin: 0 auto; }
.stage .bar { position: absolute; inset: 0 0 auto; height: calc(32 * var(--u)); display: flex; align-items: center; justify-content: space-between;
              padding: 0 calc(18 * var(--u)); background: color-mix(in srgb, #fff 28%, transparent); color: rgba(20,20,30,.75);
              font: 600 calc(12 * var(--u))/1 -apple-system, system-ui, sans-serif; }
.stage .bar i { display: inline-block; width: calc(var(--bw) * var(--u)); height: calc(7 * var(--u)); border-radius: 9px; background: currentColor; opacity: .3; margin-right: calc(12 * var(--u)); }
@media (prefers-color-scheme: dark) { .stage .bar { background: rgba(0,0,0,.22); color: rgba(255,255,255,.8); } }
.stage, .scene { --u: clamp(.72px, calc(100cqw / var(--uw, 900)), var(--umax, 1.15px)); }

/* ---------- the notch ---------- */
.notch { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 2; color: #f4f4f6;
         --w: calc(180 * var(--u)); --h: calc(32 * var(--u)); --r: calc(12 * var(--u));
         filter: drop-shadow(0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.28));
         font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.notch[data-state="music"], .notch[data-state="timer"] { --w: calc(280 * var(--u)); }
.notch[data-state="hud"], .notch[data-state="photo"] { --w: calc(400 * var(--u)); --r: calc(16 * var(--u)); }
.notch[data-state="agent"] { --w: calc(400 * var(--u)); --h: calc(136 * var(--u)); --r: calc(28 * var(--u)); }
.notch:is([data-state="np"], [data-state="lyrics"], [data-state="timerx"], [data-state="notes"], [data-state="weather"],
          [data-state="devices"], [data-state="drop"], [data-state="tray"]) { --w: calc(460 * var(--u)); --h: calc(196 * var(--u)); --r: calc(32 * var(--u)); }

.nbody { position: absolute; top: 0; left: calc(-260 * var(--u)); width: calc(520 * var(--u)); height: calc(240 * var(--u)); background: #000;
         clip-path: inset(0 calc((520 * var(--u) - var(--w)) / 2) calc(240 * var(--u) - var(--h)) round 0 0 var(--r) var(--r));
         transition: clip-path .7s var(--spring); }
.ear { position: absolute; top: 0; left: 0; width: calc(12 * var(--u)); height: calc(12 * var(--u)); transition: transform .7s var(--spring); }
.ear.l { background: radial-gradient(circle at 0 100%, transparent 70%, #000 72%); transform: translateX(calc(var(--w) / -2 - 12 * var(--u) + .5px)); }
.ear.r { background: radial-gradient(circle at 100% 100%, transparent 70%, #000 72%); transform: translateX(calc(var(--w) / 2 - .5px)); }
.notch.shrink .nbody { transition: clip-path .5s var(--settle); }
.notch.shrink .ear { transition: transform .5s var(--settle); }

/* content: leaves fast, arrives late, laid out at its final size */
.nc, .strip { position: absolute; top: 0; left: 0; translate: -50% 0; transform-origin: 50% 0; opacity: 0; transform: scale(.94);
              transition: opacity .14s ease, transform .2s ease; pointer-events: none; }
.notch[data-state="music"] .music, .notch[data-state="timer"] .timer, .notch[data-state="hud"] .hud, .notch[data-state="agent"] .agent,
.notch[data-state="np"] .np, .notch[data-state="lyrics"] .lyrics, .notch[data-state="timerx"] .timerx, .notch[data-state="notes"] .notes,
.notch[data-state="weather"] .weather, .notch[data-state="devices"] .devices, .notch[data-state="drop"] .drop, .notch[data-state="tray"] .tray,
.notch[data-state="photo"] .photo,
.notch:is([data-state="np"], [data-state="lyrics"], [data-state="timerx"], [data-state="notes"], [data-state="weather"], [data-state="devices"], [data-state="tray"]) .strip {
  opacity: 1; transform: none; transition: opacity .28s ease .1s, transform .7s var(--spring) .04s; }

.wings { width: calc(280 * var(--u)); height: calc(32 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(11 * var(--u)); }
.wide { width: calc(400 * var(--u)); height: calc(32 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(14 * var(--u));
        font-weight: 600; font-size: calc(11 * var(--u)); line-height: 1; }
.wide > span { display: flex; align-items: center; gap: calc(6 * var(--u)); width: calc(100 * var(--u)); white-space: nowrap; }
.wide > span:last-child { justify-content: flex-end; }
.ex { width: calc(460 * var(--u)); height: calc(196 * var(--u)); padding: calc(46 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)); }
.notch svg, .cz svg, .phone svg, .lock svg { width: 1em; height: 1em; flex: none; }
.lock .ctrls svg, .phone .ctrls svg { fill: currentColor; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* tab strip of the open notch */
.strip { width: calc(460 * var(--u)); height: calc(34 * var(--u)); display: flex; justify-content: space-between; align-items: center;
         padding: 0 calc(34 * var(--u)); font-size: calc(13 * var(--u)); color: rgba(255,255,255,.55); }
.strip > span { display: flex; gap: calc(6 * var(--u)); }
.tab { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; }
.notch[data-state="np"] .tab.m-np, .notch[data-state="lyrics"] .tab.m-lyrics, .notch[data-state="timerx"] .tab.m-timer, .notch[data-state="notes"] .tab.m-notes,
.notch[data-state="weather"] .tab.m-weather, .notch[data-state="devices"] .tab.m-devices, .notch[data-state="tray"] .tab.m-tray { background: rgba(255,255,255,.14); color: #fff; }

/* Now Playing */
.art { flex: none; border-radius: calc(14 * var(--u)); background: linear-gradient(135deg, #ff5f8f 0%, #c94cf0 50%, #6f7bff 100%); position: relative; }
.disc { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; position: relative; }
.disc .art { position: absolute; inset: calc(3 * var(--u)); border-radius: 50%; }
.disc svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wave { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(16 * var(--u)); }
.wave i { width: calc(2.6 * var(--u)); height: 100%; border-radius: 9px; background: linear-gradient(#ff8fb8, #b77bff); transform: scaleY(.3);
          animation: wv 1.1s ease-in-out infinite alternate; }
.wave i:nth-child(2) { animation-delay: -.35s; animation-duration: .9s; } .wave i:nth-child(3) { animation-delay: -.7s; animation-duration: 1.25s; }
.wave i:nth-child(4) { animation-delay: -.2s; animation-duration: .8s; } .wave i:nth-child(5) { animation-delay: -.55s; animation-duration: 1.05s; }
@keyframes wv { 0% { transform: scaleY(.25); } 50% { transform: scaleY(.9); } 100% { transform: scaleY(.45); } }
.np-row { display: flex; gap: calc(18 * var(--u)); align-items: center; }
.np .art { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
.np .art::after { content: ""; position: absolute; inset: 10%; z-index: -1; border-radius: inherit; background: inherit; filter: blur(calc(18 * var(--u))); opacity: .75; }
.np-meta { flex: 1; min-width: 0; }
.np-t { font-size: calc(16 * var(--u)); font-weight: 650; letter-spacing: -.01em; display: flex; justify-content: space-between; align-items: center; }
.np-a { font-size: calc(12.5 * var(--u)); color: rgba(255,255,255,.55); margin-top: calc(3 * var(--u)); }
.scrub { height: calc(4 * var(--u)); border-radius: 9px; background: rgba(255,255,255,.18); margin: calc(12 * var(--u)) 0 calc(5 * var(--u)); overflow: hidden; }
.scrub i { display: block; height: 100%; background: linear-gradient(90deg, #ff8fb8, #b77bff); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(.32); }
.notch[data-state="np"] .scrub i { transform: scaleX(.46); transition: transform 4.5s linear; }
.times { display: flex; justify-content: space-between; font: 600 calc(9.5 * var(--u))/1 ui-monospace, "SF Mono", monospace; color: rgba(255,255,255,.45); }
.ctrls { display: flex; justify-content: center; gap: calc(26 * var(--u)); font-size: calc(17 * var(--u)); margin-top: calc(6 * var(--u)); }
.ctrls svg { fill: currentColor; }

/* Lyrics */
.lyrics .ex { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--u)); text-align: center; padding-top: calc(40 * var(--u)); }
.ly-dim { font-size: calc(12 * var(--u)); color: rgba(255,255,255,.4); }
.ly-now { font-size: calc(18 * var(--u)); font-weight: 650; letter-spacing: -.01em; }

/* Timer */
.ring { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-linecap: round; }
.ring .trk { stroke: rgba(255,255,255,.16); }
.ring .val { stroke: #f6b44a; }
.tnum { font: 650 calc(11 * var(--u))/1 ui-rounded, -apple-system, system-ui; font-variant-numeric: tabular-nums; }
.timer .ring { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.timerx .ex { display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--u)); }
.timerx .ring { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
.big-num { font: 500 calc(38 * var(--u))/1 ui-rounded, -apple-system, system-ui; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.chips { display: flex; gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); flex-wrap: wrap; }
.chip { font-size: calc(10.5 * var(--u)); font-weight: 600; padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: 99px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); white-space: nowrap; }

/* Notes */
.notes h4 { margin: 0 0 calc(8 * var(--u)); font-size: calc(14 * var(--u)); }
.notes p { margin: 0 0 calc(5 * var(--u)); font-size: calc(12 * var(--u)); color: rgba(255,255,255,.72); }
.caret { display: inline-block; width: 1.5px; height: 1.05em; background: #c69bff; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Weather */
.weather .ex, .devices .ex { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); }
.w-main { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.w-main svg { font-size: calc(44 * var(--u)); color: #ffd36b; }
.w-side { font-size: calc(11.5 * var(--u)); color: rgba(255,255,255,.62); display: grid; gap: calc(6 * var(--u)); text-align: right; }
.w-side b { color: #fff; font-weight: 600; }
.w-place { font-size: calc(12 * var(--u)); color: rgba(255,255,255,.6); margin-top: calc(4 * var(--u)); }

/* Devices */
.devices .ex { justify-content: center; gap: calc(22 * var(--u)); }
.dev { display: grid; justify-items: center; gap: calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); color: rgba(255,255,255,.6); }
.dev .ring { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.dev .val { stroke: #4ade80; }
.dev-w { position: relative; display: grid; place-items: center; }
.dev-w b { position: absolute; font: 650 calc(12 * var(--u))/1 ui-rounded, system-ui; color: #fff; }

/* HUD */
.lvl { width: calc(92 * var(--u)); height: calc(5 * var(--u)); border-radius: 9px; background: rgba(255,255,255,.2); overflow: hidden; }
.lvl i { display: block; height: 100%; background: #fff; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(.45); }
.notch[data-state="hud"] .lvl i { animation: lvl 2.2s steps(1) .25s both; }
@keyframes lvl { 0% { transform: scaleX(.45); } 22% { transform: scaleX(.52); } 44% { transform: scaleX(.6); } 66% { transform: scaleX(.68); } 100% { transform: scaleX(.75); } }
.hud .ic, .photo .ic { font-size: calc(14 * var(--u)); }

/* Drop target and tray */
.drop .ex { display: grid; place-items: center; }
.drop-box { width: 100%; height: 100%; border: 1.5px dashed rgba(255,255,255,.35); border-radius: calc(18 * var(--u)); display: grid; place-content: center; justify-items: center;
            gap: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); color: rgba(255,255,255,.75); }
.drop-box svg { font-size: calc(26 * var(--u)); }
.tray .ex { display: flex; gap: calc(14 * var(--u)); align-items: center; padding-top: calc(52 * var(--u)); }
.tile { display: grid; justify-items: center; gap: calc(6 * var(--u)); width: calc(84 * var(--u)); font-size: calc(10 * var(--u)); color: rgba(255,255,255,.7); text-align: center; }
.thumb { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(12 * var(--u)); display: grid; place-items: center; }
.thumb.doc { background: #f4f4f6; color: #e0539b; font: 800 calc(11 * var(--u))/1 system-ui; border-radius: calc(8 * var(--u)); width: calc(50 * var(--u)); }
.thumb.pic { background: linear-gradient(160deg, #ffd29a, #f08a9e 55%, #7b6cf0); }
.thumb.fold { background: #6fa8ff; border-radius: calc(10 * var(--u)); height: calc(50 * var(--u)); }
.tile.new { transform: scale(.5); opacity: 0; }
.notch[data-state="tray"] .tile.new { transform: none; opacity: 1; transition: transform .6s var(--spring) .25s, opacity .25s .25s; }

/* Agent alert */
.agent .top { width: calc(400 * var(--u)); height: calc(32 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(16 * var(--u));
              font-weight: 650; font-size: calc(11 * var(--u)); line-height: 1; }
.agent .top span { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.spark { color: #e8875b; fill: currentColor; font-size: calc(13 * var(--u)); }
.ok { color: #4ade80; } .ok svg { stroke-width: 2.6; }
.acard { padding: calc(8 * var(--u)) calc(22 * var(--u)) 0; opacity: 0; transform: translateY(calc(-10 * var(--u))); }
.notch[data-state="agent"] .acard { opacity: 1; transform: none; transition: opacity .3s .22s, transform .6s var(--spring) .18s; }
.acard .hd { display: flex; justify-content: space-between; font-size: calc(12.5 * var(--u)); font-weight: 650; }
.acard .hd em { font-style: normal; color: #4ade80; font-size: calc(11 * var(--u)); }
.acard p { margin: calc(5 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.35; color: rgba(255,255,255,.7); }
.acard .chips { margin: 0; }

/* hero extras: the pointer and a file on the desktop */
.cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; transform: translate(62cqw, 78cqh); opacity: 0;
          transition: transform .8s cubic-bezier(.45,.05,.25,1), opacity .3s; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.stage { container-type: size; }
.stage.on .cursor { opacity: 1; }
.dfile { position: absolute; z-index: 3; right: 9%; bottom: 13%; display: grid; justify-items: center; gap: 6px; font: 600 12px/1 system-ui; color: #2b2340;
         transition: transform .8s cubic-bezier(.45,.05,.25,1), opacity .3s; }
.dfile .thumb.doc { width: 44px; height: 56px; box-shadow: 0 6px 16px rgba(0,0,0,.18); font-size: 11px; }
.dfile span { background: rgba(255,255,255,.55); padding: 3px 7px; border-radius: 6px; }
@media (prefers-color-scheme: dark) { .dfile { color: #fff; } .dfile span { background: rgba(0,0,0,.35); } }
.dfile.gone { opacity: 0; }

.chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; }
.chapters button { font: inherit; font-size: 14px; font-weight: 600; color: var(--soft); background: var(--pill); border: 1px solid var(--line); border-radius: 999px;
                   padding: 7px 14px; cursor: pointer; transition: color .2s, border-color .2s, box-shadow .2s; }
.chapters button[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--halo) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--halo) 16%, transparent); }

/* ---------- scenes inside the feature tabs ---------- */
.scenes { display: grid; gap: 14px; }
.scene { container-type: inline-size; position: relative; overflow: hidden; border-radius: 20px; background: var(--wall); aspect-ratio: 16 / 7.6;
         box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(0,0,0,.12); --uw: 600; --umax: 1.2px; }
.scene.tall { aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .scene { aspect-ratio: 16 / 9.5; } .scene.tall { aspect-ratio: 4 / 3.2; } }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* lock screen mock */
.lock { display: grid; justify-items: center; align-content: start; padding-top: 7%; color: #fff; text-align: center;
        background: radial-gradient(90% 80% at 20% 10%, #5a6fd6, transparent 60%), radial-gradient(80% 80% at 90% 30%, #c4577f, transparent 60%), radial-gradient(90% 90% at 50% 110%, #7b3fb0, transparent 65%), #31264f; }
.lock .date { font-size: clamp(11px, 2.6cqw, 17px); font-weight: 600; opacity: .85; }
.lock .clock { font-size: clamp(54px, 17cqw, 120px); font-weight: 700; letter-spacing: -.03em; line-height: 1; margin: 2px 0 8px; font-family: ui-rounded, -apple-system, system-ui; }
.lock .status { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: clamp(10px, 2.1cqw, 14px); font-weight: 600; opacity: .9; }
.lock .status span { display: inline-flex; align-items: center; gap: 5px; }
.lock .status svg { width: 1.1em; height: 1.1em; }
.lock .lcard { margin-top: 5%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: rgba(255,255,255,.18);
               backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: clamp(10px, 2.1cqw, 13px); text-align: left; }
.lock .lcard .art { width: clamp(30px, 7cqw, 44px); height: clamp(30px, 7cqw, 44px); border-radius: 9px; }
.lock .lcard b { display: block; }
.lock .lcard .ctrls { margin: 0 0 0 10px; gap: 14px; font-size: 1.3em; }

/* ---------- Make it yours ---------- */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.split .lead { margin-bottom: 18px; }
.ticks { list-style: none; padding: 0; margin: 0; color: var(--soft); }
.ticks li { padding-left: 26px; position: relative; margin: 8px 0; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--halo-grad); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.cz { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 18px; --row: 62px; }
.cz-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 14px; font-weight: 650; }
.cz-head small { color: var(--soft); font-weight: 500; font-size: 13.5px; }
.cz-strip { position: relative; height: 46px; border-radius: 0 0 18px 18px; background: #000; margin: 0 6% 16px; color: rgba(255,255,255,.7); font-size: 17px; overflow: hidden; }
.cz-strip .cut { position: absolute; left: 50%; top: 0; width: 34%; height: 100%; translate: -50% 0; }
.cz-strip .si { position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; display: grid; place-items: center; border-radius: 50%;
                transition: transform .6s var(--spring), opacity .3s; }
.cz-strip .si.off { opacity: 0; }
.cz-list { position: relative; height: calc(6 * var(--row)); }
.cz-row { position: absolute; inset: 0 0 auto; height: calc(var(--row) - 8px); display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 14px;
          background: var(--bg2); border: 1px solid var(--line); transition: transform .6s var(--spring), box-shadow .3s, opacity .3s; }
.cz-row .mi { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 17px; flex: none; background: var(--halo-grad); transition: filter .3s; }
.cz-row div { flex: 1; min-width: 0; }
.cz-row b { display: block; font-size: 15px; }
.cz-row span { display: block; color: var(--soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-row.off .mi { filter: grayscale(1) opacity(.45); }
.cz-row.off b { color: var(--soft); }
.cz-row.lift { box-shadow: 0 14px 30px rgba(0,0,0,.16); z-index: 2; }
.sw { width: 40px; height: 24px; border-radius: 99px; background: var(--halo-grad); position: relative; flex: none; transition: background .3s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
             transform: translateX(16px); transition: transform .35s var(--spring); }
.cz-row.off .sw { background: var(--line); }
.cz-row.off .sw::after { transform: none; }
.grip { color: var(--grey); font-size: 15px; letter-spacing: -2px; }
.cz-cap { text-align: center; color: var(--soft); font-size: 14px; margin: 8px 0 2px; min-height: 1.5em; }

/* ---------- iPhone ---------- */
.scene.link { aspect-ratio: 16 / 11; --uw: 640; container-type: size; }
.phone { position: absolute; left: 50%; bottom: 0; translate: -50% 26%; width: 21em; padding: 1.1em .9em; border-radius: 3.4em 3.4em 0 0;
         font-size: clamp(7px, 2.05cqw, 12.5px); background: var(--card); color: var(--ink); border: .55em solid #15151a; border-bottom: 0;
         box-shadow: 0 30px 60px rgba(0,0,0,.25); font-family: -apple-system, system-ui, sans-serif; }
.phone .sb { display: flex; justify-content: space-between; font-weight: 650; font-size: 1.05em; padding: 0 1.2em .9em; }
.phone .island { width: 7.5em; height: 2.1em; border-radius: 2em; background: #000; position: absolute; left: 50%; top: .8em; translate: -50% 0; }
.phone h5 { margin: .6em .5em 0; font-size: 2em; letter-spacing: -.02em; }
.phone .con { margin: .1em .9em 1em; color: var(--soft); font-size: 1.1em; display: flex; align-items: center; gap: .5em; }
.phone .con i { width: .65em; height: .65em; border-radius: 50%; background: #22c55e; }
.phone .pcard { background: var(--bg); border-radius: 1.4em; padding: 1em; display: flex; align-items: center; gap: .9em; margin-bottom: .8em; }
.phone .pcard .art { width: 4.2em; height: 4.2em; border-radius: .8em; }
.phone .pcard b { display: block; font-size: 1.15em; } .phone .pcard span { color: var(--soft); font-size: 1em; }
.phone .pcard .ctrls { margin: 0 0 0 auto; gap: 1.1em; font-size: 1.5em; }
.phone .lbl { font-size: .95em; font-weight: 650; color: var(--soft); text-transform: uppercase; letter-spacing: .08em; margin: .2em .5em .6em; }
.phone .grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.phone .act { background: var(--bg); border-radius: 1.2em; padding: 1em; display: flex; align-items: center; gap: .6em; font-weight: 600; font-size: 1.1em; }
.phone .act svg { font-size: 1.4em; color: var(--halo); }
.phone .act.hot { animation: press 5s ease infinite; }
@keyframes press { 0%, 8%, 30%, 100% { transform: none; box-shadow: none; } 12% { transform: scale(.95); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--halo) 40%, transparent); } }
.fly { position: absolute; left: 50%; top: 58%; width: 9cqw; aspect-ratio: 1; border-radius: 1.6cqw; z-index: 3; opacity: 0; translate: -50% 0;
       background: linear-gradient(160deg, #ffd29a, #f08a9e 55%, #7b6cf0); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.link.go .fly { animation: fly 5s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes fly { 0%, 10% { opacity: 0; transform: none; } 14% { opacity: 1; transform: none; } 30% { opacity: 1; transform: translateY(-50cqh) scale(.35); } 33%, 100% { opacity: 0; transform: translateY(-52cqh) scale(.3); } }
.photo .mini { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: linear-gradient(160deg, #ffd29a, #f08a9e 55%, #7b6cf0); }
@media (max-width: 640px) { .scene.link { aspect-ratio: 4 / 4.4; } .phone { font-size: 2.4cqw; } .fly { width: 13cqw; } }

/* ---------- Closed Lid ---------- */
.lid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 860px) { .lid { grid-template-columns: 1fr; } }
.steps-list { counter-reset: s; list-style: none; padding: 0; margin: 14px 0 0; }
.steps-list li { position: relative; padding-left: 38px; margin: 0 0 16px; color: var(--soft); font-size: 15px; }
.steps-list li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
                         display: grid; place-items: center; background: var(--halo-grad); color: #fff; font-weight: 700; font-size: 13px; }
.steps-list li b { color: var(--ink); }
.code { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--ink);
        font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; }
.lid-notes { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .lid-notes { grid-template-columns: 1fr; } }
.card .note { margin-top: 10px; font-size: 14px; }

/* ---------- download ---------- */
.dl { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 56px 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.dl::before { content: ""; position: absolute; inset: -40% -10% auto; height: 80%; background: var(--halo-grad); opacity: .14; filter: blur(60px); }
.dl > * { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .nbody, .ear, .nc, .strip, .cz-row, .cz-strip .si, .sw::after, .acard, .tile.new, .dfile, .cursor { transition: none !important; }
  .wave i, .caret, .phone .act.hot, .link.go .fly, .notch[data-state="hud"] .lvl i { animation: none !important; }
  .wave i { transform: scaleY(.6); }
}

.halo-page .prose code { overflow-wrap: anywhere; }

.lid-times { display: flex; flex-wrap: wrap; gap: 8px; }
.lid-times span { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; }