/* Home page only. Loaded on / on top of site.css and v2.css. */

/* ---------- Hero ---------- */

.v2-hero > .wrap { padding-top: clamp(56px, 8vw, 96px); text-align: center; position: relative; }
.v2-hero > .wrap::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--panel));
}
.v2-hero__copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 760px; margin-inline: auto; }
.v2-hero__copy .v2-sub { font-size: clamp(16px, 1.4vw, 19px); }
.v2-hero__copy .actions { justify-content: center; margin-top: 8px; }
.v2-hero__stage { position: relative; margin-top: clamp(40px, 6vw, 72px); padding: 0 clamp(0px, 5vw, 72px); }
.v2-hero__shot { max-height: clamp(240px, 40vw, 580px); overflow: hidden; border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.v2-hero__phone {
  position: absolute; left: clamp(0px, 2vw, 24px); bottom: -20px; z-index: 2;
  --phone-w: clamp(120px, 15vw, 200px);
  box-shadow: var(--shadow-3), inset 0 0 0 1.5px #2a2a2a;
}
.v2-hero__phone img { object-position: top; }
@media (max-width: 699px) { .v2-hero__phone { display: none; } }
.v2-hero { z-index: 2; }

/* ---------- Logo strip ---------- */

.v2-logos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-inline: calc(var(--gutter) * -1); background: var(--line);
}
@media (min-width: 700px) { .v2-logos { grid-template-columns: repeat(4, 1fr); } }
.v2-logos li { display: grid; place-items: center; padding: 30px 16px; background: var(--paper); }
.v2-dark .v2-logos li { background: var(--dark); }
.v2-logo { font: 600 17px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink-2); white-space: nowrap; }
.v2-logos--4 { border-top: 1px solid var(--line); }

/* ---------- Product tour with a sticky sub-nav ---------- */

/* The sub-nav sticks inside .v2-tour__grid, so it pins under the header for the
   length of the tour and scrolls away with the tour's last block. */
.v2-tour__grid { margin-inline: calc(var(--gutter) * -1); border-top: 1px solid var(--line); }
.v2-subnav {
  position: sticky; top: 69px; z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.v2-subnav ul { display: flex; justify-content: center; gap: clamp(4px, 2vw, 28px); overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); }
.v2-subnav ul::-webkit-scrollbar { display: none; }
.v2-subnav a {
  display: flex; align-items: center; gap: 8px; padding: 16px 6px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.v2-subnav svg { width: 16px; height: 16px; }
.v2-subnav a:hover { color: var(--ink); }
.v2-subnav a.is-active { color: var(--ink); border-color: var(--ink); }
.v2-block { scroll-margin-top: 120px; }

.v2-block + .v2-block { border-top: 1px solid var(--line); }
.v2-block__head { padding: clamp(48px, 6vw, 88px) var(--gutter); }
/* ---------- Dark dashboard split ---------- */

.v2-signals.wrap { padding-inline: 0; display: grid; }
@media (min-width: 900px) { .v2-signals.wrap { grid-template-columns: 1fr 1fr; } }
.v2-signals__copy { padding: clamp(56px, 7vw, 96px) var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.v2-ladder { width: 100%; margin-top: 32px; }
.v2-ladder li { border-top: 1px solid var(--line); }
.v2-ladder button {
  position: relative; display: block; width: 100%; padding: 20px 0; text-align: left;
  background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer;
  transition: color 150ms var(--ease);
}
.v2-ladder button:hover, .v2-ladder button[aria-pressed="true"] { color: #fff; }
.v2-ladder button::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 72px; height: 1px; background: #fff;
  transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--ease);
}
.v2-ladder button[aria-pressed="true"]::before { transform: scaleX(1); }
.v2-ladder button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.v2-ladder b { display: block; font: 500 17px/1.3 var(--display); }
.v2-ladder span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 32em; }
.v2-signals__art { position: relative; overflow: hidden; min-height: 420px; display: grid; align-items: center; border-top: 1px solid var(--line); color: rgba(255, 255, 255, 0.14); }
@media (min-width: 900px) { .v2-signals__art { border-top: 0; border-left: 1px solid var(--line); min-height: 100%; } }
.v2-grid-art { position: absolute; left: 50%; top: 50%; width: 140%; height: 140%; transform: translate(-50%, -50%); }
/* The dashboard sits above the grid and runs off the right edge */
.v2-signals__shot { position: relative; z-index: 1; width: 150%; margin: 48px 0 48px clamp(24px, 4vw, 56px); }
.v2-signals__slides { display: grid; }
.v2-signals__slides > div { grid-area: 1 / 1; opacity: 0; transition: opacity 350ms var(--ease); }
.v2-signals__slides > .is-on { opacity: 1; }
.v2-signals__slides img { display: block; width: 100%; height: auto; }

/* ---------- Works with ---------- */

.v2-devices > .wrap {
  position: relative; overflow: hidden; display: grid; padding-block: clamp(40px, 5vw, 64px);
  background-image: linear-gradient(var(--tick) 1px, transparent 1px), linear-gradient(90deg, var(--tick) 1px, transparent 1px);
  background-size: 80px 80px;
}
@media (min-width: 900px) { .v2-devices > .wrap { grid-template-columns: 1fr 1fr; } }
.v2-devices__card {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding: clamp(32px, 4vw, 56px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--dark);
}
.v2-iso { position: absolute; right: 0; top: 0; height: 100%; width: 55%; color: rgba(255, 255, 255, 0.28); }
@media (max-width: 899px) { .v2-iso { display: none; } }

/* ---------- Scale ---------- */

.v2-scale > .wrap { position: relative; overflow: hidden; }
.v2-scale .v2-head { position: relative; z-index: 1; }
.v2-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); margin: 0 calc(var(--gutter) * -1); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .v2-stats { grid-template-columns: repeat(4, 1fr); } }
.v2-stats div { padding: 28px var(--gutter) 120px; }
.v2-stats div:nth-child(2n) { border-left: 1px solid var(--line); }
@media (min-width: 900px) { .v2-stats div + div { border-left: 1px solid var(--line); } }
.v2-stats dt { font: 500 clamp(32px, 3.8vw, 52px)/1 var(--display); letter-spacing: -0.04em; }
.v2-stats dd { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 16em; }
.v2-curve { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; color: var(--ink); opacity: 0.55; }

/* ---------- Stories ---------- */

.v2-stories .v2-logos { margin-top: 0; }
.v2-story { display: grid; margin-inline: calc(var(--gutter) * -1); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .v2-story { grid-template-columns: 1fr 1fr; } }
.v2-story__copy { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: clamp(48px, 6vw, 96px) var(--gutter); }
.v2-story__photo {
  min-height: 300px; display: grid; place-items: center;
  background: linear-gradient(135deg, #d4d4d8, #a1a1aa); color: #fff;
  font: 600 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Changelog ---------- */

.v2-log { display: grid; margin-inline: calc(var(--gutter) * -1); border-top: 1px solid var(--line); }
@media (min-width: 640px) { .v2-log { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .v2-log { grid-template-columns: repeat(4, 1fr); } }
.v2-log li { padding: 24px var(--gutter) 128px; }
@media (min-width: 640px) { .v2-log li:nth-child(2n) { border-left: 1px solid var(--line); } }
@media (min-width: 1000px) { .v2-log li + li { border-left: 1px solid var(--line); } }
.v2-log time { font-size: 12px; color: var(--muted); }
.v2-log h3 { margin-top: 14px; font: 600 17px/1.3 var(--display); letter-spacing: -0.015em; }
.v2-log p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- Newsletter ---------- */

.v2-news > .wrap { padding-block: 40px; }
.v2-news__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.v2-news .v2-state { font-size: 20px; }
.v2-news__form { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-news__form input {
  min-height: 40px; padding: 0 14px; width: min(100%, 280px);
  border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px;
}
.v2-news__form input:focus { outline: none; border-color: var(--ink); }