/* ============================================================
   site.css - the public site (index.html and the product pages)
   Same theme as the revised workspace: glass and metal, light only,
   grey. Frosted glass on a pale studio ground, brushed metal pills,
   a slow band of light across a control on hover, graphite for the
   one primary action. Tokens copied from styles/workspace.css.
   Effects (scroll stories on a canvas, the stacking deck) are driven
   by scripts/site.js with transform and opacity only.
   Mobile first (production's api/tests/test_css_mobile_first.py): a rule
   with no media query is the phone's; tablets and desktops add to it with
   min-width queries at 600, 900 and 1200 px only, never max-width.
   ============================================================ */

@font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/arimo.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --font: 'Helvetica Neue', 'Arimo', Helvetica, Arial, sans-serif;

  --label:   #1E1F22;
  --label-2: #55575C;
  --label-3: #85878C;
  --label-4: #B2B4B8;
  --brand:   #0A2536;

  --hair:        rgba(0, 0, 0, 0.07);
  --hair-strong: rgba(0, 0, 0, 0.11);
  --fill-hover:  rgba(0, 0, 0, 0.04);

  --glass-fill:   linear-gradient(160deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.48) 46%, rgba(255, 255, 255, 0.62) 100%);
  --glass-raised: linear-gradient(160deg, rgba(247, 248, 250, 0.97) 0%, rgba(237, 239, 243, 0.95) 52%, rgba(243, 244, 247, 0.97) 100%);
  --glass-rim:    linear-gradient(150deg, #FFFFFF 0%, rgba(255, 255, 255, 0.45) 26%, rgba(255, 255, 255, 0.10) 52%, rgba(255, 255, 255, 0.6) 84%, #FFFFFF 100%);
  --glass-blur:   blur(28px) saturate(180%);
  --glass-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.11),
    0 1px 1px rgba(0, 0, 0, 0.03),
    0 16px 36px -16px rgba(16, 24, 32, 0.20);
  --glass-shadow-raised:
    0 0 0 0.5px rgba(0, 0, 0, 0.13),
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 26px 52px -14px rgba(16, 24, 32, 0.26);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.2) 26%, rgba(255, 255, 255, 0) 52%);

  --metal:        linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 40%, #DFE2E6 55%, #ECEEF1 80%, #FBFBFC 100%);
  --metal-hover:  linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 40%, #E9EBEE 55%, #F3F4F6 80%, #FFFFFF 100%);
  --metal-press:  linear-gradient(180deg, #D9DCE0 0%, #E8EAED 55%, #F4F5F7 100%);
  --metal-edge:
    0 0 0 0.5px rgba(0, 0, 0, 0.26),
    0 1px 1px rgba(0, 0, 0, 0.07),
    0 5px 12px -5px rgba(16, 24, 32, 0.28),
    inset 0 1px 0 #FFFFFF,
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  --metal-glow:   0 0 0 3px rgba(255, 255, 255, 0.75), 0 0 18px 3px rgba(255, 255, 255, 0.9);
  --graphite:       linear-gradient(180deg, #5A5D63 0%, #37393E 46%, #222327 54%, #2E3035 100%);
  --graphite-hover: linear-gradient(180deg, #686B72 0%, #404247 46%, #2A2B2F 54%, #36383D 100%);
  --graphite-edge:  0 0 0 0.5px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 14px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --metal-ink:    linear-gradient(180deg, #55585E 0%, #26272A 48%, #1A1B1E 56%, #4D5056 100%);
  /* The big headlines: the same graphite ink, softened so the horizon
     never cuts a letter; repeated once per line (see .display) */
  --ink-display:  linear-gradient(180deg, #5C5F65 0%, #2A2B2F 42%, #18191C 62%, #3F4247 100%);

  --field:        linear-gradient(180deg, #E6E8EC 0%, #EEF0F3 40%, #F6F7F9 100%);
  --field-hover:  linear-gradient(180deg, #ECEEF1 0%, #F3F4F6 40%, #FAFAFB 100%);
  --field-edge:   inset 0 1px 2px rgba(16, 24, 32, 0.12), inset 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.95);
  --field-ring:   inset 0 1px 2px rgba(16, 24, 32, 0.08), inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(10, 37, 54, 0.12), 0 0 16px rgba(255, 255, 255, 0.9);

  --s-critical: #D03B3B;
  --s-good:     #0CA30C;

  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;

  /* the content column grows with a very wide screen (1280 up to 1440) */
  --wrap: clamp(1280px, 100vw - 320px, 1440px);
  --gutter: 32px;
  --nav-h: 60px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-soft: cubic-bezier(0.3, 0.6, 0.3, 1);
}

:root { --gutter: 16px; }
@media (min-width: 600px) {
  :root { --gutter: 24px; }
}
@media (min-width: 900px) {
  :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--label);
  background: #ECEDF0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* The studio ground, fixed behind everything on its own layer so it never
   repaints on scroll: a key light top left, a soft band of light across the
   sweep, the faintest ice at the far corner */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1200px 820px at 4% -18%, #FFFFFF, rgba(255, 255, 255, 0) 60%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(1000px 720px at 92% 112%, rgba(167, 198, 219, 0.28), rgba(167, 198, 219, 0) 60%),
    radial-gradient(820px 600px at 26% 110%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #F6F6F8 0%, #E4E5E9 100%);
}
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid rgba(10, 37, 54, 0.45); outline-offset: 3px; }
::selection { background: rgba(10, 37, 54, 0.14); }

/* Everything wide lives in .site, clipped sideways so nothing can ever
   scroll the page horizontally (clip, unlike hidden, keeps sticky working) */
.site { position: relative; overflow-x: clip; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--metal); box-shadow: var(--metal-edge); font-size: 14px; text-decoration: none; transition: top 200ms ease; }
.skip:focus { top: 12px; }

/* ── Type ───────────────────────────────────────────────────────────── */
.display {
  font-weight: 500;
  letter-spacing: -0.042em;
  line-height: 0.98;
  font-size: clamp(44px, 6.2vw, 108px);
  /* the ink repeats once per line, so every line has its own light */
  background: var(--ink-display) 0 0 / 100% 0.98em repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.04em;
}
.display--md { font-size: clamp(38px, 4.6vw, 80px); line-height: 1; background-size: 100% 1em; letter-spacing: -0.038em; }
.display--sm { font-size: clamp(30px, 3.2vw, 52px); line-height: 1.04; background-size: 100% 1.04em; letter-spacing: -0.03em; }
.display .line { display: block; }
@media (forced-colors: active) { .display { background: none; color: CanvasText; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-3);
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--graphite);
  box-shadow: var(--graphite-edge);
}
.lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--label-2); max-width: 36em; letter-spacing: -0.005em; }
.body { font-size: 17px; line-height: 1.6; color: var(--label-2); }
.muted { color: var(--label-3); }

/* ── Glass ──────────────────────────────────────────────────────────── */
.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.glass::before, .slab::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--sheen);
  pointer-events: none;
}
.glass--raised { background: var(--glass-raised); box-shadow: var(--glass-shadow-raised), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
/* An opaque pane: the same look without the blur, for things that move or
   stack (cheap to composite) */
.slab {
  position: relative;
  background: linear-gradient(160deg, #FCFCFD 0%, #F1F2F5 52%, #F6F7F9 100%);
  box-shadow: var(--glass-shadow-raised), inset 0 1px 0 #FFFFFF;
}

/* ── Glyphs (Runway line icons, scripts/workspace-glyphs.js) ─────────── */
.g { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.14em; }
i[data-glyph] { display: inline-flex; font-style: normal; }

/* ── Metal buttons ──────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--metal);
  box-shadow: var(--metal-edge);
  color: var(--label);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 420ms ease, background 420ms ease, color 420ms ease, transform 160ms ease;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
}
.btn:hover { background: var(--metal-hover); box-shadow: var(--metal-edge), var(--metal-glow); }
.btn:hover::after { animation: shine 1400ms var(--ease-soft) 1; }
.btn:active { background: var(--metal-press); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.28), inset 0 1px 3px rgba(0, 0, 0, 0.14); transform: translateY(0.5px); }
.btn--dark { background: var(--graphite); box-shadow: var(--graphite-edge); color: #FFFFFF; text-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.4); }
.btn--dark::after { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 62%); }
.btn--dark:hover { background: var(--graphite-hover); box-shadow: var(--graphite-edge), 0 0 0 3px rgba(255, 255, 255, 0.7), 0 0 18px rgba(255, 255, 255, 0.7); }
.btn--dark:active { background: var(--graphite); box-shadow: var(--graphite-edge); }
.btn--sm { height: 38px; padding: 0 17px; font-size: 14px; gap: 7px; }
.btn--full { width: 100%; }
.btn .g { width: 17px; height: 17px; transition: transform 420ms var(--ease); }
.btn:hover .g--go { transform: translateX(3px); }
@keyframes shine {
  0%   { background-position: 130% 0; opacity: 1; }
  100% { background-position: -30% 0; opacity: 1; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* A quiet text link with an arrow */
.link-go { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--label); text-decoration: none; }
.link-go .g { width: 16px; height: 16px; transition: transform 420ms var(--ease); }
.link-go:hover .g { transform: translateX(4px); }
.link-go span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 420ms var(--ease); }
.link-go:hover span { background-size: 100% 1px; }

/* ── Top navigation ─────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 80;
  padding: 0 var(--gutter);
  pointer-events: none;
  transition: top 420ms var(--ease);
}
.nav__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: calc(var(--wrap) - 40px);
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 10px 0 22px;
  border-radius: 999px;
  transition: height 420ms var(--ease), max-width 520ms var(--ease), box-shadow 420ms ease, background 420ms ease;
}
.nav.is-compact { top: 8px; }
.nav.is-compact .nav__bar { height: calc(var(--nav-h) - 8px); max-width: 1040px; background: var(--glass-raised); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; border-radius: 8px; text-decoration: none; }
/* Production's logo, kept modest; a hairline shadow so the light half of
   the mark holds its edge on the pale glass */
.brand img { height: 22px; width: auto; filter: drop-shadow(0 0.5px 0.6px rgba(10, 37, 54, 0.32)) drop-shadow(0 1px 3px rgba(10, 37, 54, 0.10)); }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--label-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 400ms ease, color 400ms ease, box-shadow 400ms ease;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--label); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55)); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); }
.nav__link .g { width: 13px; height: 13px; transition: transform 400ms var(--ease); }
.nav__link[aria-expanded="true"] .g { transform: rotate(90deg); }
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.nav__burger { display: none; }

/* The Products menu: the grey sheet */
.menu { position: relative; }
.menu__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: 640px;
  padding: 10px;
  border-radius: 22px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px) scale(0.985);
  transform-origin: 50% 0;
  transition: opacity 260ms ease, transform 360ms var(--ease), visibility 0s linear 360ms;
}
.menu.is-open .menu__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity 260ms ease, transform 360ms var(--ease), visibility 0s; }
.menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 300ms ease, box-shadow 300ms ease;
}
.menu__item:hover, .menu__item:focus-visible { outline: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55)); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 4px 12px -6px rgba(16, 24, 32, 0.18); }
.menu__item.is-current { background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); }
.menu__item b { display: block; font-size: 14.5px; font-weight: 600; color: var(--label); letter-spacing: -0.005em; }
.menu__item small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--label-3); }
.menu__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 14px 6px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--label-3); }

/* A Runway tile: the module's own art */
.tile { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; filter: drop-shadow(0 2px 4px rgba(16, 24, 32, 0.16)); }
.tile img { width: 100%; height: 100%; }
/* A tile built from a blank glossy Runway tile and a Runway glyph */
.tile__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: #FFFFFF; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.tile__glyph .g { width: 52%; height: 52%; }
.tile--lg { width: 84px; height: 84px; border-radius: 22px; filter: drop-shadow(0 8px 16px rgba(16, 24, 32, 0.2)); }
.tile--md { width: 56px; height: 56px; border-radius: 15px; }

/* The phone menu: a grey sheet that drops from the top */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 24px;
  background: var(--glass-raised);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 300ms ease, transform 420ms var(--ease), visibility 0s linear 420ms;
}
.mnav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms ease, transform 420ms var(--ease), visibility 0s; }
.mnav__label { margin: 4px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-3); }
.mnav__products { display: grid; gap: 2px; }
.mnav__products .menu__item { padding: 9px 8px; }
.mnav__products .tile { width: 34px; height: 34px; border-radius: 9px; }
.mnav__links { display: grid; margin-top: 14px; border-top: 1px solid var(--hair); }
.mnav__links a, .mnav__links button { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--hair); background: none; font-size: 18px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.mnav__actions { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }
body.is-locked { overflow: hidden; }

/* ── Sections ───────────────────────────────────────────────────────── */
.section { position: relative; padding: clamp(96px, 12vw, 180px) 0; }
.section--tight { padding: clamp(72px, 8vw, 120px) 0; }
.head { max-width: 980px; margin-bottom: clamp(40px, 5vw, 72px); }
.head .lead { margin-top: 26px; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head--center .lead { margin-left: auto; margin-right: auto; }

/* Reveal on scroll: rise and clear, once */
/* --d (set on the element) is each reveal's delay; --dd is what the motion uses: the delay
   on a wide screen, nothing on a phone, where every block stands alone in one column */
.reveal { --dd: var(--d, 0ms); opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1000ms var(--ease), transform 1100ms var(--ease); transition-delay: var(--dd, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 72px) 0 96px;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: -6% 0 -6% 0;
  z-index: -2;
  background: #E9EAED url('../images/site/runway/hero-desk.jpg') 100% 50% / cover no-repeat;
  will-change: transform;
}
/* The photograph and its veil fade out at the foot of the hero, so it
   melts into the ground instead of ending on a line */
.hero__bgclip {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.hero__bgclip .hero__bg, .hero__bgclip .hero__veil { z-index: auto; }
/* the photograph settles as the page opens */
.hero__bgclip { animation: hero-settle 1800ms var(--ease) both; }
@keyframes hero-settle { from { transform: scale(1.05) translate3d(0, 12px, 0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero__bgclip { animation: none; } }
/* A veil: the photograph falls away into the studio grey behind the words */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(238, 239, 242, 0.94) 0%, rgba(238, 239, 242, 0.80) 30%, rgba(238, 239, 242, 0.25) 58%, rgba(238, 239, 242, 0) 72%),
    linear-gradient(0deg, #E8E9EC 0%, rgba(232, 233, 236, 0) 30%),
    linear-gradient(180deg, rgba(246, 246, 248, 0.6) 0%, rgba(246, 246, 248, 0) 22%);
}
.hero__content { position: relative; max-width: min(46vw, 740px); will-change: transform, opacity; }
.hero h1 { font-size: clamp(42px, 4.5vw, 82px); background-size: 100% 0.98em; }
.hero__content { max-width: none; }
@media (min-width: 900px) {
  .hero__content { max-width: min(46vw, 740px); }
}
.hero .lead { margin-top: 30px; max-width: 30em; color: #4A4C51; }
.hero .btn-row { margin-top: 40px; }
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-3);
}
.hero__cue i { position: relative; width: 1px; height: 44px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)); overflow: hidden; }
.hero__cue i::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: linear-gradient(180deg, rgba(30, 31, 34, 0), rgba(30, 31, 34, 0.8)); animation: cue 2.4s var(--ease-soft) infinite; }
@keyframes cue { 0% { transform: translateY(0); } 100% { transform: translateY(350%); } }

/* ── Scroll story: a pinned stage, a canvas playing the UI frame by frame,
   big lines arriving at set points ─────────────────────────────────── */
.story { position: relative; height: var(--len, 460vh); }
.story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter) + 120px);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 40px;
  overflow: hidden;
}
.story__beats { position: relative; height: min(64vh, 560px); }
.beat {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  will-change: transform, opacity;
  pointer-events: none;
}
.beat.is-on { pointer-events: auto; }
.story__stage { pointer-events: none; }
.story__media, .story.is-static .story__stage { pointer-events: auto; }
/* the first story tucks under the end of the hero, so no empty band shows */
.hero + .story { margin-top: -22vh; }
.hero + .story.is-static { margin-top: 0; }
.beat .lead { margin-top: 24px; font-size: clamp(17px, 1.35vw, 20px); }
.beat__steps { display: grid; gap: 14px; margin-top: 28px; }
.beat__steps li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--hair-strong); }
.beat__steps b { font-size: 15px; font-weight: 600; color: var(--label); }
.beat__steps span { font-size: 15.5px; line-height: 1.5; color: var(--label-2); }
.story__media { position: relative; }
.frame {
  position: relative;
  padding: 9px;
  border-radius: 24px;
  will-change: transform;
}
.frame__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #EEEFF2;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.frame__screen canvas, .frame__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
/* The canvas stays clear until its first frame draws: the poster shows */
.frame__screen canvas { opacity: 0; transition: opacity 500ms ease; }
.frame__screen canvas.is-live { opacity: 1; }
/* A soft light across the screen glass */
.frame__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 28%); }
.story__rail { position: absolute; left: 0; right: 0; bottom: -26px; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.07); overflow: hidden; }
.story__rail i { position: absolute; inset: 0; background: linear-gradient(90deg, #6B6E75, #2A2C30); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.story__count { position: absolute; right: 0; bottom: -52px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--label-3); font-variant-numeric: tabular-nums; }

/* Reduced motion, or no script: no pinning, a still and the words in order */
.story.is-static { height: auto; }
.story.is-static .story__stage { position: relative; height: auto; padding-top: 96px; padding-bottom: 96px; align-items: start; }
.story.is-static .story__beats { height: auto; display: grid; gap: 48px; }
.story.is-static .beat { position: relative; top: auto; opacity: 1; transform: none; pointer-events: auto; }
.story.is-static .story__rail, .story.is-static .story__count { display: none; }

/* ── The stacking deck: each card falls away to the left, turning towards
   a right angle, as the next rises into its place ────────────────────── */
.deck { position: relative; height: var(--len, 800vh); }
.deck__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 36px) var(--gutter) 40px;
  overflow: hidden;
}
.deck__cards { position: relative; width: min(1180px, 100%); height: min(660px, calc(100svh - var(--nav-h) - 110px)); }
.card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3.4vw, 56px);
  padding: clamp(24px, 3.2vw, 48px);
  border-radius: var(--r-2xl);
  transform-origin: 0% 100%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.card__text { display: flex; flex-direction: column; min-width: 0; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: auto; }
.card__n { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--label-3); font-variant-numeric: tabular-nums; }
.card .eyebrow { margin: 26px 0 16px; }
.card h3 { font-size: clamp(30px, 3.1vw, 50px); line-height: 1.02; letter-spacing: -0.034em; background: var(--ink-display) 0 0 / 100% 1.02em repeat-y; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.05em; }
.card .body { margin-top: 18px; max-width: 30em; }
.card__go { margin-top: 26px; }
.card__media { position: relative; min-width: 0; border-radius: 18px; overflow: hidden; background: #E9EAEE; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 18px 40px -22px rgba(16, 24, 32, 0.4); }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transform: scale(var(--z, 1)); transform-origin: var(--ox, 0 0); }
.card__media--photo img { object-position: 50% 50%; }
.card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 30%); }
.deck__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; }
.deck__hint i { width: 22px; height: 3px; border-radius: 3px; background: rgba(0, 0, 0, 0.1); transition: background 300ms ease; }
.deck__hint i.is-on { background: #3A3C40; }

.deck.is-static { height: auto; }
.deck.is-static .deck__stage { position: relative; height: auto; display: block; padding: 0 var(--gutter) 40px; }
.deck.is-static .deck__cards { height: auto; display: grid; gap: 24px; margin: 0 auto; }
.deck.is-static .card { position: relative; inset: auto; min-height: 520px; transform: none !important; opacity: 1 !important; }
.deck.is-static .deck__hint { display: none; }

/* ── Pricing ────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 48px); border-radius: var(--r-2xl); }
.plan__name { font-size: 15px; font-weight: 600; color: var(--label); letter-spacing: -0.005em; }
.plan__desc { margin-top: 6px; font-size: 15.5px; color: var(--label-2); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 34px; }
.plan__amount { font-size: clamp(48px, 5.4vw, 88px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; background: var(--ink-display); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.05em; }
.plan__per { font-size: 17px; color: var(--label-2); }
.plan__from { font-size: 15px; color: var(--label-3); }
.plan__note { margin-top: 14px; font-size: 14.5px; color: var(--label-3); }
.plan .btn-row { margin-top: auto; padding-top: 32px; }
.plan__amount--word { font-size: clamp(38px, 3.6vw, 58px); }
.plan__note:empty::before { content: "\00a0"; }
.plan--lead { background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.78) 100%); }
/* Marks a figure that is not settled yet */
.placeholder-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px dashed rgba(168, 137, 79, 0.75);
  background: rgba(250, 240, 214, 0.55);
  color: #7A6334;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
}
.includes { margin-top: 20px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-2xl); }
.includes__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin-bottom: 22px; }
.includes__head h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.includes__head p { font-size: 15px; color: var(--label-3); }
.includes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.includes__grid li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.4; color: var(--label-2); }
.includes__grid li b { display: block; color: var(--label); font-weight: 600; font-size: 15px; }
.includes__grid .g { width: 18px; height: 18px; margin-top: 1px; color: #3A3C40; }

/* ── Security ───────────────────────────────────────────────────────── */
.sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.sec__aside { position: sticky; top: calc(var(--nav-h) + 48px); }
.sec__aside .lead { margin-top: 24px; }
.sec__photo { margin-top: 40px; aspect-ratio: 4 / 3; border-radius: var(--r-2xl); background: #CFD2D7 url('../images/site/runway/vault-door.jpg') 30% 50% / cover no-repeat; box-shadow: var(--glass-shadow-raised); }
.sec__list { display: grid; gap: 14px; counter-reset: sec; }
.sec__item { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 26px 28px 26px 22px; border-radius: var(--r-xl); }
.sec__n { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--label-3); font-variant-numeric: tabular-nums; padding-top: 5px; }
.sec__item h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.018em; color: var(--label); }
.sec__item p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--label-2); }
.sec__item a { color: var(--label); }

/* ── Closing band: request a demo ───────────────────────────────────── */
.close {
  position: relative;
  margin: 0 var(--gutter);
  padding: clamp(80px, 10vw, 150px) 0;
  border-radius: 36px;
  overflow: hidden;
  isolation: isolate;
}
.close__bg { position: absolute; inset: 0; z-index: -2; background: #DADDE1 url('../images/site/runway/hero-desk.jpg') 80% 50% / cover no-repeat; transform: scaleX(-1); }
.close__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(240, 241, 244, 0.92) 0%, rgba(240, 241, 244, 0.7) 45%, rgba(240, 241, 244, 0.18) 100%); }
.close .lead { margin-top: 26px; }
.close .btn-row { margin-top: 40px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot { padding: clamp(80px, 9vw, 140px) 0 32px; }
.foot__slab { padding: clamp(28px, 4vw, 52px); border-radius: var(--r-2xl); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot__brand img { height: 22px; width: auto; filter: drop-shadow(0 0.5px 0.6px rgba(10, 37, 54, 0.32)); }
.foot__tag { margin: 18px 0 18px; font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; color: var(--label); }
.foot__brand a { display: block; width: fit-content; margin-top: 4px; font-size: 14.5px; color: var(--label-2); text-decoration: none; }
.foot__brand a:hover { color: var(--label); text-decoration: underline; text-underline-offset: 3px; }
.foot__col h2 { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-3); }
.foot__col li + li { margin-top: 8px; }
.foot__col a, .foot__col button { padding: 0; border: 0; background: none; font-size: 14.5px; color: var(--label-2); text-decoration: none; cursor: pointer; transition: color 300ms ease; }
.foot__col a:hover, .foot__col button:hover { color: var(--label); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--label-3); }

/* ── Dialogs: the grey sheet, field wells, metal buttons ────────────── */
.dlg {
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: transparent;
  color: var(--label);
  overflow: visible;
}
.dlg--wide { width: min(640px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(226, 228, 232, 0.5); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
.dlg[open] { animation: dlg-in 460ms var(--ease) both; }
.dlg[open]::backdrop { animation: fade-in 360ms ease both; }
.dlg.is-closing { animation: dlg-out 220ms ease both; }
.dlg.is-closing::backdrop { animation: fade-out 220ms ease both; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes dlg-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.dlg__sheet { position: relative; max-height: calc(100svh - 32px); overflow-y: auto; padding: 34px 34px 28px; border-radius: inherit; }
.dlg__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--metal);
  box-shadow: var(--metal-edge);
  color: var(--label);
  cursor: pointer;
  transition: background 380ms ease, box-shadow 380ms ease, color 380ms ease;
}
.dlg__close:hover { background: var(--metal-hover); box-shadow: var(--metal-edge), var(--metal-glow); color: #D9483A; }
.dlg__close .g { width: 13px; height: 13px; }
.dlg__mark { width: 44px; height: 44px; margin-bottom: 18px; filter: drop-shadow(0 1px 1px rgba(10, 37, 54, 0.3)) drop-shadow(0 4px 10px rgba(10, 37, 54, 0.12)); }
.dlg__motto { margin-bottom: 18px; font-size: 13px; line-height: 1.4; color: var(--label-3); }
.dlg__title { font-size: 28px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; background: var(--metal-ink); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.04em; }
.dlg__sub { margin-top: 6px; font-size: 15px; color: var(--label-2); }
.dlg__form { display: grid; gap: 16px; margin-top: 26px; }
.dlg__form--two { grid-template-columns: 1fr 1fr; }
.dlg__form--two .full { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--label); }
.field label small { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--label-3); }
.input, .select, .textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--field);
  box-shadow: var(--field-edge);
  color: var(--label);
  font: inherit;
  font-size: 15px;
  outline: 0;
  transition: box-shadow 400ms ease, background 400ms ease;
}
.input::placeholder, .textarea::placeholder { color: var(--label-4); }
.input:hover, .select:hover, .textarea:hover { background: var(--field-hover); }
.input:focus, .select:focus, .textarea:focus { background: var(--field-hover); box-shadow: var(--field-ring); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { box-shadow: inset 0 1px 2px rgba(16, 24, 32, 0.08), inset 0 0 0 1px rgba(208, 59, 59, 0.55), 0 0 0 3px rgba(208, 59, 59, 0.08); }
.textarea { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.select-wrap { position: relative; }
.select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap > .g { position: absolute; right: 14px; top: 22px; width: 14px; height: 14px; transform: translateY(-50%); color: var(--label-3); pointer-events: none; z-index: 1; }
.pw { position: relative; }
.pw .input { padding-right: 78px; }
.pw__toggle { position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--metal); box-shadow: var(--metal-edge); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 380ms ease, box-shadow 380ms ease; }
.pw__toggle:hover { background: var(--metal-hover); box-shadow: var(--metal-edge), var(--metal-glow); }
.field__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.field__link { font-size: 13px; color: var(--label-2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.field__link:hover { color: var(--label); text-decoration: underline; text-underline-offset: 3px; }
.field__err { font-size: 12.5px; color: var(--s-critical); }
.field__hint { font-size: 12.5px; color: var(--label-3); }
.dlg__note { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); font-size: 13.5px; color: var(--label-2); }
.dlg__error { padding: 10px 14px; border-radius: 12px; background: rgba(208, 59, 59, 0.07); box-shadow: inset 0 0 0 0.5px rgba(208, 59, 59, 0.3); font-size: 13.5px; color: #9E2B2B; }
.dlg__switch { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--label-2); text-align: center; }
.dlg__switch button { padding: 0; border: 0; background: none; color: var(--label); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, 0.25); }
.dlg__privacy { font-size: 12.5px; color: var(--label-3); text-align: center; }
.dlg__privacy a { color: var(--label-2); }
.dlg__success { display: grid; justify-items: center; gap: 10px; padding: 18px 0 6px; text-align: center; }
.dlg__success .dlg__title { margin-top: 10px; }
.dlg__success p { max-width: 26em; font-size: 15px; color: var(--label-2); }
.dlg__tick {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--graphite);
  box-shadow: var(--graphite-edge), 0 0 0 6px rgba(255, 255, 255, 0.7), 0 12px 30px -10px rgba(16, 24, 32, 0.4);
  color: #FFFFFF;
  animation: pop 600ms var(--ease) both;
}
.dlg__tick .g { width: 28px; height: 28px; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Product pages ──────────────────────────────────────────────────── */
.phero { position: relative; padding: calc(var(--nav-h) + 110px) 0 72px; overflow: hidden; isolation: isolate; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent); }
.phero__bg { position: absolute; inset: 0; z-index: -2; background-position: 70% 50%; background-size: cover; background-repeat: no-repeat; opacity: 0.9; will-change: transform; }
.phero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(238, 239, 242, 0.96) 0%, rgba(238, 239, 242, 0.82) 38%, rgba(238, 239, 242, 0.2) 75%), linear-gradient(0deg, #E8E9EC 0%, rgba(232, 233, 236, 0) 40%); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.phero .tile--lg { margin-bottom: 30px; }
.phero h1 { max-width: 14em; }
.phero .lead { margin-top: 28px; }
.phero .btn-row { margin-top: 38px; }
.crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 26px; font-size: 13.5px; color: var(--label-3); }
.crumbs a { color: var(--label-2); text-decoration: none; }
.crumbs a:hover { color: var(--label); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .g { width: 12px; height: 12px; }

.shot { padding: 9px; border-radius: 24px; }
.shot__screen { position: relative; border-radius: 16px; overflow: hidden; background: #EEEFF2; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.shot__screen img { width: 100%; height: auto; }
.shot__cap { margin-top: 14px; font-size: 14px; color: var(--label-3); text-align: center; }

.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.point { padding: 28px; border-radius: var(--r-xl); }
.point__n { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--label-3); }
.point h3 { margin-top: 18px; font-size: 21px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; }
.point p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--label-2); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split--flip > :first-child { order: 2; }
.ticks { display: grid; gap: 0; margin-top: 28px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--hair-strong); font-size: 16.5px; line-height: 1.5; color: var(--label-2); }
.ticks li:last-child { border-bottom: 1px solid var(--hair-strong); }
.ticks .g { width: 20px; height: 20px; margin-top: 2px; color: #3A3C40; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 999px; background: var(--metal); box-shadow: var(--metal-edge); font-size: 14px; font-weight: 500; color: var(--label); }

.photo { aspect-ratio: 16 / 10; border-radius: var(--r-2xl); background-size: cover; background-position: 50% 50%; box-shadow: var(--glass-shadow-raised); }

/* The protected copy (Anonymiser) */
.redact { padding: 30px; border-radius: var(--r-2xl); }
.redact p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.7; color: var(--label); }
.ph { display: inline-block; padding: 0 9px; border-radius: 7px; background: var(--graphite); box-shadow: var(--graphite-edge); color: #FFFFFF; font-size: 0.8em; font-weight: 500; line-height: 1.6; vertical-align: 0.06em; }

.next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.next a { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; text-decoration: none; transition: transform 420ms var(--ease), box-shadow 420ms ease; }
.next a:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-raised), inset 0 1px 0 #FFFFFF, 0 0 18px rgba(255, 255, 255, 0.7); }
.next b { display: block; font-size: 15px; font-weight: 600; }
.next small { display: block; font-size: 13px; color: var(--label-3); line-height: 1.35; }

/* ── New-feature tag ────────────────────────────────────────────────── */
.tag-new {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--graphite);
  box-shadow: var(--graphite-edge);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}
.tag-new--inline { height: 20px; margin-left: 6px; padding: 0 8px; font-size: 10px; letter-spacing: 0.08em; }
/* not live yet: brushed metal instead of graphite */
.tag-new--soon { background: var(--metal); box-shadow: var(--metal-edge); color: var(--label-2); }

/* ── Bento: the rest of every plan ──────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bento__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 28px; border-radius: var(--r-2xl); }
.bento__item h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--label); }
.bento__item p { font-size: 15.5px; line-height: 1.6; color: var(--label-2); }
.bento__g { width: 26px; height: 26px; margin-bottom: 8px; color: #3A3C40; }
.bento__item--hero { grid-column: span 2; grid-row: span 2; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 24px; padding: 32px; }
.bento__text { display: grid; gap: 10px; max-width: 34em; }
.bento__item--hero h3 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.028em; }
.bento__shot { position: relative; min-height: 260px; border-radius: 16px; overflow: hidden; background: #E9EAEE; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 18px 40px -22px rgba(16, 24, 32, 0.4); }
.bento__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }

/* ── The bundle: Runway's file tiles gathering into one PDF ─────────── */
.card__media--bundle { display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 45%, #FFFFFF 0%, #EEF0F3 60%, #E3E5E9 100%); }
.bundle { position: relative; width: min(340px, 80%); aspect-ratio: 1 / 1; }
.bundle img { position: absolute; filter: drop-shadow(0 10px 18px rgba(16, 24, 32, 0.22)); }
.bundle__f { width: 30%; height: auto; transition: transform 900ms var(--ease); }
.bundle__f--1 { left: 2%;  top: 6%;  transform: rotate(-12deg); }
.bundle__f--2 { right: 2%; top: 4%;  transform: rotate(10deg); }
.bundle__f--3 { left: 0%;  bottom: 8%; transform: rotate(9deg); }
.bundle__f--4 { right: 0%; bottom: 6%; transform: rotate(-8deg); }
.bundle__pdf { left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 30px rgba(16, 24, 32, 0.3)); }
.card:hover .bundle__f--1 { transform: translate(14%, 12%) rotate(-6deg); }
.card:hover .bundle__f--2 { transform: translate(-14%, 12%) rotate(5deg); }
.card:hover .bundle__f--3 { transform: translate(14%, -12%) rotate(4deg); }
.card:hover .bundle__f--4 { transform: translate(-14%, -12%) rotate(-4deg); }

.plans .plan--lead { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  .plans .plan--lead { grid-column: auto; }
}
.bento { grid-template-columns: minmax(0, 1fr); }
.bento__item--hero { grid-column: auto; grid-row: auto; padding: 22px; }
.bento__item { padding: 22px; }
.bento__shot { min-height: 0; aspect-ratio: 16 / 10; }
@media (min-width: 600px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__item { padding: 28px; }
  .bento__item--hero { padding: 32px; grid-column: span 2; grid-row: span 2; padding: 32px; }
  .bento__shot { min-height: 260px; aspect-ratio: auto; }
}
@media (min-width: 1200px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── A full-bleed photographic ground (Runway's frosted glass panes) ── */
.section--photo { isolation: isolate; }
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #DADDE1 url('../images/site/runway/glass-panes.jpg') 50% 62% / cover no-repeat;
}
.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #E9EAED 0%, rgba(233, 234, 237, 0.55) 16%, rgba(233, 234, 237, 0.30) 50%, rgba(233, 234, 237, 0.55) 84%, #E6E7EA 100%),
    linear-gradient(90deg, rgba(240, 241, 244, 0.70) 0%, rgba(240, 241, 244, 0.15) 60%, rgba(240, 241, 244, 0.05) 100%);
}

/* ── Glass panes: the frosted panes that float over Pricing's photograph
   Each pane blurs what is behind it, with a bright rim, a thin bevel for
   thickness and a soft shadow. A slow band of light crosses the glass
   every few seconds. Only transform and opacity ever animate. */
.gp__pane {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  /* thin, clear glass: what is behind reads through, softened */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(214, 224, 232, 0.06) 70%, rgba(255, 255, 255, 0.14) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 2px 2px 0 rgba(255, 255, 255, 0.85),
    inset -3px -3px 0 rgba(128, 142, 158, 0.30),
    inset 0 -50px 60px -46px rgba(110, 128, 146, 0.30),
    0 1px 2px rgba(16, 24, 32, 0.10),
    0 34px 60px -26px rgba(16, 24, 32, 0.40);
  opacity: 0;
  transform: translate3d(90px, 40px, -80px) rotateY(-16deg) scale(0.96);
  transition: transform 1900ms cubic-bezier(0.16, 0.84, 0.24, 1), opacity 1300ms ease;
  transition-delay: var(--delay, 0ms);
}
/* the bright rim: strongest where the light hits, top left and bottom right */
.gp__pane::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.2px;
  border-radius: inherit;
  background: linear-gradient(140deg, #FFFFFF 0%, rgba(255, 255, 255, 0.35) 24%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0.55) 82%, #FFFFFF 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* the band of light that crosses the glass now and then */
.gp__pane::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.10) 30%, rgba(255, 255, 255, 0.62) 50%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(0, 0, 0) skewX(-12deg);
  animation: gp-sweep 7.5s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
  animation-delay: calc(2.4s + var(--delay, 0ms));
  will-change: transform;
}
@keyframes gp-sweep {
  0%   { transform: translate3d(0, 0, 0) skewX(-12deg); }
  26%  { transform: translate3d(420%, 0, 0) skewX(-12deg); }
  100% { transform: translate3d(420%, 0, 0) skewX(-12deg); }
}
/* the words sit above the photograph and its veil */
.hero .wrap { position: relative; z-index: 1; }

/* ── Pricing: the glass photograph moves slowly, one live pane floats ── */
.photo-bg { position: absolute; inset: -12% 0; z-index: -2; background: #DADDE1 url('../images/site/runway/glass-panes.jpg') 50% 60% / cover no-repeat; will-change: transform; }
.section--photo { overflow: hidden; }
.section--photo::before { display: none; }
.float-pane {
  position: absolute;
  z-index: -1;
  right: 6%;
  top: 8%;
  width: min(380px, 34vw);
  height: min(520px, 60vh);
  will-change: transform;
  pointer-events: none;
}
.float-pane .gp__pane { opacity: 1; transform: rotate(-4deg); transition: none; }
.float-pane--2 { right: auto; left: 3%; top: 46%; width: min(260px, 26vw); height: min(340px, 40vh); }
.float-pane--2 .gp__pane { transform: rotate(5deg); }

.hero__cue { display: none; }
.float-pane { width: 46vw; height: 52vw; top: 4%; }
.float-pane--2 { display: none; }
@media (min-width: 900px) {
  .hero__cue { display: grid; }
  .float-pane { width: min(380px, 34vw); height: min(520px, 60vh); top: 8%; }
  .float-pane--2 { width: min(260px, 26vw); height: min(340px, 40vh); top: 46%; display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .gp__pane { opacity: 1; transform: none; transition: none; }
  .gp__pane::after { animation: none; display: none; }
}

/* ── Motion through the whole page ─────────────────────────────────────
   Calm and slow, transform and opacity only; prefers-reduced-motion gets
   everything in place (see the end of the file). */

/* Big headings rise word by word as they arrive (site.js splits them).
   Each word carries the ink itself, so the gradient survives the split. */
.display.is-split { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; padding-bottom: 0; }
.display.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.02em 0.04em 0.14em; margin: -0.02em -0.04em -0.14em; }
.display.is-split .w > i {
  display: inline-block;
  font-style: normal;
  background: var(--ink-display);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translate3d(0, 110%, 0);
  transition: transform 1150ms cubic-bezier(0.16, 0.84, 0.24, 1);
  transition-delay: calc(var(--dd, 0ms) + var(--wi, 0) * 60ms + 80ms);
}
.is-in .display.is-split .w > i, .beat.is-on .display.is-split .w > i, .display.is-split.is-in .w > i { transform: none; }
.beat .display.is-split .w > i { transition-duration: 900ms; transition-delay: calc(var(--wi, 0) * 45ms); }

/* A revealed block: it rises, and what is inside follows one by one */
.reveal { transform: translate3d(0, 22px, 0); }
.reveal > * { transition: opacity 900ms var(--ease), transform 1000ms var(--ease); transition-delay: calc(var(--dd, 0ms) + var(--ri, 0) * 90ms + 140ms); }
.reveal:not(.is-in) > * { opacity: 0; transform: translate3d(0, 18px, 0); }
.reveal:not(.is-in) > .display.is-split { opacity: 1; transform: none; }
.plan.reveal { transform: translate3d(0, 70px, 0); }
.plan.reveal.is-in { transform: none; }
.sec__item.reveal { transform: translate3d(-40px, 0, 0); }
.sec__item.reveal.is-in { transform: none; }

/* Security: a thin metal line draws down the list as you read it */
.sec__list { position: relative; padding-left: 30px; }
.sec__line {
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #E4E6EA 0%, #8A8E95 22%, #45484E 50%, #8A8E95 78%, #E4E6EA 100%);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.9);
  transform-origin: 50% 0;
  transform: scaleY(0);
  will-change: transform;
}
.sec__line::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--graphite); box-shadow: var(--graphite-edge), 0 0 0 3px rgba(255, 255, 255, 0.8); }

/* Depth: a still drifts slower than the page and leans back a touch until
   it reaches the middle of the window (site.js, data-depth / data-tilt) */
[data-depth], [data-tilt] { will-change: transform; }

/* The closing photograph: a slow push in while it is in view */
.close__bg { transform: scaleX(-1) scale(var(--kb, 1)); will-change: transform; }

/* ── Stage compositions in the product cards: UI close-ups on glass ── */
.card__media--stage {
  display: grid;
  place-items: center;
  background: radial-gradient(85% 75% at 42% 36%, #FFFFFF 0%, #EEF0F3 56%, #E1E3E8 100%);
}
.card__media--stage::after { display: none; }
.shotcard {
  position: relative;
  z-index: 1;
  margin: 0;
  width: var(--w, 86%);
  padding: 5px;
  border-radius: 15px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(246, 247, 249, 0.75));
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(16, 24, 32, 0.05), 0 26px 50px -22px rgba(16, 24, 32, 0.42), inset 0 1px 0 #FFFFFF;
  will-change: transform;
}
.shotcard img { display: block; width: 100%; height: auto; border-radius: 10px; transform: none !important; }
.shotcard--front { transform: translate3d(-5%, -5%, 0); }
.shotcard--back { position: absolute; z-index: 0; right: 4%; bottom: 6%; width: var(--w, 52%); }
.card__media--stage .shotcard--solo { width: var(--w, 88%); }

/* The dim on the cards waiting beneath the top one */
.card__dim { position: absolute; inset: 0; z-index: 6; border-radius: inherit; background: #DFE1E5; opacity: 0; pointer-events: none; will-change: opacity; }

/* The bundle: a soft glint crosses the PDF as it settles */
/* clipped to the bundle's front cover (no image mask: file:// blocks those) */
.bundle__glint { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); overflow: hidden; pointer-events: none; -webkit-clip-path: inset(11% 26% 4% 20% round 3%); clip-path: inset(11% 26% 4% 20% round 3%); }
.bundle__glint::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -50%; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%); transform: translate3d(var(--gx, -60%), 0, 0) skewX(-14deg); }
.bundle__f { max-width: 128px; }

/* ── Story details: close-ups floating in front of the screen ───────── */
.detail {
  position: absolute;
  z-index: 3;
  margin: 0;
  width: var(--dw, 40%);
  padding: 5px;
  border-radius: 15px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(244, 245, 248, 0.82));
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 30px 60px -24px rgba(16, 24, 32, 0.45), 0 2px 6px rgba(16, 24, 32, 0.06), inset 0 1px 0 #FFFFFF;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.detail img { display: block; width: 100%; height: auto; border-radius: 10px; }
.detail--bl { left: -7%; bottom: -12%; }
.detail--br { right: -5%; bottom: -14%; }
.detail--tr { right: -5%; top: -11%; }
.detail--tl { left: -7%; top: -10%; }
/* the typed note */
.detail--note { --dw: 34%; padding: 0; }
.note { padding: 16px 18px 14px; border-radius: 15px; }
.note b { display: block; font-size: 14px; font-weight: 600; color: var(--label); }
.note__text { min-height: 3.1em; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--label); }
.note__caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -0.16em; background: #2A2C30; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.note__done { display: flex; gap: 7px; align-items: flex-start; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.4; color: var(--label-2); opacity: 0; }
.note__done .g { width: 15px; height: 15px; margin-top: 1px; color: var(--s-good); }
.detail--cal { --dw: 58%; }
.detail--cal .chip-drop { position: absolute; width: auto; border-radius: 6px; box-shadow: 0 10px 20px -8px rgba(16, 24, 32, 0.45); opacity: 0; will-change: transform, opacity; }

.detail { --dw: 46%; }
.detail--note { --dw: 52%; }
.note { padding: 10px 12px; }
.note__text { font-size: 12.5px; margin-top: 6px; }
.note__done { font-size: 11px; }
.detail--cal { --dw: 66%; }
@media (min-width: 900px) {
  .detail--note { --dw: 34%; }
  .note { padding: 16px 18px 14px; }
  .note__text { font-size: 15px; margin-top: 10px; }
  .note__done { font-size: 12.5px; }
  .detail--cal { --dw: 58%; }
  .detail { --dw: initial; }
}

@media (prefers-reduced-motion: reduce) {
  .display.is-split .w > i { transform: none; transition: none; }
  .reveal, .reveal > *, .plan.reveal, .sec__item.reveal { transform: none !important; opacity: 1 !important; }
  .sec__line { transform: none; }
}

/* A canvas in a bento still: clear until its first frame draws */
.bento__shot canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms ease; }
.bento__shot canvas.is-live { opacity: 1; }

/* ── Form dropdowns: the grey sheet, never the system list ──────────── */
.select--native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.select-btn { display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }
.select-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn[aria-expanded="true"] { background: var(--field-hover); box-shadow: var(--field-ring); }
.select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  list-style: none;
  outline: 0;
  background: linear-gradient(160deg, #F7F8FA 0%, #EDEFF3 52%, #F3F4F7 100%);
  box-shadow: var(--glass-shadow-raised), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 260ms var(--ease), visibility 0s linear 260ms;
}
.select-list.is-up { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
.select-list.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 260ms var(--ease), visibility 0s; }
.select-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 9px; font-size: 14.5px; color: var(--label-2); cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.select-list li .g { width: 14px; height: 14px; visibility: hidden; color: var(--label); }
.select-list li[aria-selected="true"] { color: var(--label); font-weight: 500; }
.select-list li[aria-selected="true"] .g { visibility: visible; }
.select-list li.is-active, .select-list li:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55)); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); color: var(--label); }

/* ── Responsive ─────────────────────────────────────────────────────── */
.nav__links .nav__link--hide-md { display: none; }
.foot__brand { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  .nav__links .nav__link--hide-md { display: inline-flex; }
  .foot__brand { grid-column: auto; }
}
.plans { grid-template-columns: minmax(0, 1fr); }
.nav__links { display: none; }
.nav__actions .nav__login { display: none; }
.nav__actions { margin-left: auto; }
.nav__burger { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--metal); box-shadow: var(--metal-edge); cursor: pointer; transition: background 400ms ease, box-shadow 400ms ease; }
.nav__burger:hover { background: var(--metal-hover); box-shadow: var(--metal-edge), var(--metal-glow); }
.nav__burger .g { width: 18px; height: 18px; }
.story__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
.story__count { display: none; }
.card { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.card__media { order: -1; }
.card .eyebrow { margin: 0 0 10px; }
.card__top { display: none; }
.sec { grid-template-columns: minmax(0, 1fr); }
.split { grid-template-columns: minmax(0, 1fr); }
.split--flip > :first-child { order: 0; }
.sec__aside { position: relative; top: auto; }
.sec__photo { aspect-ratio: 16 / 9; }
.points { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__actions { margin-left: 10px; }
  .nav__burger { display: none; place-items: revert; padding: revert; border: revert; border-radius: revert; background: revert; box-shadow: revert; cursor: revert; transition: revert; }
  .story__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); grid-template-rows: none; }
  .card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3.4vw, 56px); }
  .card__top { display: flex; }
  .card .eyebrow { margin: 26px 0 16px; }
  .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sec { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sec__aside { position: sticky; top: calc(var(--nav-h) + 48px); }
  .sec__photo { aspect-ratio: 4 / 3; }
  .points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--flip > :first-child { order: 2; }
  .nav__actions .nav__login { display: inline-flex; }
  .nav__burger:hover { background: revert; box-shadow: revert; }
  .nav__burger .g { width: 1em; height: 1em; }
  .story__count { display: block; }
  .card__media { order: 0; }
}
@media (min-width: 1200px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hero { align-items: flex-end; padding-bottom: 110px; }
.hero h1 { font-size: clamp(38px, 10.6vw, 50px); }
.foot__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.includes__grid { grid-template-columns: minmax(0, 1fr); }
.next { grid-template-columns: minmax(0, 1fr); }
body { font-size: 16px; }
.display { font-size: clamp(40px, 11.4vw, 56px); letter-spacing: -0.04em; }
.display--md { font-size: clamp(34px, 9.6vw, 46px); }
.display--sm { font-size: clamp(28px, 8vw, 36px); }
.hero__veil { background: linear-gradient(180deg, rgba(246, 246, 248, 0.5) 0%, rgba(246, 246, 248, 0) 26%); }
.hero .btn-row .btn { flex: 1 1 auto; }
.btn { height: 48px; padding: 0 22px; }
.deck__cards { height: calc(100svh - var(--nav-h) - 84px); }
.card { padding: 14px 14px 20px; border-radius: 22px; }
.card__media { border-radius: 14px; }
.card h3 { font-size: 28px; }
.card .body { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.sec__item { grid-template-columns: 1fr; gap: 6px; }
.close { margin: 0 8px; border-radius: 26px; }
.close__veil { background: linear-gradient(0deg, rgba(240, 241, 244, 0.94) 0%, rgba(240, 241, 244, 0.8) 100%); }
.dlg__sheet { padding: 28px 20px 22px; }
.dlg__form--two { grid-template-columns: minmax(0, 1fr); }
.tile--lg { width: 68px; height: 68px; border-radius: 18px; }
@media (min-width: 600px) {
  body { font-size: 17px; }
  .display { font-size: clamp(44px, 6.2vw, 108px); letter-spacing: -0.042em; }
  .display--md { font-size: clamp(38px, 4.6vw, 80px); letter-spacing: -0.038em; font-size: clamp(38px, 4.6vw, 80px); }
  .display--sm { font-size: clamp(30px, 3.2vw, 52px); letter-spacing: -0.03em; font-size: clamp(30px, 3.2vw, 52px); }
  .btn { height: 50px; padding: 0 26px; }
  .btn--sm { height: 38px; padding: 0 17px; }
  .tile--lg { width: 84px; height: 84px; border-radius: 22px; }
  .hero__veil { background: linear-gradient(90deg, rgba(238, 239, 242, 0.94) 0%, rgba(238, 239, 242, 0.80) 30%, rgba(238, 239, 242, 0.25) 58%, rgba(238, 239, 242, 0) 72%),
    linear-gradient(0deg, #E8E9EC 0%, rgba(232, 233, 236, 0) 30%),
    linear-gradient(180deg, rgba(246, 246, 248, 0.6) 0%, rgba(246, 246, 248, 0) 22%); }
  .hero h1 { font-size: clamp(38px, 7.4vw, 60px); }
  .deck__cards { height: min(660px, calc(100svh - var(--nav-h) - 110px)); }
  .card { padding: clamp(24px, 3.2vw, 48px); border-radius: var(--r-2xl); }
  .card h3 { font-size: clamp(30px, 3.1vw, 50px); }
  .card .body { margin-top: 18px; font-size: 17px; line-height: 1.6; }
  .card__media { border-radius: 18px; }
  .includes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec__item { grid-template-columns: 54px 1fr; gap: 18px; }
  .close { margin: 0 var(--gutter); border-radius: 36px; }
  .close__veil { background: linear-gradient(90deg, rgba(240, 241, 244, 0.92) 0%, rgba(240, 241, 244, 0.7) 45%, rgba(240, 241, 244, 0.18) 100%); }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .dlg__sheet { padding: 34px 34px 28px; }
  .dlg__form--two { grid-template-columns: 1fr 1fr; }
  .next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding-bottom: 96px; }
  .hero .btn-row .btn { flex: 0 1 auto; }
}
@media (min-width: 900px) {
  .hero { align-items: center; }
  .hero h1 { font-size: clamp(42px, 4.5vw, 82px); }
}
@media (min-width: 1200px) {
  .includes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .next { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

/* ── Phone polish (600px and narrower) ──────────────────────────────────
   Everything here is phone only; the laptop layout is untouched. Calm
   composition, no text ever under glass or a close-up, screens that fill
   the width, and every tap target at least 44px. */
:root { --nav-h: 56px; }
.detail--bl { left: 4%; bottom: 5%; right: auto; top: auto; }
.detail--br { right: 4%; bottom: 5%; left: auto; top: auto; }
.detail--tr { right: 4%; top: 4%; left: auto; bottom: auto; }
.detail--tl { left: 4%; top: 4%; right: auto; bottom: auto; }
.nav__burger { width: 44px; height: 44px; }
.nav__bar { padding: 0 6px 0 16px; gap: 10px; }
.story__stage { align-content: center; gap: 16px; padding-top: calc(var(--nav-h) + 22px); padding-bottom: 20px; }
.story__beats { height: auto; }
.story__rail { bottom: -12px; }
.card { grid-template-rows: minmax(0, 1fr) auto; }
.beat .lead { margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
.beat__steps { gap: 6px; margin-top: 12px; }
.beat__steps li { grid-template-columns: 64px 1fr; padding-top: 7px; gap: 10px; }
.beat__steps span { font-size: 13.5px; line-height: 1.45; }
.beat__steps b { font-size: 13.5px; line-height: 1.45; }
.frame { padding: 5px; border-radius: 18px; }
.frame__screen { border-radius: 13px; aspect-ratio: 4 / 3; }
.card__go { margin-top: 8px; min-height: 44px; }
.sec__item { padding: 20px 18px; border-radius: 18px; }
html { scroll-padding-top: calc(var(--nav-h) + 24px); }
.nav { top: 10px; }
.brand { min-height: 44px; }
.nav .btn--sm { height: 44px; padding: 0 clamp(13px, 30vw - 101px, 16px); font-size: clamp(13.5px, 5vw - 5.5px, 14px); }
.nav.is-compact .nav__bar { height: calc(var(--nav-h) - 4px); }
/* the photograph above the words: the diary and the pen whole, fading into the page */
.hero { --photo-top: calc(var(--nav-h) + 14px); --photo-h: min(46svh, 400px); display: block; min-height: 0; padding: calc(var(--photo-top) + var(--photo-h) - 24px) 0 64px; }
.hero__bgclip { top: var(--photo-top); bottom: auto; height: var(--photo-h); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 66%, transparent 100%); }
.gp__pane { border-radius: 14px; }
.hero + .story { margin-top: -6vh; }
.beat { top: auto; bottom: 0; }
.beat .eyebrow { margin-bottom: 12px; }
.beat .display--md { font-size: clamp(30px, 8.6vw, 38px); }
.beat .chips { margin-top: 14px; gap: 6px; }
.beat .chip { height: 30px; padding: 0 12px; font-size: 13px; }
.detail { width: min(var(--dw, 40%), 48%); padding: 4px; border-radius: 12px; }
.detail img { border-radius: 8px; }
.card .eyebrow { font-size: 11px; }
.card__media--stage .shotcard--front { width: min(var(--w, 86%), 92%); }
.card__media--stage .shotcard--solo { width: min(var(--w, 86%), 92%); }
.link-go { min-height: 44px; }
.chip-btn { min-height: 44px; }
.btn { min-height: 44px; }
.dlg__close { top: 10px; right: 10px; width: 44px; height: 44px; }
.dlg__close .g { width: 14px; height: 14px; }
.field__link { display: inline-flex; align-items: center; min-height: 44px; }
.pw .input { padding-right: 84px; }
.pw__toggle { top: 0; right: 0; height: 44px; padding: 0 16px; border-radius: 0 12px 12px 0; }
.select-list li { min-height: 44px; }
.dlg__switch button { min-height: 44px; padding: 0 4px; }
.dlg__privacy a { display: inline-flex; align-items: center; min-height: 44px; }
.mnav__links a { min-height: 52px; }
.mnav__links button { min-height: 52px; }
.foot__col li + li { margin-top: 0; }
.foot__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.foot__col button { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.skip { min-height: 44px; display: inline-flex; align-items: center; }
.foot__brand a { display: flex; align-items: center; min-height: 44px; margin-top: 0; }
.sec__item a { display: inline-block; padding: 10px 0; }
.plan { padding: 24px 20px; }
.plan__price { margin-top: 22px; }
.plan__amount { font-size: clamp(44px, 13vw, 56px); }
.plan__amount--word { font-size: clamp(34px, 10vw, 42px); }
.plan .btn-row { padding-top: 22px; }
.includes { padding: 22px 18px; }
.includes__head h3 { font-size: 18px; }
.includes__grid li { gap: 10px; padding: 12px 0; font-size: 14.5px; }
.sec__list { padding-left: 18px; gap: 12px; }
.sec__line { left: 2px; }
.sec__item h3 { font-size: 19px; }
.sec__item p { font-size: 15.5px; line-height: 1.55; }
.sec__photo { margin-top: 28px; }
.bento__item h3 { font-size: 20px; }
.reveal { --dd: 0ms; }
@media (min-width: 600px) {
  :root { --nav-h: 60px; }
  .nav { top: 12px; }
  .nav__bar { padding: 0 7px 0 18px; gap: 20px; }
  .nav.is-compact .nav__bar { height: calc(var(--nav-h) - 8px); }
  .reveal { --dd: var(--d, 0ms); }
  .hero { display: flex; min-height: 100svh; padding: calc(var(--nav-h) + 72px) 0 96px; }
  .hero__bgclip { top: 0; bottom: 0; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
  .story__stage { gap: 22px; padding-top: calc(var(--nav-h) + 30px); padding-bottom: 30px; }
  .story__beats { height: min(40vh, 330px); }
  .beat { top: 50%; bottom: auto; }
  .hero + .story { margin-top: -22vh; }
  .beat .lead { margin-top: 24px; font-size: clamp(17px, 1.35vw, 20px); }
  .beat__steps { gap: 14px; margin-top: 28px; }
  .beat__steps li { grid-template-columns: 92px 1fr; padding-top: 14px; gap: 14px; }
  .beat__steps b { font-size: 15px; line-height: inherit; }
  .beat__steps span { font-size: 15.5px; line-height: 1.5; }
  .frame { padding: 9px; border-radius: 24px; }
  .frame__screen { border-radius: 16px; aspect-ratio: 16 / 10; }
  .story__rail { bottom: -16px; }
  .card__go { margin-top: 26px; min-height: auto; }
  .plan { padding: clamp(28px, 3.4vw, 48px); }
  .plan__price { margin-top: 34px; }
  .plan__amount { font-size: clamp(48px, 5.4vw, 88px); }
  .plan__amount--word { font-size: clamp(38px, 3.6vw, 58px); font-size: clamp(38px, 3.6vw, 58px); }
  .plan .btn-row { padding-top: 32px; }
  .includes { padding: clamp(24px, 3vw, 40px); }
  .includes__head h3 { font-size: 20px; }
  .includes__grid li { gap: 12px; padding: 13px 0; font-size: 15px; }
  .sec__photo { margin-top: 40px; }
  .sec__list { gap: 14px; padding-left: 30px; }
  .sec__item { padding: 26px 28px 26px 22px; border-radius: var(--r-xl); }
  .sec__item h3 { font-size: 21px; }
  .sec__item p { font-size: 16px; line-height: 1.6; }
  .foot__brand a { display: block; margin-top: 4px; align-items: normal; min-height: auto; }
  .foot__col li + li { margin-top: 8px; }
  .dlg__close { top: 16px; right: 16px; width: 32px; height: 32px; }
  .dlg__close .g { width: 13px; height: 13px; }
  .pw .input { padding-right: 78px; }
  .pw__toggle { top: 6px; right: 6px; height: 32px; padding: 0 12px; border-radius: 999px; }
  .dlg__switch button { padding: 0; min-height: auto; }
  .bento__item h3 { font-size: 22px; }
  .bento__item--hero h3 { font-size: clamp(26px, 2.4vw, 36px); }
  .gp__pane { border-radius: 18px; }
  .sec__line { left: 8px; }
  .card__media--stage .shotcard--solo { width: var(--w, 88%); }
  .detail { width: var(--dw, 40%); padding: 5px; border-radius: 15px; }
  .detail--note { padding: 0; }
  .detail img { border-radius: 10px; }
  .detail--bl { left: -2%; bottom: -16%; }
  .detail--br { right: -2%; bottom: -18%; }
  .detail--tr { right: -2%; top: -14%; }
  .detail--tl { left: -2%; top: -12%; }
  .select-list li { min-height: 36px; }
  .nav__burger { width: 40px; height: 40px; }
  .card { grid-template-rows: auto minmax(0, 1fr); }
  html { scroll-padding-top: auto; }
  .brand { min-height: auto; }
  .nav .btn--sm { height: 38px; padding: 0 17px; font-size: 14px; }
  .beat .eyebrow { margin-bottom: 22px; }
  .beat .display--md { font-size: clamp(38px, 4.6vw, 80px); }
  .beat .chips { margin-top: 26px; gap: 8px; }
  .beat .chip { height: 34px; padding: 0 15px; font-size: 14px; }
  .card .eyebrow { font-size: 12px; }
  .card__media--stage .shotcard--front { width: var(--w, 86%); }
  .link-go { min-height: auto; }
  .chip-btn { min-height: auto; }
  .btn { min-height: auto; }
  .field__link { display: revert; align-items: normal; min-height: auto; }
  .dlg__privacy a { display: inline; align-items: normal; min-height: auto; }
  .foot__col a { display: inline; align-items: normal; min-height: auto; min-width: auto; }
  .foot__col button { display: revert; align-items: normal; min-height: auto; min-width: auto; }
  .skip { min-height: auto; display: inline; align-items: normal; }
  .sec__item a { display: inline; padding: 0; }
}
@media (min-width: 900px) {
  .nav__bar { padding: 0 10px 0 22px; }
  .story__stage { gap: clamp(28px, 4vw, 72px); align-content: normal; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
  .story__beats { height: min(64vh, 560px); }
  .story__rail { bottom: -26px; }
  .detail--bl { left: -7%; bottom: -12%; }
  .detail--br { right: -5%; bottom: -14%; }
  .detail--tr { right: -5%; top: -11%; }
  .detail--tl { left: -7%; top: -10%; }
  .nav__burger { width: revert; height: revert; }
  .card { grid-template-rows: none; }
}
.brand img { height: clamp(20px, 20vw - 56px, 22px); }
@media (min-width: 600px) {
  .brand img { height: 22px; }
}

/* ── The hero on a laptop: the first version, as the owner chose it ────
   (25 Oct 2026): the desk photograph full-bleed at 62%, the book cut by
   the right edge, the headline at display size across the glass pad.
   Narrower screens anchor the photograph right, so the diary and the pen
   stay in frame. */
@media (min-width: 1200px) {
  .hero__bg { background-position: 62% 50%; }
  .hero__bgclip { -webkit-mask-image: none; mask-image: none; }
  .hero__content { max-width: none; }
  .hero h1 { max-width: 13em; font-size: clamp(44px, 6.2vw, 108px); }
}

/* Production: images carry width and height (for layout and search); keep the
   ratio wherever a rule sets only the width. No specificity: any rule wins. */
:where(img[width][height]) { height: auto; }

/* Production: the two-step code step (scripts/shared/two-step-signin.js) builds
   its own form inside the sign-in dialog, in production's form classes */
#dialog-login #form-two-step { margin-top: 22px; gap: 16px; }
#dialog-login .xy-2s__lead { font-size: 14.5px; line-height: 1.5; color: var(--label-2); text-align: left; }
#dialog-login .form-group { display: grid; gap: 7px; }
#dialog-login .form-label { font-size: 13.5px; font-weight: 600; color: var(--label); }
#dialog-login .form-input { width: 100%; height: 50px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--field); box-shadow: var(--field-edge); color: var(--label); font: inherit; font-size: 20px; outline: 0; transition: box-shadow 400ms ease, background 400ms ease; }
#dialog-login .form-input:hover { background: var(--field-hover); }
#dialog-login .form-input:focus { background: var(--field-hover); box-shadow: var(--field-ring); }
#dialog-login .form-checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--label-2); cursor: pointer; }
#dialog-login .form-checkbox input { width: 18px; height: 18px; margin: 0; accent-color: #2E3035; }
#dialog-login .dialog__error { padding: 10px 14px; border-radius: 12px; background: rgba(208, 59, 59, 0.07); box-shadow: inset 0 0 0 0.5px rgba(208, 59, 59, 0.3); font-size: 13.5px; color: #9E2B2B; }
#dialog-login .btn--primary { background: var(--graphite); box-shadow: var(--graphite-edge); color: #FFFFFF; text-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.4); }
#dialog-login .btn--primary:hover { background: var(--graphite-hover); }
#dialog-login .dialog__switch { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--label-2); text-align: center; }
#dialog-login .dialog__switch button { padding: 0; border: 0; background: none; color: var(--label); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, 0.25); }
#dialog-login .xy-2s__more { padding-top: 0; border-top: 0; }
#dialog-login .xy-2s__codes { border-color: var(--hair-strong); border-radius: 12px; background: rgba(255, 255, 255, 0.6); }
/* Production: scripts/contact.js shows its thank-you in place of the form; the form's heading goes with it */
#dlg-demo:has(#contact-success:not([hidden])) #demo-title,
#dlg-demo:has(#contact-success:not([hidden])) #demo-title + .dlg__sub { display: none; }
.btn--loading { opacity: 0.7; pointer-events: none; }