/* The shared shell for the marketing pages: tokens, the locked nav, the footer,
   the eyebrow and the primary button. Everything a second page needed a copy of.
   Linked rather than inlined -- V2_CSP allows same-origin stylesheets, so this
   costs one cached request and removes the drift that had already started when
   /pricing was written by copying v2.html.
   The homepage itself still carries its own inline copy. It is 2,600 lines and
   was verified in that state, so cutting it over is a separate job with its own
   verification; until then the rule is: change the nav here, change it there. */

html { scroll-padding-top: 111px; }  /* the 88px locked strip + 23 air, for in-page jumps */
html, body { margin: 0; padding: 0; background: #08090A; }
*, *::before, *::after { box-sizing: border-box; }

.v2 {
  --ground: #08090A;
  --text: #F7F8F8;
  --muted: #8A8F98;
  --soft: #787E88;
  /* Channel tokens, same as the homepage: every hairline and wash is an alpha
     of one of these two, so a theme is a swap of two triples. */
  --sheen: 255,255,255;
  --shade: 0,0,0;
  --line: rgba(var(--sheen),.08);
  background: var(--ground);
  color: var(--text);
  /* Inter VARIABLE — 510 is not a static cut, and a normal Inter rounds it to
     500 and loses the weight the homepage is set in. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* Selectors below are scoped with .v2 deliberately. The homepage carries
   `.v2 * { margin:0; padding:0 }` in its own inline block, which sits AFTER
   this file in the cascade -- at equal specificity that reset wins and
   collapses the nav's padding to zero. (0,2,0) here beats (0,1,0) there
   regardless of source order. */
.v2 .v2-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  /* 88, was 73. At 73 the wordmark sat 26px from the top edge and read as
     pinned to it rather than set inside a strip. 88 gives it 33px above and
     below, which is what makes the bar feel like a header instead of an edge.
     EVERY page compensates for this in its own hero padding-top, because the
     nav is fixed and occupies no flow — change this and all three must move.
     scroll-padding-top below is keyed to it too. */
  display: flex; align-items: center; height: 88px;
  padding: 0 max(40px, calc((100% - 1200px) / 2));
  background: rgba(8,9,10,.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.v2 .v2-nav a {  font-size: 16px; font-weight: 400; color: var(--text); text-decoration: none; transition: color .18s ease; }
.v2 .v2-nav a.v2-brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: -.02em;
}
.v2 .v2-nav a.v2-brand svg {  display: block; }
.v2 .v2-nav-right {  display: flex; align-items: center; gap: 26px; margin-left: auto; }
.v2 .v2-nav-right a {  color: rgba(247,248,248,.82); }
.v2 .v2-nav-right a:hover, .v2 .v2-nav-right a[aria-current="page"] {  color: var(--text); }

.v2 .v2-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

.v2 .v2-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; border-radius: 11px; text-decoration: none;
  background: var(--text); color: #08090A;
  font-size: 15px; font-weight: 540; font-variation-settings: "wght" 540;
  letter-spacing: -.01em; transition: background .18s ease, transform .06s ease;
}
.v2 .v2-cta:hover {  background: #fff; }
.v2 .v2-cta:active {  transform: translateY(1px); }
.v2 .v2-cta span {  color: rgba(8,9,10,.55); }

.v2 .v2-foot {  padding: 30px 40px 40px; margin-top: 96px; border-top: 1px solid var(--line); }
.v2 .v2-foot-inner {  max-width: 1200px; margin-inline: auto; display: flex; align-items: center; gap: 20px; }
.v2 .v2-foot .c {  font-size: 13px; color: var(--muted); }
.v2 .v2-foot-links {  display: flex; gap: 22px; margin-left: auto; }
.v2 .v2-foot-links a {  font-size: 13px; color: var(--muted); text-decoration: none; }
.v2 .v2-foot-links a:hover {  color: var(--text); }

@media (max-width: 860px) {
  .v2 .v2-nav {  padding: 0 22px; }
  .v2 .v2-nav-right {  gap: 16px; }
  .v2 .v2-nav a {  font-size: 15px; }
  .v2 .v2-foot {  padding: 26px 22px 34px; }
  .v2 .v2-foot-inner {  flex-direction: column; align-items: flex-start; gap: 14px; }
  .v2 .v2-foot-links {  margin-left: 0; }
}

/* Four links beside the wordmark need about 224px and had 217px at 375px, so
   the row wrapped onto a second line and the first link landed exactly where
   the wordmark ends — they touched. 375px is the iPhone SE and mini and a lot
   of Androids, so this was a broken header for a real slice of traffic.
   Tightened rather than dropping a link or the wordmark: both were on the
   table and both cost more than a point of type does.

   MUST STAY BELOW the 860px block. These selectors are identical to the ones
   above — same (0,2,1) specificity — so source order is the only thing making
   them win, and a narrower query placed first would silently lose to the wider
   one at every width it was written for. */
@media (max-width: 430px) {
  .v2 .v2-nav-right {  gap: 13px; }
  .v2 .v2-nav a {  font-size: 14px; }
  .v2 .v2-nav a.v2-brand {  font-size: 16px; gap: 7px; }
}

/* Below 375 the type alone cannot buy enough room: measured, the four links
   need 207px, and a 360px phone leaves 209px beside the full wordmark — two
   pixels, which reads as a collision. A 320px phone wrapped outright and
   pushed the document one pixel wider than the viewport.

   So the wordmark drops to the mark alone here, freeing ~88px. The mark is
   still the home link and still the brand; an icon-only logo at this width is
   what every phone header does. Dropping a nav link was the alternative and
   costs a destination, which is worse than costing a word. */
@media (max-width: 374px) {
  .v2 .v2-nav a.v2-brand span {  display: none; }
  .v2 .v2-nav-right {  gap: 15px; }
}

/* ── Motion. Two rules only, and both are opt-in per element.

   v2-enter runs once on load, for what is already on screen.
   v2-reveal is driven by the element's own position in the viewport via
   animation-timeline: view() -- no script, and no IntersectionObserver to add
   one for. It is wrapped in @supports on purpose: where scroll-driven
   animation is not implemented the whole block is skipped and the content is
   simply there, which is the correct fallback rather than a hidden element
   waiting for an animation that will never run.

   Deliberately small -- 10px and a fade. Anything larger on a page this long
   reads as a slideshow, and the point is that the reader should not notice it
   happening at all. */
@keyframes v2-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .v2 .v2-enter { animation: v2-rise 1.3s cubic-bezier(.16,1,.3,1) both; }
  .v2 .v2-enter-2 { animation-delay: .10s; }
  .v2 .v2-enter-3 { animation-delay: .18s; }

  @supports (animation-timeline: view()) {
    .v2 .v2-reveal {
      animation: v2-rise 1s linear both;
      animation-timeline: view();
      /* Finished a quarter of the way up, so it is settled by the time it is
         being read rather than still moving under the eye. */
      animation-range: entry 5% cover 24%;
      animation-delay: 0s;
    }
  }
}

/* Interaction, at the same volume: a border that warms rather than a lift. */
.v2 .v2-hoverable { transition: border-color .22s ease, background-color .22s ease; }
.v2 .v2-hoverable:hover { border-color: rgba(var(--sheen),.17); background-color: rgba(var(--sheen),.03); }

/* ── THE SECTION HEADER, one system for all five.

   Taken from the reference, which runs the same header on every section and
   lets only the product visual differ. We had been doing the opposite: five
   bespoke headers, each stacked left with the right half of a 1200px column
   empty. Two columns fills that half, and it is the reason their pages read as
   calm while ours read as a list.

   No eyebrow any more. The numbered marker replaces it and does more work: it
   tells you where you are in a sequence of five, which a word on its own never
   did. No arrow on it -- the reference's marker is a link to a sub-page and
   ours has nowhere to go, and an arrow that leads nowhere is a small lie.

   The descriptions were the other half of the problem. Theirs run about
   nineteen words; ours ran to fifty-five. Every one below has been cut. The
   detail did not disappear, it moved into the panel underneath, which is the
   thing actually making the argument. ─────────────────────────────────────── */
.v2 .v2-sec-head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 24px 80px; align-items: start;
  margin-bottom: 96px;              /* the reference leaves a lot of air here */
}
.v2-sec-head h2 { margin: 0; }
.v2 .v2-sec-desc {
  margin: 0; max-width: 560px;
  font-size: 20px; line-height: 31px; letter-spacing: -.012em; color: var(--muted);
}
.v2-sec-desc b { color: var(--text); font-weight: 500; font-variation-settings: "wght" 500; }
.v2 .v2-sec-num {
  margin-top: 30px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
}
.v2-sec-num b { margin-left: 15px; color: var(--text); font-weight: 400; }

@media (max-width: 900px) {
  .v2 .v2-sec-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 52px; }
  .v2 .v2-sec-desc { font-size: 17px; line-height: 27px; }
  .v2 .v2-sec-num { margin-top: 20px; }
}

/* ── The statement between the shot and the argument.

   Lifted from the reference, where one large paragraph sits under the hero and
   sets up everything below it: the first sentence in full white, the rest
   dropping to muted in the same size and line. It reads as one thought that
   quietens rather than as a heading with a caption, and it is doing the job our
   page had nothing for -- saying what the five sections add up to BEFORE the
   reader has to infer it from five panels. */
.v2 .v2-lead { padding: 0 40px 26px; }
.v2 .v2-lead p {
  max-width: 1200px; margin-inline: auto;
  font-size: clamp(26px, 3.5vw, 46px); line-height: 1.16;
  letter-spacing: -.024em; color: var(--muted);
  font-weight: 510; font-variation-settings: "wght" 510;
}
.v2-lead b { color: var(--text); font-weight: 510; font-variation-settings: "wght" 510; }

/* ── The closer. The reference ends on a short centred statement at headline
   size and then the way in; ours had gone straight from the last panel into a
   form, so the page stopped rather than concluded. */
/* The same hairline that opens every numbered section also opens the ending,
   so the last product section has a visible end rather than dissolving into
   the closing statement. Drawn as a ::before so it can hold the 1200px column
   while the statement itself stays centred in its own narrower measure.
   No line between the statement and the form below it: those two are one
   block on purpose (see the max-width note under this rule). */
.v2 .v2-close { padding: 0 40px 0; text-align: center; }
.v2 .v2-close::before {
  content: ""; display: block;
  max-width: 1200px; margin: 0 auto 84px;
  border-top: 1px solid var(--line);
}
.v2 .v2-close h2 {
  /* Capped so the statement belongs to the form beneath it. Uncapped it ran the
     full 1360px column while the form sits in 620, so the two read as separate
     blocks that happened to share a centre line rather than as one ending. The
     <br> still decides where the line breaks; this only stops it sprawling. */
  max-width: 900px; margin: 0 auto;
  font-size: clamp(30px, 4.4vw, 56px); line-height: 1.06;
  letter-spacing: -.026em; font-weight: 510; font-variation-settings: "wght" 510;
}
.v2-close h2 span { color: var(--muted); }
@media (max-width: 900px) {
  .v2 .v2-lead { padding: 0 22px 18px; }
  /* Padding moves onto the ::before margin so the rule stays above the gap
     rather than below it, exactly as .v2-sec-inner does on the homepage. */
  .v2 .v2-close { padding: 0 22px 0; }
  .v2 .v2-close::before { margin-bottom: 76px; }
}

/* The hero lede on /why and /pricing uses the same two-tone statement as the
   homepage: opening sentence in full white, the rest muted at the same size.
   One device, three pages. */
.v2 .wy-lede, .v2 .pr-lede {
  margin: 30px 0 0; max-width: 900px;
  font-size: clamp(21px, 2.4vw, 30px); line-height: 1.32;
  letter-spacing: -.018em; color: var(--muted);
  font-weight: 510; font-variation-settings: "wght" 510;
}
.v2 .wy-lede b, .v2 .pr-lede b {
  color: var(--text); font-weight: 510; font-variation-settings: "wght" 510;
}
@media (max-width: 900px) {
  .v2 .wy-lede, .v2 .pr-lede { font-size: 19px; line-height: 1.36; margin-top: 22px; }
}