/* FolioCam marketing site.
   Tokens mirror foliocam-mobile/src/lib/theme/theme.ts: hue-free neutrals, one orange accent used as
   a fill, a darker ink rung whenever orange is a word, white cards lifted just off an off-white
   ground. The page opens and closes on a dark "stage" panel, the same #121212 the app puts behind a
   photo, which is the one place the site allows itself glow and glass. */

/* Exo 2, approved for FolioCam's interfaces on October 19. One locally hosted variable face
   answers every weight, matching the desktop and native apps. */
@font-face { font-family: "Exo 2"; font-weight: 100 900; font-style: normal; font-display: swap; src: url(Exo2-Variable.83aee59b11fc3ba3.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  --bg: #F8F8F8; --surface: #FFFFFF; --surface-pressed: #EDEDED;
  --text: #1A1A1A; --text-dim: #6D6D6D; --border: #DDDDDD; --border-hover: #C4C4C4;
  --accent: #F06912; --accent-ink: #9C5212; --accent-muted: #FBECDF; --on-accent: #FFFFFF; --on-mark: #FFFFFF;
  --accent-ramp: linear-gradient(180deg, #FB7D26 0%, #E95D0A 50%, #D25205 100%); --accent-lit-edge: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --grad-hi: #FFB14E; --grad-lo: #C74E00;
  --success: #1F9D61; --success-muted: #DCF2E7; --warning-muted: #FAF0D2;
  --ink: #1A1A1A; --on-ink: #FFFFFF;
  --shadow-card: 0 4px 12px rgba(18, 18, 18, 0.06);
  --shadow-hover: 0 18px 40px -22px rgba(18, 18, 18, 0.28);
  --shadow-bar: 0 8px 24px rgba(18, 18, 18, 0.1);
  --shadow-glow: 0 3px 8px rgba(255, 122, 24, 0.18);
  --hairline: 1px solid var(--border);
  --stage: #121212; --stage-text: #ECECEC; --stage-dim: #A6A6A6;
  --stage-line: rgba(255, 255, 255, 0.12); --stage-glass: rgba(255, 255, 255, 0.07); --stage-glass-strong: rgba(255, 255, 255, 0.11);
  --glow: rgba(255, 122, 24, 0.34);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --font: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 1160px; --gutter: 24px; --frame: 12px; --section-gap: 144px;
}
/* The marketing homepage always uses the light palette, including browser controls. */
:root[data-appearance="light"] { color-scheme: only light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]):not([data-theme="light"]) {
    --bg: #121212; --surface: #1E1E1E; --surface-pressed: #262626; --text: #ECECEC; --text-dim: #9E9E9E;
    --border: #323232; --border-hover: #4A4A4A; --accent: #EF691C; --accent-ink: #FF9A55; --accent-muted: #33200F;
    --accent-ramp: linear-gradient(180deg, #FA7A2C 0%, #E5590C 50%, #CE4C07 100%); --accent-lit-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --grad-hi: #F49B3D; --grad-lo: #A94D02;
    --success: #46C489; --success-muted: #173327; --warning-muted: #332B10; --ink: #ECECEC; --on-ink: #121212;
    --shadow-card: none; --shadow-hover: none; --shadow-bar: none; --shadow-glow: none;
    --stage: #0C0C0C; --stage-line: rgba(255, 255, 255, 0.14); --plan-line-featured: rgba(18, 18, 18, 0.16);
  }
}
:root[data-theme="dark"]:not([data-appearance="light"]) {
  --bg: #121212; --surface: #1E1E1E; --surface-pressed: #262626; --text: #ECECEC; --text-dim: #9E9E9E;
  --border: #323232; --border-hover: #4A4A4A; --accent: #EF691C; --accent-ink: #FF9A55; --accent-muted: #33200F;
  --accent-ramp: linear-gradient(180deg, #FA7A2C 0%, #E5590C 50%, #CE4C07 100%); --accent-lit-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --grad-hi: #F49B3D; --grad-lo: #A94D02;
  --success: #46C489; --success-muted: #173327; --warning-muted: #332B10; --ink: #ECECEC; --on-ink: #121212;
  --shadow-card: none; --shadow-hover: none; --shadow-bar: none; --shadow-glow: none;
  --stage: #0C0C0C; --stage-line: rgba(255, 255, 255, 0.14); --plan-line-featured: rgba(18, 18, 18, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased;
  --page-text: var(--text); --page-surface: var(--surface); --page-surface-pressed: var(--surface-pressed);
  --page-border: var(--border); --page-ink: var(--ink); --page-on-ink: var(--on-ink); --page-shadow-bar: var(--shadow-bar);
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
section[id] { scroll-margin-top: 88px; }

/* Type */
.h1 { font-weight: 700; font-size: clamp(42px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.h2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.h3 { font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--text-dim); max-width: 52ch; text-wrap: pretty; }
.dim { color: var(--text-dim); }
.num { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 16px/1 var(--font); letter-spacing: 0.01em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn--primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn--primary:hover { filter: brightness(1.18); }
.btn--accent { background: var(--accent-ramp) 0 0 / 100% 200% border-box var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: var(--accent-lit-edge); transition: background-position 0.15s var(--ease); }
.btn--accent:hover { background-position: 0 100%; }
.btn--outline { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--outline:hover { background: var(--surface-pressed); }
.btn--white { background: #FFFFFF; color: #1A1A1A; border-color: #FFFFFF; }
.btn--white:hover { background: #EDEDED; border-color: #EDEDED; }
.btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.28); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn--sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn[aria-disabled="true"] { cursor: default; }
.btn--store { height: 58px; padding: 0 22px 0 18px; gap: 12px; background: #FFFFFF; color: #1A1A1A; border-color: #FFFFFF; text-align: left; }
.btn--store:hover { background: #EDEDED; border-color: #EDEDED; }
.btn--store svg { width: 24px; height: 24px; flex: none; }
.btn--store span { display: flex; flex-direction: column; gap: 1px; line-height: 1; }
.btn--store small { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.7; }
.btn--store b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

.eyebrow { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; border: var(--hairline); background: var(--surface); color: var(--text-dim); font-weight: 600; font-size: 13px; line-height: 1; white-space: nowrap; }

.card { background: var(--surface); border: var(--hairline); border-radius: 24px; box-shadow: var(--shadow-card); padding: 28px; display: flex; flex-direction: column; gap: 24px; transition: translate 0.45s var(--spring), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease); }

/* Nav: flat over the stage, a glass pill once you scroll, the page's own colours once it leaves the stage. */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding: 14px calc(var(--frame) + var(--gutter)) 0; pointer-events: none; }
.nav {
  position: relative; pointer-events: auto; margin-inline: auto; width: 100%;
  max-width: calc(var(--container) - 2 * var(--gutter) + 8px); height: 64px; padding: 0 8px 0 20px; border-radius: 999px;
  display: flex; align-items: center; gap: 20px; background: rgba(30, 30, 30, 0); border: 1px solid transparent;
  --text: var(--stage-text); color: var(--stage-text);
  --nav-hover: rgba(255, 255, 255, 0.1); --nav-current: #FFFFFF; --nav-btn-bg: #FFFFFF; --nav-btn-text: #1A1A1A;
  --nav-panel-bg: #1E1E1E; --nav-panel-border: var(--stage-line);
  --nav-panel-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.8);
  transition: max-width 0.6s var(--ease), height 0.4s var(--ease), padding 0.4s var(--ease),
    background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.3s;
}
.nav.is-scrolled {
  max-width: 1040px; height: 56px; padding: 0 8px 0 20px; background: rgba(30, 30, 30, 0.74); border-color: var(--stage-line);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.75);
}
.nav.is-past {
  background: var(--page-surface); border-color: var(--page-border); box-shadow: var(--page-shadow-bar);
  --text: var(--page-text); color: var(--page-text); --nav-hover: var(--page-surface-pressed); --nav-current: var(--accent-ink); --nav-btn-bg: var(--page-ink); --nav-btn-text: var(--page-on-ink);
  --nav-panel-bg: var(--page-surface); --nav-panel-border: var(--page-border); --nav-panel-shadow: var(--page-shadow-bar);
}
.nav__brand { flex: none; display: flex; align-items: center; text-decoration: none; }
.nav__brand svg { height: 26px; width: auto; display: block; transition: height 0.4s var(--ease); }
.nav.is-scrolled .nav__brand svg { height: 23px; }
.nav__links { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; gap: 2px; white-space: nowrap; }
.nav__links a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; color: inherit; transition: background-color 0.2s; }
.nav__links a:hover { background: var(--nav-hover); }
/* The section in view: its link wears the hover pill and the accent, set by the page's scroll spy. */
.nav__links a[aria-current], .nav__menu a:not(.btn)[aria-current] { background: var(--nav-hover); color: var(--nav-current); }
.nav .btn { flex: none; background: var(--nav-btn-bg); color: var(--nav-btn-text); border-color: transparent; transition: filter 0.2s; }
.nav .btn:hover { filter: brightness(0.92); }
.nav__cta { margin-left: auto; }

/* Under 900px the five links have nowhere to sit, so they move behind one button. The pill
   keeps only the wordmark and the burger — the call to action goes inside the menu with
   them, because a wordmark, a button and an icon do not fit a 320px pill and the hero's own
   button is a thumb's reach below. The panel reads the nav's colours, so it is glass over
   the stage and the page's own surface once the nav has left it, with no second set of
   states to keep in step. */
.nav__burger {
  display: none; flex: none; margin-left: auto; width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center; border: 0; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer; transition: background-color 0.2s;
}
.nav__burger:hover { background: var(--nav-hover); }
.nav__bars { position: relative; display: block; width: 18px; height: 12px; }
.nav__bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: translate 0.3s var(--ease), rotate 0.3s var(--ease), opacity 0.16s linear;
}
.nav__bars span:nth-child(1) { top: 0; }
.nav__bars span:nth-child(2) { top: 50%; margin-top: -0.75px; }
.nav__bars span:nth-child(3) { bottom: 0; }
.nav.is-menu-open .nav__bars span:nth-child(1) { translate: 0 5.25px; rotate: 45deg; }
.nav.is-menu-open .nav__bars span:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav__bars span:nth-child(3) { translate: 0 -5.25px; rotate: -45deg; }
.nav__menu {
  display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  flex-direction: column; gap: 2px; padding: 10px; border-radius: 26px;
  background: var(--nav-panel-bg); border: 1px solid var(--nav-panel-border); box-shadow: var(--nav-panel-shadow);
  opacity: 0; visibility: hidden; translate: 0 -10px; pointer-events: none;
  transition: opacity 0.26s var(--ease), translate 0.26s var(--ease), visibility 0.26s,
    background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.is-menu-open .nav__menu { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }
.nav__menu a:not(.btn) {
  display: flex; align-items: center; height: 50px; padding: 0 16px; border-radius: 18px;
  text-decoration: none; font-weight: 600; font-size: 16px; color: inherit; transition: background-color 0.2s;
}
.nav__menu a:not(.btn):hover { background: var(--nav-hover); }
.nav__menu .btn { width: 100%; height: 50px; margin-top: 8px; }

/* Sections */
/* Every section is separated by one number, and the closer reads it too so the last gap on
   the page is the same as all the others. */
.section { padding-top: var(--section-gap); }
.section__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 720px; margin: 0 auto 48px; }

/* Hero: the stage. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; margin: var(--frame) var(--frame) 0; border-radius: 32px;
  border: 1px solid var(--stage-line); background: var(--stage); color: var(--stage-text); padding-top: 140px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 64%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 64%);
}
.hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 980px; margin-inline: auto; padding-inline: var(--gutter); }
.hero__copy .h1 { color: #FFFFFF; }
.hero__copy .h1 em { font-style: normal; color: var(--accent); }
.hero__copy .lead { color: var(--stage-dim); max-width: 46ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

/* Under the headline: the phone and the office, both real. The phone is the camera screenshot
   (img/app-camera.webp) with the app's own live-outline sequence played over it: its focus
   square, its yellow outline at the thin weight, its words, its shutter and its receipt. The
   browser is the web app's Photos page drawn in code from the same demo photographs, so the shot
   the phone takes can land in it. Everything is sized in --u, one pixel of a 1120-wide drawing,
   so the pair scales as one picture rather than reflowing into two. */
.live { container-type: inline-size; position: relative; max-width: 1180px; margin: 56px auto 0; padding: 0 var(--gutter) 40px; }
.live__canvas { --u: calc(100cqw / 1080); position: relative; height: calc(636 * var(--u)); }
.live__glow { position: absolute; left: 50%; top: calc(40 * var(--u)); width: calc(1000 * var(--u)); height: calc(640 * var(--u)); transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--glow), rgba(230, 126, 34, 0)); }

/* A laptop and a phone, bottom-aligned, the phone standing at the laptop's lower right: the
   construction of SoloPro's own hero (Ken/landing, DeviceShowcase), drawn on the dark stage. */
.live__laptop { position: absolute; left: 0; top: calc(28 * var(--u)); width: calc(900 * var(--u)); }
.live__lid {
  position: relative; margin: 0 calc(32 * var(--u)); padding: calc(16 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u));
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  background: #0A0A0A; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.live__lens { position: absolute; top: calc(6 * var(--u)); left: calc(50% - 2 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: #2A2A2A; }
.live__display { --w: calc(var(--u) * 818 / 1300); aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(8 * var(--u)); background: #F7F8FA; }
.live__base {
  position: relative; height: calc(14 * var(--u)); margin-top: -1px;
  border-radius: 3px 3px 36px 36px / 3px 3px 12px 12px;
  background: linear-gradient(#E4E4E6, #A9A9AD); box-shadow: 0 18px 26px -12px rgba(0, 0, 0, 0.7);
}
.live__base span { position: absolute; top: 0; left: 43%; width: 14%; height: calc(4 * var(--u)); border-radius: 0 0 6px 6px; background: #9A9A9E; }

/* The web app's Photos page at 1300 x 812, measured off the running app (web/src/app.tsx
   and styles.css, demo mode) and drawn here in --w, one pixel of that window, so the laptop
   shows the shell exactly: the sidebar, its wordmark and organization switcher, the top bar
   with Dana's photo, and the page. */
.wa {
  --text: #16202C; display: grid; grid-template-columns: calc(264 * var(--w)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; overflow: hidden;
  background: #F7F8FA; color: #16202C; font-size: calc(15 * var(--w)); font-weight: 450; line-height: 1.47; text-align: left;
}
.wa .ic { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.wa__side { display: flex; flex-direction: column; padding: 0 calc(8 * var(--w)) calc(16 * var(--w)); background: #FFFFFF; border-right: 1px solid #E7EAEE; }
.wa__brand { flex: none; display: flex; align-items: center; justify-content: center; height: calc(80 * var(--w)); margin-bottom: calc(16 * var(--w)); }
.wa__brand svg { width: calc(155.3 * var(--w)); height: calc(27 * var(--w)); }
.wa__navs { display: flex; flex-direction: column; gap: calc(4 * var(--w)); }
.wa__nav { display: flex; align-items: center; gap: calc(12 * var(--w)); height: calc(48 * var(--w)); padding: 0 calc(16 * var(--w)); border-radius: calc(8 * var(--w)); color: #5A6676; font-weight: 500; }
.wa__nav .ic { width: calc(20 * var(--w)); height: calc(20 * var(--w)); }
.wa__nav.is-current { background: #FFF1E6; color: #AA4808; font-weight: 600; }
.wa__chev { margin-left: auto; color: #5A6676; }
.wa__sub { display: flex; align-items: center; height: calc(44 * var(--w)); padding-left: calc(48 * var(--w)); color: #5A6676; font-weight: 500; }
.wa__org { display: flex; align-items: center; gap: calc(10 * var(--w)); height: calc(56 * var(--w)); margin-top: auto; padding: 0 calc(12 * var(--w)); border: 1px solid #E7EAEE; border-radius: calc(8 * var(--w)); font-weight: 600; }
.wa__org i { flex: none; display: grid; place-items: center; width: calc(32 * var(--w)); height: calc(32 * var(--w)); border-radius: calc(8 * var(--w)); background: #D5DAE0; }
.wa__org i .ic { width: calc(16 * var(--w)); height: calc(16 * var(--w)); }
.wa__org b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wa__org > .ic { width: calc(18 * var(--w)); height: calc(18 * var(--w)); color: #5A6676; }
.wa__main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.wa__top { flex: none; display: flex; align-items: center; gap: calc(8 * var(--w)); height: calc(80 * var(--w)); padding: 0 calc(32 * var(--w)); background: #FFFFFF; border-bottom: 1px solid #E7EAEE; color: #5A6676; }
.wa__crumb { display: flex; align-items: center; gap: calc(6 * var(--w)); margin-right: auto; padding: calc(4 * var(--w)) calc(6 * var(--w)); color: #5A6676; font-size: calc(14 * var(--w)); font-weight: 500; }
.wa__crumb .ic { width: calc(14 * var(--w)); height: calc(14 * var(--w)); }
.wa__crumb b { color: #16202C; font-weight: 500; }
.wa__icon { position: relative; display: grid; place-items: center; width: calc(40 * var(--w)); height: calc(40 * var(--w)); }
.wa__icon .ic { width: calc(21 * var(--w)); height: calc(21 * var(--w)); }
.wa__icon i { position: absolute; left: calc(20.4 * var(--w)); top: calc(3 * var(--w)); display: grid; place-items: center; min-width: calc(17.7 * var(--w)); height: calc(17 * var(--w)); padding: 0 calc(4 * var(--w)); border: calc(2 * var(--w)) solid #FFFFFF; border-radius: calc(9 * var(--w)); background: #D92D2D; color: #FFFFFF; font-style: normal; font-size: calc(10 * var(--w)); font-weight: 700; line-height: 1; }
.wa__divider { width: 1px; height: calc(24 * var(--w)); margin: 0 calc(4 * var(--w)); background: #E7EAEE; }
.wa__me { display: inline-flex; align-items: center; gap: calc(10 * var(--w)); padding: calc(4 * var(--w)) calc(8 * var(--w)) calc(4 * var(--w)) calc(4 * var(--w)); color: #16202C; font-weight: 600; }
.wa__me img { width: calc(32 * var(--w)); height: calc(32 * var(--w)); border-radius: 50%; object-fit: cover; }
.wa__me b { font-weight: 600; }
.wa__me .ic { width: calc(16 * var(--w)); height: calc(16 * var(--w)); margin-left: calc(-2 * var(--w)); color: #5A6676; }
.wa__page { padding: calc(32 * var(--w)); }
.wa__head { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--w)); }
.wa__back { display: flex; align-items: center; gap: calc(6 * var(--w)); margin-bottom: calc(8 * var(--w)); color: #5A6676; font-size: calc(13 * var(--w)); font-weight: 500; line-height: calc(18 * var(--w)); }
.wa__back .ic { width: calc(14 * var(--w)); height: calc(14 * var(--w)); }
.wa__head > div > strong { display: block; font-size: calc(28 * var(--w)); font-weight: 700; line-height: calc(36 * var(--w)); letter-spacing: -0.015em; }
.wa__head > div > span { display: block; margin-top: calc(4 * var(--w)); color: #5A6676; font-size: calc(16 * var(--w)); font-weight: 400; line-height: calc(26 * var(--w)); }
.wa__card { margin-top: calc(28 * var(--w)); padding: calc(20 * var(--w)) calc(24 * var(--w)); border-radius: calc(12 * var(--w)); background: #FFFFFF; border: 1px solid #E7EAEE; }
.wa__tools { display: flex; gap: calc(12 * var(--w)); }
.wa__tools > span { display: inline-flex; align-items: center; gap: calc(8 * var(--w)); height: calc(44 * var(--w)); padding: 0 calc(18 * var(--w)); border-radius: calc(8 * var(--w)); border: 1px solid #E7EAEE; font-size: calc(14 * var(--w)); font-weight: 600; white-space: nowrap; }
.wa__tools > span:first-child { flex: 1; min-width: 0; gap: calc(10 * var(--w)); padding: 0 calc(14 * var(--w)); overflow: hidden; color: #5A6676; font-size: calc(15 * var(--w)); font-weight: 450; }
.wa__tools .ic { width: calc(16 * var(--w)); height: calc(16 * var(--w)); }
.wa__tools > span:first-child .ic { width: calc(17 * var(--w)); height: calc(17 * var(--w)); }
.wa__day { display: flex; gap: calc(8 * var(--w)); margin: calc(20 * var(--w)) 0 calc(10 * var(--w)); font-size: calc(14 * var(--w)); font-weight: 600; line-height: calc(20.6 * var(--w)); }
.wa__grid + .wa__day { margin-top: calc(20 * var(--w)); padding-top: calc(20 * var(--w)); border-top: 1px solid #E7EAEE; }
.wa__day span { color: #5A6676; font-weight: 500; }
.wa__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(12 * var(--w)); }
.wa__tile { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: calc(8 * var(--w)); overflow: hidden; background: #F1F3F6; }
.wa__tile > img, .wa__tile > svg, .live__ghost img, .live__ghost svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa__tile figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: calc(8 * var(--w)); padding: calc(26 * var(--w)) calc(10 * var(--w)) calc(8 * var(--w)); background: linear-gradient(to top, rgba(8, 10, 14, 0.68), rgba(8, 10, 14, 0.34) 55%, rgba(8, 10, 14, 0)); color: #FFFFFF; font-size: calc(12 * var(--w)); font-weight: 500; line-height: calc(16 * var(--w)); }
.wa__tile figcaption b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13 * var(--w)); font-weight: 600; }
/* Marks are vectors over every view of a photo (ADR-009), so the tiles wear theirs. */
.mark { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark--yellow { stroke: #FFD60A; }
.mark--red { stroke: #FF3B30; }
.wa__tile--new img { object-position: 50% 62.75%; }
.wa__tile--new { display: none; box-shadow: 0 0 0 calc(2 * var(--w)) #FFFFFF, 0 0 0 calc(4 * var(--w)) var(--accent); transition: box-shadow 1.2s var(--ease), opacity 0.3s var(--ease); }
.live.is-landed .wa__tile--new { display: block; }
.live.is-flying .wa__tile--new { visibility: hidden; }
.live.is-settled .wa__tile--new { box-shadow: 0 0 0 0 #FFFFFF, 0 0 0 0 var(--accent); }
.live.is-leaving .wa__tile--new { opacity: 0; }
.wa__count--after, .live.is-landed .wa__count--before { display: none; }
.live.is-landed .wa__count--after { display: inline; }

/* The phone: the real camera, and the app's live outline drawn over it in the screenshot's own
   720 x 1560 pixels. */
.live__phone {
  position: absolute; z-index: 2; left: calc(846 * var(--u)); top: calc(90 * var(--u)); width: calc(232 * var(--u)); aspect-ratio: 9 / 19.5;
  padding: calc(7 * var(--u)); border-radius: calc(37 * var(--u)); background: #0A0A0A; border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.live__island { position: absolute; z-index: 3; top: calc(14 * var(--u)); left: 50%; transform: translateX(-50%); width: 29%; aspect-ratio: 78 / 22; border-radius: 999px; background: #0A0A0A; }
.live__screen { --s: calc(var(--u) * 216 / 720); position: relative; height: 100%; overflow: hidden; border-radius: calc(30 * var(--u)); background: #121212; color: #FFFFFF; }
.live__screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.live__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.live__focus rect { fill: none; stroke-width: 4; }
.live__focus { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.25); transition: opacity 0.25s var(--ease), transform 0.35s var(--ease-out); }
.live__outline { stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55)); transition: stroke-dashoffset 1.1s var(--ease-out), opacity 0.25s var(--ease); }
.live.is-focus .live__focus { opacity: 1; transform: none; }
.live.is-outlined .live__focus { opacity: 0; transition-duration: 0.4s; }
.live.is-outlined .live__outline { stroke-dashoffset: 0; }
.live.is-shot .live__outline { opacity: 0; }
.live__hint { position: absolute; left: 8%; right: 8%; top: 13.5%; margin: 0; text-align: center; font-size: calc(25 * var(--s)); font-weight: 600; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.live__hint span { position: absolute; inset: 0 0 auto; opacity: 0; transition: opacity 0.3s var(--ease); }
.live:not(.is-focus):not(.is-shot) .live__hint-idle,
.live.is-focus:not(.is-outlined) .live__hint-acquire,
.live.is-outlined:not(.is-shot) .live__hint-ready { opacity: 1; }
.live__press, .live__flash, .live__thumb { position: absolute; pointer-events: none; }
.live__press { left: calc(302 / 720 * 100%); top: calc(1342 / 1560 * 100%); width: calc(116 / 720 * 100%); aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, 0.28); opacity: 0; transition: opacity 0.12s, transform 0.12s; }
.live.is-press .live__press { opacity: 1; transform: scale(0.9); }
.live__flash { inset: 0; background: #FFFFFF; opacity: 0; transition: opacity 0.4s var(--ease); }
.live.is-flash .live__flash { opacity: 0.75; transition-duration: 0.06s; }
.live__thumb { left: calc(45 / 720 * 100%); top: calc(1357 / 1560 * 100%); width: calc(86 / 720 * 100%); aspect-ratio: 1; overflow: hidden; border-radius: calc(14 * var(--s)); opacity: 0; transition: opacity 0.3s var(--ease); }
.live.is-shot .live__thumb { opacity: 1; }
.live__thumb img, .live__thumb svg, .live__strip-photo img, .live__strip-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 83.3%; }
/* The receipt under a new photo: its marks, Saving outline… then Outline saved, and its folder. */
.live__strip {
  position: absolute; left: 0; right: 0; top: calc(1104 / 1560 * 100%); display: flex; align-items: center; gap: calc(16 * var(--s));
  padding: calc(16 * var(--s)) calc(28 * var(--s)); background: rgba(18, 18, 18, 0.94);
  opacity: 0; transform: translateY(calc(12 * var(--s))); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-out);
}
.live.is-strip .live__strip { opacity: 1; transform: none; }
.live__strip-photo { position: relative; flex: none; width: calc(96 * var(--s)); aspect-ratio: 1; overflow: hidden; border-radius: calc(12 * var(--s)); background: #333; }
.live__strip-text { flex: 1; display: grid; gap: calc(2 * var(--s)); font-size: calc(26 * var(--s)); font-weight: 600; }
.live__strip-text > span { grid-area: 1 / 1; transition: opacity 0.25s var(--ease); }
.live__strip-text small { font-size: calc(24 * var(--s)); font-weight: 500; color: #A6A6A6; }
.live__strip-saved, .live.is-saved .live__strip-saving { opacity: 0; }
.live.is-saved .live__strip-saved { opacity: 1; }
.live__strip svg.live__close { width: calc(36 * var(--s)); height: calc(36 * var(--s)); fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; }
/* The photo between the phone and the office, drawn only while it moves. */
.live__ghost { position: absolute; z-index: 3; overflow: hidden; pointer-events: none; box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.6); }

@media (prefers-reduced-motion: no-preference) {
  .live__laptop { animation: rise 1s 0.2s var(--ease) both; }
  .live__phone { animation: rise 1s 0.36s var(--ease) both; }
  .hero.is-motion-paused *, .hero.is-motion-paused *::after { animation-play-state: paused; }
}
/* Narrower, the pair simply scales down as one picture, as SoloPro's does. */
@media (max-width: 640px) {
  .live { margin-top: 36px; padding: 0 12px 24px; }
}
/* Demo screenshots keep their captured proportions inside the phone frames. */
.screenshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Pricing */
.price__figure { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.price__big { display: flex; align-items: flex-start; gap: 2px; font-weight: 700; font-size: clamp(56px, 7vw, 84px); letter-spacing: -0.04em; line-height: 0.95; }
.price__currency { font-size: 0.45em; margin-top: 0.22em; letter-spacing: -0.02em; }
.price__unit { font-weight: 600; font-size: 16px; }

/* Coming soon: a quiet, light-only destination for launch actions. */
.coming-soon { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.coming-soon__header, .coming-soon__footer { width: min(100%, 1160px); margin-inline: auto; padding: 32px var(--gutter); }
.coming-soon__brand { display: inline-flex; border-radius: 4px; }
.coming-soon__brand svg { display: block; width: 160px; height: 30px; }
.coming-soon__main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px var(--gutter) 96px; }
.coming-soon__main h1 { font-size: clamp(44px, 7vw, 76px); line-height: 1.08; letter-spacing: -0.045em; font-weight: 600; }
.coming-soon__main p { margin-top: 22px; max-width: 30ch; font-size: 20px; line-height: 1.5; text-wrap: balance; }
.coming-soon__platforms { margin-top: 10px; color: var(--text-dim); font-size: 15px; }
.coming-soon__main .btn { margin-top: 36px; gap: 12px; }
.coming-soon__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--text-dim); font-size: 14px; }
.coming-soon__footer nav { display: flex; gap: 24px; }
.coming-soon__footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; text-underline-offset: 4px; }
.coming-soon__footer a:hover { color: var(--text); text-decoration: underline; }

/* Questions */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: sticky; top: 104px; }
.faq__list { background: var(--surface); border: var(--hairline); border-radius: 20px; }
.faq__list details { padding: 0 22px; }
.faq__list details + details { border-top: var(--hairline); }
.faq__list details[data-animating] { overflow: hidden; }
.faq__list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 76px; padding: 22px 0; font-weight: 600; font-size: 16px; line-height: 1.5; cursor: pointer; }
.faq__list summary:focus-visible { outline-offset: 5px; border-radius: 4px; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--text-dim); transition: color 0.25s, background-color 0.25s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 13px 8px; height: 2px; border-radius: 1px; background: currentColor; }
.faq__icon::after { transform: rotate(90deg); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.faq__list details[open]:not([data-expanded="false"]) .faq__icon { color: var(--accent-ink); background: var(--accent-muted); }
.faq__list details[open]:not([data-expanded="false"]) .faq__icon::after { transform: rotate(0); opacity: 0; }
.faq__list details p { color: var(--text-dim); padding: 0 48px 24px 0; max-width: 60ch; line-height: 1.65; }

/* Closer: the stage again and the call to action. The footer is not in here; it is the page's
   own light surface below the panel. */
.closer { position: relative; isolation: isolate; overflow: hidden; margin: var(--section-gap) var(--frame) var(--frame); border-radius: 32px; border: 1px solid var(--stage-line); background: var(--stage); color: var(--stage-text); --text: var(--stage-text); }
.closer__glow { position: absolute; left: 50%; top: -260px; width: 900px; height: 700px; transform: translateX(-50%); border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 122, 24, 0.26), rgba(255, 122, 24, 0)); }
.cta { padding: 112px var(--gutter) 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.cta__mark { width: 72px; height: 72px; margin-bottom: 10px; filter: drop-shadow(0 14px 30px rgba(255, 122, 24, 0.45)); }
.cta .h2 { color: #FFFFFF; max-width: 18ch; font-size: clamp(34px, 4.6vw, 56px); }
.cta .h2 em { font-style: normal; color: var(--accent); }
.cta__lead { color: var(--stage-dim); font-size: 18px; max-width: 40ch; }
.cta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
/* Footer: the page's own surface, under the panel rather than inside it. CharterOps' shape: the
   mark, one line and the copyright on the left, and short titled columns opposite it, so every
   link sits in a group that says what it is for. The dark panel above is its top edge, which is
   why nothing draws a second one. */
.footer { padding: 64px 0 56px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px 64px; }
.footer__id { display: flex; flex-direction: column; align-items: flex-start; }
.footer__brand { display: inline-flex; border-radius: 6px; }
.footer__brand svg { height: 22px; width: auto; display: block; }
.footer__line { margin-top: 14px; color: var(--text-dim); font-size: 14px; }
.footer__copy { margin-top: 6px; color: var(--text-dim); font-size: 12px; }
.footer__groups { display: grid; grid-template-columns: repeat(3, auto); gap: 32px 80px; }
.footer__group { display: flex; flex-direction: column; align-items: flex-start; }
.footer__group h2 { margin-bottom: 8px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--text); }
.footer__group a { display: inline-flex; align-items: center; min-height: 34px; font-size: 14px; text-decoration: none; color: var(--text-dim); transition: color 0.2s; }
.footer__group a:hover { color: var(--text); }

/* Reveal on scroll. The js class is set before first paint, so nothing blinks; without JS everything is simply visible. */
.js .reveal { opacity: 0; transform: translateY(30px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), translate 0.45s var(--spring), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease); }
.js .plans > .reveal:nth-child(2) { transition-delay: 0.1s; }

/* Entrance */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .cta__mark { animation: pop 0.7s 0.1s var(--ease) both; }
  .btn { transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.25s, filter 0.2s, border-color 0.2s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .nav, .nav__menu, .nav__bars span, .faq__icon, .faq__icon::after { transition: none; animation: none; }
}

/* A phone on the page's light ground: the captured screens, in a bezel and nothing else. */
.device { position: relative; width: 300px; max-width: 100%; aspect-ratio: 9 / 19.5; padding: 9px; border-radius: 46px; background: #0A0A0A; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 50px 80px -40px rgba(18, 18, 18, 0.55), 0 18px 30px -24px rgba(18, 18, 18, 0.4); }
.device__island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 29%; aspect-ratio: 78 / 22; border-radius: 999px; background: #0A0A0A; z-index: 3; }
.device__screen { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: #FFFFFF; }

/* One job, start to finish. The day really is a sequence, so the times are its markers: set
   large and light, grey until their step is the one being read, when they turn to ink and the
   phone beside them changes to that moment's screen. Without JavaScript, and on a narrow
   screen, every step carries its own phone and nothing is pinned. */
.day__body { position: relative; }
/* The heading and the first moment are two things, so they get a section's worth of air
   between them rather than the gap a heading keeps over its own content. */
.day .section__head { margin-bottom: clamp(64px, 8vw, 112px); }
.day__steps { position: relative; display: flex; flex-direction: column; gap: 80px; padding-left: 36px; }
.day__steps::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px; background: var(--border); }
.day__step { position: relative; display: flex; flex-direction: column; gap: 12px; }
.day__time { position: relative; display: block; font-weight: 300; font-size: clamp(48px, 6vw, 84px); line-height: 1; letter-spacing: -0.035em; color: var(--text); transition: color 0.4s var(--ease); }
.day__title { font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.015em; margin-top: 10px; transition: color 0.4s var(--ease); }
.day__step p { font-size: 17px; line-height: 1.55; color: var(--text-dim); max-width: 38ch; transition: color 0.4s var(--ease); }
.day__time::before { content: ""; position: absolute; left: -36px; top: 50%; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--border-hover); transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.day__step.is-active .day__time::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-muted); }
.day__shot { width: 280px; margin-top: 20px; }
.day__stage { display: none; }
.day__rail { display: none; }
.day__phone .screenshot { opacity: 0; transition: opacity 0.45s var(--ease); }
.day__phone .screenshot.is-active { opacity: 1; }

@media (min-width: 901px) {
  .js .day__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .js .day__steps { gap: 0; padding-bottom: 34vh; }
  .js .day__step { min-height: 52vh; }
  .js .day__step:not(.is-active) .day__time { color: var(--border-hover); }
  .js .day__step:not(.is-active) .day__title { color: var(--text-dim); }
  .js .day__steps::before { top: 0.5em; bottom: 34vh; font-size: clamp(48px, 6vw, 84px); -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
  .js .day__shot { display: none; }
  .js .day__stage { display: flex; justify-content: center; align-items: flex-start; position: sticky; top: 104px; align-self: start; }
  .js .day__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--accent-muted), rgba(251, 236, 223, 0)); z-index: -1; }
  .day__phone { width: min(300px, 24vw, calc((100svh - 150px) * 9 / 19.5)); }
}

/* The office: the stage panel again, as at the top and the bottom of the page, with the web
   app in a browser window and one tab per screen. */
.office { position: relative; isolation: isolate; overflow: hidden; margin: var(--section-gap) var(--frame) 0; padding: 112px 0 168px; border-radius: 32px; border: 1px solid var(--stage-line); background: var(--stage); color: var(--stage-text); }
.office::before { content: ""; position: absolute; left: 50%; top: 220px; width: 1100px; height: 640px; transform: translateX(-50%); border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 122, 24, 0.22), rgba(255, 122, 24, 0)); }
.office__head .h2 { color: #FFFFFF; }
.office__head .lead { color: var(--stage-dim); }
.office__tabs { display: flex; width: max-content; max-width: 100%; margin: 0 auto 36px; padding: 4px; gap: 2px; border-radius: 999px; background: var(--stage-glass); border: 1px solid var(--stage-line); overflow-x: auto; scrollbar-width: none; }
.office__tabs::-webkit-scrollbar { display: none; }
.office__tab { flex: none; height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--stage-dim); transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.office__tab:hover { color: #FFFFFF; }
.office__tab[aria-selected="true"] { background: #FFFFFF; color: #1A1A1A; }
.office__tab:focus-visible { outline-color: #FFFFFF; outline-offset: 2px; }
/* The window is one quiet frame: a thin bar the colour of the panel, the address in it, and the
   app under it edge to edge, so the screen is the thing being looked at rather than the chrome. */
.office__window { position: relative; max-width: 1112px; margin: 0 auto; padding: 6px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.9); }
.office__bar { position: relative; display: flex; align-items: center; height: 34px; padding: 0 12px; }
.office__dots { position: absolute; left: 12px; display: inline-flex; gap: 6px; }
.office__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.office__url { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto; font-size: 12.5px; color: var(--stage-dim); }
.office__url svg { width: 12px; height: 12px; }
.office__panel { margin: 0; }
.office__panel img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 14px; background: #F7F8FA; }
.office__panel figcaption { position: absolute; left: 0; right: 0; top: calc(100% + 28px); text-align: center; font-size: 17px; line-height: 1.5; color: var(--stage-dim); text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .js .office__panel:not([hidden]) { animation: office-in 0.4s var(--ease) both; }
}
@keyframes office-in { from { opacity: 0.25; } to { opacity: 1; } }

/* What the client opens: three objects standing on one line, each its true shape, with what it
   is underneath. Their captions share a row whatever height the objects above them are. */

/* What the client opens: three things of one size, side by side, each its own shape inside the
   same landscape box, with what it is and its sample under it. */
.sendable__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 32px; row-gap: 0; }
.sendable__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin: 0; }
.sendable__object { position: relative; aspect-ratio: 16 / 11; margin-bottom: 24px; }
/* The box is the size; whatever is in it fills it, so nothing inside can stretch the row. */
.sendable__object > * { position: absolute; inset: 0; }
.sendable__object .compare { position: absolute; inset: 0; aspect-ratio: auto; width: auto; height: auto; }
.sendable__item figcaption { display: flex; flex-direction: column; gap: 4px; }
.sendable__item figcaption strong { font-weight: 700; font-size: 17px; line-height: 1.35; }
.sendable__item figcaption span { font-size: 15px; line-height: 1.5; color: var(--text-dim); max-width: 34ch; }
.sendable__link { justify-self: start; align-self: start; margin-top: 18px; }
/* The report opens on its cover with the first page beside it, on a quiet tray. */
.spread { display: flex; align-items: center; justify-content: center; gap: 5%; border-radius: 18px; background: #ECECEA; }
.spread img { height: 80%; width: auto; aspect-ratio: 850 / 1100; border-radius: 3px; background: #FFFFFF; box-shadow: 0 18px 30px -18px rgba(18, 18, 18, 0.45), 0 0 0 1px rgba(18, 18, 18, 0.05); }
/* The portfolio as a client opens it: the shared page in a browser window. */
.window { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(18, 18, 18, 0.1); box-shadow: 0 40px 70px -40px rgba(18, 18, 18, 0.5); }
.window__bar { flex: none; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; background: #F1F1F1; border-bottom: 1px solid #E4E4E4; }
.window__bar i { width: 8px; height: 8px; border-radius: 50%; background: #D3D3D3; }
.window img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
@media (max-width: 900px) {
  .sendable__row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 64px; max-width: 520px; margin-inline: auto; }
  .sendable__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .sendable__object { width: 100%; }
  .sendable__item figcaption { align-items: center; }
  .sendable__item figcaption span { margin-inline: auto; }
  .sendable__link { align-self: center; }
}

.compare { position: relative; width: 100%; aspect-ratio: 1400 / 1045; border-radius: 18px; overflow: hidden; background: var(--surface-pressed); box-shadow: 0 40px 70px -40px rgba(18, 18, 18, 0.55); touch-action: pan-y; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.compare__tag { position: absolute; top: 14px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 13px; color: #FFFFFF; pointer-events: none; }
.compare__tag--before { left: 14px; background: rgba(18, 18, 18, 0.72); }
.compare__tag--after { right: 14px; background: var(--accent); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); pointer-events: none; }
.compare__handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.compare__handle span::before, .compare__handle span::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border: solid #1A1A1A; border-width: 0 0 2px 2px; }
.compare__handle span::before { left: 11px; transform: translateY(-50%) rotate(45deg); }
.compare__handle span::after { right: 11px; transform: translateY(-50%) rotate(-135deg); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; }
.compare:has(.compare__range:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 4px; }

/* Everything the job needs: six equal boxes, each one drawn graphic and one sentence. */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid__item { padding: 28px; gap: 6px; }
.grid__item p { color: var(--text-dim); font-size: 15px; line-height: 1.5; }
.glyph { display: block; margin-bottom: 18px; }
.glyph svg { display: block; width: 72px; height: 72px; transition: transform 0.5s var(--spring); }
.js .grid > .reveal:nth-child(3n + 2) { transition-delay: 0.1s; }
.js .grid > .reveal:nth-child(3n) { transition-delay: 0.2s; }
@media (hover: hover) {
  .grid__item:hover .glyph svg { transform: translateY(-5px) rotate(-4deg) scale(1.06); }
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A box per row would be six tall, so the graphic moves beside the words instead. */
@media (max-width: 600px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .grid__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; align-items: center; padding: 20px 22px; }
  .glyph { grid-row: 1 / 3; width: 64px; margin-bottom: 0; align-self: center; }
  .glyph svg { width: 64px; height: 64px; }
  .grid__item .h3 { align-self: end; }
  .grid__item p { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .grid__item:hover .glyph svg { transform: none; }
}

@media (max-width: 760px) {
  .office { padding: 76px 0 132px; border-radius: 24px; }
  .office__tabs { margin-bottom: 24px; }
  .office__tab { padding: 0 14px; font-size: 14px; }
  .office__window { padding: 4px; border-radius: 14px; }
  .office__bar { height: 28px; }
  .office__dots i { width: 8px; height: 8px; }
  .office__url { font-size: 11px; }
  .office__panel img { border-radius: 10px; }
  .office__panel figcaption { margin-top: 20px; font-size: 15px; }
  .day__steps { gap: 64px; padding-left: 28px; }
  .day__steps::before { left: 4px; }
  .day__time::before { left: -28px; width: 10px; height: 10px; }
  .day__shot { width: min(260px, 100%); }
  .compare__handle span { width: 38px; height: 38px; }
}
@media (max-width: 600px) {
  .office__tabs { padding: 3px; }
  .office__tab { height: 36px; padding: 0 10px; font-size: 13.5px; }
  .day__shot { width: min(230px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .day__time, .day__title, .day__step p, .day__time::before, .day__phone .screenshot, .office__tab { transition: none; }
}

/* On a narrow screen the day works as it does on a wide one: the phone is pinned and changes as
   the page scrolls. The steps are only the distance to scroll, so they are kept and not drawn;
   the moment being read is written under the phone, and the six times are a timeline at the
   foot that fills as the day goes. Without JavaScript it stays the stacked list below. */
.day__caption { display: none; }
@media (max-width: 900px) {
  .js .day .section__head { margin-bottom: 0; }
  .js .day__body { display: grid; }
  .js .day__steps, .js .day__stage { grid-area: 1 / 1; }
  .js .day__steps { padding: 0; gap: 0; visibility: hidden; }
  .js .day__steps::before { display: none; }
  .js .day__step { min-height: 70vh; min-height: 70svh; }
  .js .day__step:last-child { min-height: 60vh; min-height: 60svh; }
  .js .day__shot { display: none; }
  .js .day__stage { position: sticky; top: 72px; align-self: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; height: calc(100vh - 84px); height: calc(100svh - 84px); }
  .js .day__phone { width: auto; height: calc(100svh - 352px); max-height: 540px; min-height: 300px; padding: 7px; border-radius: 34px; }
  .js .day__phone .device__screen { border-radius: 28px; }
  .js .day__phone .device__island { top: 11px; }
  .js .day__caption { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 112px; max-width: 34ch; text-align: center; }
  .js .day__caption-time { font-weight: 600; font-size: 13px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
  .js .day__caption strong { font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
  .js .day__caption span:last-child { font-size: 15px; line-height: 1.5; color: var(--text-dim); text-wrap: pretty; }
  .js .day__rail { position: relative; display: flex; justify-content: space-between; width: min(100%, 420px); padding: 0 4px; }
  .js .day__rail::before, .js .day__rail::after { content: ""; position: absolute; left: 22px; top: 7px; height: 2px; border-radius: 2px; }
  .js .day__rail::before { right: 22px; background: var(--border); }
  .js .day__rail::after { width: calc((100% - 44px) * var(--progress, 0)); background: var(--accent); transition: width 0.4s var(--ease); }
  .js .day__tab { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 22px; min-height: 52px; font-weight: 600; font-size: 13px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text-dim); }
  .js .day__tab::before { content: ""; position: absolute; top: 2px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-hover); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
  .js .day__tab small { font-size: 10px; opacity: 0.8; }
  .js .day__tab.is-past::before { background: var(--accent); border-color: var(--accent); }
  .js .day__tab.is-active { color: var(--text); }
  .js .day__tab.is-active::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-muted); }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .day__caption { animation: day-in 0.35s var(--ease) both; }
}
@keyframes day-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) and (max-height: 700px) {
  .js .day__caption { min-height: 96px; }
  .js .day__caption span:last-child { display: none; }
}

/* Narrow screens read down the middle. Without the pinned phone the rail has nothing to run
   beside, so each moment is its time, its words and its phone, centred one under the other; the
   three things a client opens become one column the same way. */
@media (max-width: 900px) {
  .day__steps { padding-left: 0; gap: 88px; }
  .day__steps::before, .day__time::before { display: none; }
  .day__step { align-items: center; text-align: center; }
  .day__step p { margin-inline: auto; }
  .day__title { margin-top: 6px; }
  .day__shot { margin-top: 28px; }
}

/* Hover: a card lifts a little, only on a device that can hover. */
@media (hover: hover) {
  .card:hover { translate: 0 -4px; box-shadow: var(--shadow-hover); border-color: var(--border-hover); }
  .plan--featured:hover { border-color: var(--ink); }
  .faq__list summary:hover { color: var(--accent-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover { translate: none; rotate: none; }
  .card { transition: box-shadow 0.4s var(--ease), border-color 0.3s var(--ease); }
}

/* Pricing: two plans, split by how many people, not by features. The pair runs the full
   container and shares the 20px gap the bento and the grid use, so the section lines up with
   everything above and below it rather than sitting in a narrower column of its own. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.plan { position: relative; padding: 36px; gap: 22px; --plan-line: var(--border); }
.plan__name { font-weight: 600; font-size: 15px; color: var(--text-dim); }
.plan .price__figure { align-items: flex-start; gap: 6px; }
.plan .price__big { font-size: clamp(48px, 5.5vw, 68px); }
.plan__fine { font-size: 14px; color: var(--text-dim); }
.plan__list { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--plan-line); }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.plan__list svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent-ink); }
.plan .btn { align-self: flex-start; }
.plan--featured { background: var(--ink); color: var(--on-ink); border-color: var(--ink); --plan-line: var(--plan-line-featured, rgba(255, 255, 255, 0.16)); }
.plan--featured .plan__name, .plan--featured .plan__fine { color: var(--on-ink); opacity: 0.68; }
.plan--featured .plan__list svg { color: var(--accent); }

/* Responsive */
/* The nav links sit in the space the wordmark and the button leave, so they tighten
   before they go, and they go while there is still room around them. */
@media (max-width: 1120px) {
  .nav { gap: 12px; }
  .nav__links a { padding: 0 9px; }
}
@media (max-width: 1000px) {
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .faq__intro { position: static; }
}
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__menu { display: flex; }
  /* Open over the stage, the pill has no surface of its own to sit the panel under, so it
     borrows the one it takes on scroll. */
  .nav.is-menu-open:not(.is-past) {
    background: rgba(30, 30, 30, 0.74); border-color: var(--stage-line);
    backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.75);
  }
}
@media (max-width: 760px) {
  :root { --frame: 8px; --section-gap: 88px; }
  .section__head { margin-bottom: 28px; }
  .hero { padding-top: 104px; border-radius: 24px; }
  .nav-wrap { padding: 10px calc(var(--frame) + 10px) 0; }
  .nav { height: 58px; padding-left: 18px; }
  .nav.is-scrolled { height: 52px; padding-left: 18px; }
  .nav__brand svg { height: 24px; }
  .card { padding: 22px; }
  .plans { grid-template-columns: 1fr; }
  /* One column under a centred heading: each plan centres on its price, the list stays a
     left-aligned column centred as a block so the ticks still line up, and the button
     takes the card's width. */
  .plan { padding: 32px 22px 24px; align-items: center; text-align: center; }
  .plan .price__figure { align-items: center; }
  .plan .price__big { font-size: 64px; }
  .plan__list { align-self: stretch; align-items: center; }
  .plan__list li { width: 100%; max-width: 270px; text-align: left; }
  .plan .btn { align-self: stretch; }
  .closer { border-radius: 24px; }
  .cta { padding: 72px var(--gutter) 60px; }
  .cta__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .footer { padding: 48px 0 40px; }
}

/* Below this the columns move under the brand and share its width, and the copyright goes last. */
@media (max-width: 720px) {
  .footer__inner { flex-direction: column; gap: 0; }
  .footer__id { display: contents; }
  .footer__groups { width: 100%; margin-top: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
  .footer__copy { order: 1; margin-top: 32px; }
  .footer__group a { min-height: 40px; }
}


/* The narrowest phones. The gutter gives back what the type needs, and the hero's two buttons
   stop wrapping into a ragged pair and stack the way the closer's already do. */
@media (max-width: 400px) {
  :root { --gutter: 18px; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}

/* Legal documents share the homepage navigation and font, on white paper. A contents rail on the
   left lists the three documents and the open one's sections; numbers hang in the gutter, because
   the terms refer to their own sections by number. */
.legal-page { background: #FFFFFF; --legal-line: #E8E8E8; --legal-tint: #F5F5F5; }
.legal { padding: 136px 0 104px; }
.legal__grid { display: grid; grid-template-columns: 232px minmax(0, 680px); justify-content: center; column-gap: 96px; max-width: 1120px; }
.legal-nav { position: sticky; top: 112px; align-self: start; max-height: calc(100vh - 136px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 4px 24px 0; scrollbar-width: thin; }
.legal-nav__docs { display: flex; flex-direction: column; gap: 2px; }
.legal-nav__doc { display: flex; align-items: center; min-height: 34px; color: var(--text-dim); font-size: 15px; font-weight: 500; text-decoration: none; }
.legal-nav__doc:hover { color: var(--text); }
.legal-nav__doc span + span { display: none; }
.legal-nav__doc[aria-current="page"] { color: var(--text); font-weight: 600; }
.legal-nav__sections { display: flex; flex-direction: column; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--legal-line); }
.legal-nav__sections a { display: flex; padding: 5px 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.4; text-decoration: none; }
.legal-nav__sections a span { flex: none; width: 22px; font-variant-numeric: tabular-nums; opacity: .7; }
.legal-nav__sections a:hover { color: var(--text); }
.legal-nav__sections a[aria-current="location"] { color: var(--text); font-weight: 600; }
.legal__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 40px; border-bottom: 1px solid var(--legal-line); }
.legal__head .h1 { font-size: clamp(36px, 4.2vw, 48px); font-weight: 650; letter-spacing: -0.028em; line-height: 1.08; }
.legal__head .lead { max-width: 56ch; font-size: 17px; }
.legal__meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 6px 0 0; color: var(--text-dim); font-size: 14px; }
.legal__meta div { display: flex; gap: 6px; }
.legal__meta dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.legal__body { display: flex; flex-direction: column; gap: 44px; padding-top: 44px; }
.legal__body section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 112px; }
.legal__body h2 { position: relative; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; }
.legal__n { position: absolute; right: calc(100% + 20px); top: 0; color: #A3A3A3; font-weight: 500; font-variant-numeric: tabular-nums; }
.legal__body h3 { margin-top: 6px; font-size: 16px; font-weight: 600; }
.legal__body p, .legal__body li { font-size: 16px; line-height: 1.72; color: #2B2B2B; }
.legal__body strong { color: var(--text); font-weight: 600; }
.legal__body a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__body ul { display: flex; flex-direction: column; gap: 8px; list-style: disc; padding-left: 20px; }
.legal__body li::marker { color: #A3A3A3; }
.legal__body .dim { color: var(--text-dim); font-size: 14px; }
.legal__callout { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; border-radius: 12px; background: var(--legal-tint); }
.legal__callout p { color: var(--text); }
/* Rows of name and explanation: the privacy policy's providers. */
.legal__body .legal__vendors { list-style: none; padding: 0; gap: 0; border-top: 1px solid var(--legal-line); }
.legal__vendors li { display: grid; grid-template-columns: 184px 1fr; column-gap: 28px; padding: 16px 0; border-bottom: 1px solid var(--legal-line); }
.legal__vendor { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.legal__vendors li > span:not(.legal__vendor) { font-size: 15px; line-height: 1.65; color: var(--text-dim); }
/* The notices page: one row per published inventory, then the proprietary components as a table. */
.legal__body .legal__files { list-style: none; padding: 0; gap: 0; border-top: 1px solid var(--legal-line); }
.legal__files li { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--legal-line); }
.legal__files h3 { margin: 0 0 4px; }
.legal__files p { font-size: 15px; line-height: 1.6; color: var(--text-dim); }
.legal__files p + p { margin-top: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.legal__file { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 2px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.legal__body .legal__file { color: var(--text); text-decoration: none; }
.legal__body .legal__file:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.legal__file span + span { color: var(--text-dim); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.legal__table-wrap { overflow-x: auto; margin-top: 4px; }
.legal__table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.legal__table th { padding: 0 16px 10px 0; color: var(--text-dim); font-size: 13px; font-weight: 500; text-align: left; border-bottom: 1px solid var(--legal-line); }
.legal__table td { padding: 11px 16px 11px 0; vertical-align: top; border-bottom: 1px solid var(--legal-line); color: var(--text-dim); }
.legal__table td:first-child { color: var(--text); font-weight: 500; overflow-wrap: anywhere; min-width: 160px; }
.legal__table td:nth-child(2) { width: 16%; font-variant-numeric: tabular-nums; }
.legal__table td:last-child { width: 40%; }
.legal__table th:last-child, .legal__table td:last-child { padding-right: 0; }
.legal__table td span { display: block; color: #9A9A9A; font-size: 13px; }
.legal-footer { padding: 0 0 36px; }
.legal-footer .container { max-width: 1120px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--legal-line); }
.legal-footer p { color: var(--text-dim); font-size: 13px; }
.legal-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-dim); text-decoration: none; font-size: 13px; }
.legal-footer a:hover, .legal-footer a[aria-current="page"] { color: var(--text); }
.legal-footer nav { display: flex; gap: 24px; margin-left: auto; }
.legal-skip { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: 8px; background: var(--surface); }
.legal-skip:focus { top: 12px; }
.legal-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.fill { background: var(--warning-muted); border-bottom: 2px dotted var(--accent-ink); padding: 0 4px; font-weight: 600; }
@media (max-width: 1080px) {
  .legal__grid { grid-template-columns: 200px minmax(0, 680px); column-gap: 64px; }
  .legal__n { right: calc(100% + 14px); }
}
@media (max-width: 900px) {
  .legal { padding: 112px 0 72px; }
  .legal__grid { display: block; max-width: 760px; }
  .legal-nav { position: static; max-height: none; overflow: visible; padding: 0; margin-bottom: 36px; }
  .legal-nav__docs { flex-direction: row; flex-wrap: wrap; gap: 4px 28px; border-bottom: 1px solid var(--legal-line); }
  .legal-nav__doc { min-height: 44px; font-size: 15px; }
  .legal-nav__doc span:first-child { display: none; }
  .legal-nav__doc span + span { display: inline; }
  .legal-nav__doc[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--text); }
  .legal-nav__sections { display: none; }
  .legal__n { position: static; margin-right: 10px; }
  .legal__head { padding-bottom: 32px; }
  .legal__head .lead { font-size: 16px; }
  .legal__body { padding-top: 34px; gap: 36px; }
  .legal__body h2 { font-size: 19px; }
  .legal__body p, .legal__body li { font-size: 15px; }
  .legal__callout { padding: 18px 20px; }
  .legal__vendors li { grid-template-columns: 1fr; row-gap: 4px; }
  .legal__files li { grid-template-columns: 1fr; row-gap: 14px; }
  .legal__file { align-items: flex-start; }
  .legal-footer nav { margin-left: 0; width: 100%; }
}
@media print {
  .legal-page .nav-wrap, .legal-nav, .legal-footer, .legal-skip { display: none; }
  .legal { padding: 0; }
  .legal__grid { display: block; }
  .legal__n { position: static; margin-right: 8px; }
  .legal__body h2 { break-after: avoid; }
  .legal__body p, .legal__body li { orphans: 3; widows: 3; }
}

/* The hero's second button opens the film. */
.btn__play { width: 15px; height: 15px; margin-left: -3px; fill: currentColor; flex: none; }

/* The film: a poster with a play button, and a dialog that grows out of the middle of the page.
   The video is fetched only once the dialog opens. */
.film { position: relative; display: block; width: 100%; max-width: 1112px; margin: 0 auto; padding: 0; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--border); background: #121212; box-shadow: var(--shadow-hover); cursor: pointer; isolation: isolate; }
.film img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: filter 0.4s var(--ease), transform 0.8s var(--ease-out); }
.film__play { position: absolute; inset: 0; display: grid; place-items: center; }
.film__play > span { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: rgba(255, 122, 24, 0.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform 0.4s var(--ease-out); }
.film__play > span::before { content: ""; grid-area: 1 / 1; width: 78px; height: 78px; border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 177, 78, 0.55), var(--accent)); box-shadow: 0 10px 30px -6px rgba(255, 122, 24, 0.7); transition: transform 0.4s var(--ease-out); }
.film__play svg { grid-area: 1 / 1; position: relative; width: 30px; height: 30px; fill: #FFFFFF; }
.film:hover img { filter: brightness(0.82); transform: scale(1.015); }
.film:hover .film__play > span, .film:focus-visible .film__play > span { transform: scale(1.06); }
.film:hover .film__play > span::before { transform: scale(1.04); }

.film-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #FFFFFF; }
.film-dialog[open] { display: grid; place-items: center; }
.film-dialog::backdrop { background: transparent; }
.film-dialog__frame { position: relative; width: min(1120px, 100%); }
.film-dialog video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; border: 2px solid rgba(255, 255, 255, 0.9); background: #000; }
.film-dialog__close { position: absolute; right: 0; top: -60px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(30, 30, 30, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #FFFFFF; }
.film-dialog__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@keyframes film-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes film-shade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .film-dialog[open] { animation: film-shade 0.3s var(--ease) both; }
  .film-dialog[open] .film-dialog__frame { animation: film-in 0.5s var(--ease-out) both; }
  .film-dialog.is-closing { animation: film-shade 0.22s var(--ease) reverse both; }
  .film-dialog.is-closing .film-dialog__frame { animation: film-in 0.22s var(--ease) reverse both; }
}
@media (max-width: 640px) {
  .film { border-radius: 18px; }
  .film__play > span { width: 84px; height: 84px; } .film__play > span::before { width: 58px; height: 58px; }
  .film__play svg { width: 22px; height: 22px; }
  .film-dialog video { border-radius: 12px; }
}

/* Contact us: the web app's Contact support dialog, over the landing page. A centred card on a
   shade, 10px corners on its fields and buttons as the web app's are, and the toasts in the
   bottom right, moved to the top while the card is open so they clear its buttons. */
:root.is-contact { overflow: hidden; }
.contact-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0;
  background: rgba(18, 18, 18, 0.45); color: var(--text); overflow-y: auto; overscroll-behavior: contain;
  --danger: #C62828; --danger-muted: #FDECEA; --field-ring: rgba(255, 122, 24, 0.2); }
.contact-dialog[open] { display: flex; flex-direction: column; }
.contact-dialog::backdrop { background: transparent; }
.contact-dialog__card { width: 100%; max-width: 520px; margin: auto; padding: 28px; border-radius: 12px; border: var(--hairline);
  background: var(--surface); box-shadow: 0 24px 60px -24px rgba(18, 18, 18, 0.35); }
.contact-dialog__title { font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.contact-dialog__sub { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--text-dim); }
.contact-dialog__body { margin-top: 24px; }
.contact-dialog__body > * + * { margin-top: 18px; }
.contact-dialog__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-dialog label { display: block; margin: 0 0 8px; font-weight: 600; font-size: 14px; }
.contact-dialog input, .contact-dialog textarea {
  display: block; width: 100%; height: 52px; padding: 0 16px; font: 400 16px/1 var(--font); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.contact-dialog textarea { height: auto; min-height: 140px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.contact-dialog input:hover, .contact-dialog textarea:hover { border-color: var(--border-hover); }
.contact-dialog input:focus-visible, .contact-dialog textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--field-ring); }
.contact-dialog input::placeholder, .contact-dialog textarea::placeholder { color: #9A9A9A; }
.contact-dialog :is(input, textarea):is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  box-shadow: inset 0 0 0 1000px var(--surface), 0 0 0 4px var(--autofill-ring, transparent);
}
.contact-dialog :is(input, textarea):focus-visible { --autofill-ring: var(--field-ring); }
.contact-dialog [aria-invalid="true"]:focus-visible { --autofill-ring: var(--danger-muted); }
.contact-dialog [aria-invalid="true"] { border-color: var(--danger); }
.contact-dialog [aria-invalid="true"]:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-muted); }
.contact-dialog__meta { display: flex; align-items: flex-start; gap: 12px; }
.contact-dialog__error { margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--danger); overflow-wrap: anywhere; }
.contact-dialog__error:empty { display: none; }
.contact-dialog__count { margin: 6px 0 0 auto; font-size: 12.5px; color: #9A9A9A; font-variant-numeric: tabular-nums; }
.contact-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.contact-dialog__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px;
  border-radius: 10px; font: 600 16px/1 var(--font); letter-spacing: 0.01em; white-space: nowrap; transition: background-color 0.15s var(--ease), color 0.15s var(--ease), background-position 0.15s var(--ease); }
.contact-dialog__btn--cancel { color: var(--text-dim); }
.contact-dialog__btn--cancel:hover:not(:disabled) { background: var(--surface-pressed); color: var(--text); }
.contact-dialog__btn--send { background: var(--accent-ramp) 0 0 / 100% 200% border-box var(--accent); color: var(--on-accent); box-shadow: var(--accent-lit-edge); }
.contact-dialog__btn--send:hover:not(:disabled) { background-position: 0 100%; }
.contact-dialog__btn:disabled { cursor: default; }
.contact-dialog__btn--cancel:disabled { opacity: 0.5; }
/* At work, the send button keeps its width and fill, and turns a ring in its own middle. */
.contact-dialog__btn--send[aria-busy="true"] > span { visibility: hidden; }
.contact-dialog__btn--send[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; animation: contact-spin 0.8s linear infinite; }
@keyframes contact-spin { to { transform: rotate(360deg); } }

.toasts { position: fixed; z-index: 40; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; width: min(400px, calc(100vw - 48px)); pointer-events: none; }
.contact-dialog .toasts { top: 16px; bottom: auto; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 8px; border: var(--hairline);
  background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgba(18, 18, 18, 0.08); font-size: 15px; font-weight: 500; line-height: 22px; }
.toast__mark { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; color: #FFFFFF; }
.toast__mark svg, .toast__close svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.toast__mark svg { width: 14px; height: 14px; }
.toast__text { flex: 1; min-width: 0; padding-block: 8px; overflow-wrap: anywhere; }
.toast__close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; color: inherit; transition: background-color 0.15s var(--ease); }
.toast__close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.toast__close svg { width: 18px; height: 18px; }
.toast--success { background: var(--success-muted); color: #177C4B; border-color: color-mix(in srgb, #177C4B 35%, transparent); }
.toast--success .toast__mark { background: #177C4B; }
.toast--danger { background: #FDECEA; color: #C62828; border-color: color-mix(in srgb, #C62828 30%, transparent); }
.toast--danger .toast__mark { background: #C62828; }
@media (prefers-reduced-motion: no-preference) {
  .contact-dialog[open] { animation: film-shade 0.18s var(--ease) both; }
  .contact-dialog[open] .contact-dialog__card { animation: contact-in 0.22s var(--ease-out) both; }
  .toast { animation: contact-toast-in 0.3s var(--ease-out) both; }
  .toast.is-going { animation: contact-toast-out 0.15s var(--ease) both; }
}
@keyframes contact-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes contact-toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes contact-toast-out { to { opacity: 0; } }
@media (max-width: 480px) {
  .contact-dialog__card { padding: 24px 20px 20px; }
  .contact-dialog__names { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .toasts { right: 16px; bottom: 16px; width: calc(100vw - 32px); }
}
/* /contact */