/* ═══════════════════════════════════════════════════════════════════════════
   Oreo — site stylesheet

   The page is built in bands. Each section declares a tone — a pale tint for
   its background and one saturated accent for everything drawn inside it —
   and the components below read those two variables rather than naming any
   colour themselves. One rule per component serves every band, and a section
   changes its entire palette by changing one attribute in the markup.

   Black at both ends: the header is shaped like the cutout it sells, the
   footer is a solid slab, and the colour lives in between. That is the whole
   layout idea, and it is the product's name.

   The product shots are drawn, not photographed. Screenshots of a notch app
   are a bad deal: the framebuffer includes the pixels *behind* the physical
   cutout, real captures carry real to-dos, and a static PNG can't show a live
   activity arriving. Everything here is built from the same measurements the
   app uses, so it can animate and stays sharp at any size.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper:#FBF7EF;          /* the default band */
  --card:#FFFDF8;           /* anything raised off a band */
  --ink:#15120F;
  --ink-2:#463F37;
  --ink-3:#756B60;
  --ink-4:#9C9284;
  --black:#0A0908;

  /* Lines are alpha, not a colour, so one value works on every band. */
  --line:rgba(21,18,15,.11);
  --line-2:rgba(21,18,15,.20);
  --track:rgba(21,18,15,.13);

  --max:1120px;
  --ease:cubic-bezier(.32,.72,0,1);   /* the spring macOS uses for the notch */

  /* Set per section by [data-tone]; these are the defaults. */
  --tint:var(--paper);
  --accent:var(--ink);
  --accent-soft:rgba(21,18,15,.08);

  /* Legacy aliases — the other pages are written against these. */
  --ink-1000:var(--black); --ink-950:var(--paper); --ink-900:var(--card);
  --ink-850:var(--line); --ink-800:var(--line); --ink-700:var(--line-2);
  --ink-600:var(--line-2);
  --stone-100:var(--ink); --stone-200:var(--ink-2); --stone-300:var(--ink-3);
  --stone-400:var(--ink-4);
  --bone:var(--ink); --paper-2:var(--card); --paper-3:var(--accent-soft);
  --sage:#43704A; --amber:#A96F12;
}

/* ── Tones ──────────────────────────────────────────────────────────────────
   Pale enough that ink type keeps its contrast; the accent carries the hue. */
[data-tone="butter"]{--tint:#FBEFD8; --accent:#A96F12; --accent-soft:rgba(169,111,18,.13)}
[data-tone="sage"]  {--tint:#E8F0E3; --accent:#43704A; --accent-soft:rgba(67,112,74,.13)}
[data-tone="teal"]  {--tint:#D5E8E5; --accent:#0B6058; --accent-soft:rgba(11,96,88,.14)}
[data-tone="plum"]  {--tint:#F1E7F4; --accent:#7A3E8E; --accent-soft:rgba(122,62,142,.13)}
[data-tone="sky"]   {--tint:#E6ECF8; --accent:#2F52AE; --accent-soft:rgba(47,82,174,.13)}

/* ── Dark scope ─────────────────────────────────────────────────────────────
   The screen mock, the notch, the gallery pills and the ink band all draw on
   black. Re-point the tokens and every component inside comes out right
   without a second set of rules. */
.screen, .mini-notch, .pill .lid, .slab, [data-tone="ink"], footer {
  --paper:#0C0A09; --card:#161311;
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.20);
  --track:rgba(255,255,255,.20);
  --ink:#F6F2EA; --ink-2:#D5CCC2; --ink-3:#A79D92; --ink-4:#867C71;
  --bone:#F1EADD;
  --stone-100:var(--ink); --stone-200:var(--ink-2);
  --stone-300:var(--ink-3); --stone-400:var(--ink-4);
}
[data-tone="ink"]{--tint:#131110; --accent:#E9C68B; --accent-soft:rgba(233,198,139,.15)}

*,*::before,*::after{box-sizing:border-box}
/* `clip`, never `hidden`. Both stop the sideways drag, but `hidden` makes this
   element a scroll container, and `position:sticky` sticks to its nearest
   scrolling ancestor — so the header silently stopped sticking and scrolled
   away with the page. `clip` creates no scroll container and sticky survives. */
html{overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
img{max-width:100%}
code{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:.92em; overflow-wrap:anywhere}
::selection{background:var(--accent); color:var(--card)}

.wrap{max-width:var(--max); margin:0 auto; padding:0 26px}
.narrow{max-width:770px}
h1,h2,h3{color:var(--ink); line-height:1.06; letter-spacing:-.032em; margin:0}
h1{font-size:clamp(44px,7.4vw,82px); font-weight:760}
h1 .light{font-weight:400; color:var(--ink-3); letter-spacing:-.026em}
h2{font-size:clamp(29px,4.3vw,46px); font-weight:730}
h3{font-size:17px; font-weight:660; letter-spacing:-.015em}
p{margin:0}
.acc{color:var(--accent); white-space:nowrap}

/* A rule and a monospaced tag, rather than a pill. */
.eyebrow{
  display:inline-flex; align-items:center; gap:11px; margin:0;
  font:620 11px/1 "SF Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{content:""; width:22px; height:2px; background:currentColor; border-radius:2px; flex:none}
.lede{font-size:clamp(17px,2.1vw,21px); color:var(--ink-3); max-width:660px; margin:22px auto 0; line-height:1.55}
.dim{color:var(--ink-4)}

section{padding:104px 0; background:var(--tint)}
section + section{border-top:1px solid var(--line)}
section[data-tone]{border-top:0}
section[data-tone] + section{border-top:0}
section.flush{border-top:0}

/* ── Header, shaped like the thing it sells ─────────────────────────────── */
header{position:sticky; top:0; z-index:60; display:flex; justify-content:center; pointer-events:none}
/* At rest there is nothing behind the notch, so it reads as a cutout in the
   page itself. Once the page has moved, content would otherwise run under the
   links, so a frosted strip fades in behind it — the bar is only drawn when it
   has a job to do. `clip` on <html> above is what keeps the stickiness this
   depends on. */
header::before{
  content:""; position:absolute; inset:0 0 -34px; z-index:0;
  /* Light. The job is to keep text off the links, not to frost the page over —
     at full strength the headline underneath turned to mud. */
  background:linear-gradient(to bottom,
             color-mix(in srgb, var(--paper) 52%, transparent), transparent);
  -webkit-backdrop-filter:saturate(115%) blur(6px);
  backdrop-filter:saturate(115%) blur(6px);
  /* No border. A hairline draws a lid across the page and fights the cutout the
     notch is pretending to be; the strip fades out instead, so there is no edge
     to notice. It extends below the header so the fade has somewhere to go. */
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 38%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 38%, transparent 100%);
  opacity:0; transition:opacity .3s var(--ease);
}
header.scrolled::before{opacity:1}
/* Above the strip, or the pill and its fillets would be frosted over. */
.notchbar{z-index:1}
/* Nothing to fade if the reader asked for less motion — it just appears. */
@media (prefers-reduced-motion:reduce){ header::before{transition:none} }
/* `position:relative` matters: the fillets below are absolute, and without a
   positioned bar they resolve against the full-width sticky header — which
   pins them to the edges of the viewport and pushes the page 12px sideways. */
.notchbar{
  position:relative; pointer-events:auto; display:flex; align-items:center; gap:22px;
  background:var(--black); color:#F6F2EA;
  padding:10px 24px; border-radius:0 0 19px 19px; font-size:13px;
}
.notchbar::before,.notchbar::after{
  content:""; position:absolute; top:0; width:12px; height:12px; background:var(--black);
}
.notchbar::before{left:-12px; -webkit-mask:radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px); mask:radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px)}
.notchbar::after{right:-12px; -webkit-mask:radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px); mask:radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px)}
.notchbar .brand{display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.01em; color:#F6F2EA}
.notchbar .brand .mark{width:17px; height:17px; border-radius:5px; background:#F1EADD; position:relative}
.notchbar .brand .mark::after{
  content:""; position:absolute; left:50%; top:2px; transform:translateX(-50%);
  width:9px; height:3.5px; border-radius:0 0 2px 2px; background:var(--black);
}
.notchbar a{color:rgba(246,242,234,.60); font-size:13px}
.notchbar a:hover,.notchbar a[aria-current]{color:#F6F2EA; text-decoration:none}
@media (max-width:600px){ .notchbar{gap:14px; padding:9px 16px; font-size:12px} }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:36px}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
  border-radius:14px; font-weight:660; font-size:15px; letter-spacing:-.01em;
  transition:transform .16s var(--ease), background .16s ease, box-shadow .16s ease;
}
.btn:hover{transform:translateY(-2px); text-decoration:none}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}
.btn-primary{background:var(--ink); color:var(--card); box-shadow:0 8px 20px rgba(21,18,15,.18)}
.btn-primary:hover{box-shadow:0 14px 30px rgba(21,18,15,.24)}
.btn-primary svg{fill:currentColor; stroke:none}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{background:var(--card); box-shadow:inset 0 0 0 1.5px var(--ink)}
.tag{
  background:var(--accent); color:#fff; font:620 12px/1 "SF Mono",ui-monospace,Menlo,monospace;
  padding:5px 9px; border-radius:7px; letter-spacing:.02em;
}
.meta{margin-top:18px; font-size:12.5px; color:var(--ink-4);
      font-family:"SF Mono",ui-monospace,Menlo,monospace; letter-spacing:-.01em}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden}
.hero::before{  /* a wash of every band's accent, behind the product */
  content:""; position:absolute; left:50%; top:44%; width:min(1500px,150vw); height:900px;
  transform:translateX(-50%); pointer-events:none; z-index:0; opacity:.5;
  background:
    radial-gradient(28% 40% at 18% 42%, rgba(169,111,18,.30) 0%, transparent 70%),
    radial-gradient(26% 38% at 40% 66%, rgba(15,107,98,.24) 0%, transparent 70%),
    radial-gradient(30% 42% at 64% 40%, rgba(122,62,142,.26) 0%, transparent 70%),
    radial-gradient(26% 40% at 84% 62%, rgba(47,82,174,.24) 0%, transparent 70%);
  filter:blur(28px);
}
.hero > *{position:relative; z-index:1}

/* ═══ THE SCREEN ════════════════════════════════════════════════════════════
   A MacBook lid: wallpaper, menu bar, dock, and a notch drawn to the
   proportions of a real one. The notch is one element; every state below just
   changes its width and height and lets the spring do the work.
   ══════════════════════════════════════════════════════════════════════════ */
.screen{
  position:relative; margin:0 auto; max-width:1020px;
  border-radius:22px; overflow:hidden; isolation:isolate; cursor:pointer;
  box-shadow:0 2px 4px rgba(21,18,15,.10), 0 34px 70px -26px rgba(21,18,15,.40);
  transition:background .5s ease;
}
.screen::after{  /* the sheen across a glossy panel */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:30;
  background:linear-gradient(102deg, transparent 38%, rgba(255,255,255,.05) 50%, transparent 62%);
}
.screen::before{  /* ground shadow under the ridges */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(62% 42% at 10% 84%, rgba(0,0,0,.42) 0%, transparent 72%),
    radial-gradient(52% 38% at 88% 88%, rgba(0,0,0,.34) 0%, transparent 72%);
}
/* Four wallpapers, cycled by clicking the desktop. */
.screen[data-wall="0"]{background:
  radial-gradient(78% 60% at 20% 104%, #2FB6A8 0%, transparent 58%),
  radial-gradient(64% 56% at 84% 6%, #2A5CA8 0%, transparent 60%),
  linear-gradient(163deg,#17507E 0%,#123A5E 48%,#08192E 100%)}
.screen[data-wall="1"]{background:
  radial-gradient(80% 62% at 16% 106%, #E0705C 0%, transparent 58%),
  radial-gradient(66% 58% at 86% 8%, #8C3E86 0%, transparent 60%),
  linear-gradient(163deg,#7A2F6E 0%,#4A2258 48%,#211433 100%)}
.screen[data-wall="2"]{background:
  radial-gradient(80% 60% at 22% 104%, #E8A33C 0%, transparent 56%),
  radial-gradient(62% 56% at 82% 8%, #B4442F 0%, transparent 60%),
  linear-gradient(163deg,#8A3520 0%,#5A2418 48%,#25100C 100%)}
.screen[data-wall="3"]{background:
  radial-gradient(78% 62% at 18% 104%, #5FA85C 0%, transparent 58%),
  radial-gradient(62% 54% at 84% 8%, #2C6E63 0%, transparent 60%),
  linear-gradient(163deg,#215C4E 0%,#17402F 48%,#0A1C15 100%)}

.menubar{
  position:relative; z-index:14; height:52px; display:flex; align-items:center;
  padding:0 15px; gap:19px; font-size:12px; color:rgba(255,255,255,.88); font-weight:520;
}
.menubar .right{margin-left:auto}
.mb-chip{
  display:flex; align-items:center; gap:13px; padding:7px 12px; border-radius:11px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.20);
}
.mb-chip svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round}
.mb-chip .apple{fill:#fff; stroke:none; width:13px; height:15px}
.menubar .clock{font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.01em}
/* The menu words hide at 880, not 700: the notch is at its widest above the
   640px breakpoint, and at 768px it reached x=192 while "Edit" still ran to
   x=215 — the app names rendered underneath it. The threshold is where the
   two stop overlapping (screen wider than notch + ~380), plus margin. */
@media (max-width:880px){ .menubar .hide-sm{display:none} .menubar{gap:12px; height:46px} }
/* On a narrow screen the notch reaches the status items, exactly as it does on
   a real one — drop the icons and keep the clock rather than let it collide. */
/* Same story on the right: the status icons reached under the notch at
   700px. Drop the glyphs and keep the clock — it is the only part of a
   menu bar anyone reads. */
@media (max-width:880px){ .menubar .right .mb-chip svg{display:none} .menubar .right .mb-chip{padding:6px 10px} }

.stage{position:relative; min-height:392px; margin-top:-52px; display:flex; justify-content:center}
@media (max-width:820px){ .stage{min-height:320px} }
@media (max-width:560px){ .stage{min-height:250px} }

/* ── The notch itself ───────────────────────────────────────────────────── */
.notch{
  --w:190px; --h:34px;
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  background:var(--black); color:var(--ink);
  width:var(--w); height:var(--h); border-radius:0 0 15px 15px;
  display:flex; align-items:flex-start; justify-content:center;
  transition:width .52s var(--ease), height .52s var(--ease), border-radius .3s ease;
  z-index:20; cursor:pointer; -webkit-user-select:none; user-select:none;
}
.notch:focus-visible{outline:2px solid #fff; outline-offset:4px}
/* Concave fillets, so the shape meets the bezel the way the real cutout does
   instead of sitting on it as a rectangle. */
.notch::before,.notch::after{
  content:""; position:absolute; top:0; width:12px; height:12px;
  background:var(--black); pointer-events:none;
}
.notch::before{left:-12px; -webkit-mask:radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px); mask:radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px)}
.notch::after{right:-12px; -webkit-mask:radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px); mask:radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px)}

.notch .lens{  /* the camera, so the resting state isn't a bare black slab */
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #3a3a3a 0%, #0d0d0d 62%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12);
  transition:opacity .22s ease;
}
.notch[data-state]:not([data-state="idle"]) .lens{opacity:0}

.notch .panel{
  position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; visibility:hidden; transition:opacity .26s ease;
  padding:0 16px; gap:12px;
}
.notch .panel.on{opacity:1; visibility:visible; transition-delay:.14s}

/* Sizes per state — width and height are the whole animation. */
.notch[data-state="idle"]      {--w:190px; --h:34px}
.notch[data-state="volume"]    {--w:296px; --h:46px}
.notch[data-state="battery"]   {--w:306px; --h:46px}
.notch[data-state="airpods"]   {--w:344px; --h:74px}
.notch[data-state="music"]     {--w:384px; --h:82px}
.notch[data-state="timer"]     {--w:302px; --h:46px}
.notch[data-state="focus"]     {--w:326px; --h:58px}
.notch[data-state="screenshot"]{--w:346px; --h:76px}
.notch[data-state="saved"]     {--w:330px; --h:58px}
.notch[data-state="drop"]      {--w:min(470px,92%); --h:128px; border-radius:0 0 22px 22px}
.notch[data-state="desk"]      {--w:min(760px,94%); --h:250px; border-radius:0 0 24px 24px}

/* Hovering nudges it open — the peek the app does when the pointer reaches
   the top of the screen. */
@media (hover:hover){
  .notch:not([data-state="desk"]):not([data-state="drop"]):hover{
    width:calc(var(--w) + 12px); height:calc(var(--h) + 6px);
  }
}
.notch.dragging{cursor:grabbing}
.notch[data-state="drop"]{box-shadow:0 0 0 2px rgba(255,255,255,.55), 0 20px 50px rgba(0,0,0,.5)}

@media (max-width:640px){
  .notch[data-state="music"]{--w:300px; --h:76px}
  .notch[data-state="airpods"],.notch[data-state="screenshot"]{--w:292px}
  .notch[data-state="volume"],.notch[data-state="timer"],.notch[data-state="battery"]{--w:250px}
  .notch[data-state="focus"],.notch[data-state="saved"]{--w:280px}
  .notch[data-state="desk"]{--w:96%; --h:210px}
  .notch[data-state="drop"]{--w:96%; --h:112px}
}

/* ── Activity internals ─────────────────────────────────────────────────── */
.ico{flex:none; display:grid; place-items:center}
.ico svg{stroke:var(--hue,var(--bone)); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.bar{flex:1; height:5px; border-radius:3px; background:var(--track); overflow:hidden}
.bar span{display:block; height:100%; border-radius:3px; background:var(--hue,var(--bone)); transition:width .35s var(--ease)}
.pct{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:32px; text-align:right}

.art{
  flex:none; width:48px; height:48px; border-radius:9px; overflow:hidden;
  background:linear-gradient(145deg,#F0785E,#7A2F6E);
  box-shadow:0 3px 12px rgba(0,0,0,.5); position:relative;
}
.art::after{  /* a sleeve, abstracted — no borrowed cover art */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.42) 0 18%, transparent 19%),
    linear-gradient(115deg, transparent 46%, rgba(255,255,255,.18) 50%, transparent 54%);
}
/* `display:block` because the gallery tiles below build the same component out
   of spans — a button may not contain a div. */
.track{flex:1; min-width:0}
.track .t,.track .a{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.track .t{font-size:13px; font-weight:640; color:var(--ink)}
.track .a{font-size:11.5px; color:var(--ink-4)}

.wave{display:flex; align-items:center; gap:2.5px; height:26px; flex:none}
.wave i{width:2.5px; border-radius:2px; background:var(--hue,var(--bone)); opacity:.9;
        animation:bounce 1.05s var(--i,0s) infinite ease-in-out}
@keyframes bounce{0%,100%{height:5px}50%{height:22px}}

.pods{display:flex; gap:16px; flex:1; justify-content:space-around}
.pod{text-align:center}
.pod .lbl{display:block; font-size:10px; color:var(--ink-4); letter-spacing:.06em; text-transform:uppercase}
.pod .val{display:block; font-size:15px; font-weight:660; color:var(--ink); font-variant-numeric:tabular-nums}
.pod .val.low{color:#E8A33C}

.shot{flex:none; width:52px; height:34px; border-radius:5px; overflow:hidden; position:relative;
      background:linear-gradient(150deg,#2FB6A8,#17507E); box-shadow:0 3px 10px rgba(0,0,0,.5)}
.shot::after{content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.30) 50%,transparent 56%)}

/* Drop lanes, inside the notch */
.droplanes{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%}
.dl{
  border-radius:12px; padding:12px 6px 10px; text-align:center; font-size:10.5px;
  color:var(--ink-3); background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.18); transition:all .18s ease; line-height:1.25;
}
.dl svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; display:block; margin:0 auto 6px}
.dl.hot{background:rgba(255,255,255,.16); border-style:solid; border-color:#fff; color:#fff; transform:translateY(-2px)}
@media (max-width:560px){ .dl{font-size:9.5px; padding:9px 3px 8px} .dl svg{width:15px;height:15px} }

/* ── The Desk, in miniature ─────────────────────────────────────────────── */
.desk{width:100%; height:100%; display:flex; flex-direction:column; padding:10px 14px 13px; gap:9px}
.desk .head{display:flex; align-items:center; gap:7px}
.tab{
  display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:640; color:var(--ink-4); background:transparent;
  cursor:pointer; transition:all .16s ease;
}
.tab:hover{color:var(--ink-2)}
.tab.on{background:rgba(255,255,255,.13); color:var(--ink)}
.tab svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8}
.desk .gear{margin-left:auto; display:flex; gap:11px; opacity:.55}
.desk .gear svg{width:14px; height:14px; stroke:var(--ink-2); fill:none; stroke-width:1.6}

.deskbody{flex:1; min-height:0; position:relative}
.deskview{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .22s ease}
.deskview.on{opacity:1; visibility:visible}

.widgets{height:100%; display:grid; grid-template-columns:1.15fr 1fr 1fr; min-height:0}
.w{padding:0 15px; min-width:0; display:flex; flex-direction:column; position:relative}
.w + .w::before{content:""; position:absolute; left:0; top:6%; bottom:6%; width:1px; background:rgba(255,255,255,.10)}
.w:first-child{padding-left:2px}
.w:last-child{padding-right:2px}
@media (max-width:640px){ .widgets{grid-template-columns:1fr 1fr} .w:nth-child(3){display:none} }

.todo{display:flex; align-items:center; gap:8px; padding:5px 9px; border-radius:8px;
      background:rgba(255,255,255,.06); margin-bottom:5px; font-size:12px; color:var(--ink-2);
      cursor:pointer; transition:background .15s ease}
.todo:hover{background:rgba(255,255,255,.12)}
.todo .box{width:12px; height:12px; border-radius:50%; border:1.4px solid var(--ink-4); flex:none; position:relative}
.todo.done{color:var(--ink-4); text-decoration:line-through}
.todo.done .box{background:#5FA85C; border-color:#5FA85C}
.todo.done .box::after{content:""; position:absolute; left:3.6px; top:1.4px; width:3px; height:6px;
  border:solid #0A0908; border-width:0 1.5px 1.5px 0; transform:rotate(42deg)}
.todo .new{color:var(--ink-4)}

.ev{display:flex; gap:9px; align-items:flex-start; margin-bottom:9px}
.ev .rail{width:2.5px; border-radius:2px; background:#5FA85C; align-self:stretch; flex:none}
.ev .ttl{font-size:12px; font-weight:620; color:var(--ink); line-height:1.3}
.ev .tm{font-size:10.5px; color:var(--ink-4); font-variant-numeric:tabular-nums}
.ev .join{margin-top:4px; display:inline-block; font-size:10px; padding:2.5px 8px; border-radius:999px;
          background:rgba(255,255,255,.14); color:var(--ink-2)}

.apps{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; align-content:start}
.apps .app{aspect-ratio:1; border-radius:9px; display:grid; place-items:center;
           background:linear-gradient(150deg,var(--c1),var(--c2));
           box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16); transition:transform .16s var(--ease)}
.apps .app:hover{transform:translateY(-2px)}
.apps .app svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:1.8}

.wlabel{font:600 9.5px/1 "SF Mono",ui-monospace,Menlo,monospace; letter-spacing:.13em;
        text-transform:uppercase; color:var(--ink-4); margin-bottom:8px}

.shelf{height:100%; display:flex; align-items:center; gap:10px; padding:0 4px}
.shelf .slot{
  flex:1; height:78%; border-radius:12px; border:1px dashed rgba(255,255,255,.18);
  display:grid; place-items:center; text-align:center; font-size:10.5px; color:var(--ink-4);
  background:rgba(255,255,255,.035); padding:8px;
}
.shelf .slot.full{border-style:solid; border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.09); color:var(--ink-2)}
.shelf .slot .fname{font-size:10.5px; word-break:break-all; line-height:1.3; margin-top:6px; color:var(--ink-2)}
.shelf .slot svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6}

/* ── Dock ───────────────────────────────────────────────────────────────── */
.dock{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:16;
  display:flex; align-items:flex-end; gap:10px; padding:10px 12px; border-radius:20px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22), 0 14px 34px rgba(0,0,0,.28);
}
.dock button{
  width:50px; height:50px; border-radius:14px; border:0; padding:0; cursor:pointer;
  display:grid; place-items:center; font:inherit;
  background:linear-gradient(150deg,var(--c1),var(--c2));
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.24), 0 5px 14px rgba(0,0,0,.30);
  transition:transform .2s var(--ease);
}
.dock button:hover{transform:translateY(-9px) scale(1.16)}
.dock button:focus-visible{outline:2px solid #fff; outline-offset:3px}
.dock button svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:560px){ .dock{gap:7px; padding:8px 9px; bottom:12px} .dock button{width:40px; height:40px; border-radius:11px} .dock button svg{width:20px;height:20px} }

/* A file sitting on the desktop, draggable onto the notch. */
.filecard{
  position:absolute; left:28px; bottom:104px; z-index:15; width:96px; cursor:grab;
  text-align:center; color:#fff; font-size:10.5px; line-height:1.3;
  transition:transform .2s var(--ease), opacity .2s ease;
}
.filecard:hover{transform:translateY(-3px) rotate(-2deg)}
.filecard.gone{opacity:0; pointer-events:none}
.filecard .sheet{
  width:58px; height:72px; margin:0 auto 7px; border-radius:8px; position:relative;
  background:linear-gradient(160deg,#FFFFFF,#D6CDBF); box-shadow:0 10px 24px rgba(0,0,0,.34);
}
.filecard .sheet::after{
  content:""; position:absolute; right:0; top:0; border-width:0 15px 15px 0;
  border-style:solid; border-color:transparent rgba(0,0,0,.22) transparent transparent;
  border-radius:0 8px 0 0;
}
.filecard .sheet::before{
  content:""; position:absolute; inset:14px 11px 12px; border-radius:2px;
  background:repeating-linear-gradient(180deg,rgba(21,18,15,.24) 0 2px,transparent 2px 8px);
}
.filecard .fn{text-shadow:0 1px 4px rgba(0,0,0,.6)}
@media (max-width:700px){ .filecard{display:none} }

/* ── Controls under the screen ──────────────────────────────────────────── */
.chips{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.chip{
  padding:8px 16px; border-radius:11px; font-size:13px; font-weight:620;
  color:var(--ink-3); background:transparent; border:1.5px solid var(--line);
  cursor:pointer; transition:all .16s ease; font-family:inherit;
}
.chip:hover{color:var(--ink); border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--card); border-color:var(--ink)}

.legend{
  display:flex; gap:10px 24px; justify-content:center; flex-wrap:wrap; margin-top:22px;
  font:500 12.5px/1.5 "SF Mono",ui-monospace,Menlo,monospace; color:var(--ink-4);
}
.legend span{display:inline-flex; align-items:center; gap:7px}
kbd{
  font:inherit; font-size:11px; font-weight:620; color:var(--ink-2);
  background:var(--card); border:1px solid var(--line-2);
  border-bottom-width:2px; border-radius:6px; padding:2px 7px; min-width:22px;
  display:inline-block; text-align:center;
}

/* ── The activity gallery ───────────────────────────────────────────────────
   Every tile is the real thing at a smaller size, rendered on black, and
   every tile loads itself into the demo above. The catalogue *is* the
   product, so there is nothing here to illustrate with an icon. */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .gallery{grid-template-columns:1fr} }

/* Each tile is a screen with its own notch hanging off the top edge, rather
   than a card with an icon in it — the same object the hero demo is, eight
   times over. Hovering peeks it open exactly as the real one does. */
.pill{
  display:flex; flex-direction:column; gap:14px; padding:0; border:0;
  background:transparent; cursor:pointer; font:inherit; text-align:center;
  transition:transform .22s var(--ease);
}
.pill:hover{transform:translateY(-5px)}
.pill:focus-visible{outline:none}
.pill .lid{
  position:relative; height:120px; border-radius:18px; overflow:hidden; background:#0E0B0A;
  box-shadow:0 2px 4px rgba(21,18,15,.12), 0 20px 34px -22px rgba(21,18,15,.60);
  transition:box-shadow .22s var(--ease);
}
.pill:hover .lid{box-shadow:0 3px 6px rgba(21,18,15,.14), 0 30px 48px -24px rgba(21,18,15,.70)}
.pill:focus-visible .lid{outline:2px solid var(--accent); outline-offset:3px}
.pill .lid::before{  /* the tile's wallpaper, lit by its own hue */
  content:""; position:absolute; inset:0; opacity:.9;
  background:
    radial-gradient(96% 78% at 22% 118%, var(--hue) 0%, transparent 66%),
    radial-gradient(74% 66% at 92% 108%, var(--hue) 0%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 46%);
}
.pill .lid::after{  /* a dock, so the space under the notch reads as a screen */
  content:""; position:absolute; left:50%; bottom:13px; transform:translateX(-50%);
  width:57px; height:15px; border-radius:5px; opacity:.45;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 15px, transparent 15px 21px);
}
.pill .mini{
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
  width:calc(100% - 46px); height:50px; background:#000; border-radius:0 0 14px 14px;
  display:flex; align-items:center; gap:9px; padding:0 12px;
  transition:width .3s var(--ease), height .3s var(--ease);
}
.pill:hover .mini{width:calc(100% - 32px); height:57px}
.pill .mini::before,.pill .mini::after{content:""; position:absolute; top:0; width:10px; height:10px; background:#000}
.pill .mini::before{left:-10px; -webkit-mask:radial-gradient(circle at 0 100%, transparent 10px, #000 10.5px); mask:radial-gradient(circle at 0 100%, transparent 10px, #000 10.5px)}
.pill .mini::after{right:-10px; -webkit-mask:radial-gradient(circle at 100% 100%, transparent 10px, #000 10.5px); mask:radial-gradient(circle at 100% 100%, transparent 10px, #000 10.5px)}
.pill .cap{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font:620 10.5px/1 "SF Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--hue); flex:none}
.pill .go{color:var(--accent); opacity:0; transform:translateX(-4px);
          transition:opacity .18s ease, transform .18s ease}
.pill:hover .go,.pill:focus-visible .go{opacity:1; transform:none}
/* The tiles run small — trim the fat inside the mini notch. */
.pill .track .t{font-size:12px}
.pill .track .a{font-size:10.5px}
.pill .pods{gap:6px}
.pill .pod .val{font-size:13px}
.pill .pct{font-size:10.5px; min-width:26px}
.pill .apps{width:100%; gap:6px}
.pill .apps .app{border-radius:7px}

/* ── Cards, lists, splits ───────────────────────────────────────────────── */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:40px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -20px rgba(21,18,15,.45)}
.card h3{margin-bottom:8px}
.card p{font-size:14.5px; color:var(--ink-3)}
.ic{width:40px; height:40px; border-radius:12px; margin-bottom:15px; display:grid; place-items:center;
    background:var(--accent-soft)}
.ic svg{width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* minmax(0,…) rather than 1fr: a nowrap URL inside one of the demo panels
   otherwise sets a min-content floor the column can't shrink past, and the
   whole grid pushes off the side of a narrow phone. */
.split{display:grid; gap:56px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center}
.split.rev .art-col{order:-1}
@media (max-width:820px){ .split{grid-template-columns:minmax(0,1fr); gap:34px} .split.rev .art-col{order:0} }

ul.plain{margin:24px 0 0; padding:0; list-style:none}
ul.plain li{padding:12px 0 12px 28px; position:relative; color:var(--ink-3); font-size:15px; border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:0}
ul.plain li::before{content:""; position:absolute; left:2px; top:19px; width:9px; height:9px;
                    border-radius:3px; background:var(--accent)}
ul.plain li b{color:var(--ink); font-weight:660}

/* ── Demo panels used beside copy ───────────────────────────────────────── */
.demo{
  background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:30px; position:relative; overflow:hidden; min-height:260px;
  display:flex; align-items:center; justify-content:center;
}

.lanes{display:flex; flex-direction:column; gap:8px; width:100%; max-width:300px}
.lane{
  display:flex; align-items:center; gap:11px; padding:12px 15px; border-radius:12px;
  background:var(--tint); border:1px dashed var(--line-2);
  font-size:13px; color:var(--ink-3); transition:all .2s ease;
}
.lane.hot{background:var(--accent); border-style:solid; border-color:var(--accent); color:#fff; font-weight:620}
.lane svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none}
.chit{
  position:absolute; width:42px; height:52px; border-radius:7px; right:30px; top:30px;
  background:linear-gradient(160deg,#FFFFFF,#D6CDBF);
  box-shadow:0 10px 24px rgba(21,18,15,.28), inset 0 0 0 1px var(--line);
  animation:carry 4.4s infinite var(--ease);
}
.chit::after{content:""; position:absolute; right:0; top:0; border-width:0 12px 12px 0;
  border-style:solid; border-color:transparent var(--card) transparent transparent}
@keyframes carry{
  0%,12%{transform:translate(0,0) rotate(4deg); opacity:1}
  46%,62%{transform:translate(-150px,74px) rotate(-3deg); opacity:1}
  76%,100%{transform:translate(-150px,74px) rotate(-3deg); opacity:0}
}

.clips{display:flex; flex-direction:column; gap:8px; width:100%; max-width:310px}
.clip{padding:11px 14px; border-radius:12px; background:var(--tint); border:1px solid var(--line);
      font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:9px}
.clip .kind{font:600 9px/1 "SF Mono",ui-monospace,Menlo,monospace; letter-spacing:.1em;
            text-transform:uppercase; color:var(--accent); border:1px solid var(--line-2);
            padding:3px 6px; border-radius:5px; flex:none}
.clip.hidden-clip{color:var(--ink-4); font-style:italic}
.clip code{font-size:11.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Two screens, the same size, showing the same event — the difference is
   where it lands and how much of the screen it takes. */
.hud-cmp{display:grid; grid-template-columns:1fr 1fr; gap:18px; width:100%}
.hud-cmp figure{margin:0; text-align:center}
.hud-cmp .box{
  height:158px; border-radius:16px; position:relative; overflow:hidden; display:grid; place-items:center;
  background:
    radial-gradient(78% 60% at 20% 106%, #2FB6A8 0%, transparent 58%),
    radial-gradient(64% 56% at 84% 4%, #2A5CA8 0%, transparent 60%),
    linear-gradient(163deg,#17507E 0%,#123A5E 48%,#08192E 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.hud-cmp .mbar{  /* the menu bar, so it reads as a screen and not a swatch */
  position:absolute; top:0; left:0; right:0; height:15px; z-index:1;
  background:rgba(0,0,0,.26);
}
.hud-cmp .mbar::after{
  content:""; position:absolute; right:8px; top:5px; width:26px; height:4px;
  border-radius:2px; background:rgba(255,255,255,.34);
}
.hud-cmp figcaption{
  margin-top:13px; display:inline-flex; align-items:center; gap:8px;
  font:620 11px/1 "SF Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 13px;
}
.hud-cmp .verdict{width:15px; height:15px; border-radius:50%; display:grid; place-items:center;
                  font-size:9px; font-weight:700; color:#fff; flex:none}
.hud-cmp .verdict.no{background:var(--ink-4)}
.hud-cmp .verdict.yes{background:var(--accent)}
.old-hud{  /* the slab macOS parks in the middle of whatever you were doing */
  width:86px; height:86px; border-radius:18px; background:rgba(232,232,232,.34);
  backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:11px; box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.old-hud svg{width:30px; height:30px; stroke:#fff; fill:none; stroke-width:1.6; opacity:.95}
.old-hud .seg{display:flex; gap:2px}
.old-hud .seg i{width:5px; height:5px; border-radius:1px; background:rgba(255,255,255,.45)}
.old-hud .seg i:nth-child(-n+6){background:#fff}
.mini-notch{position:absolute; top:0; left:50%; transform:translateX(-50%); background:var(--black);
            width:132px; height:32px; border-radius:0 0 12px 12px; display:flex; align-items:center;
            gap:9px; padding:0 13px; z-index:2}
.mini-notch::before,.mini-notch::after{content:""; position:absolute; top:0; width:9px; height:9px; background:var(--black)}
.mini-notch::before{left:-9px; -webkit-mask:radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px); mask:radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px)}
.mini-notch::after{right:-9px; -webkit-mask:radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px); mask:radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px)}
@media (max-width:420px){ .hud-cmp{grid-template-columns:1fr} }

/* ── The ink band ───────────────────────────────────────────────────────── */
.slab{background:var(--tint); color:var(--ink-2)}
[data-tone="ink"] a{color:var(--accent)}
[data-tone="ink"] .lede{color:var(--ink-3)}

/* ── Pricing ────────────────────────────────────────────────────────────── */
.price{
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  padding:42px 38px; text-align:center; max-width:480px; margin:44px auto 0;
  box-shadow:0 30px 56px -34px rgba(21,18,15,.45);
}
.price .amount{font-size:68px; font-weight:760; color:var(--ink); letter-spacing:-.05em; line-height:1}
.price .amount sup{font-size:.42em; font-weight:640; top:-.7em; margin-right:2px; color:var(--accent)}
.price .once{font:500 12.5px/1.5 "SF Mono",ui-monospace,Menlo,monospace; color:var(--ink-4); margin-top:10px}
.price ul.plain{text-align:left; margin-top:28px}
.price ul.plain li{font-size:14px}

details{border-bottom:1px solid var(--line); padding:18px 0}
details summary{cursor:pointer; color:var(--ink); font-weight:640; font-size:16px; list-style:none;
                display:flex; align-items:center; gap:12px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+"; color:var(--accent); font-weight:600; width:14px; flex:none}
details[open] summary::before{content:"−"}
details p{margin-top:11px; padding-left:26px; color:var(--ink-3); font-size:14.5px}

.spec{width:100%; border-collapse:collapse; margin-top:28px; font-size:14.5px}
.spec th,.spec td{text-align:left; padding:14px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.spec th{color:var(--ink-4); font-weight:620; width:36%}
.spec td{color:var(--ink-2)}

/* ── Footer: the slab that closes the sandwich ──────────────────────────── */
footer{
  --accent:#E9C68B;
  position:relative; background:var(--black); color:var(--ink-3);
  padding:76px 0 0; font-size:13.5px; overflow:hidden;
}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--ink)}

.fgrid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px}
@media (max-width:860px){ .fgrid{grid-template-columns:1fr 1fr; gap:40px 28px} }
@media (max-width:460px){ .fgrid{grid-template-columns:1fr} }

footer .brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700;
              font-size:19px; letter-spacing:-.025em}
footer .brand .mark{width:21px; height:21px; border-radius:7px; background:#F1EADD; position:relative}
footer .brand .mark::after{content:""; position:absolute; left:50%; top:3px; transform:translateX(-50%);
  width:11px; height:4px; border-radius:0 0 2px 2px; background:var(--black)}
.fbrand p{margin-top:16px; max-width:270px; line-height:1.65; color:var(--ink-3)}
.fbrand .btn{margin-top:24px; padding:12px 20px; font-size:14px}

.fcol{display:flex; flex-direction:column; gap:13px; align-items:flex-start}
.fcol h4{
  margin:0 0 3px; font:620 10.5px/1 "SF Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-4); font-weight:620;
}
.fcol a,.fcol span{font-size:14px; color:var(--ink-2)}
.fcol span{color:var(--ink-4); font-size:13px}
.fcol a{position:relative; width:fit-content}
.fcol a::after{  /* a rule that draws itself in, rather than an underline */
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:var(--accent); transition:right .24s var(--ease);
}
.fcol a:hover{text-decoration:none; color:var(--ink)}
.fcol a:hover::after{right:0}

footer .fine{
  margin-top:56px; padding:24px 0 30px; border-top:1px solid var(--line);
  color:var(--ink-4); font-size:12.5px; display:flex; gap:20px; flex-wrap:wrap;
  justify-content:space-between; align-items:center;
}
footer .top{
  display:inline-flex; align-items:center; gap:8px; color:var(--ink-3);
  font:620 10.5px/1 "SF Mono",ui-monospace,Menlo,monospace; letter-spacing:.13em;
  text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:9px 14px;
  transition:border-color .18s ease, color .18s ease;
}
footer .top:hover{text-decoration:none; color:var(--ink); border-color:var(--line-2)}

/* The name, set once at the size it deserves, running off the bottom edge. */
.wordmark{
  margin:8px auto -.19em; text-align:center; line-height:.8;
  -webkit-user-select:none; user-select:none; pointer-events:none;
  font-size:clamp(92px,21vw,270px); font-weight:800; letter-spacing:-.055em;
  color:transparent; -webkit-background-clip:text; background-clip:text;
  background-image:linear-gradient(180deg, rgba(246,242,234,.13) 0%, rgba(246,242,234,.02) 78%);
}

/* ── Scroll reveal ──────────────────────────────────────────────────────────
   Scoped to `.js`, which a one-line inline script in <head> sets. Without it
   the rule never applies and every section is simply visible.

   This is not hypothetical tidiness: the unscoped version hid the entire page
   below the hero whenever the reveal script didn't run. An effect that fails
   closed takes the content with it. */
.js .rise{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .rise.seen{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .rise{opacity:1; transform:none}
}

/* ── Cross-promo strip ──────────────────────────────────────────────────────
   The strip renders itself into a shadow root, so its insides can't be styled
   from here — but its container can. Without this it has no room below it and
   the cards sit flush against the black footer. */
#ziyarex-strip{ margin: 8px 0 88px; }
/* At 320px the strip's own cards (219px each, in a row) run past the viewport.
   They live in a shadow root, so neither their styles nor the host's overflow
   reins them in — tried, measured, no change. What *is* ours is whether the
   page can be dragged sideways because of it, so overflow-x is clipped on the
   root as well as the body — `clip` rather than `hidden`, see the note there. Above 360px the strip lays itself out correctly;
   making the cards themselves reflow belongs in the ziyarex.com widget. */
@media (max-width:359px){ #ziyarex-strip{ display:none; } }
@media (max-width:640px){ #ziyarex-strip{ margin: 4px 0 64px; } }

/* ── Narrow screens: the notch and the menu bar were fighting ───────────────
   The notch is centred and the clock is pinned right, so below roughly 494px
   of viewport they overlap and the time renders *underneath* the notch.
   Measured, not guessed: at 500px the notch spanned 100–400 and the clock
   392–449.

   Two changes rather than one. Hiding the clock removes the collision; making
   the notch a little narrower stops it filling almost the entire width of the
   screen mock, which looked cramped even where nothing overlapped. */
/* Below ~430px there is no longer room for anything beside the notch: at a
   real 390px viewport the screen is 338 wide, the notch 262, and the Apple
   glyph ran to x=65 against a notch starting at x=64.

   Hiding the glyph rather than shrinking the notch further, because the notch
   has content to fit — AirPods shows three labelled battery figures — and a
   notch too narrow for its own text is a worse bug than a menu bar with
   nothing on the left, which is what a phone-width screen would show anyway. */
@media (max-width:430px){ .menubar > .mb-chip:first-child{ display:none; } }

@media (max-width:520px){
  .menubar .right{ display:none; }
  .notch[data-state="music"]{ --w:262px; --h:72px }
  .notch[data-state="airpods"],.notch[data-state="screenshot"]{ --w:258px }
  .notch[data-state="volume"],.notch[data-state="timer"],.notch[data-state="battery"]{ --w:224px }
  .notch[data-state="focus"],.notch[data-state="saved"]{ --w:246px }
}