/* Luna Days — lunadays.app
   v3. Structure follows apple.com/os/ios: sticky local nav, a dark hero,
   one highlights gallery, a recap-video moment, a paired deep dive, a widget
   gallery, bento grids, an "and so much more" grid, and a light utility tail.
   Craft rules (1260px column, 28px radii, 20px gaps, SF system type) are in
   ../lunadays-v3/BRIEF.md. */

:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;

  --black:#000;
  --dimbg:#1d1d1f;
  --soft:#f5f5f7;

  --blue:#0071e3;
  --blue-hover:#0077ed;
  --link-dark:#2997ff;
  --link-light:#0066cc;

  --gold:#e0bd6d;
  --gold-on-light:#a37524;
  --on-light:#1d1d1f;
  --on-light-2:#6e6e73;

  --column:1260px;
  --radius:28px;
  --gap:20px;
  --nav-h:52px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#000;overflow-x:hidden;overflow-x:clip;max-width:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:25px;
  color:#1d1d1f;
  background:#000;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100%;
}
h1,h2,h3,p,figure,fieldset,legend{margin:0}
fieldset{border:0;padding:0;min-width:0}
img,video{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
section{position:relative}
:focus-visible{outline:2px solid var(--link-dark);outline-offset:3px;border-radius:4px}
.tone-light :focus-visible,.tone-soft :focus-visible{outline-color:var(--link-light)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;padding:10px 16px;border-radius:999px;background:#fff;color:#1d1d1f;font-size:14px;font-weight:600;transition:top .2s}
.skip-link:focus{top:10px}

.column{width:min(var(--column),100% - 48px);margin-inline:auto}

/* ---------- tone bands ----------
   Each band sets its own surface, secondary text, tile fill, and the fill for
   anything nested inside a tile, so components don't care where they sit. */
.tone-dark{background:var(--black);color:#f5f5f7;--text-2:#86868b;--tile:#1d1d1f;--tile-inner:#000;--hair:rgba(255,255,255,.14)}
.tone-dim{background:var(--dimbg);color:#f5f5f7;--text-2:#86868b;--tile:#000;--tile-inner:#1d1d1f;--hair:rgba(255,255,255,.14)}
.tone-light{background:#fff;color:#1d1d1f;--text-2:#6e6e73;--tile:var(--soft);--tile-inner:#fff;--hair:rgba(0,0,0,.1)}
.tone-soft{background:var(--soft);color:#1d1d1f;--text-2:#6e6e73;--tile:#fff;--tile-inner:var(--soft);--hair:rgba(0,0,0,.1)}
.tile{background:var(--tile);border-radius:var(--radius)}

/* ---------- type scale ----------
   Lifted from apple.com/os/ios (ios.built.css). That page tops out at 48px —
   there is no 64 or 80 anywhere on it — so hero, chapter and section headlines
   all share one size and the page fits far more per screen.
     headline            48/1.0835  600  -.003em   (40 @1068, 32 @734)
     eyebrow-reduced     21/1.1905  600  +.011em   (19 @734)
     banner-card         32/1.125   600  +.004em   (24 @1068, 21 @734)
     media-card-gallery  28/1.1429  600  +.007em   (24 @1068, 17 @734)
     callout-elevated    21/1.1905  600  +.011em   (17 @734)
     callout-base        17/1.2354  600  -.022em   (14 @734)
     body                17/1.2354  400  -.022em
     body-reduced-tight  14/1.2858  400  -.016em                                */
.product-name{font-size:21px;line-height:25px;font-weight:600;letter-spacing:.011em}
.product-tag{
  display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;vertical-align:3px;
  font-size:12px;line-height:15px;font-weight:600;letter-spacing:0;
  color:var(--gold);border:1px solid rgba(224,189,109,.4);
}
h1{font-size:48px;line-height:52px;letter-spacing:-.003em;font-weight:600}
.section-head{font-size:48px;line-height:52px;letter-spacing:-.003em;font-weight:600}
.chapter-label{font-size:21px;line-height:25px;font-weight:600;letter-spacing:.011em;color:var(--text-2)}
.chapter-head{margin-top:8px;font-size:48px;line-height:52px;letter-spacing:-.003em;font-weight:600}
.chapter-intro{margin-top:18px;max-width:660px;font-size:21px;line-height:25px;font-weight:600;letter-spacing:.011em;color:var(--text-2)}

.gold{
  color:transparent;
  background:linear-gradient(105deg,#f5f5f7 8%,#edcf8a 48%,#b78324);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.gold-light{color:var(--gold-on-light)}
.dim{color:var(--text-2)}

/* ---------- buttons and links ---------- */
.btn{letter-spacing:-.022em;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:11px 22px;border-radius:999px;
  background:var(--blue);color:#fff;font-size:17px;line-height:21px;font-weight:400;
  transition:background .2s var(--ease);
}
.btn:hover{background:var(--blue-hover)}
.textlink{color:var(--link-dark);font-size:17px;line-height:21px;letter-spacing:-.022em}
.textlink:hover{text-decoration:underline}
.textlink.light{color:var(--link-light)}
.textlink span{display:inline-block;font-size:20px;line-height:1;transform:translateY(1px)}

/* ---------- 0 · local nav ---------- */
.localnav{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  color:#f5f5f7;
  background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:color .3s ease,background-color .3s ease,border-color .3s ease;
}
.localnav.on-light{color:#1d1d1f;background:rgba(250,250,252,.8);border-bottom-color:rgba(0,0,0,.1)}
.localnav-inner{width:min(var(--column),100% - 44px);margin-inline:auto;height:100%;display:flex;align-items:center;gap:28px}
.localnav-brand{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:600;letter-spacing:-.02em}
.localnav-brand img{width:22px;height:22px;object-fit:contain}
.localnav-links{margin-left:auto;display:flex;gap:26px}
.localnav-links a{font-size:12px;opacity:.8;transition:opacity .2s}
.localnav-links a:hover{opacity:1}
.localnav-cta{margin-left:6px;padding:5px 12px;border-radius:999px;background:var(--blue);color:#fff;font-size:12px;transition:background .2s var(--ease)}
.localnav-cta:hover{background:var(--blue-hover)}

/* ---------- 1 · hero ---------- */
.hero{position:relative;isolation:isolate;padding:calc(var(--nav-h) + 58px) 0 0;text-align:center;overflow:hidden}
.hero-stars{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 8% 22%,#d8b762 0 1px,transparent 1.6px),
    radial-gradient(circle at 18% 68%,#7a7a78 0 1px,transparent 1.6px),
    radial-gradient(circle at 31% 14%,#9a9a96 0 1px,transparent 1.6px),
    radial-gradient(circle at 46% 58%,#d8b762 0 1px,transparent 1.6px),
    radial-gradient(circle at 62% 18%,#777 0 1px,transparent 1.6px),
    radial-gradient(circle at 78% 42%,#c4a45a 0 1px,transparent 1.6px),
    radial-gradient(circle at 88% 12%,#8b8b87 0 1px,transparent 1.6px),
    radial-gradient(circle at 92% 72%,#d8b762 0 1px,transparent 1.6px),
    radial-gradient(circle at 14% 40%,#666 0 1px,transparent 1.6px),
    radial-gradient(circle at 54% 8%,#aaa 0 1px,transparent 1.6px);
}
.hero-copy{position:relative;z-index:2;width:min(980px,100% - 48px);margin-inline:auto}
.hero h1{margin-top:10px}
.hero-sub{max-width:600px;margin:16px auto 0;font-size:21px;line-height:25px;font-weight:600;letter-spacing:.011em;color:var(--text-2);text-wrap:balance}
.hero-actions{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:#6e6e73}
.hero-shot{position:relative;z-index:1;margin:30px auto 0;width:min(560px,74%)}
.hero-shot>img{width:100%;height:auto;position:relative;z-index:1}
.hero-chips{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none;pointer-events:none}
.hero-chip{
  position:absolute;display:flex;align-items:center;gap:10px;
  min-width:148px;padding:10px 14px 10px 10px;
  border-radius:16px;
  background:rgba(22,22,24,.78);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.38);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  text-align:left;color:#f5f5f7;
}
.hero-chip-icon{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;line-height:1;
  background:rgba(224,189,109,.14);
}
.hero-chip small{display:block;font-size:11px;line-height:14px;letter-spacing:.01em;color:#a1a1a6}
.hero-chip strong{display:block;margin-top:1px;font-size:15px;line-height:18px;font-weight:600;letter-spacing:-.016em}
.hero-chip-love{right:-11%;top:11%;rotate:-3deg}
.hero-chip-baby{right:-16%;top:44%;rotate:3deg}
.hero-chip-trip{left:-22%;bottom:16%;rotate:-2deg}
@media (prefers-reduced-motion:no-preference){
  @keyframes chip-drift{from{translate:0 7px}to{translate:0 -7px}}
  .hero-chip{animation:chip-drift 7.2s var(--ease) infinite alternate;will-change:translate}
  .hero-chip-love{animation-duration:6.6s;animation-delay:-1s}
  .hero-chip-baby{animation-duration:8.1s;animation-delay:-2.8s}
  .hero-chip-trip{animation-duration:7.4s;animation-delay:-4.4s}
  @keyframes star-breathe{0%,100%{opacity:.42}50%{opacity:.62}}
  .hero-stars{animation:star-breathe 9s ease-in-out infinite}
}

/* ---------- App Store badge ----------
   Apple's artwork, unmodified -- only sized and given hover and focus
   states, which their guidelines allow. White on dark bands, black on light. */
.appstore-badge{display:inline-block;line-height:0;border-radius:9px;transition:transform .35s var(--ease),filter .35s var(--ease)}
.appstore-badge img{width:156px;height:auto;display:block}
.appstore-badge:hover{transform:translateY(-2px);filter:brightness(.94)}
.appstore-badge:active{transform:translateY(0) scale(.98)}
.appstore-badge:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.finale .appstore-badge{margin-top:28px}
.finale .appstore-badge img{width:170px}

/* ---------- phone frames ----------
   Natural titanium from the App Store stills: a skinny warm-silver rail,
   hairline black bezel, tiny hardware buttons, product-shot shadow.
   Sampled from those frames: highlight #c1bfb5, body #565650, outer
   hairline #3b3b38, inner catchlight #dad7cf. Every dimension derives
   from --pw (percentage padding resolves against the PARENT). */
.phone{
  --pw:200px;
  --rail:max(2.5px, calc(var(--pw) * .0085));
  --outer-r:calc(var(--pw) * .155);
  --inner-r:calc(var(--pw) * .147);
  --bezel:max(1px, calc(var(--pw) * .0028));
  position:relative;
  width:var(--pw);
  height:auto;
  flex:none;
  padding:var(--rail);
  border-radius:var(--outer-r);
  background:
    linear-gradient(90deg, rgba(255,255,255,.2) 0%, transparent 14%, transparent 86%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, transparent 12%, transparent 88%, rgba(0,0,0,.16) 100%),
    linear-gradient(165deg, #c1bfb5 0%, #8a8882 30%, #565650 55%, #6a6a64 78%, #9a9890 100%);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,.28),
    inset 0.5px 0 0 rgba(255,255,255,.16),
    inset 0 -0.5px 0 rgba(0,0,0,.28),
    inset -0.5px 0 0 rgba(0,0,0,.16),
    0 0 0 1px #3b3b38,
    0 1px 2px rgba(30,28,24,.08),
    0 8px 20px rgba(30,28,24,.10),
    0 24px 48px rgba(30,28,24,.12);
}
.tone-dark .phone,.tone-dim .phone{
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,.24),
    inset 0.5px 0 0 rgba(255,255,255,.14),
    inset 0 -0.5px 0 rgba(0,0,0,.32),
    inset -0.5px 0 0 rgba(0,0,0,.2),
    0 0 0 1px #3b3b38,
    0 1px 2px rgba(0,0,0,.35),
    0 12px 28px rgba(0,0,0,.40),
    0 28px 56px rgba(0,0,0,.32);
}
/* buttons: tiny titanium slivers, same metal as the rail */
.phone::before,.phone::after{
  content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:calc(var(--pw) * .0065);
  background:linear-gradient(180deg,#c1bfb5 0%,#8a8882 40%,#565650 72%,#9a9890 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 1px #3b3b38;
}
.phone::before{           /* left: action, volume up, volume down */
  left:calc(var(--pw) * -.006);
  border-radius:1px 0 0 1px;
  -webkit-mask:linear-gradient(180deg,
    transparent 0 15.5%, #000 15.5% 19.5%, transparent 19.5% 22%,
    #000 22% 28%, transparent 28% 30%, #000 30% 36%, transparent 36% 100%);
  mask:linear-gradient(180deg,
    transparent 0 15.5%, #000 15.5% 19.5%, transparent 19.5% 22%,
    #000 22% 28%, transparent 28% 30%, #000 30% 36%, transparent 36% 100%);
}
.phone::after{            /* right: side button */
  right:calc(var(--pw) * -.006);
  border-radius:0 1px 1px 0;
  -webkit-mask:linear-gradient(180deg,transparent 0 22%,#000 22% 31%,transparent 31% 100%);
  mask:linear-gradient(180deg,transparent 0 22%,#000 22% 31%,transparent 31% 100%);
}
.phone>img{
  display:block;width:100%;aspect-ratio:62/135;height:auto;max-height:none;flex:none;object-fit:cover;object-position:top center;
  border-radius:var(--inner-r);
  background:#111;
  box-shadow:0 0 0 var(--bezel) #0a0a0c;
}
/* iOS Safari ignores left+right+width:auto on <video> and paints the
   intrinsic 620px file next to the mockup. Size it from --pw instead. */
.phone>video{
  position:absolute;z-index:1;
  left:var(--rail);
  top:var(--rail);
  width:calc(var(--pw) - 2 * var(--rail));
  height:auto;
  max-width:none;
  aspect-ratio:62/135;
  object-fit:cover;object-position:top center;
  border-radius:var(--inner-r);
  background:#111;
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease);
}
.phone>video.is-ready{opacity:1;visibility:visible}
.phone-crop{
  padding-bottom:0;
  border-radius:var(--outer-r) var(--outer-r) 0 0;
}
.phone-crop>img{border-radius:var(--inner-r) var(--inner-r) 0 0}
.phone-crop>video{border-radius:var(--inner-r) var(--inner-r) 0 0}

/* ---------- galleries (shared) ---------- */
.gallery{--edge:max(24px,calc((100% - var(--column)) / 2));position:relative}
.gallery-track{
  display:flex;gap:var(--gap);
  padding-inline:var(--edge);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--edge);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{display:none}
/* Last card snaps to the right edge, not the column start — otherwise a
   wide desktop can park it on the left with a void of empty track. */
.gallery-track > [data-card]:last-child{scroll-snap-align:end}
.explore-gallery,.howto-gallery{--card:406px}
.card-gallery{--card:372px}
.gallery.is-dragging .gallery-track{scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto}
.gallery.is-dragging a,.gallery.is-dragging button{pointer-events:none}

.gallery-controls{margin-top:26px;display:flex;align-items:center;justify-content:flex-end;gap:22px}
.gallery-dots{display:flex;align-items:center;gap:9px}
.gallery-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.32);transition:background .2s,transform .2s}
.gallery-dots button[aria-selected="true"]{background:#fff;transform:scale(1.12)}
.tone-light .gallery-dots button,.tone-soft .gallery-dots button{background:rgba(0,0,0,.28)}
.tone-light .gallery-dots button[aria-selected="true"],.tone-soft .gallery-dots button[aria-selected="true"]{background:#1d1d1f}

.gallery-buttons{display:flex;gap:10px}
.round-btn{
  width:36px;height:36px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.2);color:#fff;
  transition:background .2s,opacity .2s;
}
.round-btn:hover:not(:disabled){background:rgba(255,255,255,.32)}
.round-btn:disabled{opacity:.32;cursor:default}
.round-btn svg{width:19px;height:19px;fill:currentColor}
.tone-light .round-btn,.tone-soft .round-btn{background:rgba(29,29,31,.85)}
.tone-light .round-btn:hover:not(:disabled),.tone-soft .round-btn:hover:not(:disabled){background:#1d1d1f}
.round-btn .i-play{display:none}
.round-btn.is-paused .i-play{display:block}
.round-btn.is-paused .i-pause{display:none}

/* ---------- 2 · explore ---------- */
.explore{padding:112px 0 96px}
.explore .chapter-label{margin-bottom:8px}
.explore .section-head{margin-bottom:0}
.explore-lead{margin-top:16px;margin-bottom:38px}
.explore-card{
  flex:0 0 406px;height:596px;scroll-snap-align:start;
  border-radius:var(--radius);overflow:hidden;
  padding:34px 32px 0;display:flex;flex-direction:column;
  container-type:inline-size;
}
.explore-copy-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.explore-copy h3{font-size:28px;line-height:32px;font-weight:600;letter-spacing:.007em;text-wrap:balance}
.explore-copy p{margin-top:10px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:#a1a1a6}
.replay{
  flex:none;margin:4px 0 0;padding:0;border:0;background:none;cursor:pointer;
  color:#86868b;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;
}
.replay:hover{color:#f5f5f7}
.recap-controls{display:flex;align-items:center;gap:14px}
.replay-on-dark{margin:0;color:#f5f5f7}
.explore-stage{margin-top:14px;padding-top:10px;display:flex;justify-content:center;min-height:0;overflow:hidden;width:100%}
.explore-stage .phone{flex:none;--pw:min(320px,86cqi);width:var(--pw)}

.tint-blue{background:radial-gradient(120% 110% at 72% 8%,#16304f 0%,#101a28 46%,#0b0c10 100%)}
.tint-rose{background:radial-gradient(120% 110% at 72% 8%,#4a1730 0%,#26101c 48%,#0d0a0c 100%)}
.tint-green{background:radial-gradient(120% 110% at 72% 8%,#123a24 0%,#0e1d15 48%,#0a0c0a 100%)}
.tint-plum{background:radial-gradient(120% 110% at 72% 8%,#2f1b46 0%,#1a1224 48%,#0b0a0d 100%)}
.tint-amber{background:radial-gradient(120% 110% at 72% 8%,#4a3313 0%,#241a0d 48%,#0d0b08 100%)}
.tint-slate{background:radial-gradient(120% 110% at 72% 8%,#23262c 0%,#15171b 48%,#0a0b0c 100%)}
.tint-teal{background:radial-gradient(120% 110% at 72% 8%,#0e3a38 0%,#0d1c1b 48%,#080c0c 100%)}
.tint-navy{background:radial-gradient(120% 110% at 72% 8%,#14233c 0%,#10141c 48%,#0a0b0c 100%)}

/* ---------- how-to clips ---------- */
.howto{padding:120px 0 100px}
.howto .chapter{margin-bottom:38px}
.howto-card{
  flex:0 0 406px;height:596px;scroll-snap-align:start;
  border-radius:var(--radius);overflow:hidden;
  padding:34px 32px 0;display:flex;flex-direction:column;
  container-type:inline-size;
}
.howto-kicker{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.howto-card h3{margin-top:8px;font-size:28px;line-height:32px;font-weight:600;letter-spacing:.007em;text-wrap:balance}
.howto-card .howto-lead{margin-top:10px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:#a1a1a6}
.howto-stage{margin-top:14px;padding-top:10px;display:flex;justify-content:center;min-height:0;overflow:hidden;width:100%}
.howto-stage .phone{flex:none;--pw:min(320px,86cqi);width:var(--pw)}
.phone>.clip-need{
  display:flex;flex-direction:column;justify-content:flex-start;gap:10px;
  width:100%;aspect-ratio:62/135;
  padding:calc(var(--pw) * .14) 18px 28px;
  border-radius:var(--inner-r) var(--inner-r) 0 0;
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(224,189,109,.14),transparent 52%),
    #0c0c0e;
  box-shadow:0 0 0 var(--bezel) #0a0a0c;
}
.clip-need-tag{
  align-self:flex-start;padding:3px 9px;border-radius:999px;
  background:var(--gold);color:#1d1d1f;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.clip-need-film{margin:0;font-size:15px;line-height:20px;font-weight:600;letter-spacing:-.016em;color:#f5f5f7}
.clip-need-file{margin:0;font-size:11px;line-height:15px;letter-spacing:-.01em;color:#86868b;word-break:break-all}

.need{
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  padding:22px;text-align:left;
  background:
    radial-gradient(120% 80% at 20% 0%,rgba(224,189,109,.1),transparent 50%),
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(128,128,128,.07) 9px 18px),
    #111;
}
.need-tag{
  align-self:flex-start;padding:3px 9px;border-radius:999px;
  background:var(--gold);color:#1d1d1f;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.need-what{margin:0;font-size:14px;line-height:20px;font-weight:600}
.need-file{margin:0;font-size:12px;line-height:17px;color:var(--text-2);word-break:break-all}
.tile-card>.need{flex:none;height:330px;margin:0;border-radius:var(--radius) var(--radius) 0 0}
.more-card .need{margin-top:16px;min-height:168px;border-radius:16px}

/* ---------- 3 · recap ---------- */
.recap{padding:96px 0}
.recap-inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:48px;
  background:#000;border-radius:var(--radius);overflow:hidden;
  padding:44px 48px 44px 56px;max-width:100%;
}
.recap-copy{
  max-width:400px;padding:0;
  display:flex;flex-direction:column;justify-content:center;min-width:0;
}
.recap-copy .section-head,.recap-copy .chapter-intro{min-width:0;max-width:100%;text-wrap:balance}
.recap-copy .chapter-intro{margin-top:16px}
.recap-controls{margin-top:28px}
.recap-stage{
  display:flex;justify-content:center;align-items:center;
  min-width:0;
}
.phone-lg{--pw:min(300px,72vw);width:var(--pw);flex:none}

/* ---------- 4 · give it a date ---------- */
.start{padding:120px 0 110px}
.start-demo{
  position:relative;overflow:hidden;
  margin-top:48px;padding:52px 56px 48px;
  border-radius:var(--radius);background:#0a0a0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  min-height:300px;
}
.start-demo::before{
  content:"";position:absolute;inset:auto 8% -50% 52%;height:90%;
  background:radial-gradient(circle,rgba(62,123,232,.28),transparent 70%);
  pointer-events:none;
}
.start-demo-kicker{
  position:relative;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
}
.start-line{
  position:relative;margin-top:22px;min-height:52px;
  font-size:40px;line-height:48px;font-weight:600;letter-spacing:-.022em;
}
.start-cursor{
  display:inline-block;width:2px;height:.82em;margin-left:2px;vertical-align:-.05em;
  background:var(--gold);opacity:1;
}
.start-demo.is-typing .start-cursor{animation:caret 1s steps(1) infinite}
.start-demo.is-done .start-cursor{opacity:0}
@keyframes caret{50%{opacity:0}}
.start-event{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:16px;
  margin-top:36px;width:min(560px,100%);padding:20px 22px;
  border-radius:22px;
  background:linear-gradient(100deg,#5b8def 0%,#3e7be8 100%);
  color:#fff;
  opacity:0;transform:translateY(14px) scale(.98);
  pointer-events:none;
}
.start-demo.is-done .start-event{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.start-event-emoji{flex:none;font-size:28px;line-height:1}
.start-event-copy{flex:1;min-width:0}
.start-event-copy strong{display:block;font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.016em}
.start-event-copy small{display:block;margin-top:3px;font-size:13px;line-height:16px;opacity:.82}
.start-event-count{flex:none;text-align:right}
.start-event-count b{display:block;font-size:28px;line-height:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.start-event-count i{display:block;font-style:normal;font-size:11px;letter-spacing:.04em;opacity:.8}
.start-steps{
  margin:48px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.start-steps li{padding:0 36px;border-left:1px solid rgba(255,255,255,.12)}
.start-steps li:first-child{padding-left:0;border-left:0}
.start-steps li:last-child{padding-right:0}
.start-steps span{
  display:block;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--gold);
}
.start-steps strong{
  display:block;margin-top:14px;font-size:24px;line-height:28px;font-weight:600;letter-spacing:.009em;
}
.start-steps p{
  margin-top:8px;font-size:14px;line-height:20px;letter-spacing:-.016em;color:var(--text-2);max-width:28ch;
}

/* ---------- 5 · two directions ---------- */
.duality{padding:120px 0}
.dual-grid{
  margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);
}
.dual-card{
  background:#fff;color:#1d1d1f;--text-2:#6e6e73;
  border-radius:var(--radius);overflow:hidden;padding:36px 32px 0;
  height:596px;min-height:596px;max-height:596px;
  display:flex;flex-direction:column;
  container-type:inline-size;
}
.dual-kicker{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-on-light)}
.dual-copy h3{margin-top:8px;font-size:32px;line-height:36px;letter-spacing:.004em;font-weight:600}
.dual-copy p{margin-top:10px;max-width:28ch;font-size:17px;line-height:23px;letter-spacing:-.022em;color:var(--text-2)}
.dual-stage{
  flex:1 1 auto;min-height:0;overflow:hidden;
  margin-top:14px;padding-top:12px;
  display:flex;justify-content:center;align-items:flex-start;width:100%;
}
.dual-stage .phone{flex:none;--pw:min(320px,86cqi);width:var(--pw)}
.milestone{margin-top:22px;max-width:440px}
.milestone-track{height:5px;border-radius:99px;background:var(--hair);overflow:hidden}
.milestone-track i{display:block;height:100%;width:92%;border-radius:99px;background:linear-gradient(90deg,#a37524,var(--gold));transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.milestone.is-filled .milestone-track i{transform:scaleX(1)}
.milestone p{margin-top:12px;display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--text-2)}
.milestone p b{color:inherit;font-weight:600}

/* ---------- 5 · widgets ---------- */
.widgets{padding:120px 0 100px}
.widgets .chapter{margin-bottom:38px}
.tile-card{flex:0 0 372px;height:502px;scroll-snap-align:start;overflow:hidden;display:flex;flex-direction:column}
.tile-card>img{width:100%;height:330px;object-fit:cover;flex:none}
.tile-card-copy{padding:24px 26px 28px;flex:1}
.tile-card-copy h3{font-size:21px;line-height:25px;font-weight:600;letter-spacing:.011em}
.tile-card-copy p{margin-top:8px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:var(--text-2)}
.siri-answer{
  height:330px;flex:none;padding:34px 30px;
  background:radial-gradient(120% 90% at 20% 0%,#232535 0%,#131419 55%,#0b0b0d 100%);
  color:#f5f5f7;display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.siri-orb{width:40px;height:40px;border-radius:50%;background:conic-gradient(from 210deg,#2997ff,#a56bff,#ff5f8f,#ffb45f,#2997ff);box-shadow:0 0 24px rgba(102,140,255,.45)}
.siri-ask{font-size:14px;line-height:18px;letter-spacing:-.016em;color:#86868b}
.siri-reply strong{display:block;font-size:32px;line-height:36px;font-weight:600;letter-spacing:.004em}
.siri-reply span{display:block;margin-top:6px;font-size:14px;color:#86868b}

/* ---------- 6 · make it yours (bento) ---------- */
.yours{padding:120px 0}
.bento{
  margin-top:44px;display:grid;gap:var(--gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:340px 230px 340px;
  grid-template-areas:
    "cust tags year"
    "cust show year"
    "rep  imp  imp";
}
.bento-tile{position:relative;overflow:hidden;padding:36px 36px 32px;display:flex;flex-direction:column}
.tile-customizer{grid-area:cust}
.tile-tags{grid-area:tags}
.tile-year{grid-area:year}
.tile-showas{grid-area:show}
.tile-repeats{grid-area:rep}
.tile-import{grid-area:imp;padding:0;display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch}
.bento-copy h3{font-size:24px;line-height:28px;font-weight:600;letter-spacing:.009em}
.bento-copy p{margin-top:10px;max-width:36ch;font-size:15px;line-height:21px;letter-spacing:-.016em;color:var(--text-2)}
.tile-import .bento-copy p{max-width:32ch}

/* customizer */
.customizer{margin-block:auto;padding-top:28px}
.preview{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;background:var(--preview-bg,#e2eefc);transition:background .35s var(--ease)}
.preview-emoji{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:19px;background:rgba(255,255,255,.7)}
.preview-body{flex:1;min-width:0}
.preview-body strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--preview-ink,#123a63)}
.preview-body small{display:block;margin-top:1px;font-size:12px;color:var(--preview-ink,#123a63);opacity:.62}
.preview-count{text-align:right;color:var(--preview-ink,#123a63)}
.preview-count b{display:block;font-size:22px;font-weight:600;line-height:1;letter-spacing:-.02em}
.preview-count i{display:block;margin-top:2px;font-size:11px;font-style:normal;opacity:.62}
.preview.is-updating{animation:preview-pop .38s var(--ease)}
@keyframes preview-pop{0%{transform:scale(.985)}60%{transform:scale(1.012)}100%{transform:scale(1)}}
.preview[data-tone="blue"]{--preview-bg:#e2eefc;--preview-ink:#123a63}
.preview[data-tone="purple"]{--preview-bg:#ece4fb;--preview-ink:#3d2a63}
.preview[data-tone="teal"]{--preview-bg:#dcf2ee;--preview-ink:#0f4a41}
.preview[data-tone="pink"]{--preview-bg:#fce3ec;--preview-ink:#6c1f3c}
.preview[data-tone="orange"]{--preview-bg:#fdeada;--preview-ink:#6d3d10}
.preview[data-tone="green"]{--preview-bg:#e2f3df;--preview-ink:#204a20}

.picker{margin-top:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.picker legend{float:left;width:100%;margin-bottom:8px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#86868b}
.picker button{width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;border:1px solid rgba(0,0,0,.1);background:var(--tile-inner);font-size:17px;line-height:1;display:grid;place-items:center;transition:box-shadow .2s,transform .15s}
.picker button:hover{transform:translateY(-1px)}
.picker button.is-on{box-shadow:0 0 0 2px var(--tile),0 0 0 4px #1d1d1f}
.picker-color button{border:0}
.picker-color button[data-tone="blue"]{background:#3b82f6}
.picker-color button[data-tone="purple"]{background:#8b5cf6}
.picker-color button[data-tone="teal"]{background:#14b8a6}
.picker-color button[data-tone="pink"]{background:#ec4899}
.picker-color button[data-tone="orange"]{background:#f59e0b}
.picker-color button[data-tone="green"]{background:#22c55e}

/* tags tile */
.tag-demo{margin-top:auto;padding-top:28px}
.tag-row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;background:var(--tile-inner)}
.tag-emoji{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:20px;background:#fce3ec}
.tag-row>span{flex:1;min-width:0}
.tag-row strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.016em}
.tag-row small{display:block;margin-top:3px;font-size:13px;color:var(--text-2)}
.tag-row b{flex:none;font-size:22px;font-weight:600;letter-spacing:-.02em;text-align:right;line-height:1}
.tag-row b i{display:block;margin-top:3px;font-size:11px;font-style:normal;font-weight:400;color:var(--text-2)}
.tag-chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.tag-chips span{padding:7px 14px;border-radius:999px;background:var(--tile-inner);font-size:13px;font-weight:500}

/* year tile — same light card as the others; the grid is the product, inset */
.tile-year{padding-bottom:20px;min-height:0}
.year-wall{
  flex:1;min-height:0;margin-top:18px;
  display:flex;justify-content:center;align-items:center;
}
.year-wall img{width:auto;height:100%;max-width:100%;object-fit:contain;object-position:center top;border-radius:16px}

/* show-as tile */
.segmented{margin-top:auto;display:flex;gap:4px;padding:5px;border-radius:14px;background:var(--tile-inner)}
.segmented span{flex:1;text-align:center;padding:10px 6px;border-radius:10px;font-size:13px;font-weight:500;color:var(--text-2)}
.segmented span.is-on{background:#1d1d1f;color:#fff;font-weight:600}

/* repeats tile — rows, not chips against the copy */
.repeat-list{margin-top:auto;padding-top:8px;list-style:none}
.repeat-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0;border-top:1px solid var(--hair);
  font-size:15px;line-height:20px;letter-spacing:-.016em;
}
.repeat-list li:last-child{padding-bottom:0}
.repeat-list span{color:var(--text-2);flex:none}
.repeat-list strong{font-weight:600;text-align:right}

/* import tile — split board: Contacts on the left, Luna fills the right */
.import-copy{
  padding:36px 32px 32px 36px;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-width:0;
}
.contact-board{
  padding:16px 16px 14px;border-radius:18px;background:var(--tile-inner);
}
.contact-kicker{
  margin:0 8px 10px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#86868b;
}
.contact-row{display:flex;align-items:center;gap:12px;padding:2px 6px 6px}
.contact-avatar{
  width:40px;height:40px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:20px;background:#ece4fb;
}
.contact-row strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.contact-row small{display:block;margin-top:2px;font-size:13px;color:var(--text-2)}
.luna-stage{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:0;height:100%;padding:28px 24px;
  color:#fff;text-align:center;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:radial-gradient(120% 90% at 50% 0%,#c9a6ff 0%,#9b6dff 38%,#6d3ce8 100%);
  transform:scale(.985);opacity:.85;
  transition:transform .7s var(--ease),opacity .7s var(--ease);
}
.tile-import.is-on .luna-stage{transform:none;opacity:1}
.luna-spark,.luna-spark::before,.luna-spark::after{
  position:absolute;border-radius:50%;background:#fff;opacity:.0;
  pointer-events:none;
}
.luna-spark{inset:18px auto auto 22px;width:5px;height:5px}
.luna-spark::before{content:"";inset:42px auto auto 72%;width:4px;height:4px}
.luna-spark::after{content:"";inset:auto 28px 36px auto;width:6px;height:6px}
.tile-import.is-on .luna-spark,
.tile-import.is-on .luna-spark::before,
.tile-import.is-on .luna-spark::after{
  animation:spark 1.8s var(--ease) both;
}
.tile-import.is-on .luna-spark::before{animation-delay:.15s}
.tile-import.is-on .luna-spark::after{animation-delay:.3s}
@keyframes spark{
  0%{opacity:0;transform:scale(.4)}
  35%{opacity:.85;transform:scale(1)}
  100%{opacity:.35;transform:scale(.8)}
}
.luna-emoji{display:block;font-size:36px;line-height:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}
.luna-title{margin-top:10px;font-size:17px;line-height:21px;font-weight:600;letter-spacing:-.02em}
.luna-count{margin-top:8px}
.luna-count b{display:block;font-size:64px;line-height:.9;font-weight:600;letter-spacing:-.03em}
.luna-count i{display:block;margin-top:4px;font-size:12px;font-style:normal;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.luna-age{
  display:inline-block;margin-top:12px;padding:6px 12px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  background:rgba(255,255,255,.16);
}

/* ---------- 7 · private by design ---------- */
.privacy{padding:112px 0}
.privacy .chapter-intro{max-width:700px}
.privacy-tiles{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.privacy-tile{padding:32px;min-height:212px;display:flex;flex-direction:column;justify-content:flex-end}
.privacy-tile h3{margin-top:auto;font-size:21px;line-height:25px;font-weight:600;letter-spacing:.011em}
.privacy-tile p{margin-top:10px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:var(--text-2)}
.privacy-link{margin-top:32px}

/* ---------- 8 · and so much more ---------- */
.more{padding:112px 0}
.more-head .section-head{margin-top:8px}
.more-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.more-card{padding:24px 26px 26px;min-height:150px;display:flex;flex-direction:column}
.more-icon{font-size:26px;line-height:1}
.more-card h3{margin-top:14px;font-size:17px;line-height:21px;font-weight:600;letter-spacing:-.022em}
.more-card p{margin-top:6px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:var(--text-2)}
.more-shot{margin-top:16px;border-radius:16px;overflow:hidden;background:#0b0c10}
.more-shot img{display:block;width:100%;height:200px;object-fit:cover;object-position:top center}
.more-shot-ipad img{height:220px;object-position:center 22%}

/* ---------- 9 · FAQ ---------- */
.faq{padding:112px 0 40px}
.faq-list{margin-top:40px;border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair);padding:4px 0}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 0;
  font-size:21px;line-height:25px;font-weight:600;letter-spacing:.011em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";float:right;width:10px;height:10px;margin-top:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.45;transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.faq-item p{margin:0 0 22px;max-width:66ch;font-size:17px;line-height:25px;letter-spacing:-.022em;color:var(--text-2)}
.faq-item p a{margin-left:.2em}

/* ---------- 10 · finale + footer ---------- */
.finale{padding:108px 0}
.finale-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.finale-moon{width:72px;height:72px;object-fit:contain;margin-bottom:24px}
.finale h2{margin-top:8px;font-size:48px;line-height:52px;letter-spacing:-.003em;font-weight:600}
.finale .chapter-intro{margin-top:18px}
.finale .btn{margin-top:30px}
.finale-compat{margin-top:16px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:var(--text-2)}

footer{border-top:1px solid rgba(0,0,0,.1);padding:34px 0}
.footer-inner{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.footer-inner>p{font-size:12px;color:var(--text-2)}
.footer-inner nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.footer-inner nav a{font-size:12px;color:#515154}
.footer-inner nav a:hover{text-decoration:underline}
.x-follow{display:inline-flex;align-items:center;gap:6px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- tablet ---------- */
@media (max-width:1068px){
  h1,.chapter-head,.section-head,.finale h2{font-size:40px;line-height:44px;letter-spacing:0}
  .explore-copy h3,.howto-card h3,.dual-copy h3,.siri-reply strong{font-size:24px;line-height:28px;letter-spacing:.009em}
  .deep-number strong{font-size:40px;line-height:44px;letter-spacing:0}
  .explore{padding:108px 0 92px}
  .recap{padding:88px 0}
  .start{padding:110px 0}
  .start-demo{padding:40px 36px 36px;min-height:240px}
  .start-line{font-size:32px;line-height:38px}
  .start-steps{grid-template-columns:1fr;gap:28px;margin-top:40px}
  .start-steps li{padding:0;border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
  .start-steps li:first-child{border-top:0;padding-top:0}
  .duality,.yours{padding:116px 0}
  .faq{padding:110px 0 32px}
  .widgets,.howto{padding:116px 0 96px}
  .privacy,.more{padding:110px 0}
  .recap-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:28px;padding:40px 28px 36px;min-height:0}
  .recap-copy{width:100%;max-width:min(640px,100%);padding:0;align-items:center}
  .recap-copy .section-head,.recap-copy .chapter-intro{width:100%}
  .recap-controls{justify-content:center}
  .dual-copy h3{font-size:28px;line-height:32px}
  .dual-card{height:560px;min-height:560px;max-height:560px;padding:32px 28px 0}
  .bento{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:minmax(240px,auto);
    grid-template-areas:
      "cust year"
      "cust year"
      "tags show"
      "rep  imp";
  }
  .year-wall img{width:min(100%,240px)}
  .tile-import{grid-template-columns:1fr;padding:0}
  .import-copy{padding:28px 24px 16px;gap:16px}
  .luna-stage{min-height:220px;padding:26px 20px 28px}
  .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .privacy-tiles{grid-template-columns:1fr;gap:12px}
  .privacy-tile{min-height:0}
}

/* ---------- phone ---------- */
@media (max-width:734px){
  body{font-size:16px}
  .column{width:min(var(--column),100% - 40px)}
  .localnav-inner{width:min(var(--column),100% - 34px);gap:14px}
  .localnav-links{display:none}
  .localnav-cta{margin-left:auto}
  .localnav-brand{font-size:17px}

  h1,.chapter-head,.section-head,.finale h2{font-size:32px;line-height:36px;letter-spacing:.004em}
  .product-name,.chapter-label{font-size:19px;line-height:23px;letter-spacing:.012em}
  .product-tag{font-size:11px;vertical-align:2px}
  .chapter-intro,.hero-sub{margin-top:14px;font-size:17px;line-height:21px;letter-spacing:-.022em}
  .explore-copy h3{font-size:17px;line-height:21px;letter-spacing:-.022em}
  .dual-copy h3,.siri-reply strong,.bento-copy h3{font-size:21px;line-height:25px;letter-spacing:.011em}
  .tile-card-copy h3,.privacy-tile h3{font-size:17px;line-height:21px;letter-spacing:-.022em}
  .deep-number strong{font-size:32px;line-height:36px;letter-spacing:.004em}

  .hero{
    min-height:100svh;
    min-height:100dvh;
    padding-top:calc(var(--nav-h) + 32px);
    padding-bottom:max(64px, env(safe-area-inset-bottom));
  }
  .hero-actions{margin-top:22px;gap:14px;flex-direction:column}
  .hero-note{display:none}
  .hero-shot{margin-top:22px;width:min(330px,84%)}
  .hero-chips{display:none}

  .explore{padding:70px 0 60px}
  .explore .section-head{margin-bottom:0}
  .explore-lead{margin-bottom:24px}
  .recap{padding:56px 0}
  .start{padding:72px 0}
  .start-demo{margin-top:32px;padding:28px 22px 26px;min-height:0;border-radius:24px}
  .start-line{font-size:28px;line-height:34px;min-height:40px}
  .start-event{margin-top:24px;padding:14px 16px}
  .start-steps{margin-top:32px;gap:22px}
  .start-steps strong{font-size:21px;line-height:25px}
  .duality,.yours{padding:76px 0}
  .widgets,.howto{padding:76px 0 60px}
  .privacy,.more,.faq{padding:72px 0}
  .faq{padding-bottom:24px}
  .finale{padding:80px 0}
  .faq-item summary{font-size:17px;line-height:21px}

  .gallery{--edge:20px}
  .gallery-track{gap:12px}
  .gallery-controls{margin-top:18px;justify-content:space-between}

  .explore-gallery,.howto-gallery{--card:86vw}
  .card-gallery{--card:84vw}
  .explore-card,.howto-card{flex:0 0 86vw;height:min(580px,134vw);padding:26px 24px 0}
  .explore-copy h3,.howto-card h3{font-size:21px;line-height:25px}
  .explore-copy p,.howto-card .howto-lead{margin-top:8px;font-size:14px;line-height:20px}
  .explore-stage,.howto-stage{margin-top:18px}
  .explore-stage .phone,.howto-stage .phone{--pw:min(300px,88cqi)}

  .recap-inner{padding:32px 20px 28px;border-radius:24px;min-width:0;gap:22px}
  .recap-copy{padding:0;min-width:0}
  .recap-copy .section-head,.recap-copy .chapter-intro{width:100%;max-width:100%;text-wrap:wrap}
  .phone-lg{--pw:min(260px,72vw)}

  .chapter-intro{max-width:100%}
  .dual-grid{grid-template-columns:1fr;margin-top:32px;gap:12px}
  .dual-card{height:min(580px,134vw);min-height:0;max-height:none;padding:28px 24px 0}
  .dual-copy h3{font-size:28px;line-height:32px}
  .dual-copy p{font-size:17px;line-height:23px;max-width:none}
  .dual-stage .phone{--pw:min(300px,88cqi)}

  .widgets .chapter{margin-bottom:30px}
  .tile-card{flex:0 0 84vw;height:auto}
  .tile-card>img,.tile-card>.need{height:auto;aspect-ratio:744 / 660}
  .siri-answer{height:auto;aspect-ratio:744 / 660;padding:26px 24px}
  .siri-reply strong{font-size:32px;line-height:36px}

  .bento{
    margin-top:32px;gap:12px;
    grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;
    grid-template-areas:"cust" "tags" "year" "show" "rep" "imp";
  }
  .bento-tile{padding:26px 24px;min-height:240px}
  .year-wall img{width:min(100%,220px)}
  .tile-import{padding:0;grid-template-columns:1fr;min-height:0}
  .import-copy{padding:26px 24px 18px;gap:16px;justify-content:flex-start}
  .luna-stage{min-height:240px;padding:28px 20px 32px}
  .luna-count b{font-size:56px}
  .bento-copy h3{font-size:21px;line-height:25px}
  .customizer{padding-top:20px}

  .privacy-tiles{margin-top:26px}
  .privacy-tile{padding:26px 24px}
  .more-grid{margin-top:28px;grid-template-columns:1fr;gap:12px}
  .more-card{min-height:0;padding:24px}
  .more-shot img{height:180px}
  .more-shot-ipad img{height:200px}

  .finale-moon{width:60px;height:60px;margin-bottom:18px}
  .footer-inner{gap:16px}
  .footer-inner nav{margin-left:0;width:100%;flex-wrap:wrap;gap:18px}
}

@media (max-width:380px){
  h1,.chapter-head,.section-head,.finale h2{font-size:28px;line-height:32px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .milestone-track i{transform:scaleX(1);transition:none}
  .preview,.preview.is-updating{transition:none;animation:none}
  .luna-stage{transform:none;opacity:1;transition:none}
  .luna-spark,.luna-spark::before,.luna-spark::after{animation:none;opacity:.4}
  .btn,.localnav,.localnav-cta,.round-btn,.picker button{transition:none}
  .start-cursor{animation:none}
  .start-event{opacity:1;transform:none;transition:none}
  .hero-chip{animation:none}
  .hero-stars{animation:none}
  .gallery-track{scroll-behavior:auto}
}

/* ---------- shot slots ----------
   Every piece of product media on the page carries data-shot="<id>". Add
   ?slots to the URL to label them all and reveal the placeholders for footage
   we don't have yet. The shot list is ../lunadays-v3/SHOT-LIST.md.
   Placeholders are hidden by default, so this never leaks into production. */
.shot-slot{
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:22px;border-radius:20px;
  border:1.5px dashed var(--text-2);
  background:
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(128,128,128,.07) 9px 18px);
  text-align:left;
}
.shot-slot-tag{
  align-self:flex-start;padding:3px 9px;border-radius:999px;
  background:var(--gold-on-light);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.tone-dark .shot-slot-tag,.tone-dim .shot-slot-tag{background:var(--gold);color:#1d1d1f}
.shot-slot-what{font-size:14px;line-height:20px;font-weight:600}
.shot-slot-file{font-size:12px;line-height:17px;color:var(--text-2);word-break:break-all}
.tile-card .shot-slot{flex:none;height:330px;margin:0;border-radius:var(--radius) var(--radius) 0 0;border-width:0 0 1.5px}
.more-card .shot-slot{margin-top:16px;min-height:104px;padding:16px 18px}

.slots-on [data-shot]{position:relative;outline:1px dashed rgba(127,127,127,.55);outline-offset:2px}
.shot-badge{
  position:absolute;z-index:5;top:6px;left:6px;
  padding:3px 8px;border-radius:7px;
  background:rgba(0,0,0,.82);color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  pointer-events:none;white-space:nowrap;
}
.shot-badge[data-status="replace"]{background:#b8500f}
.shot-badge[data-status="upgrade"]{background:#4a5568}
.shot-badge[data-status="keep"]{background:rgba(20,90,40,.86)}
@media (max-width:734px){
  .tile-card .shot-slot{height:auto;aspect-ratio:744 / 660}
}

/* =====================================================================
   Motion layer (2026-10-01). Everything here is transform / opacity /
   filter so it stays on the compositor, and every piece of it switches
   off under Reduce Motion (bottom of this block).
   ===================================================================== */
:root{
  --spring:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.16,1,.3,1);
}

/* ---------- nav: the logo moon fills as you read down the page ---------- */
.nav-moon{flex:none;overflow:visible}
.nav-moon-disc{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.22);stroke-width:.8}
.localnav.on-light .nav-moon-disc{fill:rgba(0,0,0,.06);stroke:rgba(0,0,0,.16)}
.nav-moon-lit{fill:url(#navMoonFill);filter:drop-shadow(0 0 3px rgba(242,217,158,.55))}
.localnav-cta{transition:background .2s var(--ease),transform .3s var(--spring)}
.localnav-cta:hover{transform:scale(1.04)}

/* ---------- hero: the opening, built like the film ---------- */
.hero-title{font-size:clamp(48px,7.4vw,104px);line-height:1.02;letter-spacing:-.035em;margin-top:14px}
.h-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.h-word{display:inline-block;transform:translateY(108%) rotate(4deg);transform-origin:0 100%;
  animation:h-rise 1.1s var(--out) var(--d,0s) forwards}
@keyframes h-rise{to{transform:none}}
.hero-in{opacity:0;transform:translateY(16px);filter:blur(6px);animation:fade-up .9s var(--out) var(--d,0s) forwards}
@keyframes fade-up{to{opacity:1;transform:none;filter:none}}

/* a glint that runs across "Closer." once it lands */
.gold-glint{
  background:
    linear-gradient(105deg,transparent 38%,rgba(255,250,232,.95) 50%,transparent 62%) no-repeat,
    linear-gradient(105deg,#f5f5f7 8%,#edcf8a 48%,#b78324);
  background-size:260% 100%,100% 100%;background-position:160% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  animation:h-rise 1.1s var(--out) var(--d,0s) forwards,glint 1.6s var(--ease) calc(var(--d,0s) + .75s) forwards;
}
@keyframes glint{to{background-position:-60% 0,0 0}}

/* the phone floats up into focus; the chips pop in on a spring, then drift */
.hero-shot{--hp:0}
.hero-shot>img{opacity:0;translate:0 90px;filter:blur(10px);animation:shot-in 1.5s var(--out) .55s forwards;
  transform:translateY(calc(var(--hp) * -70px)) scale(calc(1 + var(--hp) * .035))}
@keyframes shot-in{to{opacity:1;translate:0 0;filter:none}}
.hero-chip{opacity:0;scale:.6;
  animation:chip-in .8s var(--spring) var(--cd,1.2s) forwards,chip-drift 7.2s var(--ease) infinite alternate}
.hero-chip-love{--cd:1.25s;transform:translate(calc(var(--hp) * 46px),calc(var(--hp) * -40px))}
.hero-chip-baby{--cd:1.42s;transform:translate(calc(var(--hp) * 70px),calc(var(--hp) * -10px))}
.hero-chip-trip{--cd:1.6s;transform:translate(calc(var(--hp) * -60px),calc(var(--hp) * -26px))}
@keyframes chip-in{to{opacity:1;scale:1}}
.hero-copy{transform:translateY(calc(var(--hcp,0) * -40px));opacity:calc(1 - var(--hcp,0) * .7)}

/* Watch the film */
.film-link{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--link-dark);font-size:17px;line-height:21px;letter-spacing:-.022em}
.film-link-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid currentColor;transition:transform .4s var(--spring),background .3s var(--ease)}
.film-link-icon svg{width:16px;height:16px;fill:currentColor;margin-left:2px}
.film-link:hover .film-link-icon{transform:scale(1.12);background:rgba(41,151,255,.14)}
.film-link:hover{text-decoration:underline;text-underline-offset:3px}

.film{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;
  height:100dvh;display:none;place-items:center}
.film[open]{display:grid}
.film::backdrop{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.film-frame{position:relative;width:min(1180px,92vw);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.film.is-vertical .film-frame{width:auto;height:min(86dvh,calc(92vw * 16 / 9));aspect-ratio:9/16}
.film-video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.film-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(30,30,32,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .3s var(--spring),background .2s}
.film-close:hover{transform:scale(1.08);background:rgba(60,60,64,.8)}
.film-close svg{width:18px;height:18px;stroke:#fff;stroke-width:2.2;stroke-linecap:round;fill:none}
.film[open] .film-frame{animation:film-in .7s var(--out)}
@keyframes film-in{from{opacity:0;transform:scale(.92) translateY(24px)}}

/* ---------- the moon fills: a countdown you scroll through ---------- */
.moonscroll{height:320vh;position:relative}
.moonscroll-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.moonscroll-glow{position:absolute;inset:0;pointer-events:none;opacity:var(--glow,0);
  background:radial-gradient(60% 70% at 66% 50%,rgba(214,51,92,.5),rgba(163,29,68,.18) 45%,transparent 75%);transition:opacity .2s linear}
.moonscroll-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.moonscroll-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:40px}
.moonscroll-copy .section-head{margin-top:8px}
.moonscroll-stage{position:relative;display:flex;flex-direction:column;align-items:center;margin-inline:auto;width:100%}
.ms-orb{position:relative;width:min(440px,52vh,100%);aspect-ratio:1}
.ms-moon{width:100%;height:100%;overflow:visible;transform:scale(var(--ms-kick,1));transition:transform .5s var(--spring)}
.ms-moon-disc{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.16);stroke-width:1.5}
.ms-moon-lit{fill:url(#msMoonFill);filter:drop-shadow(0 0 calc(var(--phase,0) * 70px) rgba(242,217,158,calc(.2 + var(--phase,0) * .45)))}
.ms-event{margin-top:22px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff}
.ms-emoji{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:clamp(54px,7vh,84px);line-height:1;
  transition:transform .6s var(--spring);filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.moonscroll.is-today .ms-emoji{transform:scale(1.25)}
.ms-title{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em}
.ms-date{margin-top:4px;font-size:15px;font-weight:600;color:rgba(255,255,255,.75)}
.ms-count{margin-top:10px;display:flex;flex-direction:column;align-items:center}
.ms-count b{font-family:ui-rounded,-apple-system,"SF Pro Rounded",var(--font);font-weight:700;
  font-size:clamp(64px,8.5vh,108px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:inline-block}
.ms-count b.tick{animation:tick .45s var(--out)}
@keyframes tick{from{transform:translateY(-14%);opacity:.35;filter:blur(3px)}}
.ms-count span{margin-top:4px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.ms-caption{margin-top:14px;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.12);
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.moonscroll.is-today .ms-count b{background:linear-gradient(105deg,#fff 10%,#f7e3a8 55%,#e0bd6d);-webkit-background-clip:text;background-clip:text;color:transparent}
.moonscroll.is-today .ms-moon{--ms-kick:1.04}

/* ---------- reveals: rise, settle, de-blur; chapters stagger their lines ---------- */
.reveal{opacity:0;transform:translateY(30px) scale(.985);filter:blur(6px);
  transition:opacity .9s var(--out),transform 1.1s var(--out),filter .9s var(--out)}
.reveal.in{opacity:1;transform:none;filter:none}
.chapter.reveal{opacity:1;transform:none;filter:none}
.chapter.reveal>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--out),transform 1s var(--out)}
.chapter.reveal.in>*{opacity:1;transform:none}
.chapter.reveal>*:nth-child(2){transition-delay:.09s}
.chapter.reveal>*:nth-child(3){transition-delay:.18s}
.chapter.reveal>*:nth-child(4){transition-delay:.27s}

/* privacy icons draw themselves in */
.privacy-icon{width:44px;height:44px;margin-bottom:auto;fill:none;stroke:var(--gold-on-light);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.privacy-icon path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--out) .25s}
.privacy-icon path+path{transition-delay:.7s}
.privacy-icon path+path+path{transition-delay:1s}
.privacy-tile.in .privacy-icon path{stroke-dashoffset:0}

/* cards lift under a pointer */
@media (hover:hover) and (pointer:fine){
  .tile-card,.explore-card,.more-card,.dual-card,.privacy-tile{transition:transform .55s var(--out),box-shadow .55s var(--out)}
  .tile-card:hover,.more-card:hover,.dual-card:hover,.privacy-tile:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.12)}
  .explore-card:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(0,0,0,.45)}
}

/* the closing moon breathes */
.finale-moon{animation:breathe 5s var(--ease) infinite;filter:drop-shadow(0 0 18px rgba(224,189,109,.35))}
@keyframes breathe{50%{transform:scale(1.06);filter:drop-shadow(0 0 30px rgba(224,189,109,.55))}}

@media (max-width:1068px){
  .moonscroll-inner{grid-template-columns:1fr;gap:12px;text-align:center}
  .moonscroll-copy .chapter-intro{margin-inline:auto}
  .ms-orb{width:min(360px,34vh,80vw)}
  .moonscroll-sticky{align-items:flex-start;padding-top:calc(var(--nav-h) + 4vh)}
}
@media (max-width:734px){
  .moonscroll{height:260vh}
  .moonscroll-copy .chapter-intro{display:none}
  .ms-orb{width:min(300px,32vh,78vw)}
  .ms-event{margin-top:14px}
  .film-frame{border-radius:14px}
}

@media (prefers-reduced-motion:reduce){
  .h-word,.gold-glint,.hero-in,.hero-shot>img,.hero-chip{animation:none!important;opacity:1;transform:none;translate:none;scale:1;filter:none}
  .gold-glint{background:linear-gradient(105deg,#f5f5f7 8%,#edcf8a 48%,#b78324);-webkit-background-clip:text;background-clip:text}
  .hero-copy,.hero-shot>img,.hero-chip-love,.hero-chip-baby,.hero-chip-trip{transform:none!important;opacity:1}
  .reveal,.chapter.reveal>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .privacy-icon path{stroke-dashoffset:0;transition:none}
  .moonscroll{height:auto}
  .moonscroll-sticky{position:relative;height:auto;padding:110px 0}
  .finale-moon{animation:none}
  .film[open] .film-frame{animation:none}
}
@media (prefers-reduced-motion:no-preference){
  .hero-chip-love{animation:chip-in .8s var(--spring) 1.25s forwards,chip-drift 6.6s var(--ease) -1s infinite alternate}
  .hero-chip-baby{animation:chip-in .8s var(--spring) 1.42s forwards,chip-drift 8.1s var(--ease) -2.8s infinite alternate}
  .hero-chip-trip{animation:chip-in .8s var(--spring) 1.6s forwards,chip-drift 7.4s var(--ease) -4.4s infinite alternate}
}

/* =====================================================================
   v2 sections (2026-10-01): the live list, type-your-own, one glance,
   the studio, the year, and the feature grid. Rows are EventRowView in
   dark mode, point for point; colors are EventPalette.swift.
   ===================================================================== */
.round-num{font-family:ui-rounded,"SF Pro Rounded",-apple-system,var(--font);font-variant-numeric:tabular-nums}

/* ---------- the row (EventRowView, dark) ---------- */
.lrow{--tint:#152A47;--deep:#9CC2FF;position:relative;display:flex;align-items:center;gap:13px;padding:13px 9px 13px 13px;
  border-radius:22px;background:var(--tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep) 12%,transparent);
  color:#fff;text-align:left;transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.lrow-chip{position:relative;flex:none;width:50px;height:50px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.lrow-emoji{font-size:26px;line-height:1;display:inline-block}
.lrow-badge{position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;border-radius:50%;background:var(--deep);
  box-shadow:0 0 0 1.5px var(--tint);display:grid;place-items:center}
.lrow-badge svg{width:10px;height:10px;fill:none;stroke:var(--tint);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.lrow-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lrow-text strong{font-size:17.5px;line-height:21px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow-text small{display:flex;align-items:center;gap:5px;font-size:13.5px;line-height:19px;font-weight:500;color:#8E96A6;white-space:nowrap}
.lrow-text small i{font-style:normal;width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:10px}
.lrow-cap{flex:none;min-width:66px;padding:7px 12px;border-radius:15px;background:rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;
  transition:background .45s var(--ease)}
.lrow-cap b{font-size:25px;line-height:30px;font-weight:700;color:var(--deep)}
.lrow-cap em{font-style:normal;font-size:11.5px;line-height:14px;font-weight:600;color:#8E96A6}
.lrow-cap.is-urgent,.lrow-cap.is-today{background:var(--deep)}
.lrow-cap.is-urgent b{color:#fff}.lrow-cap.is-urgent em{color:rgba(255,255,255,.85)}
.lrow-cap.is-today{padding:18px 13px}
.lrow-cap.is-today b{font-size:15px;line-height:18px;font-weight:900;letter-spacing:.6px;color:#fff}

/* ---------- 3b · your list ---------- */
.mylist{padding:120px 0}
.mylist-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:72px;align-items:center}
.mylist-try{margin-top:40px}
.mylist-try-label{font-size:14px;font-weight:600;color:var(--gold);letter-spacing:.01em}
.mylist-chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.lchip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;
  background:#2c2c2e;color:#f5f5f7;font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:background .3s var(--ease),color .3s var(--ease),transform .35s var(--spring)}
.lchip span{font-size:16px}
.lchip:hover{transform:translateY(-2px)}
.lchip:active{transform:scale(.96)}
.lchip.is-on{background:#f5f5f7;color:#000}
.live-phone{--pw:392px}
.live-screen{position:relative;height:812px;border-radius:var(--inner-r);overflow:hidden;background:#000;
  box-shadow:0 0 0 var(--bezel) #0a0a0c}
.live-status{display:flex;justify-content:space-between;align-items:center;padding:18px 34px 0;font-size:16px;font-weight:600;color:#fff}
.live-status-icons{display:flex;gap:5px}.live-status-icons i{width:17px;height:11px;border-radius:3px;background:#fff;opacity:.9}
.live-status-icons i:last-child{width:25px}
.live-head{padding:26px 22px 8px}
.live-day{font-size:13px;font-weight:600;letter-spacing:.14em;color:#8E96A6}
.live-date{font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.02em;color:#fff}
.live-stats{margin-top:14px;display:flex;gap:30px}
.live-stats span{display:flex;flex-direction:column;font-size:12.5px;color:#8E96A6;font-weight:500}
.live-stats b{font-size:24px;line-height:28px;font-weight:700;color:#fff;font-family:ui-rounded,-apple-system,var(--font)}
.live-stats b.is-teal{color:#76E0D1}
.live-rows{position:relative;padding:4px 14px 30px}
.live-label{display:flex;align-items:center;gap:8px;margin:18px 10px 9px;font-size:13px;font-weight:800;letter-spacing:.16em;color:#8E96A6}
.live-label.is-gold{color:#EBC878}
.live-label .count{padding:0 8px;border-radius:999px;background:rgba(255,255,255,.1);letter-spacing:0;font-weight:700}
.live-label .moon-dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#FCF5E3,#F2D99E 50%,#D9AD5C)}
.live-rows .lrow{margin-bottom:10px;transition:transform .55s var(--out),opacity .4s var(--ease)}
.live-rows .is-leaving{opacity:0;transform:scale(.94)}
.live-rows .is-entering{opacity:0;transform:translateY(16px) scale(.97)}

/* ---------- 4 · type your own ---------- */
.start{padding:120px 0 110px}
.maker{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.maker-preview,.maker-form{border-radius:var(--radius);background:#161618;padding:34px}
.maker-preview{display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 110% at 72% 8%,color-mix(in srgb,var(--maker-solid,#25B3A2) 28%,#161618) 0%,#101012 70%);transition:background .6s var(--ease)}
.maker-preview-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8E96A6}
.maker-row{margin-top:16px}
.maker-row .lrow{max-width:420px}
.maker-row .lrow-emoji.pop{animation:emoji-pop .55s var(--spring)}
@keyframes emoji-pop{0%{transform:scale(.4) rotate(-20deg)}100%{transform:none}}
.maker-suggest{margin-top:16px;display:flex;align-items:center;gap:8px;min-height:40px;flex-wrap:wrap}
.maker-suggest small{font-size:12.5px;color:#8E96A6;margin-right:4px}
.maker-suggest button{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.08);font-size:20px;
  transition:transform .35s var(--spring),background .2s}
.maker-suggest button:hover{transform:scale(1.12);background:rgba(255,255,255,.16)}
.maker-form{display:flex;flex-direction:column;gap:18px}
.maker-field{display:flex;flex-direction:column;gap:8px}
.maker-field span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8E96A6}
.maker-field input{height:56px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#0b0b0c;color:#fff;
  padding:0 18px;font:inherit;font-size:19px;font-weight:600;letter-spacing:-.01em;outline:none;color-scheme:dark;
  transition:border-color .25s,box-shadow .25s}
.maker-field input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(224,189,109,.18)}
.maker-split{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:end}
.maker-seg{display:inline-flex;padding:3px;border-radius:14px;background:#0b0b0c;border:1px solid rgba(255,255,255,.1);height:56px}
.maker-seg button{border:0;background:none;color:#a1a1a6;font:inherit;font-size:14px;font-weight:600;padding:0 16px;border-radius:11px;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease)}
.maker-seg button.is-on{background:#2c2c2e;color:#fff}
.maker-try{font-size:14px;line-height:22px;color:#8E96A6}
.maker-try button{border:0;background:none;padding:0;font:inherit;color:var(--link-dark);cursor:pointer}
.maker-try button:hover{text-decoration:underline}

/* ---------- 6 · one glance ---------- */
.glance{padding:120px 0}
.glance-grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.glance-tile{overflow:hidden;display:flex;flex-direction:column}
.glance-screen{position:relative;height:420px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.glance-copy{padding:24px 30px 28px}
.glance-copy h3{font-size:21px;line-height:25px;font-weight:600;letter-spacing:.011em}
.glance-copy p{margin-top:8px;font-size:15px;line-height:21px;color:var(--text-2);max-width:460px}
.lock-wall{background:radial-gradient(90% 80% at 30% 20%,#6c5ce7 0%,#3b2e9e 40%,#1a1446 100%);color:rgba(255,255,255,.9);justify-content:flex-start;padding-top:34px}
.lock-inline{font-size:15px;font-weight:600}
.lock-clock{font-family:ui-rounded,-apple-system,var(--font);font-size:96px;line-height:1;font-weight:600;letter-spacing:-2px;margin-top:2px;
  text-shadow:0 2px 18px rgba(0,0,0,.2)}
.lock-widgets{margin-top:16px;display:flex;gap:12px}
.lock-ring{position:relative;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center}
.lock-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.lock-ring circle{fill:none;stroke:rgba(255,255,255,.28);stroke-width:4}
.lock-ring .lock-ring-fill{stroke:#fff;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--out) .4s}
.glance-lock.in .lock-ring-fill{stroke-dashoffset:.64}
.lock-ring b{font-size:21px;line-height:22px;font-weight:700;font-family:ui-rounded,-apple-system,var(--font)}
.lock-ring i{font-style:normal;font-size:9px;font-weight:600;opacity:.7}
.lock-rect{width:170px;height:76px;border-radius:18px;background:rgba(255,255,255,.16);padding:12px 14px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.lock-rect strong{font-size:14px;font-weight:700}
.lock-rect span{font-size:13px;font-weight:600;opacity:.8}.lock-rect b{font-size:22px;font-family:ui-rounded,-apple-system,var(--font);opacity:1}
.live-activity{position:absolute;left:24px;right:24px;bottom:24px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:14px 16px 20px;border-radius:24px;background:rgba(18,18,22,.62);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);transform:translateY(130%);transition:transform .9s var(--spring) .6s}
.glance-lock.in .live-activity{transform:none}
.la-emoji{width:38px;height:38px;border-radius:50%;background:#0F2E2B;display:grid;place-items:center;font-size:19px}
.la-copy strong{display:block;font-size:15px;font-weight:700;color:#fff}.la-copy small{font-size:12px;color:#a1a1a6}
.la-timer{font-family:ui-rounded,-apple-system,var(--font);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;color:#EBC878}
.la-bar{position:absolute;left:16px;right:16px;bottom:9px;height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.la-bar i{position:absolute;inset:0 auto 0 0;width:55%;border-radius:2px;background:linear-gradient(90deg,#EBC878,#f7e3a8)}
.home-wall{background:linear-gradient(150deg,#1d3a8f 0%,#2f4fb3 35%,#5e9e9a 75%,#c9b49c 100%);flex-direction:row;gap:16px;padding:0 26px}
.w-small,.w-medium{background:#FAF9F4;border-radius:24px;box-shadow:0 14px 34px rgba(0,0,0,.28);color:#1d1d1f;
  opacity:0;transform:translateY(40px) scale(.85);transition:transform .9s var(--spring),opacity .5s var(--ease)}
.glance-home.in .w-small{opacity:1;transform:none;transition-delay:.25s}
.glance-home.in .w-medium{opacity:1;transform:none;transition-delay:.45s}
.w-small{width:158px;height:158px;padding:15px;box-sizing:border-box;display:flex;flex-direction:column}
.w-top{display:flex;justify-content:space-between;margin-bottom:auto}
.w-chip{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;flex:none}
.w-ring svg{width:26px;height:26px}.w-ring circle{fill:rgba(42,99,196,.08);stroke:rgba(42,99,196,.2);stroke-width:1}
.w-num{font-family:ui-rounded,-apple-system,var(--font);font-size:42px;line-height:42px;font-weight:700}
.w-small small{font-size:11px;font-weight:600;color:#8A8578}
.w-small strong{font-size:13.5px;font-weight:700;margin-top:4px}
.w-medium{width:300px;padding:8px 16px;box-sizing:border-box}
.w-line{display:flex;align-items:center;gap:10px;padding:8px 0}
.w-line+.w-line{border-top:.5px solid rgba(0,0,0,.09)}
.w-line .w-chip{width:30px;height:30px;font-size:15px}
.w-t{flex:1;display:flex;flex-direction:column}.w-t strong{font-size:13.5px;font-weight:600}.w-t small{font-size:10.5px;color:#8A8578}
.w-c{display:flex;flex-direction:column;align-items:flex-end}.w-c b{font-family:ui-rounded,-apple-system,var(--font);font-size:19px;line-height:20px;font-weight:700}
.w-c small{font-size:8.5px;font-weight:600;color:#8A8578}
.w-today{font-size:12.5px!important;letter-spacing:.8px;color:#A37524;font-weight:900!important}
.island-wall{background:radial-gradient(80% 90% at 50% 0%,#2a2a30 0%,#111114 60%);height:240px}
.island{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;border-radius:999px;background:#000;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.5);width:140px;overflow:hidden;white-space:nowrap;
  transition:width .9s var(--spring),height .9s var(--spring)}
.glance-island.in .island{width:290px;height:54px}
.island-emoji{font-size:20px}.island-label{font-size:14px;font-weight:600;opacity:.8;flex:1}
.island-timer{font-family:ui-rounded,-apple-system,var(--font);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;color:#EBC878}
.siri-wall{height:240px;background:radial-gradient(90% 90% at 50% 100%,#1b1b2e 0%,#09090c 70%)}
.siri-wall .siri-answer{color:#fff}
.glance-island .glance-copy,.glance-siri .glance-copy{padding-top:20px}
.glance-foot{margin-top:26px;font-size:15px;color:var(--text-2);text-align:center}

/* ---------- 7 · studio + year ---------- */
.yours{padding:120px 0}
.studio{margin-top:56px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0;overflow:hidden}
.studio-card{--solid:#3B7DEA;--deep2:#2A5BB5;position:relative;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;background:linear-gradient(165deg,var(--solid),var(--deep2));transition:background .6s var(--ease)}
.studio-emoji{font-size:84px;line-height:1;display:inline-block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.18))}
.studio-emoji.pop{animation:emoji-pop .6s var(--spring)}
.studio-title{margin-top:22px;font-size:30px;font-weight:700;letter-spacing:-.02em}
.studio-date{margin-top:6px;font-size:16px;font-weight:600;color:rgba(255,255,255,.82)}
.studio-count{margin-top:22px;display:flex;flex-direction:column;align-items:center}
.studio-count b{font-family:ui-rounded,-apple-system,var(--font);font-variant-numeric:tabular-nums;font-size:96px;line-height:1;font-weight:700}
.studio-count b.tick{animation:tick .45s var(--out)}
.studio-count span{margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.studio-pill{margin-top:22px;display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.12);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.studio-pill svg{width:22px;height:22px}.studio-pill circle{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.18)}
.studio-controls{padding:40px 44px;display:flex;flex-direction:column;gap:28px;justify-content:center}
.studio-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.studio-swatches,.studio-emojis{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.studio-swatches button{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .35s var(--spring),box-shadow .25s}
.studio-swatches button:hover{transform:scale(1.12)}
.studio-swatches button.is-on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c)}
.studio-emojis button{width:46px;height:46px;border-radius:14px;border:0;cursor:pointer;background:var(--soft);font-size:24px;
  transition:transform .35s var(--spring),background .2s,box-shadow .2s}
.studio-emojis button:hover{transform:scale(1.08)}
.studio-emojis button.is-on{background:#fff;box-shadow:0 0 0 2px #1d1d1f}
.studio-seg{margin-top:12px;background:var(--soft);border-color:rgba(0,0,0,.06);height:44px}
.studio-seg button{color:#6e6e73}.studio-seg button.is-on{background:#fff;color:#1d1d1f;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.studio-note{margin-top:10px;font-size:13px;line-height:18px;color:var(--text-2);min-height:36px}
.studio-facts{margin:0;border-top:1px solid var(--hair)}
.studio-facts div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:14px}
.studio-facts dt{color:var(--text-2);font-weight:600}.studio-facts dd{margin:0;text-align:right;font-weight:600}
.year{margin-top:var(--gap);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:40px;padding:44px;align-items:center}
.year-copy h3{margin-top:10px;font-size:28px;line-height:32px;font-weight:600;letter-spacing:.007em}
.year-copy p{margin-top:10px;font-size:15px;line-height:21px;color:var(--text-2)}
.year-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 18px}
.ym h4{margin:0 0 6px;font-size:12px;font-weight:700;color:#1d1d1f}
.ym.is-now h4{color:var(--gold-on-light)}
.ym-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ym-days span{position:relative;aspect-ratio:1;display:grid;place-items:center;font-size:8.5px;color:#a1a1a6;border-radius:50%}
.ym-days span.has{color:#fff;font-weight:700}
.ym-days span.has::before{content:"";position:absolute;inset:6%;border-radius:50%;background:var(--c);z-index:-1;
  transform:scale(0);transition:transform .6s var(--spring) var(--dl,0s)}
.ym-days span{z-index:0}
.year.in .ym-days span.has::before{transform:scale(1)}
.ym-days span.today{box-shadow:inset 0 0 0 1.5px var(--gold-on-light);color:var(--gold-on-light);font-weight:700}

/* ---------- 8 · and so much more ---------- */
.feature-grid{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.feature{padding:28px 26px 30px;border-radius:var(--radius);background:var(--tile);opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--out) var(--dl,0s),transform .9s var(--out) var(--dl,0s),box-shadow .5s var(--out)}
.feature-grid.in .feature{opacity:1;transform:none}
.feature svg{width:34px;height:34px;fill:none;stroke:var(--gold-on-light);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feature svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--out) calc(var(--dl,0s) + .2s)}
.feature-grid.in .feature svg *{stroke-dashoffset:0}
.feature h3{margin-top:18px;font-size:17px;line-height:21px;font-weight:600;letter-spacing:-.016em}
.feature p{margin-top:6px;font-size:14px;line-height:19px;color:var(--text-2)}
@media (hover:hover) and (pointer:fine){.feature:hover{box-shadow:0 18px 44px rgba(0,0,0,.08);transform:translateY(-4px)}}

/* ---------- responsive ---------- */
@media (max-width:1068px){
  .mylist-inner{grid-template-columns:1fr;gap:48px;justify-items:center}
  .mylist-copy{width:100%}
  .maker{grid-template-columns:1fr}
  .glance-grid{grid-template-columns:1fr}
  .studio{grid-template-columns:1fr}
  .studio-card{min-height:440px}
  .year{grid-template-columns:1fr}
  .year-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:734px){
  .mylist,.start,.glance,.yours{padding:72px 0}
  .live-phone{--pw:330px}
  .live-screen{height:690px}
  .live-rows .lrow{transform-origin:top center}
  .live-phone .lrow{gap:10px;padding:11px 7px 11px 11px}
  .live-phone .lrow-chip{width:42px;height:42px}.live-phone .lrow-emoji{font-size:22px}
  .live-phone .lrow-text strong{font-size:15.5px}.live-phone .lrow-text small{font-size:12px}
  .live-phone .lrow-cap{min-width:58px;padding:6px 10px}.live-phone .lrow-cap b{font-size:22px;line-height:26px}
  .mylist-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:0 20px 6px;scrollbar-width:none}
  .lchip{flex:none}
  .maker{margin-top:32px}
  .maker-preview,.maker-form{padding:24px 20px}
  .maker-split{grid-template-columns:1fr}
  .maker-seg{width:100%}.maker-seg button{flex:1}
  .glance-screen{height:380px}
  .lock-clock{font-size:80px}
  .home-wall{flex-direction:column;justify-content:center;gap:12px;padding:20px}
  .w-small{display:none}
  .glance-island .glance-screen,.glance-siri .glance-screen{height:200px}
  .glance-island.in .island{width:250px}
  .studio-card{min-height:380px}
  .studio-count b{font-size:76px}
  .studio-controls{padding:28px 22px}
  .year{padding:26px 20px}
  .year-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
  .feature-grid{gap:12px;margin-top:28px}
  .feature{padding:22px 18px}
  .feature h3{font-size:15px;line-height:19px}.feature p{font-size:13px;line-height:17px}
  /* privacy: centered, and the tiles read as a list rather than empty boxes */
  .privacy .column{text-align:center}
  .privacy .chapter-intro{margin-inline:auto}
  .privacy-tiles{gap:12px}
  .privacy-tile{flex-direction:row;align-items:flex-start;gap:16px;text-align:left;padding:22px 20px}
  .privacy-tile .privacy-icon{margin:2px 0 0;flex:none;width:36px;height:36px}
  .privacy-tile h3{margin-top:0;font-size:17px;line-height:21px}
  .privacy-tile p{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .feature,.w-small,.w-medium,.live-activity,.island{transition:none!important;opacity:1!important;transform:none!important}
  .feature svg *,.lock-ring-fill{transition:none!important}
  .feature svg *{stroke-dashoffset:0}
  .ym-days span.has::before{transform:scale(1);transition:none}
}
/* the preview is the payoff: give it presence */
.maker-row .lrow{zoom:1.32;max-width:430px}
.maker-preview{align-items:flex-start}
@media (max-width:734px){.maker-row .lrow{zoom:1.05}}
/* phone fixes */
.maker{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.maker-preview,.maker-form,.maker-row{min-width:0}
.mylist-inner>*{min-width:0}
@media (max-width:1068px){.maker{grid-template-columns:minmax(0,1fr)}}
@media (max-width:734px){
  .glance-lock .glance-screen{height:470px;padding-top:26px}
  .glance-lock .lock-clock{font-size:76px}
  .live-activity{left:14px;right:14px;bottom:14px}
  .privacy-tile{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px;row-gap:4px}
  .privacy-tile .privacy-icon{grid-row:span 2;margin:2px 0 0}
  .privacy-tile p{margin-top:0}
}
@media (max-width:734px){.maker-row .lrow{zoom:1;max-width:100%}}
.maker-row{align-self:stretch;width:100%}
.maker-row .lrow{width:100%;box-sizing:border-box}

/* =====================================================================
   v3 (2026-10-01): Two directions as one timeline; the Lock Screen in a
   real iPhone; Edit Widget; Apple Watch; the year, uncramped.
   ===================================================================== */

/* ---------- 2 · two directions ---------- */
.duality{padding:110px 0 120px;background:linear-gradient(180deg,#000 0%,#000 100%)}
.duality .chapter-head{font-size:clamp(32px,4vw,56px);line-height:1.08;letter-spacing:-.025em}
.timeline{position:relative;margin-top:56px;height:340px;border-radius:var(--radius);
  background:radial-gradient(60% 90% at 50% 50%,rgba(224,189,109,.10),transparent 70%),#0b0b0d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden}
.tl-axis{position:absolute;left:4%;right:4%;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.16);
  transform:scaleX(0);transition:transform 1.4s var(--out)}
.timeline.in .tl-axis{transform:none}
.tl-flow{position:absolute;top:-1px;height:4px;width:46%;opacity:.85;
  background:repeating-linear-gradient(90deg,rgba(235,200,120,.95) 0 10px,transparent 10px 34px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.tl-flow-past{left:0;animation:flow-in 1.6s linear infinite}
.tl-flow-future{right:0;animation:flow-in 1.6s linear infinite reverse}
@keyframes flow-in{from{background-position:0 0}to{background-position:34px 0}}
.tl-today{position:absolute;left:50%;top:50%;translate:-50% -22px;display:flex;flex-direction:column;align-items:center;z-index:2}
.tl-moon{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#FCF5E3,#F2D99E 50%,#D9AD5C);
  box-shadow:0 0 0 8px rgba(235,200,120,.12),0 0 40px rgba(242,217,158,.55);animation:today-pulse 3.2s var(--ease) infinite}
@keyframes today-pulse{50%{box-shadow:0 0 0 16px rgba(235,200,120,.06),0 0 60px rgba(242,217,158,.7)}}
.tl-today b{margin-top:12px;font-size:17px;font-weight:700;color:#fff}
.tl-today small{font-size:12px;font-weight:600;color:#86868b}
.tl-side{position:absolute;top:26px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#EBC878}
.tl-side span{display:block;margin-top:4px;font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;color:#86868b}
.tl-side-past{left:30px}.tl-side-future{right:30px;text-align:right}
.tl-events{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.tl-ev{position:absolute;left:var(--x);top:50%}
.tl-dot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 4px #0b0b0d,0 0 18px var(--c);transform:scale(0);transition:transform .6s var(--spring) calc(.5s + var(--i) * .12s)}
.tl-chip{position:absolute;left:0;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:9px 14px 9px 9px;border-radius:16px;
  background:rgba(28,28,30,.92);border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 34px rgba(0,0,0,.4);
  translate:-50% 0;opacity:0;scale:.7;transition:opacity .5s var(--ease) calc(.6s + var(--i) * .12s),scale .7s var(--spring) calc(.6s + var(--i) * .12s)}
.tl-ev.is-up .tl-chip{bottom:20px}.tl-ev.is-down .tl-chip{top:20px}
.tl-chip em{font-style:normal;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:15px}
.tl-chip small{display:block;font-size:11px;color:#a1a1a6}
.tl-chip strong{display:block;font-size:14.5px;font-weight:600;color:#fff}
.tl-chip strong b{font-family:ui-rounded,-apple-system,var(--font);font-variant-numeric:tabular-nums}
.timeline.in .tl-dot{transform:none}
.timeline.in .tl-chip{opacity:1;scale:1}
.duality .dual-grid{margin-top:var(--gap)}
.duality .dual-card{background:#161618;color:#f5f5f7;--text-2:#86868b;height:auto;min-height:0;max-height:none;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.duality .dual-copy{padding:40px 0 40px 38px}
.duality .dual-kicker{color:#EBC878}
.duality .dual-stage{margin:0;padding:34px 34px 0;align-self:end;overflow:hidden;height:440px;align-items:flex-start}
.duality .dual-phone{--pw:230px}
.duality .dual-phone img{display:block;width:100%;height:auto;border-radius:var(--inner-r)}

/* ---------- glance: the Lock Screen inside a real iPhone ---------- */
.glance-stage{background:linear-gradient(180deg,#eceef3,#e2e5ec);justify-content:flex-start;padding-top:34px;overflow:hidden}
.glance-phone{--pw:330px}
.glance-phone .lock-wall{position:relative;height:520px;border-radius:var(--inner-r) var(--inner-r) 0 0;overflow:hidden;padding-top:46px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.glance-island-notch{position:absolute;top:11px;left:50%;translate:-50% 0;width:96px;height:28px;border-radius:999px;background:#000}
.glance-phone .lock-clock{font-size:78px}
.glance-phone .lock-inline{font-size:13.5px}
.glance-phone .lock-widgets{gap:10px}
.glance-phone .lock-ring{width:68px;height:68px}
.glance-phone .lock-rect{width:150px;height:68px;padding:10px 12px}
.glance-phone .live-activity{left:12px;right:12px;bottom:auto;top:252px;padding:12px 13px 18px;border-radius:22px;gap:10px}
.glance-phone .la-emoji{width:34px;height:34px;font-size:17px}
.glance-phone .la-copy strong{font-size:14px}.glance-phone .la-copy small{font-size:11px}
.glance-phone .la-timer{font-size:22px}
.glance-phone .la-bar{left:13px;right:13px;bottom:8px}
.glance-lock .glance-screen{height:440px}

/* ---------- glance: Edit Widget ---------- */
.home-wall{background:radial-gradient(90% 90% at 20% 10%,#2c55c9 0%,#1a2f7a 45%,#0d1640 100%);flex-direction:row;gap:28px;padding:0 30px;justify-content:center}
.wd-widget{position:relative;width:170px;height:170px;flex:none;border-radius:26px;padding:16px;box-sizing:border-box;color:#fff;
  background:rgba(14,22,38,.92);box-shadow:0 18px 40px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.wd-face{position:absolute;inset:16px;display:flex;flex-direction:column;transition:opacity .45s var(--ease),transform .55s var(--out)}
.wd-face.is-out{opacity:0;transform:translateY(10px) scale(.96)}
.wd-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto}
.wd-chip{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px}
.wd-ring{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;opacity:.5}
.wd-num{font-family:ui-rounded,-apple-system,var(--font);font-size:44px;line-height:44px;font-weight:700}
.wd-big{font-family:ui-rounded,-apple-system,var(--font);font-size:23px;line-height:26px;font-weight:900;letter-spacing:.6px}
.wd-unit{font-size:11px;font-weight:600;color:#8E96A6}
.wd-title{margin-top:5px;font-size:13.5px;font-weight:700;line-height:16px}
.wd-list{display:flex;flex-direction:column;justify-content:center;gap:10px;height:100%}
.wd-list div strong{display:block;font-size:13px;line-height:15px;font-weight:600}
.wd-list div span{display:block;margin-top:2px;font-family:ui-rounded,-apple-system,var(--font);font-size:11.5px;font-weight:600}
.wd-sheet{width:250px;border-radius:22px;padding:14px;background:rgba(245,245,247,.96);color:#1d1d1f;box-shadow:0 18px 40px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:6px}
.wd-sheet-title{font-size:13px;font-weight:700;text-align:center;margin-bottom:4px}
.wd-opt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:0;background:#fff;cursor:pointer;text-align:left;
  transition:box-shadow .3s var(--ease),transform .3s var(--spring)}
.wd-opt:hover{transform:translateY(-1px)}
.wd-opt strong{display:block;font-size:13.5px;font-weight:600}
.wd-opt small{display:block;font-size:12px;color:#6e6e73}
.wd-radio{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #c7c7cc;transition:box-shadow .3s var(--ease)}
.wd-opt.is-on{box-shadow:0 0 0 2px #0071e3}
.wd-opt.is-on .wd-radio{box-shadow:inset 0 0 0 5px #0071e3}

/* ---------- glance: Apple Watch ---------- */
.watch-wall{height:240px;background:radial-gradient(90% 90% at 50% 100%,#1b2440 0%,#0a0c12 70%)}
.watch{position:relative;width:132px;height:160px;border-radius:40px;padding:6px;
  background:linear-gradient(145deg,#d8d6cf,#8b8983 45%,#56554f 75%,#a09e97);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.watch::before,.watch::after{content:"";position:absolute;left:24px;right:24px;height:60px;background:linear-gradient(180deg,#191b20,#2a2d34);z-index:-1}
.watch::before{top:-52px;border-radius:14px 14px 0 0}.watch::after{bottom:-52px;border-radius:0 0 14px 14px;background:linear-gradient(0deg,#191b20,#2a2d34)}
.watch-crown{position:absolute;right:-7px;top:38px;width:8px;height:26px;border-radius:4px;background:linear-gradient(90deg,#6d6c66,#c9c7c0,#6d6c66)}
.watch-button{position:absolute;right:-5px;top:78px;width:5px;height:30px;border-radius:3px;background:#77756f}
.watch-screen{position:relative;height:100%;border-radius:34px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,#152A47 0%,#000 80%);display:flex;flex-direction:column;align-items:center;padding-top:30px;box-sizing:border-box}
.watch-back{position:absolute;left:10px;top:9px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.watch-back svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round}
.watch-time{position:absolute;right:14px;top:10px;font-size:11px;font-weight:600}
.watch-emoji{font-size:18px;line-height:1}
.watch-title{margin-top:3px;font-size:10.5px;font-weight:600}
.watch-num{font-size:32px;line-height:34px;font-weight:700}
.watch-unit{font-size:9.5px;font-weight:600;color:#9CC2FF}
.watch-date{margin-top:3px;font-size:8.5px;color:rgba(255,255,255,.6)}

/* ---------- the year, uncramped ---------- */
.year{grid-template-columns:1fr;gap:28px}
.year-copy{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.year-copy h3{margin-top:0}
.year-copy p{margin-top:0}
.year-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 22px}
.ym{min-width:0}
.ym-days{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px 1px}
.ym-days span{font-size:10px;line-height:1;min-width:0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ym-days span.has{font-size:9.5px}

@media (max-width:1068px){
  .duality .dual-grid{grid-template-columns:1fr}
  .year-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:734px){
  .duality{padding:72px 0 80px}
  .timeline{margin-top:32px;height:300px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .timeline::-webkit-scrollbar{display:none}
  .tl-axis,.tl-events,.tl-side,.tl-today{min-width:0}
  .timeline>*{width:auto}
  .tl-track{position:relative;width:980px;height:100%}
  .duality .dual-card{grid-template-columns:1fr;gap:0}
  .duality .dual-copy{padding:28px 24px 0}
  .duality .dual-stage{height:380px;padding:24px 0 0;justify-content:center}
  .duality .dual-phone{--pw:240px}
  .glance-lock .glance-screen{height:420px}
  .glance-phone{--pw:300px}
  .home-wall{flex-direction:column;gap:16px;padding:24px 16px;height:auto!important;min-height:440px}
  .wd-sheet{width:100%;max-width:300px}
  .year-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}
  .ym-days span{font-size:8.5px}
  .year-copy{display:block}
  .year-copy p{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .tl-axis,.tl-dot,.tl-chip{transition:none!important;transform:none!important;opacity:1!important;scale:1!important}
  .tl-flow,.tl-moon{animation:none}
  .wd-face{transition:none}
}
.tl-track{position:relative;height:100%;width:100%}
@media (max-width:734px){.tl-track{width:1000px}}
.duality .dual-stage{height:auto;padding:34px 34px 34px;align-self:center}
.watch{isolation:isolate;z-index:0;scale:1.22}
@media (max-width:734px){.duality .dual-stage{height:auto;padding:24px 0 28px}}
.watch{height:176px;scale:1.15}
.watch-screen{padding-top:28px}
.watch-wall{height:270px}
@media (max-width:734px){.watch-wall{height:250px}}
/* each row of tiles shares one picture height */
.glance-lock .glance-screen,.glance-home .glance-screen{height:460px}
.glance-island .glance-screen,.glance-watch .glance-screen{height:280px}
@media (max-width:734px){
  .glance-lock .glance-screen{height:420px}
  .glance-home .glance-screen{height:auto}
  .glance-island .glance-screen{height:200px}
  .glance-watch .glance-screen{height:250px}
}

/* =====================================================================
   v4 (2026-10-01): true-scale iPhone canvases. Each mock is laid out at
   440pt — the iPhone 17 Pro Max width the App Store screenshots use — with
   the app's own point sizes (EventListView, EventRowView, WidgetFaces,
   FinalDayLiveActivity), then zoomed as one piece to fit its frame, the way
   a screenshot would be. script.js sets --z from the frame's real width.
   ===================================================================== */
.ios-screen{position:relative;border-radius:var(--inner-r) var(--inner-r) 0 0;overflow:hidden;box-shadow:0 0 0 var(--bezel) #0a0a0c;background:#000}
.ios-canvas{width:440px;zoom:var(--z,.74);color:#fff;font-family:var(--font)}
.ios-status{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 34px 0 52px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.ios-status-icons{display:flex;align-items:center;gap:7px}
.ios-status-icons i{display:block;background:#fff}
.ios-status-icons .sig{width:18px;height:12px;-webkit-mask:linear-gradient(90deg,#000 0 3px,transparent 3px 5px,#000 5px 8px,transparent 8px 10px,#000 10px 13px,transparent 13px 15px,#000 15px);mask:linear-gradient(90deg,#000 0 3px,transparent 3px 5px,#000 5px 8px,transparent 8px 10px,#000 10px 13px,transparent 13px 15px,#000 15px);clip-path:polygon(0 75%,25% 55%,50% 30%,75% 0,100% 0,100% 100%,0 100%)}
.ios-status-icons .wifi{width:16px;height:12px;clip-path:polygon(50% 100%,0 30%,15% 15%,50% 0,85% 15%,100% 30%)}
.ios-status-icons .bat{width:27px;height:13px;border-radius:4px}
.ios-island{position:absolute;top:11px;left:50%;translate:-50% 0;width:126px;height:37px;border-radius:999px;background:#000;z-index:2}

/* ---------- the live list, at the app's size ---------- */
.live-screen{height:812px}
.live-screen .ios-canvas{--z:.875}
.live-head{padding:6px 16px 0}
.live-head-row{display:flex;justify-content:space-between;align-items:flex-start}
.live-day{font-size:11px;font-weight:700;letter-spacing:1.4px;color:#8A92A2}
.live-date{margin-top:1px;font-size:24px;line-height:29px;font-weight:700;letter-spacing:-.3px;color:#fff}
.live-buttons{display:flex;gap:8px;margin-top:2px}
.live-buttons span{width:40px;height:40px;border-radius:50%;background:#1c1c1e;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12);display:grid;place-items:center}
.live-buttons svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round}
.live-stats{margin-top:12px;gap:34px}
.live-stats span{font-size:10.5px;font-weight:600;color:#8A92A2}
.live-stats b{font-size:21px;line-height:26px}
.live-chipbar{margin-top:14px;padding:0 16px;display:flex;gap:8px;white-space:nowrap;overflow:hidden}
.live-chipbar span{flex:none;height:36px;padding:0 14px;border-radius:999px;background:#1c1c1e;display:flex;align-items:center;font-size:15px;font-weight:600;
  transition:background .3s var(--ease),color .3s var(--ease)}
.live-chipbar span.is-on{background:#fff;color:#000}
.live-rows{padding:2px 16px 30px}
.live-label{margin:20px 8px 9px;font-size:12px;font-weight:900;letter-spacing:1.1px}
.live-label .count{font-size:12px;padding:0 7px}
.live-label .moon-dot{width:13px;height:13px}
/* rows are already in points; undo the old phone shrink inside canvases */
.ios-canvas .lrow{gap:13px;padding:13px 9px 13px 13px;border-radius:22px}
.ios-canvas .lrow-chip{width:50px;height:50px}
.ios-canvas .lrow-emoji{font-size:26px}
.ios-canvas .lrow-text strong{font-size:17.5px;line-height:21px}
.ios-canvas .lrow-text small{font-size:13.5px;line-height:18px}
.ios-canvas .lrow-cap{min-width:66px;padding:7px 12px}
.ios-canvas .lrow-cap b{font-size:25px;line-height:30px}
.ios-canvas .lrow-cap em{font-size:11.5px;line-height:14px}
.ios-canvas .lrow-cap.is-today{padding:7px 12px}
.ios-canvas .lrow-cap.is-today b{font-size:15px;line-height:18px;letter-spacing:.6px}

/* ---------- Lock Screen + Live Activity, at true size ---------- */
.lock-canvas{position:relative;height:640px;padding-top:66px;box-sizing:border-box;text-align:center;
  background:
    radial-gradient(70% 55% at 85% 18%,rgba(140,120,255,.55),transparent 70%),
    radial-gradient(90% 70% at 15% 75%,rgba(70,50,190,.7),transparent 70%),
    linear-gradient(170deg,#3b2fa8 0%,#2a1f86 40%,#140f4c 75%,#0a0828 100%)}
.lk-inline{font-size:18px;font-weight:600;color:rgba(255,255,255,.92)}
.lk-inline span{font-size:16px}
.lk-clock{margin-top:-4px;font-family:ui-rounded,-apple-system,var(--font);font-size:122px;line-height:1;font-weight:600;letter-spacing:-3px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(225,220,255,.72));-webkit-background-clip:text;background-clip:text;color:transparent}
.lk-row{margin-top:10px;display:flex;justify-content:center;align-items:center;gap:34px}
.lk-rect{text-align:left;display:flex;flex-direction:column;gap:1px}
.lk-rect strong{font-size:17px;font-weight:600;color:rgba(255,255,255,.92)}
.lk-rect strong span{font-size:15px}
.lk-rect b{font-size:22px;font-weight:700;color:#fff}
.lk-ring{position:relative;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center}
.lk-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.lk-ring circle{fill:none;stroke:rgba(255,255,255,.28);stroke-width:5.5}
.lk-ring .lock-ring-fill{stroke:#fff;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--out) .4s}
.glance-lock.in .lk-ring .lock-ring-fill{stroke-dashoffset:.64}
.lk-ring b{font-family:ui-rounded,-apple-system,var(--font);font-size:24px;line-height:24px;font-weight:700}
.lk-ring i{font-style:normal;font-size:11px;font-weight:600;opacity:.75}
.la{margin:26px 14px 0;padding:15px 20px;border-radius:26px;text-align:left;
  background:rgba(8,8,12,.74);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 10px 30px rgba(0,0,0,.25);
  transform:translateY(40px);opacity:0;transition:transform .9s var(--spring) .6s,opacity .5s var(--ease) .6s}
.glance-lock.in .la{transform:none;opacity:1}
.la-row{display:flex;align-items:center;gap:12px}
.la-e{font-size:25px;line-height:1}
.la-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.la-t strong{font-size:15px;font-weight:600;color:#fff}
.la-t small{font-size:12px;font-weight:500;color:#76E0D1}
.la-clock{font-size:38px;font-weight:200;letter-spacing:-.5px;color:#fff;font-variant-numeric:tabular-nums}
.la-progress{margin-top:12px;display:flex;align-items:center;gap:9px}
.la-progress span{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden;position:relative}
.la-progress i{position:absolute;inset:0 auto 0 0;width:55%;border-radius:4px;background:linear-gradient(90deg,rgba(118,224,209,.55),#76E0D1)}
.la-progress em{font-style:normal;font-size:13px;line-height:1}

/* ---------- Home Screen + Edit Widget, at true size ---------- */
.home-canvas{position:relative;height:640px;
  background:
    radial-gradient(70% 45% at 80% 22%,rgba(64,140,255,.75),transparent 70%),
    radial-gradient(80% 50% at 0% 95%,rgba(31,143,138,.75),transparent 70%),
    linear-gradient(165deg,#1d3fa0 0%,#162f7d 45%,#0b1a4a 80%)}
.hs-row{margin-top:14px;padding:0 27px;display:flex;gap:20px;align-items:flex-start}
.hs-slot{display:flex;flex-direction:column;align-items:center}
.hs-label{margin-top:6px;font-size:12px;font-weight:500;color:rgba(255,255,255,.92)}
.hs-wide{margin-top:18px;padding:0 27px}
.home-canvas .wd-widget{width:170px;height:170px;border-radius:23px;padding:0;background:rgba(14,22,38,.86);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.home-canvas .wd-face{inset:16px}
.home-canvas .wd-chip{width:37px;height:37px;font-size:19px}
.home-canvas .wd-ring{width:27px;height:27px}
.home-canvas .wd-num{font-size:45px;line-height:46px}
.home-canvas .wd-big{font-size:25px;line-height:28px}
.home-canvas .wd-unit{font-size:12px}
.home-canvas .wd-title{margin-top:5px;font-size:14.5px;line-height:17px}
.home-canvas .wd-list{gap:12px}
.home-canvas .wd-list div strong{font-size:14px;line-height:16px}
.home-canvas .wd-list div span{font-size:12px}
.home-canvas .wd-sheet{width:196px;padding:12px;gap:6px;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.home-canvas .wd-sheet-title{font-size:14px}
.home-canvas .wd-opt{padding:9px 10px;gap:10px;border-radius:13px}
.home-canvas .wd-opt strong{font-size:13.5px}
.home-canvas .wd-opt small{font-size:11.5px}
.home-canvas .wd-radio{width:17px;height:17px}
.wm{width:386px;height:170px;border-radius:23px;box-sizing:border-box;padding:9px 16px;display:flex;flex-direction:column;justify-content:center;
  background:rgba(14,22,38,.86);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.wm-line{display:flex;align-items:center;gap:11px;padding:7px 0}
.wm-line+.wm-line{border-top:.5px solid rgba(255,255,255,.09)}
.wm-chip{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;flex:none}
.wm-t{flex:1;display:flex;flex-direction:column}
.wm-t strong{font-size:13.5px;font-weight:600}
.wm-t small{font-size:10.5px;font-weight:500;color:#8E96A6}
.wm-c{display:flex;flex-direction:column;align-items:flex-end}
.wm-c b{font-family:ui-rounded,-apple-system,var(--font);font-size:19px;line-height:20px;font-weight:700}
.wm-c small{font-size:8px;font-weight:600;color:#8E96A6}
.wm-today{font-size:12px!important;font-weight:900!important;letter-spacing:.8px;color:#EBC878}
.glance-home .glance-stage{background:linear-gradient(180deg,#eceef3,#e2e5ec)}
.home-canvas .wd-big{font-size:21px;line-height:26px;letter-spacing:.4px;white-space:nowrap}

/* =====================================================================
   v5 (2026-10-01): widgets drawn to WidgetFaces.swift, in the colors the
   widget gallery actually renders; phones rise out of the card's bottom
   edge so the frame never just stops.
   ===================================================================== */
.glance-tile .glance-copy{order:-1;padding:28px 30px 4px}
.glance-lock .glance-screen,.glance-home .glance-screen{height:500px;justify-content:flex-end;padding-top:0;background:none}
.glance-lock,.glance-home{background:linear-gradient(180deg,#fff 0%,#fff 30%,#eef0f4 100%)}
.glance-phone{margin-bottom:-120px}
.glance-island .glance-screen,.glance-watch .glance-screen{height:320px}

.home-canvas{height:700px}
.hs-grid{margin-top:12px;padding:0 27px;display:grid;grid-template-columns:170px 170px;column-gap:46px;row-gap:20px}
.hs-wide{grid-column:1 / -1}
.hs-slot{display:flex;flex-direction:column;align-items:center;margin-top:0}
.hs-label{margin-top:7px;font-size:12px;font-weight:600;color:rgba(255,255,255,.95);text-shadow:0 1px 4px rgba(0,0,0,.25)}
/* the widget surface, sampled from the iOS widget gallery */
.lw{position:relative;box-sizing:border-box;border-radius:22px;color:#fff;overflow:hidden;
  background:linear-gradient(180deg,#2b313f 0%,#1a2131 100%);box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 0 0 .5px rgba(255,255,255,.06)}
.lw-small{width:170px;height:170px;padding:16px;display:flex;flex-direction:column}
.lw-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto}
.lw-chip{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;line-height:1}
.lw-ring{width:25px;height:25px;border-radius:50%;background:color-mix(in srgb,var(--deep) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep) 20%,transparent)}
.lw-num{font-family:ui-rounded,-apple-system,var(--font);font-size:42px;line-height:44px;font-weight:700;letter-spacing:-.5px}
.lw-unit{font-size:11px;font-weight:600;color:#8E96A6;margin-top:-1px}
.lw-title{margin-top:5px;font-size:13.5px;line-height:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-list{justify-content:center;gap:12px}
.lw-list div strong{display:block;font-size:14px;line-height:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-list div span{display:block;margin-top:2px;font-family:ui-rounded,-apple-system,var(--font);font-size:12px;line-height:14px;font-weight:600;white-space:nowrap}
.lw-medium{width:386px;height:170px;padding:0 16px;display:flex;flex-direction:column;justify-content:center}
.lm-line{position:relative;display:flex;align-items:center;gap:11px;padding:7px 0}
.lm-line+.lm-line::before{content:"";position:absolute;top:0;left:41px;right:0;height:.5px;background:#333a47}
.lm-chip{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;flex:none}
.lm-t{flex:1;min-width:0;display:flex;flex-direction:column}
.lm-t strong{font-size:13.5px;line-height:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-t small{font-size:10.5px;line-height:13px;font-weight:500;color:#8E96A6}
.lm-c{display:flex;flex-direction:column;align-items:flex-end}
.lm-c b{font-family:ui-rounded,-apple-system,var(--font);font-size:19px;line-height:21px;font-weight:700}
.lm-c small{font-size:8px;line-height:10px;font-weight:600;color:#8E96A6}
/* the three widgets settle in one after another */
.glance-home .hs-slot{opacity:0;transform:translateY(26px) scale(.94);transition:opacity .6s var(--ease) calc(.3s + var(--d) * .14s),transform .9s var(--spring) calc(.3s + var(--d) * .14s)}
.glance-home.in .hs-slot{opacity:1;transform:none}

@media (max-width:734px){
  .glance-lock .glance-screen,.glance-home .glance-screen{height:440px}
  .glance-tile .glance-copy{padding:24px 22px 4px}
  .glance-island .glance-screen{height:220px}
  .glance-watch .glance-screen{height:280px}
}
@media (prefers-reduced-motion:reduce){.glance-home .hs-slot{opacity:1;transform:none;transition:none}}
.glance-lock .glance-screen,.glance-home .glance-screen{height:auto;padding-top:26px}
.home-canvas,.lock-canvas{height:640px}
.glance-phone{margin-bottom:-96px}
@media (max-width:734px){.glance-lock .glance-screen,.glance-home .glance-screen{height:auto;padding-top:20px}.glance-phone{margin-bottom:-80px}}