/* helumi.html: the header copied from helumi.app (measured at 1680 wide, 2026-10-20), dark.
   Helumi: system font; nav pill top 12, 40 tall, 4 padding, 14px items, the current one 600
   in its own filled pill; headline 48/52.8 at 600, -0.045em, "meet" and the name in italic
   500 with the mark between; sub 16/24 at 64%, two lines, 8 under; button 40 tall, 14/500,
   24 under; small lines 12/18 at 56%, 12 under; faces 32px, 24 apart, 24 under; window at 523.
   Helumi has two small lines; ours had two ("free to start", then "nothing leaves your phone
   until the cloud has it"). Richie, 2026-10-20: drop the second, its idea now lives in how it
   works, step 3. The faces keep their 24 under the one line left, so they sit 22 higher. */
.hnav-wrap { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
/* On a phone, past the hero, site.js docks the bar at the bottom (under the thumb), above the
   home indicator. */
.hnav-wrap.docked { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
.hnav-wrap.docked .hnav { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.hnav {
  pointer-events: auto; display: flex; align-items: center; height: 40px; padding: 4px; border-radius: 999px;
  background: #1a1a1a;
  font: 400 14px/21px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
}
.hnav a { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; color: rgba(255, 255, 255, 0.64); transition: color 150ms ease, background-color 150ms ease; }
/* Helumi (measured scrolled, 2026-10-20): the home link is always 600; the current item gets
   only the filled pill and full colour, weight unchanged, so the bar never changes width as
   site.js moves .on from section to section. */
.hnav a:first-child { font-weight: 600; }
/* The home link: the words on a wide screen; on a phone only the clover, so "get it on iphone"
   fits the bar (Richie, 2026-11-03: the app button lives in the header, not repeated in the hero). */
.hnav .nav-mark { display: none; width: 22px; height: 20.4px; }
.hnav a.on { color: #fff; background: #2a2a2a; }
.hnav a.app { margin-left: 4px; font-weight: 600; color: #0a0a0a; background: #fff; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.hnav a.app:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hnav a:not(.on):not(.app):hover { color: #fff; } .hnav a.app:hover { background: #e9e9e9; } }

.hhero { padding-top: 128px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; }
.hhero h1 { font-weight: 600; font-size: 48px; line-height: 1.1; font-family: inherit; letter-spacing: -0.045em; color: #fff; display: inline-flex; align-items: center; gap: 0.18em; flex-wrap: wrap; justify-content: center; }
.hhero h1 em { font-style: italic; font-weight: 500; letter-spacing: -0.04em; padding-right: 0.06em; }
.hhero .hmark { height: 35px; width: 37.8px; flex: none; }
.hsub { margin: 8px auto 0; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.64); }
.hsub b { font-weight: 600; color: #fff; }
.hsub mark { font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 0 3px; }
.hhero .actions { margin-top: 24px; }
.hbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  background: #fff; color: #0a0a0a; font-size: 14px; font-weight: 500; line-height: 21px;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.hbtn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hbtn:hover { background: #e9e9e9; } }
.hbtn .apple { width: 13.6px; height: 16.7px; fill: currentColor; stroke: none; margin-top: -2px; } /* filled glyph: never a stroke (one clipped it in the price buttons, 2026-11-03) */
.hsmall { margin-top: 4px; font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.56); display: flex; align-items: center; justify-content: center; gap: 6px; }
.hhero .actions + .hsmall { margin-top: 12px; }
.hhero .hsub + .hsmall { margin-top: 16px; }
.hproof { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hproof .files { gap: 0; }
/* Each file sits above the one to its right, so its ring and tick are never covered. */
.hproof .file { width: 32px; height: 32px; margin-left: -8px; z-index: calc(10 - var(--i)); }
.hproof .file:first-child { margin-left: 0; }
.hproof .file img { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--void); }
.hproof .file .ring { inset: -4px; width: 40px; height: 40px; }
.hproof p { font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.64); }
.hproof p .n { color: #fff; font-weight: 600; }
@media (max-width: 640px) {
  .hnav a { padding: 0 9px; font-size: 13px; white-space: nowrap; }
  /* "nameless cloud" made the bar wrap at 390: on a phone faq leaves the bar (it is the rarest
     link; the footer and the page's end still reach it). */
  .hnav a[href$="#faq"] { display: none; }
  .hnav a:first-child { padding: 0 9px; }
  .hnav a:first-child span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hnav .nav-mark { display: block; }
  .hhero { padding-top: 112px; }
  .hhero h1 { font-size: 40px; }
  .hhero .hmark { height: 29px; width: 31.3px; }
}

/* ---------- The headline's mark: the app's launch, then alive ----------
   Lands like the app's LaunchScreen (PoppingMark): pebbles one at a time, biggest first
   (0, 3, 1, 2), 90ms apart, from half size with a small overshoot, opacity in 180ms.
   Then it stays alive: every 5.2s a soft press runs round the clover, one pebble after
   another, like files being ticked off. Decorative and small, so a gentle loop is fine;
   transform and opacity only. Reduce Motion: still. */
.hmark .pb { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes pebble-in {
  0% { opacity: 0; transform: scale(0.5); }
  35% { opacity: 1; }
  70% { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pebble-press {
  0%, 100% { transform: scale(1); }
  6% { transform: scale(0.84); }
  14% { transform: scale(1.05); }
  22% { transform: scale(1); }
}
.hmark .pb {
  animation:
    pebble-in 520ms var(--ease-out) calc(200ms + var(--o) * 90ms) backwards,
    pebble-press 5.2s cubic-bezier(0.45, 0, 0.55, 1) calc(1.6s + var(--o) * 160ms) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hmark .pb { animation: none; }
}

/* ---------- The app under the header ----------
   Where Helumi shows its Finder window (top 523), the phone with the real Gallery tab.
   300 wide on desktop (the capture is 720, so 2x sharp), its lower part fading into the
   page so it reads as a window into the app, not a product shot. */
.hphone { position: relative; display: flex; justify-content: center; margin-top: 84px; } /* 80 measured from the hero's last line (leading included) */
/* No light behind the phone: it showed on load before the screenshot did, and no other phone
   has one (Richie, 2026-11-03). */
@media (max-width: 640px) {
  .hphone { margin-top: 68px; }
}

/* =====================================================================================
   The rest of the page, in helumi.app's order: how it works, the founder's note, one
   plan, questions, footer. Measured in headless Chrome on 2026-10-20 at 1680 and 375.
   Helumi's skin inverted to our dark: page #f5f5f5 -> our void #0a0a0a; its white cards
   -> #1a1a1a, the same step as the header's nav pill; black text -> white; its 64% and
   56% black -> 64% and 56% white, as in the header. Its 1px rules become hairline
   shadows, this house's one edge.
   ===================================================================================== */
.hsec {
  --card: #1a1a1a;
  --t2: rgba(255, 255, 255, 0.64);
  --t3: rgba(255, 255, 255, 0.56);
  --rule: rgba(255, 255, 255, 0.1);
  /* Helumi .section.wrap: 944 wide with 32 sides (880 inside), 80 on top, nothing under;
     the next title sits 80 below the last thing of the one before. */
  max-width: 944px; margin: 0 auto; padding: 80px 32px 0; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  scroll-margin-top: 0;
}
/* Helumi h2: 32/38.4 at 600, -0.03em; the italic word 500 at -0.02em, a hair of room after it. */
.htitle { font-weight: 600; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.htitle em { font-style: italic; font-weight: 500; letter-spacing: -0.02em; padding-right: 0.04em; }
.hbody { margin: 24px auto 0; max-width: 464px; font-size: 16px; line-height: 24px; color: var(--t2); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Every shot, handled: Helumi's "made for big files" grid ----------
   Two 428 columns, 24 apart, rows 32 apart, 32 under the title (one column under 944 wide,
   327 at 375, as Helumi). A tile: the picture 260 tall, radius 16, then the caption 12
   under: a 14/21 line at 700 and a 14/21 line at 64%, 2 apart. Where Helumi floats a slice
   of its Mac UI over a landscape, ours floats the phone, a real screen in it, over a crew
   shot blurred to colour (pre-blurred, 214 x 130, mobile/design/site-tiles/bg.mjs). The
   phone sits 32 from the top and runs off the bottom, as Helumi's windows run off the
   edge; `.bottom` turns it round for a screen whose story is at its foot. */
.moments { margin: 32px auto 0; display: grid; grid-template-columns: repeat(2, 428px); gap: 32px 24px; justify-content: center; text-align: left; }
.moment { display: flex; flex-direction: column; gap: 12px; }
.m-photo { position: relative; height: 260px; aspect-ratio: 428 / 260; border-radius: 16px; overflow: hidden; background-color: var(--card); background-position: center; background-size: cover; background-repeat: no-repeat; } /* the backdrop is set inline on each tile: a url() in a custom property resolves against this file's folder in Chrome, not the page's */
.m-phone {
  position: absolute; left: 50%; top: 32px; width: 300px; margin-left: -150px; padding: 6px; border-radius: 42px;
  background: #050505; box-shadow: 0 0 0 1.5px #2e2e2e, 0 24px 60px rgba(0, 0, 0, 0.5);
}
.m-phone.bottom { top: auto; bottom: 32px; }
.m-phone > img, .shot-slot, .scr { display: block; width: 288px; height: 240px; border-radius: 36px; } /* 300 wide: app text lands near 10px; at 240 it was 8 (Helumi shows its UI at true size) */
/* Every shot, handled, as phones (Richie, 2026-10-20: "we need mobile sizes"): a 1040
   measure, 3 across (2 under 1104 wide, 1 under 720); each a 300 wide phone (288 screen, 626 tall: the whole capture at the
   iPhone's points x 0.6545), the caption under it as before. */
#how { max-width: 1104px; }
.moments.phones { max-width: 1040px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
/* The phones sit straight on the page (Richie, 2026-10-20: "remove the bgs from the
   phones"; they were in softly lit cards): the grid's gaps alone make the 3 x 3. */
.ph-card { display: grid; place-items: center; }
.pt.full, .pt.full .band { height: 956.67px; }
.phone .shot-slot { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
@media (max-width: 1103px) { .moments.phones { grid-template-columns: repeat(2, minmax(0, 330px)); } }
@media (max-width: 719px) { .moments.phones { grid-template-columns: minmax(0, 360px); } }
/* No signal: the home screen's floating status, as the app draws it offline: only its
   second line changes (FloatingStatus.tsx), so that line is redrawn over the real one
   ("Free up 29.6 MB" at 124, 840 pt) in the pill's own grey, 15/20 at 64%. Resting look
   is the last state, "Backing up 3 files". */
.fs-sub { position: absolute; left: 123px; top: 836px; width: 190px; height: 21px; display: grid; background: rgb(41, 41, 41); font-size: 15px; line-height: 21px; letter-spacing: -0.1px; color: rgba(255, 255, 255, 0.64); }
.fs-sub > span { grid-area: 1 / 1; padding-left: 1px; }
.fs-a { opacity: 0; }
/* A screenshot still to come (data-shot names it; see the comment above the grid in
   index.html): a plain panel with the tile's name, so the slot reads as a slot. */
.shot-slot {
  display: grid; place-items: center; background: #141414; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 12px; line-height: 18px; color: var(--t3);
}
/* An animated screen: .scr clips the 288 x 240 screen; .pt is the band in the screenshot's
   own points (440 x 366.7), scaled 0.6545, so every overlay below sits at the point the
   app draws it (measured off the 1320 x 2868 captures, divided by 3, less the band's
   top). The overlays' resting look is the animation's last frame: what shows with no
   script, under Reduce Motion, and when a tile is off screen. site.js plays them. */
.scr { position: relative; overflow: hidden; background: #0a0a0a; }
.pt { position: absolute; left: 0; top: 0; width: 440px; height: 366.67px; transform: scale(0.654545); transform-origin: 0 0; font-family: "Inter", -apple-system, system-ui, sans-serif; }
.pt .band { position: absolute; left: 0; top: 0; width: 440px; height: 366.67px; }
/* The app's select mark (SelectionRail.tsx SelectMark): 22pt; off is a white ring on a
   dark wash, on is lime with the dark check. The ring before it is our backing up. */
.mk { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.mk-ring { position: absolute; inset: 0; width: 22px; height: 22px; transform: rotate(-90deg); opacity: 0; }
.mk-ring circle { fill: rgba(0, 0, 0, 0.25); stroke: #c6ff3d; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 62.83; stroke-dashoffset: 0; }
.mk-on { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #c6ff3d; }
.mk-on svg { width: 14px; height: 14px; fill: none; stroke: #131a00; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk.off { box-sizing: border-box; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.25); opacity: 0; }
/* Viewer: the info sheet (cut from viewer-info) and the dim behind it, 52% as measured. */
.pt .dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.48); }
.pt .sheet { position: absolute; left: 0; top: 102.33px; width: 440px; height: 264.33px; }
/* Free up: a lime ring off each tick, and the button redrawn over the real one (856 x 144
   px at 232, 2646) so its total can count. */
.pz { position: absolute; width: 15.33px; height: 15.33px; margin: -7.67px 0 0 -7.67px; border-radius: 50%; box-shadow: 0 0 0 2px #c6ff3d; opacity: 0; }
.fu-go {
  position: absolute; left: 77.33px; top: 292.67px; width: 285.33px; height: 48px; border-radius: 24px; background: #c6ff3c;
  display: grid; place-items: center; font-size: 17px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; color: #161c03; font-variant-numeric: tabular-nums;
}
/* The app's toast (lib/toast.tsx): top centre, a #1d1d1d pill, a tinted 38pt icon circle,
   title 15/20 at 600, detail 13/18. */
.toast {
  position: absolute; left: 0; right: 0; top: 58px; margin: 0 auto; width: max-content; display: flex; align-items: center; gap: 10px;
  padding: 9px 20px 9px 9px; border-radius: 30px; background: #1d1d1d; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.45); white-space: nowrap;
}
/* A toast whose crop is not centred on the screen keeps the screen's centre: the row spans the screen's middle 300 pt. */
.toast-row { position: absolute; width: 300px; height: 0; }
.toast-row .toast { top: 0; }
.t-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(198, 255, 61, 0.13); box-shadow: inset 0 0 0 1px rgba(198, 255, 61, 0.25); }
.t-ic svg { width: 18px; height: 18px; fill: none; stroke: #c6ff3d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-tx { display: flex; flex-direction: column; gap: 1px; }
.t-tx b { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; color: #fafafa; }
.t-tx i { font-style: normal; font-size: 13px; line-height: 18px; color: #b4b4b4; }
/* Recently Deleted: the restored tile (cut from the capture) over a patch of the app's
   #0a0a0a, so when it goes, the grid has a gap where it was. */
.rd-hole, .rd-tile { position: absolute; left: 120px; top: 182px; width: 96px; height: 126.33px; background: #0a0a0a; }
.rd-tile { opacity: 0; }
.rd-tile img { display: block; width: 100%; height: 100%; }
.rd-mk { left: 79px; top: 17px; }
.rd-mk .mk-on { opacity: 0; }

/* The Live Activity, as the app draws it (its SwiftUI, rendered): a card, not a phone. */
.m-card { position: absolute; left: 50%; top: 50%; width: 340px; max-width: calc(100% - 48px); transform: translate(-50%, -50%); }
.m-card img { display: block; width: 100%; height: auto; border-radius: 23px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.moment figcaption { display: grid; gap: 2px; font-size: 14px; line-height: 21px; }
.moment figcaption b { font-weight: 700; color: #fff; }
.moment figcaption span { color: var(--t2); }

/* ---------- Why nameless: Helumi's "why helumi?" table ----------
   A 760 card, 8 16 12 in, radius 16; the head row 76 tall with each column's mark and name
   (ours 14/21 at 600, the column filled: Helumi's 4% grey, here 6% white, radius 10 at its
   ends); rows with a hairline above, our column a 20px tick. Helumi's rows are one 14/21
   label, and so are ours; the cells say yes (a 20px tick), no (a dash) or a few words. */
.cmp {
  margin: 32px auto 0; width: 100%; max-width: 1040px; border-collapse: separate; border-spacing: 0;
  padding: 8px 16px 12px; border-radius: 16px; background: var(--card); text-align: left;
}
.cmp thead td, .cmp thead th { height: 76px; padding: 0 8px; }
.cmp .cmp-us { width: 168px; text-align: center; vertical-align: middle; background: rgba(255, 255, 255, 0.06); }
.cmp thead .cmp-us { border-radius: 10px 10px 0 0; }
.cmp tbody tr:last-child .cmp-us { border-radius: 0 0 10px 10px; }
.cmp-brand { display: inline-grid; justify-items: center; gap: 6px; font-size: 14px; line-height: 21px; font-weight: 600; color: #fff; }
.cmp-brand svg { width: 24px; height: 22px; }
.cmp tbody th, .cmp tbody td { padding: 14px 8px 14px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); font-weight: 400; vertical-align: middle; }
.cmp tbody td { padding: 14px 8px; }
.cmp tbody th { font-size: 14px; line-height: 21px; color: #fff; }
.cmp tbody th, .cmp tbody td { height: 52px; }
/* One row height, set by the tallest real row (the invites row: label and its link, 69): 72 on
   desktop. Phones stack each row, so there the content sets it. */
@media (min-width: 641px) { .cmp tbody th, .cmp tbody td { height: 72px; } }
.cmp-4 th, .cmp-4 td { width: 128px; text-align: center; }
.cmp-4 tbody th, .cmp-4 thead td:first-child { width: auto; text-align: left; }
.cmp-them { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--t3); }
.cmp-brand .g { width: 22px; height: 22px; fill: none; stroke: var(--t3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cmp-text { display: inline-block; font-size: 12px; line-height: 18px; color: var(--t2); }
.cmp-no { display: inline-block; width: 8px; height: 1.5px; border-radius: 1px; background: var(--t3); vertical-align: middle; } /* the "no" mark, drawn: a dash glyph would break the no-dashes copy rule */
/* Ships only once naira payment on the web is live (index.html, WHY comment). */
.cmp [data-requires="paystack"] { display: none; }
@media (max-width: 640px) {
  /* Helumi at 375: the marks in a row of four, each label on its own line above its cells. */
  .cmp-4, .cmp-4 thead, .cmp-4 tbody { display: block; }
  .cmp-4 tr { display: grid; grid-template-columns: repeat(4, 1fr); }
  .cmp-plans tr { grid-template-columns: repeat(3, 1fr); }
  .cmp-4 [data-requires="paystack"] { display: none; }
  .cmp-4 thead td:first-child { display: none; }
  .cmp-4 thead th { height: 64px; padding: 0 4px; display: grid; place-items: center; }
  .cmp-4 th, .cmp-4 td { width: auto; }
  .cmp-4 tbody th { grid-column: 1 / -1; height: auto; padding: 12px 0 8px; }
  .cmp-4 tbody td { height: auto; min-height: 40px; padding: 0 4px 12px; box-shadow: none; display: grid; place-items: center; }
  .cmp-4 .cmp-us, .cmp-4 thead .cmp-us, .cmp-4 tbody tr:last-child .cmp-us { border-radius: 10px; padding-top: 8px; }
}
/* Ticks: one hand-drawn tick (index.html #tick) that breaks out of its circle. Ours: a lime disc
   (the app's colour for safe) with the tick dark inside it and lime where it leaves; theirs: a
   grey ring and grey tick. Read in greyscale both are still a tick (status is a glyph and a
   hue). 24px box, the circle 16 of it; the sweep leaves it at the top right. */
.cmp-yes { display: block; margin: 0 auto; width: 24px; height: 24px; overflow: visible; --tick-ring: rgba(255, 255, 255, 0.34); --tick: rgba(255, 255, 255, 0.72); } /* ring 3:1 on the card */
.cmp-us .cmp-yes { --tick-disc: #c6ff3d; --tick-ring: none; --tick: #c6ff3d; --tick-in: #131a00; }

/* ---------- Coming soon: Nameless on the Mac ----------
   Ours, not Helumi's: a MacBook drawn here, a dark Finder window on its screen with
   Nameless under Locations and the library inside it, every file "in the cloud". A small
   pill says it isn't here yet. */
.soon {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-bottom: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); font-size: 12px; line-height: 18px; font-weight: 500; color: #fff;
}
/* The MacBook: 880 wide, a 16:10 screen of 860 x 538 under a 10px bezel with a notch, a
   slim base 920 wide under it. Every size below is in em off .mac's font size, which is
   16px when the Mac is 880 wide and shrinks with the column, so the whole machine scales
   as one picture on a phone (no squashing, nothing hidden). Numbers in the comments are
   the 880 design in px. */
.mac { --mac-w: min(880px, 100vw - 64px); font-size: calc(var(--mac-w) / 55); width: var(--mac-w); margin: 32px auto 0; text-align: left; }
.mac-lid {
  position: relative; padding: 0.625em; border-radius: 1.125em 1.125em 0.375em 0.375em; /* 10 bezel, 18 top corners */
  /* A Space Black MacBook Pro (Richie, 2026-11-03: redesign the Mac): a true black bezel inside
     a thin anodised rim, lit a touch brighter along the top edge where the light falls. */
  background: #000;
  box-shadow: 0 0 0 0.0625em #2f2f31, 0 0 0 0.125em #19191a, inset 0 0.0625em 0 rgba(255, 255, 255, 0.07), 0 2.5em 5em -1em rgba(0, 0, 0, 0.7);
}
.mac-screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 0.5em 0.5em 0.125em 0.125em; overflow: hidden; /* 860 x 538 */
  background-color: #141414; background-size: cover; background-position: center;
}
.mac-lid::after { /* the notch: 110 x 18, in the bezel's black, hanging into the menu bar */
  content: ""; position: absolute; left: 50%; top: 0.625em; width: 6.875em; height: 1.125em; margin-left: -3.4375em;
  border-radius: 0 0 0.5em 0.5em; background: #000; z-index: 2;
}
.mac-base { /* 920 x 14, wider than the lid, with the thumb notch at its front edge */
  /* The deck in Space Black aluminium: a bright chamfer along the top, the body darkening to
     the front lip, which rounds under; a soft contact shadow sets it on the page. */
  position: relative; height: 0.875em; margin: 0 -1.25em; border-radius: 0.1875em 0.1875em 1em 1em / 0.1875em 0.1875em 0.75em 0.75em;
  background: linear-gradient(#5c5c60 0, #3a3a3d 0.0625em, #2c2c2e 0.25em, #1d1d1f 70%, #111112);
  box-shadow: inset 0.0625em 0 0 rgba(255, 255, 255, 0.05), inset -0.0625em 0 0 rgba(255, 255, 255, 0.05), 0 1em 1.5em -0.5em rgba(0, 0, 0, 0.8);
}
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 7.5em; height: 0.3125em; margin-left: -3.75em; border-radius: 0 0 0.5em 0.5em; background: linear-gradient(#141415, #222224); box-shadow: inset 0 -0.0625em 0 rgba(255, 255, 255, 0.06); }
.mac-menu { /* 24 tall, translucent, 12.5px items */
  position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 1.125em; height: 1.5em; padding: 0 0.875em;
  background: rgba(10, 10, 10, 0.45); font-size: 0.78125em; color: rgba(255, 255, 255, 0.9);
}
.mac-menu b { font-weight: 700; }
.mac-menu em { margin-left: auto; font-style: normal; }
.finder { /* 800 x 476, 30 from the sides, 40 from the top */
  position: absolute; left: 1.875em; right: 1.875em; top: 2.5em; bottom: 1.375em;
  display: grid; grid-template-columns: 10.625em 1fr; border-radius: 0.75em; overflow: hidden;
  background: rgba(26, 26, 26, 0.97); box-shadow: 0 0 0 0.0625em rgba(255, 255, 255, 0.12), 0 1.5em 4em rgba(0, 0, 0, 0.55);
}
.f-side { padding: 0.75em 0.5em 1em; background: rgba(20, 20, 20, 0.96); box-shadow: inset -0.0625em 0 0 rgba(255, 255, 255, 0.06); }
.f-dots { display: flex; gap: 0.5em; margin: 0.25em 0.5em 1em; }
.f-dots i { width: 0.75em; height: 0.75em; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.f-group { margin: 0.75em 0.5em 0.25em; font-size: 0.6875em; line-height: 1.45; font-weight: 600; color: var(--t3); }
.f-dots + .f-group { margin-top: 0; }
.f-item { display: flex; align-items: center; gap: 0.5em; height: 1.75em; padding: 0 0.5em; border-radius: 0.375em; font-size: 0.8125em; color: rgba(255, 255, 255, 0.8); }
.f-item svg { flex: none; width: 1.23em; height: 1.23em; fill: none; stroke: var(--t3); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.f-item.on { background: rgba(255, 255, 255, 0.1); color: #fff; }
.f-item .f-mark { height: 1.15em; stroke: none; }
.f-main { display: flex; flex-direction: column; min-width: 0; }
.f-bar { display: flex; align-items: center; gap: 0.75em; height: 3em; padding: 0 1em; box-shadow: inset 0 -0.0625em 0 rgba(255, 255, 255, 0.06); }
.f-bar b { font-size: 0.9375em; font-weight: 600; color: #fff; }
.f-nav { display: flex; gap: 0.25em; }
.f-nav svg { width: 1em; height: 1em; fill: none; stroke: var(--t3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.f-grid { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); align-content: start; gap: 1em 0.5em; padding: 1.25em 1em; }
.f-file { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.375em; min-width: 0; text-align: center; border-radius: 0.375em; }
.f-file img, .f-folder { width: 4em; height: 4em; border-radius: 0.375em; object-fit: cover; }
.f-folder { position: relative; height: 3.125em; margin: 0.625em 0 0.25em; background: #5aa9f0; }
.f-folder::before { content: ""; position: absolute; left: 0.25em; top: -0.375em; width: 1.5em; height: 0.625em; border-radius: 0.25em 0.25em 0 0; background: #4a93d6; }
.f-file b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75em; line-height: 1.33; font-weight: 400; color: #fff; }
.f-file i { font-style: normal; font-size: 0.6875em; line-height: 1.27; color: var(--t3); }
.f-status { display: flex; align-items: center; gap: 0.375em; height: 2em; padding: 0 1em; font-size: 0.6875em; color: var(--t3); box-shadow: inset 0 0.0625em 0 rgba(255, 255, 255, 0.06); }
.f-status svg { width: 1.27em; height: 1.27em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
/* ---- The Mac in use: Tada's presence cursor and a Quick Look, driven by site.js ----
   The cursor is Tada's (apps/marketing/.../record/RecorderCursor.tsx): the dart drawn twice
   (a 7-wide white keyline under a 3-wide pass of the colour, round joins), a dart-shaped
   shadow, a name pill hung clear of its tail. Sizes are Tada's 22 x 24 dart and 12px pill,
   in em so they scale with the Mac. Ours: lime #C6FF3D, ink #131a00, "you". The element's
   origin is the dart's tip, so a press pivots on the point it presses. */
.cur { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; }
.cur-dart { position: absolute; left: -0.256em; top: -0.1875em; width: 1.375em; height: 1.5em; transform-origin: 0.256em 0.1875em; filter: drop-shadow(0 1px 1px rgba(19, 26, 0, 0.22)) drop-shadow(0 3px 6px rgba(19, 26, 0, 0.18)); }
.cur-dart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cur-pill {
  position: absolute; left: 1em; top: 1.3125em; padding: 0.333em 0.667em 0.417em; border-radius: 0.5em; background: #c6ff3d; color: #131a00;
  font-size: 0.75em; line-height: 1; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(19, 26, 0, 0.18), 0 3px 8px rgba(19, 26, 0, 0.16);
}
.cur-ring { position: absolute; left: -0.625em; top: -0.625em; width: 1.25em; height: 1.25em; border-radius: 50%; box-shadow: inset 0 0 0 0.125em rgba(198, 255, 61, 0.9); opacity: 0; }
.f-file.sel { background: rgba(255, 255, 255, 0.1); }
.f-file.sel b { color: #fff; }
/* Quick Look: 272 wide, centred on the screen, the still 3:4, a bar for its name, a foot
   with play, the track filling and "streaming from nameless". */
.ql { position: absolute; z-index: 4; inset: 1.5em 0 0; margin: auto; width: 17em; height: 26.75em; border-radius: 0.75em; overflow: hidden;
  background: rgba(30, 30, 30, 0.97); box-shadow: 0 0 0 0.0625em rgba(255, 255, 255, 0.14), 0 2em 5em rgba(0, 0, 0, 0.6); }
.ql[hidden] { display: none; }
.ql-bar { position: relative; display: grid; place-items: center; height: 1.75em; }
.ql-bar b { font-size: 0.75em; font-weight: 600; color: #fff; }
.ql-x { position: absolute; left: 0.625em; top: 0.5em; width: 0.75em; height: 0.75em; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.ql img { display: block; width: 100%; height: 22.67em; object-fit: cover; }
.ql-foot { display: flex; align-items: center; gap: 0.5em; height: 2.33em; padding: 0 0.75em; }
.ql-play svg { display: block; width: 0.75em; height: 0.75em; fill: #fff; }
.ql-track { flex: 1; height: 0.25em; border-radius: 0.125em; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.ql-track i { display: block; height: 100%; background: rgba(255, 255, 255, 0.8); transform-origin: 0 50%; transform: scaleX(0.35); }
.ql-note { display: flex; align-items: center; gap: 0.3em; font-size: 0.625em; color: var(--t3); white-space: nowrap; }
.ql-note svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.mac-ask { margin-top: 24px; font-size: 14px; line-height: 21px; }
.mac-ask a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }

/* The Mac waitlist popup, built as a price card (Richie, 2026-11-03): radius 16, padding 28 20,
   the card ground, the tick list, one full-width button (the only primary). Measured at 1440
   and 390: content edges 20 in on both sides; chip and close centred on one line; groups 16 or
   24 apart, lines within a group 6; field and button 44 tall (touch); the note under the
   button doubles as the error line, so nothing jumps when one shows. A modal stays centred;
   on a phone it is a sheet from the bottom. Enter 220ms, exit 150ms, ease-out both. */
/* The dialog sits outside the sections, so it carries their colour tokens itself. */
.wl-dialog { --card: #1a1a1a; --t2: rgba(255, 255, 255, 0.64); --t3: rgba(255, 255, 255, 0.56); }
.wl-dialog { width: min(400px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: none; color: #fff; overflow: visible; }
.wl-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.wl-card { padding: 28px 20px; border-radius: 16px; background: var(--card); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); text-align: left; }
.wl-top { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 16px; }
.wl-top .soon { margin: 0; }
.wl-close { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.wl-close::after { content: ""; position: absolute; inset: -6px; } /* a 44px target around the 32px mark */
.wl-close:active { transform: scale(0.94); }
.wl-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .wl-close:hover { background: rgba(255, 255, 255, 0.14); } }
.wl-title { margin: 0; font-family: "Inter Tight", Inter, system-ui, sans-serif; font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -0.03em; }
.wl-title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.14em; letter-spacing: -0.01em; color: #c6ff3d; }
.wl-sub { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--t2); }
.wl-list { margin: 24px 0; }
.wl { display: grid; gap: 8px; }
.wl input[type="email"] { width: 100%; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #0d0d0d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 16px; outline: none; transition: box-shadow 150ms ease; }
.wl input[type="email"]:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); }
.wl input::placeholder { color: rgba(255, 255, 255, 0.34); }
.wl-go { width: 100%; height: 44px; justify-content: center; border: 0; cursor: pointer; font-family: inherit; }
.wl .wl-label { transition: opacity 150ms ease; }
.wl.sending .wl-label { opacity: 0.5; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-msg { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--t3); text-align: center; }
.wl-msg.bad { color: #ff6b6b; }
.wl-done { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 12px 16px; border-radius: 12px; background: #0d0d0d; font-size: 14px; line-height: 21px; color: #fff; animation: wl-swap 220ms var(--ease-out) both; }
.wl-done svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #c6ff3d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes wl-swap { from { opacity: 0; transform: scale(0.97); filter: blur(4px); } }
.wl-dialog[open] { animation: wl-in 220ms var(--ease-out); }
.wl-dialog[open]::backdrop { animation: wl-fade 220ms var(--ease-out); }
.wl-dialog.closing { animation: wl-out 150ms var(--ease-out) forwards; }
.wl-dialog.closing::backdrop { animation: wl-fade 150ms var(--ease-out) reverse forwards; }
@keyframes wl-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes wl-out { to { opacity: 0; transform: scale(0.97); } }
@keyframes wl-fade { from { opacity: 0; } }
@media (max-width: 479px) {
  .wl-dialog { width: 100vw; margin: auto 0 0; }
  .wl-card { padding-bottom: calc(28px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .wl-dialog[open] { animation: wl-up 300ms cubic-bezier(0.32, 0.72, 0, 1); }
  .wl-dialog.closing { animation: wl-down 180ms var(--ease-out) forwards; }
  @keyframes wl-up { from { transform: translateY(100%); } }
  @keyframes wl-down { to { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .wl-dialog[open], .wl-dialog.closing, .wl-dialog[open]::backdrop, .wl-dialog.closing::backdrop, .wl-done { animation-duration: 1ms; }
}


/* ---------- Plans: two of Helumi's price cards ----------
   Each card is Helumi's 360 wide one: 28 20 in, radius 16; size 32/32 at 600 over "of
   space" 14/21 at 56%; price 24/24 at 600 with "a month" at 56%; the plan's name 14/21 at
   64%, 12 under; the list 14/21, 8 apart, 24 under; the button 40 (44 on a phone) tall, 24
   under, held to the foot so both buttons line up. Side by side 24 apart (Helumi's grid
   gap); stacked under 808 wide. */
.price-row { margin: 32px auto 0; display: grid; grid-template-columns: repeat(2, 360px); gap: 24px; justify-content: center; }
.price-card { display: flex; flex-direction: column; padding: 28px 20px; border-radius: 16px; background: var(--card); text-align: left; }
.price-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.price-size { font-size: 32px; line-height: 32px; font-weight: 600; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.price-sub { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--t3); }
.price-amount { display: flex; align-items: baseline; white-space: nowrap; }
.price-number { font-size: 24px; line-height: 24px; font-weight: 600; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.price-period { margin-left: 4px; font-size: 14px; line-height: 21px; color: var(--t3); }
.price-name { margin-top: 12px; font-size: 14px; line-height: 21px; font-weight: 400; color: var(--t3); } /* one grey per card, with "of space" */
.price-list { margin: 24px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
/* A wrapped point keeps its tick on its first line (12px tick, 21px line: 4.5 down). */
.price-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 21px; color: #fff; }
.price-list svg { flex: none; margin-top: 4.5px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.price-go { margin-top: auto; width: 100%; height: 44px; justify-content: center; } /* 44 everywhere: the modal's and the phone's height (same job, same look) */
.price-go svg:not(.apple) { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.price-free { margin: 24px auto 0; max-width: 440px; font-size: 14px; line-height: 21px; color: var(--t2); }
.price-free a, .hfoot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.price-free a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); }
.price-note { margin: 4px auto 0; max-width: 440px; font-size: 12px; line-height: 18px; color: var(--t3); }

/* ---------- Questions: Helumi's accordion ----------
   A 520 card, 0 16 in, radius 16; rows 45 tall: question 14/21 at 500, 12 above and below,
   32 kept clear on the right for the plus; answer 14/21 at 64%, 12 under. A hairline
   between rows. The plus turns to a cross when open. */
.faq { max-width: 520px; margin: 20px auto 0; padding: 0 16px; border-radius: 16px; background: var(--card); text-align: left; }
.faq details + details { box-shadow: inset 0 1px 0 var(--rule); }
.faq summary {
  position: relative; display: block; padding: 12px 32px 12px 0; cursor: pointer; list-style: none;
  font-size: 14px; line-height: 21px; font-weight: 500; color: #fff;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { /* the plus: two 1.5px bars, 10 wide */
  content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: linear-gradient(var(--t3), var(--t3)) center / 10px 1.5px no-repeat, linear-gradient(var(--t3), var(--t3)) center / 1.5px 10px no-repeat;
  transition: transform 200ms var(--ease-out);
}
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; } /* 4 out: at 0 it touched the first letter */
.faq details p { padding: 0 32px 12px 0; font-size: 14px; line-height: 21px; color: var(--t2); }
.faq details[open] p { animation: faq-in 200ms ease-out; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
@media (hover: hover) and (pointer: fine) { .faq summary:hover::after { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); } }

/* ---------- Footer: ours ----------
   One left anchor at the page's content edge (the 880 column): the brand block and two link
   columns on one row, a hairline, the legal line, then "keep shooting." in the title voice as
   the page's last word, large and quiet, cut by the page's bottom edge. Links 14/21 at 64%,
   column heads 12/18 at 40%; 96 above, groups 32 and 48 apart. */
.hfoot {
  max-width: 944px; margin: 0 auto; padding: 80px 32px 0; overflow: hidden; text-align: left; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, 0.64);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
}
.hfoot a { color: inherit; text-decoration: none; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .hfoot a:hover, .price-free a:hover { color: #fff; text-decoration-color: currentColor; } }
.hfoot-top { display: flex; justify-content: space-between; gap: 48px; padding-bottom: 32px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
.hfoot-lockup { display: inline-flex; align-items: center; gap: 8px; font-family: "Inter Tight", Inter, system-ui, sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.02em; color: #fff !important; }
.hfoot-lockup svg { width: 24px; height: 22px; }
.hfoot-brand p { margin-top: 8px; }
.hfoot-cols { display: flex; gap: 64px; }
.hfoot-cols > div { display: grid; align-content: start; gap: 8px; }
.hfoot-h { font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.4); }
.hfoot-legal { margin-top: 24px; font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.4); }
.hfoot-word {
  margin: 48px 0 -0.22em; font-family: "Inter Tight", Inter, system-ui, sans-serif; font-weight: 600; font-size: min(130px, calc((100vw - 64px) / 6.75)); line-height: 1; letter-spacing: -0.05em; /* "keep [clover] shooting." measures 6.7em: it fills the 880 column and never overflows it */
  color: rgba(255, 255, 255, 0.06); white-space: nowrap; user-select: none;
}
/* The clover between the words, as in the hero's "keep [clover] shooting.", in the word's own
   quiet inks: white pebbles at the word's white, lime ones at its lime. Sized to the x-height
   band like the hero's mark (0.72em tall). */
.hfoot-clover { display: inline-block; width: 0.78em; height: 0.72em; margin: 0 0.02em; vertical-align: -0.02em; }
.hfoot-clover .w { fill: rgba(255, 255, 255, 0.06); }
.hfoot-clover .l { fill: rgba(198, 255, 61, 0.14); }
.hfoot-word em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.14em; letter-spacing: -0.02em; color: rgba(198, 255, 61, 0.14); }

/* ---------- Phone (Helumi's 375 numbers) ----------
   Sections 64 above with 24 sides; titles 24/28.8, 12 to the line under; the grid one
   column; the table 12 in, our column 76; the Mac scaled whole;
   buttons 44 tall; the footer 24 sides. */
@media (max-width: 943px) { .moments { grid-template-columns: minmax(0, 428px); } }
@media (max-width: 807px) { .price-row { grid-template-columns: minmax(0, 360px); } }
@media (max-width: 640px) {
  .hsec { padding: 64px 24px 0; }
  .htitle { font-size: 24px; }
  .hbody { margin-top: 12px; }
  .cmp { padding: 8px 12px 12px; }
  .cmp .cmp-us { width: 76px; }
  .mac { --mac-w: min(880px, 100vw - 48px); }
  .hfoot { padding: 64px 24px 0; }
  .hfoot-top { flex-direction: column; gap: 32px; }
  .hfoot-cols { gap: 48px; }
  .hfoot-word { font-size: 25vw; white-space: normal; line-height: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .faq details[open] p { animation: fade-in 200ms ease-out; }
  @keyframes fade-in { from { opacity: 0; } }
  .faq summary::after { transition: none; }
}
}

/* ---------- Seen this before: Helumi's "sound familiar?", with iPhones ----------
   Richie, 2026-10-20: "no way looks like a phone" (the first drawing was squat, thick framed,
   no Dynamic Island). Now the grid's own phone (.phone: 300 wide, the iPhone 17 Pro Max's
   440 x 956.7 pt screen at 0.6545, thin bezel), two side by side, stacked on a phone. Each
   screen is drawn in the iPhone's points inside .pt.full: the Camera in iOS 26's chrome over a
   real photo (Unsplash, free licence: Ben Iwara's suya stall in Benin City, photo-1765584830134; the
   roll thumbnail is his roadside plantain stall, photo-1765584830351. Warm reds and yellows on
   purpose, Richie 2026-11-03: no blue or purple), then iOS's banner and alert (Apple's words, as iOS writes
   them); and Settings, iPhone Storage, in iOS 26 dark (the numbers are illustrative and add
   up: 125.8 GB of 128 GB, 2.2 GB free: under the 3 GB at which the app's Phone nearly full
   notice speaks, so the picture matches what the app does). Icons are our own glyphs, no Apple artwork. */
.hsec.pains { max-width: 1104px; }
/* A section with no title of its own starts at the rhythm (80 / 64): its first block drops the
   32 it keeps for sitting under a title (measured 112 before, 2026-11-03). */
.hsec > :first-child:not(.htitle):not(.soon) { margin-top: 0; }
/* A page's own first section (/how-it-works/, /plans/): the hero's room above it, so its title
   sits where the homepage's headline does. */
.hpage { padding-top: 128px; }
.hpage h1.htitle { font-size: 48px; line-height: 52px; }
@media (max-width: 640px) { .hpage { padding-top: 112px; } .hpage h1.htitle { font-size: 40px; line-height: 44px; } }
.pains-stage { display: flex; justify-content: center; align-items: flex-start; gap: 40px; margin: 32px auto 0; text-align: left; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
@media (max-width: 719px) { .pains-stage { flex-direction: column; align-items: center; gap: 32px; } }
.ip-island { position: absolute; z-index: 9; left: 157px; top: 11px; width: 126px; height: 37px; border-radius: 19px; background: #000; }
/* Solid black, no rim and no lens: a real Dynamic Island shows neither, and the drawn lens dot
   read as an Android punch-hole camera (Richie, 2026-11-03: "looks like an android phone ...
   whats that camera?"). The hero's island is the reference. */
.ip-sb { position: absolute; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 46px; color: #fff; }
.ip-sb b { font-size: 17px; font-weight: 600; }
.ip-sbi { display: flex; align-items: center; gap: 6px; }
.ip-sbi i { display: block; }
.ip-sbi .sig { width: 18px; height: 11px; background: linear-gradient(#fff, #fff) 0 100% / 3px 4px no-repeat, linear-gradient(#fff, #fff) 5px 100% / 3px 6px no-repeat, linear-gradient(#fff, #fff) 10px 100% / 3px 8.5px no-repeat, linear-gradient(#fff, #fff) 15px 100% / 3px 11px no-repeat; }
.ip-sbi .wifi { width: 16px; height: 12px; border-radius: 16px 16px 0 0 / 14px 14px 0 0; background: radial-gradient(circle at 50% 100%, #fff 0 2.5px, transparent 3px 5px, #fff 5.5px 8px, transparent 8.5px 10.5px, #fff 11px 13.5px, transparent 14px);  clip-path: polygon(50% 100%, -10% 0, 110% 0); }
.ip-sbi .bat { width: 25px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); background: linear-gradient(90deg, #fff 0 18%, transparent 18%) no-repeat 2px 50% / calc(100% - 4px) 8px; }
/* The Camera, iOS 26: black ground, a small top bar, the 3:4 viewfinder, zoom pills on it,
   the mode strip with PHOTO in yellow, the shutter, the last photo bottom left, flip right. */
.ip-cam { position: absolute; inset: 0; background: #0a0a0a; color: #fff; } /* the hero app's own black (sampled), so all three phones match (Richie, 2026-11-03) */
/* The camera, live (Richie, 2026-11-03: "must there be an image? ... something that moves? you press
   the capture button and it pops up"). No photo: the viewfinder is out-of-focus warm light
   drifting, a shoot before focus lands, so there is no subject to judge. site.js presses the
   shutter, then iOS's alert pops and its banner drops; it clears and plays again.
   Rows, in the iPhone 17 Pro Max's points (956.67 tall): 4:3 viewfinder 160 to 747, zoom on it
   at 688, modes at 768, the shutter row centred on 855 (shutter 66, thumb and flip 46), so
   about 69 pt is left under it for the home bar (Richie: the shutter was too big and too high). */
.cam-tb { position: absolute; left: 0; right: 0; top: 96px; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
/* At rest the banner is down, so the top controls are under it (the scene brings them back). */
.ip-cam .cam-tb { opacity: 0; }
.cam-tb i { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.cam-tb .cam-chev { width: 26px; height: 12px; border-radius: 0; background: none; border: solid #fff; border-width: 2.5px 2.5px 0 0; transform: rotate(-45deg) scale(0.55); }
.cam-tb .cam-flash { background: rgba(255, 255, 255, 0.12) radial-gradient(circle, transparent 0 0) ; position: relative; }
.cam-tb .cam-flash::before { content: ""; position: absolute; left: 11px; top: 7px; width: 8px; height: 16px; background: #fff; clip-path: polygon(60% 0, 0 58%, 45% 58%, 30% 100%, 100% 38%, 55% 38%); }
.cam-tb .cam-live { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px rgba(0, 0, 0, 0.6), inset 0 0 0 8px #fff; }
.cam-vf { position: absolute; left: 0; top: 160px; width: 440px; height: 587px; overflow: hidden; }
.cam-lights { background: radial-gradient(120% 90% at 50% 60%, #2a1a0c 0%, #140d07 55%, #0a0806 100%); }
.cam-lights i { position: absolute; border-radius: 50%; filter: blur(22px); opacity: 0.85; animation: cam-drift 9s ease-in-out infinite alternate; }
.cam-lights i:nth-child(1) { left: 40px; top: 90px; width: 150px; height: 150px; background: #ff9f43; animation-duration: 8s; }
.cam-lights i:nth-child(2) { left: 230px; top: 160px; width: 120px; height: 120px; background: #ffd27a; animation-duration: 10s; animation-delay: -3s; }
.cam-lights i:nth-child(3) { left: 120px; top: 330px; width: 170px; height: 170px; background: #ff6b3d; opacity: 0.7; animation-duration: 11s; animation-delay: -5s; }
.cam-lights i:nth-child(4) { left: 300px; top: 380px; width: 90px; height: 90px; background: #fff1d6; opacity: 0.6; animation-duration: 7s; animation-delay: -2s; }
.cam-lights i:nth-child(5) { left: 20px; top: 430px; width: 80px; height: 80px; background: #c6ff3d; opacity: 0.35; animation-duration: 12s; animation-delay: -6s; }
@keyframes cam-drift { from { transform: translate(-14px, 10px) scale(0.92); } to { transform: translate(18px, -16px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .cam-lights i { animation: none; } }
.cam-zoom { position: absolute; left: 0; right: 0; top: 688px; margin: 0 auto; width: max-content; display: flex; gap: 8px; padding: 4px; border-radius: 22px; background: rgba(0, 0, 0, 0.35); }
.cam-zoom i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; background: rgba(40, 40, 40, 0.75); color: #fff; }
.cam-zoom i.on { width: 42px; height: 42px; margin: -3px 0; font-size: 14px; color: #ffd60a; }
.cam-modes { position: absolute; left: 0; right: 0; top: 768px; display: flex; justify-content: center; gap: 26px; padding-left: 6px; }
.cam-modes i { font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.9); }
.cam-modes i.on { color: #ffd60a; }
.cam-shutter { position: absolute; left: 187px; top: 822px; width: 66px; height: 66px; border-radius: 50%; box-shadow: inset 0 0 0 4px #fff; display: grid; place-items: center; }
.cam-shutter i { width: 54px; height: 54px; border-radius: 50%; background: #fff; }
.cam-thumb { position: absolute; left: 40px; top: 832px; width: 46px; height: 46px; border-radius: 9px; background: radial-gradient(70% 70% at 40% 40%, #ffb860, #b8461f 70%, #3a1a0c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.cam-flip { position: absolute; right: 40px; top: 832px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); }
.cam-flip svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* iOS 26's banner: rounded glass, the Settings gear, title, line, "now". */
.ios-note {
  position: absolute; z-index: 7; left: 10px; right: 10px; top: 56px; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: 26px; background: rgba(50, 50, 52, 0.97); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.in-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(#a2a2a7, #6c6c71); }
.in-ic svg { width: 26px; height: 26px; fill: none; stroke: #f2f2f7; stroke-width: 1.8; stroke-linecap: round; }
.in-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.in-tx b { font-size: 15px; line-height: 20px; font-weight: 600; color: #fff; }
.in-tx span { font-size: 15px; line-height: 20px; color: rgba(255, 255, 255, 0.85); }
.ios-note em { align-self: flex-start; font-style: normal; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
/* iOS 26's alert: a rounded glass card, two capsule buttons. */
.ios-dim { position: absolute; z-index: 5; inset: 0; background: rgba(0, 0, 0, 0.35); }
.ios-alert {
  position: absolute; z-index: 8; left: 70px; right: 70px; top: 360px; padding: 22px 18px 18px; border-radius: 34px; text-align: center;
  background: rgba(44, 44, 46, 0.86); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 20px 50px rgba(0, 0, 0, 0.45); color: #fff;
}
.ios-alert b { display: block; font-size: 17px; line-height: 22px; font-weight: 600; }
.ios-alert p { margin-top: 6px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, 0.85); }
.ia-btns { display: flex; gap: 10px; margin-top: 18px; }
.ia-btns span { flex: 1; display: grid; place-items: center; height: 46px; border-radius: 23px; background: rgba(255, 255, 255, 0.12); font-size: 17px; }
.ia-btns .ia-main { font-weight: 600; background: #0a84ff; }
/* Settings, iPhone Storage, iOS 26 dark: a glass back button, a large title, grouped
   cards (#1c1c1e, radius 26), the bar, a recommendation, the app list. */
.ip-set { position: absolute; inset: 0; background: #0a0a0a; color: #fff; }
.ip-back { position: absolute; left: 16px; top: 62px; width: 44px; height: 44px; border-radius: 50%; background: rgba(120, 120, 128, 0.32); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15); }
.ip-back i { position: absolute; left: 18px; top: 15px; width: 12px; height: 12px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); }
.ip-ttl { position: absolute; left: 20px; top: 118px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.01em; }
.ip-card { position: relative; margin: 0 16px; padding: 16px; border-radius: 26px; background: #1c1c1e; }
.ip-set > .ip-card:first-of-type { margin-top: 176px; }
.ip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ip-row b { font-size: 17px; font-weight: 600; }
.ip-row span { font-size: 15px; color: rgba(235, 235, 245, 0.6); white-space: nowrap; }
.ip-bar { display: flex; gap: 2px; height: 22px; margin-top: 14px; border-radius: 6px; overflow: hidden; background: #3a3a3c; }
.ip-bar i { display: block; height: 100%; transform-origin: 0 50%; }
.ip-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.ip-key span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(235, 235, 245, 0.6); }
.ip-key span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ip-sec { margin: 22px 32px 8px; font-size: 13px; color: rgba(235, 235, 245, 0.6); }
.ip-rec .ip-row b { font-weight: 400; }
.ip-link { color: #0a84ff !important; }
.ip-desc { margin-top: 6px; font-size: 13px; line-height: 18px; color: rgba(235, 235, 245, 0.6); }
.ip-list { margin-top: 22px; padding: 0 16px; }
.ip-list p { display: flex; align-items: center; gap: 12px; height: 54px; box-shadow: inset 0 -0.5px 0 rgba(84, 84, 88, 0.6); }
.ip-list p:last-child { box-shadow: none; }
.ip-ic { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.ip-ic svg { width: 26px; height: 26px; }
.ip-ic img { display: block; width: 100%; height: 100%; } /* the apps' real App Store icons */
.ip-list b { flex: 1; font-size: 17px; font-weight: 400; }
.ip-list p > span:not(.ip-ic) { font-size: 17px; color: rgba(235, 235, 245, 0.6); }
.ip-chev { width: 8px; height: 8px; border: solid rgba(235, 235, 245, 0.3); border-width: 2px 2px 0 0; transform: rotate(45deg); }
/* The banner under it: Helumi's (16 16 16 24 in, radius 16; 22/33 bold over 14/21), in our
   card colour, not Helumi's black slab, which on a dark page would shout. */
.pains-fix { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding: 16px 16px 16px 24px; border-radius: 16px; background: var(--card); text-align: left; }
.pains-fix > svg { flex: none; width: 30px; height: 28px; }
.pains-fix p { flex: 1; display: flex; flex-direction: column; }
.pains-fix b { font-size: 22px; line-height: 33px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.pains-fix p span { font-size: 14px; line-height: 21px; color: var(--t2); }
.pains-fix .hbtn { flex: none; }
@media (max-width: 640px) {
  .pains-fix { flex-direction: column; align-items: flex-start; padding: 16px; }
  .pains-fix b { font-size: 18px; line-height: 27px; }
  .pains-fix .hbtn { width: 100%; justify-content: center; height: 44px; }
}

/* ---------- Every moment, covered: Helumi's "built for every kind of work." ----------
   Pills 32 tall, 14/21 at 500, 12 sides, the current one filled (Helumi: white on its
   grey; here our card on the void); the tab's line 16 under them; the stage 24 under
   that, 780 x 488, radius 20, a blurred crew shot where Helumi has a landscape, the phone
   44 down and running off the bottom (409 tall and 24 down at 375, as Helumi). */
.uc { margin-top: 24px; }
.uc-chips { display: flex; flex-wrap: wrap; justify-content: center; }
.uc-chips button {
  height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--t2);
  transition: color 150ms ease, background-color 150ms ease;
}
.uc-chips button[aria-selected="true"] { color: #fff; background: var(--card); }
@media (hover: hover) and (pointer: fine) { .uc-chips button:hover { color: #fff; } }
.uc-chips button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 999px; }
.uc-line { margin-top: 16px; min-height: 24px; font-size: 16px; line-height: 24px; color: #fff; }
.uc-stage { position: relative; max-width: 780px; height: 488px; margin: 24px auto 0; border-radius: 20px; overflow: hidden; background-color: var(--card); background-size: cover; background-position: center; text-align: left; }
/* 360 wide (Richie, 2026-10-20: "too tiny to be a phone"), 32 down, running off the
   stage's foot so the phone fills its height. The 288 wide screen inside (its images,
   drawings and overlays) is scaled 1.2083 to the 348 the bigger phone holds. */
.uc-phone { top: 32px; width: 360px; height: 540px; margin-left: -180px; border-radius: 50px; }
.uc-phone .uc-scr { transform: scale(1.2083); transform-origin: 0 0; border-radius: 36px; }
.uc-scr { position: relative; width: 288px; height: 436.4px; border-radius: 36px; overflow: hidden; background: #0a0a0a; }
.uc-pane { position: absolute; inset: 0; }
.uc-pane[hidden] { display: none; }
.uc-pane .pt { height: 666.67px; }
.uc-pane .pt .band { height: 666.67px; }
.uc-lock { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; color: #fff; }
.lk-date { margin-top: 58px; font-size: 14px; font-weight: 600; opacity: 0.9; }
.lk-time { font-size: 76px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.lk-act { position: absolute; left: 10px; right: 10px; top: 268px; width: calc(100% - 20px); height: auto; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

/* Helumi's numbered notes: a 560 column, 48 apart, 12 inside; badge 20 (radius 6, 8%);
   head 14/21 at 500; lead 20/30; body 16/24 at 64%; facts 3 x (radius 16, 16 in), 8 apart,
   24/26.4 at 600 over 12/18 at 56%; steps 16/24 with a 12/18 number. */
.notes { max-width: 560px; margin: 64px auto 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 48px; text-align: left; }
.note { display: flex; flex-direction: column; gap: 12px; }
.note-head { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 21px; font-weight: 500; color: #fff; }
.badge { width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; font-size: 12px; line-height: 18px; font-weight: 600; }
.note-lead { font-size: 20px; line-height: 30px; letter-spacing: -0.3px; color: #fff; }
.note > p:not(.note-head):not(.note-lead) { font-size: 16px; line-height: 24px; color: var(--t2); }
.facts { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.facts div { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: var(--card); }
.facts b { font-size: 24px; line-height: 26.4px; font-weight: 600; letter-spacing: -0.03em; color: #fff; white-space: nowrap; }
.facts span { font-size: 12px; line-height: 18px; color: var(--t3); }
.steps { padding: 0; list-style: none; display: grid; gap: 12px; }
.steps li { display: flex; align-items: baseline; gap: 12px; font-size: 16px; line-height: 24px; color: var(--t2); }
.steps li span { font-size: 12px; line-height: 18px; color: var(--t3); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .uc-stage { height: 409px; }
  .uc-phone { top: 24px; transform: scale(0.78); transform-origin: 50% 0; } /* the same phone, scaled whole: 281 wide in a 327 stage */
  .facts { grid-template-columns: 1fr; }
  .facts div { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
}

/* Richie (2026-10-20): more room for the comparison. This one section runs wider than the
   880 column (the table up to 1040), so the four columns and their labels breathe. */
#why.hsec { max-width: 1104px; }
/* The width goes to the columns, not the labels: labels take 32%, the four products share
   the rest evenly, so "deletes sync everywhere" and the like sit on one or two calm lines. */
@media (min-width: 641px) {
  .cmp { table-layout: fixed; }
  .cmp thead tr > :first-child { width: 32%; }
  .cmp thead tr > :not(:first-child) { width: 17%; }
}

/* Richie (2026-10-20): "are you scared of the width?" The two phones here run large:
   the shared 300px frame zoomed 1.4x (420 wide each), scaled as a whole so the drawn iOS
   screens keep their proportions; 1.1x on phones, where 330 still fits a 375 screen. */
.pains-stage { gap: 64px; }
.pains-fix { max-width: 904px; margin-left: auto; margin-right: auto; }

/* The phone frame is a component now: assets/phone.css (.phone, sizes s/m/l). */

/* Richie: "use that size all around": the grid's phones at the hero's 360 width (the shared
   300 frame zoomed 1.2), the section and grid widened so three still sit in a row. */
#how.hsec { max-width: 1304px; }
.moments.phones { max-width: 1240px; gap: 48px 56px; }
@media (max-width: 1303px) { .moments.phones { grid-template-columns: repeat(2, minmax(0, 360px)); } }
@media (max-width: 719px) {
  .moments.phones { grid-template-columns: minmax(0, 360px); }
}

/* ---------- Title voice: ours (Richie chose option 1, 2026-10-20) ----------
   Inter Tight 600 for the line, the key word in Instrument Serif italic, lime. Helumi sets
   its titles in the system font with an italic word; ours is a sans with a serif accent,
   the look of the photo world (magazines, lookbooks, wedding films). */
.htitle, .hhero h1 { font-family: "Inter Tight", Inter, system-ui, sans-serif; font-weight: 600; }
.htitle { letter-spacing: -0.035em; }
.htitle em, .hhero h1 .nm em {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 1.14em; letter-spacing: -0.01em; color: #c6ff3d; padding-right: 0.02em;
}
.hhero h1 > em:first-child { font-style: normal; font-weight: 600; letter-spacing: -0.045em; padding-right: 0; }
.hhero h1 .nm { color: #c6ff3d; }

/* A hidden section stays hidden whatever its own display rules say. */
.hsec[hidden] { display: none !important; }

/* ---------- Invites: steps beside a meter ----------
   One region, two parts on one row (stacked on a phone): three numbered steps, left-aligned on
   one anchor, and the meter in a price card's surface (radius 16, padding 28 20). The meter is
   ten 5 GB blocks; filled ones are lime (space gained). Numbers are tabular. */
.inv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; max-width: 760px; margin: 32px auto 0; text-align: left; }
.inv-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.inv-steps li { display: flex; gap: 12px; align-items: flex-start; }
.inv-num { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 12px; line-height: 18px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.inv-steps p { display: grid; gap: 2px; margin-top: 1.5px; font-size: 14px; line-height: 21px; }
.inv-steps b { font-weight: 600; color: #fff; }
.inv-steps span { color: var(--t2); }
.inv-meter { margin: 0; padding: 28px 20px; border-radius: 16px; background: var(--card); }
.inv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.inv-label { font-size: 14px; line-height: 21px; color: var(--t3); }
.inv-gb { font-size: 32px; line-height: 32px; font-weight: 600; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.inv-bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 20px; }
.inv-bar i { height: 10px; border-radius: 999px; background: #262626; overflow: hidden; position: relative; }
.inv-bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #c6ff3d; transform: scaleX(0); transform-origin: 0 50%; }
.inv-bar i.on::after { transform: none; }
.inv-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12px; line-height: 18px; color: var(--t3); }
@media (max-width: 719px) { .inv { grid-template-columns: 1fr; gap: 32px; } }
.inv-meter.play .inv-bar i::after { transform: scaleX(0); }
.inv-meter.play .inv-bar i.lit::after { transform: none; transition: transform 260ms var(--ease-out); }
/* A row's way to more: a quiet link under its label (the comparison's invites row). */
.cmp-more { position: relative; display: block; width: max-content; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--t3); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 2px; transition: color 150ms ease; }
.cmp-more::after { content: ""; position: absolute; inset: -13px -8px; } /* a 44px tap area around the 18px line */
@media (hover: hover) and (pointer: fine) { .cmp-more:hover { color: #fff; } }
.inv-more { margin-top: 24px; font-size: 14px; line-height: 21px; }
.inv-more a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.inv-rules { max-width: 560px; margin: 32px auto 0; padding: 28px 20px; border-radius: 16px; background: var(--card); text-align: left; }
.inv-rules .price-list { margin: 0; gap: 12px; }
.inv-rules b { font-weight: 600; }
.inv-rules span { color: var(--t2); }
.inv-rules b { color: #fff; }
/* Nameless's own banner (the app's Phone nearly full notice, notify.ts phoneFullNotice): the
   same iOS banner, its icon the app's (the clover on the Night icon's dark). Hidden at rest:
   site.js brings it in after the alert, as iOS swaps one banner for the next. */
.nl-note { opacity: 0; }
.nl-ic { background: #1c1c1c; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.nl-ic svg { width: 26px; height: 24px; fill: initial; stroke: none; }