/* LIVONSA product page — samanvis.com/daily-journal-app-planner-wellness-tracker/
 *
 * Enqueued by functions.php for page-templates/template-livonsa.php, with
 * 'samanvi-fonts' as its dependency. Lives at css/livonsa.css in the child
 * theme; the canonical copy is store/wordpress/livonsa.css in the app repo.
 *
 * NO @import HERE ON PURPOSE. The theme already loads Space Grotesk and Inter
 * globally under the 'samanvi-fonts' handle — the app's own pairing, by
 * coincidence — so importing them again would fetch the same two families a
 * second time and push out the LCP on the one page whose whole job is ranking.
 * Depend on the handle instead.
 *
 * Every selector is `.lv-*`-prefixed and every custom property is `--lv-`,
 * matching the `--svc-*` convention in services.css: this page sits inside the
 * GeneratePress frame with the site's own :root tokens in scope, and an
 * unprefixed --teal here would leak into, or be overwritten by, them.
 *
 * Palette: the site's blue #1F4E8A is already the app's acting colour, so they
 * agree for free. The accent teal is the APP's #028090, not the site's
 * #00A896 — someone arriving from Settings → About should land somewhere that
 * looks like where they came from. If the brand ever needs one teal, that is a
 * decision to make deliberately, not by drift.
 *
 * Light only. The agency theme is light and a half-supported dark mode reads
 * worse than none.
 *
 * REBUILT 2026-09-08 for the owner's new long-form copy. The page went from a
 * short hero-plus-grid to nine prose sections, so the layout is now a
 * two-column split (text beside phone screenshots) that alternates sides, over
 * a shared measure. The old `.lv-badges` strip and `.lv-features` grid are
 * gone with the copy that used them — deleted, not left dead.
 */

.lv-page {
  --lv-ink: #091628;
  --lv-ink-soft: #3d6882;
  --lv-line: #d8e3e8;
  --lv-card: #ffffff;
  /* The site's own container grey, from style.css:32. Used here as the page's
     ONE grey so the banded sections match the rest of samanvis.com exactly
     rather than being a near-miss shade. */
  --lv-ground: #f7f8f9;
  --lv-blue: #1f4e8a;
  --lv-navy: #0f2a52;
  --lv-teal: #028090;

  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  color: var(--lv-ink);
  line-height: 1.65;
}

.lv-page h1,
.lv-page h2,
.lv-page h3 {
  font-family: "Space Grotesk", Inter, sans-serif;
  line-height: 1.2;
  color: var(--lv-navy);
  margin: 0 0 0.6em;
}

.lv-page p {
  margin: 0 0 1.1rem;
}

.lv-page p:last-child {
  margin-bottom: 0;
}

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

/* Wider than the 40rem the rest of the page uses, and centred: the hero is the
 * one place a longer measure reads well, because it is three short blocks and
 * not a run of prose.
 *
 * NO background here. The site paints `.one-container .container` grey in
 * style.css:32 and the hero sits on it, which is why it reads as a grey band
 * to the page edges. The sections below turn white instead — see .lv-band.
 *
 * Do NOT add `.lv-hero > * { margin-inline: auto }` to cap the children: the
 * `margin` shorthands on .lv-kicker, .lv-page h1 and .lv-page p are declared
 * later and reset the inline margins, so some children centre and others jump
 * left. Cap the section, not its children. */
.lv-hero {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 2.5rem;
  text-align: center;

  /* Grey band, full width, with the content still capped at 46rem and centred.
   *
   * The box-shadow paints the colour out to the viewport edges without the
   * section itself being full width, and clip-path stops that shadow creating
   * a horizontal scrollbar. This is deliberate: the two obvious alternatives
   * both failed here.
   *   - Inheriting the container grey from style.css:32 means the hero looks
   *     identical to every other section, which is the thing being fixed.
   *   - Making the section full width and capping `.lv-hero > *` breaks the
   *     layout: the `margin` shorthands on .lv-kicker, .lv-page h1 and
   *     .lv-page p are declared later and reset the inline margins, so some
   *     children centre and others jump left.
   * Set the colour here explicitly so it does not depend on what any ancestor
   * happens to be painted. */
  background: var(--lv-ground);
  box-shadow: 0 0 0 100vmax var(--lv-ground);
  clip-path: inset(0 -100vmax);
}

.lv-kicker {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lv-teal);
  margin: 0 0 0.85rem;
}

.lv-hero h1 {
  font-size: clamp(1.85rem, 5.5vw, 2.85rem);
}

.lv-lede {
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  color: var(--lv-ink-soft);
  margin-bottom: 1.25rem;
}

.lv-lede strong {
  color: var(--lv-ink);
}

/* The offline / no-account / no-trackers line. It is the page's whole promise
   in one sentence, so it is set apart rather than left as body copy. */
.lv-support {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--lv-navy);
  background: #eef6f7;
  border: 1px solid #cfe4e7;
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  margin: 0 0 1.75rem;
}

/* ---- Play button --------------------------------------------------------- */

/* Over-specified on purpose: `.lv-page a.lv-cta`, not `.lv-cta`.
 *
 * A site-wide link rule outside this file colours links in the theme blue,
 * and it out-specifies a lone class. That blue is #1F4E8A — the exact
 * background of this button — so with a bare `.lv-cta` the label rendered
 * invisible: blue text on a blue pill. It reappeared on hover only because
 * `:hover` adds a class-level unit and tipped the cascade back. Two classes
 * plus the element wins in both states. Do not "simplify" this selector.
 */
.lv-page a.lv-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--lv-blue);
  color: #ffffff;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(9, 22, 40, 0.08), 0 8px 22px rgba(31, 78, 138, 0.22);
  transition: background-color 0.2s ease;
}

/* Hover goes to the app teal, not a darker blue. White on #028090 is 4.7:1,
 * which clears AA for this size and weight. */
.lv-page a.lv-cta:hover,
.lv-page a.lv-cta:focus-visible {
  background: var(--lv-teal);
  color: #ffffff;
}

.lv-cta-note {
  font-size: 0.9rem;
  color: var(--lv-ink-soft);
  margin: 0.95rem 0 0;
}

/* ---- Bands and measure --------------------------------------------------- */

/* White, so the hero's inherited grey reads as a deliberate band rather than
 * as the same colour as the whole page. Consecutive bands touch, so this is
 * one continuous white below the hero. */
.lv-band {
  padding: 2.75rem 1.25rem;
  background: #ffffff;
}

/* Tinted bands break out to the full width, then re-centre their contents, so
   the colour reaches the page edges instead of floating in a box. */
.lv-band--tint {
  background: var(--lv-ground);
  border-top: 1px solid var(--lv-line);
  border-bottom: 1px solid var(--lv-line);
}

/* One measure for every run of prose on the page. ~68 characters. */
.lv-prose {
  max-width: 40rem;
  margin: 0 auto;
}

/* The hero and the section immediately after it are centred, so the page
 * opens as one centred statement before settling into the left-aligned
 * prose-beside-phones rhythm. Scoped to this one band on purpose — privacy,
 * data, profiles, flexibility and FAQ all share .lv-prose and stay left
 * aligned, and centred body copy stops being readable much past a short run
 * of paragraphs.
 *
 * Alignment only — no max-width here on purpose. The measure stays whatever
 * .lv-prose sets, so this section keeps the same width as every other one and
 * follows automatically if that shared measure is ever changed.
 *
 * Two classes so a site-wide text-align cannot undo it, as one already does
 * to this page's list padding and button colour. */
.lv-page .lv-band--center .lv-prose {
  text-align: center;
}

.lv-page h2 {
  font-size: clamp(1.45rem, 4vw, 1.95rem);
}

.lv-page h3 {
  font-size: 1.12rem;
  margin-top: 1.75rem;
}

/* ---- Lists --------------------------------------------------------------- */

.lv-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

/* Over-specified for the same reason as the CTA below: a site-wide `ul li`
 * rule outside this file out-specifies a lone class and flattens the padding.
 * When that happens the bullet still draws, but the hanging indent collapses
 * and a wrapped line starts under the DOT instead of under the text — which is
 * exactly how it rendered live. Two classes plus the element wins. */
.lv-page .lv-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
  color: var(--lv-ink-soft);
}

.lv-page .lv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Centred on the first line rather than nudged by eye: the page sets
     line-height 1.65, so this holds if the theme's root font-size changes. */
  top: calc((1.65em - 0.45rem) / 2);
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--lv-teal);
}

/* The privacy list is a run of absences — "no account", "no trackers". A tick
   would claim the opposite of what each line says, so it keeps the same dot as
   every other list and simply sits on the tinted band. */
.lv-page .lv-list--check li {
  color: var(--lv-ink);
}

/* ---- Split sections: prose beside phone screenshots ---------------------- */

.lv-split-text {
  max-width: 40rem;
  margin: 0 auto;
}

.lv-shots {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0 0;
}

.lv-shots img {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--lv-line);
  box-shadow: 0 12px 30px rgba(9, 22, 40, 0.12);
}

/* A pair of phones is tighter than one, so neither shrinks to a thumbnail on
   a narrow screen. */
.lv-shots--pair img {
  max-width: 11rem;
}

/* ---- Callout ------------------------------------------------------------- */

.lv-callout {
  background: #eef6f7;
  border-left: 3px solid var(--lv-teal);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0 0;
}

.lv-callout strong {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  color: var(--lv-navy);
  margin-bottom: 0.4rem;
}

.lv-callout p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--lv-ink-soft);
}

/* ---- FAQ ----------------------------------------------------------------- */

.lv-faq {
  margin: 0;
}

.lv-faq dt {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--lv-ink);
  margin-top: 1.6rem;
}

.lv-faq dd {
  margin: 0.4rem 0 0;
  color: var(--lv-ink-soft);
}

/* ---- Closing CTA --------------------------------------------------------- */

.lv-final-cta {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}

.lv-final-cta h2 {
  font-size: clamp(1.35rem, 3.6vw, 1.8rem);
}

.lv-final-cta > p:first-of-type {
  color: var(--lv-ink-soft);
  margin-bottom: 1.75rem;
}

/* ---- Wider viewports ----------------------------------------------------- */

@media (min-width: 46rem) {

  .lv-hero {
    padding: 4rem 2rem 3rem;
  }

  .lv-band {
    padding: 3.5rem 2rem;
  }

  /* Text and phones side by side, alternating which side the phones sit on so
     five sections in a row do not read as five identical blocks. */
  .lv-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    align-items: center;
    max-width: 68rem;
    margin-inline: auto;
  }

  .lv-split-text {
    margin: 0;
  }

  .lv-shots {
    margin: 0;
  }

  /* `order` reorders the ITEMS, not the TRACKS. Without swapping the track
     sizes too, a flipped section puts the phones in the flexible column and
     the text in the auto one, so the gap between them does not match the
     unflipped sections above and below it. Swap both, together. */
  .lv-split--flip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lv-split--flip .lv-split-text {
    order: 2;
  }

  .lv-shots--pair img {
    max-width: 12.5rem;
  }
}

@media (min-width: 62rem) {

  .lv-shots img {
    max-width: 17rem;
  }

  .lv-shots--pair img {
    max-width: 14rem;
  }
}

/* ---- Reduced motion ------------------------------------------------------
   The only motion on the page is the CTA's colour transition, so that is what
   goes. */

@media (prefers-reduced-motion: reduce) {

  .lv-page a.lv-cta {
    transition: none;
  }
}