/*
 * The product page. Everything that shows the product is a kit scene; this file only
 * lays the page out around them. Tokens come from site.css.
 *
 * A duo scene (computer + phone) needs a box at least 700 px wide to sit side by side,
 * so text sits beside a scene only from 1180 px up, and above it below that.
 */

/* ------------------------------------------------------------- hero --- */

.hero { padding-block: clamp(28px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.feat {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 48px); align-items: center;
}
@media (min-width: 1180px) {
  .feat { grid-template-columns: minmax(300px, 1fr) minmax(700px, 1.9fr); gap: 56px; }
  .feat.flip { grid-template-columns: minmax(700px, 1.9fr) minmax(300px, 1fr); }
  .feat.flip > .feat-copy { order: 2; }
}

.hero-copy { max-width: 40rem; }
.hero h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.1rem); line-height: 1.04; letter-spacing: -.03em; }
@media (min-width: 900px) { .hero h1 span { display: block; } }
.hero .lead { max-width: 40ch; }
.hero .cluster { margin-top: 28px; }
@media (max-width: 479px) { .hero .cluster > .btn { flex: 1 1 100%; } }
.hero .needs { margin-top: 20px; max-width: 46ch; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-copy { margin-top: 20px; }
.hero .pk-scene { margin-top: clamp(40px, 6vw, 56px); }
/* Wide: the headline across the top, then the words beside the scene. */
@media (min-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(300px, 1fr) minmax(700px, 1.9fr); column-gap: 56px; align-items: start; }
  .hero h1 { grid-column: 1 / -1; }
  .hero-copy { margin-top: 52px; }
  .hero .pk-scene { margin-top: 40px; }
}

/* The third link beside the two buttons: plain, but the same height to tap. */
.gh {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px;
  color: var(--text); text-decoration: none; font-weight: 500;
}
.gh svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.gh:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* The hero copy settles in once, with the app's Appear motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero-copy > * { animation: rise var(--t-slow) var(--ease-settle) both; }
  .hero-copy > :nth-child(1) { animation-delay: calc(var(--stagger) * 1); }
  .hero-copy > :nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
  .hero-copy > :nth-child(3) { animation-delay: calc(var(--stagger) * 3); }
}
@keyframes rise { from { opacity: 0; transform: translateY(var(--travel)); } }

/* ---------------------------------------------------------- sections --- */

.head { max-width: 46rem; }
.head .lead { margin-top: 16px; max-width: 52ch; }
.head + * { margin-top: clamp(36px, 5vw, 56px); }

/* ------------------------------------------------------ how it works --- */

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
@media (min-width: 960px) and (max-width: 1179px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.steps li > * { grid-column: 2; }
/* The numeral in a ring, as the app's setup steps number themselves. */
.steps .n {
  grid-column: 1; grid-row: 1 / span 3;
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--edge);
  display: grid; place-items: center; font: 400 1rem/1 var(--mono); color: var(--accent);
}
.steps h3 { font-size: 1.15rem; line-height: 36px; }
.steps p { margin-top: 4px; color: var(--muted); }
.steps li > code { display: inline-block; justify-self: start; margin-top: 12px; padding: 4px 10px; font-size: .88rem; line-height: 1.5; color: var(--accent); }

/* ---------------------------------------------------------- features --- */

.feat-copy { max-width: 60ch; }
.feat-copy h3 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem); line-height: 1.15; letter-spacing: -.02em; }
.feat-copy > p { margin-top: 14px; }
.feat-copy .cmd { margin-top: 20px; }
.feat-copy .more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; }

/* Specifics under a feature: a tiny ring for a bullet, as the app marks state. */
.facts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; color: var(--muted); font-size: .96rem; line-height: 1.5; }
.facts li { position: relative; padding-left: 20px; }
.facts li::before {
  content: ""; position: absolute; left: 1px; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; border: 1.5px solid var(--accent);
}

.features > .feat, .features > .pair { margin-top: clamp(72px, 9vw, 136px); }
.features > .head + .feat { margin-top: clamp(40px, 6vw, 72px); }

/* Two phone-only scenes side by side, text above each; subgrid keeps the phones level. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(72px, 9vw, 96px) 48px; }
.pair > article { display: grid; gap: 28px; align-content: start; }
@media (min-width: 760px) {
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .pair > article { grid-row: span 2; grid-template-rows: subgrid; row-gap: 32px; }
}

/* The rest of the app, as a plain list: no icons, no cards. */
.also { margin-top: clamp(80px, 10vw, 144px); }
.also h3 { font-size: 1.25rem; }
.also ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
@media (min-width: 720px) { .also ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .also ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.also li { border-top: 1px solid var(--edge); padding: 16px 0 20px; color: var(--muted); font-size: .96rem; line-height: 1.5; }
.also li b { display: block; color: var(--text); font-weight: 600; font-size: 1rem; margin-bottom: 4px; }

/* ----------------------------------------------------------- privacy --- */

.priv { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); }
@media (min-width: 1024px) { .priv { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.priv .head + * { margin-top: 0; }
.priv .note { margin-top: 28px; max-width: 52ch; }
.priv .links { margin-top: 16px; }
.priv .links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) { .priv-side { position: sticky; top: calc(var(--header-h) + 32px); } }

.plain { margin: 0; }
.plain > div { border-top: 1px solid var(--edge); padding-block: 18px 20px; display: grid; gap: 6px; }
.plain > div:last-child { border-bottom: 1px solid var(--edge); }
@media (min-width: 640px) { .plain > div { grid-template-columns: 13rem minmax(0, 1fr); gap: 24px; } }
.plain dt { font-weight: 600; line-height: 1.4; }
.plain dd { margin: 0; color: var(--muted); line-height: 1.55; }

/* ----------------------------------------------------------- install --- */

.get { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 900px) { .get { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.get h3 { font-size: 1.3rem; }
.get p { margin-top: 12px; color: var(--muted); max-width: 52ch; }
.get .cluster { margin-top: 20px; }
.get .cluster a:not(.btn) { display: inline-flex; align-items: center; min-height: 48px; }
.get pre { margin-top: 18px; font-size: .88rem; }
.get .note { margin-top: 16px; font-size: .95rem; }

.updates { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 900px) { .updates { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 56px; } }

/*
 * Short inline code in the page's own text never splits (a broken "--prebuilt" would read
 * as a stray dash) and never stretches its line. Scoped so the mock-ups keep the kit's styles.
 */
:is(.hero-copy, .head, .steps, .feat-copy, .plain, .get, .also) :is(p, li, dd) > code { white-space: nowrap; line-height: 0; }

/* Captions run one or two lines; reserving two keeps the page below from shifting as a scene plays. */
main .pk-cap { min-height: 2.9em; }

/* After the inline-code rule above on purpose: a step's command is its own line, not code
   inside a sentence, and needs its line height back or its background collapses. */
.steps li > code { line-height: 1.5; }

/* ------------------------------------------------- the finished page --- */
/*
 * Below the opening shot the page keeps its quiet: larger type, more room, and one device
 * carried down from the film - the small mono label over each part, named after the part
 * of the app it shows (the same labels the opening's captions used).
 */

.kick {
  margin: 0 0 14px;
  font: 500 .74rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}

/* More room between parts, and no rules: the space does the separating. */
main > .section { padding-block: clamp(88px, 11vw, 168px); }
main > .section + .section { border-top: 0; }

.head { max-width: 50rem; }
.head h2 {
  font-size: clamp(2.3rem, 1.4rem + 2.9vw, 3.7rem); line-height: 1.02; letter-spacing: -.034em; font-weight: 600;
}
.head .lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); line-height: 1.55; max-width: 48ch; margin-top: 20px; }
.head + * { margin-top: clamp(48px, 6vw, 80px); }

.feat-copy h3 { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.55rem); line-height: 1.08; letter-spacing: -.028em; font-weight: 600; }
.feat-copy > p { font-size: 1.06rem; line-height: 1.65; color: var(--muted); margin-top: 18px; }
.feat-copy > .kick + h3 { margin-top: 0; }
.features > .feat, .features > .pair { margin-top: clamp(104px, 12vw, 184px); }
.pair .feat-copy h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

.steps h3 { font-size: 1.2rem; }
.also { margin-top: clamp(104px, 12vw, 184px); }
.also h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -.02em; }

/* The film: one frame, dark in any theme while it loads, with one big button on the poster
   (kit.js adds it; without JavaScript the browser's own controls are there instead). */
.film { margin: 0; }
.film-box {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #07100F; border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow);
}
.film video { display: block; width: 100%; height: 100%; object-fit: cover; background: #07100F; }
.film-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: inherit; background: transparent; color: #F2F7F6; cursor: pointer;
}
.film-play[hidden], .film-started .film-play { display: none; }
.film-ring {
  display: grid; place-items: center; width: clamp(68px, 8vw, 100px); aspect-ratio: 1; border-radius: 50%;
  background: rgb(7 16 15 / .58); box-shadow: inset 0 0 0 2px #3FD4C0, 0 8px 28px rgb(0 0 0 / .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform var(--t-enter) var(--ease-settle), background-color var(--t-fast) var(--ease-standard);
}
.film-ring svg { width: 36%; margin-left: 6%; fill: currentColor; }
.film-play:hover .film-ring { background: rgb(7 16 15 / .74); }
@media (prefers-reduced-motion: no-preference) { .film-play:hover .film-ring { transform: scale(1.05); } }
.film-play:focus-visible { outline: none; }
.film-play:focus-visible .film-ring { outline: 3px solid var(--focus); outline-offset: 4px; }
.film-len {
  position: absolute; left: clamp(10px, 1.6vw, 18px); bottom: clamp(10px, 1.6vw, 18px);
  padding: 7px 11px; border-radius: 999px; background: rgb(7 16 15 / .62);
  font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.film figcaption { margin-top: 14px; max-width: 72ch; }

/* The close: the phone under the opening's light, the words beside it, dark in any theme. */
.closing {
  position: relative; overflow: hidden; isolation: isolate;
  background: #030807; color: #E8F0EE;
  padding-block: clamp(120px, 16vw, 220px);
}
.closing-img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  opacity: .92;
}
@media (min-width: 900px) {
  .closing-img { object-position: 20% 45%; left: 18%; width: 82%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
}
.closing::after {
  /* The words need the dark side of the frame. */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #030807 0%, rgb(3 8 7 / .85) 38%, rgb(3 8 7 / 0) 70%);
}
@media (max-width: 899px) {
  .closing::after { background: linear-gradient(0deg, #030807 20%, rgb(3 8 7 / .6) 60%, rgb(3 8 7 / .2)); }
  .closing { padding-top: clamp(280px, 70vw, 420px); }
}
.closing-in { position: relative; }
.closing h2 {
  max-width: 14ch;
  font-size: clamp(2.3rem, 1.4rem + 3vw, 3.9rem); line-height: 1.02; letter-spacing: -.034em; font-weight: 600; color: #F2F7F6;
}
.closing .lead { max-width: 40ch; margin-top: 20px; color: #A9BAB6; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.closing .cluster { margin-top: 32px; }
.closing .kick { color: #3FD4C0; }
.closing .btn:not(.btn-primary) { color: #E8F0EE; border-color: rgb(232 240 238 / .28); background: rgb(255 255 255 / .03); }
.closing .btn:not(.btn-primary):hover { background: rgb(255 255 255 / .08); }
.closing + * { margin-top: 0; }

/* Section headings rise into place as they come up the screen, tied to the scroll rather
   than a timer: only the headings, so the page reads at once and only its structure moves. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section .head h2, .closing h2 {
      animation: head-up linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }
  }
}
@keyframes head-up { from { opacity: .25; transform: translateY(16px); } }