/* Homepage redesign, approved 6 November 2026 (Pencil board "updesh.app homepage redesign").
   Scoped to the homepage: .lp is the view, .home-nav and .home-footer show only on body.is-home.
   Fonts are self-hosted Latin subsets (SIL OFL 1.1, see assets/fonts/OFL.txt). */
@font-face { font-family: "Source Serif 4"; src: url("assets/fonts/SourceSerif4-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("assets/fonts/SourceSerif4-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DMSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DMSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DMSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* One header for every page (owner, 7 November 2026); the homepage footer only on the homepage. */
.home-footer { display: none; }

:root {
  --lp-orange: #F79402;
  --lp-canvas: #F1F0E7;
  --lp-paper: #FAF9F4;
  --lp-chip: #E6E4D8;
  --lp-line: #CFCDB8;
  --lp-ink: #171916;
  --lp-text: #2B2A22;
  --lp-soft: #4F4D40;
  --lp-muted: #666452;
  --lp-eyebrow: #3F5878;
  --lp-tag: #8C5A0E;
  --lp-serif: "Source Serif 4", Georgia, serif;
  --lp-sans: "DM Sans", "Avenir Next", system-ui, sans-serif;
  --lp-gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
}
body.is-home {
  background: var(--lp-canvas);
  color: var(--lp-text);
  font-family: var(--lp-sans);
}
html:has(body.is-home) { scroll-padding-top: 0; background: var(--lp-canvas, #F1F0E7); }
body.is-home .site-nav, body.is-home .site-footer { display: none; }
body.is-home .home-footer { display: block; }
body.is-home :focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; }

.lp-wrap { inline-size: 100%; max-inline-size: calc(1200px + 2 * var(--lp-gutter)); margin-inline: auto; padding-inline: var(--lp-gutter); }

/* Header and footer */
/* Subpages: a solid, sticky header on the site canvas. Homepage: it floats transparent over the
   hero so the battlefield art runs up behind it, and scrolls away with the hero. */
.home-nav { position: sticky; z-index: 200; inset-block-start: 0; border-block-end: 1px solid var(--color-line, #d8d4c4); background: var(--color-canvas, #f5f3eb); color: var(--lp-ink); font-family: var(--lp-sans); }
body.is-home .home-nav { position: absolute; z-index: 10; inset-inline: 0; border-block-end: 0; background: transparent; }
.home-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 64px; }
.home-nav__end { display: flex; align-items: center; gap: 4px; }
.home-social { display: flex; align-items: center; }
.home-social__link { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; color: var(--lp-ink); }
.home-social__link:hover, .home-social__link:focus { color: var(--lp-ink); background: rgb(23 25 22 / .08); }
.home-social__link .icon { inline-size: 20px; block-size: 20px; }
.home-nav__links a[aria-current="page"] { color: var(--lp-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.home-nav :focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; }
.home-nav__brand { display: inline-flex; align-items: center; gap: 12px; min-block-size: 44px; color: var(--lp-ink); font: 600 20px/1 var(--lp-serif); }
.home-nav__brand img { inline-size: 34px; block-size: 34px; border-radius: 8px; }
.home-nav__brand:hover { color: var(--lp-ink); }
.home-nav__links { display: none; gap: 34px; }
.home-nav__links a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--lp-text); font: 500 16px/1 var(--lp-sans); }
.home-nav__links a:hover { color: var(--lp-ink); text-decoration: underline; text-underline-offset: .3em; }
.home-nav__cta { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 16px; border-radius: 12px; background: var(--lp-ink); color: var(--lp-paper); font: 600 15px/1 var(--lp-sans); white-space: nowrap; }
.home-nav__cta:hover, .home-nav__cta:focus { background: #3a3e35; color: var(--lp-paper); }
.home-footer { padding-block: 44px max(56px, env(safe-area-inset-bottom)); }
.home-footer__row { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.home-footer .home-social { margin-inline-start: -10px; }
.home-footer__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.home-footer__links a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--lp-text); font: 400 16px/1 var(--lp-sans); }
.home-footer__links a:hover { color: var(--lp-ink); text-decoration: underline; text-underline-offset: .3em; }
.home-footer p { margin-block-start: 16px; color: var(--lp-muted); font: 400 14px/1.45 var(--lp-sans); }

/* Type */
.lp { color: var(--lp-text); }
.lp p { color: inherit; }
.lp-h1, .lp-h2, .lp-h3 { font-family: var(--lp-serif); font-weight: 500; letter-spacing: 0; color: var(--lp-text); }
.lp-h1 { font-size: clamp(44px, 5vw, 72px); line-height: 1.04; letter-spacing: -.01em; color: var(--lp-ink); }
.lp-h2 { font-size: clamp(34px, 3.34vw, 48px); line-height: 1.08; letter-spacing: -.005em; }
.lp-h3 { font-size: 26px; line-height: 1.2; }
.lp .lp-lead { font: 400 clamp(18px, 1.46vw, 21px)/1.5 var(--lp-sans); color: var(--lp-soft); }
.lp .lp-body { font: 400 17px/1.5 var(--lp-sans); color: var(--lp-soft); }
.lp .lp-eyebrow { display: block; font: 600 13px/1.4 var(--lp-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--lp-eyebrow); }
.lp .lp-pill { display: inline-block; justify-self: start; padding: 9px 18px; border-radius: 999px; background: var(--lp-ink); color: var(--lp-paper); font: 600 13px/1.2 var(--lp-sans); letter-spacing: .2em; text-transform: uppercase; }
.lp-tag { display: inline-block; margin-inline-start: 8px; padding: 3px 9px; border: 1px solid #E89F38; border-radius: 999px; color: var(--lp-tag); font: 600 12px/1.3 var(--lp-sans); letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; }

/* Store badges: official artwork, equal visible height, Google's built-in padding pulled back */
.lp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lp-badge { display: block; border-radius: 9px; }
.lp-badge img { display: block; block-size: 50px; inline-size: auto; }
.lp-badge--google img { block-size: calc(50px * 250 / 168); margin: calc(-50px * 41 / 168) calc(-50px * 41 / 168); }

/* Screens */
.lp-screen { overflow: hidden; border: 1px solid var(--lp-line); border-radius: 30px; background: var(--lp-paper); }
.lp-screen img, .lp-card__shot img { display: block; inline-size: 100%; block-size: auto; }

/* Hero */
.lp-hero { background: var(--lp-orange); }
.lp-hero__inner { display: grid; gap: 0; padding-block: 34px 40px; }
.lp-hero .lp-pill { margin-block-end: 26px; }
.lp-hero .lp-lead { margin-block-start: 22px; color: var(--lp-text); }
.lp-hero .lp-badges { margin-block-start: 34px; }
.lp-hero__media { position: relative; display: grid; justify-items: center; gap: 10px; inline-size: 100%; margin-block-start: 40px; }
.lp-video__controls { display: flex; justify-self: end; align-items: center; gap: 8px; }
.lp-video__controls[hidden] { display: none; }
/* The whole tile fits in one screen: its height follows the viewport, its width the 886:1920 video. */
.lp-hero__tile { --tile-h: calc(100vh - 32px); --tile-h: calc(100svh - 32px); inline-size: min(100%, calc(var(--tile-h) * 886 / 1920)); overflow: hidden; border: 1px solid var(--lp-ink); border-radius: 30px; background: var(--lp-orange); }
.lp-video { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 886 / 1920; object-fit: cover; }
/* Pause control for the looping video (WCAG 2.2.2), kept outside the tile so it never covers the app UI. */
.lp-video__toggle { display: grid; place-items: center; inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--lp-ink); color: var(--lp-paper); cursor: pointer; }
.lp-video__sound { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--lp-ink); color: var(--lp-paper); font: 600 15px/1 var(--lp-sans); white-space: nowrap; cursor: pointer; }
.lp-video__sound.is-audible { justify-content: center; inline-size: 44px; padding: 0; }
.lp-video__toggle:hover, .lp-video__sound:hover { background: #3a3e35; }
.lp-video__toggle .icon, .lp-video__sound .icon { inline-size: 20px; block-size: 20px; }
.lp-video__sound > span:not(.lp-video__sound-label) { display: grid; flex: none; place-items: center; }
.lp-video__sound [hidden], .lp-video__toggle [hidden] { display: none; }

/* The owner's black-and-white pencil drawing of Kurukshetra (armies, elephants, Krishna and
   Arjuna's chariot), faint behind the hero. The opaque video tile sits above it, so it never
   shows over the app screen. At 8% the darkest line keeps the subline and nav text at 5.47:1, the headline at 6.71:1. */
.lp-hero { position: relative; isolation: isolate; overflow: hidden; padding-block-start: 64px; }
.lp-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; inline-size: max(640px, 170vw); aspect-ratio: 1200 / 931; transform: translateX(-50%); background: url("assets/home/kurukshetra-battlefield.webp") center top / contain no-repeat; opacity: .08; pointer-events: none; }

/* Entries into the web reader */
.lp-text-link { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; margin-block-start: 14px; color: var(--lp-ink); font: 600 16px/1.3 var(--lp-sans); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; }
.lp-text-link:hover, .lp-text-link:focus { color: var(--lp-ink); text-decoration-color: currentColor; }
.lp-button { display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px; margin-block-start: 28px; padding: 0 22px; border-radius: 12px; background: var(--lp-ink); color: var(--lp-paper); font: 600 16px/1 var(--lp-sans); }
.lp-button:hover, .lp-button:focus { background: #3a3e35; color: var(--lp-paper); }
.lp-chapters { margin-block-start: 56px; }
.lp .lp-chapters__title { color: var(--lp-text); font: 600 13px/1.4 var(--lp-sans); letter-spacing: .2em; text-transform: uppercase; }
.lp-chapters ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-block-start: 14px; list-style: none; border-block-start: 1px solid var(--lp-line); }
.lp-chapters li { display: flex; border-block-end: 1px solid var(--lp-line); }
.lp-chapters a { display: flex; flex: 1; align-items: baseline; gap: 10px; min-block-size: 44px; padding-block: 10px; color: var(--lp-text); }
.lp-chapters a:hover, .lp-chapters a:focus { color: var(--lp-ink); }
.lp-chapters a:hover .lp-chapters__name, .lp-chapters a:focus .lp-chapters__name { text-decoration: underline; text-underline-offset: .2em; }
.lp-chapters__number { flex: none; min-inline-size: 1.6em; color: var(--lp-tag); font: 600 14px/1.4 var(--lp-sans); font-variant-numeric: tabular-nums; }
.lp-chapters__name { font: 500 17px/1.35 var(--lp-serif); }

/* Sections */
.lp-section { padding-block: clamp(68px, 7.6vw, 110px); }
.lp-band { background: var(--lp-paper); border-block: 1px solid var(--lp-line); }
.lp-sechead { max-inline-size: 760px; }
.lp-sechead .lp-h2 { margin-block-start: 14px; }
.lp-sechead .lp-lead { margin-block-start: 18px; }

.lp-three { display: grid; gap: 40px; margin-block-start: 40px; }
.lp-three .lp-screen--part { inline-size: min(100%, 300px); aspect-ratio: 3 / 4; margin-inline: auto; }
.lp-three .lp-h3 { margin-block-start: 26px; }
.lp-three .lp-body { margin-block-start: 8px; }
.lp-points { display: grid; gap: 22px; margin-block-start: 48px; padding-block-start: 34px; border-block-start: 1px solid var(--lp-line); list-style: none; }
.lp-points strong { display: block; color: var(--lp-text); font: 600 17px/1.4 var(--lp-sans); }
.lp-points .lp-body { display: block; margin-block-start: 6px; }

.lp-read { display: grid; gap: 36px; }
.lp-read .lp-h2 { margin-block-start: 14px; }
.lp-read .lp-lead { margin-block-start: 18px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 30px; list-style: none; }
.lp-chips li { padding: 8px 16px; border-radius: 999px; background: var(--lp-chip); color: var(--lp-text); font: 400 16px/1.4 var(--lp-sans); }
.lp-read__screen { justify-self: center; inline-size: min(100%, 260px); aspect-ratio: 300 / 620; }

.lp-cards { display: grid; gap: 28px; margin-block-start: 40px; }
.lp-card { overflow: hidden; padding: 24px; border: 1px solid var(--lp-line); border-radius: 24px; background: var(--lp-paper); }
.lp-card .lp-body { margin-block-start: 8px; }
.lp-card__shot { block-size: 320px; margin-block-start: 24px; overflow: hidden; border: 1px solid var(--lp-line); border-radius: 20px; }
.lp-card__shot--widget { block-size: auto; }

.lp-plans { display: grid; gap: 28px; margin-block-start: 40px; }
.lp-plan { padding: 28px; border: 1px solid var(--lp-line); border-radius: 24px; background: var(--lp-paper); }
.lp-plan .lp-h3 { font-size: 30px; }
.lp-plan ul { margin-block-start: 22px; list-style: none; }
.lp-plan li { position: relative; padding: 10px 0 10px 26px; border-block-start: 1px solid var(--lp-line); font: 400 18px/1.45 var(--lp-sans); color: var(--lp-text); }
.lp-plan li::before { content: ""; position: absolute; left: 0; top: 19px; inline-size: 10px; block-size: 10px; border-radius: 50%; background: #E89F38; }
.lp .lp-plan__foot { margin-block-start: 18px; color: var(--lp-muted); font: 400 15px/1.45 var(--lp-sans); }
.lp-plan--premium { border-color: var(--lp-ink); background: var(--lp-ink); }
.lp-plan--premium .lp-h3 { color: var(--lp-paper); }
.lp-plan--premium li { border-block-start-color: #3A3E35; color: var(--lp-chip); }
.lp .lp-plan--premium .lp-plan__foot { color: var(--lp-line); }

.lp-abooks { display: grid; gap: 28px; margin-block-start: 40px; }
.lp-abook { display: flex; flex-direction: column; gap: 22px; padding: 24px; border: 1px solid var(--lp-line); border-radius: 24px; background: var(--lp-paper); color: var(--lp-text); }
.lp-abook:hover, .lp-abook:focus { color: var(--lp-text); border-color: var(--lp-ink); }
.lp-abook__cover { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; border-radius: 12px; }
.lp-abook__text { display: block; min-inline-size: 0; }
.lp-abook__title { display: block; margin-block-start: 10px; }
.lp-abook__title[lang="hi"] { font-family: "Noto Serif Devanagari", var(--lp-serif); font-size: 22px; line-height: 1.45; }
.lp-spotify { display: flex; align-items: center; gap: 12px; margin-block-start: 22px; color: var(--lp-text); font: 600 15px/1 var(--lp-sans); }
.lp-spotify img { display: block; block-size: 34px; inline-size: auto; }
.lp-abook:hover .lp-spotify, .lp-abook:focus .lp-spotify { text-decoration: underline; text-underline-offset: .3em; }

.lp-closing { padding-block: 64px; background: var(--lp-orange); text-align: center; }
.lp-closing .lp-h2 { color: var(--lp-ink); font-size: clamp(38px, 3.9vw, 56px); }
.lp-closing .lp-badges { justify-content: center; margin-block-start: 34px; }
.lp-closing .lp-pill { margin-block-start: 26px; }

@media (min-width: 600px) {
  .lp-abook { flex-direction: row; align-items: center; gap: 28px; padding: 28px; }
  .lp-abook__cover { inline-size: clamp(140px, 14vw, 200px); flex-shrink: 0; }
}

@media (min-width: 768px) {
  .lp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-block-start: 56px; }
  .lp-three .lp-screen--part { inline-size: 100%; aspect-ratio: auto; block-size: clamp(380px, 32.6vw, 470px); }
  .lp-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .lp-cards, .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 56px; }
  .lp-card { padding: 28px; }
  .lp-card__shot, .lp-card__shot--widget { block-size: 380px; }
  .lp-plan { padding: 36px; }
  .lp-abooks { margin-block-start: 56px; }
  .home-footer__row { flex-direction: row; align-items: center; justify-content: space-between; }
  .home-footer__links { gap: 4px 30px; }
}

@media (min-width: 960px) {
  .home-nav__inner { gap: 24px; min-block-size: 76px; }
  .home-nav__end { gap: 12px; }
  .home-nav__brand { font-size: 22px; }
  .home-nav__brand img { inline-size: 40px; block-size: 40px; border-radius: 9px; }
  .home-nav__links { display: flex; }
  .home-nav__cta { padding: 0 22px; font-size: 16px; }
  .lp-badge img { block-size: 54px; }
  .lp-badge--google img { block-size: calc(54px * 250 / 168); margin: calc(-54px * 41 / 168); }
  .lp-badges { gap: 16px; }

  /* The video fills the right half of the hero, its top level with the headline. */
  /* Nav plus hero fill exactly one viewport; the copy is centred against the tile. */
  /* Text and tile form one centred group with a modest gap. */
  .lp-hero__inner { grid-template-columns: minmax(0, 560px) auto; justify-content: center; align-items: center; column-gap: clamp(56px, 6vw, 96px); min-block-size: calc(100vh - 76px); min-block-size: calc(100svh - 76px); padding-block: 24px; }
  .lp-hero__copy { max-inline-size: 560px; }
  .lp-hero__media { justify-self: end; inline-size: auto; margin-block-start: 0; }
  .lp-hero__tile { --tile-h: min(1083px, calc(100vh - 76px - 48px)); --tile-h: min(1083px, calc(100svh - 76px - 48px)); inline-size: calc(var(--tile-h) * 886 / 1920); border-radius: 36px; }
  /* The pause control sits beside the tile so it takes no height. */
  .lp-video__controls { position: absolute; right: calc(100% + 12px); bottom: 0; inline-size: max-content; flex-direction: column; align-items: flex-end; }
  .lp-hero { padding-block-start: 76px; }
  .lp-hero::before { top: auto; bottom: 0; left: 0; inline-size: 100%; transform: none; background-position: center bottom; }
  .lp-chapters ol { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }

  .lp-read { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 70px; align-items: center; }
  .lp-read__screen { justify-self: end; inline-size: 300px; }
  .lp-abooks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-closing { padding-block: 96px; }
}

/* Motion (owner, 7 November 2026): calm, once per element, transform and opacity only.
   Hidden states apply only while <html> has .lp-motion, which is never set for reduced motion. */
@keyframes lp-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes lp-tile-in { from { opacity: 0; transform: scale(.96); } }
/* #7A440A: the app's spoken-word brown (#804C0E, sampled from the player) a touch darker, so the
   large headline keeps 3:1 on the orange and over the hero art while visibly leaving the ink. */
@keyframes lp-word-light { 0%, 100% { color: inherit; } 25%, 60% { color: #7A440A; } }

@media (prefers-reduced-motion: no-preference) {
  /* Store badges never move: official marks stay static (brand rules). */
  .lp-motion:not(.lp-seen) .lp-hero__copy > :not(.lp-badges) { animation: lp-rise 600ms cubic-bezier(.22, 1, .36, 1) both; }
  .lp-motion:not(.lp-seen) .lp-hero__copy > :nth-child(2) { animation-delay: 80ms; }
  .lp-motion:not(.lp-seen) .lp-hero__copy > :nth-child(3) { animation-delay: 160ms; }
  .lp-motion:not(.lp-seen) .lp-hero__copy > :nth-child(5) { animation-delay: 240ms; }
  .lp-motion:not(.lp-seen) .lp-hero__tile { animation: lp-tile-in 700ms 150ms cubic-bezier(.22, 1, .36, 1) both; }
  /* The headline words light up in turn, like the app's spoken-word highlight, then settle. */
  .lp-motion:not(.lp-seen) .lp-word { animation: lp-word-light 700ms calc(750ms + var(--w, 0) * 150ms) ease-in-out both; }

  .lp-motion [data-reveal] { transition: opacity 600ms cubic-bezier(.22, 1, .36, 1), transform 600ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  .lp-motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
  .lp-motion [data-reveal="rise"]:not(.is-in) { transform: translateY(24px); }
  .lp-motion [data-reveal="pop"] { transition-duration: 450ms; transition-delay: calc(120ms + var(--i, 0) * 45ms); }
  .lp-motion [data-reveal="pop"]:not(.is-in) { transform: scale(.9); }
  .lp-motion [data-reveal].is-done { transition-delay: 0ms; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp-card, .lp-abook, .lp-motion .lp-card[data-reveal].is-done, .lp-motion .lp-abook[data-reveal].is-done { transition: transform 250ms ease-out, box-shadow 250ms ease-out, border-color 250ms ease-out; }
  .lp-abook__cover { transition: transform 300ms ease-out; }
  .lp-card:hover, .lp-abook:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgb(23 25 22 / .12); }
  .lp-abook:hover .lp-abook__cover { transform: scale(1.03); }
}