/* ==========================================================================
   SkyyCast Public Layer -- "Daylight & Night Sky" design foundation
   ==========================================================================

   Loaded by the public surfaces only: the homepage shell (index.html, scoped
   to #public-view) and the standalone public pages (<body class="pub-site">).

   ISOLATION CONTRACT -- read before editing:
   1. Tokens are declared on :where(#public-view, .pub-site) only -- never on
      :root, html or body -- so #dashboard-view and #auth-view (siblings of
      #public-view in index.html) can never resolve a --pub-* value.
   2. Every other rule starts with :is(#public-view, .pub-site) followed by a
      pub-* class. There are no bare element, :root, html, body, *, or shared
      .sc-* selectors in this file, so nothing here can reach the Dashboard,
      the sign-in view, or any markup that has not opted in with a pub-* class.
   3. :is(#public-view, .pub-site) carries id-level specificity on purpose, so
      pub-* components win over the older #public-view overrides and the static
      pages' inline <style> blocks once markup opts in -- without !important.
   4. Nothing here targets the root elements themselves (except to declare
      tokens), so adding the stylesheet and the pub-site class changes nothing
      visually until a later phase applies pub-* classes to markup.
   5. Fonts: Bricolage Grotesque, already loaded by every public page. This
      file loads no fonts and never changes the Dashboard's font tokens.

   HOMEPAGE DEMO BOUNDARY (Phase 2+): the interactive product demo lives in
   #demo-workspace and is driven by the homepage script through its ids and
   data-demo-nav attributes. Future demo styling must use pub-demo-* classes
   or selectors under #public-view #demo-workspace, and must not rename or
   remove its ids, data-demo-nav, aria-hidden, or change its fixed footprint.

   AD SLOTS: .sc-sidebar-ad / .sc-in-article-ad are left untouched here.

   Breakpoints (mobile-first, min-width): 480, 768, 900 (navigation), 1024, 1440.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:where(#public-view, .pub-site) {
  --pub-bg: #F6F7FB;
  --pub-bg-soft: #EEF1F8;
  --pub-surface: #FFFFFF;
  --pub-surface-elevated: #FFFFFF;

  --pub-border: #DDE2EE;
  --pub-border-strong: #C3CADB;

  --pub-text: #0B1020;
  --pub-text-secondary: #3D4760;
  --pub-text-muted: #667089;

  --pub-accent: #2F5BFF;
  --pub-accent-strong: #1E40E0;
  --pub-accent-soft: #EAEFFF;
  --pub-accent-secondary: #2CCCE4;

  --pub-night: #0A0F1E;
  --pub-night-surface: #121A2E;
  --pub-night-border: #243150;
  --pub-night-text: #EEF2FF;
  --pub-night-text-secondary: #A9B4D0;
  --pub-night-link: #8FA8FF;

  --pub-success: #047857;
  --pub-warning: #B45309;
  --pub-danger: #C81E1E;

  --pub-shadow-sm: 0 1px 2px rgba(11,16,32,.06), 0 2px 8px -2px rgba(11,16,32,.08);
  --pub-shadow-md: 0 1px 2px rgba(11,16,32,.06), 0 12px 32px -12px rgba(11,16,32,.20);
  --pub-shadow-lg: 0 2px 4px rgba(11,16,32,.06), 0 32px 64px -24px rgba(11,16,32,.28);

  --pub-glow: 0 0 0 1px rgba(47,91,255,.20), 0 18px 48px -16px rgba(47,91,255,.35);
  --pub-glow-night: 0 0 0 1px rgba(44,204,228,.18), 0 24px 80px -24px rgba(44,204,228,.35);

  --pub-radius-sm: 8px;
  --pub-radius-md: 12px;
  --pub-radius-lg: 16px;
  --pub-radius-xl: 24px;
  --pub-radius-pill: 999px;

  --pub-container: 1200px;
  --pub-container-wide: 1320px;
  --pub-prose: 68ch;

  --pub-dur-fast: 150ms;
  --pub-dur: 220ms;
  --pub-dur-reveal: 480ms;
  --pub-ease: cubic-bezier(.2,.7,.2,1);

  /* Derived / supporting tokens (Public-only). */
  --pub-font: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pub-link: var(--pub-accent);
  --pub-ring-gap: var(--pub-bg);
  --pub-ring: 0 0 0 2px var(--pub-ring-gap), 0 0 0 4px var(--pub-accent);
  --pub-gutter: 16px;
  --pub-section-y: clamp(56px, 8vw, 128px);
  --pub-nav-h: 56px;

  --pub-space-1: 4px;
  --pub-space-2: 8px;
  --pub-space-3: 12px;
  --pub-space-4: 16px;
  --pub-space-5: 24px;
  --pub-space-6: 32px;
  --pub-space-7: 48px;
  --pub-space-8: 64px;
  --pub-space-9: 96px;
  --pub-space-10: 128px;
}

@media (min-width: 480px)  { :where(#public-view, .pub-site) { --pub-gutter: 20px; } }
@media (min-width: 768px)  { :where(#public-view, .pub-site) { --pub-gutter: 32px; --pub-nav-h: 64px; } }
@media (min-width: 1024px) { :where(#public-view, .pub-site) { --pub-gutter: 40px; } }
@media (min-width: 1440px) { :where(#public-view, .pub-site) { --pub-gutter: 48px; } }


/* --------------------------------------------------------------------------
   2. Canvas and night bands
   A night band re-maps the semantic tokens, so every component placed
   inside it adapts without a separate "dark" variant.
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-canvas,
#public-view.pub-canvas,
.pub-site.pub-canvas {
  background-color: var(--pub-bg);
  color: var(--pub-text);
  font-family: var(--pub-font);
  -webkit-font-smoothing: antialiased;
}

:is(#public-view, .pub-site) .pub-night {
  --pub-surface: var(--pub-night-surface);
  --pub-surface-elevated: var(--pub-night-surface);
  --pub-border: var(--pub-night-border);
  --pub-border-strong: var(--pub-night-border);
  --pub-text: var(--pub-night-text);
  --pub-text-secondary: var(--pub-night-text-secondary);
  --pub-text-muted: var(--pub-night-text-secondary);
  --pub-accent-soft: rgba(143, 168, 255, .12);
  --pub-link: var(--pub-night-link);
  --pub-ring-gap: var(--pub-night);
  background-color: var(--pub-night);
  color: var(--pub-text);
}

/* Muted text on the soft surface is darkened so it stays >= 4.5:1 there. */
:is(#public-view, .pub-site) .pub-bg-soft { background-color: var(--pub-bg-soft); --pub-text-muted: #5B6480; }
:is(#public-view, .pub-site) .pub-bg { background-color: var(--pub-bg); }


/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-container,
:is(#public-view, .pub-site) .pub-container-wide,
:is(#public-view, .pub-site) .pub-container-prose {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pub-gutter);
}
:is(#public-view, .pub-site) .pub-container { max-width: calc(var(--pub-container) + 2 * var(--pub-gutter)); }
:is(#public-view, .pub-site) .pub-container-wide { max-width: calc(var(--pub-container-wide) + 2 * var(--pub-gutter)); }
:is(#public-view, .pub-site) .pub-container-prose { max-width: calc(var(--pub-prose) + 2 * var(--pub-gutter)); }

:is(#public-view, .pub-site) .pub-section { padding-block: var(--pub-section-y); }
:is(#public-view, .pub-site) .pub-section-tight { padding-block: calc(var(--pub-section-y) * .6); }
:is(#public-view, .pub-site) .pub-divider { border: 0; border-top: 1px solid var(--pub-border); margin: 0; }

:is(#public-view, .pub-site) .pub-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--pub-space-3);
  max-width: 60ch;
  margin-bottom: var(--pub-space-7);
}
:is(#public-view, .pub-site) .pub-section-head.pub-center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

:is(#public-view, .pub-site) .pub-stack { display: flex; flex-direction: column; gap: var(--pub-space-4); }
:is(#public-view, .pub-site) .pub-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pub-space-3); }

/* Grids collapse deliberately: 1 column on phones, then 2, then 3. */
:is(#public-view, .pub-site) .pub-grid-2,
:is(#public-view, .pub-site) .pub-grid-3,
:is(#public-view, .pub-site) .pub-grid-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-5);
}
@media (min-width: 768px) {
  :is(#public-view, .pub-site) .pub-grid-2,
  :is(#public-view, .pub-site) .pub-grid-3,
  :is(#public-view, .pub-site) .pub-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  :is(#public-view, .pub-site) .pub-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(#public-view, .pub-site) .pub-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(#public-view, .pub-site) .pub-grid-2,
  :is(#public-view, .pub-site) .pub-grid-3,
  :is(#public-view, .pub-site) .pub-grid-4 { gap: var(--pub-space-6); }
}


/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) :is(.pub-display, .pub-h1, .pub-h2, .pub-h3, .pub-eyebrow, .pub-lead, .pub-body, .pub-caption) {
  font-family: var(--pub-font);
  margin: 0;
}

:is(#public-view, .pub-site) .pub-display {
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--pub-text);
  text-wrap: balance;
}
:is(#public-view, .pub-site) .pub-h1 {
  font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--pub-text);
  text-wrap: balance;
}
:is(#public-view, .pub-site) .pub-h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--pub-text);
  text-wrap: balance;
}
:is(#public-view, .pub-site) .pub-h3 {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pub-link);
}
:is(#public-view, .pub-site) .pub-lead {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--pub-text-secondary);
  max-width: 60ch;
}
:is(#public-view, .pub-site) .pub-body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--pub-text-secondary);
}
:is(#public-view, .pub-site) .pub-caption {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pub-text-muted);
}
:is(#public-view, .pub-site) .pub-num { font-variant-numeric: tabular-nums; }
:is(#public-view, .pub-site) .pub-text-accent { color: var(--pub-link); }

:is(#public-view, .pub-site) .pub-link {
  color: var(--pub-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--pub-dur-fast) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-link:hover { color: var(--pub-accent-strong); }
:is(#public-view, .pub-site) .pub-night .pub-link:hover { color: var(--pub-night-text); }


/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pub-space-2);
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--pub-radius-md);
  box-shadow: none;
  font-family: var(--pub-font);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--pub-dur) var(--pub-ease),
    border-color var(--pub-dur) var(--pub-ease),
    color var(--pub-dur) var(--pub-ease),
    box-shadow var(--pub-dur) var(--pub-ease),
    transform var(--pub-dur-fast) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-btn-lg { min-height: 48px; padding: 0 24px; font-size: 1rem; }
:is(#public-view, .pub-site) .pub-btn-block { display: flex; width: 100%; }

/* Primary: brand blue, white text (about 5.2:1). */
:is(#public-view, .pub-site) .pub-btn-primary {
  background-color: var(--pub-accent);
  border-color: var(--pub-accent);
  color: #FFFFFF;
}
:is(#public-view, .pub-site) .pub-btn-primary:hover {
  background-color: var(--pub-accent-strong);
  border-color: var(--pub-accent-strong);
  box-shadow: var(--pub-glow);
  transform: translateY(-1px);
}
:is(#public-view, .pub-site) .pub-night .pub-btn-primary:hover { box-shadow: var(--pub-glow-night); }
:is(#public-view, .pub-site) .pub-btn-primary:active {
  background-color: var(--pub-accent-strong);
  box-shadow: none;
  transform: translateY(0);
}

/* Secondary: light surface, strong border, ink text. */
:is(#public-view, .pub-site) .pub-btn-secondary {
  background-color: var(--pub-surface);
  border-color: var(--pub-border-strong);
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-btn-secondary:hover {
  border-color: var(--pub-link);
  color: var(--pub-link);
  transform: translateY(-1px);
}
:is(#public-view, .pub-site) .pub-btn-secondary:active {
  background-color: var(--pub-bg-soft);
  transform: translateY(0);
}
:is(#public-view, .pub-site) .pub-night .pub-btn-secondary {
  background-color: transparent;
  border-color: var(--pub-night-border);
  color: var(--pub-night-text);
}
:is(#public-view, .pub-site) .pub-night .pub-btn-secondary:hover {
  border-color: var(--pub-night-link);
  color: var(--pub-night-link);
}
:is(#public-view, .pub-site) .pub-night .pub-btn-secondary:active { background-color: rgba(143, 168, 255, .08); }

/* Text / ghost: accent text with an optional trailing arrow (.pub-btn-arrow). */
:is(#public-view, .pub-site) .pub-btn-text {
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border-color: transparent;
  color: var(--pub-link);
}
:is(#public-view, .pub-site) .pub-btn-text:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:is(#public-view, .pub-site) .pub-btn-arrow {
  display: inline-block;
  transition: transform var(--pub-dur-fast) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-btn:hover .pub-btn-arrow { transform: translateX(2px); }

/* Disabled (native attribute or aria-disabled on links). */
:is(#public-view, .pub-site) .pub-btn:disabled,
:is(#public-view, .pub-site) .pub-btn[aria-disabled="true"] {
  opacity: .45;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   6. Chips
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-chip {
  display: inline-flex;
  width: fit-content;          /* never stretched by a flex-column parent */
  max-width: 100%;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--pub-radius-pill);
  background-color: var(--pub-accent-soft);
  color: var(--pub-link);
  font-family: var(--pub-font);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
:is(#public-view, .pub-site) a.pub-chip { min-height: 32px; transition: background-color var(--pub-dur) var(--pub-ease), color var(--pub-dur) var(--pub-ease); }
:is(#public-view, .pub-site) a.pub-chip:hover,
:is(#public-view, .pub-site) .pub-chip-active {
  background-color: var(--pub-accent);
  color: #FFFFFF;
}
:is(#public-view, .pub-site) .pub-chip-neutral {
  background-color: var(--pub-bg-soft);
  color: var(--pub-text-secondary);
}


/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pub-space-3);
  min-width: 0;
  padding: var(--pub-space-5);
  background-color: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  box-shadow: var(--pub-shadow-sm);
  color: var(--pub-text);
}
@media (min-width: 1024px) {
  :is(#public-view, .pub-site) .pub-card { padding: var(--pub-space-6); }
}

/* Only clickable cards lift. */
:is(#public-view, .pub-site) .pub-card-interactive {
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--pub-dur) var(--pub-ease),
    box-shadow var(--pub-dur) var(--pub-ease),
    border-color var(--pub-dur) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--pub-shadow-md);
  border-color: rgba(47, 91, 255, .35);
}

/* Feature card: icon tile + title + short text. */
:is(#public-view, .pub-site) .pub-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--pub-radius-md);
  background-color: var(--pub-accent-soft);
  color: var(--pub-link);
}
:is(#public-view, .pub-site) .pub-icon-tile svg { width: 20px; height: 20px; }

/* Article card: contained media (never cropped), chip, title, excerpt, meta. */
:is(#public-view, .pub-site) .pub-card-article { padding: 0; gap: 0; overflow: hidden; }
:is(#public-view, .pub-site) .pub-card-media {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pub-bg-soft);
  border-bottom: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
:is(#public-view, .pub-site) .pub-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--pub-space-3);
  padding: var(--pub-space-5);
}
:is(#public-view, .pub-site) .pub-card-title {
  margin: 0;
  font-family: var(--pub-font);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pub-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:is(#public-view, .pub-site) .pub-card-excerpt {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--pub-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:is(#public-view, .pub-site) .pub-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--pub-text-muted);
}

/* Pricing card: plan name, price, feature list, CTA. The highlighted plan is a night card. */
:is(#public-view, .pub-site) .pub-card-pricing { gap: var(--pub-space-5); padding: var(--pub-space-6); }
:is(#public-view, .pub-site) .pub-card-pricing.is-featured {
  --pub-surface: var(--pub-night-surface);
  --pub-border: var(--pub-night-border);
  --pub-text: var(--pub-night-text);
  --pub-text-secondary: var(--pub-night-text-secondary);
  --pub-text-muted: var(--pub-night-text-secondary);
  --pub-link: var(--pub-night-link);
  --pub-accent-soft: rgba(143, 168, 255, .12);
  --pub-ring-gap: var(--pub-night-surface);
  box-shadow: var(--pub-glow-night);
}
:is(#public-view, .pub-site) .pub-price {
  font-family: var(--pub-font);
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pub-space-3);
  color: var(--pub-text-secondary);
}
:is(#public-view, .pub-site) .pub-check-list li {
  position: relative;
  padding-left: 28px;
  line-height: 1.5;
}
:is(#public-view, .pub-site) .pub-check-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .3em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pub-accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--pub-link);
}
:is(#public-view, .pub-site) .pub-check-list li::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: calc(.3em + 4px);
  width: 4px;
  height: 7px;
  border: solid var(--pub-link);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Information card: dense plain text, no shadow. */
:is(#public-view, .pub-site) .pub-card-info {
  --pub-text-muted: #5B6480;
  background-color: var(--pub-bg-soft);
  box-shadow: none;
}

/* Product frame: the only place screenshots/mockups are presented. */
:is(#public-view, .pub-site) .pub-product-frame {
  box-sizing: border-box;
  position: relative;
  padding: 8px;
  background-color: var(--pub-night-surface);
  border: 1px solid var(--pub-night-border);
  border-radius: var(--pub-radius-xl);
  box-shadow: var(--pub-glow-night);
  overflow: hidden;
}
:is(#public-view, .pub-site) .pub-product-frame-bar {
  display: flex;
  align-items: center;
  gap: var(--pub-space-2);
  padding: 6px 10px 10px;
  font-family: var(--pub-font);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pub-night-text-secondary);
}
:is(#public-view, .pub-site) .pub-product-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--pub-radius-xl) - 8px);
}


/* --------------------------------------------------------------------------
   8. Navigation (sticky header + mobile sheet)
   Markup hooks only -- existing menu scripts keep toggling their own ids;
   the sheet is shown with .is-open on .pub-nav or the native [hidden] attr.
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--pub-bg);
  border-bottom: 1px solid var(--pub-border);
  font-family: var(--pub-font);
}
:is(#public-view, .pub-site) .pub-nav-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pub-space-4);
  width: 100%;
  max-width: calc(var(--pub-container) + 2 * var(--pub-gutter));
  min-height: var(--pub-nav-h);
  margin-inline: auto;
  padding-inline: var(--pub-gutter);
}
:is(#public-view, .pub-site) .pub-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pub-space-2);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pub-text);
  text-decoration: none;
}
:is(#public-view, .pub-site) .pub-nav-links {
  display: none;
  align-items: center;
  gap: var(--pub-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(#public-view, .pub-site) .pub-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--pub-text-secondary);
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  transition: color var(--pub-dur-fast) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-nav-link:hover { color: var(--pub-text); }
:is(#public-view, .pub-site) .pub-nav-link[aria-current="page"] {
  color: var(--pub-text);
  text-decoration-line: underline;
  text-decoration-color: var(--pub-accent);
}
:is(#public-view, .pub-site) .pub-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--pub-space-2);
}
:is(#public-view, .pub-site) .pub-nav-actions .pub-btn-secondary,
:is(#public-view, .pub-site) .pub-nav-actions .pub-btn-text { display: none; }

:is(#public-view, .pub-site) .pub-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
  color: var(--pub-text);
  cursor: pointer;
}
:is(#public-view, .pub-site) .pub-nav-toggle svg { width: 20px; height: 20px; }

:is(#public-view, .pub-site) .pub-mobile-menu {
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  padding: var(--pub-space-2) var(--pub-gutter) var(--pub-space-5);
  background-color: var(--pub-surface-elevated);
  border-top: 1px solid var(--pub-border);
  box-shadow: var(--pub-shadow-md);
}
:is(#public-view, .pub-site) .pub-nav.is-open .pub-mobile-menu,
:is(#public-view, .pub-site) .pub-mobile-menu.is-open { display: flex; }
:is(#public-view, .pub-site) .pub-mobile-menu[hidden] { display: none; }
:is(#public-view, .pub-site) .pub-mobile-menu .pub-nav-link {
  min-height: 48px;
  border-bottom: 1px solid var(--pub-border);
  font-size: 1rem;
}
:is(#public-view, .pub-site) .pub-mobile-menu .pub-btn { margin-top: var(--pub-space-4); width: 100%; }

@media (min-width: 900px) {
  :is(#public-view, .pub-site) .pub-nav-links { display: flex; }
  :is(#public-view, .pub-site) .pub-nav-actions .pub-btn-secondary,
  :is(#public-view, .pub-site) .pub-nav-actions .pub-btn-text { display: inline-flex; }
  :is(#public-view, .pub-site) .pub-nav-toggle,
  :is(#public-view, .pub-site) .pub-nav .pub-mobile-menu,
  :is(#public-view, .pub-site) .pub-nav.is-open .pub-mobile-menu { display: none; }
}


/* --------------------------------------------------------------------------
   9. Footer (night)
   Explore and Company stay side by side at every width.
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-footer {
  --pub-surface: var(--pub-night-surface);
  --pub-border: var(--pub-night-border);
  --pub-text: var(--pub-night-text);
  --pub-text-secondary: var(--pub-night-text-secondary);
  --pub-text-muted: var(--pub-night-text-secondary);
  --pub-link: var(--pub-night-link);
  --pub-ring-gap: var(--pub-night);
  background-color: var(--pub-night);
  color: var(--pub-night-text);
  font-family: var(--pub-font);
  padding-block: var(--pub-space-8) var(--pub-space-6);
}
:is(#public-view, .pub-site) .pub-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pub-space-6) var(--pub-space-5);
}
:is(#public-view, .pub-site) .pub-footer-brand,
:is(#public-view, .pub-site) .pub-footer-social-group { grid-column: 1 / -1; }
:is(#public-view, .pub-site) .pub-footer-heading {
  margin: 0 0 var(--pub-space-3);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pub-night-text);
}
:is(#public-view, .pub-site) .pub-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pub-space-1);
}
:is(#public-view, .pub-site) .pub-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--pub-night-text-secondary);
  text-decoration: none;
  transition: color var(--pub-dur-fast) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-footer-link:hover { color: var(--pub-night-text); }
:is(#public-view, .pub-site) .pub-footer-contact {
  font-size: .9375rem;
  color: var(--pub-night-text-secondary);
}
:is(#public-view, .pub-site) .pub-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pub-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
:is(#public-view, .pub-site) .pub-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pub-night-border);
  border-radius: var(--pub-radius-md);
  color: var(--pub-night-text-secondary);
  transition: color var(--pub-dur-fast) var(--pub-ease), border-color var(--pub-dur-fast) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-footer-social a:hover { color: var(--pub-night-text); border-color: var(--pub-night-link); }
:is(#public-view, .pub-site) .pub-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pub-space-3) var(--pub-space-5);
  margin-top: var(--pub-space-7);
  padding-top: var(--pub-space-5);
  border-top: 1px solid var(--pub-night-border);
  font-size: .875rem;
  color: var(--pub-night-text-secondary);
}
:is(#public-view, .pub-site) .pub-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pub-space-2) var(--pub-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 480px) {
  :is(#public-view, .pub-site) .pub-footer-social { justify-content: flex-start; }
}
@media (min-width: 768px) {
  :is(#public-view, .pub-site) .pub-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(#public-view, .pub-site) .pub-footer-social-group { grid-column: auto; }
}
@media (min-width: 1024px) {
  :is(#public-view, .pub-site) .pub-footer-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  :is(#public-view, .pub-site) .pub-footer-brand { grid-column: auto; }
}


/* --------------------------------------------------------------------------
   10. Article and prose
   Presentation only: content, metadata, JSON-LD, Related-reading selection
   and Share behaviour are owned by the blog pipeline and stay unchanged.
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--pub-space-5);
  font-size: .875rem;
  color: var(--pub-text-muted);
}
:is(#public-view, .pub-site) .pub-breadcrumb a { color: var(--pub-link); text-decoration: none; }
:is(#public-view, .pub-site) .pub-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

:is(#public-view, .pub-site) .pub-article-header {
  display: flex;
  flex-direction: column;
  gap: var(--pub-space-4);
  padding-bottom: var(--pub-space-6);
  margin-bottom: var(--pub-space-7);
  border-bottom: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--pub-text-muted);
}

/* Article layout: one column; from 1024px, prose + 280px sticky sidebar. */
:is(#public-view, .pub-site) .pub-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pub-space-8);
}
:is(#public-view, .pub-site) .pub-article-main { min-width: 0; max-width: var(--pub-prose); }
@media (min-width: 1024px) {
  :is(#public-view, .pub-site) .pub-article { grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--pub-space-9); }
  :is(#public-view, .pub-site) .pub-article-aside { position: sticky; top: calc(var(--pub-nav-h) + 24px); align-self: start; }
}

:is(#public-view, .pub-site) .pub-prose {
  max-width: var(--pub-prose);
  font-family: var(--pub-font);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--pub-text-secondary);
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  :is(#public-view, .pub-site) .pub-prose { font-size: 1.125rem; }
}
:is(#public-view, .pub-site) .pub-prose > :first-child { margin-top: 0; }
:is(#public-view, .pub-site) .pub-prose :is(h2, h3, h4) {
  font-family: var(--pub-font);
  color: var(--pub-text);
  text-wrap: balance;
}
:is(#public-view, .pub-site) .pub-prose h2 {
  margin: 3rem 0 1rem;
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
:is(#public-view, .pub-site) .pub-prose h3 {
  margin: 2rem 0 .75rem;
  font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
}
:is(#public-view, .pub-site) .pub-prose p { margin: 0 0 1.25em; }
:is(#public-view, .pub-site) .pub-prose strong { color: var(--pub-text); font-weight: 700; }
:is(#public-view, .pub-site) .pub-prose a {
  color: var(--pub-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(#public-view, .pub-site) .pub-prose a:hover { color: var(--pub-accent-strong); }
:is(#public-view, .pub-site) .pub-prose :is(ul, ol) { margin: 0 0 1.25em; padding-left: 1.25em; }
:is(#public-view, .pub-site) .pub-prose li { margin: .35em 0; padding-left: .25em; }
:is(#public-view, .pub-site) .pub-prose li::marker { color: var(--pub-accent); }
:is(#public-view, .pub-site) .pub-prose blockquote {
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--pub-accent);
  font-size: 1.125em;
  font-style: italic;
  color: var(--pub-text-secondary);
}
:is(#public-view, .pub-site) .pub-prose :not(pre) > code {
  padding: .12em .4em;
  border-radius: 6px;
  background-color: var(--pub-bg-soft);
  font-size: .9em;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-prose pre {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border-radius: var(--pub-radius-md);
  background-color: var(--pub-night);
  color: var(--pub-night-text);
  font-size: .9rem;
  line-height: 1.6;
}
:is(#public-view, .pub-site) .pub-prose pre code { background: none; padding: 0; color: inherit; }
:is(#public-view, .pub-site) .pub-prose hr { border: 0; border-top: 1px solid var(--pub-border); margin: 2.5rem 0; }
:is(#public-view, .pub-site) .pub-prose :is(img, svg, video) { max-width: 100%; height: auto; }
:is(#public-view, .pub-site) .pub-prose figure { margin: 2rem 0; }
:is(#public-view, .pub-site) .pub-prose figure img,
:is(#public-view, .pub-site) .pub-prose > p > img {
  display: block;
  margin-inline: auto;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
  background-color: var(--pub-bg-soft);
}
:is(#public-view, .pub-site) .pub-prose figcaption {
  margin-top: .75rem;
  font-size: .875rem;
  line-height: 1.5;
  text-align: center;
  color: var(--pub-text-muted);
}
/* Tables scroll inside their own wrapper, never the page. */
:is(#public-view, .pub-site) .pub-table-wrap { margin: 2rem 0; overflow-x: auto; }
:is(#public-view, .pub-site) .pub-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
}
:is(#public-view, .pub-site) .pub-prose :is(th, td) {
  padding: .65rem .8rem;
  border: 1px solid var(--pub-border);
  text-align: left;
  vertical-align: top;
}
:is(#public-view, .pub-site) .pub-prose th { background-color: var(--pub-bg-soft); color: var(--pub-text); font-weight: 700; }

/* Related reading (sidebar on desktop, after the article below 1024px). */
:is(#public-view, .pub-site) .pub-related-heading {
  margin: 0 0 var(--pub-space-4);
  font-family: var(--pub-font);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pub-text);
}
:is(#public-view, .pub-site) .pub-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pub-space-4);
}
:is(#public-view, .pub-site) .pub-related-item {
  padding-bottom: var(--pub-space-4);
  border-bottom: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-related-item a {
  font-weight: 700;
  line-height: 1.35;
  color: var(--pub-text);
  text-decoration: none;
}
:is(#public-view, .pub-site) .pub-related-item a:hover { color: var(--pub-link); }
:is(#public-view, .pub-site) .pub-related-item p { margin: .35rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--pub-text-muted); }

/* Share: presentation for the existing control and its fallback menu. */
:is(#public-view, .pub-site) .pub-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pub-space-3);
  margin-top: var(--pub-space-7);
  padding-top: var(--pub-space-5);
  border-top: 1px solid var(--pub-border);
}
:is(#public-view, .pub-site) .pub-popover {
  box-sizing: border-box;
  min-width: 200px;
  padding: var(--pub-space-2);
  background-color: var(--pub-surface-elevated);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
  box-shadow: var(--pub-shadow-lg);
}

/* CTA panel (end of articles, final homepage CTA): a night panel. */
:is(#public-view, .pub-site) .pub-cta-panel {
  --pub-surface: var(--pub-night-surface);
  --pub-border: var(--pub-night-border);
  --pub-text: var(--pub-night-text);
  --pub-text-secondary: var(--pub-night-text-secondary);
  --pub-text-muted: var(--pub-night-text-secondary);
  --pub-link: var(--pub-night-link);
  --pub-ring-gap: var(--pub-night);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--pub-space-4);
  margin-top: var(--pub-space-8);
  padding: var(--pub-space-6);
  background-color: var(--pub-night);
  border: 1px solid var(--pub-night-border);
  border-radius: var(--pub-radius-xl);
  box-shadow: var(--pub-glow-night);
  color: var(--pub-night-text);
}
@media (min-width: 768px) {
  :is(#public-view, .pub-site) .pub-cta-panel { padding: var(--pub-space-7); }
}


/* --------------------------------------------------------------------------
   11. Focus
   Always visible for keyboard users; never removed.
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) :is(
  .pub-btn, .pub-link, .pub-chip, .pub-card-interactive, .pub-nav-link, .pub-nav-brand,
  .pub-nav-toggle, .pub-footer-link, .pub-focus
):focus-visible,
:is(#public-view, .pub-site) :is(.pub-prose, .pub-breadcrumb, .pub-related-item, .pub-footer-social) a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--pub-ring);
  border-radius: var(--pub-radius-sm);
}
:is(#public-view, .pub-site) :is(.pub-btn, .pub-card-interactive):focus-visible { border-radius: inherit; }
:is(#public-view, .pub-site) .pub-btn:focus-visible { border-radius: var(--pub-radius-md); }
:is(#public-view, .pub-site) .pub-card-interactive:focus-visible { border-radius: var(--pub-radius-lg); }


/* --------------------------------------------------------------------------
   12. Motion: one-time reveal (opt-in via .pub-reveal / .is-visible)
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--pub-dur-reveal) var(--pub-ease), transform var(--pub-dur-reveal) var(--pub-ease);
}
:is(#public-view, .pub-site) .pub-reveal.is-visible { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   13. Utilities
   -------------------------------------------------------------------------- */

:is(#public-view, .pub-site) .pub-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:is(#public-view, .pub-site) .pub-center { text-align: center; }
:is(#public-view, .pub-site) .pub-hide-mobile { display: none; }
@media (min-width: 768px) {
  :is(#public-view, .pub-site) .pub-hide-mobile { display: revert; }
  :is(#public-view, .pub-site) .pub-show-mobile { display: none; }
}
/* Stacks side-by-side CTAs full-width on phones. */
@media (max-width: 479.98px) {
  :is(#public-view, .pub-site) .pub-cta-row { flex-direction: column; align-items: stretch; }
  :is(#public-view, .pub-site) .pub-cta-row .pub-btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   14. Reduced motion
   Colour/opacity feedback stays; movement and long transitions go.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :is(#public-view, .pub-site) :is(
    .pub-btn, .pub-btn-arrow, .pub-card-interactive, .pub-chip, .pub-link,
    .pub-nav-link, .pub-footer-link, .pub-footer-social a
  ) {
    transition-duration: 1ms;
  }
  :is(#public-view, .pub-site) :is(.pub-btn, .pub-card-interactive):hover,
  :is(#public-view, .pub-site) .pub-btn:hover .pub-btn-arrow { transform: none; }
  :is(#public-view, .pub-site) .pub-reveal { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   15. Homepage (#public-view only) -- Phase 2
   --------------------------------------------------------------------------
   Every selector below starts with #public-view, so none of it can reach
   #dashboard-view, #auth-view or the standalone .pub-site pages.

   index.html still carries the retired Neo-Brutalist #public-view rules.
   Where one of them can still match the new markup (kept script ids such as
   #hero-tagline, #public-mobile-menu, #footer-sign-in-btn, #demo-workspace,
   and generic "header nav a" / "footer a" selectors), the override here is
   written one class heavier than the old rule, so it wins without editing
   the old block. Specificity noted as (ids,classes,elements).
   ========================================================================== */

/* ---- Header ---------------------------------------------------------------- */

#public-view .pub-home-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
/* Retire the old header "pill" pseudo-element (#public-view header nav a::before, 1,0,4). */
#public-view .pub-home-nav .pub-nav-link::before { content: none; }
#public-view .pub-home-nav .pub-nav-link { font-weight: 500; }

/* The header CTA joins the burger from 480px; below that it lives in the menu. */
#public-view .pub-home-nav-cta { display: none; }
@media (min-width: 480px) {
  #public-view .pub-home-nav-cta { display: inline-flex; }
}

/* Mobile menu: the existing animated drop panel (#public-mobile-menu, toggled
   by the script through .hidden) keeps its open/close mechanism; only its
   look changes here (old rules: #public-mobile-menu 1,0,0; #public-view
   #public-mobile-menu 2,0,0). */
#public-view #public-mobile-menu.pub-home-mm {
  padding: 8px var(--pub-gutter) 20px;
  gap: 0;
  background: var(--pub-surface-elevated);
  border: 0;
  border-top: 1px solid var(--pub-border);
  border-bottom: 1px solid var(--pub-border);
  box-shadow: var(--pub-shadow-md);
  font-family: var(--pub-font);
}
#public-view #public-mobile-menu.pub-home-mm nav { display: flex; flex-direction: column; }
#public-view #public-mobile-menu.pub-home-mm .pub-nav-link {
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--pub-border);
  font-size: 1rem;
  font-weight: 500;
  color: var(--pub-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#public-view #public-mobile-menu.pub-home-mm .pub-btn { margin-top: 16px; }
/* The burger is shown up to 900px, so the panel must be available there too
   (the old rule hid it from 768px). */
@media (min-width: 768px) and (max-width: 899.98px) {
  #public-view #public-mobile-menu.pub-home-mm { display: flex; }
}
@media (min-width: 900px) {
  #public-view #public-mobile-menu.pub-home-mm { display: none; }
}

/* Retire the looping CTA pulse (.sc-global-cta-pulse, 0,1,0) on the new buttons. */
#public-view .pub-btn.sc-global-cta-pulse { animation: none; }


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

/* The hero is deliberately compact: the live demo below only plays while it is
   on screen, so its top edge must land inside the first viewport (the old
   layout's demo-top was 670px at 1280x720 and 496px at 375x800). */
#public-view .pub-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3.5vw, 44px);
  text-align: center;
}
#public-view .pub-home-hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto;
  height: 90%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 60% at 50% 35%, rgba(47, 91, 255, .12), transparent 70%);
}
#public-view .pub-home-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* Beats the old #public-view #hero-tagline sizing (2,0,0). */
#public-view #hero-tagline.pub-display {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--pub-text);
}
#public-view .pub-home-hero-lead { max-width: min(100%, 58rem); margin-inline: auto; }
#public-view .pub-home-hero-ctas { justify-content: center; margin-top: 4px; }

/* ---- Hero: asymmetric layout + product visual (Books-hero quality bar) ----
   Mobile/tablet (<960px, the same breakpoint the Books hero switches at):
   .pub-home-hero-copy and .pub-home-hero-visual simply stack as the two
   flex children of .pub-home-hero-inner, both centered -- the existing,
   already-tuned mobile hero (headline clamp, 480px notch, entrance timing)
   is untouched; only a compact product-visual card is added beneath it.
   >=960px: .pub-home-hero-inner becomes a two-column grid, copy left, one
   real static "scheduled post" card right -- an editorial focal point in
   the Books-hero spirit, built only from copy already shown verbatim in
   the live demo below (never invented). */
#public-view .pub-home-hero-copy { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
#public-view .pub-home-hero-visual { display: flex; justify-content: center; width: 100%; margin-top: 8px; }
/* Transparent floating object: two translucent glass layers (rear analytics
   card, front composer card) instead of a solid boxed screenshot -- the
   deep navy hero shows through around and between them. Colors are the
   night-theme tokens with alpha, not the light-theme card this replaced. */
#public-view .pub-home-hero-object {
  position: relative;
  width: min(100%, 360px);
  min-height: 250px;
}
#public-view .pub-home-hero-object::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background: radial-gradient(closest-side, rgba(44,204,228,.14), rgba(44,204,228,0) 72%);
  z-index: -1;
  pointer-events: none;
}
#public-view .pub-home-hero-layer {
  position: absolute;
  border-radius: 18px;
  background: rgba(18, 26, 46, .58);
  border: 1px solid rgba(143, 168, 255, .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 28px 56px -26px rgba(0,0,0,.55);
  text-align: left;
}
#public-view .pub-home-hero-layer-rear {
  top: 0;
  left: 0;
  width: 56%;
  padding: 14px 16px;
  transform: rotate(-6deg);
  opacity: .85;
}
#public-view .pub-home-hero-layer-front {
  right: 0;
  bottom: 0;
  width: 78%;
  padding: 18px 20px;
  transform: rotate(-1.4deg);
}
#public-view .pub-home-hero-rear-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--pub-night-text-secondary); font-size: .75rem; font-weight: 600; }
#public-view .pub-home-hero-rear-bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; }
#public-view .pub-home-hero-rear-bars span { width: 8px; border-radius: 3px; background: var(--pub-accent-secondary); opacity: .55; }
#public-view .pub-home-hero-rear-bars span:nth-child(1) { height: 40%; }
#public-view .pub-home-hero-rear-bars span:nth-child(2) { height: 65%; }
#public-view .pub-home-hero-rear-bars span:nth-child(3) { height: 50%; }
#public-view .pub-home-hero-rear-bars span:nth-child(4) { height: 85%; opacity: 1; }
#public-view .pub-home-hero-rear-bars span:nth-child(5) { height: 60%; }
#public-view .pub-home-hero-visual-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--pub-night-text-secondary); font-size: .8125rem; }
#public-view .pub-home-hero-visual-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: rgba(143,168,255,.16); color: var(--pub-night-link);
}
#public-view .pub-home-hero-visual-text { margin: 0 0 12px; font-size: .9375rem; font-weight: 600; color: var(--pub-night-text); line-height: 1.4; }
#public-view .pub-home-hero-visual-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#public-view .pub-home-hero-visual-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(238,242,255,.08); border: 1px solid rgba(143,168,255,.16);
  color: var(--pub-night-text-secondary); font-size: .75rem;
}
#public-view .pub-home-hero-visual-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(44,204,228,.16); color: var(--pub-accent-secondary);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
/* Amplitude raised (7px/10px -> 10px/12px, still inside the intended
   6-12px range) and the two layers desynced with a negative delay so they
   don't rise in lockstep -- the previous perfectly-together motion read as
   the whole object barely shifting; offsetting the phase makes the
   parallax between rear and front layers the thing the eye actually
   catches, without changing amplitude enough to feel bouncy. */
#public-view .pub-home-hero-layer-rear { animation: pubHomeVisualFloatRear 8s ease-in-out infinite alternate; }
#public-view .pub-home-hero-layer-front { animation: pubHomeVisualFloatFront 6.5s ease-in-out -2.4s infinite alternate; }
@keyframes pubHomeVisualFloatRear {
  from { transform: rotate(-6deg) translateY(0); }
  to   { transform: rotate(-6deg) translateY(-10px); }
}
@keyframes pubHomeVisualFloatFront {
  from { transform: rotate(-1.4deg) translateY(0); }
  to   { transform: rotate(-1.4deg) translateY(-12px); }
}

/* Below 960px, the live demo section right after the hero must still start
   inside the first viewport -- it only starts its guided story once
   visible on screen (see the "Kept compact on purpose" comment on
   #live-demo), and that budget was already tight before this card existed.
   The decorative visual card is a bonus on top of an already-complete
   text/CTA/trust composition, so on phone and tablet widths it steps aside
   rather than risk pushing the real, functional demo below the fold;
   desktop (>=960px, where the two-column grid also kicks in, and where
   there is real headroom) shows it. */
@media (max-width: 959.98px) {
  #public-view .pub-home-hero-copy { gap: 10px; }
  #public-view .pub-home-hero-visual { display: none; }
}

@media (min-width: 960px) {
  #public-view .pub-home-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
    text-align: left;
  }
  #public-view .pub-home-hero-copy { align-items: flex-start; }
  #public-view .pub-home-hero-lead { margin-inline: 0; }
  #public-view .pub-home-hero-ctas { justify-content: flex-start; }
  #public-view .pub-home-hero-visual { margin-top: 0; }
  #public-view .pub-home-hero-object { width: min(100%, 380px); }
}

/* ---- Hero: compact trust/value strip (same dot-bullet device as the
   Books hero's .pub-books-trust, homepage's own real claims) ------------ */
#public-view .pub-home-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--pub-text-secondary);
}
#public-view .pub-home-trust li { display: flex; align-items: center; gap: 7px; }
#public-view .pub-home-trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pub-accent-secondary);
  flex: none;
}
@media (min-width: 960px) {
  #public-view .pub-home-trust { justify-content: flex-start; }
}


/* ---- Live demo (night band) ------------------------------------------------ */

#public-view .pub-home-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(28px, 4vw, 48px) clamp(56px, 8vw, 112px);
}
#public-view .pub-home-demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  margin-bottom: 16px;
  text-align: center;
}
#public-view .pub-home-demo-title {
  margin: 0;
  font-family: var(--pub-font);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pub-text);
}
#public-view .pub-home-demo-note { margin: 16px 0 0; text-align: center; }
#public-view .pub-home-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 40% at 50% 0%, rgba(44, 204, 228, .16), transparent 70%);
}
#public-view .pub-home-demo-frame { max-width: 1120px; margin-inline: auto; }
#public-view .pub-home-frame-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pub-accent-secondary);
  box-shadow: 0 0 8px rgba(44, 204, 228, .6);
}

/* The demo is a light app window inside the night frame: restore the daylight
   tokens the night band re-maps, and swap its old hard edges for soft ones.
   Presentation only -- no id, data-demo-nav, aria-hidden or footprint change. */
#public-view .pub-home-demo-frame #demo-workspace {
  --pub-text: #0B1020;
  --pub-link: var(--pub-accent);
  --pub-accent-soft: #EAEFFF;
  border: 0;
  border-radius: calc(var(--pub-radius-xl) - 8px);
  box-shadow: none;
  background: #FFFFFF;
}
/* Old badge rule is #public-view .sc-demo-live-badge (1,1,0) with !important. */
#public-view #demo-workspace .sc-demo-live-badge {
  color: var(--pub-accent) !important;
  background: var(--pub-accent-soft) !important;
  border-color: transparent !important;
}
/* Old: #public-view .sc-btn-accent (1,1,0) hard shadow / 2px ink border. */
#public-view #demo-workspace .sc-btn-accent {
  background: var(--pub-accent);
  border: 1px solid var(--pub-accent);
  border-radius: 10px;
  box-shadow: none;
}
#public-view #demo-workspace .sc-btn-accent:hover {
  background: var(--pub-accent-strong);
  box-shadow: none;
  transform: none;
}
/* Old press effect: #public-view #demo-workspace .sc-btn-accent.demo-pressed (2,2,0). */
#public-view .pub-home-demo-frame #demo-workspace .sc-btn-accent.demo-pressed {
  transform: scale(.97);
  box-shadow: none;
}
/* Old: #public-view .demo-flow-step.is-active (1,2,0), violet. */
#public-view #demo-workspace .demo-flow-step.is-active { color: var(--pub-accent); }
#public-view #demo-workspace .demo-chart-line { stroke: var(--pub-accent); }
#public-view #demo-workspace .demo-bottomnav-link.text-violet-600 { color: var(--pub-accent); }


/* ---- What you can count on -------------------------------------------------- */

#public-view .pub-home-proof { border-bottom: 1px solid var(--pub-border); }
#public-view .pub-home-proof-heading {
  margin: 0 0 32px;
  text-align: center;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pub-text-muted);
}
#public-view .pub-home-facts { list-style: none; margin: 0; padding: 0; }
#public-view .pub-home-fact { display: flex; align-items: flex-start; gap: 14px; }
#public-view .pub-home-fact-title {
  margin: 0 0 4px;
  font-family: var(--pub-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pub-text);
}


/* ---- Split layouts (What is SkyyCast / Analytics) --------------------------- */

#public-view .pub-home-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  #public-view .pub-home-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 80px; }
}
#public-view .pub-home-prose { display: flex; flex-direction: column; gap: 16px; }
#public-view .pub-home-prose .pub-body { max-width: 62ch; }

#public-view .pub-home-compare { display: flex; flex-direction: column; gap: 12px; }
#public-view .pub-home-compare-label {
  margin: 0 0 4px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pub-text-muted);
}
#public-view .pub-home-compare-after {
  border-color: rgba(47, 91, 255, .35);
  box-shadow: var(--pub-glow);
}
#public-view .pub-home-compare-after .pub-home-compare-label { color: var(--pub-link); }
#public-view .pub-home-compare-arrow {
  align-self: center;
  width: 24px;
  height: 24px;
  color: var(--pub-accent);
  transform: rotate(90deg);
}
#public-view .pub-home-compare-arrow svg { width: 100%; height: 100%; }
#public-view .pub-home-x-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--pub-text-secondary);
}
#public-view .pub-home-x-list li { position: relative; padding-left: 28px; line-height: 1.5; }
#public-view .pub-home-x-list li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: .12em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FDECEC;
  color: var(--pub-danger);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}


/* ---- How it works ------------------------------------------------------------ */

#public-view .pub-home-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
#public-view .pub-home-step {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  box-shadow: 0 1px 2px rgba(11,16,32,.05), 0 8px 20px -14px rgba(11,16,32,.22);
}
#public-view .pub-home-step .pub-h3 { margin-bottom: 6px; }
#public-view .pub-home-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--pub-radius-md);
  background: var(--pub-accent-soft);
  color: var(--pub-link);
  font-family: var(--pub-font);
  font-size: .875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  #public-view .pub-home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  #public-view .pub-home-step:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  #public-view .pub-home-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #public-view .pub-home-step { flex-direction: column; padding: 24px; }
  #public-view .pub-home-step:last-child { grid-column: auto; }
}
#public-view .pub-home-more { margin: 32px 0 0; }


/* ---- Analytics (night band) --------------------------------------------------- */

#public-view .pub-home-analytics { position: relative; isolation: isolate; overflow: hidden; }
#public-view .pub-home-analytics::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(45% 55% at 85% 50%, rgba(47, 91, 255, .18), transparent 70%);
}
#public-view .pub-home-pro-list { margin: 0 0 8px; }
#public-view .pub-home-metrics { gap: 20px; padding: 24px; box-shadow: var(--pub-glow-night); }
#public-view .pub-home-metrics-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#public-view .pub-home-metrics-title { margin: 0; font-weight: 700; color: var(--pub-text); }
#public-view .pub-home-metrics-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#public-view .pub-home-metrics-stats > div {
  padding: 14px;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
}
#public-view .pub-home-metrics-num {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--pub-text);
}
#public-view .pub-home-metrics-stats .pub-caption { margin-top: 4px; }
#public-view .pub-home-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  padding: 8px 4px 0;
  border-bottom: 1px solid var(--pub-border);
}
#public-view .pub-home-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--pub-accent-secondary), rgba(47, 91, 255, .55));
}
#public-view .pub-home-insight {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(44, 204, 228, .25);
  border-radius: var(--pub-radius-md);
  background: rgba(44, 204, 228, .08);
}
#public-view .pub-home-insight-label {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pub-accent-secondary);
}
#public-view .pub-home-insight-value { margin: 2px 0 0; font-weight: 700; color: var(--pub-text); }


/* ---- Pricing preview ------------------------------------------------------------ */

#public-view .pub-home-plans { max-width: 880px; margin-inline: auto; }
#public-view .pub-home-plans .pub-card-pricing .pub-btn { margin-top: auto; }
#public-view .pub-home-price-unit {
  margin-left: 4px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--pub-text-muted);
}


/* ---- Blog preview: a snap row on phones, a grid from 768px ----------------------- */

#public-view .pub-home-blog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 40px;
}
#public-view .pub-home-blog-head .pub-section-head { margin-bottom: 0; }
#public-view .pub-home-blog-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 82%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: 4px 4px 16px;
  margin: 0 -4px;
}
#public-view .pub-home-blog-grid > .pub-card { scroll-snap-align: start; }
#public-view .pub-home-blog-grid .pub-card-body { flex: 1; }
#public-view .pub-home-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: .875rem;
  font-weight: 600;
  color: var(--pub-link);
}
#public-view .pub-card-interactive:hover .pub-btn-arrow { transform: translateX(2px); }
@media (min-width: 768px) {
  #public-view .pub-home-blog-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
}
@media (min-width: 1024px) {
  #public-view .pub-home-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}


/* ---- Common questions ------------------------------------------------------------ */

#public-view .pub-home-faq { max-width: 1040px; margin-inline: auto; }
#public-view .pub-home-q {
  margin: 0;
  font-family: var(--pub-font);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pub-text);
}


/* ---- Final CTA (night) ------------------------------------------------------------ */

#public-view .pub-home-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 144px);
  text-align: center;
  border-bottom: 1px solid var(--pub-night-border);
}
#public-view .pub-home-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 70% at 50% 100%, rgba(47, 91, 255, .22), transparent 70%);
}
#public-view .pub-home-final-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
#public-view .pub-home-final .pub-h2 { max-width: 20ch; }


/* ---- Footer ------------------------------------------------------------------------ */

#public-view .pub-home-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--pub-night-text);
}
#public-view .pub-home-footer-tagline { margin: 0 0 8px; font-weight: 700; color: var(--pub-night-text); }
#public-view .pub-footer-brand .pub-footer-contact { display: block; margin: 0 0 12px; max-width: 42ch; line-height: 1.6; }
#public-view .pub-footer-brand .pub-home-footer-email { display: inline-flex; align-items: center; gap: 8px; }
#public-view .pub-home-footer-email svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Old: #public-view #footer-sign-in-btn (2,0,0). */
#public-view #footer-sign-in-btn.pub-footer-link {
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--pub-font);
  font-size: .9375rem;
  font-weight: 500;
  text-align: left;
  color: var(--pub-night-text-secondary);
  cursor: pointer;
}
#public-view #footer-sign-in-btn.pub-footer-link:hover { color: var(--pub-night-text); }
#public-view .pub-footer .pub-footer-link { font-weight: 500; }


/* ---- Reduced motion (homepage additions) ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #public-view .pub-card-interactive:hover .pub-btn-arrow { transform: none; }
}


/* ==========================================================================
   16. Homepage -- premium visual + motion pass (#public-view only)
   --------------------------------------------------------------------------
   Transform/opacity only. Everything is readable with motion off: the hero
   and demo entrances are CSS animations removed under reduced motion, and
   the scroll reveals reuse the existing .sc-reveal observer (which marks
   everything visible at once when motion is reduced).
   ========================================================================== */

@keyframes pubHomeRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pubHomeFrameIn {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes pubHomeBarGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ---- Hero: atmosphere, hierarchy, entrance ------------------------------- */

/* Faint planning grid fading out from the centre, under the existing glow. */
#public-view .pub-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11, 16, 32, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 16, 32, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 50% 30%, #000 20%, transparent 75%);
}
#public-view .pub-home-hero::before {
  background:
    radial-gradient(40% 55% at 30% 40%, rgba(47, 91, 255, .14), transparent 70%),
    radial-gradient(35% 50% at 72% 45%, rgba(44, 204, 228, .12), transparent 70%);
}
#public-view .pub-home-hero .pub-chip {
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--pub-border), var(--pub-shadow-sm);
}
#public-view .pub-home-hero-copy > .pub-chip,
#public-view .pub-home-hero-copy > .pub-lead,
#public-view .pub-home-hero-copy > .pub-home-hero-ctas,
#public-view .pub-home-hero-copy > .pub-home-trust {
  animation: pubHomeRise .7s var(--pub-ease) both;
}
#public-view .pub-home-hero-copy > .pub-lead { animation-delay: .12s; }
#public-view .pub-home-hero-copy > .pub-home-hero-ctas { animation-delay: .2s; }
#public-view .pub-home-hero-copy > .pub-home-trust { animation-delay: .28s; }

/* CTA presence: the primary action carries a soft resting glow. */
#public-view .pub-home-hero-ctas .pub-btn-primary,
#public-view .pub-home-final .pub-btn-primary {
  box-shadow: 0 10px 28px -12px rgba(47, 91, 255, .65);
}
#public-view .pub-home-hero-ctas .pub-btn-primary:hover,
#public-view .pub-home-final .pub-btn-primary:hover { box-shadow: var(--pub-glow); }
#public-view .pub-home-final .pub-btn-primary:hover { box-shadow: var(--pub-glow-night); }
#public-view .pub-btn:active { transform: translateY(0) scale(.98); }


/* ---- Live demo: premium frame, depth, entrance ---------------------------- */

/* Soft star-field texture across the night band, fading towards the edges. */
#public-view .pub-home-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 255, .09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 80%);
}
#public-view .pub-home-showcase::before {
  background:
    radial-gradient(50% 35% at 50% 0%, rgba(44, 204, 228, .18), transparent 70%),
    radial-gradient(45% 40% at 50% 70%, rgba(47, 91, 255, .20), transparent 70%);
}
#public-view .pub-home-demo-head { animation: pubHomeRise .7s var(--pub-ease) .25s both; }
#public-view .pub-home-demo-frame {
  position: relative;
  animation: pubHomeFrameIn .9s var(--pub-ease) .32s both;
  box-shadow:
    0 0 0 1px rgba(44, 204, 228, .14),
    0 30px 80px -30px rgba(44, 204, 228, .45),
    0 60px 120px -40px rgba(47, 91, 255, .45);
}
/* Refined gradient hairline around the frame (decorative, never interactive). */
#public-view .pub-home-demo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(44, 204, 228, .7), rgba(47, 91, 255, .35) 35%, rgba(238, 242, 255, .06) 60%, rgba(44, 204, 228, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#public-view .pub-home-demo-frame #demo-workspace {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 40px -18px rgba(0, 0, 0, .55);
}
#public-view .pub-home-demo-note { animation: pubHomeRise .7s var(--pub-ease) .55s both; }


/* ---- Section headings reveal with their content --------------------------- */

#public-view .pub-section-head.pub-reveal { transition-duration: .6s; }


/* ---- Cards: restrained hover response ------------------------------------- */

#public-view .pub-home-feature {
  box-shadow: 0 1px 2px rgba(11,16,32,.05), 0 8px 20px -14px rgba(11,16,32,.22);
}
#public-view .pub-home-feature,
#public-view .pub-home-plans .pub-card-pricing,
#public-view .pub-home-faq .pub-card-info,
#public-view .pub-home-step {
  transition:
    transform var(--pub-dur) var(--pub-ease),
    box-shadow var(--pub-dur) var(--pub-ease),
    border-color var(--pub-dur) var(--pub-ease),
    opacity var(--pub-dur-reveal) var(--pub-ease);
}
#public-view .pub-home-feature:hover,
#public-view .pub-home-step:hover,
#public-view .pub-home-plans .pub-card-pricing:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 91, 255, .35);
  box-shadow: var(--pub-shadow-md);
}
#public-view .pub-home-plans .pub-card-pricing.is-featured:hover {
  border-color: rgba(44, 204, 228, .45);
  box-shadow: var(--pub-glow-night);
}
#public-view .pub-home-faq .pub-card-info:hover { border-color: var(--pub-border-strong); }
#public-view .pub-home-feature .pub-icon-tile,
#public-view .pub-home-fact .pub-icon-tile {
  transition: background-color var(--pub-dur) var(--pub-ease), color var(--pub-dur) var(--pub-ease), transform var(--pub-dur) var(--pub-ease);
}
#public-view .pub-home-feature:hover .pub-icon-tile {
  background-color: var(--pub-accent);
  color: #FFFFFF;
  transform: scale(1.06);
}
#public-view .pub-home-feature .pub-icon-tile { width: 44px; height: 44px; }
/* Featured card sits on its own soft light. */
#public-view .pub-home-plans .pub-card-pricing.is-featured {
  background-image: radial-gradient(80% 60% at 100% 0%, rgba(44, 204, 228, .14), transparent 70%);
}


/* ---- How it works: connected, progressive steps ---------------------------- */

/* Numbers light up in order as the steps reveal (the reveal script staggers
   the steps; this only adds colour). Readable either way. */
#public-view .pub-home-step-num {
  transition: background-color .4s var(--pub-ease), color .4s var(--pub-ease), box-shadow .4s var(--pub-ease);
}
#public-view .pub-home-step.is-visible .pub-home-step-num {
  background-color: var(--pub-accent);
  color: #FFFFFF;
  box-shadow: 0 6px 16px -6px rgba(47, 91, 255, .6);
}
#public-view .pub-home-step:nth-child(2) .pub-home-step-num { transition-delay: .15s; }
#public-view .pub-home-step:nth-child(3) .pub-home-step-num { transition-delay: .3s; }
#public-view .pub-home-step:nth-child(4) .pub-home-step-num { transition-delay: .45s; }
#public-view .pub-home-step:nth-child(5) .pub-home-step-num { transition-delay: .6s; }

/* Connectors between consecutive steps: downward on phones, rightward when
   the five steps sit in one row. Hidden in the 2-column tablet layout. */
#public-view .pub-home-step { position: relative; }
#public-view .pub-home-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pub-surface);
  box-shadow: 0 0 0 1px var(--pub-border), var(--pub-shadow-sm);
  color: var(--pub-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  left: 29px;
  bottom: -19px;
  transform: rotate(90deg);
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  #public-view .pub-home-step:not(:last-child)::after { content: none; }
}
@media (min-width: 1280px) {
  #public-view .pub-home-step:not(:last-child)::after {
    left: auto;
    bottom: auto;
    right: -21px;
    top: 33px;
    transform: none;
  }
}


/* ---- Analytics: product-like card with a chart entrance --------------------- */

#public-view .pub-home-metrics { position: relative; overflow: hidden; }
#public-view .pub-home-metrics::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44, 204, 228, .7), transparent);
}
#public-view .pub-home-bars {
  background-image: repeating-linear-gradient(to top, rgba(169, 180, 208, .12) 0 1px, transparent 1px 30px);
}
#public-view .pub-home-bars span {
  transform-origin: bottom;
  box-shadow: 0 0 18px -6px rgba(44, 204, 228, .6);
}
#public-view .pub-home-metrics.is-visible .pub-home-bars span {
  animation: pubHomeBarGrow .8s var(--pub-ease) both;
}
#public-view .pub-home-metrics.is-visible .pub-home-bars span:nth-child(2) { animation-delay: .06s; }
#public-view .pub-home-metrics.is-visible .pub-home-bars span:nth-child(3) { animation-delay: .12s; }
#public-view .pub-home-metrics.is-visible .pub-home-bars span:nth-child(4) { animation-delay: .18s; }
#public-view .pub-home-metrics.is-visible .pub-home-bars span:nth-child(5) { animation-delay: .24s; }
#public-view .pub-home-metrics.is-visible .pub-home-bars span:nth-child(6) { animation-delay: .30s; }
#public-view .pub-home-metrics.is-visible .pub-home-bars span:nth-child(7) { animation-delay: .36s; }
#public-view .pub-home-metrics.is-visible .pub-home-metrics-stats > div {
  animation: pubHomeRise .6s var(--pub-ease) both;
}
#public-view .pub-home-metrics.is-visible .pub-home-metrics-stats > div:nth-child(2) { animation-delay: .08s; }
#public-view .pub-home-metrics.is-visible .pub-home-metrics-stats > div:nth-child(3) { animation-delay: .16s; }
#public-view .pub-home-metrics.is-visible .pub-home-insight { animation: pubHomeRise .6s var(--pub-ease) .45s both; }
#public-view .pub-home-metrics-stats > div { background: rgba(238, 242, 255, .03); }


/* ---- Blog: old thumbnails framed as illustrations ---------------------------- */

#public-view .pub-home-blog-grid .pub-card-media {
  padding: 14px;
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 20% 0%, rgba(47, 91, 255, .10), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, rgba(44, 204, 228, .10), transparent 70%),
    var(--pub-bg-soft);
}
#public-view .pub-home-blog-grid .pub-card-media img {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(11, 16, 32, .06), var(--pub-shadow-sm);
  transition: transform .45s var(--pub-ease);
}
#public-view .pub-home-blog-grid .pub-card-interactive:hover .pub-card-media img { transform: scale(1.03); }
#public-view .pub-home-blog-grid .pub-card-interactive:hover .pub-card-title { color: var(--pub-accent-strong); }
#public-view .pub-home-blog-grid .pub-card-title { transition: color var(--pub-dur) var(--pub-ease); }
/* In the phone swipe row, cards off to the side never enter the viewport, so
   they must not wait for a reveal: always fully visible there. */
@media (max-width: 767.98px) {
  #public-view .pub-home-blog-grid .pub-reveal { opacity: 1; transform: none; }
}


/* ---- Reduced motion: everything static and fully visible --------------------- */

@media (prefers-reduced-motion: reduce) {
  #public-view .pub-home-hero-copy > .pub-chip,
  #public-view .pub-home-hero-copy > .pub-lead,
  #public-view .pub-home-hero-copy > .pub-home-hero-ctas,
  #public-view .pub-home-hero-copy > .pub-home-trust,
  #public-view .pub-home-hero-layer-rear,
  #public-view .pub-home-hero-layer-front,
  #public-view .pub-home-demo-head,
  #public-view .pub-home-demo-frame,
  #public-view .pub-home-demo-note,
  #public-view .pub-home-metrics.is-visible .pub-home-bars span,
  #public-view .pub-home-metrics.is-visible .pub-home-metrics-stats > div,
  #public-view .pub-home-metrics.is-visible .pub-home-insight {
    animation: none;
  }
  #public-view .pub-home-feature:hover,
  #public-view .pub-home-step:hover,
  #public-view .pub-home-plans .pub-card-pricing:hover,
  #public-view .pub-home-feature:hover .pub-icon-tile,
  #public-view .pub-home-blog-grid .pub-card-interactive:hover .pub-card-media img,
  #public-view .pub-btn:active {
    transform: none;
  }
  #public-view .pub-home-step-num { transition: none; }
}


/* ==========================================================================
   17. Homepage -- brand, navigation and "live" polish (#public-view only)
   --------------------------------------------------------------------------
   Ambient motion is slow, transform/opacity only, on a few composited layers,
   and stops entirely under prefers-reduced-motion.
   ========================================================================== */

@keyframes pubHomeDrift {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
}
@keyframes pubHomeGridPan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(56px, 56px, 0); }
}
@keyframes pubHomeBreathe {
  from { opacity: .7; }
  to   { opacity: 1; }
}
@keyframes pubHomeDraw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* ---- Brand + top navigation ------------------------------------------------ */

#public-view .pub-home-nav {
  --pub-nav-h: 64px;
  background-color: rgba(246, 247, 251, .92);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #public-view .pub-home-nav {
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    backdrop-filter: saturate(160%) blur(8px);
  }
}
#public-view .pub-home-nav .pub-nav-brand {
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
#public-view .pub-home-nav .pub-home-logo { width: 22px; height: 22px; }
#public-view .pub-home-nav .pub-nav-links { gap: 36px; }
#public-view .pub-home-nav .pub-nav-link {
  position: relative;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--pub-text-secondary);
}
/* Animated underline (the old header "pill" ::before stays retired). */
#public-view .pub-home-nav .pub-nav-links .pub-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--pub-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pub-dur) var(--pub-ease);
}
#public-view .pub-home-nav .pub-nav-links .pub-nav-link:hover,
#public-view .pub-home-nav .pub-nav-links .pub-nav-link:focus-visible { color: var(--pub-text); }
#public-view .pub-home-nav .pub-nav-links .pub-nav-link:hover::after,
#public-view .pub-home-nav .pub-nav-links .pub-nav-link:focus-visible::after { transform: scaleX(1); }
#public-view .pub-home-nav-cta {
  min-height: 40px;
  padding: 0 18px;
  box-shadow: 0 6px 18px -10px rgba(47, 91, 255, .7);
}
@media (min-width: 768px) {
  #public-view .pub-home-nav { --pub-nav-h: 70px; }
  #public-view .pub-home-nav .pub-nav-brand { font-size: 1.25rem; }
  #public-view .pub-home-nav .pub-home-logo { width: 27px; height: 27px; }
}

/* Mobile sheet: rounded lower edge; rows fade/slide in as it opens. */
#public-view #public-mobile-menu.pub-home-mm { border-radius: 0 0 18px 18px; }
#public-view #public-mobile-menu.pub-home-mm:not(.hidden) .pub-nav-link,
#public-view #public-mobile-menu.pub-home-mm:not(.hidden) .pub-btn {
  animation: pubHomeRise .38s var(--pub-ease) both;
}
#public-view #public-mobile-menu.pub-home-mm:not(.hidden) .pub-nav-link:nth-child(2) { animation-delay: .04s; }
#public-view #public-mobile-menu.pub-home-mm:not(.hidden) .pub-nav-link:nth-child(3) { animation-delay: .08s; }
#public-view #public-mobile-menu.pub-home-mm:not(.hidden) .pub-nav-link:nth-child(4) { animation-delay: .12s; }
#public-view #public-mobile-menu.pub-home-mm:not(.hidden) .pub-btn { animation-delay: .16s; }


/* ---- Hero: slow atmospheric movement ----------------------------------------- */

#public-view .pub-home-hero::before { animation: pubHomeDrift 18s ease-in-out infinite alternate; }
/* The grid layer is one tile larger than the hero so its pan loops seamlessly. */
#public-view .pub-home-hero::after {
  inset: -56px 0 0 -56px;
  animation: pubHomeGridPan 48s linear infinite;
}


/* ---- Live demo: ambient light that breathes; the frame itself stays still ---- */

#public-view .pub-home-showcase::before { animation: pubHomeBreathe 7s ease-in-out infinite alternate; }


/* ---- Light / night transitions -------------------------------------------------- */

/* A faint top highlight so each night band reads as a deliberate surface. */
#public-view .pub-home-showcase,
#public-view .pub-home-analytics,
#public-view .pub-home-final { box-shadow: inset 0 1px 0 rgba(143, 168, 255, .12); }
#public-view .pub-home-proof { background: linear-gradient(180deg, #EEF1F8 0, var(--pub-bg) 70%); }


/* ---- Analytics: trend line drawn over the same example bars -------------------- */

#public-view .pub-home-chart { position: relative; }
#public-view .pub-home-trend {
  position: absolute;
  z-index: 1;
  left: 4px;
  top: 8px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  overflow: visible;
  pointer-events: none;
}
#public-view .pub-home-trend polyline {
  fill: none;
  stroke: #EEF2FF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  opacity: .85;
}
#public-view .pub-home-metrics.is-visible .pub-home-trend polyline {
  animation: pubHomeDraw 1.2s var(--pub-ease) .5s both;
}
#public-view .pub-home-bars span:nth-child(6) {
  background: linear-gradient(180deg, #7FE3F2, rgba(47, 91, 255, .7));
}


/* ---- How it works: connectors light up with the sequence ------------------------ */

#public-view .pub-home-step:not(:last-child)::after {
  transition: background-color .4s var(--pub-ease), color .4s var(--pub-ease), box-shadow .4s var(--pub-ease);
}
#public-view .pub-home-step.is-visible:not(:last-child)::after {
  background: var(--pub-accent);
  color: #FFFFFF;
  box-shadow: 0 0 0 1px var(--pub-accent), 0 4px 12px -4px rgba(47, 91, 255, .6);
}
#public-view .pub-home-step:nth-child(1)::after { transition-delay: .1s; }
#public-view .pub-home-step:nth-child(2)::after { transition-delay: .25s; }
#public-view .pub-home-step:nth-child(3)::after { transition-delay: .4s; }
#public-view .pub-home-step:nth-child(4)::after { transition-delay: .55s; }


/* ---- Cards: soft internal highlight on hover -------------------------------------- */

#public-view .pub-home-feature::before,
#public-view .pub-home-blog-grid .pub-card-interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 70% at 0% 0%, rgba(47, 91, 255, .08), transparent 60%);
  opacity: 0;
  transition: opacity var(--pub-dur) var(--pub-ease);
}
#public-view .pub-home-feature:hover::before,
#public-view .pub-home-blog-grid .pub-card-interactive:hover::before { opacity: 1; }


/* ---- Blog: the homepage illustrations fill their 16:10 well ------------------------ */

#public-view .pub-home-blog-grid .pub-card-media {
  padding: 0;
  background: #F6F7FB;
}
#public-view .pub-home-blog-grid .pub-card-media img {
  border-radius: 0;
  box-shadow: none;
}


/* ---- Reduced motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #public-view .pub-home-hero::before,
  #public-view .pub-home-hero::after,
  #public-view .pub-home-showcase::before,
  #public-view .pub-home-metrics.is-visible .pub-home-trend polyline,
  #public-view #public-mobile-menu.pub-home-mm:not(.hidden) .pub-nav-link,
  #public-view #public-mobile-menu.pub-home-mm:not(.hidden) .pub-btn {
    animation: none;
  }
  #public-view .pub-home-nav .pub-nav-links .pub-nav-link::after,
  #public-view .pub-home-step:not(:last-child)::after { transition: none; }
}


/* ==========================================================================
   18. Homepage -- refined hero scale, headline entrance, larger header
   (#public-view only)
   ========================================================================== */

@keyframes pubHomeHeadline {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---- Hero: editorial scale (about 32px phone, 41px tablet, 50px desktop) --- */

#public-view .pub-home-hero {
  padding-block: clamp(36px, 4.5vw, 64px) clamp(28px, 3vw, 40px);
}
#public-view .pub-home-hero-inner { gap: 14px; }
/* The unconditional gap above governs the stacked mobile/tablet column; the
   two-column desktop grid (defined earlier) needs its own wider gap
   restated here, later in the cascade, so this same-specificity rule
   doesn't silently win over it at >=960px. */
@media (min-width: 960px) {
  #public-view .pub-home-hero-inner { gap: clamp(32px, 4vw, 64px); }
}
#public-view #hero-tagline.pub-display {
  max-width: 18ch;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.125rem);
  line-height: 1.08;
  /* Graphic editorial display treatment: the DOM text stays normal-case
     (unchanged for screen readers/SEO -- this is text-transform, not a
     content edit) while the visual reads as a bold uppercase headline
     lockup. Letter-spacing loosened from -0.03em: negative tracking
     that reads fine on mixed-case collides at cap height once every
     character is a capital. */
  text-transform: uppercase;
  letter-spacing: -0.005em;
  /* One-time whole-heading entrance; the text itself never changes. */
  animation: pubHomeHeadline .8s var(--pub-ease) .06s both;
}
/* Same token and device the Books hero uses for its own pay-off line
   (.pub-books-display span, --pub-accent-secondary) -- the wording is
   unchanged, only "See what happens." (the outcome half of the headline,
   the same role Books gives "Skills worth building.") gets the accent. */
#public-view .pub-home-hero-accent { color: var(--pub-accent-secondary); }

/* ---- Header: larger brand, roomier navigation --------------------------------- */

#public-view .pub-home-nav { --pub-nav-h: 64px; }
#public-view .pub-home-nav .pub-nav-brand { gap: 11px; font-size: 1.125rem; font-weight: 800; }
#public-view .pub-home-nav .pub-home-logo { width: 24px; height: 24px; }
#public-view .pub-home-nav .pub-nav-toggle { width: 44px; height: 44px; border-radius: 12px; }

@media (min-width: 768px) {
  #public-view .pub-home-nav { --pub-nav-h: 74px; }
  #public-view .pub-home-nav .pub-nav-brand { gap: 12px; font-size: 1.3125rem; }
  #public-view .pub-home-nav .pub-home-logo { width: 29px; height: 29px; }
}

/* Brand left; navigation and CTA grouped on the right. */
@media (min-width: 900px) {
  #public-view .pub-home-nav .pub-nav-inner > nav { margin-left: auto; }
  #public-view .pub-home-nav .pub-nav-actions { margin-left: 20px; }
}
#public-view .pub-home-nav .pub-nav-links { gap: 4px; }
#public-view .pub-home-nav .pub-nav-links .pub-nav-link {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--pub-text-secondary);
  transition: color .2s var(--pub-ease), background-color .2s var(--pub-ease);
}
/* Soft blue hover in place of the underline (section 17). */
#public-view .pub-home-nav .pub-nav-links .pub-nav-link::after { content: none; }
#public-view .pub-home-nav .pub-nav-links .pub-nav-link:hover,
#public-view .pub-home-nav .pub-nav-links .pub-nav-link:focus-visible {
  color: var(--pub-accent-strong);
  background-color: rgba(47, 91, 255, .07);
}
#public-view .pub-home-nav .pub-nav-links .pub-nav-link[aria-current="page"] {
  color: var(--pub-text);
  background-color: rgba(47, 91, 255, .07);
}

/* CTA proportional to the taller bar. */
#public-view .pub-home-nav-cta {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: .96875rem;
}

@media (prefers-reduced-motion: reduce) {
  #public-view #hero-tagline.pub-display { animation: none; }
}


/* ==========================================================================
   19. Standalone public pages -- legacy markup re-skin (.pub-site only)
   --------------------------------------------------------------------------
   about / contact / how-it-works / pricing / privacy / terms / refund keep
   their markup and text exactly; this layer re-skins their existing classes.
   Anchored on body.pub-site, which index.html never carries, so nothing here
   can reach the homepage SPA, the Dashboard or the sign-in view. Each rule is
   one class heavier than the page's inline rule it replaces (this sheet loads
   before the inline <style>).
   ========================================================================== */

/* ---- Token remap: the pages' own --sc-* tokens, set on body.pub-site so they
   override the inline :root values for everything inside the page. ---------- */
.pub-site {
  --sc-primary: #2F5BFF;
  --sc-primary-dark: #1E40E0;
  --sc-violet: #2F5BFF;
  --sc-violet-dark: #1E40E0;
  --sc-yellow: #EAEFFF;
  --sc-pink: #2CCCE4;
  --sc-ink: #0B1020;
  --sc-ink-soft: #3D4760;
  --sc-bg: #F6F7FB;
  --sc-bg-soft: #EEF1F8;
  --sc-border: #DDE2EE;
  -webkit-font-smoothing: antialiased;
}

/* ---- Header ---------------------------------------------------------------- */
.pub-site header.sc-nav {
  background: rgba(246, 247, 251, .92);
  border-bottom: 1px solid var(--pub-border);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pub-site header.sc-nav { -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); }
}
.pub-site .sc-nav-inner { padding-block: .9rem; min-height: 74px; }
.pub-site .sc-brand {
  gap: 12px;
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pub-text);
  text-decoration: none;
}
.pub-site .sc-brand-icon { width: 29px; height: 29px; }
.pub-site nav.sc-links { gap: 4px; }
.pub-site nav.sc-links a:not(.sc-cta-btn) {
  padding: .55rem .85rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--pub-text-secondary);
  transition: color .2s var(--pub-ease), background-color .2s var(--pub-ease);
}
.pub-site nav.sc-links a:not(.sc-cta-btn)::before { content: none; }
.pub-site nav.sc-links a:not(.sc-cta-btn):hover,
.pub-site nav.sc-links a:not(.sc-cta-btn):focus-visible {
  color: var(--pub-accent-strong);
  background-color: rgba(47, 91, 255, .07);
}
.pub-site nav.sc-links a:not(.sc-cta-btn)[aria-current="page"] {
  color: var(--pub-text);
  background-color: rgba(47, 91, 255, .07);
}
.pub-site nav.sc-links a:not(.sc-cta-btn):focus-visible { outline: 2px solid var(--pub-accent); outline-offset: 2px; }
.pub-site nav.sc-links .sc-cta-btn { margin-left: 16px; }
/* The primary nav gained a "Tools" link (9 items). Between 950px and 1019px it
   needs ~940px but only ~870-940px is available, so it wrapped to two rows.
   Slimmer link padding keeps it on one row. Scoped to navs that contain the
   Tools link, so pages without it (e.g. Books, until rebuilt) are unchanged. */
@media (min-width: 950px) and (max-width: 1019px) {
  .pub-site nav.sc-links:has(a[href="/tools/"]) a:not(.sc-cta-btn) { padding-inline: .5rem; }
}

/* ---- Buttons ---------------------------------------------------------------- */
.pub-site .sc-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--pub-accent);
  border-radius: 12px;
  background: var(--pub-accent);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 22px -12px rgba(47, 91, 255, .65);
  transition: background-color var(--pub-dur) var(--pub-ease), box-shadow var(--pub-dur) var(--pub-ease), transform var(--pub-dur-fast) var(--pub-ease);
}
.pub-site .sc-cta-btn:hover {
  background: var(--pub-accent-strong);
  border-color: var(--pub-accent-strong);
  box-shadow: var(--pub-glow);
  transform: translateY(-1px);
}
.pub-site .sc-cta-btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.pub-site .sc-cta-btn:focus-visible { outline: 2px solid var(--pub-accent); outline-offset: 3px; }

/* ---- Burger + mobile sheet (open/close mechanism unchanged) ------------------- */
@media (max-width: 768px) {
  /* Each static/blog page's own inline <style> still carries the
     pre-redesign rules for this shared header (nav.sc-links, .sc-nav-inner,
     .sc-cta-btn): a desktop-only nav.sc-links{flex-wrap:wrap} never
     switched to nowrap for the dropdown, and .sc-nav-inner{position:relative}
     (added for this breakpoint only) becomes the absolutely-positioned
     panel's containing block instead of the already-positioned
     header.sc-nav -- narrowing the panel to .sc-nav-inner's own inset,
     centered width instead of the full header width, and letting the CTA
     (the last flex item) wrap into a second column that overlaps the top
     links once content height exceeds the panel's cap. Both come from the
     embedded rules, not this file, so both are overridden here once, for
     every page that shares this header, rather than edited per page. */
  .pub-site .sc-nav-inner { min-height: 64px; position: static; }
  .pub-site .sc-brand { gap: 11px; font-size: 1.125rem; }
  .pub-site .sc-brand-icon { width: 24px; height: 24px; }
  .pub-site .sc-nav-burger {
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 12px;
    box-shadow: none;
  }
  .pub-site .sc-nav-burger span { background: var(--pub-text); height: 2px; border-radius: 2px; }
  .pub-site .sc-nav-burger:active,
  .pub-site .sc-nav-burger[aria-expanded="true"] { transform: none; box-shadow: 0 0 0 3px rgba(47, 91, 255, .15); }
  .pub-site nav.sc-links {
    flex-wrap: nowrap;
    padding: 8px var(--pub-gutter) 20px;
    background: var(--pub-surface-elevated);
    border: 0;
    border-top: 1px solid var(--pub-border);
    border-bottom: 1px solid var(--pub-border);
    border-radius: 0 0 18px 18px;
    box-shadow: var(--pub-shadow-md);
  }
  /* Same fix as the homepage mobile menu (index.html #public-mobile-menu):
     the embedded max-height: 26rem/overflow: hidden clips real content,
     and 100vh on a real mobile browser is fixed to the largest possible
     viewport, not the currently-visible one. */
  .pub-site nav.sc-links.is-open {
    max-height: min(30rem, calc(100vh - 96px));
    max-height: min(30rem, calc(100dvh - 96px));
    overflow-y: auto;
    overflow-x: hidden;
  }
  .pub-site nav.sc-links a:not(.sc-cta-btn) {
    border-radius: 0;
    border-bottom: 1px solid var(--pub-border);
    padding: .85rem .25rem;
    background: none;
  }
  .pub-site nav.sc-links a:not(.sc-cta-btn)[aria-current="page"] { background: none; color: var(--pub-accent-strong); }
  .pub-site nav.sc-links .sc-cta-btn { margin: 16px 0 0; width: 100%; }
}

/* ---- Page header area: soft light at the top of the page -------------------- */
.pub-site main { position: relative; isolation: isolate; }
.pub-site main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 70% at 15% 0%, rgba(47, 91, 255, .10), transparent 70%),
    radial-gradient(40% 60% at 85% 10%, rgba(44, 204, 228, .08), transparent 70%);
}
.pub-site .sc-eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: .3rem .8rem;
  border: 0;
  border-radius: var(--pub-radius-pill);
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--pub-border), var(--pub-shadow-sm);
  color: var(--pub-accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.pub-site main h1 { letter-spacing: -0.03em; color: var(--pub-text); }
.pub-site main h2 { letter-spacing: -0.02em; color: var(--pub-text); }

/* Prose: left-aligned (no justification) and kept to a comfortable measure. */
.pub-site .sc-lede { max-width: 62ch; font-size: 1.1875rem; line-height: 1.6; color: var(--pub-text-secondary); }
.pub-site .sc-lede,
.pub-site section.sc-section p,
.pub-site section.sc-section li,
.pub-site .sc-step p,
.pub-site .sc-faq-a { text-align: left; }
@media (min-width: 1280px) {
  .pub-site .sc-lede { max-width: 62ch; white-space: normal; font-size: 1.1875rem; }
}
.pub-site section.sc-section { border-top: 1px solid var(--pub-border); }
.pub-site section.sc-section > :not(h2) { max-width: 72ch; }
.pub-site section.sc-section p,
.pub-site section.sc-section li { color: var(--pub-text-secondary); line-height: 1.7; }
/* Text links inside the static pages' prose containers only (not cards,
   chips or pagination, which set their own colours). */
.pub-site :is(section.sc-section, .sc-lede, .sc-faq-a, .sc-step, .sc-updated, .sc-shots) a:not(.sc-cta-btn):not(.sc-plan-cta) {
  color: var(--pub-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pub-site :is(section.sc-section, .sc-lede, .sc-faq-a, .sc-step, .sc-updated, .sc-shots) a:not(.sc-cta-btn):not(.sc-plan-cta):hover { color: var(--pub-accent-strong); }
.pub-site .sc-updated { color: var(--pub-text-muted); }

/* ---- FAQ / steps / screenshots ---------------------------------------------- */
.pub-site .sc-faq-item { border-top: 1px solid var(--pub-border); }
.pub-site .sc-faq-q { color: var(--pub-text); }
.pub-site .sc-step { border-top: 1px solid var(--pub-border); }
.pub-site .sc-step-num,
.pub-site .sc-step:nth-of-type(3n+2) .sc-step-num,
.pub-site .sc-step:nth-of-type(3n+3) .sc-step-num {
  border: 0;
  border-radius: 12px;
  background: var(--pub-accent);
  color: #FFFFFF;
  box-shadow: 0 6px 16px -6px rgba(47, 91, 255, .6);
}
.pub-site .sc-shot {
  border: 1px solid var(--pub-night-border);
  border-radius: var(--pub-radius-xl);
  background: var(--pub-night-surface);
  padding: 8px;
  box-shadow: 0 30px 70px -34px rgba(47, 91, 255, .5), 0 0 0 1px rgba(44, 204, 228, .1);
  overflow: hidden;
}
.pub-site .sc-shot img { border-radius: calc(var(--pub-radius-xl) - 8px); }
.pub-site .sc-shot figcaption {
  border-top: 0;
  padding: .9rem .6rem .4rem;
  color: var(--pub-night-text-secondary);
}
.pub-site .sc-shot figcaption strong { color: var(--pub-night-text); }

/* ---- CTA block: a night panel ------------------------------------------------ */
.pub-site .sc-cta-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--pub-night);
  border: 1px solid var(--pub-night-border);
  border-radius: var(--pub-radius-xl);
  box-shadow: var(--pub-glow-night);
}
.pub-site .sc-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 90% at 50% 110%, rgba(47, 91, 255, .35), transparent 70%);
}
.pub-site .sc-cta-section h2 { color: var(--pub-night-text); }
.pub-site .sc-cta-section p { color: var(--pub-night-text-secondary); }
.pub-site .sc-cta-section .sc-cta-btn {
  background: var(--pub-accent);
  border-color: var(--pub-accent);
  color: #FFFFFF;
}
.pub-site .sc-cta-section .sc-cta-btn:hover { background: var(--pub-accent-strong); box-shadow: var(--pub-glow-night); }

/* ---- Pricing plans (featured plan = night card) -------------------------------- */
.pub-site .sc-plan-card {
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  box-shadow: var(--pub-shadow-sm);
  transition: transform var(--pub-dur) var(--pub-ease), box-shadow var(--pub-dur) var(--pub-ease), border-color var(--pub-dur) var(--pub-ease);
}
.pub-site .sc-plan-card:hover { transform: translateY(-2px); box-shadow: var(--pub-shadow-md); border-color: rgba(47, 91, 255, .35); }
.pub-site .sc-plan-card.sc-plan-featured {
  background: var(--pub-night-surface) radial-gradient(80% 60% at 100% 0%, rgba(44, 204, 228, .16), transparent 70%);
  border-color: var(--pub-night-border);
  box-shadow: var(--pub-glow-night);
}
.pub-site .sc-plan-badge {
  border: 0;
  border-radius: var(--pub-radius-pill);
  background: var(--pub-accent-secondary);
  color: var(--pub-night);
}
.pub-site .sc-plan-cta {
  border: 1px solid var(--pub-border-strong);
  border-radius: 12px;
  box-shadow: none;
  transition: background-color var(--pub-dur) var(--pub-ease), border-color var(--pub-dur) var(--pub-ease), transform var(--pub-dur-fast) var(--pub-ease);
}
.pub-site .sc-plan-cta:hover { transform: translateY(-1px); box-shadow: none; }
.pub-site .sc-plan-cta.sc-plan-cta-primary { border-color: var(--pub-accent); box-shadow: 0 8px 22px -12px rgba(47, 91, 255, .65); }
.pub-site .sc-plan-cta.sc-plan-cta-primary:hover { background: var(--pub-accent-strong); }
.pub-site .sc-plan-cta.sc-plan-cta-secondary:hover { border-color: var(--pub-accent); }

/* ---- Footer (night) ---------------------------------------------------------- */
.pub-site footer.sc-footer {
  background: var(--pub-night);
  box-shadow: inset 0 1px 0 rgba(143, 168, 255, .12);
}
.pub-site .sc-footer-col a,
.pub-site .sc-footer-description { color: var(--pub-night-text-secondary); }
.pub-site .sc-footer-col a { font-weight: 500; transition: color var(--pub-dur-fast) var(--pub-ease); }
.pub-site .sc-footer-col a:hover { color: var(--pub-night-text); }
.pub-site .sc-footer-follow-icon {
  border: 1px solid var(--pub-night-border);
  border-radius: 12px;
  color: var(--pub-night-text-secondary);
}
.pub-site .sc-footer-follow-item:hover .sc-footer-follow-icon { color: var(--pub-night-text); border-color: var(--pub-night-link); }
.pub-site .sc-footer-bottom { border-top-color: var(--pub-night-border); }

@media (prefers-reduced-motion: reduce) {
  .pub-site .sc-cta-btn,
  .pub-site .sc-plan-card,
  .pub-site .sc-plan-cta { transition: none; }
  .pub-site .sc-cta-btn:hover,
  .pub-site .sc-plan-card:hover,
  .pub-site .sc-plan-cta:hover { transform: none; }
}
/* Screenshots are 690-810px wide: keep them near natural size instead of upscaling. */
.pub-site .sc-shot { max-width: 860px; margin-inline: auto; }


/* ==========================================================================
   20. Blog -- listing, articles, category pages (.pub-site only)
   --------------------------------------------------------------------------
   Presentation only. Article content, metadata, JSON-LD, Related-reading
   selection, Share behaviour and ad-slot semantics are untouched; the
   templates only gained the stylesheet link and body.pub-site.
   ========================================================================== */

/* ---- Topics dropdown (header) + topic chips ---------------------------------- */
.pub-site .sc-dd-menu {
  padding: 6px;
  border: 1px solid var(--pub-border);
  border-radius: 12px;
  background: var(--pub-surface-elevated);
  box-shadow: var(--pub-shadow-md);
}
.pub-site .sc-topics a {
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-pill);
  background: #FFFFFF;
  box-shadow: none;
  font-weight: 600;
  color: var(--pub-text-secondary);
  transition: background-color var(--pub-dur) var(--pub-ease), color var(--pub-dur) var(--pub-ease), border-color var(--pub-dur) var(--pub-ease);
}
.pub-site .sc-topics a:hover,
.pub-site .sc-topics a:focus-visible {
  transform: none;
  box-shadow: none;
  background: var(--pub-accent-soft);
  border-color: rgba(47, 91, 255, .35);
  color: var(--pub-accent-strong);
}
.pub-site .sc-topics a[aria-current="page"] {
  background: var(--pub-accent);
  border-color: var(--pub-accent);
  color: #FFFFFF;
}

/* ---- Tags / pills --------------------------------------------------------------- */
.pub-site .sc-category,
.pub-site .sc-rc-pill,
.pub-site .sc-cc-pill {
  border: 0;
  border-radius: var(--pub-radius-pill);
  background: var(--pub-accent-soft);
  color: var(--pub-accent);
  font-weight: 700;
}
.pub-site .sc-featured-tag {
  border: 0;
  border-radius: var(--pub-radius-pill);
  background: var(--pub-accent-secondary);
  color: var(--pub-night);
}

/* ---- Blog index: featured + latest cards ------------------------------------------ */
.pub-site .sc-featured-card,
.pub-site .sc-blog-card,
.pub-site .sc-cc {
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  background: #FFFFFF;
  box-shadow: var(--pub-shadow-sm);
  transition: transform var(--pub-dur) var(--pub-ease), box-shadow var(--pub-dur) var(--pub-ease), border-color var(--pub-dur) var(--pub-ease);
}
.pub-site .sc-featured-card { border-radius: var(--pub-radius-xl); box-shadow: var(--pub-shadow-md); overflow: hidden; }
.pub-site .sc-featured-card:hover,
.pub-site .sc-blog-card:hover,
.pub-site .sc-cc:hover,
.pub-site .sc-cc:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--pub-shadow-md);
  border-color: rgba(47, 91, 255, .35);
}
.pub-site .sc-featured-card:hover { box-shadow: var(--pub-shadow-lg); }
.pub-site .sc-featured-visual {
  border-right: 0;
  background:
    radial-gradient(70% 80% at 20% 0%, rgba(44, 204, 228, .28), transparent 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(47, 91, 255, .45), transparent 70%),
    var(--pub-night);
}
/* Card strips keep their white icons, on refined gradients instead of flat fills. */
.pub-site .sc-card-visual { border-bottom: 1px solid var(--pub-border); }
.pub-site .sc-accent-blue { background: linear-gradient(135deg, #2F5BFF, #1E40E0); }
.pub-site .sc-accent-violet { background: linear-gradient(135deg, #243150, #0A0F1E); }
.pub-site .sc-accent-pink { background: linear-gradient(135deg, #2CCCE4, #2F5BFF); }

/* ---- Pagination -------------------------------------------------------------------- */
.pub-site .sc-pagination a,
.pub-site .sc-pagination span {
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: none;
  font-weight: 600;
  color: var(--pub-text-secondary);
  transition: background-color var(--pub-dur) var(--pub-ease), border-color var(--pub-dur) var(--pub-ease), color var(--pub-dur) var(--pub-ease);
}
.pub-site .sc-pagination a:hover,
.pub-site .sc-pagination a:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: var(--pub-accent);
  color: var(--pub-accent-strong);
}
.pub-site .sc-pagination .sc-page-active { background: var(--pub-accent); border-color: var(--pub-accent); color: #FFFFFF; }
.pub-site .sc-pagination .sc-page-disabled { background: var(--pub-bg-soft); color: var(--pub-text-muted); box-shadow: none; opacity: .7; }

/* ---- Category pages ------------------------------------------------------------------ */
.pub-site .sc-cc-media { border-bottom: 1px solid var(--pub-border); background: var(--pub-bg-soft); }
.pub-site .sc-cc-meta { border-top: 1px solid var(--pub-border); }
.pub-site .sc-cat-list li { border-top: 1px solid var(--pub-border); }

/* ---- Article reading experience ---------------------------------------------------------- */
.pub-site .sc-breadcrumb a { text-decoration: none; }
.pub-site .sc-breadcrumb a:hover { text-decoration: underline; }
.pub-site .sc-article-meta { color: var(--pub-text-muted); }
.pub-site article h2 {
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pub-border);
  font-size: clamp(1.375rem, 1.25rem + .5vw, 1.625rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.pub-site article h3 { color: var(--pub-text); letter-spacing: -0.01em; }
.pub-site article p,
.pub-site article li { font-size: 1.0625rem; line-height: 1.75; color: var(--pub-text-secondary); }
@media (min-width: 768px) {
  .pub-site article p,
  .pub-site article li { font-size: 1.125rem; }
}
.pub-site article strong { color: var(--pub-text); }
.pub-site article a:not(.sc-cta-btn) { color: var(--pub-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pub-site article a:not(.sc-cta-btn):hover { color: var(--pub-accent-strong); }
.pub-site article li::marker { color: var(--pub-accent); }
.pub-site article blockquote {
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--pub-accent);
  color: var(--pub-text-secondary);
  font-size: 1.125rem;
  font-style: italic;
}
.pub-site article :not(pre) > code {
  padding: .12em .4em;
  border-radius: 6px;
  background: var(--pub-bg-soft);
  color: var(--pub-text);
  font-size: .9em;
}
.pub-site article pre {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--pub-night-border);
  border-radius: var(--pub-radius-md);
  background: var(--pub-night);
  color: var(--pub-night-text);
  font-size: .9rem;
  line-height: 1.6;
}
.pub-site article pre code { background: none; padding: 0; color: inherit; }
.pub-site article table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.pub-site article th,
.pub-site article td { padding: .65rem .8rem; border: 1px solid var(--pub-border); text-align: left; vertical-align: top; }
.pub-site article th { background: var(--pub-bg-soft); color: var(--pub-text); }
/* Infographics: framed like the homepage illustration wells. */
.pub-site article img {
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  background: #FFFFFF;
  box-shadow: var(--pub-shadow-sm);
}

/* ---- Share + Related reading ----------------------------------------------------------- */
.pub-site .sc-share { border-top: 1px solid var(--pub-border); }
.pub-site .sc-share-btn.sc-cta-btn {
  background: #FFFFFF;
  border-color: var(--pub-border-strong);
  color: var(--pub-text);
  box-shadow: none;
}
.pub-site .sc-share-btn.sc-cta-btn:hover { background: #FFFFFF; border-color: var(--pub-accent); color: var(--pub-accent-strong); box-shadow: none; }
.pub-site .sc-share-menu {
  border: 1px solid var(--pub-border);
  border-radius: 12px;
  box-shadow: var(--pub-shadow-lg);
}
.pub-site .sc-related { border-top: 1px solid var(--pub-border); }
.pub-site .sc-rc-link {
  border: 1px solid var(--pub-border);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: none;
  transition: transform var(--pub-dur) var(--pub-ease), box-shadow var(--pub-dur) var(--pub-ease), border-color var(--pub-dur) var(--pub-ease);
}
.pub-site .sc-rc-link:hover,
.pub-site .sc-rc-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--pub-shadow-md);
  border-color: rgba(47, 91, 255, .35);
}
.pub-site .sc-rc-thumb { border: 1px solid var(--pub-border); border-radius: 8px; background: var(--pub-bg-soft); }

/* ---- Ad slots: the empty-slot rule is untouched; a filled slot is only
   separated from content by space and a hairline, never styled like site UI. */
.pub-site .sc-sidebar-ad:not(:empty),
.pub-site .sc-in-article-ad:not(:empty) {
  margin: 2rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--pub-border);
}

@media (prefers-reduced-motion: reduce) {
  .pub-site .sc-featured-card,
  .pub-site .sc-blog-card,
  .pub-site .sc-cc,
  .pub-site .sc-rc-link { transition: none; }
  .pub-site .sc-featured-card:hover,
  .pub-site .sc-blog-card:hover,
  .pub-site .sc-cc:hover,
  .pub-site .sc-rc-link:hover { transform: none; }
}

/* Pills are content-sized even inside flex-column card bodies. */
.pub-site .sc-category,
.pub-site .sc-rc-pill,
.pub-site .sc-cc-pill { align-self: flex-start; width: fit-content; max-width: 100%; }
/* The pages' inline CSS sets button text colour with !important
   (.sc-cta-btn / .sc-cta-section .sc-cta-btn), so these must answer in kind. */
.pub-site .sc-cta-section .sc-cta-btn { color: #FFFFFF !important; }
.pub-site .sc-share-btn.sc-cta-btn { color: var(--pub-text) !important; }
.pub-site .sc-share-btn.sc-cta-btn:hover { color: var(--pub-accent-strong) !important; }
/* Explicit keyboard focus ring on interactive blog elements. */
.pub-site .sc-topics a:focus-visible,
.pub-site .sc-pagination a:focus-visible,
.pub-site .sc-blog-card:focus-visible,
.pub-site .sc-featured-card:focus-visible,
.pub-site .sc-cc:focus-visible,
.pub-site .sc-rc-link:focus-visible {
  outline: 2px solid var(--pub-accent);
  outline-offset: 3px;
}


/* ==========================================================================
   21. Final polish -- illustration presentation + page intros (.pub-site)
   ========================================================================== */

/* Editorial illustrations sit in 16:10 wells that match their paper
   background, contained so nothing important is cropped. */
.pub-site .sc-featured-visual,
.pub-site .sc-card-visual,
.pub-site .sc-cc-media {
  padding: 0;
  overflow: hidden;
  background: #F6F7FB;
}
.pub-site .sc-card-visual,
.pub-site .sc-cc-media { height: auto; aspect-ratio: 16 / 10; }
.pub-site .sc-featured-visual img,
.pub-site .sc-card-visual img,
.pub-site .sc-cc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .45s var(--pub-ease);
}
.pub-site .sc-featured-visual { border-right: 1px solid var(--pub-border); }
.pub-site .sc-featured-card:hover .sc-featured-visual img,
.pub-site .sc-blog-card:hover .sc-card-visual img,
.pub-site .sc-cc:hover .sc-cc-media img { transform: scale(1.03); }
.pub-site .sc-featured-tag { z-index: 1; box-shadow: var(--pub-shadow-sm); }

/* Related reading thumbnails follow the same 16:10 proportion. */
.pub-site .sc-rc-thumb {
  flex: 0 0 88px;
  width: 88px;
  height: 55px;
  border-radius: 8px;
  background: #F6F7FB;
}
.pub-site .sc-rc-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Page intros: one gentle rise-in, never repeated. */
@keyframes pubPageIntro {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.pub-site main .sc-eyebrow,
.pub-site main h1,
.pub-site main .sc-lede,
.pub-site main .sc-article-meta { animation: pubPageIntro .6s var(--pub-ease) both; }
.pub-site main h1 { animation-delay: .06s; }
.pub-site main .sc-lede,
.pub-site main .sc-article-meta { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .pub-site main .sc-eyebrow,
  .pub-site main h1,
  .pub-site main .sc-lede,
  .pub-site main .sc-article-meta { animation: none; }
  .pub-site .sc-featured-visual img,
  .pub-site .sc-card-visual img,
  .pub-site .sc-cc-media img { transition: none; }
  .pub-site .sc-featured-card:hover .sc-featured-visual img,
  .pub-site .sc-blog-card:hover .sc-card-visual img,
  .pub-site .sc-cc:hover .sc-cc-media img { transform: none; }
}
/* Left-aligned text in blog cards and prose (justified text opened uneven gaps). */
.pub-site .sc-card-body p,
.pub-site .sc-featured-body p,
.pub-site .sc-cc-excerpt,
.pub-site .sc-cat-intro,
.pub-site .sc-rc-desc,
.pub-site article p,
.pub-site article li { text-align: left; }

/* ---- Article figure token: inline SVG figures share the img frame -------------------- */
.pub-site article figure > svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  background: #FFFFFF;
  box-shadow: var(--pub-shadow-sm);
}