/* ==========================================================================
   WIZKET — apps.css · Apps service page
   1–9   the scene: one pinned stage + one 3D phone (js/apps.js drives every transform)
   10    apps we make: the cover flow (js/apps-flow.js)
   11    make it yours: live restyle (js/apps-style.js)
   Reuses the ws- copy pieces (eyebrow, giant words, hero, tracker, labels) from website.css.
   Prefixes: ap- (scene) · ph- (phone) · hm- (home screen) · ui- (the app) · so- (store page)
             gr- (growth) · lg-/dt-/cl- (build layers) · af- (cover flow) · mu- (mini apps) · my- (restyle)
   Page chrome uses the tokens; the screens keep their own palettes on purpose.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stage + space
   -------------------------------------------------------------------------- */
.ap { position: relative; }
.ap__stage {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 46%, var(--petrol) 0%, transparent 70%),
    var(--bg);
  transition: background-color 0.6s var(--ease-io);
}

/* phone palette: the body follows the theme, the bezel stays Wizket ink */
:root,
:root[data-theme="dark"] {
  --ph-body: #2a3137;
  --ph-body2: #161b1f;
  --ph-edge: #3a434a;
  --ph-edge2: #1a1f23;
  --ph-shadow: rgba(0, 0, 0, 0.62);
}
:root[data-theme="light"] {
  --ph-body: #e6e9eb;
  --ph-body2: #c4cacf;
  --ph-edge: #d7dce0;
  --ph-edge2: #9aa2a8;
  --ph-shadow: rgba(23, 26, 28, 0.28);
}

.ap-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(253, 95, 7, 0.28), rgba(253, 95, 7, 0.06) 55%, transparent);
  opacity: 0;
  filter: blur(8px);
}

/* hero: the giant word rises letter by letter (apps.js wraps them) */
.ap-hero .ws-hero__big { perspective: 900px; }
.ap-ch, .ap-in { display: inline-block; will-change: transform; }
.ap-hero .ws-hero__eyebrow .ap-in { display: flex; align-items: center; gap: inherit; }
html.js .ap-after { opacity: 0; transform: translateY(12px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
html.js .ap-hero.is-in .ap-after { opacity: 1; transform: none; }
html.js .ap-hero.is-in .ap-after:last-child { transition-delay: 0.12s; }

/* --------------------------------------------------------------------------
   2. Design chips (fly from the copy into the phone)
   -------------------------------------------------------------------------- */
.ap-chips { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ap-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(17, 21, 24, 0.72);
  box-shadow: inset 0 0 0 1px rgba(242, 241, 237, 0.14), 0 24px 50px -18px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  color: #f2f1ed;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}
.ap-chip--col i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.ap-chip--type b { font: 400 46px/1 var(--font-display); color: #fd5f07; }
.ap-chip--type span { font: 600 12px/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: #8d9295; }
.ap-chip--mo svg { width: 92px; height: 56px; fill: none; stroke: #fd5f07; stroke-width: 2.6; stroke-linecap: round; overflow: visible; }
.ap-chip--mo circle { fill: #f2f1ed; stroke: none; }

/* --------------------------------------------------------------------------
   3. The phone — a real 3D slab
   rig (position · scale · perspective) › mouse › tilt › fly › ph (--w/--h)
   Everything inside is sized from --w (--u = 1% of the width).
   -------------------------------------------------------------------------- */
.ph-rig {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  perspective: 2200px;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}
.ph-mouse, .ph-tilt, .ph-fly { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.ph {
  --w: 300px;
  --h: 615px;
  --u: calc(var(--w) / 100);
  --r: calc(var(--w) * 0.165);
  --bz: calc(var(--w) * 0.034);
  --t: calc(var(--w) * 0.03 + 5px);
  --n: 12;   /* body layers (apps.js) */
  position: absolute;
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}
.ph__face {
  position: absolute;
  inset: 0;
  padding: var(--bz);
  border-radius: var(--r);
  background: #050607;
  /* the metal frame is drawn inside the face: an outer ring would overhang the body and leave gaps at the corners */
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.6) var(--ph-edge2),
    inset 0 0 0 calc(var(--u) * 0.9) var(--ph-edge),
    inset 0 0 0 calc(var(--u) * 0.9 + 1px) rgba(255, 255, 255, 0.08);
  transform: translateZ(calc(var(--t) / 2));
  backface-visibility: hidden;
}
.ph__face::after {   /* glass glare, moves with the tilt (apps.js sets --gx) */
  content: "";
  position: absolute;
  inset: var(--bz);
  z-index: 5;
  border-radius: calc(var(--r) - var(--bz));
  background: linear-gradient(115deg, transparent calc(var(--gx, 30%) - 18%), rgba(255, 255, 255, 0.09) var(--gx, 30%), transparent calc(var(--gx, 30%) + 14%));
  pointer-events: none;
}
.ph__rear {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background:
    radial-gradient(70% 45% at 30% 18%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(150deg, var(--ph-body), var(--ph-body2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2));
  backface-visibility: hidden;
}
.ph__logo { grid-area: 1 / 1; width: 46%; height: auto; transition: opacity 0.6s var(--ease-io); }
:root[data-theme="dark"] .ph__logo--light,
:root[data-theme="light"] .ph__logo--dark { opacity: 0; }
.ph__ly {   /* body: --n layers between face and rear — solid, rounded sides from any angle */
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--ph-edge), var(--ph-edge2) calc(var(--i) / var(--n) * 100%));
  transform: translateZ(calc(var(--t) * (0.5 - var(--i) / (var(--n) + 1))));
}
/* rear camera: lives in the rear's frame (same transform), raised off it in real 3D */
.ph__cam { position: absolute; inset: 0; transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); transform-style: preserve-3d; pointer-events: none; }
.ph__bump {
  --d: calc(var(--u) * 2.2);   /* bump height */
  position: absolute;
  left: 7%;
  top: 4%;
  width: 40%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
}
.ph__bump > b { position: absolute; inset: 0; border-radius: 26%; background: color-mix(in srgb, var(--ph-edge), var(--ph-edge2) calc(var(--i) * 20%)); transform: translateZ(calc(var(--d) * (1 - var(--i) / 6))); }
.ph__bump-top {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  gap: 8%;
  padding: 9%;
  border-radius: 26%;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.1)),
    linear-gradient(150deg, var(--ph-body), var(--ph-body2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.12);
  transform: translateZ(var(--d));
}
/* lenses: a metal ring, black glass, a blue coating and a highlight */
.ph__bump-top i {
  width: 100%;
  aspect-ratio: 1;   /* round, whatever the grid row height */
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.75) 0 5%, transparent 9%),
    radial-gradient(circle at 50% 50%, #24384a 0 16%, #0a1016 30%, #050607 58%, #1c2328 62%, #0b0e10 74%);
  box-shadow: 0 0 0 calc(var(--u) * 0.7) #2a3137, 0 0 0 calc(var(--u) * 1.05) rgba(255, 255, 255, 0.35), 0 calc(var(--u) * 0.6) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.35);
}
.ph__bump-top i:nth-child(3) { grid-column: 1; }
.ph__bump-top em { place-self: center; width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff6d8 0 30%, #e9d9a6 60%, #8d826a); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }   /* flash */
/* flat side strips: keep the sides solid when seen exactly edge-on (the body layers vanish there).
   Shaded like the layers — light at the face, dark at the rear — so no step shows where the corners start. */
.ph__edge { position: absolute; }
.ph__edge--l, .ph__edge--r { top: var(--r); height: calc(100% - var(--r) * 2); width: var(--t); }
.ph__edge--l { left: calc(var(--t) / -2); transform: rotateY(-90deg); background: linear-gradient(90deg, var(--ph-edge2), var(--ph-edge)); }
.ph__edge--r { right: calc(var(--t) / -2); transform: rotateY(90deg); background: linear-gradient(90deg, var(--ph-edge), var(--ph-edge2)); }
.ph__edge--t, .ph__edge--b { left: var(--r); width: calc(100% - var(--r) * 2); height: var(--t); }
.ph__edge--t { top: calc(var(--t) / -2); transform: rotateX(90deg); background: linear-gradient(180deg, var(--ph-edge2), var(--ph-edge)); }
.ph__edge--b { bottom: calc(var(--t) / -2); transform: rotateX(-90deg); background: linear-gradient(180deg, var(--ph-edge), var(--ph-edge2)); }

.ph__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--r) - var(--bz)); background: #0b0e10; isolation: isolate; }
/* laid out at a 390px "logical" phone and scaled to fit (apps.js) */
.ph__view {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 820px;
  transform-origin: 0 0;
  font-family: var(--font-body);
  color: #f2f1ed;
}
.ph__view p { margin: 0; }
.ph__view svg { display: block; }

.ph-status {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: 0;
  height: 52px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 15px/1 var(--font-body);
  color: var(--st-ink, #f2f1ed);
  transition: color 0.6s;
  pointer-events: none;
}
.ph-status__r { display: flex; align-items: flex-end; gap: 3px; }
.ph-status__r i { width: 3.5px; border-radius: 1px; background: currentColor; }
.ph-status__r i:nth-child(1) { height: 5px; }
.ph-status__r i:nth-child(2) { height: 8px; }
.ph-status__r i:nth-child(3) { height: 11px; }
.ph-status__r em { width: 24px; height: 11px; margin-left: 6px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; background: linear-gradient(90deg, currentColor 70%, transparent 70%) 2.5px 2.5px / 17px 6px no-repeat; }
.ph-island {   /* dynamic island with the front camera at its right end */
  position: absolute; z-index: 9; left: 50%; top: 12px; width: 112px; height: 32px; margin-left: -56px; border-radius: 99px;
  background:
    radial-gradient(circle at calc(100% - 16px) 50%, rgba(120, 160, 220, 0.55) 0 1.5px, #1b2a3c 2.5px, #0b1219 5px, #22282d 6px, #000 7.5px),
    #000;
}

/* --------------------------------------------------------------------------
   4. Holograms (hero) — app icons hovering over the phone lying flat
   -------------------------------------------------------------------------- */
.ph-holos { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.ph-holo { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ph-holo__i {
  position: absolute;
  left: calc(var(--s) / -2);
  top: calc(var(--s) / -2);
  width: var(--s);
  height: var(--s);
  display: grid;
  place-items: center;
  border-radius: 26%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c), #fff 18%), var(--c));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 calc(var(--s) * 0.5) color-mix(in srgb, var(--c), transparent 55%),
    0 calc(var(--s) * 0.3) calc(var(--s) * 0.5) -10px rgba(0, 0, 0, 0.55);
  animation: ph-bob var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}
.ph-holo__i svg { width: 52%; height: 52%; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ph-holo__beam {   /* a soft light spot on the screen under each icon */
  position: absolute;
  left: calc(50% - var(--s) * 0.7);
  top: calc(50% - var(--s) * 0.7);
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 1.4);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c), transparent 50%), transparent);
}
@keyframes ph-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12%) rotate(2deg); } }

/* --------------------------------------------------------------------------
   5. Home screen
   -------------------------------------------------------------------------- */
.hm {
  position: absolute;
  inset: 0;
  padding: 78px 24px 0;
  background:
    radial-gradient(80% 50% at 80% 8%, rgba(253, 95, 7, 0.45), transparent 60%),
    radial-gradient(90% 60% at 10% 90%, rgba(38, 48, 57, 0.95), transparent 70%),
    linear-gradient(170deg, #1b2a2d, #0b0e10 70%);
}
.hm__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px; }
.hm__app { display: grid; justify-items: center; gap: 7px; font: 500 11.5px/1 var(--font-body); color: rgba(242, 241, 237, 0.86); }
.hm__ico {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c), #fff 16%), var(--c));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -8px rgba(0, 0, 0, 0.6);
}
.hm__ico svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hm__app--you .hm__ico { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 3px rgba(253, 95, 7, 0.35), 0 0 34px rgba(253, 95, 7, 0.6); animation: hm-call 1.8s var(--ease-io) infinite; }
.hm__app--you span { color: #fff; font-weight: 700; }
@keyframes hm-call { 50% { transform: scale(1.06); } }
.hm__dock {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 22px;
  display: flex;
  justify-content: space-around;
  padding: 16px 10px;
  border-radius: 34px;
  background: rgba(242, 241, 237, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hm__dock .hm__app span { display: none; }

.ph-open {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #ff8a45, #fd5f07);
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}
.ph-open svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ph-ripple { position: absolute; z-index: 8; left: 0; top: 0; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); opacity: 0; transform: scale(0.2); pointer-events: none; }

/* --------------------------------------------------------------------------
   6. The app (Brew) — one layout, drawn as a wireframe, then designed
   States (apps.js toggles them on the beat): wire (default) → .is-color → .is-type → .is-motion
   -------------------------------------------------------------------------- */
.ui {
  --ui-a: #fd5f07;
  --ui-bg: #0e1215;
  --ui-card: #182026;
  --ui-ink: #f2f1ed;
  --ui-mut: #8d9295;
  --ui-r: 18px;
  --wire: rgba(242, 241, 237, 0.26);
  --wire-fill: rgba(242, 241, 237, 0.12);
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 64px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #0b0e10;
  color: var(--ui-ink);
  opacity: 0;
  visibility: hidden;
  transition: background-color 0.8s var(--ease-io), color 0.6s;
}
.ui.is-color { background: var(--ui-bg); }
.ui [data-w] {
  box-shadow: inset 0 0 0 1.5px var(--wire);
  transition: background-color 0.7s var(--ease-io), box-shadow 0.7s var(--ease-io), border-radius 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.ui.is-color [data-w] { box-shadow: inset 0 0 0 1.5px transparent; }
.ui svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* text: grey bars until "type" lands */
.ui :is(.ui__hi, .ui__h, .ui__search span, .ui__pills span, .ui__promo b, .ui__promo p span, .ui__card p, .ui__card b, .ui__bag b) { transition: color 0.6s var(--ease-io), background-color 0.6s var(--ease-io); transition-delay: calc(var(--i, 0) * 40ms); }
.ui:not(.is-type) :is(.ui__hi, .ui__h, .ui__promo b, .ui__promo p span, .ui__card p, .ui__card b) { color: transparent; background-color: var(--wire-fill); border-radius: 6px; }
.ui:not(.is-type) :is(.ui__search span, .ui__pills span, .ui__bag b) { color: transparent; }
.ui:not(.is-type) .ui__search span { background: var(--wire-fill); border-radius: 6px; }
.ui[data-w="t"], .ui [data-w="t"] { box-shadow: none !important; }

.ui__top { display: flex; align-items: center; justify-content: space-between; }
.ui__hi { display: inline-block; font: 500 15px/1.3 var(--font-body); color: var(--ui-mut); }
.ui__h { display: inline-block; margin-top: 6px !important; font: 400 34px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.ui__av { width: 48px; height: 48px; border-radius: 50%; }
.ui.is-color .ui__av { background: linear-gradient(135deg, color-mix(in srgb, var(--ui-a), #fff 45%), var(--ui-a)); }

.ui__search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: var(--ui-r); color: var(--ui-mut); font-size: 15px; }
.ui__search svg { width: 20px; height: 20px; }
.ui.is-color .ui__search { background: var(--ui-card); }

.ui__pills { display: flex; gap: 10px; }
.ui__pills span { padding: 11px 18px; border-radius: 999px; font: 600 14px/1 var(--font-body); }
.ui.is-color .ui__pills span { background: var(--ui-card); }
.ui.is-color .ui__pills .is-on { background: var(--ui-a); color: #fff; }

.ui__promo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 112px;
  padding: 0 24px;
  overflow: hidden;
  border-radius: calc(var(--ui-r) + 4px);
}
.ui__promo p { display: grid; gap: 8px; }
.ui__promo b { display: inline-block; font: 400 38px/1 var(--font-display); text-transform: uppercase; }
.ui__promo p span { display: inline-block; font: 600 14px/1 var(--font-body); }
.ui__promo-cup { width: 86px; height: 86px; margin-right: -8px; color: var(--wire); transform: rotate(-12deg); transition: color 0.7s; }
.ui.is-color .ui__promo { background: linear-gradient(120deg, var(--ui-a), color-mix(in srgb, var(--ui-a), #000 35%)); color: #fff; }
.ui.is-color .ui__promo-cup { color: rgba(255, 255, 255, 0.9); }

.ui__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ui__card { position: relative; display: grid; gap: 6px; padding: 12px 12px 14px; border-radius: var(--ui-r); }
.ui__img { height: 96px; display: grid; place-items: center; border-radius: calc(var(--ui-r) - 6px); color: var(--wire); transition: background-color 0.7s, color 0.7s; }
.ui__img svg { width: 58px; height: 58px; }
.ui__card p { display: inline-block; justify-self: start; margin-top: 6px !important; font: 700 15px/1.2 var(--font-body); }
.ui__card b { display: inline-block; justify-self: start; font: 600 14px/1 var(--font-body); color: var(--ui-mut); }
.ui__add {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: calc(var(--ui-r) * 0.6);
  font: 600 22px/1 var(--font-body);
  color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--wire);
  transition: background-color 0.7s, color 0.6s, box-shadow 0.6s, transform 0.3s var(--ease-out), border-radius 0.6s;
}
.ui.is-color .ui__card { background: var(--ui-card); }
.ui.is-color .ui__img { background: color-mix(in srgb, var(--ui-a), transparent 84%); color: var(--ui-a); }
.ui.is-color .ui__add { background: var(--ui-a); box-shadow: none; }
.ui.is-type .ui__add { color: #fff; }

.ui__tabs {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 22px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: calc(var(--ui-r) + 16px);
  color: var(--ui-mut);
}
.ui__tabs svg { width: 26px; height: 26px; }
.ui__tabs .is-on { color: var(--ui-ink); }
.ui.is-color .ui__tabs { background: var(--ui-card); }
.ui.is-color .ui__tabs .is-on { color: var(--ui-a); }
.ui__bag { position: relative; }
.ui__bag b { position: absolute; right: -10px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--ui-a); color: #fff; font: 700 11px/1 var(--font-body); transform: scale(0); transition: transform 0.4s var(--ease-out); }
.ui__bag.has-items b { transform: scale(1); }
.ui__bag.is-bump { animation: ui-bump 0.45s var(--ease-out); }
@keyframes ui-bump { 40% { transform: scale(1.3) rotate(-8deg); } }

/* motion */
.ui.is-motion .ui__card { animation: ui-float 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * -0.8s); }
.ui.is-motion .ui__promo-cup { animation: ui-sway 3s ease-in-out infinite; }
.ui.is-motion .ui__pills .is-on { animation: ui-pulse 2.4s var(--ease-io) infinite; }
@keyframes ui-float { 50% { transform: translateY(-5px); } }
@keyframes ui-sway { 50% { transform: rotate(4deg) translateY(-4px); } }
@keyframes ui-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ui-a), transparent 75%); } }
.ui__heart { position: absolute; right: 64px; top: 470px; font-size: 34px; color: var(--ui-a); opacity: 0; pointer-events: none; }
.ui.is-motion .ui__heart { animation: ui-heart 2.4s var(--ease-out) infinite; }
@keyframes ui-heart { 0% { opacity: 0; transform: translateY(10px) scale(0.4); } 20% { opacity: 1; transform: scale(1.2); } 70% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-90px) scale(0.9) rotate(12deg); } }

/* flow: the path between taps */
.ui__flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
.ui__flow path { stroke: #fd5f07; stroke-width: 2.4; stroke-dasharray: 2 9; animation: ui-flow 1.2s linear infinite; }
@keyframes ui-flow { to { stroke-dashoffset: -22; } }
.ui__tap { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; opacity: 0; transition: opacity 0.4s; }
.ui__tap::before, .ui__tap::after { content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; }
.ui__tap::before { background: #fd5f07; box-shadow: 0 0 0 4px rgba(253, 95, 7, 0.3); transform: scale(0.45); }
.ui__tap::after { border: 2px solid #fd5f07; animation: ui-tap 1.6s var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes ui-tap { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.ui.is-flow .ui__flow, .ui.is-flow .ui__tap { opacity: 1; }

/* --------------------------------------------------------------------------
   7. Build layers (exploded view)
   -------------------------------------------------------------------------- */
.ph-layer {
  position: absolute;
  inset: var(--bz);
  border-radius: calc(var(--r) - var(--bz));
  background: rgba(14, 18, 21, 0.7);
  box-shadow: inset 0 0 0 1px rgba(242, 241, 237, 0.2), 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: box-shadow 0.5s var(--ease-io), background-color 0.5s;
}
.ph-layer.is-on { background: rgba(30, 18, 10, 0.9); box-shadow: inset 0 0 0 1.5px #fd5f07, 0 0 calc(var(--u) * 12) rgba(253, 95, 7, 0.35); }
.ph-layer__tag {
  position: absolute;
  left: calc(100% + var(--u) * 10);
  top: 10%;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
  white-space: nowrap;
  font: 400 calc(var(--u) * 11)/1 var(--font-display);
  text-transform: uppercase;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.5s var(--ease-io), color 0.5s;
}
.ph-layer__tag::before { content: ""; position: absolute; right: calc(100% + var(--u) * 2); top: 50%; width: calc(var(--u) * 8); height: 1px; background: currentColor; opacity: 0.5; }
.ph-layer__tag b { font: inherit; font-size: 0.55em; color: var(--accent); }
.ph.is-exploded .ph-layer__tag { opacity: 0.45; }
.ph.is-exploded .is-on > .ph-layer__tag, .ph.is-exploded .ph__face.is-on .ph-layer__tag { opacity: 1; }
.ph__tag { z-index: 6; }
.ph__face.is-on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 calc(var(--u) * 0.8) #fd5f07, 0 0 calc(var(--u) * 14) rgba(253, 95, 7, 0.45); }

.lg { padding: calc(var(--u) * 14) calc(var(--u) * 8); font: 500 calc(var(--u) * 4.2)/1.9 ui-monospace, "SFMono-Regular", Menlo, monospace; color: #c9ced2; }
.lg p { margin: 0; white-space: nowrap; }
.lg s { text-decoration: none; color: #fd5f07; }
.lg q { quotes: none; color: #a5d6ff; }
.lg i { color: #6b7378; }
.lg__chip { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); width: calc(var(--u) * 36); margin: calc(var(--u) * 14) auto 0; padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 4); background: #1a2026; box-shadow: inset 0 0 0 1px rgba(253, 95, 7, 0.5); }
.lg__chip i { height: calc(var(--u) * 10); border-radius: calc(var(--u) * 2); background: rgba(253, 95, 7, 0.3); }

.dt { display: grid; gap: calc(var(--u) * 10); justify-items: center; padding: calc(var(--u) * 18) calc(var(--u) * 10); }
.dt__db { display: grid; gap: calc(var(--u) * 1.6); width: calc(var(--u) * 34); }
.dt__db i { height: calc(var(--u) * 9); border-radius: 50% / 40%; background: linear-gradient(180deg, #3a444c, #1a2026); box-shadow: inset 0 calc(var(--u) * 1.6) 0 #fd5f07; }
.dt__rows { width: 100%; display: grid; gap: calc(var(--u) * 3); }
.dt__rows p { margin: 0; display: flex; gap: calc(var(--u) * 3); align-items: center; padding: calc(var(--u) * 3.4); border-radius: calc(var(--u) * 3); background: #182026; }
.dt__rows b { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #fd5f07; opacity: 0.85; }
.dt__rows i { flex: 1; height: calc(var(--u) * 2.4); border-radius: 9px; background: #3a444c; }
.dt__rows p:nth-child(even) i { flex: 0.6; }

.cl { position: absolute; inset: 0; }
.cl__net { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl__net path { fill: none; stroke: rgba(253, 95, 7, 0.7); stroke-width: 1.4; stroke-dasharray: 4 6; animation: ui-flow 1.4s linear infinite; }
.cl__n { position: absolute; left: var(--x); top: var(--y); width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin: calc(var(--u) * -10); display: grid; place-items: center; border-radius: 30%; background: #1a2026; box-shadow: inset 0 0 0 1.5px #fd5f07, 0 0 calc(var(--u) * 6) rgba(253, 95, 7, 0.35); }
.cl__n svg { width: 55%; height: 55%; fill: none; stroke: #f2f1ed; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   8. Store page + growth dashboard
   -------------------------------------------------------------------------- */
.so, .gr { position: absolute; inset: 0; z-index: 3; padding: 74px 22px 0; background: #0e1215; opacity: 0; visibility: hidden; }
.so { display: flex; flex-direction: column; gap: 22px; }
.so__head { display: flex; gap: 18px; align-items: center; }
.so__icon { flex: 0 0 118px; height: 118px; display: grid; place-items: center; border-radius: 28px; background: linear-gradient(150deg, #ff8a45, #fd5f07); box-shadow: 0 16px 36px -14px rgba(253, 95, 7, 0.7); }
.so__icon svg { width: 62px; height: 62px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.so__meta { display: grid; gap: 6px; justify-items: start; }
.so__name { font: 400 40px/1 var(--font-display); text-transform: uppercase; }
.so__by { font: 500 15px/1.2 var(--font-body); color: #8d9295; }
.so__get { position: relative; margin-top: 8px; width: 104px; height: 40px; display: grid; place-items: center; border-radius: 99px; background: #fd5f07; color: #fff; font: 800 15px/1 var(--font-body); letter-spacing: 0.04em; transition: width 0.5s var(--ease-out), background-color 0.4s, border-radius 0.5s var(--ease-out); }
.so__get b { grid-area: 1 / 1; transition: opacity 0.3s; }
.so__get svg { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; transform: rotate(-90deg); opacity: 0; transition: opacity 0.3s; }
.so__get circle { fill: none; stroke: #263039; stroke-width: 3.2; }
.so__get .on { stroke: #fd5f07; stroke-linecap: round; stroke-dasharray: 107; stroke-dashoffset: calc(107 * (1 - var(--p, 0))); }
.so__get-o { opacity: 0; }
.so__get.is-loading { width: 40px; background: transparent; }
.so__get.is-loading b { opacity: 0; }
.so__get.is-loading svg { opacity: 1; }
.so__get.is-done { width: 104px; background: #f2f1ed; color: #0b0e10; }
.so__get.is-done .so__get-t { opacity: 0; }
.so__get.is-done .so__get-o { opacity: 1; }
.so__stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 0; border-block: 1px solid rgba(242, 241, 237, 0.1); }
.so__stats p { display: grid; gap: 6px; justify-items: center; text-align: center; }
.so__stats p + p { border-left: 1px solid rgba(242, 241, 237, 0.1); }
.so__stats b { font: 400 30px/1 var(--font-display); }
.so__stats span { font: 500 12px/1.2 var(--font-body); color: #8d9295; }
.so__stats p:first-child span { color: #fd5f07; letter-spacing: 0.08em; }
.so__shots { flex: 1; display: flex; gap: 12px; margin-right: -22px; padding-bottom: 30px; overflow: hidden; }
.so__shots i { flex: 0 0 46%; border-radius: 24px; background: linear-gradient(180deg, #fd5f07 0 22%, #182026 22% 28%, #0b0e10 28%); box-shadow: inset 0 0 0 1px rgba(242, 241, 237, 0.1); position: relative; overflow: hidden; }
.so__shots i::after { content: ""; position: absolute; left: 12%; right: 12%; top: 34%; height: 40%; border-radius: 14px; background: repeating-linear-gradient(180deg, #182026 0 34px, transparent 34px 46px); }
.so__shots i:nth-child(2) { background: linear-gradient(180deg, #182026 0 40%, #0b0e10 40%); }
.so__shots i:nth-child(2)::after { top: 12%; height: 24%; background: radial-gradient(circle, #fd5f07 0 40%, transparent 42%) center / 60% 100% no-repeat; }

.gr { display: flex; flex-direction: column; gap: 10px; }
.gr__k { font: 600 13px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: #8d9295; }
.gr__n { font: 400 92px/0.9 var(--font-display); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.gr__up { font: 700 15px/1 var(--font-body); color: #22c55e; }
.gr__chart { width: 100%; height: 190px; margin-top: 14px; overflow: visible; }
.gr__line { fill: none; stroke: #fd5f07; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gr__area { fill: url(#gr-fill); fill: rgba(253, 95, 7, 0.16); stroke: none; }
.gr__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.gr__kpis p { display: grid; gap: 8px; padding: 18px; border-radius: 20px; background: #182026; }
.gr__kpis b { font: 400 40px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.gr__kpis span { font: 500 13px/1 var(--font-body); color: #8d9295; }
.gr__bars { flex: 1; display: flex; align-items: flex-end; gap: 10px; padding: 18px 0 34px; }
.gr__bars i { flex: 1; height: calc(var(--v) * 100% * var(--g, 0)); min-height: 4px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #fd5f07, rgba(253, 95, 7, 0.25)); }

/* --------------------------------------------------------------------------
   9. Badges + growth bubbles (float with the phone, never spin with it)
   -------------------------------------------------------------------------- */
.ap-badge, .ap-bub { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; will-change: transform; }
.ap-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 14px;
  background: #050607;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 26px 50px -18px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  translate: -50% -50%;
}
.ap-badge svg { width: 28px; height: 28px; fill: #fff; stroke: none; }
.ap-badge span { display: grid; gap: 3px; }
.ap-badge em { font: 500 10.5px/1 var(--font-body); font-style: normal; opacity: 0.8; }
.ap-badge b { font: 700 18px/1 var(--font-body); letter-spacing: -0.01em; }

.ap-bub {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 18px;
  background: rgba(17, 21, 24, 0.78);
  color: #f2f1ed;
  box-shadow: inset 0 0 0 1px rgba(242, 241, 237, 0.14), 0 24px 50px -18px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  white-space: nowrap;
  translate: -50% -50%;
}
:root[data-theme="light"] .ap-bub { background: rgba(255, 255, 255, 0.82); color: #171a1c; box-shadow: inset 0 0 0 1px rgba(23, 26, 28, 0.08), 0 24px 50px -22px rgba(23, 26, 28, 0.35); }
.ap-bub > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #fd5f07; color: #fff; font: 700 17px/1 var(--font-body); font-style: normal; }
.ap-bub > span { display: grid; gap: 4px; font: 500 12px/1 var(--font-body); color: var(--muted); }
.ap-bub b { font: 700 14.5px/1 var(--font-body); color: var(--text); }

/* --------------------------------------------------------------------------
   Small screens — copy moves below the phone (ws-copy rules live in website.css)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ap-chip { padding: 9px 11px; border-radius: 14px; }
  .ap-chip--col i { width: 22px; height: 22px; }
  .ap-chip--type b { font-size: 34px; }
  .ap-chip--mo svg { width: 66px; height: 40px; }
  .ap-badge { padding: 7px 12px 7px 10px; border-radius: 11px; gap: 7px; }
  .ap-badge svg { width: 20px; height: 20px; }
  .ap-badge b { font-size: 13px; }
  .ap-badge em { font-size: 8.5px; }
  .ap-bub { padding: 6px 10px 6px 6px; gap: 8px; border-radius: 13px; }
  .ap-bub[data-desk] { display: none; }   /* three wins on phones, not five */
  .ap-bub > i { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
  .ap-bub > span { font-size: 9.5px; }
  .ap-bub b { font-size: 11px; }
  .ph-layer__tag { left: calc(100% + var(--u) * 6); font-size: calc(var(--u) * 9); }
}

/* ==========================================================================
   10. Apps we make — the cover flow
   ========================================================================== */
.af { position: relative; }
.af__stage {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% 62%, var(--petrol), transparent 72%),
    var(--bg);
  perspective: 1600px;
}
.af__giant {
  position: absolute;
  left: 50%;
  top: 58%;
  margin: 0;
  font: 400 clamp(7rem, 22vw, 26rem)/0.8 var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--line2);
  translate: -50% -50%;
  pointer-events: none;
}
.af__head {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(var(--nav-top) + var(--nav-h) + clamp(18px, 4vh, 40px));
  display: grid;
  justify-items: center;
  text-align: center;
}
.af__head .ws-eyebrow { justify-content: center; }
.af__title { margin: 0; font: 400 clamp(2.4rem, min(5.6vw, 9vh), 6rem)/0.92 var(--font-display); text-transform: uppercase; color: var(--text); }
.af__rail {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  touch-action: pan-y;
}
.af__item {
  --pw: clamp(120px, min(17vw, 24vh), 270px);
  position: absolute;
  left: calc(var(--pw) / -2);
  top: calc(var(--pw) * -1.04 - 34px);   /* phone + name centred on the rail */
  width: var(--pw);
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: grab;
}
.af__ph {
  width: 100%;
  aspect-ratio: 9 / 18.6;
  padding: 3.4%;
  border-radius: 15% / 7.4%;
  background: #050607;
  box-shadow:
    0 0 0 2px #2b3238,
    0 0 0 3px #12171a,
    0 40px 70px -30px var(--ph-shadow),
    0 0 0 rgba(253, 95, 7, 0);
  transition: box-shadow 0.6s var(--ease-io);
}
.af__item.is-on .af__ph { box-shadow: 0 0 0 2px var(--a), 0 0 0 3px #12171a, 0 40px 70px -30px var(--ph-shadow), 0 0 60px -10px var(--a); }
.af__name { margin: 14px 0 0; font: 400 clamp(1.5rem, 2.2vw, 2.3rem)/1 var(--font-display); text-transform: uppercase; color: var(--text); }
.af__tag { margin: 0; font: 500 0.92rem/1.3 var(--font-body); color: var(--muted); }
.af__name, .af__tag { opacity: 0.35; transition: opacity 0.5s var(--ease-io); }
.af__item.is-on .af__name, .af__item.is-on .af__tag { opacity: 1; }
.af__dots { position: absolute; z-index: 3; left: 50%; bottom: clamp(20px, 4vh, 40px); display: flex; gap: 8px; translate: -50% 0; }
.af__dots i { width: 26px; height: 3px; border-radius: 3px; background: var(--line2); transition: background-color 0.4s, width 0.5s var(--ease-out); }
.af__dots i.is-on { width: 44px; background: var(--accent); }

/* mini apps (sized in % of the phone, so they scale with it) */
.mu {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5%;
  padding: 16% 7% 0;
  overflow: hidden;
  border-radius: 12% / 6%;
  background: radial-gradient(90% 40% at 80% 0%, color-mix(in srgb, var(--a), transparent 60%), transparent 70%), var(--b);
  container: mu / inline-size;
  font-family: var(--font-body);
  color: #f2f1ed;
}
.mu::before { content: ""; position: absolute; left: 50%; top: 2.4%; width: 30%; height: 4.6%; border-radius: 99px; background: #000; translate: -50% 0; }
.mu p { margin: 0; }
.mu svg { display: block; }
.mu__bar { display: flex; align-items: center; justify-content: space-between; }
.mu__bar b { font: 400 9cqw/1 var(--font-display); text-transform: uppercase; }
.mu__bar i { width: 13cqw; height: 13cqw; border-radius: 50%; background: linear-gradient(135deg, #fff, var(--a)); opacity: 0.85; }
.mu__hero { display: flex; align-items: center; gap: 6cqw; padding: 7cqw; border-radius: 9cqw; background: var(--a); }
.mu__hero svg { width: 20cqw; height: 20cqw; fill: none; stroke: #fff; stroke-width: 1.8; }
.mu__hero span { font: 600 6cqw/1.2 var(--font-body); }
.mu__hero b { font: 400 12cqw/1 var(--font-display); }
.mu__map { height: 34%; border-radius: 9cqw; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 14px), rgba(255, 255, 255, 0.06); display: grid; place-items: center; }
.mu__map svg, .mu__photo svg { width: 86%; }
.mu__map path { fill: none; stroke: var(--a); stroke-width: 3; stroke-dasharray: 5 5; stroke-linecap: round; }
.mu__map circle { fill: #fff; }
.mu__rows { display: grid; gap: 4cqw; }
.mu__rows p { display: flex; align-items: center; gap: 4cqw; padding: 4.5cqw; border-radius: 6cqw; background: rgba(255, 255, 255, 0.07); }
.mu__rows i { width: 11cqw; height: 11cqw; border-radius: 3cqw; background: var(--a); opacity: 0.85; }
.mu__rows span { flex: 1; height: 3cqw; border-radius: 9px; background: rgba(255, 255, 255, 0.22); }
.mu__rows b { font: 700 6cqw/1 var(--font-body); }
.mu__ring { display: grid; place-items: center; position: relative; }
.mu__ring svg { width: 72cqw; transform: rotate(-90deg); }
.mu__ring circle { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 7; }
.mu__ring .on { stroke: var(--a); stroke-linecap: round; stroke-dasharray: var(--s, 201); stroke-dashoffset: var(--o); }
.mu__ring span { position: absolute; display: grid; justify-items: center; font: 500 5cqw/1 var(--font-body); color: rgba(242, 241, 237, 0.7); }
.mu__ring b { font: 400 11cqw/1 var(--font-display); color: #fff; }
.mu__spark svg { width: 100%; }
.mu__spark polyline { fill: none; stroke: var(--a); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mu__card { display: grid; gap: 3cqw; padding: 8cqw 7cqw; border-radius: 9cqw; background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a), #000 45%)); }
.mu__card span { font: 500 5cqw/1 var(--font-body); opacity: 0.8; }
.mu__card b { font: 400 15cqw/1 var(--font-display); }
.mu__card em { font: 500 5cqw/1 var(--font-body); font-style: normal; opacity: 0.7; letter-spacing: 0.1em; }
.mu__bars { height: 22%; display: flex; align-items: flex-end; gap: 4cqw; }
.mu__bars i { flex: 1; height: calc(var(--v) * 100%); border-radius: 3cqw; background: color-mix(in srgb, var(--a), transparent 30%); }
.mu__photo { height: 38%; border-radius: 9cqw; display: grid; place-items: end center; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--a), #fff 30%), var(--a)); }
.mu__photo svg { width: 100%; }
.mu__photo circle { fill: #fff; opacity: 0.9; }
.mu__photo path { fill: rgba(0, 0, 0, 0.35); }
.mu__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2cqw; }
.mu__cal i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.mu__cal i.on { background: var(--a); }
.mu__btn { padding: 6cqw; border-radius: 99px; background: var(--a); text-align: center; font: 700 6cqw/1 var(--font-body); }
.mu__stories { display: flex; gap: 4cqw; }
.mu__stories i { flex: 1; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #fff, var(--a)); box-shadow: 0 0 0 1.5cqw var(--b), 0 0 0 2.6cqw var(--a); }
.mu__post { display: grid; gap: 3cqw; }
.mu__post span { height: 44cqw; border-radius: 8cqw; background: linear-gradient(135deg, color-mix(in srgb, var(--a), #fff 25%), color-mix(in srgb, var(--a), #000 40%)); }
.mu__post p { display: grid; gap: 2cqw; }
.mu__post p i { height: 3cqw; border-radius: 9px; background: rgba(255, 255, 255, 0.22); }
.mu__post p i + i { width: 60%; }
.mu__post em { font: 700 5.5cqw/1 var(--font-body); font-style: normal; color: var(--a); }
.mu__chat { display: grid; gap: 3cqw; }
.mu__chat p { width: 66%; height: 11cqw; border-radius: 6cqw 6cqw 6cqw 2cqw; background: rgba(255, 255, 255, 0.1); }
.mu__chat .me { justify-self: end; width: 50%; border-radius: 6cqw 6cqw 2cqw 6cqw; background: var(--a); }
.mu__shop { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
.mu__shop span { display: grid; gap: 3cqw; padding: 5cqw; border-radius: 7cqw; background: rgba(255, 255, 255, 0.07); }
.mu__shop svg { width: 100%; }
.mu__shop b { font: 700 6cqw/1 var(--font-body); }

@media (max-width: 767px) {
  .af__item { --pw: min(44vw, 27svh); }
  .af__rail, .af__giant { top: 61%; }
}

/* ==========================================================================
   11. Make it yours — the live restyle
   ========================================================================== */
.my {
  --side: clamp(20px, 6vw, 110px);
  position: relative;
  padding: clamp(90px, 14vh, 160px) var(--side) clamp(40px, 8vh, 90px);
  overflow: hidden;
  background: var(--bg);
}
.my__inner { width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 6vw, 90px); }
.my__title { margin: 0 0 clamp(28px, 5vh, 48px); font: 400 clamp(2.8rem, min(6.4vw, 11vh), 6.8rem)/0.9 var(--font-display); text-transform: uppercase; color: var(--text); }
.my__ctrl { display: grid; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.my__ctrl:last-of-type { border-bottom: 1px solid var(--line); }
.my__label { margin: 0; font: 600 11px/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.my__opts { display: flex; flex-wrap: wrap; gap: 12px; }
.my__opts button { -webkit-appearance: none; appearance: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; background: none; cursor: pointer; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background-color 0.4s, color 0.4s; }
.my__opts button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.my__sw { width: 44px; height: 44px; border-radius: 50%; background: var(--c) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.my__sw.is-on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); transform: scale(1.04); }
.my__sh { width: 54px; height: 44px; display: grid; place-items: center; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line2) !important; }
.my__sh i { width: 22px; height: 22px; background: var(--text); }
.my__sh.is-on { box-shadow: inset 0 0 0 1.5px var(--accent) !important; }
.my__sh.is-on i { background: var(--accent); }
.my__md { height: 44px; padding: 0 22px !important; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line2) !important; font: 600 14px/1 var(--font-body) !important; }
.my__md.is-on { background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important; }
@media (hover: hover) { .my__opts button:hover { transform: translateY(-2px); } }
.my__hint { margin: 22px 0 0; display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.my__hint i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: tb-pulse 1.8s var(--ease-io) infinite; }

.my__stage { position: relative; display: grid; place-items: center; min-height: min(78vh, 760px); perspective: 1600px; }
.my__halo { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--my-a, #fd5f07), transparent 70%), transparent); transition: background 0.8s var(--ease-io); }
.my__ph {
  --pw: min(330px, 36vh, 78vw);
  position: relative;
  width: var(--pw);
  height: calc(var(--pw) * 2.05);
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.165);
  background: #050607;
  box-shadow: 0 0 0 calc(var(--pw) * 0.008) #3a434a, 0 0 0 calc(var(--pw) * 0.011) #1a1f23, 0 60px 90px -40px var(--ph-shadow);
  transform-style: preserve-3d;
  will-change: transform;
}
.my__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * 0.131); isolation: isolate; }
.my__view { position: absolute; left: 0; top: 0; width: 390px; height: 820px; transform-origin: 0 0; font-family: var(--font-body); }
.my__view .ui { opacity: 1; visibility: visible; }
.my__view .ui__add { cursor: pointer; }
.my__view .ui__add:active { transform: scale(0.85); }
.my__view .ui__fly { position: absolute; z-index: 9; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ui-a); pointer-events: none; }
.my__toast {
  position: absolute;
  left: 50%;
  bottom: 6%;
  margin: 0;
  padding: 12px 18px;
  border-radius: 99px;
  background: var(--text);
  color: var(--bg);
  font: 600 13.5px/1 var(--font-body);
  white-space: nowrap;
  translate: -50% 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease-io), transform 0.5s var(--ease-out);
  pointer-events: none;
}
.my__toast.is-on { opacity: 1; transform: none; }

/* the restyle: the app's light mode */
.ui.is-light { --ui-bg: #f7f6f2; --ui-card: #ffffff; --ui-ink: #171a1c; --ui-mut: #707579; }
.ui.is-light .ui__card, .ui.is-light .ui__search, .ui.is-light .ui__tabs, .ui.is-light .ui__pills span:not(.is-on) { box-shadow: 0 6px 20px -12px rgba(23, 26, 28, 0.25); }
.my__view .ui.is-light ~ .ph-status, .my__view.is-light .ph-status { --st-ink: #171a1c; }
.ui .ui__card, .ui .ui__search, .ui .ui__tabs, .ui .ui__pills span { transition-property: background-color, box-shadow, border-radius, transform, color; }

@media (max-width: 900px) {
  .my__inner { grid-template-columns: 1fr; }
  .my__stage { order: -1; min-height: auto; padding: 10px 0 30px; }
  .my__ph { --pw: min(250px, 30svh, 62vw); }
  .my__title { margin-bottom: 22px; }
}