* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; }

/* ---------- brand mark: 5 ascending dots ---------- */
.brand-mark { display: inline-flex; align-items: center; gap: 3px; }
.brand-mark .dot { display: inline-block; border-radius: 50%; }
.brand-mark .d1 { width: 5px; height: 5px; background: var(--dot-1); }
.brand-mark .d2 { width: 7px; height: 7px; background: var(--dot-2); }
.brand-mark .d3 { width: 9px; height: 9px; background: var(--dot-3); }
.brand-mark .d4 { width: 12px; height: 12px; background: var(--dot-4); }
.brand-mark .d5 { width: 15px; height: 15px; background: var(--dot-5); }
.brand-mark.small .d1 { width: 3px; height: 3px; }
.brand-mark.small .d2 { width: 4px; height: 4px; }
.brand-mark.small .d3 { width: 5px; height: 5px; }
.brand-mark.small .d4 { width: 7px; height: 7px; }
.brand-mark.small .d5 { width: 9px; height: 9px; }

/* ---------- site header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 56px);
  font-size: 13px;
  pointer-events: none;
  background: color-mix(in oklab, var(--color-paper) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.08em; min-width: 0; }
.brand-logo { height: 128px; width: auto; max-width: 100%; pointer-events: auto; }
.header-cta { pointer-events: auto; padding: 10px 20px; font-size: 13px; margin-top: 0; flex-shrink: 0; white-space: nowrap; }
.header-tag {
  color: var(--color-muted);
  border: 1px solid var(--color-rule);
  background: var(--color-panel);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  pointer-events: auto;
}

/* ---------- intro ---------- */
.intro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  gap: 20px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
}
.intro h1 {
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.intro-sub {
  max-width: 46ch;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--color-muted);
  line-height: 1.55;
}
.scroll-hint {
  margin-top: 32px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}

/* ---------- pinned scroll stage ---------- */
.pin-spacer { position: relative; height: 700vh; }
.pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pin-grid {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

.pin-text { display: flex; flex-direction: column; gap: 28px; }
.beat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.beat-list li {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted-2);
  padding-left: 14px;
  border-left: 2px solid var(--color-rule);
  transition: color .25s ease, border-color .25s ease;
}
.beat-list li.active { color: var(--color-ink); border-color: var(--color-accent); }

.beat-copy { position: relative; min-height: 130px; }
.beat-copy-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.beat-copy-item.active { opacity: 1; }
.beat-copy-item h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.01em; }
.beat-copy-item p { color: var(--color-muted); line-height: 1.6; font-size: 15.5px; max-width: 40ch; }

/* ---------- the product frame ---------- */
.frame-col { display: flex; justify-content: center; }
.frame-stage { perspective: 1800px; width: 100%; max-width: 920px; }
.frame {
  width: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 65%;
  background: var(--color-panel);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop), 0 50px 90px -30px rgb(14 23 45 / 0.35);
  overflow: hidden;
  display: grid;
  grid-template-columns: 184px 1fr;
  aspect-ratio: 16 / 10.5;
  will-change: transform, opacity;
  /* this is a static illustration of the real product, not a live instance — nothing
     inside should be clickable, hoverable, or otherwise implied interactive. */
  pointer-events: none;
}

.frame-rail {
  position: relative;
  background: var(--color-rail);
  color: var(--color-rail-ink);
}
/* three swappable rails — normal Portal sidebar, EmailRail, and Store Reporting's own rail —
   crossfade the same way beat-panel content does. */
.frame-rail-variant {
  position: absolute; inset: 0;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  font-size: var(--text-xs);
  opacity: 0;
  transition: opacity .25s ease;
}
.frame-rail-variant.active { opacity: 1; }
.rail-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 18px; font-size: 12.5px; flex-shrink: 0; }
.rail-group-label { text-transform: uppercase; font-size: 10px; letter-spacing: var(--tracking-label); color: var(--color-rail-muted); margin: 10px 0 6px; }
.rail-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  color: var(--color-rail-muted);
  margin-bottom: 2px;
  transition: background .2s ease, color .2s ease;
}
.rail-item .ic { width: 14px; height: 14px; }
.rail-item.active { background: var(--color-rail-2); color: var(--color-rail-ink); font-weight: 700; }
.rail-foot { margin-top: auto; font-size: 9.5px; line-height: 1.5; color: var(--color-rail-muted); opacity: 0.7; padding-top: 12px; border-top: 1px solid var(--color-rail-rule); flex-shrink: 0; }

/* App Library — expandable group, matches the real Sidebar's active-state rules exactly:
   a fully active row (flat or child) fills with bg-rail-3; the group header itself only
   bolds when a child is active, it never takes the fill unless /apps is the exact route. */
.rail-group { display: flex; flex-direction: column; }
.rail-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 4px 7px 9px;
  border-radius: 6px;
  color: var(--color-rail-muted);
}
.rail-group-header .ic { width: 14px; height: 14px; }
.rail-group-label-text { flex: 1; }
.rail-group-header.child-active { color: var(--color-rail-ink); font-weight: 700; }
.rail-chevron { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rail-chevron svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; transform: rotate(-90deg); }
.rail-group.open .rail-chevron svg { transform: rotate(0deg); }
.rail-group-children { display: none; flex-direction: column; margin: 2px 0 4px 12px; }
.rail-group.open .rail-group-children { display: flex; }

/* footer shared by the two "own rail" apps (EmailRail-shaped) */
.rail-foot-app { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-rail-rule); display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.rail-signedin { font-size: 9.5px; color: var(--color-rail-muted); line-height: 1.5; }
.rail-signedin strong { color: var(--color-rail-ink); font-weight: 600; display: block; }
.rail-signout { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--color-rail-muted); }
.rail-signout .ic { width: 12px; height: 12px; }
.rail-powered { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--color-rail-muted); opacity: .7; margin-top: 2px; }

.frame-body { display: flex; flex-direction: column; min-width: 0; }

/* real TopBar carries no page title/breadcrumb — right-aligned chrome only */
.frame-topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 0 18px;
  height: 44px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-xs);
}
.topbar-help {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--color-rule);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted-2); font-size: 11px; font-weight: 700;
}
.topbar-jump {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: 4px 10px 4px 8px;
  color: var(--color-muted);
  font-size: 11px;
}
.topbar-jump kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  padding: 1px 4px;
  color: var(--color-muted-2);
}
.frame-user { color: var(--color-muted); font-size: 11px; }
/* Home has its own search hero — hide the help/jump chrome that would duplicate it */
.frame.home-active .topbar-help,
.frame.home-active .topbar-jump { display: none; }

.frame-content { position: relative; flex: 1; padding: 22px 24px; overflow: hidden; }
.frame-content::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: linear-gradient(to bottom, transparent, var(--color-panel));
  pointer-events: none;
}
.beat-panel { position: absolute; inset: 0; padding: 22px 24px; opacity: 0; transform: translateY(6px); overflow: hidden; }
.beat-panel.active { opacity: 1; transform: translateY(0); }

/* ---------- icons: exact lucide-react paths (the app's real icon set), currentColor stroke ---------- */
.ic { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic.sm { width: 14px; height: 14px; }

/* ---------- shared: page heading block ---------- */
.page-h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.page-sub { margin-top: 2px; font-size: var(--text-sm); color: var(--color-muted); }
.page-head { margin-bottom: 14px; }

/* ---------- Home beat ---------- */
.home-greeting { text-align: center; padding-bottom: 14px; }
.home-hello { font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-display); margin-top: 8px; }
.home-orgline { font-size: var(--text-xs); color: var(--color-muted); margin-top: 4px; }
.home-date { font-size: 10.5px; color: var(--color-muted-2); margin-top: 2px; }
.home-search {
  margin: 12px auto 0; max-width: 340px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  padding: 7px 8px 7px 14px; font-size: 11px; color: var(--color-muted-2);
  box-shadow: var(--shadow-card);
}
.home-search .ic { width: 14px; height: 14px; }
.home-search kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: 9px;
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: 4px; padding: 2px 5px; color: var(--color-muted-2);
}
.home-group { margin-top: 16px; }
.home-group-label {
  text-align: center; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--color-muted-2); margin-bottom: 8px;
}
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.module-tile {
  background: var(--color-panel); border: 1px solid var(--color-rule);
  border-radius: var(--radius-control); overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.module-tile .tile-icon-cap {
  background: var(--color-paper-2);
  border-bottom: 1px solid var(--color-rule);
  padding: 10px 0; display: flex; align-items: center; justify-content: center;
  color: var(--color-muted);
}
.module-tile.reporting .tile-icon-cap { background: var(--color-accent-quiet); color: var(--color-accent-hover); }
.tile-title { font-size: 11px; font-weight: 700; padding: 8px 9px 0; }
.tile-desc { font-size: 9.5px; line-height: 1.4; color: var(--color-muted); padding: 3px 9px 9px; }

/* ---------- masthead (Today / list pages) ---------- */
.page-mast { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.live-row { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-positive); display: inline-block; }
.live-label { color: var(--color-positive-strong); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.live-sep { color: var(--color-rule-2); }
.live-client { color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.page-meta-row { display: flex; gap: 14px; margin-top: 4px; font-size: 10.5px; color: var(--color-muted); }
.mast-actions { display: flex; align-items: center; gap: 8px; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  padding: 5px 12px; font-size: 10.5px; color: var(--color-muted);
  background: var(--color-panel);
}
.icon-btn {
  width: 26px; height: 26px; border: 1px solid var(--color-rule); border-radius: var(--radius-control);
  display: flex; align-items: center; justify-content: center; color: var(--color-muted);
}

/* ---------- stat band: rule-divided KPI row, not shadowed cards ---------- */
.stat-band {
  display: grid;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
  background: var(--color-panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 14px;
}
.stat-band.six { grid-template-columns: repeat(3, 1fr); }
.stat-band.five { grid-template-columns: repeat(3, 1fr); }
.stat-band.four { grid-template-columns: repeat(2, 1fr); }
.stat-cell {
  padding: 10px 12px;
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  display: flex; flex-direction: column; gap: 2px;
}
.stat-band.six .stat-cell:nth-child(3n),
.stat-band.five .stat-cell:nth-child(3n),
.stat-band.four .stat-cell:nth-child(2n) { border-right: none; }
.stat-band.six .stat-cell:nth-last-child(-n+3),
.stat-band.five .stat-cell:nth-last-child(-n+3),
.stat-band.four .stat-cell:nth-last-child(-n+2) { border-bottom: none; }
.stat-label { font-size: 10px; color: var(--color-muted); }
.stat-value { font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.stat-sub { font-size: 9.5px; color: var(--color-muted-2); }
.stat-sub.up { color: var(--color-positive-strong); }
.stat-sub.down { color: var(--color-negative); }

/* ---------- filters / segmented control ---------- */
.filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.field-label { font-size: 10.5px; color: var(--color-muted); font-weight: 600; }
.select-pill {
  border: 1px solid var(--color-rule); border-radius: var(--radius-control);
  padding: 4px 10px; font-size: 11px; color: var(--color-ink); background: var(--color-panel);
}
.filter-caption { font-size: 10px; color: var(--color-muted-2); }
.segmented { display: flex; gap: 14px; border-bottom: 1px solid var(--color-rule); margin-bottom: 12px; }
.seg-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--color-muted);
  padding-bottom: 7px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.seg-item.active { color: var(--color-ink); border-color: var(--color-accent); }
.seg-item .ic { width: 13px; height: 13px; }

/* ---------- panel: shared card chrome for charts/tables ---------- */
.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel-head { padding: 10px 14px 8px; border-bottom: 1px solid var(--color-rule); }
.panel-head h3 { font-size: 11.5px; font-weight: 700; color: var(--color-ink); }
.panel-head p { font-size: 10px; color: var(--color-muted); margin-top: 1px; }
.panel-body { padding: 10px 14px 12px; }
.chart-row { display: grid; gap: 10px; margin-bottom: 14px; }
.chart-row.two { grid-template-columns: 1fr 1fr; }

/* ---------- hand-built charts (no chart library) ---------- */
.chart-svg { width: 100%; height: 96px; display: block; overflow: visible; }
.chart-grid-line { stroke: var(--color-rule); stroke-width: 1; }
.chart-bar { fill: var(--color-accent-2); }
.chart-bar.alt { fill: var(--color-accent); }
.chart-line { fill: none; stroke: var(--color-muted-2); stroke-width: 1.75; }
.chart-line.dashed { stroke-dasharray: 4 3; }
.chart-line.solid-accent { stroke: var(--color-accent); }
.chart-area { fill: var(--color-accent); opacity: 0.14; }
.chart-area-line { fill: none; stroke: var(--color-accent); stroke-width: 1.75; }
/* axis labels render as real HTML, never inside the (non-uniformly scaled) SVG
   viewBox — that's what was stretching the text before. */
.chart-axis-row { display: flex; justify-content: space-between; padding: 2px 14px 0; margin-top: -4px; }
.chart-axis-row span { font-size: 9px; color: var(--color-muted-2); }
.chart-legend { display: flex; gap: 12px; padding: 8px 14px 10px; font-size: 9.5px; color: var(--color-muted); }
.chart-legend .swatch { width: 7px; height: 7px; border-radius: 2px; display: inline-block; margin-right: 4px; }
.chart-legend .swatch.line { border-radius: 0; height: 2px; width: 9px; position: relative; top: -2px; }

/* ---------- tables ---------- */
.panel-table { width: 100%; font-size: 10.5px; border-collapse: collapse; }
.panel-table th {
  text-align: left; font-weight: 600; color: var(--color-muted);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 6px 10px; border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}
.panel-table td { padding: 7px 10px; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); }
.panel-table tbody tr:nth-child(even) { background: color-mix(in oklab, var(--color-paper-2) 55%, transparent); }
.panel-table td.up { color: var(--color-positive-strong); }
.panel-table td.down { color: var(--color-negative); }
.lfl-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-pill); font-size: 9px; font-weight: 700; border: 1px solid transparent; }
.lfl-badge.in { background: var(--color-accent-quiet); color: var(--color-accent-hover); }
.lfl-badge.part { background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-rule); }

/* ---------- rowlist (Email Reports subscriptions) ---------- */
.toolbar-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.btn-accent {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: 10.5px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill);
}
.toolbar-meta { font-size: 10.5px; color: var(--color-muted); }
.rowlist { border-top: 1px solid var(--color-rule); }
.row-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--color-rule);
}
.row-title { font-size: 11.5px; font-weight: 600; color: var(--color-ink); display: block; }
.row-sub { font-size: 10px; color: var(--color-muted); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.row-sub .ic { width: 11px; height: 11px; }
.row-trailing { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.badge { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); }
.badge.on { background: color-mix(in oklab, var(--color-positive) 16%, var(--color-panel)); color: var(--color-positive-strong); }
.badge.off { background: var(--color-paper-2); color: var(--color-muted-2); }
.row-chevron { color: var(--color-muted-2); font-size: 13px; }

/* ---------- Data Management ---------- */
.dm-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.status-pill { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--color-rule); color: var(--color-muted); }
.status-pill.saved { color: var(--color-positive-strong); border-color: color-mix(in oklab, var(--color-positive) 40%, var(--color-rule)); }
.dm-meta { font-size: 10px; color: var(--color-muted-2); margin: 8px 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dm-meta .history-btn { display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-underline-offset: 2px; color: var(--color-muted-2); }
.dm-meta .history-btn .ic { width: 10px; height: 10px; }
.datagrid { border: 1px solid var(--color-rule); border-radius: var(--radius-control); overflow: hidden; }

/* DataGrid's real toolbar: search + Undo/Redo/Find/Export/Import/Generate IDs/Expand/
   Refresh (icon-only, same collapse the real app applies under its own breakpoint) +
   Save changes (the one filled/accent button, disabled in the default clean state). */
.dg-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px; border-bottom: 1px solid var(--color-rule);
  background: var(--color-panel);
}
.dg-search {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  border: 1px solid var(--color-rule); border-radius: var(--radius-control);
  padding: 5px 8px; font-size: 10.5px; color: var(--color-muted-2); background: var(--color-paper);
}
.dg-search .ic { width: 12px; height: 12px; }
.dg-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--color-rule); border-radius: var(--radius-control);
  background: var(--color-panel); box-shadow: var(--shadow-card); color: var(--color-muted);
}
.dg-btn .ic { width: 13px; height: 13px; }
.dg-btn.primary {
  width: auto; padding: 0 10px; gap: 5px;
  background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent);
  font-size: 10.5px; font-weight: 700; opacity: .5;
}
.dg-btn.primary .ic { width: 12px; height: 12px; }
.dg-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-top: 1px solid var(--color-rule);
  background: var(--color-paper-2); font-size: 10px; color: var(--color-muted);
}
.dg-addrow { display: flex; align-items: center; gap: 4px; color: var(--color-accent-hover); font-weight: 600; }
.dg-addrow .ic { width: 11px; height: 11px; }

.missing-notice {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid color-mix(in oklab, var(--color-negative) 30%, var(--color-rule));
  background: color-mix(in oklab, var(--color-negative) 6%, var(--color-panel));
  border-radius: var(--radius-control);
  padding: 8px 10px; margin-bottom: 10px;
}
.missing-notice .ic { width: 14px; height: 14px; color: var(--color-negative); margin-top: 1px; }
.missing-notice-title { font-size: 11px; color: var(--color-negative); }
.missing-notice-title strong { font-weight: 700; }
.missing-notice-links { font-size: 10px; color: var(--color-muted); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.missing-notice-links span { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-negative) 40%, transparent); text-underline-offset: 2px; }

/* ---------- CTA ---------- */
.cta {
  min-height: 70vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; padding: 40px 24px;
}
.cta h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.cta p { max-width: 42ch; color: var(--color-muted); line-height: 1.6; }
.cta-button {
  margin-top: 8px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  transition: background .2s ease;
}
.cta-button:hover { background: var(--color-accent-hover); }

/* fallback when reduced motion is requested, or GSAP fails to load:
   no pin, no scrub, no 3D — beat 0 shows as plain static content. */
.pin-spacer.no-motion { height: auto; }
.pin-spacer.no-motion .pin-stage { position: static; height: auto; padding: 60px 0; }
.pin-spacer.no-motion .beat-list,
.pin-spacer.no-motion .beat-copy-item:not(.active),
.pin-spacer.no-motion .beat-panel:not(.active) { display: none; }

/* ---------- responsive ---------- */
/* Below 900px the pin + scroll-driven crossfade mechanic (js/main.js) stays exactly as
   desktop — same GSAP timeline, same setActiveBeat() driving both the copy text and the
   frame together. Only the layout changes: copy stacks above the frame instead of sitting
   beside it (there isn't room for both side by side at phone width), the frame drops its
   rail and renders single-column at a fixed, taller-than-desktop height with a larger type
   scale, and — since a couple of beats (Today, Executive Overview) have more content than
   comfortably fits even at that height — .frame-content becomes the one part of the frame
   that accepts touch input, so it can be scrolled on its own like a real app's content pane
   while everything else (rail, topbar, buttons) stays inert. */
@media (max-width: 900px) {
  .pin-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-width: 440px;
  }
  .beat-list { display: none; }
  .beat-copy { min-height: 96px; }
  .beat-copy-item h2 { font-size: clamp(20px, 6vw, 25px); }
  .beat-copy-item p { font-size: 13.5px; max-width: none; }

  .frame-stage { perspective: 1100px; }
  .frame {
    width: 100%;
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    height: 62dvh;
    max-height: 600px;
    min-height: 460px;
    box-shadow: var(--shadow-card), 0 20px 36px -18px rgb(14 23 45 / 0.28);
  }
  .frame-rail { display: none; }
  .frame-content { overflow-y: auto; -webkit-overflow-scrolling: touch; pointer-events: auto; }

  .frame-topbar { font-size: 12px; padding: 0 12px; }
  .topbar-jump { font-size: 11px; }
  .frame-user { font-size: 11px; }

  /* ---- enlarge the dense desktop-mockup type scale for touch/reading distance,
     while staying compact enough to fit the fixed frame height above ---- */
  .page-h1 { font-size: 19px; }
  .page-sub { font-size: 12.5px; }

  .home-hello { font-size: 23px; }
  .home-orgline, .home-date { font-size: 11px; }
  .home-search { max-width: none; font-size: 12px; }
  .app-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile-title { font-size: 12.5px; }
  .tile-desc { font-size: 10.5px; }

  .page-mast { flex-wrap: wrap; gap: 8px 12px; }
  .live-label, .live-client, .page-meta-row { font-size: 11px; }
  .pill-btn { font-size: 11px; }

  .stat-band.six, .stat-band.five { grid-template-columns: repeat(2, 1fr); }
  .stat-label { font-size: 10.5px; }
  .stat-value { font-size: 18px; }
  .stat-sub { font-size: 10px; }

  .filter-row { gap: 8px 12px; }
  .field-label, .select-pill, .filter-caption { font-size: 12px; }
  .segmented { flex-wrap: wrap; gap: 8px 14px; }
  .seg-item { font-size: 12px; }

  .chart-row.two { grid-template-columns: 1fr; gap: 8px; }
  .chart-svg { height: 84px; }
  .panel-head h3 { font-size: 12.5px; }
  .panel-head p { font-size: 10.5px; }
  .chart-axis-row span { font-size: 10px; }
  .chart-legend { font-size: 11px; }

  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel-table { font-size: 11.5px; white-space: nowrap; }
  .panel-table th { font-size: 10.5px; }
  .lfl-badge { font-size: 10.5px; }

  .toolbar-row { flex-wrap: wrap; gap: 8px; }
  .btn-accent { font-size: 12px; }
  .toolbar-meta { font-size: 11px; }
  .row-item > div:first-child { flex: 1; min-width: 0; }
  .row-title { font-size: 13px; }
  .row-sub { font-size: 11px; }
  .badge { font-size: 10.5px; }

  .status-pill { font-size: 11px; }
  .missing-notice-title { font-size: 12px; }
  .missing-notice-links { font-size: 11px; }
  .dm-meta { font-size: 11px; }
  .dg-toolbar { flex-wrap: wrap; }
  .dg-search { font-size: 12px; flex-basis: 100%; }
  .dg-btn { width: 30px; height: 30px; }
  .dg-btn.primary { font-size: 12px; }
  .dg-footer { font-size: 11px; flex-wrap: wrap; gap: 6px; }

  .pin-spacer { height: 420vh; }
}

@media (max-width: 640px) {
  .site-header { padding: 12px 16px; }
  .brand-logo { height: 40px; }
  .header-cta { padding: 8px 14px; font-size: 12px; }
}

/* ---------- reduced motion: kill every transform, no exceptions ---------- */
@media (prefers-reduced-motion: reduce) {
  .frame, .beat-panel, .beat-copy-item, .beat-list li {
    transition: none !important;
  }
  .frame { transform: none !important; }
}