/* ──────────────────────────────────────────────────────────────────────────
   The landing page: the only page somebody sees before they have an account.

   It is the app's own skin, not a second brand — black, Inter, pill buttons,
   the drifting orange field from styles.css — stretched over a long page that
   has to explain three products (the Finder, the sender, the CRM) to somebody
   who has never seen any of them.

   Motion rules here, because there is a lot of it:
     · every entrance is opt-in through .reveal, added by landing.js. With no
       JS, or with reduced motion, the page is the same page, just immediate.
     · nothing that moves on its own is ever the only way to read something.
     · transforms and opacity only — no layout animation, no filter: blur()
       over a moving layer (that is what made the app crawl).
   ────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --b:    rgba(255,255,255,0.08);
  --b2:   rgba(255,255,255,0.14);
  --sur:  rgba(255,255,255,0.035);
  --t2:   #9c9c9c;
  --t3:   #7e7e7e;
  --acc:  #ff8a1e;
  --acc2: #ffbe69;
  --ok:   #7ee2a0;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.3,.64,1);
  --nav-h: 64px;
  --max: 1120px;
}

html { background: #000; scroll-behavior: smooth; }
html, body {
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px; line-height: 1.6;
}
body { overflow-x: hidden; background: transparent; }
img { display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(255,138,30,.3); }

/* ── the field ─────────────────────────────────────────────────────────────
   The same two drifting layers of orange the app runs under, so the product
   does not look like a different piece of software from the page selling it.
   Softness comes from the gradient falloff, never from a blur filter. */
html::before, body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  pointer-events: none; mix-blend-mode: screen;
}
body::before {
  background-image:
    radial-gradient(circle, rgba(255,138,30,.085) 0%, rgba(255,138,30,.055) 12%, rgba(255,138,30,.019) 28%, rgba(255,138,30,.004) 40%, rgba(255,138,30,0) 50%),
    radial-gradient(circle, rgba(255,190,105,.055) 0%, rgba(255,190,105,.034) 12%, rgba(255,190,105,.012) 26%, rgba(255,190,105,0) 44%);
  background-size: 1000px 1000px;
  animation: field-a 32s linear infinite;
}
html::before {
  background-image:
    radial-gradient(circle, rgba(230,92,10,.07) 0%, rgba(230,92,10,.045) 12%, rgba(230,92,10,.015) 28%, rgba(230,92,10,0) 47%),
    radial-gradient(circle, rgba(255,160,55,.05) 0%, rgba(255,160,55,.03) 11%, rgba(255,160,55,.01) 25%, rgba(255,160,55,0) 42%);
  background-size: 1300px 1300px;
  animation: field-b 46s linear infinite;
}
@keyframes field-a {
  from { background-position: 0 0, 430px 270px; }
  to   { background-position: 1000px -1000px, 1430px -730px; }
}
@keyframes field-b {
  from { background-position: 150px 110px, 740px 640px; }
  to   { background-position: 1450px 1410px, 2040px 1940px; }
}
/* A still scrim keeps the middle of the screen dark enough to read on, and
   puts black back between the lights instead of letting them wash the page. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 90% at 50% 40%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 100%);
}

/* ── layout ───────────────────────────────────────────────────────────────*/
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { position: relative; }
.sec { padding: 112px 0; }
.sec.tight { padding: 80px 0; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }

/* ── type ─────────────────────────────────────────────────────────────────*/
h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.08; font-weight: 700; }
h1 { font-size: clamp(38px, 6.4vw, 76px); }
h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.12; }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; }
.lead { color: var(--t2); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc2);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 4px rgba(255,138,30,.16);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,138,30,.1); opacity: .75; }
  50%      { box-shadow: 0 0 0 7px rgba(255,138,30,.03); opacity: 1; }
}
.sec-head { max-width: 680px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { margin: 16px 0 14px; }

/* The headline's shimmer: a slow highlight crossing the white, so the biggest
   piece of type on the page is not a dead block. */
.shine, .shine .word > span {
  background-image: linear-gradient(100deg, #fff 0%, #fff 38%, #ffd9ad 48%, #fff 58%, #fff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 7s ease-in-out 1.2s infinite;
}
/* The headline is split into one box per word, and a background clipped to
   text on the <h1> paints nothing where the glyphs belong to a child — so the
   gradient has to live on the words themselves. Each one keeps its entrance
   and carries the highlight a beat after the word before it, which is what
   turns four parallel sweeps into one that crosses the line. */
.shine .word > span {
  animation: word-up .85s var(--ease) both var(--d, 0ms),
             shine 7s ease-in-out calc(1.2s + var(--d, 0ms) * 3) infinite;
}
@keyframes shine { 0%, 100% { background-position: 150% 0; } 50% { background-position: -40% 0; } }

/* ── buttons ──────────────────────────────────────────────────────────────*/
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--spring), box-shadow .25s var(--ease), color .18s;
}
.btn.sm { height: 38px; padding: 0 17px; font-size: 13.5px; }
.btn.lg { height: 52px; padding: 0 30px; font-size: 15.5px; }
.btn.primary { background: #fff; color: #0b0b0b; box-shadow: 0 10px 30px rgba(255,255,255,.1); }
.btn.primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 16px 44px rgba(255,170,80,.25); }
.btn.ghost { background: rgba(255,255,255,.055); color: #fff; border-color: var(--b2); }
.btn.ghost:hover { background: rgba(255,255,255,.11); transform: translateY(-2px); }
.btn.plain { background: transparent; color: var(--t2); }
.btn.plain:hover { color: #fff; }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 3px; }
/* The sheen that crosses a white button when the pointer is on it. */
.btn.primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.65) 42%, transparent 62%);
  background-size: 250% 100%; background-position: 160% 0; opacity: 0;
  transition: opacity .2s;
}
.btn.primary:hover::after { opacity: .6; animation: sheen .75s var(--ease); }
@keyframes sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.arr { transition: transform .22s var(--spring); }
.btn:hover .arr { transform: translateX(3px); }

/* ── nav ──────────────────────────────────────────────────────────────────*/
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}
/* The blur only ever applies to a STILL bar, never over the moving field
   underneath — the bar is opaque enough that nothing behind it recomputes. */
.nav.stuck {
  background: rgba(8,8,8,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.nav .wrap { display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 680; letter-spacing: -0.02em; font-size: 15px; }
.brand img { width: 26px; height: 26px; transition: transform .4s var(--spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.nav-links { display: flex; gap: 4px; margin-left: 20px; }
.nav-links a {
  position: relative; padding: 7px 13px; border-radius: 999px; font-size: 14px; color: var(--t2);
  transition: color .18s, background-color .18s;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* How far down the page you are. */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 61; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  transition: transform .1s linear;
}
@media (max-width: 860px) { .nav-links { display: none; } }

/* ── hero ─────────────────────────────────────────────────────────────────*/
.hero { padding: calc(var(--nav-h) + 86px) 0 24px; text-align: center; }
.hero h1 { margin: 22px auto 0; max-width: 15ch; }
.hero .lead { margin: 22px auto 0; max-width: 60ch; }
.hero-cta { display: flex; justify-content: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-fine { margin-top: 18px; color: var(--t3); font-size: 13px; }
.hero-fine b { color: var(--acc2); font-weight: 600; }
.hero-fine .sep { opacity: .35; margin: 0 8px; }

/* Each word of the headline rises out of its own line box. */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span { display: inline-block; animation: word-up .85s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes word-up { from { transform: translateY(105%) rotate(2deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── the window ───────────────────────────────────────────────────────────
   Every screenshot on this page is a real one, taken from the app against a
   demo account, and every one of them sits in the same browser chrome so the
   page reads as one product rather than a folder of pictures. */
.window {
  position: relative; margin: 56px auto 0; max-width: 1020px;
  border-radius: 16px; border: 1px solid var(--b2); overflow: hidden;
  background: linear-gradient(180deg, rgba(20,20,20,.9), rgba(9,9,9,.94));
  box-shadow: 0 50px 120px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03);
  transform: perspective(1800px) rotateX(var(--rx, 6deg)) translateY(var(--ty, 0px));
  transform-origin: 50% 0; will-change: transform;
}
.window::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(255,138,30,.12), transparent 62%);
}
.window img { display: block; width: 100%; height: auto; }
.window-bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  border-bottom: 1px solid var(--b); background: rgba(255,255,255,.03);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.window-url {
  margin-left: 14px; font-size: 11.5px; color: var(--t3);
  padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.05);
}
.window-badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; color: #ffd9ad;
  background: rgba(20,12,4,.78); border: 1px solid rgba(255,138,30,.35);
  backdrop-filter: blur(6px);
}
.shot-wide { margin: 0 auto 44px; max-width: 880px; transform: none; }

/* The cards that float over the hero screenshot. They are the page's, not the
   app's, and they say so by sitting outside the window's edge. */
.float {
  position: absolute; z-index: 4; display: grid; gap: 1px;
  padding: 10px 14px; border-radius: 13px; font-size: 12px; line-height: 1.4;
  background: rgba(14,14,14,.86); border: 1px solid var(--b2);
  box-shadow: 0 18px 44px rgba(0,0,0,.55); backdrop-filter: blur(10px);
  animation: floaty 7s ease-in-out infinite;
}
.float b { font-size: 13px; font-weight: 650; }
.float span { color: var(--t3); }
.f-1 { left: -26px; top: 26%; animation-delay: .2s; }
.f-2 { right: -22px; top: 46%; animation-delay: 1.6s; }
.f-3 {
  right: 8%; bottom: 7%; display: flex; align-items: center; gap: 9px;
  color: var(--t2); animation-delay: 2.8s;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.dotlive {
  width: 7px; height: 7px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 0 rgba(255,138,30,.6); animation: live 1.8s ease-out infinite;
}
@keyframes live {
  0%   { box-shadow: 0 0 0 0 rgba(255,138,30,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,138,30,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,138,30,0); }
}
@media (max-width: 760px) {
  .float { display: none; }
  .window { margin-top: 36px; }
}

/* The line that closes the argument of a section, wider than a card and
   quieter than a heading. */
.band {
  margin-top: 34px; padding: 22px 26px; border-radius: 16px;
  border: 1px solid rgba(255,138,30,.22);
  background: linear-gradient(100deg, rgba(255,138,30,.09), rgba(255,138,30,.02));
  text-align: center;
}
.band p { color: var(--t2); font-size: 15.5px; }
.band b { color: #fff; font-weight: 650; }
.sstep code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.07); color: #ffd9ad;
}

/* ── the walk-through ─────────────────────────────────────────────────────
   One screen stays on the right while its paragraph goes past on the left.
   The image does not animate on its own: which one is on top is decided by
   where the reader is, which is the only honest trigger for it. */
.scrolly { padding: 40px 0 110px; }
/* The screen is the argument in this section, so it gets the room: a wider
   container than the rest of the page and the bigger half of it. */
.scrolly .wrap { max-width: 1260px; }
/* The media column has to be as tall as the column of text beside it, or the
   sticky frame inside it has nothing to be sticky WITHIN and scrolls away on
   the first paragraph. That is what `align-items: start` did here. */
.scrolly-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: stretch; }
.scrolly-steps { display: grid; gap: 0; }
.sstep {
  padding: 26vh 0; max-width: 46ch;
  opacity: .34; filter: blur(.4px);
  transition: opacity .45s var(--ease), filter .45s var(--ease), transform .45s var(--ease);
}
.sstep.on { opacity: 1; filter: none; }
.sstep h3 { font-size: clamp(22px, 2.5vw, 30px); margin: 14px 0 12px; }
.sstep p { color: var(--t2); font-size: 15px; }
.sstep ul { list-style: none; display: grid; gap: 9px; margin-top: 20px; }
.sstep li { position: relative; padding-left: 26px; color: #d8d8d8; font-size: 14px; }
.sstep li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--acc); font-weight: 700; }
.sstep li b { color: #fff; font-weight: 620; }

.scrolly-media { position: relative; height: 100%; }
.sticky-window {
  position: sticky; top: calc(var(--nav-h) + 40px); margin: 0;
  transform: perspective(1800px) rotateX(0) rotateY(var(--ry, 0deg)) rotateX(var(--rxp, 0deg));
  transition: transform .4s var(--ease);
}
/* A fixed box every screen is shown inside, so a cross-fade between a wide
   screenshot and a tall one never resizes the frame mid-scroll. */
.window-stack { position: relative; aspect-ratio: 1440 / 820; overflow: hidden; }
.window-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: 0; transform: scale(1.015);
  transition: opacity .55s var(--ease), transform .7s var(--ease);
}
.window-stack img.on { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .scrolly-grid { grid-template-columns: 1fr; gap: 0; }
  .scrolly-media { order: -1; position: sticky; top: calc(var(--nav-h) + 8px); z-index: 2; padding-bottom: 14px;
    background: linear-gradient(180deg, #000 72%, transparent); }
  .sticky-window { position: relative; top: 0; max-height: 46vh; overflow: hidden; }
  .sstep { padding: 12vh 0; opacity: 1; filter: none; }
}

/* ── marquee ──────────────────────────────────────────────────────────────*/
.marquee {
  position: relative; overflow: hidden; padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; gap: 10px; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee .chip { font-size: 12.5px; padding: 7px 14px; white-space: nowrap; }

/* ── stats ────────────────────────────────────────────────────────────────*/
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--b);
  border: 1px solid var(--b); border-radius: 18px; overflow: hidden; }
.stat { padding: 26px 22px; background: rgba(10,10,10,.6); transition: background-color .3s; }
.stat:hover { background: rgba(255,255,255,.04); }
.stat b { display: block; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.03em; }
.stat span { color: var(--t3); font-size: 13px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ── cards ────────────────────────────────────────────────────────────────*/
.grid { display: grid; gap: 16px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid.c3 { grid-template-columns: 1fr; } .grid.c2 { grid-template-columns: 1fr; } }

.card {
  position: relative; padding: 26px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--b); background: var(--sur);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-4px); border-color: var(--b2); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
/* A light that follows the pointer across the card (landing.js sets --mx/--my). */
.card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,138,30,.12), transparent 60%);
}
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--t2); font-size: 14px; }
.ico {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: rgba(255,138,30,.1); border: 1px solid rgba(255,138,30,.22); color: var(--acc2);
}
.card:hover .ico { animation: nudge .5s var(--spring); }
@keyframes nudge { 50% { transform: translateY(-4px) rotate(-6deg); } }

/* ── steps ────────────────────────────────────────────────────────────────*/
.steps { display: grid; gap: 22px; position: relative; }
.steps::before {
  content: ''; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px;
  background: rgba(255,255,255,.07);
}
/* The line fills as the section scrolls past (landing.js sets --fill). */
.steps::after {
  content: ''; position: absolute; left: 21px; top: 10px; width: 2px;
  height: calc((100% - 20px) * var(--fill, 0));
  background: linear-gradient(180deg, var(--acc), var(--acc2));
  box-shadow: 0 0 14px rgba(255,138,30,.5);
  transition: height .2s linear;
}
.step { display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start; position: relative; z-index: 1; }
.step-n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; background: #0c0c0c; border: 1px solid var(--b2);
  transition: border-color .3s, color .3s, box-shadow .3s, transform .3s var(--spring);
}
.step.on .step-n { border-color: rgba(255,138,30,.6); color: #ffd9ad; box-shadow: 0 0 22px rgba(255,138,30,.25); transform: scale(1.06); }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--t2); font-size: 14.5px; max-width: 62ch; }

/* ── pricing ──────────────────────────────────────────────────────────────*/
.toggle {
  display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; margin: 0 auto 30px;
  background: rgba(255,255,255,.05); border: 1px solid var(--b);
}
.toggle button {
  height: 36px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--t2); font: inherit; font-weight: 620; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s, background-color .25s var(--ease);
}
.toggle button.on { background: #fff; color: #111; }
.toggle .save { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(126,226,160,.16); color: var(--ok); }
.toggle button.on .save { background: #111; color: var(--ok); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px;
  border-radius: 20px; border: 1px solid var(--b2); background: rgba(255,255,255,.028); text-align: left;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.plan:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.28); box-shadow: 0 26px 64px rgba(0,0,0,.5); }
.plan.featured { border-color: rgba(255,138,30,.45); background: rgba(255,138,30,.045); }
.plan.featured::after {
  content: ''; position: absolute; inset: -1px; border-radius: 20px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,138,30,.45), transparent 42%, transparent 60%, rgba(255,190,105,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
  animation: breathe 5s ease-in-out infinite;
}
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-name { font-size: 17px; font-weight: 680; letter-spacing: -0.01em; }
.badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #fff; color: #111; }
.price { font-size: 38px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.price .per { font-size: 14px; font-weight: 500; color: var(--t2); letter-spacing: 0; }
.price-block.swap { animation: swap .34s var(--ease) both; }
@keyframes swap { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.price-sub { color: var(--t2); font-size: 12.5px; margin-top: 5px; min-height: 19px; }
.price-sub s { color: var(--t3); }
.plan .tagline { color: var(--t2); font-size: 13.5px; }
.feats { list-style: none; display: grid; gap: 8px; flex: 1; align-content: start; color: #dcdcdc; font-size: 13.5px; }
.feats li { position: relative; padding-left: 25px; }
.feats li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; }
.plan .btn { width: 100%; margin-top: 4px; }

/* ── faq ──────────────────────────────────────────────────────────────────*/
.faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.q {
  border-radius: 14px; border: 1px solid var(--b); background: var(--sur); overflow: hidden;
  transition: border-color .25s, background-color .25s;
}
.q.open { border-color: var(--b2); background: rgba(255,255,255,.055); }
.q button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; background: none; border: 0; color: #fff; font: inherit;
  font-size: 15.5px; font-weight: 620; text-align: left; cursor: pointer;
}
.q .sign { flex: none; width: 22px; height: 22px; position: relative; opacity: .6; transition: opacity .2s; }
.q button:hover .sign { opacity: 1; }
.q .sign::before, .q .sign::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform .3s var(--spring), opacity .25s;
}
.q .sign::before { width: 12px; height: 1.8px; }
.q .sign::after { width: 1.8px; height: 12px; }
.q.open .sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.q .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.q.open .a { grid-template-rows: 1fr; }
.q .a > div { overflow: hidden; }
.q .a p { padding: 0 20px 20px; color: var(--t2); font-size: 14.5px; max-width: 72ch; }

/* ── closing cta ──────────────────────────────────────────────────────────*/
.cta {
  position: relative; text-align: center; padding: 86px 28px; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--b2);
  background: radial-gradient(120% 140% at 50% 0%, rgba(255,138,30,.16), rgba(255,138,30,.02) 46%, rgba(10,10,10,.6) 100%);
}
.cta::before {
  content: ''; position: absolute; inset: -40% -10% auto; height: 70%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,160,55,.2), transparent 70%);
  animation: drift 14s ease-in-out infinite; pointer-events: none;
}
@keyframes drift {
  0%, 100% { transform: translate3d(-6%, 0, 0) scale(1); }
  50%      { transform: translate3d(6%, 6%, 0) scale(1.12); }
}
.cta h2 { max-width: 18ch; margin: 0 auto 16px; }
.cta .lead { max-width: 54ch; margin: 0 auto; }
.cta .hero-cta { margin-top: 30px; }

/* ── footer ───────────────────────────────────────────────────────────────*/
footer { padding: 56px 0 70px; border-top: 1px solid rgba(255,255,255,.07); margin-top: 90px; }
.foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a, .foot span { color: var(--t3); font-size: 13px; transition: color .2s; }
.foot a:hover { color: #fff; }

/* ── the reveal ───────────────────────────────────────────────────────────
   Added by landing.js only when it can also take it away again, so a page
   with no JS never hides anything. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms);
}

/* ── the newer motion ─────────────────────────────────────────────────────
   Three things the older part of this page did not have: a reveal that comes
   out of a blur rather than only out of a translate, buttons that lean towards
   the pointer, and a light under the hero that follows it. All three are
   pointer- and motion-gated: none of them exists on a phone or with reduced
   motion, where they would be noise. */
.js .reveal.blur { filter: blur(10px); }
.js .reveal.blur.in { filter: none; transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms), filter .8s var(--ease) var(--d, 0ms); }

/* A button that leans the few pixels towards the pointer that make it feel
   picked up rather than clicked at. JS sets --mx/--my in pixels. */
.magnet { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); }
.magnet:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(.985); }

/* The hero's light. One fixed layer under everything, moved by the pointer at
   a fraction of its speed so it trails rather than tracks. */
.spotlight {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity .6s ease;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 30%), rgba(255,138,30,.09), transparent 70%);
}
.spotlight.on { opacity: 1; }

/* Scroll-driven where the browser has it: the hero screenshot keeps drifting
   up as the page moves, with no scroll listener involved at all. Browsers
   without it simply do not get the drift. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    #hero-shot { animation: drift-up linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
    @keyframes drift-up {
      from { transform: perspective(1800px) rotateX(7deg) translateY(14px); }
      to   { transform: perspective(1800px) rotateX(0deg) translateY(-18px); }
    }
    .stat b { animation: pop linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    @keyframes pop { from { opacity: .25; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  }
}

/* The shine that crosses a screenshot the first time it arrives. */
.window-stack::after, .shot-wide::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 32%, rgba(255,255,255,.12) 46%, transparent 60%);
  background-size: 260% 100%;
}
.window.lit .window-stack::after, .shot-wide.lit::after { animation: pass 1.15s var(--ease) both; }
@keyframes pass {
  from { opacity: .9; background-position: 170% 0; }
  to   { opacity: 0; background-position: -40% 0; }
}

/* ── phones ───────────────────────────────────────────────────────────────
   The bar is three things wide on a 390px screen, so the brand stops wrapping
   and the eyebrow stops being wider than the column it sits in. */
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .sec { padding: 76px 0; }
  .brand span { white-space: nowrap; font-size: 14px; }
  .nav-actions { gap: 6px; }
  .btn.sm { padding: 0 14px; }
  .eyebrow { font-size: 10.5px; letter-spacing: .1em; }
  .hero { padding-top: calc(var(--nav-h) + 56px); }
  .hero .lead { font-size: 15px; }
  .hero-cta .btn { width: 100%; }
  .window { margin-top: 40px; border-radius: 14px; }
  .cta { padding: 60px 20px; border-radius: 20px; }
  .foot { justify-content: center; text-align: center; }
}
@media (max-width: 400px) {
  .nav-actions .btn.plain { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal, .js .reveal.blur { opacity: 1; transform: none; filter: none; }
  .window, .sticky-window { transform: none; }
  .float, .dotlive { animation: none; }
  .sstep { opacity: 1; filter: none; }
  .spotlight { display: none; }
}