/* ============================================================
   Owed — landing page (rebuilt 3 Sept 2026, evening pass)

   Pure white ground, black type and black buttons, colour as tinted
   icon tiles and coloured key figures (Notion's tiles, Apple's
   environment cards). One brand copied per section (DESIGN-REFERENCES.md
   → "The white page"): nav Attio (floating, glass on scroll), strip Coda,
   product shot Notion, script Vercel, screens Twenty, numbers Ramp, five
   places Square, environment Norma, FAQ OpenPhone, closing Contra, footer
   Portrait. Type: Notion's scale in Geist — heads 54/700, −.035em, 1.04.
   ============================================================ */

/* ---------------- tokens (this page only) ---------------- */
:root {
  --paper: #FFFFFF;
  --paper-2: #FAFAFA;
  --card: #FFFFFF;
  --field: #FFFFFF;
  --ink: #000000;
  --ink-2: #1A1A1A;
  --ink-3: #666666;
  --line: #EAEAEA;
  --line-2: #D4D4D4;
  --field-line: #EAEAEA;
  /* Apple blue (#0071E3 = apple.com buttons/links, 4.7:1 on white) is the
     page's one interactive colour: links, focus rings, pins, active states.
     Buttons stay black. */
  --accent: #0071E3;
  --accent-soft: #E8F2FC;
  --accent-line: #B8D8F7;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .06);
  --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .12);
  --shadow-xl: 0 24px 60px -16px rgba(0, 0, 0, .16);
  /* the colour set: four tints and their inks (the app's own ramp, lightened) */
  --mint: #DDF3E6; --mint-ink: #0B5C3A;
  --sky: #E8F2FC;  --sky-ink: #0071E3;
  --sand: #F5EBD6; --sand-ink: #B45309;
  --teal: #D8EFF0; --teal-ink: #0E7490;
  --rose: #FBE4E4; --rose-ink: #B42318;
}
body { background: #FFFFFF; color: var(--ink-2); -webkit-font-smoothing: antialiased; }
.wrap-1200 { width: min(1200px, 100% - 48px); margin-inline: auto; }

/* ---------------- type ---------------- */
.h2 {
  font-family: var(--display);
  font-size: 54px; font-weight: 700; letter-spacing: -.035em; line-height: 1.04;
  color: var(--ink); margin: 0; max-width: 720px; text-wrap: balance;
}
.h2-40 { font-size: 40px; letter-spacing: -.03em; line-height: 1.1; }
.h2-44 { font-size: 44px; letter-spacing: -.03em; line-height: 1.1; }
.h2-54 { font-size: 54px; }
.h2-72 { font-size: 72px; letter-spacing: -.03em; line-height: 1.05; max-width: 880px; }
.dim { color: #767676; }
h3, p { margin: 0; }

/* the colour tiles and figure inks */
.t-mint { background: var(--mint); color: var(--mint-ink); }
.t-sky  { background: var(--sky);  color: var(--sky-ink); }
.t-sand { background: var(--sand); color: var(--sand-ink); }
.t-teal { background: var(--teal); color: var(--teal-ink); }
.t-rose { background: var(--rose); color: var(--rose-ink); }
.c-green { color: var(--mint-ink) !important; }
.c-blue  { color: var(--sky-ink) !important; }
.c-amber { color: var(--sand-ink) !important; }
.c-teal  { color: var(--teal-ink) !important; }

/* ---------------- buttons: Attio geometry, black fill ---------------- */
.btn {
  height: 40px; padding: 0 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:not(.btn-quiet):active { transform: none; }
.btn-primary, .btn-accent { background: #000000; color: #FFFFFF; border-color: #000000; box-shadow: none; }
.btn-primary:hover, .btn-accent:hover { background: #1F1F1F; border-color: #1F1F1F; color: #FFFFFF; box-shadow: none; }
.btn-primary:active, .btn-accent:active { background: #000000; }
.btn-outline, .btn-ghost { background: #FFFFFF; color: #111111; border-color: #E5E5E5; }
.btn-outline:hover, .btn-ghost:hover { background: #F5F5F5; border-color: #D9D9D9; color: #000000; }
.btn-36 { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-34 { height: 34px; padding: 0 18px; font-size: 13px; font-weight: 600; }
.btn-48 { height: 48px; padding: 0 32px; font-size: 16px; }
.btn-56 { height: 56px; padding: 0 36px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   NAV — Attio (Mobbin 07bc478d), floating over the page
   Transparent at the top; blurred white glass with a hairline once
   the page has scrolled.
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, .42);
  border-bottom-color: rgba(0, 0, 0, .06);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
}
.nav-row { display: flex; align-items: center; height: 72px; padding: 0 32px; }
.nav .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #000; }
.nav .brand-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.nav-links { display: flex; margin-left: 48px; }
.nav-links a { padding: 8px 20px; border-radius: 6px; font-size: 15px; font-weight: 500; line-height: 1.2; color: #111111; text-decoration: none; transition: color .15s ease; }
.nav-links a:hover { color: #555555; }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-actions .btn-outline { background: rgba(255, 255, 255, .7); }
.nav-toggle { display: none; width: 40px; height: 40px; margin-left: 12px; border-radius: 8px; background: none; border: 0; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: #000; margin: 5px auto; transition: transform .2s ease, opacity .2s ease; }
.nav.is-open .nav-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav.is-open .nav-toggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.nav-sheet { display: none; }
@media (max-width: 899px) {
  .nav-row { height: 64px; padding: 0 20px; }
  .nav-links { display: none; }
  .nav-actions .nav-signin { display: none; }
  .nav-actions .btn { height: 36px; }
  .nav-toggle { display: block; }
  .nav.is-open { background: #FFFFFF; border-bottom-color: #EAEAEA; }
  .nav.is-open .nav-sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; top: 64px; bottom: 0;
    background: #FFFFFF; padding: 8px 20px 24px; overflow: auto;
    animation: sheet .18s ease-out;
  }
  .nav-sheet > a { display: flex; align-items: center; height: 56px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: #000; text-decoration: none; border-bottom: 1px solid #EAEAEA; }
  .nav-sheet-actions { display: grid; gap: 12px; margin-top: auto; padding-top: 24px; }
  .nav-sheet-actions .btn { width: 100%; height: 48px; font-size: 15px; }
}
@keyframes sheet { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   THE FILM — Owed's own (ported from the cinematic build)
   ============================================================ */
.film { position: relative; z-index: 3; height: calc(460vh + 100svh); background: #0B0F0C; pointer-events: none; }
.film-sticky { pointer-events: auto; }
.film.is-covering .film-sticky { pointer-events: none; }
.film-overlay { transition: opacity .3s var(--ease); }
.film-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #E9EDF1; }
.film-canvas, .film-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-canvas { display: block; transform: translateZ(0); }
.film-still { background: linear-gradient(180deg, #F3F5F7 0%, #DEE4EA 52%, #B7C4D1 100%); transition: opacity .6s var(--ease); }
.film.is-live .film-still { opacity: 0; }
.film-scrim { position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.film-overlay { position: absolute; inset: 0; height: 100%; }
@supports (height: 100svh) { .film-overlay { height: 100svh; } }
.film-scene { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 clamp(1.5rem, 8vw, 8rem); transition: opacity .1s ease-out; }
.film-scene[inert] { opacity: 0; visibility: hidden; }
.film-scene:not(.is-on) { pointer-events: none; }
.film-s1 :focus-visible, .film-s2 :focus-visible, .film:not(.is-dark) .film-rail :focus-visible { outline-color: #1D3045; }
.film-s3 :focus-visible, .film.is-dark .film-rail :focus-visible { outline-color: #FFFFFF; }
.film-s1::before, .film-s2::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 35% 50%, rgba(233, 237, 241, .5), transparent 70%); }
.film-s2::before { background: radial-gradient(60% 70% at 50% 50%, rgba(233, 237, 241, .5), transparent 70%); }
.film-scene > * { position: relative; }
.film-copy { max-width: 1100px; width: 100%; min-width: 0; color: #1D3045; }
.film-copy-c { max-width: 900px; text-align: center; margin-inline: auto; }
.film-s2 { justify-content: center; }
.film-s3 { justify-content: flex-end; }
.film-copy-r { max-width: 42rem; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
/* the film headlines: Apple's face (SF Pro on Apple devices via the system
   stack; Inter, the closest open face, everywhere else), bold, sentence case */
.film-title { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; text-transform: none; letter-spacing: -.025em; line-height: 1.04; font-size: clamp(2.4rem, 5.6vw, 5.6rem); margin: 0; color: #1D3045; text-wrap: balance; }
.film-title-2 { font-size: clamp(1.8rem, 4.8vw, 4.8rem); letter-spacing: -.02em; line-height: 1.1; font-weight: 700; }
.film-title-w { color: #FFFFFF; font-size: clamp(2.2rem, 4.4vw, 4.4rem); letter-spacing: -.02em; margin-bottom: 2rem; }
.film-dim { color: rgba(29, 48, 69, .74); }
.film-kicker { margin: 1.5rem 0 0; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: rgba(29, 48, 69, .82); }
.film-kicker-w { margin: 0 0 1rem; font-size: 18px; letter-spacing: .06em; text-transform: none; color: rgba(255, 255, 255, .8); }
.film-places { list-style: none; margin: 2rem 0 0; padding: 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #1D3045; text-wrap: balance; }
.film-places li { display: inline-block; margin: 0 .5rem; }
.film-places li + li::before { content: "\00b7"; margin-right: 1rem; opacity: .6; }
.film-sub { margin: 1.5rem auto 0; max-width: 600px; font-size: 15px; color: rgba(29, 48, 69, .88); }
.film-try { width: min(560px, 100%); margin-top: 0; }
.film-try .hero-try-field { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .38); box-shadow: none; }
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  .film-try .hero-try-field { background: rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.film-try .hero-try-field:focus-within { border-color: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.film-try .hero-try-ico { color: rgba(255, 255, 255, .8); }
.film-try .hero-try-input { color: #FFFFFF; }
.film-try .hero-try-input::placeholder { color: rgba(255, 255, 255, .7); }
.film-note { margin: 1rem 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 46ch; }
.film-link { color: rgba(255, 255, 255, .85); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color .2s var(--ease); }
.film-link:hover { color: #FFFFFF; }
.film-s3 .try-result { margin-top: 1.25rem; color: var(--ink); text-shadow: none; }
.film-next { position: absolute; right: clamp(1.5rem, 3vw, 3rem); bottom: calc(3rem + env(safe-area-inset-bottom)); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(29, 48, 69, .5); color: #1D3045; background: none; display: flex; align-items: center; justify-content: center; transition: opacity .2s var(--ease), background-color .2s var(--ease); }
.film-next:hover { background: rgba(29, 48, 69, .08); }
.film-rail { position: absolute; right: clamp(1.5rem, 3vw, 3rem); bottom: calc(4rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #1D3045; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease), visibility .4s var(--ease), color .5s var(--ease); }
.film.is-mid .film-rail { opacity: 1; visibility: visible; pointer-events: auto; }
.film.is-dark .film-rail { color: #FFFFFF; }
.film-rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; background: none; color: inherit; opacity: .8; display: flex; align-items: center; justify-content: center; transition: opacity .2s var(--ease), background-color .2s var(--ease); }
.film-rail-btn:hover { opacity: 1; background: rgba(127, 127, 127, .12); }
.film-rail-up { width: 40px; height: 40px; margin-top: .5rem; }
.film-dot { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; }
.film-dot i { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; transition: width .3s var(--ease), height .3s var(--ease), opacity .3s var(--ease); }
.film-dot[aria-current="true"] i { width: 8px; height: 8px; opacity: 1; }
.film-dot:hover i { opacity: .8; }
.is-js .stg { opacity: 0; transform: translateY(24px); transition: opacity .2s ease-out, transform .2s ease-out; }
.is-show .stg { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16, 1, .3, 1) var(--sd, 0ms), transform .8s cubic-bezier(.16, 1, .3, 1) var(--sd, 0ms); }
.stg-2 { --sd: 150ms; } .stg-3 { --sd: 300ms; } .stg-4 { --sd: 400ms; }
@media (max-width: 900px) {
  .film { height: calc(380vh + 100svh); }
  .film-scene { padding: 0 1.5rem; }
  .film-s3 { justify-content: flex-start; align-items: flex-start; padding-top: 5.5rem; }
  .film-copy-r { max-width: none; }
  .film-s3 .try-result ul { display: none; }
  .film-places li { display: block; margin: .35rem 0; }
  .film-places li + li::before { content: none; }
  .film-rail { right: 1rem; bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  .film-next { right: 1rem; bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .stg, .film-scene.is-show .stg { opacity: 1; transform: none; transition: none; }
  .film-scene { transition: none; }
}
/* the try-it field and its answer card */
.hero-try { width: min(560px, 100%); margin-top: 1.85rem; }
.hero-try-field { display: flex; align-items: center; gap: .5rem; background: #FFFFFF; border: 1px solid #EAEAEA; border-radius: 999px; padding: .32rem .32rem .32rem .95rem; box-shadow: var(--shadow-md); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.hero-try-field:focus-within { border-color: #000; box-shadow: 0 0 0 4px rgba(0, 0, 0, .08), var(--shadow-md); }
.hero-try-ico { color: #666; flex-shrink: 0; }
.hero-try-input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: .6rem 0; font-size: 16px; color: #000; text-overflow: ellipsis; }
.hero-try-input::placeholder { color: #666; }
.hero-try-btn { flex-shrink: 0; border-radius: 999px; height: 40px; padding: 0 18px; }
.try-result { margin-top: 1.35rem; width: min(560px, 100%); text-align: left; border: 1px solid #EAEAEA; background: #FFFFFF; border-radius: 12px; padding: 1rem 1.15rem; box-shadow: var(--shadow-md); animation: rise .3s var(--ease-out) both; }
.try-result .try-h { font-size: 16px; font-weight: 600; margin-bottom: .5rem; letter-spacing: -.015em; }
.try-result ul { display: flex; flex-direction: column; gap: .45rem; margin-top: .7rem; }
.try-result li { display: flex; align-items: flex-start; gap: .55rem; font-size: 14px; color: #666; }
.try-result .go { margin-top: 1rem; display: inline-flex; }
.try-result .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: .45rem; }
.try-result .dot.ok { background: var(--mint-ink); }
.try-result .dot.maybe { background: var(--sand-ink); }
.try-result .try-sub { font-size: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (forced-colors: active) { .hero-try-input:focus { outline: 2px solid Highlight; outline-offset: 2px; } }

/* ============================================================
   READ FROM — Coda
   ============================================================ */
/* a moving row (Linear's marquee with a soft fade at both ends), 42
   names, pause on hover and a pause button for the keyboard */
.proof { padding: 72px 0 40px; text-align: center; }
.proof-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; }
.proof-lead { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.4; color: #666666; letter-spacing: 0; }
.proof-lead b { font-weight: 600; color: #000; }
.proof-pause { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #E5E5E5; background: #FFF; color: #666; }
.proof-pause:hover { color: var(--accent); border-color: var(--accent-line); }
.proof-track {
  display: flex; gap: 56px; overflow: hidden; padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
}
.proof-names { display: flex; flex: none; gap: 56px; margin: 0; padding: 0; list-style: none; white-space: nowrap; animation: proof-marquee 140s linear infinite; }
.proof-track:hover .proof-names, .proof-track.is-paused .proof-names { animation-play-state: paused; }
.proof-names li { font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: #111111; white-space: nowrap; }
@keyframes proof-marquee { to { transform: translateX(calc(-100% - 56px)); } }
@media (prefers-reduced-motion: reduce) {
  .proof-names { animation: none; flex-wrap: wrap; white-space: normal; justify-content: center; gap: 12px 32px; }
  .proof-names[aria-hidden] { display: none; }
  .proof-track { mask-image: none; -webkit-mask-image: none; }
  .proof-pause { display: none; }
}

/* ============================================================
   THE WHOLE APP — one picture (Notion's product shot)
   ============================================================ */
@media (max-width: 640px) {
}

/* ============================================================
   THE SCRIPT — Vercel "Centralized feedback"
   ============================================================ */
.show { padding: 120px 0; }
.show-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: center; }
.show-copy { max-width: 556px; }
.show-copy .h2 { font-size: 48px; letter-spacing: -.03em; line-height: 56px; margin-bottom: 24px; }
.show-body { font-size: 18px; line-height: 32px; color: #666666; margin-bottom: 40px; max-width: 546px; }
.show-body strong { font-weight: 600; color: #000; }
.show-media { position: relative; }
/* the card is a white frame; the product inside is greyed to a wireframe so
   the dark panel is the only thing in focus (Vercel's device) */
.show-card { position: relative; width: 100%; aspect-ratio: 36 / 25; background: #FFFFFF; border: 1px solid #EAEAEA; border-radius: 12px; margin-bottom: 26px; }
.show-clip { position: absolute; inset: 24px 24px 0 24px; border: 1px solid #EEE; border-radius: 10px 10px 0 0; overflow: hidden; background: #FFF; display: flex; }
.wf-side { width: 22%; border-right: 1px solid #F0F0F0; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.wf-side i { display: block; width: 70%; height: 10px; border-radius: 5px; background: #EFEFEF; }
.wf-side .wf-logo { width: 42%; height: 12px; background: #E4E4E4; }
.wf-side .wf-btn { width: 100%; height: 28px; border-radius: 6px; background: #E6E6E6; margin: 4px 0 8px; }
.wf-main { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.wf-top { display: flex; justify-content: space-between; align-items: center; }
.wf-top i { display: block; width: 34%; height: 12px; border-radius: 6px; background: #E8E8E8; }
.wf-top .wf-r { width: 18%; height: 26px; background: #F0F0F0; }
.wf-row { display: flex; gap: 10px; }
.wf-row b { flex: 1; height: 56px; border-radius: 8px; background: #F3F3F3; }
.wf-block { height: 118px; border-radius: 8px; background: #F3F3F3; }
.wf-lines i { display: block; height: 8px; border-radius: 4px; background: #EFEFEF; margin-top: 8px; }
.wf-lines i:nth-child(1) { width: 78%; } .wf-lines i:nth-child(2) { width: 62%; } .wf-lines i:nth-child(3) { width: 70%; }
/* content must never stay invisible: the reveal hide only applies once motion.js is running */
html:not(.js-enter) .reveal { opacity: 1; transform: none; }
.show-pin { position: absolute; right: 326px; top: 34px; z-index: 2; display: flex; align-items: center; }
.show-pin b { width: 22px; height: 22px; border-radius: 50%; background: var(--sky-ink); color: #FFF; font-size: 11px; font-weight: 600; display: grid; place-items: center; border: 2px solid #FFF; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.show-pin i { width: 22px; height: 22px; border-radius: 50%; margin-left: -6px; background: var(--mint); border: 2px solid #FFF; }
.show-panel { position: absolute; top: 44px; right: 40px; width: 300px; background: #000000; color: #FFFFFF; border-radius: 12px; padding: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.show-panel-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.show-panel-head b { font-weight: 600; color: #FFF; }
.show-avatar { width: 20px; height: 20px; border-radius: 50%; background: #58DDA0; color: #000; display: grid; place-items: center; flex: none; }
.show-meta { color: #888888; font-size: 12px; margin-left: 2px; white-space: nowrap; }
.show-panel-line { margin-top: 10px; font-size: 14px; line-height: 20px; color: #FFF; }
.show-chips { display: flex; gap: 8px; margin-top: 12px; }
.show-chips span { width: 52px; height: 40px; border: 1px solid #333; border-radius: 6px; overflow: hidden; background: #FFF; }
.show-chips img { display: block; width: 100%; height: auto; }
.show-panel-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12px; color: #888888; }
.show-due { display: inline-flex; align-items: center; gap: 6px; color: #DDD; white-space: nowrap; }
.show-due i { width: 12px; height: 12px; border: 1.5px solid #888; border-radius: 3px; }
.show-panel-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; height: 36px; padding: 0 12px; background: #111111; border: 1px solid #333333; border-radius: 8px; font-size: 13px; color: #888888; }
.show-panel-field span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.show-panel-field svg { color: var(--sky-ink); flex: none; }
.show-pill { position: absolute; left: 122px; bottom: -26px; display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 18px; background: #000000; border-radius: 26px; color: #9A9A9A; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.show-pill-on { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sky-ink); color: #FFF; }
.show-pill-avs { display: flex; }
.show-pill-avs i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #000; margin-left: -6px; font-style: normal; font-size: 9px; font-weight: 700; }
.show-pill-avs i:first-child { margin-left: 0; }
.show-pill-div { width: 1px; height: 20px; background: #333; }

/* ============================================================
   THE THREE SCREENS — Twenty (Mobbin a29b4352)
   Three white cards, the real screen full-bleed at the top, one line
   under it with a coloured numeral tile.
   ============================================================ */
.screens { padding: 40px 0 120px; }
.screens .h2 { margin-bottom: 40px; }
.screen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.screen-card { background: #FFFFFF; border: 1px solid #EBEBEB; border-radius: 12px; overflow: hidden; }
.screen-img { height: 420px; overflow: hidden; border-bottom: 1px solid #EBEBEB; background: #FAFAFA; }
.screen-img img { display: block; width: 100%; height: auto; }
.screen-card p { display: flex; align-items: center; gap: 12px; padding: 18px 20px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #111; }
.screen-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; font-weight: 700; flex: none; }

/* ============================================================
   IN NUMBERS — Ramp
   ============================================================ */
.stats { padding: 0 0 120px; }
.stats-in { width: min(1200px, 100% - 48px); margin-inline: auto; display: grid; grid-template-columns: repeat(4, auto); justify-content: center; column-gap: 96px; text-align: center; }
.stat b { display: block; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: #111111; }
.stat span { display: block; margin-top: 12px; font-size: 16px; line-height: 1.4; color: #666666; max-width: 220px; margin-inline: auto; }

/* ============================================================
   FIVE PLACES — Square, with Notion's tinted icon tiles
   ============================================================ */
.places { padding: 0 0 120px; }
.places .h2 { margin-bottom: 40px; }
.place-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.place-grid li { display: flex; flex-direction: column; }
.tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 20px; }
.place-grid h3 { font-size: 18px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; color: #000; max-width: 16ch; }
.place-grid a { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; }
.place-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   ENVIRONMENT — Norma, with Apple's coloured key figures
   ============================================================ */

/* ============================================================
   FAQ — OpenPhone
   ============================================================ */
.faq { padding: 0 0 128px; }
.faq-head { text-align: center; max-width: 880px; margin: 0 auto 72px; }
.faq-head .h2 { margin-inline: auto; }
.faq-head p { margin-top: 24px; font-size: 18px; line-height: 1.5; color: #666666; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid #E5E5E5; }
.faq-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; column-gap: 32px; align-items: center; padding: 30px 0; min-height: 84px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #000; }
.faq-item summary svg { color: #000; transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.faq-item summary:hover svg { opacity: .6; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-body { padding: 0 0 30px; max-width: 880px; }
.faq-body p { font-size: 16px; line-height: 1.6; color: #666666; }

/* ============================================================
   CLOSING — Contra
   ============================================================ */
.cta { padding: 120px 0 96px; text-align: center; background: #FFFFFF; border-top: 1px solid #EAEAEA; }
.cta .wrap-1200 { display: flex; flex-direction: column; align-items: center; }
.cta-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--accent); color: #FFF; margin-bottom: 20px; }
.cta .h2 { text-align: center; margin-inline: auto; }
.cta-sub { margin-top: 24px; font-size: 17px; line-height: 1.5; color: #444; }
.cta .btn { margin-top: 22px; }
.cta-small { margin-top: 24px; font-size: 13px; color: #555; }
.cta-small a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   FOOTER — Portrait
   ============================================================ */
.footer { padding: 49px 0 38px; background: #FFFFFF; border-top: 1px solid #EAEAEA; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #000; }
.footer .brand-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.footer-status { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: #666666; }
.footer-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-ink); }
.footer-col h3 { font-size: 14px; font-weight: 600; color: #0A0A0A; margin-bottom: 12px; }
.footer-col a { display: block; font-size: 14px; line-height: 20px; padding: 6px 0; color: #666666; text-decoration: none; transition: color .1s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-col a:hover { color: #000; }
.footer-base { margin-top: 40px; padding-top: 20px; }
.footer-base p { font-size: 12px; line-height: 1.6; color: #666666; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) { .btn, .nav { transition: none; } }

/* ============================================================
   Tablet and phone
   ============================================================ */
@media (max-width: 1024px) {
  .h2 { font-size: 44px; letter-spacing: -.032em; line-height: 1.08; }
  .h2-40 { font-size: 36px; }
  .h2-72 { font-size: 56px; }
  .show { padding: 96px 0; }
  .screens, .stats, .places { padding-bottom: 96px; }
  .show-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .show-copy .h2 { font-size: 40px; line-height: 46px; }
  .screen-grid { grid-template-columns: 1fr; }
  .screen-img { height: 300px; }
  .stats-in { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 40px; }
  .stat b { font-size: 48px; }
  .place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .h2 { font-size: 36px; letter-spacing: -.03em; line-height: 1.1; }
  .h2-40 { font-size: 30px; }
  .h2-44 { font-size: 34px; }
  .h2-72 { font-size: 40px; line-height: 1.05; }
  .show { padding: 72px 0; }
  .screens, .stats, .places, .env { padding-bottom: 72px; }
  .faq { padding-bottom: 88px; }
  .faq-head { margin-bottom: 48px; }
  .faq-head p { font-size: 16px; margin-top: 16px; }
  .faq-item summary { padding: 22px 0; min-height: 68px; column-gap: 20px; }
  .faq-item summary h3 { font-size: 17px; }
  .faq-body { padding-bottom: 22px; }
  .faq-body p { font-size: 15px; }
  .cta { padding: 88px 0 72px; }
  .cta-mark { width: 48px; height: 48px; }
  .cta-sub { font-size: 16px; margin-top: 20px; }
  .cta .btn-56 { width: min(100%, 360px); height: 52px; font-size: 15px; }
  .proof { padding: 56px 0 32px; }
  .proof-lead { font-size: 15px; }
  .proof-names { column-gap: 24px; row-gap: 12px; }
  .proof-names li { font-size: 16px; }
  .show-copy .h2 { font-size: 36px; line-height: 42px; margin-bottom: 20px; }
  .show-body { font-size: 17px; line-height: 28px; margin-bottom: 32px; }
  .show-card { aspect-ratio: auto; padding: 16px; margin-bottom: 0; }
  .show-clip { position: static; height: 150px; border-radius: 8px; border: 1px solid #EEE; }
  .show-pin { display: none; }
  .show-panel { position: static; width: 100%; margin-top: 12px; padding: 16px; }
  .show-panel-line { font-size: 13px; line-height: 18px; }
  .show-pill { position: static; transform: none; width: max-content; margin: 16px auto 0; height: 44px; padding: 0 14px; gap: 12px; }
  .screen-img { height: 260px; }
  .place-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer { padding: 56px 0 40px; }
}
@media (max-width: 560px) {
  .stats-in { grid-template-columns: 1fr; text-align: left; row-gap: 32px; }
  .stat span { margin-inline: 0; }
  .stat b { font-size: 44px; }
  .place-grid { grid-template-columns: 1fr; }
  .show-chips { display: none; }
  .show-pill-div { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- environment: Norma's two cards, measured from the still (x1.875) ---------- */
.stat b em { font-style: normal; }
.env { padding: 120px 0; }
.env .h2 { margin-bottom: 40px; }
.env-card { background: #FFF; border: 1px solid #E5E5E5; border-radius: 10px; overflow: hidden; }
.env-cells { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.env-cells li { padding: 30px 28px 26px; border-right: 1px solid #E5E5E5; display: flex; flex-direction: column; }
.env-cells li:last-child { border-right: 0; }
.env-cells b { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: #000; }
.env-cells strong { margin-top: 18px; font-size: 15px; font-weight: 600; line-height: 1.35; color: #000; }
.env-cells span { margin-top: 4px; font-size: 13px; line-height: 1.4; color: #767676; }
.env-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; border-top: 1px solid #E5E5E5; }
.env-strip p { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #000; }
.btn-pill { border-radius: 9999px; padding: 0 18px; font-size: 13px; }
.env-card-2 { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; }
.env-left { padding: 28px; border-right: 1px solid #E5E5E5; }
.env-left h3 { margin: 0 0 18px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #000; }
.env-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.env-inputs label { display: block; font-size: 12px; font-weight: 600; color: #000; }
.env-inputs select { display: block; width: 100%; height: 44px; margin-top: 8px; padding: 0 40px 0 16px; border: 1px solid #E5E5E5; border-radius: 9999px; background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; appearance: none; -webkit-appearance: none; font: 500 15px/1.2 inherit; font-family: inherit; color: #000; cursor: pointer; }
.env-inputs select:hover { border-color: #C9C9C9; }
.env-right { padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-content: start; }
.env-fig b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: #000; font-variant-numeric: tabular-nums; }
.env-fig b .dim { font-weight: 600; }
.env-fig > span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: #767676; }
.env-bar { display: block; margin-top: 14px; width: 100%; height: 4px; border-radius: 2px; background: #E5E5E5; overflow: hidden; }
.env-bar i { display: block; height: 100%; width: var(--w, 0%); background: #000; transition: width .4s ease; }
@media (max-width: 1024px) { .env-cells { grid-template-columns: 1fr 1fr; } .env-cells li:nth-child(2) { border-right: 0; } .env-cells li:nth-child(-n+2) { border-bottom: 1px solid #E5E5E5; } }
@media (max-width: 768px) {
  .env { padding: 80px 0; }
  .env-strip { flex-direction: column; align-items: flex-start; }
  .env-card-2 { grid-template-columns: 1fr; }
  .env-left { border-right: 0; border-bottom: 1px solid #E5E5E5; }
  .env-inputs, .env-right { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .env-cells { grid-template-columns: 1fr; } .env-cells li { border-right: 0; border-bottom: 1px solid #E5E5E5; } .env-cells li:last-child { border-bottom: 0; } }

/* ---------- scroll-in motion (Apple's rise: long ease-out, a slight
   settle, staggered by position in the row; the film has its own) ---------- */
.reveal { opacity: 0; transform: translateY(32px) scale(.985); }
.reveal.in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.show-media.reveal { transform: translateY(40px) scale(.97); }
.show-media.reveal.in { transition-duration: 1s, 1.3s; }
.stat.reveal { transform: translateY(24px); }
.h2.reveal { transform: translateY(20px); }
.h2.reveal.in { transition-duration: .8s, .9s; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1; transform: none; transition: none; } }

/* ---------- section rhythm: one hairline and the same air between every
   section (the owner: "space and borders so it's not all jumbled up") ---------- */
.proof { padding: 96px 0 72px; }
.show, .stats, .places, .env, .faq, .cta { border-top: 1px solid #EAEAEA; padding-top: 120px; padding-bottom: 120px; }
.stats { padding-top: 96px; padding-bottom: 96px; }
.footer { border-top: 1px solid #EAEAEA; }
@media (max-width: 768px) {
  .proof { padding: 64px 0 48px; }
  .show, .stats, .places, .env, .faq, .cta { padding-top: 72px; padding-bottom: 72px; }
}

/* ---------- dark bands (Emergent's rhythm: near-black sections with a faint
   character grid at the edges, alternating with white) ---------- */
.band-dark { position: relative; background: #0A0A0A; color: #FFF; border-top: 0; isolation: isolate; }
.band-dark + section, .band-dark + footer { border-top: 0; }
.band-dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22440%22%20height%3D%22220%22%3E%3Cg%20font-family%3D%22ui-monospace%2CMenlo%2CConsolas%2Cmonospace%22%20font-size%3D%2215%22%20fill%3D%22%23303030%22%3E%3Ctext%20x%3D%226%22%20y%3D%2228%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%2228%22%3ET%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%2228%22%3E%3D%3C%2Ftext%3E%3Ctext%20x%3D%22158%22%20y%3D%2228%22%3ER%3C%2Ftext%3E%3Ctext%20x%3D%22198%22%20y%3D%2228%22%3E-%3C%2Ftext%3E%3Ctext%20x%3D%22282%22%20y%3D%2228%22%3EE%3C%2Ftext%3E%3Ctext%20x%3D%22332%22%20y%3D%2228%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22382%22%20y%3D%2228%22%3E-%3C%2Ftext%3E%3Ctext%20x%3D%22410%22%20y%3D%2228%22%3E%CE%BC%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%2264%22%3E%CE%BB%3C%2Ftext%3E%3Ctext%20x%3D%22126%22%20y%3D%2264%22%3ED%3C%2Ftext%3E%3Ctext%20x%3D%22182%22%20y%3D%2264%22%3EY%3C%2Ftext%3E%3Ctext%20x%3D%22262%22%20y%3D%2264%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22284%22%20y%3D%2264%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22318%22%20y%3D%2264%22%3E%CE%B8%3C%2Ftext%3E%3Ctext%20x%3D%22358%22%20y%3D%2264%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22392%22%20y%3D%2264%22%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%22100%22%3ER%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22100%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22136%22%20y%3D%22100%22%3E.%3C%2Ftext%3E%3Ctext%20x%3D%22170%22%20y%3D%22100%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22204%22%20y%3D%22100%22%3EN%3C%2Ftext%3E%3Ctext%20x%3D%22244%22%20y%3D%22100%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22312%22%20y%3D%22100%22%3E%CE%B8%3C%2Ftext%3E%3Ctext%20x%3D%22334%22%20y%3D%22100%22%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%22108%22%20y%3D%22136%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22158%22%20y%3D%22136%22%3EH%3C%2Ftext%3E%3Ctext%20x%3D%22192%22%20y%3D%22136%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22232%22%20y%3D%22136%22%3E-%3C%2Ftext%3E%3Ctext%20x%3D%22288%22%20y%3D%22136%22%3E%CE%BC%3C%2Ftext%3E%3Ctext%20x%3D%22328%22%20y%3D%22136%22%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%22350%22%20y%3D%22136%22%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%22372%22%20y%3D%22136%22%3EU%3C%2Ftext%3E%3Ctext%20x%3D%22412%22%20y%3D%22136%22%3E%2A%3C%2Ftext%3E%3Ctext%20x%3D%22434%22%20y%3D%22136%22%3E-%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%22172%22%3E%40%3C%2Ftext%3E%3Ctext%20x%3D%2228%22%20y%3D%22172%22%3EU%3C%2Ftext%3E%3Ctext%20x%3D%2268%22%20y%3D%22172%22%3EB%3C%2Ftext%3E%3Ctext%20x%3D%22142%22%20y%3D%22172%22%3E%CE%B8%3C%2Ftext%3E%3Ctext%20x%3D%22182%22%20y%3D%22172%22%3EY%3C%2Ftext%3E%3Ctext%20x%3D%22204%22%20y%3D%22172%22%3E%2A%3C%2Ftext%3E%3Ctext%20x%3D%22238%22%20y%3D%22172%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22260%22%20y%3D%22172%22%3E%CE%94%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%22172%22%3E%CE%BB%3C%2Ftext%3E%3Ctext%20x%3D%22406%22%20y%3D%22172%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22136%22%20y%3D%22208%22%3E%CE%B8%3C%2Ftext%3E%3Ctext%20x%3D%22232%22%20y%3D%22208%22%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%22340%22%20y%3D%22208%22%3EV%3C%2Ftext%3E%3Ctext%20x%3D%22368%22%20y%3D%22208%22%3E%2A%3C%2Ftext%3E%3Ctext%20x%3D%22396%22%20y%3D%22208%22%3EG%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat; background-size: 440px 220px;
  mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.5) 10%, transparent 22%, transparent 78%, rgba(0,0,0,.5) 90%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.5) 10%, transparent 22%, transparent 78%, rgba(0,0,0,.5) 90%, #000 100%); }
.band-dark > .wrap-1200, .band-dark > .wrap-930 { position: relative; z-index: 1; }
.band-dark .h2, .band-dark h2, .band-dark h3 { color: #FFF; }
.band-dark .show-body, .band-dark .cta-sub, .band-dark .cta-small { color: #A1A1AA; }
.band-dark .show-body strong { color: #FFF; }
.band-dark .btn-accent { background: #FFF; color: #000; }
.band-dark .btn-accent:hover { background: #E5E5E5; }
.band-dark .btn-outline { background: transparent; color: #FFF; border-color: #333; }
.band-dark .cta-small a { color: #8FBFFF; }
.band-dark .show-card { border-color: rgba(255, 255, 255, .12); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.band-dark .show-panel, .band-dark .show-pill { border: 1px solid #2E2E2E; }

/* ---------- the curtain: everything after the film is one opaque sheet that
   rides up over the held last frame (Apple: portal-content / garage-container
   with a negative margin; -8px is the overlap fudge so no seam shows) ---------- */
.film ~ * { position: relative; z-index: 4; }
.proof { background: #FFFFFF; margin-top: calc(-100svh - 8px); }
.footer { position: relative; z-index: 4; }

/* ---------- environment on a quiet inset panel (Emergent's video panel /
   Apple's #F5F5F7 band): white cards lose their borders on the tint ---------- */
.env-panel { background: #F5F5F7; border-radius: 20px; padding: 32px; }
.env-panel .env-card { border: 0; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.env-panel .env-card-2 { margin-top: 24px; }
@media (max-width: 600px) { .env-panel { padding: 16px; border-radius: 16px; } }

/* ---------- the nav over dark ground (the film's sea chapter, the dark
   bands): white type, inverted buttons ---------- */
.nav.on-dark .brand, .nav.on-dark .nav-links a, .nav.on-dark .theme-btn, .nav.on-dark .lang-btn { color: #FFF; }
.nav.on-dark .nav-links a:hover { color: rgba(255, 255, 255, .7); }
.nav.on-dark .btn-outline { background: rgba(255, 255, 255, .12); color: #FFF; border-color: rgba(255, 255, 255, .28); }
.nav.on-dark .btn-accent { background: #FFF; color: #000; }
.nav.on-dark .nav-toggle span { background: #FFF; }
.nav.on-dark.is-stuck { background: rgba(10, 10, 10, .55); border-bottom-color: rgba(255, 255, 255, .08); }

/* ---------- Apple's type voice on the page: semibold heads, tight tracking ---------- */
.h2 { font-weight: 600; letter-spacing: -.03em; }
.proof-names li, .place-grid h3, .env-cells strong, .env-left h3, .faq-item summary, .footer-col h4 { letter-spacing: -.01em; }
.btn { letter-spacing: -.01em; }

/* ---------- the script card assembles itself as it reveals ---------- */
@keyframes card-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes card-drop { from { opacity: 0; transform: translateY(-10px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes card-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes card-fade { from { opacity: 0; } to { opacity: 1; } }
.show-media.in .show-panel { animation: card-pop .7s cubic-bezier(.16, 1, .3, 1) .45s both; }
.show-media.in .show-pin { animation: card-drop .5s cubic-bezier(.16, 1, .3, 1) .7s both; }
.show-media.in .show-pill { animation: card-rise .6s cubic-bezier(.16, 1, .3, 1) .85s both; }
.show-media.in .wf-side > *, .show-media.in .wf-main > * { animation: card-fade .5s ease-out both; }
.show-media.in .wf-side > :nth-child(1), .show-media.in .wf-main > :nth-child(1) { animation-delay: .15s; }
.show-media.in .wf-side > :nth-child(2), .show-media.in .wf-main > :nth-child(2) { animation-delay: .22s; }
.show-media.in .wf-side > :nth-child(3), .show-media.in .wf-main > :nth-child(3) { animation-delay: .29s; }
.show-media.in .wf-side > :nth-child(4), .show-media.in .wf-main > :nth-child(4) { animation-delay: .36s; }
.show-media.in .wf-side > :nth-child(5) { animation-delay: .43s; }
.show-media.in .wf-side > :nth-child(6) { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .show-media.in .show-panel, .show-media.in .show-pin, .show-media.in .show-pill, .show-media.in .wf-side > *, .show-media.in .wf-main > * { animation: none; } }

/* ---------- the card keeps living after it arrives: the composer types its
   line and resets, the pin pulses, the active tool glows (Vercel's live demo
   feel) ---------- */
.show-panel-field span { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; border-right: 1.5px solid rgba(255, 255, 255, .7); }
.show-media.in .show-panel-field span { animation: type-line 6s steps(34, end) 1.4s infinite; }
@keyframes type-line { 0% { width: 0; border-color: rgba(255, 255, 255, .7); } 45% { width: 100%; } 70% { width: 100%; border-color: transparent; } 85% { width: 100%; opacity: 1; } 90% { width: 100%; opacity: 0; } 92% { width: 0; opacity: 0; } 94% { width: 0; opacity: 1; } 100% { width: 0; } }
.show-media.in .show-pin b { animation: card-drop .5s cubic-bezier(.16, 1, .3, 1) .7s both, pin-pulse 2.4s ease-out 1.6s infinite; }
@keyframes pin-pulse { 0% { box-shadow: 0 2px 8px rgba(0, 0, 0, .18), 0 0 0 0 rgba(0, 113, 227, .45); } 60% { box-shadow: 0 2px 8px rgba(0, 0, 0, .18), 0 0 0 12px rgba(0, 113, 227, 0); } 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, .18), 0 0 0 0 rgba(0, 113, 227, 0); } }
.show-media.in .show-pill-on { animation: tool-glow 2.4s ease-in-out 1.8s infinite; }
@keyframes tool-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); } 50% { box-shadow: 0 0 0 5px rgba(0, 113, 227, .28); } }
.show-media.in .show-panel-field svg { animation: arrow-nudge 6s ease-in-out 1.4s infinite; }
@keyframes arrow-nudge { 0%, 40% { transform: none; } 48% { transform: translateX(3px); } 56%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .show-media.in .show-panel-field span, .show-media.in .show-pin b, .show-media.in .show-pill-on, .show-media.in .show-panel-field svg { animation: none; } .show-panel-field span { border-right: 0; } }

/* ---------- Apple's sizing on top of the face: 17px body, semibold
   controls, tight display tracking, antialiased ---------- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
.show-body, .cta-sub, .faq-item p, .env-cells strong, .proof-lead { font-size: 17px; line-height: 1.47; letter-spacing: -.012em; }
.btn { font-weight: 600; font-size: 17px; letter-spacing: -.012em; }
.btn-34 { font-size: 15px; } .btn-pill { font-size: 15px; }
.nav-links a { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.h2 { letter-spacing: -.035em; line-height: 1.05; }
.h2-72 { letter-spacing: -.04em; }
.stat b { letter-spacing: -.04em; font-weight: 600; }
.place-grid h3, .env-left h3 { font-weight: 600; letter-spacing: -.02em; }

/* ---------- the card's story, on a 10s loop: the cursor arrives and clicks
   the pin, the panel opens, the line types, everything clears ---------- */
.show-cursor { position: absolute; right: 318px; top: 44px; z-index: 3; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.show-panel-field span { text-overflow: clip; }
.show-media.in .show-cursor { animation: cur-travel 10s cubic-bezier(.2, .7, .2, 1) 1s infinite; }
@keyframes cur-travel {
  0% { opacity: 0; transform: translate(-300px, 330px); }
  4% { opacity: 1; }
  14% { transform: translate(0, 0) scale(1); }
  16% { transform: translate(0, 0) scale(.8); }
  18% { transform: translate(0, 0) scale(1); }
  26% { opacity: 1; transform: translate(0, 0); }
  32% { opacity: 0; transform: translate(60px, 120px); }
  100% { opacity: 0; transform: translate(60px, 120px); }
}
.show-media.in .show-pin b { animation: pin-story 10s ease-out 1s infinite; }
@keyframes pin-story {
  0%, 15% { opacity: 0; transform: scale(.5); box-shadow: 0 2px 8px rgba(0, 0, 0, .18), 0 0 0 0 rgba(0, 113, 227, .5); }
  18% { opacity: 1; transform: scale(1.15); }
  21% { transform: scale(1); box-shadow: 0 2px 8px rgba(0, 0, 0, .18), 0 0 0 12px rgba(0, 113, 227, 0); }
  90% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(.9); }
}
.show-media.in .show-pin i { animation: pin-story 10s ease-out 1s infinite; }
.show-media.in .show-panel { animation: panel-story 10s cubic-bezier(.16, 1, .3, 1) 1s infinite; }
@keyframes panel-story {
  0%, 17% { opacity: 0; transform: translateY(14px) scale(.96); }
  24% { opacity: 1; transform: none; }
  90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(8px) scale(.98); }
}
.show-media.in .show-panel-field span { animation: type-story 10s steps(34, end) 1s infinite; border-right: 1.5px solid rgba(255, 255, 255, .7); }
@keyframes type-story { 0%, 27% { width: 0; } 62% { width: 100%; } 100% { width: 100%; } }
.show-media.in .show-panel-field svg { animation: arrow-story 10s ease-in-out 1s infinite; }
@keyframes arrow-story { 0%, 62% { transform: none; opacity: .6; } 66% { transform: translateX(3px); opacity: 1; } 72%, 100% { transform: none; opacity: 1; } }
.show-media.in .show-pill-on { animation: tool-story 10s ease-in-out 1s infinite; }
@keyframes tool-story { 0%, 14% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); } 18% { box-shadow: 0 0 0 6px rgba(0, 113, 227, .35); } 26%, 100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); } }
@media (prefers-reduced-motion: reduce) {
  .show-media.in .show-cursor, .show-media.in .show-pin b, .show-media.in .show-pin i, .show-media.in .show-panel, .show-media.in .show-panel-field span, .show-media.in .show-panel-field svg, .show-media.in .show-pill-on { animation: none; }
  .show-cursor { display: none; }
}
@media (max-width: 768px) { .show-cursor { display: none; } .show-media.in .show-pin b, .show-media.in .show-pin i, .show-media.in .show-panel { animation: none; } }

/* FAQ questions colour on hover (Apple blue), chevron follows */
.faq-item summary { transition: color .15s ease; cursor: pointer; }
.faq-item summary:hover, .faq-item summary:hover svg { color: var(--accent); }

/* ================= dark theme (the references' idiom: Vercel/Linear/Attio at night —
   black ground, #111 cards, 8% hairlines, white type, inverted buttons, blue kept) ================= */
:root[data-theme="dark"] { --paper: #000; --ink: #F5F5F7; --ink-2: #D4D4D8; --ink-3: #A1A1AA; --line: #262626; }
:root[data-theme="dark"] body, :root[data-theme="dark"] .proof, :root[data-theme="dark"] .stats, :root[data-theme="dark"] .places, :root[data-theme="dark"] .env, :root[data-theme="dark"] .faq, :root[data-theme="dark"] .footer { background: #000; color: #F5F5F7; }
:root[data-theme="dark"] .h2, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] .proof-lead b, :root[data-theme="dark"] .proof-names li, :root[data-theme="dark"] .stat b, :root[data-theme="dark"] .place-grid h3, :root[data-theme="dark"] .env-cells b, :root[data-theme="dark"] .env-cells strong, :root[data-theme="dark"] .env-strip p, :root[data-theme="dark"] .env-left h3, :root[data-theme="dark"] .env-fig b, :root[data-theme="dark"] .faq-item summary, :root[data-theme="dark"] .footer .brand, :root[data-theme="dark"] .footer-col h4 { color: #F5F5F7; }
:root[data-theme="dark"] .proof-lead, :root[data-theme="dark"] .stat span, :root[data-theme="dark"] .env-cells span, :root[data-theme="dark"] .env-fig > span, :root[data-theme="dark"] .faq-item p, :root[data-theme="dark"] .footer-col a, :root[data-theme="dark"] .footer-status, :root[data-theme="dark"] .footer-small, :root[data-theme="dark"] .dim, :root[data-theme="dark"] .env-inputs label { color: #A1A1AA; }
:root[data-theme="dark"] .show, :root[data-theme="dark"] .stats, :root[data-theme="dark"] .places, :root[data-theme="dark"] .env, :root[data-theme="dark"] .faq, :root[data-theme="dark"] .cta, :root[data-theme="dark"] .footer, :root[data-theme="dark"] .proof-track + *, :root[data-theme="dark"] .faq-item { border-color: #262626; }
:root[data-theme="dark"] .band-dark { background: #0A0A0A; border-top: 1px solid #262626; }
:root[data-theme="dark"] .btn-accent { background: #FFF; color: #000; }
:root[data-theme="dark"] .btn-accent:hover { background: #E5E5E5; }
:root[data-theme="dark"] .btn-outline { background: transparent; color: #F5F5F7; border-color: #333; }
:root[data-theme="dark"] .nav.is-stuck { background: rgba(10, 10, 10, .6); border-bottom-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .nav .brand, :root[data-theme="dark"] .nav-links a, :root[data-theme="dark"] .theme-btn, :root[data-theme="dark"] .lang-btn { color: #F5F5F7; }
:root[data-theme="dark"] .nav-actions .btn-outline { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .proof-pause { background: #111; border-color: #333; color: #A1A1AA; }
:root[data-theme="dark"] .proof-track { mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent); }
:root[data-theme="dark"] .show-card { background: #111; border-color: #262626; }
:root[data-theme="dark"] .show-clip { background: #141414; border-color: #262626; }
:root[data-theme="dark"] .wf-side { border-color: #222; }
:root[data-theme="dark"] .wf-side i, :root[data-theme="dark"] .wf-top i, :root[data-theme="dark"] .wf-lines i { background: #2A2A2A; }
:root[data-theme="dark"] .wf-side .wf-logo, :root[data-theme="dark"] .wf-side .wf-btn, :root[data-theme="dark"] .wf-top .wf-r, :root[data-theme="dark"] .wf-row b, :root[data-theme="dark"] .wf-block { background: #1F1F1F; }
:root[data-theme="dark"] .show-panel, :root[data-theme="dark"] .show-pill { border: 1px solid #333; }
:root[data-theme="dark"] .show-chips span { background: #222; border-color: #333; }
:root[data-theme="dark"] .t-mint { background: rgba(11, 92, 58, .35); color: #58DDA0; } :root[data-theme="dark"] .t-sky { background: rgba(0, 113, 227, .3); color: #6DB2FF; } :root[data-theme="dark"] .t-sand { background: rgba(180, 83, 9, .3); color: #F5B36B; } :root[data-theme="dark"] .t-teal { background: rgba(14, 116, 144, .35); color: #67D3E8; } :root[data-theme="dark"] .t-rose { background: rgba(180, 35, 24, .3); color: #F58C85; }
:root[data-theme="dark"] .env-panel { background: #0F0F0F; border: 1px solid #262626; }
:root[data-theme="dark"] .env-panel .env-card, :root[data-theme="dark"] .env-card { background: #161616; box-shadow: none; }
:root[data-theme="dark"] .env-cells li, :root[data-theme="dark"] .env-strip, :root[data-theme="dark"] .env-left, :root[data-theme="dark"] .env-cells li:nth-child(-n+2) { border-color: #262626; }
:root[data-theme="dark"] .env-inputs select { background-color: #111; color: #F5F5F7; border-color: #333; }
:root[data-theme="dark"] .env-bar { background: #2A2A2A; } :root[data-theme="dark"] .env-bar i { background: #FFF; }
:root[data-theme="dark"] .place-grid a, :root[data-theme="dark"] .cta-small a, :root[data-theme="dark"] a.faq-link { color: #6DB2FF; }
:root[data-theme="dark"] .faq-item summary:hover { color: #6DB2FF; }
:root[data-theme="dark"] .cta { background: #0A0A0A; }
:root[data-theme="dark"] .footer-col a:hover { color: #F5F5F7; }

/* the foot of the page is black (the owner: it looked odd white under the dark close) */
.footer { background: #0A0A0A; border-top: 1px solid #262626; color: #F5F5F7; }
.footer .brand, .footer-col h4 { color: #F5F5F7; }
.footer-col a, .footer-status, .footer-small, .footer p { color: #A1A1AA; }
.footer-col a:hover { color: #F5F5F7; }
.footer-rule, .footer hr { border-color: #262626; }

/* footer headings: whatever element they are, white on the black foot */
.footer-col > :first-child, .footer-col h3, .footer-col h4, .footer-col strong, .footer-col b, .footer-head { color: #F5F5F7; }
.footer .brand-mark, .footer .brand svg, .footer .brand i { outline: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; }
/* FAQ hover reaches the text inside the summary */
.faq-item summary:hover, .faq-item summary:hover * { color: var(--accent) !important; }
/* dark theme: the accent stays blue (Apple's dark blue), and the nav keeps the film's
   own colours while the film is under it — the video never changes */
:root[data-theme="dark"] { --accent: #2997FF; --accent-soft: rgba(41, 151, 255, .18); --accent-line: rgba(41, 151, 255, .4); --sky-ink: #2997FF; }
:root[data-theme="dark"] .nav:not(.is-stuck):not(.on-dark) .brand, :root[data-theme="dark"] .nav:not(.is-stuck):not(.on-dark) .nav-links a, :root[data-theme="dark"] .nav:not(.is-stuck):not(.on-dark) .theme-btn, :root[data-theme="dark"] .nav:not(.is-stuck):not(.on-dark) .lang-btn { color: #000; }
:root[data-theme="dark"] .nav:not(.is-stuck):not(.on-dark) .btn-outline { background: rgba(255, 255, 255, .7); color: #000; border-color: #E5E5E5; }
:root[data-theme="dark"] .nav:not(.is-stuck):not(.on-dark) .btn-accent { background: #000; color: #FFF; }
:root[data-theme="dark"] .film, :root[data-theme="dark"] .film-sticky { background: #0B0F0C; }
:root[data-theme="dark"] .film-title, :root[data-theme="dark"] .film-kicker, :root[data-theme="dark"] .film-places { color: #1D3045; }
:root[data-theme="dark"] .film-title-w, :root[data-theme="dark"] .film-copy-r { color: #FFF; }
:root[data-theme="dark"] .place-grid a, :root[data-theme="dark"] .cta-small a, :root[data-theme="dark"] .faq-item summary:hover, :root[data-theme="dark"] .faq-item summary:hover * { color: #2997FF !important; }

/* the sheet that rides over the film has rounded leading corners */
.proof { border-radius: 44px 44px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .22); }
@media (max-width: 768px) { .proof { border-radius: 28px 28px 0 0; } }

@media (max-width: 768px) { .show-media.in .show-panel-field span { animation: none; width: auto; border-right: 0; } .show-media.in .show-panel-field svg { animation: none; } .proof-head { flex-wrap: wrap; } .h2 { font-size: clamp(30px, 8.5vw, 40px); } }

/* the environment section announces itself: a green eyebrow with a leaf */
.env-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-ink); }
.env-eyebrow .t-mint { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
:root[data-theme="dark"] .env-eyebrow { color: #58DDA0; }

/* the pause button swaps to a play glyph while paused */
.proof-pause .ico-play { display: none; }
.proof-pause[aria-pressed="true"] .ico-pause { display: none; }
.proof-pause[aria-pressed="true"] .ico-play { display: block; }
.proof-pause[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); }

/* the character grid does not move; it fades in once as the band enters (scroll-driven, no JS) */
@supports (animation-timeline: view()) {
  .band-dark::before { animation: tex-in 1s ease-out both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
}
@keyframes tex-in { from { opacity: 0; } to { opacity: 1; } }

/* environment: cells arrive one after another, numbers count up, the bar fills */
.env-cells b em { font-style: normal; }
.env-card.reveal .env-cells li { opacity: 0; transform: translateY(14px); }
.env-card.reveal.in .env-cells li { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.env-card.reveal.in .env-cells li:nth-child(2) { transition-delay: .1s; } .env-card.reveal.in .env-cells li:nth-child(3) { transition-delay: .2s; } .env-card.reveal.in .env-cells li:nth-child(4) { transition-delay: .3s; }
.env-card.reveal .env-bar i { width: 0 !important; }
.env-card.reveal.in .env-bar i { width: var(--w, 0%) !important; transition: width 1.1s cubic-bezier(.16, 1, .3, 1) .35s; }

/* questions: each row slides in from the left, staggered */
.faq-item.reveal { transform: translateX(-18px); }
.faq-item.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .env-card.reveal .env-cells li, .env-card.reveal .env-bar i { opacity: 1; transform: none; width: var(--w, 0%) !important; } .band-dark::before { animation: none; } }

/* what we check: the coloured tiles pop in, then the titles rise */
.place-grid > li.reveal .tile { opacity: 0; transform: scale(.55) rotate(-6deg); }
.place-grid > li.reveal.in .tile { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .8s cubic-bezier(.34, 1.56, .64, 1); transition-delay: inherit; }
.place-grid > li.reveal h3, .place-grid > li.reveal a { opacity: 0; transform: translateY(10px); }
.place-grid > li.reveal.in h3, .place-grid > li.reveal.in a { opacity: 1; transform: none; transition: opacity .6s ease-out .25s, transform .7s cubic-bezier(.16, 1, .3, 1) .25s; }
@media (prefers-reduced-motion: reduce) { .place-grid > li.reveal .tile, .place-grid > li.reveal h3, .place-grid > li.reveal a { opacity: 1; transform: none; } }

/* "Hi, Name" and its settings menu */
.nav-me-wrap { position: relative; display: inline-flex; }
.nav-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px; padding: 8px; background: #FFF; border: 1px solid #EAEAEA; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .14); z-index: 60; display: flex; flex-direction: column; }
.nav-menu[hidden] { display: none; }
.nav-menu-who { margin: 4px 10px 8px; padding-bottom: 10px; border-bottom: 1px solid #EAEAEA; font-size: 14px; color: #666; display: flex; flex-direction: column; gap: 2px; }
.nav-menu-who b { color: #000; font-size: 15px; }
.nav-menu > a, .nav-menu > button { display: block; width: 100%; text-align: left; padding: 10px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 15px; font-weight: 500; color: #000; text-decoration: none; cursor: pointer; min-height: 44px; }
.nav-menu > a:hover, .nav-menu > button:hover { background: #F5F5F7; }
.nav-menu > [data-menu="out"] { color: #B42318; }
.nav-sheet .nav-me-wrap { display: block; } .nav-sheet .nav-menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; }
:root[data-theme="dark"] .nav-menu { background: #111; border-color: #262626; } :root[data-theme="dark"] .nav-menu-who { border-color: #262626; color: #A1A1AA; } :root[data-theme="dark"] .nav-menu-who b, :root[data-theme="dark"] .nav-menu > a, :root[data-theme="dark"] .nav-menu > button { color: #F5F5F7; } :root[data-theme="dark"] .nav-menu > a:hover, :root[data-theme="dark"] .nav-menu > button:hover { background: #1F1F1F; }

/* the scroll cue: a mouse outline with a dropping dot, shown once the reader pauses on the film */
.film-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #1D3045; opacity: 0; transition: opacity .6s ease, transform .6s ease; pointer-events: none; z-index: 3; }
.film.is-dark .film-cue { color: rgba(255, 255, 255, .62); }
.film-cue.is-on { opacity: .9; transform: translateX(-50%) translateY(0); }
.film-cue-mouse { position: relative; width: 26px; height: 42px; border: 2px solid currentColor; border-radius: 14px; }
.film-cue-mouse i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: cue-drop 1.8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes cue-drop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(16px); opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
.film-cue-text { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .film-cue-mouse i { animation: none; } }
@media (max-width: 768px) { .film-cue { bottom: 20px; } }

.film-cue { transition-delay: 0s; }

/* questions: each row slides in and its hairline draws across, one after another */
.faq-item.reveal { border-bottom-color: transparent !important; background: linear-gradient(var(--line), var(--line)) no-repeat left bottom / 0% 1px; transform: translateX(-24px); }
.faq-item.reveal.in { background-size: 100% 1px; transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1), background-size 1.1s cubic-bezier(.2, .7, .2, 1) .25s; }
.faq-item.reveal summary svg { opacity: 0; transform: rotate(-90deg); }
.faq-item.reveal.in summary svg { opacity: 1; transform: none; transition: opacity .5s ease .5s, transform .6s cubic-bezier(.16, 1, .3, 1) .5s; }
.faq-head.reveal { transform: translateY(24px) scale(.97); }
@media (prefers-reduced-motion: reduce) { .faq-item.reveal { background-size: 100% 1px; transform: none; } .faq-item.reveal summary svg { opacity: 1; transform: none; } }

/* phones: every control at least 44px tall */
@media (max-width: 768px) {
  .nav-actions .btn, .nav .btn { min-height: 44px; }
  .proof-pause { width: 44px; height: 44px; }
  .env-strip .btn, .btn-34 { min-height: 44px; padding: 0 18px; }
  .film-rail-btn, .film-dot { min-width: 44px; min-height: 44px; }
}

/* the dark panel sits centred in the card now that the toolbar is gone */
.show-card { margin-bottom: 0; }
.show-panel { top: 0 !important; bottom: 0; margin-block: auto; height: fit-content; }
.show-pin { top: 0 !important; bottom: 0; margin-block: auto; height: fit-content; translate: 0 -112px; }
@media (max-width: 768px) { .show-panel { position: static !important; margin-block: 12px 0; height: auto; } .show-pin { display: none; } }

/* phones get the same story, minus the cursor and the pin: the panel opens,
   the line types itself, the arrow nudges — on the same 10s loop */
@media (max-width: 768px) {
  .show-media.in .show-panel { animation: panel-story 10s cubic-bezier(.16, 1, .3, 1) 1s infinite !important; }
  .show-media.in .show-panel-field span { animation: type-story 10s steps(34, end) 1s infinite !important; width: 0; border-right: 1.5px solid rgba(255, 255, 255, .7); }
  .show-media.in .show-panel-field svg { animation: arrow-story 10s ease-in-out 1s infinite !important; }
  .show-media.in .wf-side > *, .show-media.in .wf-main > * { animation: card-fade .5s ease-out both; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .show-media.in .show-panel, .show-media.in .show-panel-field span, .show-media.in .show-panel-field svg { animation: none !important; }
  .show-media.in .show-panel-field span { width: auto; border-right: 0; }
}

/* ================= phone pass (audit, 390 and 360 wide) ================= */
@media (max-width: 899px) {
  /* the blur on the stuck bar made #nav a containing block, so the open menu
     collapsed to a 32px sliver: no blur while the sheet is open */
  .nav.is-open { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-toggle { flex: 0 0 44px; width: 44px; height: 44px; }
  .nav .brand, .footer .brand { min-height: 44px; }
}
@media (max-width: 768px) {
  .h2 { line-height: 1.14; }
  /* the marquee's 96px edge fade ate half a phone screen */
  .proof-track, :root[data-theme="dark"] .proof-track {
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .show-clip { height: 184px; }
  .place-grid a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 15px; }
  .cta-small a, .film-link { display: inline-block; min-height: 44px; line-height: 44px; font-size: 15px; }
  .footer-col a { padding: 12px 0; font-size: 15px; }
  .footer-col .nav-me { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 12px 0; font-size: 15px; font-weight: 400; color: #A1A1AA; background: none; border: 0; text-align: left; }
  .show-panel-line, .env-cells span, .env-fig > span, .footer-status { font-size: 14px; }
  .env-inputs label { font-size: 14px; }
  .faq-head p, .auth-help { text-wrap: balance; }
}
@media (max-width: 640px) { #ctaHead br { display: none; } }
@media (max-width: 600px) { .env-panel { padding: 8px; } .env-panel .env-card { padding-inline: 16px; } }
/* the font shorthand was invalid (family "inherit"), so both selects fell back to 12px */
.env-inputs select { font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; }

/* the environment pickers: the native popup needs its own colours at night */
.env-inputs option { background-color: #FFFFFF; color: #111111; }
:root[data-theme="dark"] .env-inputs option { background-color: #1A1A1A; color: #F5F5F7; }

/* ---------- language ---------- */
/* the globe sits in the desktop bar; on phones the bar is full, so the three names go in the menu sheet and the footer */
@media (max-width: 899px) { .nav-lang { display: none; } }
.nav-sheet-lang { padding-top: 20px; }
.nav-sheet-lang .lang-inline-list a { font-size: 17px; }
.footer-lang { margin-top: 12px; }
.footer-lang .lang-inline-list a { color: #A1A1AA; font-size: 14px; }
.footer-lang .lang-inline-list a:hover, .footer-lang .lang-inline-list a[aria-current="true"] { color: #F5F5F7; }
/* the landing's dark theme uses #111 cards on black, not the app's green-black */
:root[data-theme="dark"] .lang-menu { background: #111; border-color: #262626; }
:root[data-theme="dark"] .lang-menu a { color: #F5F5F7; }
:root[data-theme="dark"] .lang-menu a:hover { background: #1F1F22; }

/* ============================================================
   THE LOADING BAR - a first visit waits here until the film's frames
   are in (boot.js). The veil is the film's first frame before it lands:
   its colours row by row, and the film's navy, so lifting it reads as the
   peaks coming through the cloud rather than one page swapping for another.
   The mark alone, like a boot screen: a wordmark would re-set under the
   bar when the web font arrived.
   ============================================================ */
.boot { display: none; }
/* No scrollbar while it is up. The page reflows by the scrollbar's width at
   the lift, under the veil's first 80 ms at full opacity, where nobody sees it. */
html.is-booting { overflow: hidden; }
/* hidden from sight, focus and screen readers from the first paint, not only
   once the page has parsed and boot.js can set inert */
html.is-booting body > :not(#boot) { visibility: hidden; }
/* i18n hides the whole body until the dictionaries apply; the veil already
   covers the untranslated page, so let the bar itself show */
html.i18n-pending.is-booting body { visibility: visible; opacity: 1; }
html.is-booting .boot, html.is-lifting .boot {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background-color: #C7CCD6;   /* forced colours keeps a colour, never a gradient */
  background-image: linear-gradient(180deg, #CDD2DA 0%, #C6CCD5 48%, #CDD2DB 78%, #D8DCE5 100%);
  color: #1D3045;
  touch-action: none;   /* older iOS scrolls the page through overflow:hidden */
}
/* the scrollbar returns at the lift; its track wears the veil's colour through the fade */
html.is-lifting { scrollbar-color: rgba(0, 0, 0, .35) #C7CCD6; }
.boot-inner { display: grid; justify-items: center; gap: 26px; }
.boot-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #1D3045; color: #F3F5F7; }
.boot-bar { position: relative; width: 168px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(29, 48, 69, .2); }
.boot-fill { position: absolute; inset: 0; border-radius: inherit; background: #1D3045; transform: scaleX(0); transform-origin: left center; will-change: transform; }
html.is-lifting .boot { opacity: 0; pointer-events: none; transition: opacity .6s cubic-bezier(.2, .7, .2, 1) .08s; }
html.is-lifting .boot-inner { opacity: 0; transform: translateY(-8px); transition: opacity .28s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  html.is-lifting .boot, html.is-lifting .boot-inner { transition: none; }
}
/* Windows high contrast drops backgrounds: draw the bar in system colours */
@media (forced-colors: active) {
  .boot-mark { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .boot-bar { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
  .boot-fill { forced-color-adjust: none; background: CanvasText; }
}