/* ============================================================
   NotebookLM Guide — Site-Wide Layout System
   Single source of truth.

   Every content block snaps to one of four layout types:
     Hero | Reading | Data | Callout
   All four compute the SAME left edge, then extend right by
   different amounts. That shared left baseline is the invisible
   grid the whole site is drawn on.
   ============================================================ */

:root{
  /* ---- The grid ---- */
  --layout-max: 1080px;                      /* widest content (Data) */
  --layout-read: 720px;                      /* readable measure (~72ch) */
  --layout-gutter: clamp(20px, 5vw, 48px);   /* responsive side gutter */

  /* ---- Vertical rhythm (replaces all ad hoc margins) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;      /* between major sections — generous breathing room */

  /* ---- Reading comfort ---- */
  --leading-body: 1.78;
  --leading-tight: 1.28;
  --measure: 72ch;
}

/* ============================================================
   THE BASELINE

   !important is deliberate here. Legacy per-page CSS gives many
   sections their own `max-width + margin:auto`, so each block
   centers ITSELF. That self-centering is the bug: it stacks with
   the grid padding and knocks blocks off the baseline (measured:
   190px / 230px / 390px on the same page). The layout system must
   own container geometry outright.
   ============================================================ */
.lay-hero,
.lay-read,
.lay-data,
.lay-call{
  --_edge: max(var(--layout-gutter), (100vw - var(--layout-max)) / 2);
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;    /* kill legacy per-section max-width */
  margin-inline: 0 !important;   /* kill legacy margin:0 auto self-centering */
  padding-inline: var(--_edge) !important;
}

/* Direct children sit ON the baseline. margin-inline is forced to 0:
   legacy CSS leaves stray indents on inner wrappers (measured: 10px,
   60px, 100px margin-left) — the last remnants of components
   positioning themselves independently of any grid. */
.lay-hero > *,
.lay-read > *,
.lay-data > *,
.lay-call > *{
  margin-inline: 0 !important;
}

/* ---- 1. HERO ---- */
.lay-hero{ padding-block: clamp(var(--space-7), 7vw, var(--space-9)); }
.lay-hero > *{ max-width: var(--layout-max); }

/* ---- 2. READING — prose, lists, FAQ ---- */
.lay-read{ margin-block: var(--space-8); }
.lay-read > *{ max-width: var(--layout-read); }

/* ---- 3. DATA — tables, card grids, charts ---- */
.lay-data{ margin-block: var(--space-8); }
.lay-data > *{ max-width: var(--layout-max); }

/* ---- 4. CALLOUT — CTAs, prompt boxes, tips ---- */
.lay-call{ margin-block: var(--space-7); }
.lay-call > *{ max-width: var(--layout-read); }

/* Centered-by-design sections (pricing heroes, CTA panels) keep their
   centering, but span the full grid width rather than being squeezed
   into the narrow reading measure. Design intent preserved; only the
   container geometry is normalised. */
.lay-hero[style*="text-align:center"] > *,
.lay-read[style*="text-align:center"] > *,
.lay-call[style*="text-align:center"] > *{
  max-width: var(--layout-max);
}
/* Card & pricing grids are Data-width, never reading-width */
.pricing-grid, .uc-grid, .card-grid, .plan-grid, .tier-grid{
  max-width: var(--layout-max);
}

/* ============================================================
   READABILITY — generous margins, comfortable rhythm
   ============================================================ */
.lay-read p,
.lay-call p{
  line-height: var(--leading-body);
  margin: 0 0 var(--space-5);
  max-width: var(--measure);
}
.lay-read li{ line-height: var(--leading-body); margin-bottom: var(--space-3); }
.lay-read ul, .lay-read ol{ margin: 0 0 var(--space-6); padding-left: var(--space-5); }

.lay-read h2, .lay-data h2{ line-height: var(--leading-tight); margin: var(--space-8) 0 var(--space-5); }
.lay-read h3, .lay-data h3{ line-height: var(--leading-tight); margin: var(--space-7) 0 var(--space-3); }
.lay-read > h2:first-child,
.lay-data > h2:first-child{ margin-top: 0; }

/* ============================================================
   OVERFLOW GUARDS — no horizontal scroll, ever
   ============================================================ */
html, body{ overflow-x: hidden; }

.lay-read img, .lay-data img, .lay-call img,
.lay-read svg, .lay-data svg, .lay-call svg,
.lay-read iframe, .lay-data iframe, .lay-call iframe,
.lay-read video, .lay-data video{ max-width: 100%; height: auto; }

/* Wide tables scroll inside their block instead of breaking the page */
.tbl-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tbl-scroll table{ min-width: 640px; }

.lay-read, .lay-call{ overflow-wrap: break-word; }

/* Headings must never break the viewport */
h1, h2, h3, h4{
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* ---- The #1 cause of mobile horizontal scroll ----
   A flex item defaults to min-width:auto, so a long heading inside a
   flex row (e.g. .sec-head) refuses to shrink and punches through the
   viewport. Measured: a 564px h2 inside a 350px container at 390px. */
.lay-hero *, .lay-read *, .lay-data *, .lay-call *,
.sec-head, .sec-head > *{ min-width: 0; }
.sec-head{ flex-wrap: wrap; }

/* ============================================================
   BREAKPOINTS — validated at 1440 / 1200 / 1024 / 768 / 390
   ============================================================ */
@media (max-width: 1024px){
  :root{ --space-9: 72px; --space-8: 52px; }
}

@media (max-width: 768px){
  :root{
    --layout-gutter: 28px;
    --space-9: 60px; --space-8: 44px; --space-7: 36px;
  }
  .lay-read > *, .lay-call > *, .lay-data > *{ max-width: 100%; }
}

@media (max-width: 480px){
  :root{
    --layout-gutter: 20px;
    --space-9: 48px; --space-8: 36px; --space-7: 28px;
    --leading-body: 1.72;
  }
  .lay-read h2, .lay-data h2{ font-size: 1.45rem; margin-top: var(--space-7); }
  .lay-read h3, .lay-data h3{ font-size: 1.15rem; }
  .lay-read p, .lay-call p{ margin-bottom: var(--space-4); }
}

/* ============================================================
   LEGACY BRIDGE
   .wrap has 5 conflicting definitions across the site (padding
   40/32/24/20/16px, max-width 1060/960px). Normalise it onto the
   grid, and — critically — stop it re-centering when nested inside
   a layout block, since the parent already placed it on the grid.
   Double-centering is exactly what made the page look "assembled
   from independently centered components".
   ============================================================ */
.wrap{
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  box-sizing: border-box;
}
.lay-hero .wrap,
.lay-read .wrap,
.lay-data .wrap,
.lay-call .wrap{
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/* THE REVERSE CASE — a .wrap that CONTAINS layout blocks.
   Here the wrap centers itself (margin:auto + padding), and the layout
   block inside adds its own grid padding on top. The two stack:
   228px (wrap) + 180px (grid) = 408px, knocking the block 228px off the
   baseline. When a wrap is merely a shell around layout blocks, it must
   become geometrically transparent and let the grid do the work. */
.wrap:has(> .lay-hero),
.wrap:has(> .lay-read),
.wrap:has(> .lay-data),
.wrap:has(> .lay-call),
/* also when the layout block is a deeper descendant, not a direct child —
   the wrap is still just a shell and must not add its own gutter on top
   of the grid's. Without this the block sits 16px off the baseline. */
.wrap:has(.lay-hero),
.wrap:has(.lay-read),
.wrap:has(.lay-data),
.wrap:has(.lay-call){
  max-width: none !important;
  margin-inline: 0 !important;
  /* !important is required, not preferred: some pages ship a legacy
     `.wrap, .cs { padding: 0 16px !important }` patch that otherwise wins
     and stacks its gutter on top of the grid's, pushing the block 16px
     off the baseline. */
  padding-inline: 0 !important;
}