/* landing.css — the public landing page (and the header the legal pages share with it).
 *
 * LAYOUT ONLY. Every colour, radius and button comes from `tokens.css` and the shared primitives in
 * `styles.css` (`.t-btn`, `.t-badge`, `.tartini-card`), so this page and the product can never drift
 * into two design languages. The look is the 2026-09-30 redesign — a centred hero, a proof strip, flat
 * cards with 1px borders, a white ground — with its story retold on 2026-10-09 after omni.co: the
 * product shown as it really is, in screenshots. Purple is the primary button, the focus ring and the
 * wordmark — nothing in this page's own chrome is purple by decoration; the product's purple appears
 * only inside the pictures of the product (`landing-film.js` draws its focus ring and send button).
 *
 * The provider marks in the proof strip are drawn monochrome (currentColor) on purpose.
 *
 * THE PICTURES ARE SCREENSHOTS OF THE REAL PRODUCT (Janet, 2026-10-09), not the HTML drawings of
 * 2026-09-30: the home screen in the hero, the Tracking, table and dashboard pages beside the steps.
 * Each is `width: 100%` of its frame. The film's stage is a 1440×785 canvas in the frame's own
 * pixels, scaled to the frame by `landing-film.js`, which also places its overlays — so the geometry
 * measured on a screenshot lives with the screenshots, and nothing here is wider than a phone.
 *
 * NOTHING HAS A FIXED WIDTH WIDER THAN A PHONE. Every grid track is `minmax(0, …)` and every wide
 * object is `width: 100%` of a capped container — so the page cannot grow a sideways scrollbar at any
 * width. `landing-overflow.test.js` pins that.
 */

body.landing {
  margin: 0;
  /*
   * `styles.css` sets `html, body { height: 100% }` for the app shell, which pins the body to
   * exactly the viewport. This page is a long document, not a fixed-height shell, so it takes its
   * height back — otherwise the content below the fold exists and cannot be scrolled to.
   */
  height: auto;
  min-height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Zero specificity, so every component below sets its own spacing without fighting this. */
:where(body.landing) :where(h1, h2, h3, h4, p, figure) { margin: 0; }
body.landing h1, body.landing h2, body.landing h3 { text-wrap: balance; }
html:has(body.landing) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(body.landing) { scroll-behavior: auto; } }

.lp-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
/* The workflow takes a little more room: its frame beside the steps is the page's widest picture. */
.lp-wrap--wide { max-width: 1240px; }

/* ── Header (the legal pages wear it too) ─────────────────────────────────────────────────── */
.lp-head { background: var(--background); border-bottom: 1px solid var(--border); }
.lp-head-in { height: 64px; display: flex; align-items: center; gap: 4px; }
.lp-mark { display: inline-flex; align-items: center; margin-right: auto; }
.lp-mark img, .lp-word { display: block; width: 124px; height: auto; }
.lp-nav { display: flex; gap: 2px; }

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────── */
.lp-hero { padding-top: 104px; }
.lp-hero-copy { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-eyebrow { margin: 0; }
.lp-title { margin-top: 22px; font-size: clamp(40px, 6.4vw, 64px); line-height: 1.04; font-weight: 650; letter-spacing: -0.04em; }
.lp-lede { margin-top: 22px; max-width: 36rem; font-size: 19px; line-height: 1.6; color: var(--muted-foreground); }
.lp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.lp-cta .t-btn, .lp-price-foot .t-btn { min-width: 196px; }
.lp-assure { margin-top: 14px; font-size: 13.5px; color: var(--muted-foreground); }
.lp-assure b { color: var(--foreground); font-weight: 600; }
.lp-sep { margin: 0 8px; opacity: 0.5; }
/* A sign-in brought here from an app's built-in browser (`?signin=1`), offered again in one tap. */
.lp-continue {
  box-sizing: border-box; width: 100%; max-width: 28rem; margin: 0 auto 32px; padding: 20px;
  border: 1px solid var(--border); border-radius: var(--radius-feature); background: var(--card);
  box-shadow: var(--shadow-card); text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
.lp-continue__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--foreground); }
.lp-continue__desc { margin: 0 0 4px; font-size: 15px; line-height: 22px; color: var(--muted-foreground); }
.lp-continue .t-btn { width: 100%; }

/*
 * Why a sign-in did not work. A plain block (not the `.t-alert` grid): `landing.js` writes it as one
 * text node, which a grid would put in its 0-width first track.
 */
.lp-error {
  margin-top: 18px; max-width: 32rem; padding: 12px 16px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--card);
  font-size: 14px; line-height: 20px; color: var(--foreground);
}

/* ── The product's home, in the hero ──────────────────────────────────────────────────────── */
.lp-shot { margin-top: 64px; }
.lp-home {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--background); box-shadow: var(--shadow-pop);
}
.lp-home > img { display: block; width: 100%; height: auto; }
.lp-home-stage, .lp-film-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.lp-home-type {
  position: absolute; max-height: 44px; overflow: hidden;
  font: 400 15px/22px var(--font-sans); color: var(--foreground); overflow-wrap: anywhere;
}

/* ── The proof strip ──────────────────────────────────────────────────────────────────────── */
.lp-proof {
  list-style: none; margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lp-proof li { padding: 2px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.lp-proof li + li { border-left: 1px solid var(--border); }
.lp-proof li > svg { width: 18px; height: 18px; margin-bottom: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-proof b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.lp-proof li > span { font-size: 13.5px; color: var(--muted-foreground); line-height: 1.45; }
.lp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.lp-chips svg.fill { width: 13px; height: 13px; fill: currentColor; }

a.lp-more { text-decoration: none; }
a.lp-more:hover { background: var(--border); }

/* ── Sections ─────────────────────────────────────────────────────────────────────────────── */
.lp-section { padding-top: 120px; scroll-margin-top: 16px; }
.lp-sec-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.lp-kicker { margin-bottom: 12px; font-size: 13.5px; font-weight: 500; color: var(--muted-foreground); }
.lp-sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; font-weight: 650; letter-spacing: -0.03em; }
.lp-sub { margin: 16px auto 0; max-width: 40rem; font-size: 16px; line-height: 1.65; color: var(--muted-foreground); text-wrap: balance; }
.lp-num { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border: 1px solid var(--border); border-radius: 50%; background: var(--background); font: 500 12px/1 var(--font-sans); color: var(--foreground); }

/* ── The workflow: numbered steps on the left, one frame of real screens on the right ────────── */
.lp-flow { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; align-items: start; }
.lp-flow-steps { list-style: none; margin: 0; padding: 0 0 0 40px; position: relative; }
/* The dotted thread the step numbers sit on. */
.lp-flow-steps::before { content: ""; position: absolute; left: 12px; top: 20vh; bottom: 20vh; border-left: 1.5px dashed var(--border-strong); }
/* A step is about one screen tall, so the frame beside it holds still while it is read. */
.lp-flow-step { min-height: 76vh; display: flex; align-items: center; opacity: 0.35; transition: opacity 0.35s ease; }
.lp-flow-step.is-on { opacity: 1; }
.lp-flow-in { position: relative; display: grid; gap: 12px; min-width: 0; }
.lp-flow-num {
  position: absolute; left: -41px; top: 2px; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%; background: var(--background);
  font: 500 12px/1 var(--font-sans); color: var(--foreground); transition: background-color 0.3s, color 0.3s;
}
.lp-flow-step.is-on .lp-flow-num { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.lp-flow-step h3 { font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; }
.lp-flow-desc { font-size: 15.5px; line-height: 1.6; color: var(--muted-foreground); }
/* The request in the product's own bubble, and Tartini AI's reply under its mark. */
.lp-flow-lab { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.lp-flow-lab svg { width: 12px; height: 12px; fill: var(--brand-mark); }
.lp-flow-ask { margin-top: 8px; padding: 10px 14px; border-radius: var(--radius-xl); background: var(--accent); font-size: 14px; line-height: 1.5; color: var(--foreground); }
.lp-flow-reply { font-size: 14px; line-height: 1.55; color: var(--foreground-2); }
.lp-flow-ask code, .lp-flow-reply code { font: 500 12.5px/1.4 var(--font-mono); background: var(--accent); border-radius: 4px; padding: 1px 5px; }
/* Each step's own picture, for a narrow screen; the frame beside the steps stands in for it on a wide one. */
.lp-flow-still {
  display: none; width: 100%; height: auto; margin-top: 8px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
}
.lp-flow-stage { position: sticky; top: 16px; align-self: start; padding-block: 8vh 4vh; }
.lp-flow-cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--muted-foreground); }
.lp-flow-cap b { color: var(--foreground); font-weight: 600; }
.lp-flow-cap .lp-sep { margin: 0; }

/* The frame: a quiet bezel around one screen-shaped window. */
.lp-bezel { padding: 10px; border-radius: var(--radius-xl); background: var(--accent); border: 1px solid var(--border); box-shadow: var(--shadow-pop); }
.lp-reel {
  position: relative; aspect-ratio: 1440 / 785; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-panel); border: 1px solid var(--border); background: var(--background);
}
.lp-reel-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-reel.is-ready .lp-reel-still { display: none; }

/* The film's overlays: what a still cannot hold, drawn in the product's own look. */
.lp-film-stage img, .lp-film-win img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-select: none; }
.lp-film-win { position: absolute; overflow: hidden; }
.lp-film-cover { position: absolute; background: var(--background); }
.lp-film-edge { position: absolute; background: linear-gradient(to bottom, transparent, var(--background)); }
.lp-film-focus { position: absolute; box-sizing: border-box; border: 1.5px solid var(--ring); }
.lp-film-type { position: absolute; overflow: hidden; white-space: nowrap; font: 400 15px/22px var(--font-sans); color: var(--foreground); }
.lp-film-type-in { display: inline-block; white-space: nowrap; }
.lp-film-caret { display: inline-block; width: 1.5px; height: 18px; margin-left: 1px; vertical-align: -3px; background: var(--foreground); }
.lp-film-send { position: absolute; display: grid; place-items: center; border-radius: 50%; background: var(--primary); }
.lp-film-send svg { width: 15px; height: 15px; fill: none; stroke: var(--primary-foreground); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-film-think { position: absolute; display: flex; align-items: center; gap: 12px; font: 400 15px/1 var(--font-sans); }
.lp-film-think i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-control); background: var(--brand-mark-tint); }
.lp-film-think svg { width: 15px; height: 15px; fill: var(--brand-mark); }
.lp-film-think span {
  color: transparent; background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--tartini-text-muted) 0%, var(--tartini-text-muted) 38%, var(--foreground) 50%, var(--tartini-text-muted) 62%, var(--tartini-text-muted) 100%);
  animation: lp-shimmer 1.5s linear infinite;
}
@keyframes lp-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .lp-film-think span { animation: none; color: var(--tartini-text-muted); } }
.lp-film-ripple {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; box-sizing: border-box; border-radius: 50%;
  background: color-mix(in oklab, var(--foreground) 10%, transparent); border: 2px solid color-mix(in oklab, var(--foreground) 30%, transparent);
}
.lp-film-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 28px; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.28)); }
.lp-film-cursor path { fill: var(--foreground); stroke: var(--background); stroke-width: 1.6; stroke-linejoin: round; }

/* Pricing: one usage-based block. */
.lp-price { max-width: 760px; margin: 0 auto; }
.lp-price:hover { border-color: var(--tartini-border); }
.lp-price-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 24px; border-bottom: 1px solid var(--border); }
.lp-pic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--accent); color: var(--foreground); }
.lp-pic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-price-row b { display: block; font-size: 15px; font-weight: 600; }
.lp-price-row p { margin-top: 2px; font-size: 14px; color: var(--muted-foreground); }
.lp-price-foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 20px 24px 22px; }

/* ── Connections: a logo strip of what connects today, and the promise of more ─────────────── */
.lp-conns {
  list-style: none; margin: 0 auto; padding: 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--background);
}
.lp-conn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 30px 16px 28px; text-align: center; }
.lp-conn + .lp-conn { border-left: 1px solid var(--border); }
.lp-conn > svg { width: 30px; height: 30px; margin-bottom: 10px; fill: currentColor; color: var(--foreground); }
.lp-conn b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.lp-conn > span, .lp-conn > a { font-size: 13.5px; line-height: 1.45; color: var(--muted-foreground); }
.lp-conn > .lp-conn-plus {
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px;
  border: 1.5px dashed var(--border-strong); border-radius: 50%;
  font-size: 18px; line-height: 1; color: var(--muted-foreground);
}
.lp-conn-more b { color: var(--foreground-2); }
.lp-conn-more > a { text-decoration: underline; text-underline-offset: 3px; }
.lp-conn-more > a:hover { color: var(--foreground); }

/* ── Footer. With no closing call to action (2026-10-09), Connections leads straight into it. ─ */
.lp-foot { margin-top: 120px; border-top: 1px solid var(--border); background: var(--sidebar); }
.lp-foot-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 32px; padding-top: 44px; padding-bottom: 52px; }
.lp-foot-brand img { width: 107px; height: auto; display: block; }
.lp-foot-brand p { margin-top: 12px; font-size: 13.5px; color: var(--muted-foreground); max-width: 28ch; }
.lp-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-foot-cols h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.lp-foot-cols a { display: block; width: fit-content; font-size: 13.5px; color: var(--muted-foreground); line-height: 2; text-decoration: none; }
.lp-foot-cols a:hover, .lp-foot-cols a:focus-visible { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

/* ── Narrower viewports ───────────────────────────────────────────────────────────────────── */
/* Below the two-column width the frame goes and every step shows its own picture. */
@media (max-width: 960px) {
  .lp-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-flow-stage { display: none; }
  .lp-flow-steps { padding-left: 0; display: grid; gap: 48px; }
  .lp-flow-steps::before { display: none; }
  .lp-flow-step { min-height: 0; opacity: 1; }
  .lp-flow-num { position: static; margin-bottom: 2px; }
  .lp-flow-still { display: block; }
}
@media (max-width: 900px) {
  .lp-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .lp-proof li:nth-child(3) { border-left: 0; }
  .lp-conns { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
  .lp-conn:nth-child(3) { border-left: 0; }
  .lp-conn:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .lp-wrap { padding: 0 16px; }
  /* The three section links stay on a phone, a little tighter, beside a smaller mark. */
  .lp-mark img, .lp-word { width: 104px; }
  .lp-nav .t-btn { padding: 0 7px; font-size: 13px; }
  .lp-hero { padding-top: 64px; }
  .lp-lede { font-size: 16px; }
  .lp-cta { flex-direction: column; align-self: stretch; }
  .lp-cta .t-btn, .lp-price-foot .t-btn { width: 100%; min-width: 0; }
  .lp-shot { margin-top: 44px; }
  .lp-proof { grid-template-columns: minmax(0, 1fr); }
  .lp-proof li { padding: 0; }
  .lp-proof li + li { border-left: 0; border-top: 1px solid var(--border); padding-top: 20px; }
  .lp-section { padding-top: 84px; }
  .lp-sec-head { margin-bottom: 32px; }
  .lp-price-row { padding: 18px 16px; }
  .lp-price-foot { padding: 16px; }
  .lp-foot { margin-top: 84px; }
  .lp-foot-in { grid-template-columns: minmax(0, 1fr); }
  .lp-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The smallest phones: the mark and the three links still share one line. */
@media (max-width: 374px) {
  .lp-mark img, .lp-word { width: 88px; }
  .lp-nav .t-btn { padding: 0 4px; font-size: 12.5px; }
}