/* LifeTLDR marketing home page — layout and components.
   Served flat at https://lifetldr.com/site.css; used ONLY by index.html.
   Design tokens come from /tokens.css, webfonts from /brand-fonts.css.

   This file replaced the inline styles of the old self-extracting bundle, where
   every rule lived in a style="" attribute inside a JSON-escaped string. Rules
   are grouped by page section, in document order, and the single breakpoint is
   collected at the bottom under "RESPONSIVE".

   Component classes (.btn, .icon, .highlight, .card) are hand ports of the
   design-system React components that used to ship in the bundle -- Button,
   Icon, Highlight and Sparkle. Their values are copied verbatim from those
   components; see the comments on each.
*/

/* ---------------------------------------------------------------- base ---- */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-primary);
  font-family: var(--font-body);
}

html { scroll-behavior: smooth; }

a { color: var(--blue-700); }
a:hover { text-decoration: underline; }

/* The page wrapper. overflow-x:hidden is LOAD-BEARING: the ambient blobs below
   are deliberately positioned outside the viewport (left:-60px, right:-110px,
   bottom:-140px) and would otherwise create a horizontal scrollbar. */
.page {
  min-height: 100vh;
  background: var(--surface-app);
  overflow-x: hidden;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.spacer { flex: 1; }

/* ---------------------------------------------------------- components ---- */

/* Button — ported from components/forms/Button.jsx.
   Buttons say exactly what happens; sentence case. Primary = Blue 600 fill +
   white text; keep ONE primary per screen. Radius 10px, focus ring 2px Blue 400
   at 2px offset, motion 150ms ease-out.
   These are <a> elements here, so the generic `a` rules above are overridden. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  background: var(--action-fill);
  color: var(--text-on-action);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              opacity var(--duration-fast) var(--ease);
  outline-offset: var(--focus-offset);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--action-fill-hover); text-decoration: none; }

.btn--secondary {
  background: var(--white);
  color: var(--blue-700);
  border: 1px solid var(--blue-600);
}
.btn--secondary:hover { background: var(--blue-50); }

/* variant "text": no padding, no min-height, underline on hover */
.btn--text {
  background: transparent;
  color: var(--blue-700);
  border: 1px solid transparent;
  padding: 0;
  min-height: auto;
}
.btn--text:hover { background: transparent; text-decoration: underline; }

/* size "sm" */
.btn--sm {
  gap: 6px;
  font-size: 13px;
  line-height: 16px;
  padding: 8px 12px;
  min-height: 36px;
}
.btn--text.btn--sm { padding: 0; min-height: auto; }

/* Icon — ported from components/brand/Icon.jsx. Outline style, 2px stroke,
   rounded caps/joins, 24px grid, Lucide-convention paths. Colour is inherited
   from `stroke` set per-use; default Gray 400. */
.icon {
  display: inline-block;
  flex-shrink: 0;
  fill: none;
  stroke: var(--icon-default);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--active { stroke: var(--icon-active); }
.icon--success { stroke: var(--green-700); }
.icon--sparkle { stroke: var(--blue-600); }

/* Highlight — ported from components/brand/Highlight.jsx. The signature
   highlighter swipe: a hand-drawn Warm Yellow mark at 70% opacity behind the
   ONE decisive phrase. Text stays Ink 900 and sits above the mark. */
.highlight {
  position: relative;
  display: inline;
  white-space: nowrap;
}
.highlight::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 8%;
  bottom: -2px;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44' preserveAspectRatio='none'><path d='M6 26 C4 17 10 13 22 11 C60 6 120 8 168 6 C214 5 262 7 290 10 C297 11 296 17 293 24 C291 30 294 34 288 37 C250 41 190 38 140 39 C96 40 52 41 20 38 C9 37 8 33 6 26 Z' fill='%23FBC348' fill-opacity='0.7'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.highlight > span {
  position: relative;
  z-index: 1;
  color: var(--ink-900);
}

/* Cards used by the "How it works" and "Here's the deal" grids. */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card__title { font: var(--text-heading); }
.card__body {
  font: var(--text-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.eyebrow {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.section-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 42px;
  margin: 0 0 10px;
}
.section-lede {
  font: var(--text-body);
  color: var(--text-secondary);
  margin: 0 0 36px;
  max-width: 560px;
}

/* Ambient background blobs. Decorative only (aria-hidden). Suppressed wholesale
   by the prefers-reduced-motion block at the bottom of this file. */
.blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.blob { position: absolute; border-radius: 999px; }

.blob--hero-a {
  top: -90px; left: -60px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(85,156,213,.16), rgba(85,156,213,0) 66%);
  filter: blur(4px);
  animation: driftA 22s cubic-bezier(.4,0,.6,1) infinite,
             breathe 17s ease-in-out infinite;
}
.blob--hero-b {
  top: 120px; right: -110px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(251,195,72,.12), rgba(251,195,72,0) 66%);
  filter: blur(6px);
  animation: driftB 26s cubic-bezier(.4,0,.6,1) infinite;
}
.blob--hero-c {
  bottom: -140px; left: 38%; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(141,187,115,.11), rgba(141,187,115,0) 66%);
  filter: blur(6px);
  animation: driftC 31s cubic-bezier(.4,0,.6,1) infinite;
}
.blob--closing-a {
  top: -120px; left: -80px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(85,156,213,.10), rgba(85,156,213,0) 66%);
  filter: blur(6px);
  animation: driftB 28s cubic-bezier(.4,0,.6,1) infinite;
}
.blob--closing-b {
  bottom: -160px; right: -60px; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(251,195,72,.09), rgba(251,195,72,0) 66%);
  filter: blur(6px);
  animation: driftA 33s cubic-bezier(.4,0,.6,1) infinite;
}

/* -------------------------------------------------------------- header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 252, 253, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-hairline);
}

/* flex-wrap:wrap + row-gap here is a deliberate fallback for the 781px-900px
   band, where the nav and auth clusters can wrap onto a second row. Below the
   breakpoint it is forced to nowrap -- see RESPONSIVE. */
.hdr {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  row-gap: 8px;
}

.hdr__logo { display: flex; align-items: center; text-decoration: none; }
.hdr__logo img { height: 30px; width: auto; display: block; }

.nav { display: flex; gap: 22px; margin-left: 12px; }
.nav a {
  font: var(--text-body);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.auth {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 0;
}

/* Burger is hidden above the breakpoint and revealed below it. 44x44 keeps the
   touch target at the accessible minimum. */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
  cursor: pointer;
  flex-shrink: 0;
}
/* Icon swap is driven by aria-expanded so there is one source of truth for the
   open state and no class bookkeeping in JS. */
.burger .icon-close { display: none; }
.burger[aria-expanded="true"] .icon-open { display: none; }
.burger[aria-expanded="true"] .icon-close { display: block; }

.menu {
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-card);
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fadeUp 180ms cubic-bezier(.2, 0, 0, 1) both;
}
.menu[hidden] { display: none; }
.menu a.menu__link {
  font: var(--text-body);
  color: var(--text-primary);
  text-decoration: none;
  padding: 12px 4px;
}
.menu__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  margin-top: 4px;
  max-width: 320px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Without JS the burger cannot open the panel, so surface the same links
   inline. The old bundle had no such fallback -- the whole page needed JS. */
.nojs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-card);
}
.nojs-nav a { font: var(--text-body); color: var(--text-primary); text-decoration: none; }

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

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--paper) 78%);
}
.hero__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 24px 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 56px;
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: fadeUp 260ms cubic-bezier(.2, 0, 0, 1) both;
}
.hero__eyebrow {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--blue-700);
  text-transform: none;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.12;
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.hero__lede {
  font: var(--text-body);
  font-size: 19px;
  line-height: 29px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 520px;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-note { display: flex; align-items: center; gap: 8px; }
.hero-note span { font: var(--text-caption); color: var(--text-secondary); }

.hero__panel {
  position: relative;
  animation: fadeUp 320ms cubic-bezier(.2, 0, 0, 1) both;
}

/* The sample "distilled" card. */
.sample {
  background: var(--surface-card);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(34, 48, 60, .08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sample__meta { display: flex; align-items: center; gap: 8px; }
.sample__meta span {
  font: var(--text-caption);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sample__summary {
  background: var(--surface-info);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sample__summary-title { font: var(--text-heading); }
.sample__summary-body { font: var(--text-body); }
.sample__label {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
  margin-top: 2px;
}
.sample__action {
  background: var(--surface-action);
  border-left: 3px solid var(--yellow-400);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sample__action-title { font: var(--text-emphasis); }
.sample__action-meta {
  font: var(--text-body);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sample__handled { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.sample__handled span { font: var(--text-caption); color: var(--green-700); }

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

.section { max-width: 1080px; margin: 0 auto; padding: 76px 24px; }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

/* "Both parents, one picture" */
.crew { background: var(--blue-50); }
.crew__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 56px;
  align-items: center;
}
.crew__copy { display: flex; flex-direction: column; gap: 16px; }
.crew__copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 42px;
  margin: 0;
}
.crew__lede {
  font: var(--text-body);
  font-size: 18px;
  line-height: 28px;
  color: var(--text-secondary);
  margin: 0;
  text-wrap: pretty;
}
.crew__points { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.crew__point { display: flex; gap: 10px; align-items: flex-start; }
.crew__point span { font: var(--text-body); }

.household {
  background: var(--surface-card);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(34, 48, 60, .08);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.household__rows { display: flex; flex-direction: column; gap: 10px; }
.household__row { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--text-label);
  flex-shrink: 0;
}
.avatar--blue { background: var(--blue-400); }
.avatar--green { background: var(--green-400); }
.avatar--gray { background: var(--gray-400); }
.household__name { font: var(--text-emphasis); }
.household__role { font: var(--text-caption); color: var(--text-secondary); }
.household__foot {
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  font: var(--text-caption);
  color: var(--text-secondary);
}

/* Closing call to action */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.closing__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.closing__inner img { width: 56px; height: 56px; display: block; }
.closing__inner h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  margin: 0;
  text-wrap: pretty;
}
.closing__lede {
  font: var(--text-body);
  font-size: 18px;
  line-height: 28px;
  color: var(--text-secondary);
  margin: 0;
}
.closing__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.closing__note {
  font: var(--text-caption);
  color: var(--text-secondary);
  margin: 4px 0 0;
}

/* -------------------------------------------------------------- footer ---- */

.site-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.site-footer__top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-footer__top img { height: 26px; width: auto; display: block; }
.site-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer__links a {
  font: var(--text-caption);
  color: var(--text-secondary);
  text-decoration: none;
}
.site-footer__legal {
  border-top: 1px solid var(--divider);
  padding-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.site-footer__legal span { font: var(--text-caption); color: var(--text-secondary); }
.site-footer__legal .copyright { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ keyframes ---- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes driftA {
  0%   { transform: translate3d(0,0,0) scale(1); }
  33%  { transform: translate3d(-70px,46px,0) scale(1.06); }
  66%  { transform: translate3d(34px,72px,0) scale(.96); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes driftB {
  0%   { transform: translate3d(0,0,0) scale(1); }
  33%  { transform: translate3d(58px,-52px,0) scale(.95); }
  66%  { transform: translate3d(-46px,-18px,0) scale(1.07); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes driftC {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-62px,-40px,0) scale(1.08); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes breathe {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* ===========================================================================
   RESPONSIVE

   The site has exactly ONE breakpoint: 780/781px. Above it the header shows a
   horizontal nav and the auth buttons; below it those collapse into a burger
   that opens the .menu panel.

   Everything else is intrinsically fluid and needs no media query: the three
   grids use repeat(auto-fit, minmax(min(100%, Npx), 1fr)) and the h1 uses
   clamp(). The min(100%, N) guard is what stops the grids overflowing below
   their track width -- do not simplify it to minmax(Npx, 1fr).

   The old bundle needed !important on every declaration in the breakpoint
   block because its base styles were inline style="" attributes, which outrank
   a stylesheet. Now that the base rules are classes, normal cascade order
   applies and !important is unnecessary here. Do not reintroduce it.

   The prefers-reduced-motion block below is the ONE exception, and it is not
   the same situation: it overrides class-based rules (.hero__copy, .blob--*,
   .menu, .btn) using the universal selector, which has zero specificity and
   would otherwise lose. An accessibility override that must always win is the
   textbook justified use of !important. Removing it silently reinstates the
   animations for users who asked for none.
   =========================================================================== */

@media (max-width: 780px) {
  .nav,
  .auth { display: none; }

  .burger { display: inline-flex; }

  .hdr {
    padding: 12px 16px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .hdr__logo img { height: 24px; }

  .hero-cta { justify-content: center; }
  .hero-note { justify-content: center; text-align: center; }
}

@media (min-width: 781px) {
  /* The panel only exists below the breakpoint; hide it unconditionally above
     so a resize while it is open cannot strand it on screen. */
  .menu,
  .nojs-nav { display: none; }
}

/* Narrow-desktop band: just above the breakpoint the header has very little
   slack. Measured at 781px the row needs 783px, so it wraps the auth cluster
   onto a second row -- the flex-wrap fallback firing as designed, but it looks
   broken. Two pixels is the entire problem; tightening the gaps here reclaims
   about 30px and keeps the header on one row all the way down to 781px.
   Deliberately scoped so that 841px and up stay byte-identical to the previous
   design. If the header CTA label ever gets longer than "Request an invite",
   re-measure -- tools/render-check.mjs reports the header height per width. */
@media (min-width: 781px) and (max-width: 840px) {
  .hdr { gap: 14px; }
  .nav { gap: 18px; margin-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}