/* =====================================================================================================
   Yumemira website — shared base. OWNED BY THE INTEGRATOR. Section builders: use these, never edit this file.
   Every value comes from the iPhone app's design tokens (DS-Tokens.swift, DS-Type.swift, preview base.css).
   ===================================================================================================== */

@font-face {
  font-family: "Lexend";
  src: url("../assets/fonts/Lexend.woff") format("woff"), url("../assets/fonts/Lexend.ttf") format("truetype"); /* woff = same font, zlib-packed: 88 KB instead of 172 KB */
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---- colour (Palette) ---- */
  --accent: #0077D9;            /* buttons, links, selected */
  --accent-edge: #0062B8;       /* button bottom edge */
  --accent-rgb: 0, 119, 217;
  --logo: #009FF5;              /* the ribbon and the star's body */
  --deep: #0B3A8C;              /* celebration screens */
  --deep-rgb: 11, 58, 140;
  --deep-bright: #3D8FE6;
  --deep-body: #CFE6FF;         /* body text on deep */
  --deep-line: #8CC4FF;         /* eyebrow / lines on deep */
  --hill: #B9DBFA;              /* the celebration hill */
  --tint: #E6F4FD;
  --tint-line: #CFE6FC;
  --selected: #F5FAFF;
  --sky-0: #F3F9FF;             /* Today's home gradient, top */
  --sky-1: #D3E9FC;
  --sky-2: #A8D3F8;             /* Today's home gradient, bottom */
  --ink: #0F1A2B;               /* titles */
  --body: #474E5B;              /* body text — darkened for reading on the web (8.6:1 on white, 6.9:1 on the sky) */
  --secondary: #5A6273;         /* small text (6.3:1 on white) */
  --muted: #969696;             /* decorative only, never for text you must read */
  --line: #E8E8E8;
  --soft: #F5F7FA;
  --tag: #1E1E1E;               /* LEVEL tag */
  /* the art's own colours */
  --sun: #FDBD31; --gold: #F5A400; --coral: #FF6154; --leaf: #2BB673; --mint: #78D8A8; --sky: #6CC0FC;
  --pale-sun: #FFF7E2; --pale-mint: #E4F5EC; --pale-coral: #FFEDEA;

  /* ---- shape ---- */
  --r-button: 9px; --r-row: 12px; --r-tile: 16px; --r-card: 24px; --r-tile-lg: 27px; --r-sheet: 28px;
  --shadow-row: 0 1px 2px rgba(0, 0, 0, .03);
  --shadow-tile: 0 8px 24px rgba(0, 0, 0, .09);
  --shadow-float: 0 10px 28px rgba(0, 0, 0, .16);
  --shadow-card: 0 1px 2px rgba(15, 26, 43, .04), 0 12px 32px -12px rgba(15, 26, 43, .12);
  --shadow-button: inset 0 -1px 0 var(--accent-edge), 0 8px 20px rgba(var(--accent-rgb), .28);

  /* ---- depth (the app's Elevation scale, a step stronger for large screens) — ADDED after owner feedback: borders too faint, no depth ---- */
  --edge: #DDE2E8;              /* default card / row border on white (the app's chip line) — never lighter */
  --edge-strong: #C9CED6;       /* hover / selected-neutral border */
  --edge-tint: #CFE6FC;         /* border on blue-tinted surfaces */
  --edge-sun: #F2DC9C; --edge-mint: #BFE3CD; --edge-coral: #F4CBC3; /* borders for the tinted art cards */
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .95);                          /* lit top edge on raised surfaces */
  --depth-1: 0 1px 2px rgba(15, 26, 43, .06), 0 3px 8px rgba(15, 26, 43, .05);   /* rows, small controls   (app: row) */
  --depth-2: 0 2px 8px rgba(15, 26, 43, .06), 0 12px 28px rgba(15, 26, 43, .10); /* cards                  (app: card) */
  --depth-3: 0 4px 12px rgba(15, 26, 43, .07), 0 18px 40px rgba(15, 26, 43, .17);/* raised, featured       (app: raised) */
  --depth-hover: 0 6px 16px rgba(15, 26, 43, .09), 0 26px 50px -10px rgba(15, 26, 43, .24); /* hover lift */
  --depth-deep: 0 8px 20px rgba(11, 58, 140, .22), 0 30px 66px -18px rgba(11, 58, 140, .55); /* deep-blue surfaces */
  --depth-accent: 0 8px 20px rgba(0, 119, 217, .26);                            /* accent surfaces (app: button, banner) */
  --tint-sun-shadow: 0 16px 34px -14px rgba(245, 164, 0, .38);                   /* coloured cards cast their own colour */
  --tint-sky-shadow: 0 16px 34px -14px rgba(0, 119, 217, .30);
  --tint-mint-shadow: 0 16px 34px -14px rgba(43, 182, 115, .32);
  --tint-coral-shadow: 0 16px 34px -14px rgba(255, 97, 84, .32);
  --art-drop: drop-shadow(0 10px 14px rgba(15, 26, 43, .16));                    /* art standing on a surface */

  /* ---- motion (the app's spring and ease) ---- */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ---- section rhythm (owner: "remove unwanted spaces") ----
     The gap from the LAST content of one section to the FIRST content of the next is 96–128 px on desktop and
     64–88 px on mobile, counting both sections' padding. Use these, never more. */
  --section-y: 80px;            /* top AND bottom padding of every section: two neighbours = 160 px between contents */
  --section-y-tight: 48px;      /* top padding when the section above has the SAME background */

  /* ---- layout ---- */
  --wrap: 1200px;
  --gutter: 24px;
  --header-h: 72px;
  color-scheme: light;
}
@media (max-width: 1023.98px) { :root { --gutter: 20px; --header-h: 60px; --section-y: 52px; --section-y-tight: 32px; } }
@media (max-width: 359.98px) { :root { --gutter: 16px; } }

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px;
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 350; font-size: 17px; line-height: 1.65; color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Images keep their shape. ALWAYS. (v0 stretched the star by fixing a width and keeping the height attribute.) */
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--tint-line); color: var(--ink); }

/* ---- which version shows: desktop at 1024 px and up, the mobile build below ---- */
.v-mobile { display: none; }
@media (max-width: 1023.98px) { .v-desktop { display: none !important; } .v-mobile { display: block; } }

/* ---- layout ---- */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- type (Lexend; the app's regular-weight titles, light body) ---- */
.display, .h2, .h3 { font-weight: 500; color: var(--ink); text-wrap: balance; }
.display { font-size: 64px; line-height: 1.05; letter-spacing: -0.032em; }
.h2 { font-size: 48px; line-height: 1.1; letter-spacing: -0.028em; }
.h3 { font-size: 23px; line-height: 1.3; letter-spacing: -0.012em; }
.lede { font-size: 20px; line-height: 1.6; font-weight: 350; color: var(--body); text-wrap: pretty; }
.body { font-size: 17px; line-height: 1.65; font-weight: 350; color: var(--body); text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--secondary); }
.eyebrow { display: block; font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: .01em; color: var(--accent-edge); margin-bottom: 14px; }
.on-deep .eyebrow { color: var(--deep-line); }
.on-deep .display, .on-deep .h2, .on-deep .h3 { color: #fff; }
.on-deep .lede, .on-deep .body { color: var(--deep-body); }
@media (max-width: 1023.98px) {
  .display { font-size: clamp(36px, 9.6vw, 56px); line-height: 1.06; }
  .h2 { font-size: clamp(30px, 7.8vw, 42px); line-height: 1.12; }
  .h3 { font-size: 20px; }
  .lede { font-size: clamp(17px, 4.6vw, 19px); }
  .body { font-size: 16.5px; }
  .eyebrow { font-size: 14px; margin-bottom: 12px; }
}

/* ---- buttons (the app's PrimaryButton: 54 pt, radius 9, a darker bottom edge, a soft blue glow) ---- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: var(--r-button);
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 500; line-height: 1.2; text-align: center;
  box-shadow: var(--shadow-button); white-space: nowrap; user-select: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: inset 0 -1px 0 var(--accent-edge), 0 14px 28px rgba(var(--accent-rgb), .34); } }
.btn:active { transform: scale(.97); box-shadow: inset 0 -1px 0 var(--accent-edge), 0 4px 10px rgba(var(--accent-rgb), .24); }
.btn-white { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1px #DDDDDD, 0 1px 2px rgba(0, 0, 0, .04); }
@media (hover: hover) { .btn-white:hover { box-shadow: inset 0 0 0 1px #D2D2D2, 0 10px 22px rgba(15, 26, 43, .10); } }
.btn-white:active { box-shadow: inset 0 0 0 1px #D2D2D2, 0 2px 6px rgba(15, 26, 43, .08); }
.btn-on-deep { background: #fff; color: var(--deep); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .18); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.btn-block { display: flex; width: 100%; }

/* ---- the phone: a REAL app screenshot inside a drawn iPhone. Set the width with --w. Never put art over the screen. ----
   <figure class="phone" style="--w:300px"><div class="screen"><img src="assets/app/today.webp" alt="..." width="900" height="1955" loading="lazy" decoding="async"><span class="island"></span></div></figure> */
/* Built like a real iPhone seen from the front: a thin metal edge (the border), an even black glass border
   (the padding), then the screen. Corners are concentric: .148 - .011 - .019 = .118, the screen's radius, so the
   black border is the same thickness all the way round. Nothing lighter may ever sit between the black and the screen.
   Sections may change the drop shadow only; never add inset rings (they draw a line inside the frame). */
.phone {
  --w: 300px;
  position: relative; flex: none; width: var(--w); max-width: 100%;
  border: calc(var(--w) * .011) solid transparent;
  padding: calc(var(--w) * .019);
  border-radius: calc(var(--w) * .148);
  background:
    linear-gradient(#040507, #040507) padding-box,
    linear-gradient(150deg, #6B7481 0%, #343C49 20%, #151A23 48%, #10141B 72%, #3D4552 100%) border-box;
  box-shadow:
    0 50px 90px -30px rgba(15, 26, 43, .40),
    0 22px 40px -18px rgba(15, 26, 43, .26);
}
.phone .screen { position: relative; overflow: hidden; background: #040507; aspect-ratio: 1320 / 2868; border-radius: calc(var(--w) * .118); transform: translateZ(0); }
.phone .screen > img, .phone .screen > video { width: 100%; height: 100%; object-fit: cover; }
.phone .island { position: absolute; z-index: 3; left: 50%; top: calc(var(--w) * .0235); width: calc(var(--w) * .268); height: calc(var(--w) * .079); transform: translateX(-50%); border-radius: 999px; background: #000; }
.on-deep .phone, .phone.on-deep {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 90px -30px rgba(0, 0, 0, .55), 0 22px 40px -18px rgba(0, 0, 0, .40);
}

/* ---- Mira says hi (owner 2026-09-30): the app's waving star, named Mira, at the top of the hero; same on every screen ---- */
.mira-hi { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px auto 22px; }
.mira-hi-star { flex: none; width: 74px; height: auto; transform-origin: 46% 96%; filter: var(--art-drop); animation: mira-wave 4.2s var(--ease) 1.2s infinite; }
.mira-hi-say { position: relative; padding: 9px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--edge); box-shadow: var(--highlight), var(--depth-1);
  font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--ink); max-width: 32ch; text-wrap: pretty; }
.mira-hi-say::before { content: ""; position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: #fff;
  border-left: 1px solid var(--edge); border-bottom: 1px solid var(--edge); transform: translateY(-50%) rotate(45deg); border-bottom-left-radius: 3px; }
@keyframes mira-wave { 0%, 58%, 100% { transform: rotate(0); } 64% { transform: rotate(-9deg); } 71% { transform: rotate(8deg); } 78% { transform: rotate(-6deg); } 85% { transform: rotate(4deg); } 92% { transform: rotate(-1.5deg); } }
@media (max-width: 1023.98px) { .mira-hi { gap: 10px; margin: 2px auto 18px; } .mira-hi-star { width: 62px; } .mira-hi-say { font-size: 15px; padding: 8px 14px; } }
@media (prefers-reduced-motion: reduce) { .mira-hi-star { animation: none; } }

/* ---- small shared pieces ---- */
.card { background: #fff; border-radius: var(--r-card); border: 1px solid var(--edge); box-shadow: var(--highlight), var(--depth-2); }
/* A raised surface with a clear edge and real depth. Add .lift for the hover rise. */
.surface { background: #fff; border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--highlight), var(--depth-2); }
.lift { transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
@media (hover: hover) { .lift:hover { transform: translateY(-4px); box-shadow: var(--highlight), var(--depth-hover); border-color: var(--edge-strong); } }
.lift:active { transform: translateY(-1px) scale(.99); }
/* The soft contact shadow under a phone or a piece of art standing on a surface. Put it on the element's wrapper. */
.grounded { position: relative; }
.grounded::after { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -14px; height: 28px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 26, 43, .24), rgba(15, 26, 43, 0)); pointer-events: none; }
.tag { display: inline-block; height: 22px; padding: 0 8px; border-radius: 5.2px; background: var(--tag); color: #fff; font: 600 11px/22px -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: .02em; }
.pro-mark { display: inline-block; height: 20px; padding: 0 7px; border-radius: 5.2px; background: var(--deep); color: #fff; font: 600 10.4px/20px -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: .04em; vertical-align: 2px; }
.art-shadow { display: block; width: 46%; height: 7px; margin: 10px auto 0; border-radius: 999px; background: #DDE3EA; } /* the star's little shadow line, as in the app */
.checks { display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; color: var(--body); }
.checks li b { color: var(--ink); font-weight: 500; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.on-deep .checks li { color: var(--deep-body); }
.on-deep .checks li b { color: #fff; }
.on-deep .checks li::before { background: var(--deep-line); }

/* ---- motion helpers ---- */
.bob { animation: bob 6s var(--ease) infinite alternate; }
@keyframes bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.paused, .paused * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---- the header wrapper (both versions live inside; each draws its own bar) ---- */
.site-header { position: sticky; top: 0; z-index: 100; }

/* ---- the official Apple "Download on the App Store" badge (the only call to action for getting the app) ----
   <a class="store-badge" href="https://apps.apple.com/app/id6816582144"><img src="assets/brand/app-store-badge-black.svg" alt="Download on the App Store" width="120" height="40"></a>
   Apple's rules: use the official artwork only; never recolour, crop, redraw, add shadows or effects; black badge on light
   backgrounds, white badge on dark; keep clear space of at least a quarter of its height around it; at least 40 px tall. */
.store-badge { display: inline-flex; flex: none; align-items: center; border-radius: 9px; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.store-badge img { height: 54px; width: auto; }
.store-badge.sm img { height: 40px; }
@media (hover: hover) { .store-badge:hover { transform: translateY(-2px); } }
.store-badge:active { transform: scale(.97); opacity: .9; }


/* =====================================================================================================
   BUILD 32 shared components (integrator, 30 Sep). Usage snippets: web-next/BUILDER-NOTES-B32.md
   ===================================================================================================== */

/* ---- Mira's bubble, more ways (the hero keeps the default: centred, waving). Long lines now wrap instead of overflowing.
   .start = left-aligned · .flip = bubble on the left, Mira on the right · .still = no wave (for poses other than StarWaving)
   · .sm = a smaller star. Max one per section, never over a phone. ---- */
.mira-hi.start { justify-content: flex-start; margin-left: 0; margin-right: 0; }
.mira-hi.flip { flex-direction: row-reverse; }
.mira-hi.flip.start { justify-content: flex-end; }
.mira-hi.flip .mira-hi-say::before { left: auto; right: -6px; border: 0; border-top: 1px solid var(--edge); border-right: 1px solid var(--edge); border-radius: 0 3px 0 0; }
.mira-hi.still .mira-hi-star { animation: none; }
.mira-hi.sm .mira-hi-star { width: 58px; }
@media (max-width: 1023.98px) { .mira-hi.sm .mira-hi-star { width: 50px; } }

/* ---- .seg — the app's segmented switch (DS-Lists SegmentedControl): a soft track with a white thumb that slides to the
   picked segment. 44 px tall (tap target), equal segments, ARIA tabs. js/base.js wires it: click, ←/→, Home/End, the
   thumb, the panels (aria-controls → hidden) and every [data-tab] element in the same .v-desktop/.v-mobile (.is-on).
   .seg.block = full width. Wrap in .seg-scroll when it may be wider than a phone (it then scrolls sideways). ---- */
.seg {
  --n: 1; --i: 0;
  position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  max-width: 100%; min-height: 44px; padding: 3px; border-radius: 12px;
  background: var(--soft); border: 1px solid var(--edge);
}
.seg.block { display: grid; width: 100%; }
.seg [role="tab"] {
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 36px; padding: 0 18px;
  border-radius: 9px; font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--secondary); white-space: nowrap;
  transition: color .2s var(--ease), transform .18s var(--ease);
}
.seg [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 500; }
@media (hover: hover) { .seg [role="tab"]:not([aria-selected="true"]):hover { color: var(--ink); } }
.seg [role="tab"]:active { transform: scale(.97); }
.seg [role="tab"]:focus-visible { outline-offset: -2px; border-radius: 9px; }
.seg-thumb {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 9px;
  background: #fff; box-shadow: 0 0 0 1px rgba(15, 26, 43, .05), 0 2px 4px rgba(15, 26, 43, .16);
  transform: translateX(calc(var(--i) * 100%)); pointer-events: none;
}
.seg.is-ready .seg-thumb { transition: transform .42s var(--spring); }
.seg:not(.is-ready) [aria-selected="true"] { background: #fff; box-shadow: 0 0 0 1px rgba(15, 26, 43, .05), 0 2px 4px rgba(15, 26, 43, .16); }
.seg-scroll { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter); scroll-padding: 0 var(--gutter); }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll > .seg { flex: none; max-width: none; }
.seg-panel:not([hidden]) { animation: seg-in .38s var(--ease); }
@keyframes seg-in { from { opacity: 0; transform: translateY(6px); } }
/* One phone, several screens (one per tab): put the <img>/<video> straight in .screen with data-tab="…"; the picked one shows. */
.phone .screen > [data-tab] { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.phone .screen > [data-tab].is-on { opacity: 1; }
@media (max-width: 1023.98px) { .seg [role="tab"] { padding: 0 15px; font-size: 14.5px; } }

/* ---- .cta-row — the mid-page call to action: Apple's badge + one line, straight on the section background (no box).
   Centred by default; .start = left-aligned. On deep blue use the white badge and .on-deep. ---- */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; text-align: center; }
.cta-row-line { max-width: 44ch; font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--body); text-wrap: balance; }
.cta-row.start { justify-content: flex-start; text-align: left; }
.on-deep .cta-row-line, .cta-row.on-deep .cta-row-line { color: var(--deep-body); }
@media (max-width: 1023.98px) {
  .cta-row { flex-direction: column; gap: 12px; }
  .cta-row.start { align-items: flex-start; }
  .cta-row-line { max-width: 34ch; font-size: 15px; }
}

/* ---- .trust-line — three short facts with a quiet dot between them (hero). No dot ever starts a wrapped line
   (base.js marks each line's first item; without JS the left-aligned version still hides it). .center for centred. ---- */
.trust-line { --gap: 22px; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px;
  margin: 0 calc(var(--gap) / -2); clip-path: inset(-4px 0 -4px 3px);
  font-size: 15px; line-height: 1.5; font-weight: 400; color: var(--body); }
.trust-line > * { position: relative; padding: 0 calc(var(--gap) / 2); }
.trust-line > *::before { content: ""; position: absolute; left: -2px; top: calc(.75em - 2px); width: 4px; height: 4px;
  border-radius: 50%; background: currentColor; opacity: .45; }
.trust-line > .ym-ls::before { opacity: 0; }
.trust-line.center { justify-content: center; clip-path: none; }
.on-deep .trust-line { color: var(--deep-body); }
@media (max-width: 1023.98px) { .trust-line { --gap: 18px; font-size: 14px; } }

/* ---- .phone.bare — the phone without the drawn Dynamic Island, for captures that already show the real one
   (lock-live, island-live, the live-activity video). Leave out <span class="island"> too. ---- */
.phone.bare .island { display: none; }

/* ---- real recordings (video32): the .webp poster is a real frame and shows until the video plays; with reduced
   motion it is all anyone sees (base.js never plays). No system play button over the poster (iOS Low Power Mode). ---- */
video.autoplay { background: #040507; }
video.autoplay::-webkit-media-controls, video.autoplay::-webkit-media-controls-start-playback-button,
video.autoplay::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
@media (prefers-reduced-motion: reduce) { video.autoplay { pointer-events: none; } }

/* ---- Desktop: a narrower, calmer page below the hero (RT-LOOP-D, founder 30 Sep: "all these sections are too wide and big ->
        reduce the size little"). The hero (#home), the header and the footer keep --wrap 1200 and --section-y 80, untouched.
        Every other section reads these two tokens, so one change keeps them consistent. ---- */
@media (min-width: 1024px) {
  :root { --wrap-section: 1040px; }   /* content width for every section after the hero (was 1200) */
  main section:not(#home) {
    --section-y: 72px;                /* section top and bottom padding after the hero (was 80) */
    --section-y-tight: 44px;          /* top padding after a same-colour section (was 48) */
  }
  main section:not(#home) .wrap { max-width: calc(var(--wrap-section) + var(--gutter) * 2); }   /* narrower content column */
}