:root {
  /* Apple marketing feel: cool light field, midnight type, blue only for links */
  --paper: #f5f5f7;
  --paper-dark: #e8e8ed;
  --ink: #1d1d1f;
  --blue: #1d1d1f;
  --blue-dark: #000000;
  --accent: #0071e3;
  --line: #d2d2d7;
  --white: #ffffff;
  --stage: #e8e8ed;
  --control-radius: 12px;
  /* Shared page spine — early access + final CTA share the same edges */
  --page-pad: max(24px, 8vw);
  --content-max: 980px;
  --prose-max: 640px;
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, Cambria, "Times New Roman", Times, serif;
  --mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.text-link {
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}

.text-link:hover { color: var(--accent); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 45px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: transform 0.25s, background 0.25s, color 0.25s;
}

.button:hover { transform: translateY(-2px); }
/* Option 2 style: midnight pill CTAs */
.button-dark {
  background: var(--blue);
  color: var(--white);
  border-radius: 980px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  padding: 0 22px;
}
.button-dark:hover { background: var(--blue-dark); }
.button-outline { border-color: var(--line); background: transparent; border-radius: 980px; }
.button-outline:hover { border-color: var(--blue); color: var(--blue); }
.button-light { background: var(--paper); color: var(--blue-dark); border-radius: 980px; }
.button-paper { background: var(--paper); color: var(--blue-dark); border-radius: 980px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero */
.hero {
  position: relative;
  height: 100vh;
  max-height: 100vh;
  display: grid;
  grid-template-columns: 46% 54%;
  border-bottom: none;
  overflow: hidden;
  background: var(--paper);
  padding: 16px;
}

.hero-logo {
  position: absolute;
  top: 36px;
  left: calc(16px + 7vw);
  z-index: 4;
}

.hero-logo img {
  display: block;
  height: 28px;
  width: auto;
}

.hero-copy {
  padding: clamp(88px, 11vh, 120px) 7vw clamp(56px, 7vh, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  height: 100%;
  position: relative;
  z-index: 3;
  overflow: visible;
  /* Option 5: white floating card on Apple gray */
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.03);
}

.section-kicker,
.final-kicker {
  font: 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero h1 {
  /* Display serif — matches manifesto / pricing headlines */
  font-family: var(--serif);
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 14ch;
}

.hero h1 em {
  color: inherit;
  font-style: normal;
  font-weight: 600;
}

.hero-intro {
  max-width: 440px;
  font-family: var(--sans);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
  margin: clamp(16px, 2vh, 22px) 0 0;
  color: #6e6e73;
}

.hero-vision-link,
.hero-learn-link {
  position: absolute;
  left: 7vw;
  bottom: clamp(28px, 4vh, 40px);
  display: inline-block;
  margin-top: 0;
  padding-top: 0;
}

.hero-learn-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  border: none;
  padding-bottom: 0;
}

.hero-learn-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-cta-row {
  /* Same 2-col grid as the fields above — button left, vision under right column */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  margin-top: 6px;
  width: 100%;
}

/* Option B: button fills left column; vision stays centered in right */
.hero-cta-row .waitlist-submit {
  width: 100%;
  justify-self: stretch;
  box-sizing: border-box;
}

.hero-vision-inline {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  border: none;
  padding: 0;
  white-space: nowrap;
  justify-self: center;
}

.hero-vision-inline:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-stage {
  /* Light product well — like Apple lineup cards, not a dark brand slab */
  background: var(--stage);
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.5vh, 16px) clamp(12px, 1.5vw, 20px) clamp(40px, 5vh, 56px);
  border-radius: 24px;
  margin-left: 12px;
}

.desktop-window {
  /* Default (mobile keeps fluid rules below). Desktop artboard locks size. */
  width: min(92%, clamp(480px, 38vw, 820px));
  height: min(66vh, clamp(420px, 33vw, 580px));
  max-height: 580px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  /* Slightly rounded outer frame — tighter than 12px, still soft */
  border-radius: 16px;
  /* Clip chrome/children so top bar & body follow the rounded corners cleanly */
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
  transform: scale(1);
  transform-origin: center center;
}

/* Desktop artboard: fixed design size, scaled uniformly by JS */
.desktop-artboard {
  display: contents;
}

.window-top,
.window-footer {
  height: 32px;
  flex-shrink: 0;
  padding: 0 13px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d7d9d5;
  color: #607080;
  font: 9px var(--mono);
}

.window-top {
  position: relative;
  justify-content: flex-start;
}

.window-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.window-footer {
  border: 0;
  border-top: 1px solid #d7d9d5;
  justify-content: flex-start;
}

.window-dots { display: flex; gap: 5px; align-items: center; }
.window-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}
/* macOS-style traffic lights */
.window-dots i:nth-child(1) { background: #ff5f57; }
.window-dots i:nth-child(2) { background: #febc2e; }
.window-dots i:nth-child(3) { background: #28c840; }
.window-status { color: #5c8b76; }

.window-body {
  display: grid;
  grid-template-columns: 44px 1fr;
  /* Fill remaining frame under title bar — never size to host content */
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.window-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0 12px;
  background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
  border-right: 1px solid #d5d3cd;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.65);
}

.sidebar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8b9399;
  cursor: default;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-item svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
}

.sidebar-item svg [stroke="none"] {
  fill: currentColor;
}

.sidebar-item--active {
  color: var(--blue);
  background: #e4ecf5;
  box-shadow:
    inset 0 0 0 1px #c5d4e6,
    0 1px 2px rgba(21, 45, 77, 0.08);
}

.sidebar-item--add {
  margin-top: auto;
  color: #767e84;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 0 1px #d0cec8;
}

.sidebar-item--add svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.context-canvas {
  padding: 31px 31px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.canvas-label {
  font: 9px var(--mono);
  color: #788080;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.canvas-heading {
  font: 48px var(--serif);
  line-height: 0.85;
  margin: 16px 0 22px;
  color: var(--blue-dark);
}

.canvas-heading em { color: #c45c26; }

/* ——— Realistic host windows + product frosted toolbelt ——— */
.app-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Fixed stage slot; hosts are absolutely stacked inside */
  height: 100%;
  padding: 6px 6px 52px 0;
  z-index: 1;
  /* Own layer so host typing/swaps don’t re-tint sibling glass */
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
}

.app-window {
  display: none !important;
  flex-direction: column;
  /* Absolute fill keeps every host the same footprint */
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 52px;
  left: 0;
  width: auto;
  height: auto;
  min-height: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Desktop: host sits high enough that a growing toast deck gently overlaps it */
@media (min-width: 801px) {
  .desktop-window.rail-r9 .app-window {
    /* Slightly taller + a touch higher → one toast clears; 2–3 peeks kiss the titlebar */
    top: max(10%, 58px);
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(calc(100% - 28px), max(80%, 328px));
    height: min(calc(100% - 88px), max(71%, 242px));
    transform: translateX(-50%);
  }
}

/* Only the active host may paint — prevents Chrome chrome bleeding under Mail/etc */
.app-window.is-open {
  display: flex !important;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}

.app-window[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.host-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font: 500 10px var(--sans);
  color: #3a3a3c;
  background: #f3f3f3;
  border-bottom: 1px solid #e1e1e1;
  flex-shrink: 0;
}

.host-titlebar__icon { display: block; flex-shrink: 0; }
.host-titlebar__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.host-titlebar__badge {
  display: none;
}

.host-titlebar--word { background: linear-gradient(180deg, #f7fafc, #eef3f8); }
.host-titlebar--excel { background: linear-gradient(180deg, #f5faf6, #eaf4ec); }
.host-titlebar--ppt { background: linear-gradient(180deg, #fdf6f4, #f8ece8); }
.host-titlebar--gmail { background: linear-gradient(180deg, #fff8f7, #fceeee); }

.host-ribbon {
  flex-shrink: 0;
  border-bottom: 1px solid #e1e1e1;
  background: #fafafa;
  padding: 0 8px 6px;
}
.host-ribbon__tabs {
  display: flex;
  gap: 0;
  font: 500 8px var(--sans);
  color: #5f5f5f;
  border-bottom: 1px solid #e8e8e8;
  margin: 0 -8px 4px;
  padding: 0 8px 0 14px;
}
.host-ribbon__tabs span {
  padding: 5px 7px 4px;
  border-bottom: 2px solid transparent;
  cursor: default;
  white-space: nowrap;
}
.host-ribbon__tabs .is-on {
  color: #185abd;
  border-bottom-color: #185abd;
  font-weight: 600;
}
/* PPT ribbon: use the real screenshot the user provided */
.host-ribbon--ppt-shot {
  padding: 0;
  margin: 0;
  background: #f3f3f3;
  border-bottom: 1px solid #e1dfdd;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
}
.host-ribbon--ppt-shot .host-ribbon__shot {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* Word ribbon: use the real screenshot the user provided */
.host-ribbon--word-shot {
  padding: 0;
  margin: 0;
  background: #f3f3f3;
  border-bottom: 1px solid #e1dfdd;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
}
.host-ribbon--word-shot .host-ribbon__shot {
  display: block;
  /* Keep full ribbon visible in-flow; nudge scale only a little */
  width: 104%;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* Gentle crispness — no blur, no crop/distort */
  filter: contrast(1.04);
}
.host-ribbon--word .host-ribbon__tabs .is-on { color: #185abd; border-bottom-color: #185abd; }

.host-ribbon--word,
.host-ribbon--ppt {
  background: #f3f3f3;
  padding-bottom: 3px;
  border-bottom: 1px solid #e1dfdd;
}

/* Colored File tab (Office Backstage cue) */
.ribbon-file {
  font-weight: 600 !important;
  color: #fff !important;
  border-bottom-color: transparent !important;
  border-radius: 3px 3px 0 0;
  margin: 2px 3px 0 0;
  padding: 3px 8px 4px !important;
}
.ribbon-file--word { background: #185abd; }
.ribbon-file--ppt { background: #c43e1c; }

/* Grouped Office ribbon (Word / PowerPoint) */
.ribbon-groups {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  min-height: 42px;
}
.ribbon-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 2px 6px 1px;
  border-right: 1px solid #edebe9;
  min-width: 0;
  flex-shrink: 1;
  min-height: 44px;
}
.ribbon-group:last-child { border-right: 0; padding-right: 2px; }
.ribbon-group__label {
  display: none;
}
.ribbon-group__controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
}
.ribbon-group__controls--mid {
  justify-content: center;
  align-items: center;
}
.ribbon-group__controls--font {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px 2px;
  max-width: 112px;
  row-gap: 2px;
}
.ribbon-group__controls--font .rg-select--font { width: 48px; flex: 0 0 auto; }
.ribbon-group__controls--font .rg-select--size { width: 24px; flex: 0 0 auto; }
.ribbon-group__controls--font-ppt {
  max-width: 100px;
}
.ribbon-group__controls--font-ppt .rg-select--font { width: 46px; }
.ribbon-group__controls--font-ppt .rg-select--size { width: 24px; }

.rg-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rg-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 4px 1px;
  border-radius: 3px;
  color: #185abd;
  font: 600 6px/1 var(--sans);
  position: relative;
}
.rg-btn .rg-caret {
  margin: 0;
  border-top-color: #605e5c;
}
.rg-btn em { font-style: normal; color: #252423; font-weight: 400; font-size: 5.5px; }
.rg-btn--ppt { color: #c43e1c; }
.rg-btn--tall { min-height: 30px; min-width: 26px; }
.rg-btn--slide {
  min-height: 30px;
  min-width: 36px;
  padding: 2px 5px;
  background: transparent;
  border: 0;
  color: #c43e1c;
  box-shadow: none;
}
.rg-btn--slide em { font-size: 5.5px; color: #252423; }
.rg-slide-ico {
  position: relative;
  width: 16px;
  height: 12px;
  display: block;
}
.rg-slide-ico i {
  position: absolute;
  display: block;
  border: 1px solid #c43e1c;
  background: #fff7f4;
  border-radius: 1px;
  font-style: normal;
}
.rg-slide-ico i:first-child {
  width: 11px;
  height: 8px;
  left: 0;
  top: 3px;
  opacity: 0.55;
}
.rg-slide-ico i:last-child {
  width: 12px;
  height: 9px;
  right: 0;
  top: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.rg-slide-ico i:last-child::after {
  content: "+";
  position: absolute;
  right: -1px;
  bottom: -2px;
  font: 700 7px/1 var(--sans);
  color: #c43e1c;
  background: #fff;
  padding: 0 1px;
}

/* Clipboard / tool glyphs — Fluent-style */
.rg-btn--paste {
  gap: 0;
  padding: 1px 5px 0;
}
.rg-btn--paste em { margin-top: 1px; }
.rg-paste {
  display: block;
  width: 14px;
  height: 16px;
  position: relative;
  box-sizing: border-box;
  background: linear-gradient(#faf9f8 0 0) 0 3px / 14px 13px no-repeat;
  border: 1.2px solid #605e5c;
  border-top: 0;
  border-radius: 0 0 1.5px 1.5px;
}
.rg-paste::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -1.5px;
  width: 8px;
  height: 4px;
  border: 1px solid #605e5c;
  border-radius: 1px;
  background: linear-gradient(180deg, #fff 0%, #e1dfdd 100%);
  box-sizing: border-box;
}
.rg-paste::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 5px;
  bottom: 2px;
  border-radius: 0.5px;
  background:
    linear-gradient(#c43e1c 0 0) 1px 7px / 8px 2px no-repeat,
    linear-gradient(#f4d35e 0 0) 1px 5px / 8px 2px no-repeat,
    #fff;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.host-ribbon--word .rg-paste::after {
  background:
    linear-gradient(#185abd 0 0) 1px 7px / 8px 2px no-repeat,
    linear-gradient(#a8c4e8 0 0) 1px 5px / 8px 2px no-repeat,
    #fff;
}
.ico-cut,
.ico-copy,
.ico-brush,
.ico-bullets,
.ico-numbers,
.ico-align {
  display: block;
  font-style: normal;
  position: relative;
}
/* Scissors: two rings + crossed blades */
.ico-cut {
  width: 12px;
  height: 12px;
  background: none;
}
.ico-cut::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5.5px;
  height: 5.5px;
  border: 1.35px solid #444;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 6.5px 0 0 -0.05px #fff, 6.5px 0 0 1.3px #444;
}
.ico-cut::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 8px;
  height: 8px;
  background:
    linear-gradient(48deg, transparent 45%, #444 46% 55%, transparent 56%),
    linear-gradient(132deg, transparent 45%, #444 46% 55%, transparent 56%);
}
.ico-copy {
  width: 9px;
  height: 10px;
  border: 1px solid #444;
  border-radius: 1px;
  background: #fff;
  box-shadow: 2px -2px 0 -1px #fff, 2px -2px 0 0 #444;
}
.ico-brush {
  width: 8px;
  height: 11px;
  border-radius: 1px 1px 2px 2px;
  background: linear-gradient(180deg, #f4d35e 0 38%, #c9a227 38% 42%, #185abd 43% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.host-ribbon--ppt .ico-brush {
  background: linear-gradient(180deg, #f4d35e 0 38%, #c9a227 38% 42%, #c43e1c 43% 100%);
}
.rg-color .rg-swatch--red { background: #d13438; }
.host-ribbon--ppt .rg-color .rg-swatch--red { background: #c43e1c; }
.ico-bullets {
  width: 11px;
  height: 10px;
  background:
    radial-gradient(circle at 1.5px 1.5px, #185abd 1.2px, transparent 1.3px),
    radial-gradient(circle at 1.5px 5px, #185abd 1.2px, transparent 1.3px),
    radial-gradient(circle at 1.5px 8.5px, #185abd 1.2px, transparent 1.3px),
    linear-gradient(#605e5c, #605e5c) 4px 1px / 7px 1.2px no-repeat,
    linear-gradient(#605e5c, #605e5c) 4px 4.5px / 7px 1.2px no-repeat,
    linear-gradient(#605e5c, #605e5c) 4px 8px / 7px 1.2px no-repeat;
}
.host-ribbon--ppt .ico-bullets {
  background:
    radial-gradient(circle at 1.5px 1.5px, #c43e1c 1.2px, transparent 1.3px),
    radial-gradient(circle at 1.5px 5px, #c43e1c 1.2px, transparent 1.3px),
    radial-gradient(circle at 1.5px 8.5px, #c43e1c 1.2px, transparent 1.3px),
    linear-gradient(#605e5c, #605e5c) 4px 1px / 7px 1.2px no-repeat,
    linear-gradient(#605e5c, #605e5c) 4px 4.5px / 7px 1.2px no-repeat,
    linear-gradient(#605e5c, #605e5c) 4px 8px / 7px 1.2px no-repeat;
}
.ico-numbers {
  width: 11px;
  height: 10px;
  background:
    linear-gradient(#444, #444) 0 1px / 3px 1px no-repeat,
    linear-gradient(#444, #444) 1px 0 / 1px 3px no-repeat,
    linear-gradient(#666, #666) 5px 1px / 6px 1px no-repeat,
    linear-gradient(#444, #444) 0 4.5px / 3px 1px no-repeat,
    linear-gradient(#444, #444) 0 3.5px / 1px 3px no-repeat,
    linear-gradient(#444, #444) 2px 3.5px / 1px 3px no-repeat,
    linear-gradient(#666, #666) 5px 5px / 6px 1px no-repeat,
    linear-gradient(#444, #444) 0 8.5px / 3px 1px no-repeat,
    linear-gradient(#444, #444) 0 7.5px / 1px 3px no-repeat,
    linear-gradient(#444, #444) 2px 7.5px / 1px 3px no-repeat,
    linear-gradient(#666, #666) 5px 8.5px / 6px 1px no-repeat;
}
.ico-numbers::before { content: none; }
.ico-align {
  width: 11px;
  height: 8px;
  background:
    linear-gradient(#555, #555) 0 0 / 100% 1.2px no-repeat,
    linear-gradient(#555, #555) 0 3.4px / 100% 1.2px no-repeat,
    linear-gradient(#555, #555) 0 6.8px / 100% 1.2px no-repeat;
}
.ico-align--left {
  background:
    linear-gradient(#555, #555) 0 0 / 100% 1.2px no-repeat,
    linear-gradient(#555, #555) 0 3.4px / 70% 1.2px no-repeat,
    linear-gradient(#555, #555) 0 6.8px / 100% 1.2px no-repeat;
}
.ico-align--center {
  background:
    linear-gradient(#555, #555) 15% 0 / 70% 1.2px no-repeat,
    linear-gradient(#555, #555) 0 3.4px / 100% 1.2px no-repeat,
    linear-gradient(#555, #555) 15% 6.8px / 70% 1.2px no-repeat;
}
.ico-align--right {
  background:
    linear-gradient(#555, #555) 0 0 / 100% 1.2px no-repeat,
    linear-gradient(#555, #555) 30% 3.4px / 70% 1.2px no-repeat,
    linear-gradient(#555, #555) 0 6.8px / 100% 1.2px no-repeat;
}

.rg-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 2px;
  border-radius: 2px;
  font: 700 7px/1 var(--sans);
  color: #252423;
  background: transparent;
  gap: 1px;
}
.rg-ico > b { font-weight: 800; font-style: normal; }
.rg-ico > i:not([class]) { font-style: italic; }
.rg-ico > u { text-decoration: underline; font-style: normal; }
.rg-ico > s { text-decoration: line-through; font-size: 6px; font-style: normal; }
.rg-ico.is-on {
  background: #e1dfdd;
  color: #252423;
  box-shadow: none;
}
.host-ribbon--ppt .rg-ico.is-on {
  background: #e1dfdd;
  color: #252423;
  box-shadow: none;
}
.rg-ico--wide {
  min-width: 30px;
  justify-content: flex-start;
  font-size: 6px;
  font-weight: 500;
  height: 10px;
  color: #555;
  padding: 0 2px;
}
.rg-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: 16px;
  padding: 0 4px 0 5px;
  border: 1px solid #8a8886;
  border-radius: 2px;
  background: #fff;
  font: 400 6.5px/1 var(--sans);
  color: #252423;
  box-shadow: none;
}
.rg-select b {
  width: 0;
  height: 0;
  border-left: 2.5px solid transparent;
  border-right: 2.5px solid transparent;
  border-top: 3px solid #605e5c;
  font-style: normal;
  flex-shrink: 0;
}
.rg-select--font { min-width: 0; width: 100%; }
.rg-select--size { min-width: 0; width: 100%; justify-content: space-between; }
.rg-sep {
  width: 1px;
  height: 12px;
  background: #edebe9;
  margin: 0 2px;
  flex-shrink: 0;
}
.rg-color,
.rg-hilite {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 16px;
  height: 15px;
  padding: 0 2px;
  font: 700 6.5px/1 var(--sans);
  color: #252423;
  border-radius: 2px;
  position: relative;
}
.rg-color span,
.rg-hilite span { line-height: 1; }
.rg-swatch {
  display: block;
  width: 11px;
  height: 2.5px;
  border-radius: 0.5px;
  font-style: normal;
}
.rg-swatch--red { background: #d13438; }
.rg-swatch--yellow { background: #fff100; box-shadow: inset 0 0 0 0.5px #c8b900; }
.rg-color i:not(.rg-swatch),
.rg-hilite i:not(.rg-swatch):not(.ico-hilite-pen) {
  display: block;
  width: 10px;
  height: 2.5px;
  border-radius: 1px;
  font-style: normal;
}
.rg-color i:not(.rg-swatch) { background: #185abd; }
.rg-color--ppt i:not(.rg-swatch) { background: #c43e1c; }
.rg-hilite { background: transparent; }
.rg-hilite i:not(.rg-swatch):not(.ico-hilite-pen) { background: #fff2a8; box-shadow: inset 0 0 0 0.5px #e0d070; }

/* Style gallery tiles (Word) */
.rg-style {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  width: 44px;
  height: 32px;
  padding: 3px 4px;
  border: 1px solid #edebe9;
  border-radius: 2px;
  background: #fff;
  color: #252423;
  box-shadow: none;
}
.rg-style strong {
  font: 400 7px/1.05 "Calibri", "Segoe UI", var(--sans);
  letter-spacing: -0.01em;
  color: #252423;
}
.rg-style em {
  font: 400 5px/1 var(--sans);
  font-style: normal;
  color: #605e5c;
}
.rg-style--title strong { font-size: 8px; font-weight: 700; }
.rg-style--h1 strong { font-size: 8px; font-weight: 700; color: #185abd; }
.rg-style.is-on {
  border-color: #185abd;
  box-shadow: inset 0 0 0 1px #185abd;
  background: #fff;
}
.rg-shape {
  width: 11px;
  height: 9px;
  border: 1.5px solid #666;
  border-radius: 1px;
  background: rgba(196, 62, 28, 0.1);
}
.rg-shape--oval { border-radius: 50%; }
.rg-shape--tri {
  width: 0;
  height: 0;
  border: 0;
  border-left: 5.5px solid transparent;
  border-right: 5.5px solid transparent;
  border-bottom: 9px solid #c43e1c;
  background: transparent;
  opacity: 0.8;
}
.rg-fill {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e85a35, #c43e1c);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.rg-stroke {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  border: 2px solid #333;
  background: #fff;
}
.rg-effects {
  font: 700 7px/1 var(--sans);
  color: #c43e1c;
  padding: 0 2px;
}
.ribbon-group--styles .ribbon-group__controls { gap: 3px; }
.ribbon-group__controls--draw { gap: 3px; }

/* ── Full PowerPoint Home ribbon (match M365 screenshot) ── */
.host-ribbon--ppt-full {
  padding-bottom: 2px;
  background: #f3f3f3;
}
.host-ribbon__tabs--ppt {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;
  margin: 0 -8px 3px;
  padding: 0 6px 0 14px;
  font: 500 7px var(--sans);
  border-bottom: 1px solid #e1e1e1;
}
.host-ribbon__tabs--ppt > span {
  padding: 4px 5px 3px;
  flex-shrink: 0;
}
.host-ribbon__tabs--ppt .is-on {
  color: #c43e1c;
  border-bottom-color: #c43e1c;
  font-weight: 600;
}
.ribbon-contextual {
  color: #c43e1c !important;
  font-weight: 600;
  margin-left: 2px;
}
.ribbon-tab-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0 3px;
  flex-shrink: 0;
}
.ribbon-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 7px;
  border: 1px solid #8a8886;
  border-radius: 2px;
  background: #fff;
  font: 400 6.5px/1 var(--sans);
  color: #252423;
}
.ribbon-pill i {
  display: block;
  font-style: normal;
}
.ico-record {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d13438;
  box-shadow: inset 0 0 0 1.5px #fff;
  border: 1px solid #d13438;
  box-sizing: border-box;
}
.ico-comments {
  width: 8px;
  height: 7px;
  border: 1px solid #555;
  border-radius: 2px 2px 2px 0;
  background: #fff;
  position: relative;
}
.ico-comments::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: -3px;
  border: 2px solid transparent;
  border-top-color: #555;
  border-left-color: #555;
}

.ribbon-groups--ppt {
  overflow: visible;
  min-height: 46px;
  align-items: stretch;
  flex-shrink: 0;
  width: max-content;
  transform: scale(0.835);
  transform-origin: left top;
  margin-bottom: -8px; /* reclaim scaled height */
}
.ribbon-groups--ppt::-webkit-scrollbar { display: none; }
.host-ribbon--ppt-full {
  overflow: hidden;
}
.host-ribbon__tabs--ppt {
  font: 500 6.5px var(--sans);
}
.host-ribbon__tabs--ppt > span {
  padding: 3px 4px 3px;
}
.ribbon-groups--ppt .ribbon-group {
  flex-shrink: 0;
  padding: 2px 4px 1px;
}
.ribbon-groups--ppt .ribbon-group__label {
  font-size: 5.5px;
}

/* Font group: two tight rows */
.ribbon-group__controls--font-full {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: none;
  justify-content: center;
}
.ribbon-group__controls--para-full {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.ribbon-group__controls--cluster {
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.ribbon-group--solo .ribbon-group__controls--mid {
  width: 100%;
}
.rg-btn--cluster {
  min-width: 30px;
  min-height: 32px;
  padding: 2px 4px;
  color: #252423;
  border-radius: 3px;
  justify-content: center;
}
.rg-row {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-wrap: nowrap;
}
.rg-select--font-wide {
  width: 98px;
  min-width: 98px;
  font-size: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ribbon-group--font-ppt .rg-select--size {
  width: 22px;
  justify-content: space-between;
}

/* Slides command stack with icons + labels + chevrons */
.rg-stack--labeled { gap: 0; }
.rg-ico--cmd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 11px;
  padding: 0 1px;
  font-weight: 500;
  justify-content: flex-start;
}
.rg-ico--cmd em {
  font: 500 5.5px/1 var(--sans);
  font-style: normal;
  color: #444;
}
.rg-ico--cmd > b {
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 2.5px solid #777;
  margin-left: 1px;
}

/* New Slide with green + */
.rg-slide-ico--plus {
  width: 15px;
  height: 12px;
}
.rg-slide-ico--plus i {
  position: relative;
  display: block;
  width: 13px;
  height: 10px;
  border: 1px solid #605e5c;
  border-radius: 1px;
  background: linear-gradient(180deg, #fff 0%, #f3f2f1 100%);
  left: auto;
  top: auto;
  opacity: 1;
  box-shadow: none;
}
.rg-slide-ico--plus i::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  right: 2px;
  height: 1px;
  background: #c8c6c4;
  box-shadow: 0 2px 0 #c8c6c4;
}
.rg-slide-ico--plus i::after {
  content: "+";
  position: absolute;
  right: -3px;
  bottom: -4px;
  font: 700 9px/1 var(--sans);
  color: #107c10;
  background: #f3f3f3;
  padding: 0 1px;
  border-radius: 1px;
}

/* Drawing cluster: Insert / Drawing / Add-ins */
.ribbon-group--drawing-cluster {
  border-right: 0;
}
.ribbon-group__controls--cluster {
  gap: 4px;
  align-items: flex-end;
}
.rg-btn--cluster {
  min-width: 28px;
  min-height: 30px;
  padding: 2px 3px;
  color: #444;
}
.rg-btn--cluster em {
  font-size: 5.5px;
  color: #444;
}
.rg-btn--cluster > i {
  display: block;
  font-style: normal;
  margin: 0 auto 2px;
}

/* Extra PPT glyphs */
.ico-layout,
.ico-reset,
.ico-section,
.ico-clear-fmt,
.ico-indent-dec,
.ico-indent-inc,
.ico-linespace,
.ico-columns,
.ico-textdir,
.ico-aligntext,
.ico-smartart,
.ico-textbox,
.ico-drawing,
.ico-addins {
  display: block;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
}
.ico-layout {
  width: 9px;
  height: 8px;
  border: 1px solid #666;
  background:
    linear-gradient(#666, #666) 3px 0 / 1px 100% no-repeat,
    #fff;
}
.ico-reset {
  width: 9px;
  height: 8px;
  border: 1px solid #666;
  border-radius: 1px;
  background: #fff;
}
.ico-reset::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border: 1px solid #c43e1c;
  border-left-color: transparent;
  border-radius: 50%;
}
.ico-section {
  width: 9px;
  height: 8px;
  background:
    linear-gradient(#666, #666) 0 0 / 100% 1px no-repeat,
    linear-gradient(#666, #666) 0 3.5px / 100% 1px no-repeat,
    linear-gradient(#666, #666) 0 7px / 100% 1px no-repeat;
}
.ico-clear-fmt {
  width: 10px;
  height: 10px;
  font: 700 7px/10px var(--sans);
  color: #444;
  text-align: center;
}
.ico-clear-fmt::before { content: "A"; }
.ico-clear-fmt::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 5px;
  height: 4px;
  background: #e91e8c;
  border-radius: 1px 0 1px 0;
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 20% 100%);
}
.ico-indent-dec,
.ico-indent-inc {
  width: 11px;
  height: 9px;
  background:
    linear-gradient(#555, #555) 4px 1px / 7px 1px no-repeat,
    linear-gradient(#555, #555) 4px 4px / 7px 1px no-repeat,
    linear-gradient(#555, #555) 4px 7px / 7px 1px no-repeat;
}
.ico-indent-dec::before,
.ico-indent-inc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  border: 3px solid transparent;
}
.ico-indent-dec::before {
  border-right-color: #555;
  border-left: 0;
}
.ico-indent-inc::before {
  border-left-color: #555;
  border-right: 0;
  left: 1px;
}
.ico-linespace {
  width: 10px;
  height: 10px;
  background:
    linear-gradient(#555, #555) 3px 1px / 7px 1px no-repeat,
    linear-gradient(#555, #555) 3px 4.5px / 7px 1px no-repeat,
    linear-gradient(#555, #555) 3px 8px / 7px 1px no-repeat;
}
.ico-linespace::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 3px solid #555;
}
.ico-linespace::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 3px solid #555;
}
.ico-columns {
  width: 10px;
  height: 9px;
  border: 1px solid #666;
  background: linear-gradient(#666, #666) 50% 0 / 1px 100% no-repeat;
}
.ico-align--justify {
  background:
    linear-gradient(#555, #555) 0 0 / 100% 1.2px no-repeat,
    linear-gradient(#555, #555) 0 3.4px / 100% 1.2px no-repeat,
    linear-gradient(#555, #555) 0 6.8px / 100% 1.2px no-repeat;
}
.ico-textdir {
  width: 10px;
  height: 10px;
  font: 700 7px/10px var(--sans);
  color: #444;
  text-align: center;
}
.ico-textdir::before { content: "A"; }
.ico-textdir::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  bottom: 1px;
  width: 0;
  border-left: 1px solid #555;
  background: linear-gradient(#555, #555);
  box-shadow: 0 -1px 0 #555, 0 1px 0 #555;
}
.ico-aligntext {
  width: 10px;
  height: 10px;
  border-left: 1px solid #555;
  background:
    linear-gradient(#555, #555) 3px 4.5px / 7px 1px no-repeat;
}
.ico-aligntext::before,
.ico-aligntext::after {
  content: "";
  position: absolute;
  left: 5px;
  width: 0;
  height: 0;
  border-left: 2.5px solid transparent;
  border-right: 2.5px solid transparent;
}
.ico-aligntext::before {
  top: 1px;
  border-bottom: 3px solid #555;
}
.ico-aligntext::after {
  bottom: 1px;
  border-top: 3px solid #555;
}
.ico-smartart {
  width: 11px;
  height: 10px;
  border-radius: 1px;
  background: #2e7d32;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.ico-smartart::before {
  content: "→";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 7px/1 var(--sans);
  color: #fff;
}
.ico-textbox {
  width: 14px;
  height: 12px;
  border: 1px dashed #888;
  border-radius: 1px;
  background: #fff;
  font: 700 8px/12px var(--sans);
  color: #333;
  text-align: center;
}
.ico-textbox::before { content: "A"; }
.ico-drawing {
  width: 14px;
  height: 12px;
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, #5b9bd5 0 45%, #2b579a 46% 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.ico-drawing::after {
  content: "";
  position: absolute;
  left: 4px;
  top: -1px;
  width: 6px;
  height: 4px;
  background: #c4a574;
  border-radius: 1px;
}
.ico-addins {
  width: 12px;
  height: 12px;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5px;
  background: transparent;
  box-shadow: none;
  margin: 0 auto 2px !important;
}
.ico-addins::before,
.ico-addins::after {
  content: none;
}
.ico-addins {
  /* four squares via background cells */
  background:
    linear-gradient(#c43e1c, #c43e1c) 0 0 / 5px 5px no-repeat,
    linear-gradient(#e07a3d, #e07a3d) 7px 0 / 5px 5px no-repeat,
    linear-gradient(#e07a3d, #e07a3d) 0 7px / 5px 5px no-repeat,
    linear-gradient(#c43e1c, #c43e1c) 7px 7px / 5px 5px no-repeat;
}
.ribbon-group--solo {
  padding-left: 3px;
  padding-right: 3px;
}
.ribbon-group--solo + .ribbon-group--solo {
  border-right-color: transparent;
}
.ribbon-group--solo:last-child {
  border-right: 0;
}

/* ── Full Word Home ribbon (match M365 screenshot) ── */
.host-ribbon--word-full,
.host-ribbon--ppt-full {
  padding-bottom: 2px;
  background: #f3f3f3;
  overflow: hidden;
}
.host-ribbon__tabs--word .is-on,
.host-ribbon__tabs--ppt .is-on {
  font-weight: 600;
}
.host-ribbon__tabs--word,
.host-ribbon__tabs--ppt {
  background: #f3f3f3;
}
.ribbon-groups--word,
.ribbon-groups--ppt {
  background: #faf9f8;
  border-radius: 0;
  padding-top: 1px;
}
.ribbon-groups--word .rg-style {
  width: 42px;
  height: 30px;
}
.ribbon-groups--word .rg-style strong {
  font-size: 6.5px;
}
.rg-btn--cluster {
  min-width: 30px;
  min-height: 32px;
  padding: 2px 4px;
  color: #252423;
  border-radius: 3px;
}
.rg-btn--cluster em {
  font-size: 5.5px;
  color: #252423;
  font-weight: 400;
}
.host-ribbon__tabs--word {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;
  margin: 0 -8px 3px;
  padding: 0 6px 0 14px;
  font: 500 6.5px var(--sans);
  border-bottom: 1px solid #e1e1e1;
}
.host-ribbon__tabs--word > span {
  padding: 3px 5px 3px;
  flex-shrink: 0;
}
.host-ribbon__tabs--word .is-on {
  color: #185abd;
  border-bottom-color: #185abd;
  font-weight: 600;
}
.ribbon-pill--share {
  background: #185abd;
  border-color: #185abd;
  color: #fff;
}
.ribbon-pill--share b {
  border-top-color: #fff;
}
.ribbon-pill b,
.rg-caret {
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 2.5px solid #605e5c;
  display: inline-block;
  margin-left: 1px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Grow / shrink font, highlight pen, character spacing */
.ico-grow-font,
.ico-shrink-font,
.ico-hilite-pen,
.ico-spacing {
  display: block;
  font-style: normal;
  position: relative;
}
.ico-grow-font,
.ico-shrink-font {
  width: 12px;
  height: 11px;
  font: 700 8px/11px var(--sans);
  color: #252423;
  text-align: left;
  padding-left: 0;
}
.ico-grow-font::before { content: "A"; }
.ico-shrink-font::before { content: "A"; font-size: 6.5px; }
.ico-grow-font::after,
.ico-shrink-font::after {
  content: "";
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-left: 2.5px solid transparent;
  border-right: 2.5px solid transparent;
}
.ico-grow-font::after {
  top: 1px;
  border-bottom: 3.5px solid #252423;
}
.ico-shrink-font::after {
  bottom: 1px;
  border-top: 3.5px solid #252423;
}
.ico-hilite-pen {
  width: 11px;
  height: 7px;
  background: linear-gradient(135deg, transparent 35%, #444 36% 55%, transparent 56%);
  margin-bottom: 0;
}
.ico-hilite-pen::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 7px;
  height: 3px;
  background: #fff100;
  border-radius: 0.5px;
  box-shadow: inset 0 0 0 0.5px #c8b900;
}
.ico-spacing {
  width: 12px;
  height: 10px;
  font: 700 6px/10px var(--sans);
  letter-spacing: 0.5px;
  color: #252423;
  text-align: center;
}
.ico-spacing::before { content: "AV"; }
.ico-spacing::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 0;
  height: 0;
  border-top: 1px solid #185abd;
  box-shadow: -3px 0 0 -1px transparent;
}
.ico-editing,
.ico-share,
.ico-texteffects,
.ico-multilist,
.ico-sort,
.ico-shading,
.ico-borders,
.ico-styles-pane,
.ico-dictate,
.ico-editor {
  display: block;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
}
.ico-editing {
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, transparent 42%, #444 43% 58%, transparent 59%);
}
.ico-editing::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
  height: 3px;
  background: #5b9bd5;
  border-radius: 0.5px;
}
.ico-share {
  width: 8px;
  height: 8px;
  border: 1.2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 1px 1px;
}
.ico-share::before {
  content: "";
  position: absolute;
  left: 1.5px;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 2.2px solid transparent;
  border-right: 2.2px solid transparent;
  border-bottom: 3.5px solid currentColor;
}
.ico-texteffects {
  width: 10px;
  height: 10px;
  font: 700 9px/10px Georgia, "Times New Roman", serif;
  color: #185abd;
  text-align: center;
}
.ico-texteffects::before {
  content: "A";
  display: block;
  color: transparent;
  -webkit-text-stroke: 0.7px #185abd;
}
.ico-multilist {
  width: 11px;
  height: 10px;
  background:
    linear-gradient(#555, #555) 0 1px / 3px 1px no-repeat,
    linear-gradient(#555, #555) 0 4.5px / 5px 1px no-repeat,
    linear-gradient(#555, #555) 0 8px / 3px 1px no-repeat,
    linear-gradient(#666, #666) 6px 1px / 5px 1px no-repeat,
    linear-gradient(#666, #666) 6px 4.5px / 5px 1px no-repeat,
    linear-gradient(#666, #666) 6px 8px / 5px 1px no-repeat;
}
.ico-sort {
  width: 11px;
  height: 10px;
  font: 700 5px/5px var(--sans);
  color: #444;
}
.ico-sort::before { content: "A"; position: absolute; left: 0; top: 0; }
.ico-sort::after { content: "Z"; position: absolute; left: 0; bottom: 0; }
.ico-shading {
  width: 11px;
  height: 10px;
  background:
    linear-gradient(#5b9bd5, #5b9bd5) 0 5px / 11px 5px no-repeat,
    linear-gradient(135deg, transparent 40%, #888 41% 60%, transparent 61%);
  border-radius: 0 0 1px 1px;
}
.ico-borders {
  width: 10px;
  height: 10px;
  border: 1px solid #666;
  background:
    linear-gradient(#666, #666) 50% 0 / 1px 100% no-repeat,
    linear-gradient(#666, #666) 0 50% / 100% 1px no-repeat;
}
.ico-styles-pane {
  width: 12px;
  height: 12px;
  border: 1px solid #888;
  border-radius: 1px;
  background: #fff;
}
.ico-styles-pane::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 6px;
  height: 7px;
  border-radius: 1px 1px 2px 2px;
  background: linear-gradient(180deg, #f0c14a 0 40%, #185abd 41% 100%);
}
.ico-dictate {
  width: 10px;
  height: 12px;
  border: 1.5px solid #555;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: transparent;
}
.ico-dictate::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -3px;
  height: 2px;
  border: 1px solid #555;
  border-top: 0;
  border-radius: 0 0 2px 2px;
}
.ico-editor {
  width: 12px;
  height: 10px;
  background:
    linear-gradient(#185abd, #185abd) 0 7px / 12px 2px no-repeat,
    linear-gradient(135deg, transparent 40%, #555 41% 59%, transparent 60%);
}

.ribbon-groups--word {
  overflow: visible;
  min-height: 46px;
  align-items: stretch;
  flex-shrink: 0;
  width: max-content;
  transform: scale(0.75);
  transform-origin: left top;
  margin-bottom: -12px;
}
.ribbon-groups--word .ribbon-group {
  flex-shrink: 0;
  padding: 2px 4px 1px;
}
.ribbon-groups--word .ribbon-group__label {
  font-size: 5.5px;
}
.ribbon-group--font-word .rg-select--font {
  width: 52px;
}
.ribbon-group--font-word .rg-select--size {
  width: 22px;
}
.ribbon-group__controls--styles {
  display: flex;
  align-items: center;
  gap: 3px;
}
.rg-style-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 28px;
  font: 600 10px/1 var(--sans);
  color: #666;
  border: 1px solid #dddde2;
  border-radius: 2px;
  background: #fff;
}
.rg-btn--styles-pane {
  min-width: 26px;
  min-height: 28px;
}
.ribbon-groups--word .rg-style {
  width: 40px;
  height: 28px;
}
.ribbon-groups--word .rg-style strong {
  font-size: 6.5px;
}
.ribbon-groups--word .rg-style--h1 strong {
  font-size: 7px;
  font-weight: 700;
  color: #185abd;
}

.host-ribbon__tools {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 9px var(--sans);
  color: #444;
}
.host-ribbon__tools b,
.host-ribbon__tools i {
  font-style: normal;
  font-weight: 500;
  padding: 2px 6px;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  background: #fff;
}
.host-ribbon__tools .rb { font-weight: 700; }
.host-ribbon__tools .ri { font-style: italic; }
.host-ribbon__tools .ru { text-decoration: underline; }
.host-ribbon__tools .rsep {
  width: 1px; height: 14px; background: #d8d8d8; margin: 0 2px;
}
.host-ribbon__tools .rbtn {
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 3px; color: #555;
}

.host-workspace {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #e8e8e8;
}

/* —— Word —— */
.host-workspace--word {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  background: #c8c8c8;
  /* Wider side gutters so the page reads like a real Word canvas */
  padding: 10px 0 0;
  gap: 0;
  overflow: hidden;
}
.word-page {
  flex: 1;
  /* Narrow page like real Word — ~half the editor with wide side margins */
  width: 56%;
  max-width: 100%;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,0.22);
  padding: 16px 28px 14px;
  overflow: hidden;
  font: 400 8.5px/1.55 "Calibri", var(--sans);
  color: #1a1a1a;
  position: relative;
}
.word-h {
  margin: 0 0 10px;
  font: 700 12px/1.2 "Calibri", var(--sans);
  color: #1a1a1a;
}
.word-h--sub {
  font-size: 8.5px;
  margin-top: 12px;
}
.word-p { margin: 0 0 7px; }
.word-p--meta {
  font: 400 8px/1 var(--sans);
  color: #888;
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}
.word-p--note {
  padding: 4px 6px;
  background: #fff4ce;
  border-left: 3px solid #edc55b;
}
.word-typed-block {
  font: 400 8.5px/1.55 "Calibri", var(--sans);
  color: #1a1a1a;
  min-height: 4.5em;
  text-indent: 0;
  padding-left: 0;
  margin-left: 0;
}
.word-typed-block [data-word-typed] {
  white-space: pre-wrap;
  text-indent: 0;
}
.word-typed-block .app-caret,
.word-typed-block .word-cursor {
  vertical-align: text-bottom;
}
@keyframes word-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.word-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 14px;
  background: #1c5bb3;
  padding: 0 8px;
  flex-shrink: 0;
}
.word-statusbar__left {
  font: 400 7px/1 var(--sans);
  color: #fff;
  opacity: 0.9;
}
.word-statusbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font: 400 7px/1 var(--sans);
  opacity: 0.9;
}
.word-statusbar__right svg {
  opacity: 0.85;
  flex-shrink: 0;
}

.app-caret {
  display: inline-block;
  width: 1.5px;
  height: 0.95em;
  margin-left: 1px;
  background: #1a1a1a;
  vertical-align: text-bottom;
  animation: app-caret-blink 0.85s step-end infinite;
}
@keyframes app-caret-blink { 50% { opacity: 0; } }

/* —— Excel —— */
/* Excel ribbon — screenshot image, same pattern as Word/PPT */
.host-ribbon--excel-shot {
  padding: 0;
  margin: 0;
  background: #f3f3f3;
  border-bottom: 1px solid #d4d4d4;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
}
.host-ribbon--excel-shot .host-ribbon__shot {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* Tab bar image only — scale down to match the ribbon's visual weight */
.host-ribbon--excel-shot .host-ribbon__shot--tabs {
  height: 18px;
  width: auto;
}
.host-ribbon__tabs--xl {
  display: flex;
  gap: 0;
  padding: 1px 6px 0;
  background: #fff;
  border-bottom: 1px solid #d0d0d0;
}
.host-ribbon__tabs--xl span {
  font: 400 9px/1 "Calibri", "Segoe UI", var(--sans);
  color: #222;
  padding: 4px 9px 3px;
  border-radius: 3px 3px 0 0;
  cursor: default;
}
.host-ribbon__tabs--xl span.is-on {
  background: #1f7145;
  color: #fff;
  font-weight: 600;
  border-radius: 0;
}
.xl-ribbon {
  display: flex;
  align-items: stretch;
  padding: 2px 4px 0;
  background: #f3f3f3;
  border-bottom: 1px solid #d4d4d4;
  overflow: hidden;
  flex-shrink: 0;
  gap: 0;
}

/* Group wrapper */
.xl-grp {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1px 5px 0;
  flex-shrink: 0;
  min-width: 0;
}
.xl-grp--editing { padding: 1px 3px 0; }
.xl-grp__body { display: flex; align-items: center; gap: 2px; flex: 1; }
.xl-grp__body--rows { flex-direction: column; gap: 0; align-items: flex-start; justify-content: center; }
.xl-grp__body--col  { flex-direction: column; align-items: flex-start; gap: 1px; justify-content: center; }
.xl-grp__label {
  font: 400 7px/1.4 "Calibri","Segoe UI",var(--sans);
  color: #555;
  text-align: center;
  width: 100%;
  padding-bottom: 2px;
  flex-shrink: 0;
}

/* Vertical group separator */
.xl-sep {
  width: 1px;
  background: #d0d0d0;
  align-self: stretch;
  margin: 2px 4px;
  flex-shrink: 0;
}
/* Inner separator (within a row) */
.xl-sep--v {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: #c6c6c6;
  margin: 0 3px;
  align-self: center;
  flex-shrink: 0;
}

/* ── Clipboard ── */
.xl-grp__body--clip {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.xl-paste-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 4px 0;
  cursor: default;
}
.xl-paste-ico {
  width: 22px;
  height: 26px;
}
.xl-paste-label {
  font: 400 7px/1 "Calibri","Segoe UI",var(--sans);
  color: #222;
}
.xl-clip-stack {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 2px 0;
}
.xl-clip-btn {
  display: flex;
  align-items: center;
  height: 15px;
  cursor: default;
}
.xl-clip-ico {
  font-size: 11px !important;
  color: #444;
  line-height: 1;
}

/* ── Rows layout for font/align/number ── */
.xl-row {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 17px;
}
.xl-row--center { justify-content: center; width: 100%; }

/* Small icon button */
.xl-smtool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 15px;
  border-radius: 2px;
  cursor: default;
  color: #333;
  font: 400 9px/1 "Calibri","Segoe UI",var(--sans);
  padding: 0 1px;
  flex-shrink: 0;
}

/* Format buttons: B I U border fill color */
.xl-fmt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 13px;
  height: 15px;
  padding: 0 2px;
  border-radius: 2px;
  cursor: default;
  color: #222;
  flex-shrink: 0;
}
.xl-fmt--b { font: 700 11px/1 "Calibri","Segoe UI",var(--sans); }
.xl-fmt--i { font: 400 11px/1 "Times New Roman","Georgia",serif; font-style: italic; }
.xl-fmt--u { font: 600 10px/1 "Calibri","Segoe UI",var(--sans); text-decoration: underline; text-underline-offset: 1px; }
.xl-fmt--fill .mso { color: #777; }
.xl-fmt--fcolor .mso { color: #777; }

/* Colour swatch bars under fill/font-color icons */
.xl-swatch {
  display: block;
  width: 10px;
  height: 3px;
  border-radius: 1px;
  margin-top: 1px;
  margin-left: -11px;
  position: relative;
  top: 6px;
  pointer-events: none;
}
.xl-swatch--fill  { background: #f0c000; }
.xl-swatch--fcolor{ background: #c00; }

/* Dropdowns */
.xl-dd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid #bebebe;
  border-radius: 2px;
  background: #fff;
  padding: 1px 4px;
  font: 400 8.5px/1 "Calibri","Segoe UI",var(--sans);
  color: #222;
  cursor: default;
  height: 14px;
  flex-shrink: 0;
}
.xl-dd--font  { min-width: 78px; font-size: 8.5px; }
.xl-dd--size  { min-width: 22px; }
.xl-dd--num   { min-width: 64px; }
.xl-dd--merge { min-width: 60px; font-size: 8px; }

/* Caret ▾ */
.xl-caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 2.5px solid transparent;
  border-right: 2.5px solid transparent;
  border-top: 3px solid #555;
  margin-left: 1px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Number section tools */
.xl-numtool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 12px;
  height: 15px;
  padding: 0 2px;
  border-radius: 2px;
  font: 600 9px/1 "Calibri","Segoe UI",var(--sans);
  color: #222;
  cursor: default;
  flex-shrink: 0;
}

/* Styles / Cells command rows */
.xl-cmd {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 14px;
  font: 400 8px/1 "Calibri","Segoe UI",var(--sans);
  color: #222;
  white-space: nowrap;
  padding: 0 2px;
  border-radius: 2px;
  cursor: default;
}
.xl-cmd .xl-caret { margin-left: 2px; }

/* Tiny coloured icon boxes for Styles / Cells commands */
.xl-cmd-ico {
  display: inline-block;
  width: 12px;
  height: 10px;
  border-radius: 1px;
  flex-shrink: 0;
}
.xl-cmd-ico--cf  { background: linear-gradient(135deg,#f7c948 40%,#e05c2a 40%); border: 1px solid #bba; }
.xl-cmd-ico--ft  { background: repeating-linear-gradient(90deg,#5b9bd5 0 3px,#fff 3px 4px); border: 1px solid #aaa; }
.xl-cmd-ico--cs  { background: linear-gradient(180deg,#5b9bd5 50%,#fff 50%); border: 1px solid #aaa; }
.xl-cmd-ico--ins { background: #fff; border: 1px solid #999; position: relative; }
.xl-cmd-ico--ins::after { content:""; position:absolute; top:2px;left:5px;width:1.5px;height:5px;background:#1f7145; box-shadow: -2px 0 0 #1f7145; }
.xl-cmd-ico--del { background: #fff; border: 1px solid #999; position: relative; }
.xl-cmd-ico--del::after { content:""; position:absolute; top:4.5px;left:2px;width:7px;height:1.5px;background:#c00; }
.xl-cmd-ico--fmt { background: #fff; border: 1px solid #999; position: relative; }
.xl-cmd-ico--fmt::after { content:""; position:absolute; top:2px;left:2px;width:7px;height:5px;background:repeating-linear-gradient(180deg,#bbb 0 1px,transparent 1px 3px); }

/* Editing / Add-ins large icons */
.xl-edit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  color: #444;
  cursor: default;
}
.host-workspace--excel {
  background: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.excel-fxrow {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.excel-namebox {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 5px;
  border: 1px solid #c6c6c6;
  border-radius: 2px;
  background: #fff;
  font: 500 7px var(--mono);
  color: #333;
  text-align: center;
}
.excel-fx__label {
  font: 600 8px var(--sans);
  color: #217346;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.excel-fx__input {
  flex: 1;
  min-width: 0;
  border: 1px solid #c6c6c6;
  border-radius: 2px;
  padding: 2px 5px;
  /* Match ribbon/grid scale — was reading oversized vs surrounding chrome */
  font: 400 7px/1.2 var(--mono);
  background: #fff;
  color: #1a1a1a;
}
.excel-sheet {
  display: grid;
  grid-template-columns: 16px minmax(0, 1.4fr) repeat(6, minmax(0, 0.62fr));
  flex: 1;
  min-height: 0;
  font: 500 7px/1.15 var(--sans);
  border-top: 1px solid #d0d0d0;
  overflow: hidden;
  align-content: start;
  grid-auto-rows: 13px;
  background-color: #fff;
  /* Horizontal gridlines continue under any leftover space past the last HTML row */
  background-image: repeating-linear-gradient(
    to bottom,
    #fff 0,
    #fff 12px,
    #e8e8e8 12px,
    #e8e8e8 13px
  );
}
.ex-corner, .ex-col, .ex-row {
  background: #f3f3f3;
  border-right: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  min-height: 13px;
  font: 600 6px/1 var(--sans);
}
.ex-cell {
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 1px 3px;
  display: flex;
  align-items: center;
  background: #fff;
  min-height: 13px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #222;
}
.ex-head {
  font-weight: 700;
  background: #eaf3ec;
  color: #1f5c38;
  font-size: 6.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ex-section {
  font-weight: 700;
  background: #f7f7f7;
  color: #555;
  font-size: 6.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ex-num {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 7px;
}
.ex-up { color: #0f7b3a; font-weight: 600; }
.ex-hot { color: #c43e1c; font-weight: 700; }
.ex-muted { color: #9a9a9a; }
.ex-strong { font-weight: 700; background: #fafafa; }
.ex-tag {
  font: 600 6px/1 var(--sans);
  color: #5f6368;
  letter-spacing: 0.02em;
}
.ex-tag--warn { color: #b06000; }
.ex-active {
  outline: 1.5px solid #217346;
  outline-offset: -1.5px;
  z-index: 1;
}
.ex-flag {
  color: #0f7b3a;
  font-weight: 700;
  font-size: 7px;
  letter-spacing: 0.04em;
}
.ex-cell.is-flash {
  animation: excel-flash 0.55s ease;
}
@keyframes excel-flash {
  0% { background: #c6efce; }
  100% { background: #fff; }
}
/* Excel sheet tab bar + status bar (Excel-for-Mac style) */
.excel-sheetbar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #f3f3f3;
  border-top: 1px solid #d0d0d0;
}
.excel-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 2px 0 4px;
  background: #e6e6e6;
  min-height: 18px;
  border-bottom: 1px solid #d0d0d0;
}
.excel-tabs__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 0;
  flex-shrink: 0;
}
.excel-tabs__arrow {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 0.55;
}
.excel-tabs__arrow--prev {
  border-width: 3px 4px 3px 0;
  border-color: transparent #444 transparent transparent;
}
.excel-tabs__arrow--next {
  border-width: 3px 0 3px 4px;
  border-color: transparent transparent transparent #444;
}
.excel-tabs__list {
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.excel-tabs__list span {
  position: relative;
  flex: 0 0 auto;
  font: 500 7px/1 var(--sans);
  color: #555;
  padding: 4px 9px 5px;
  background: transparent;
  border: 0;
  border-right: 1px solid #cfcfcf;
  white-space: nowrap;
}
.excel-tabs__list span:last-child {
  border-right: 0;
}
.excel-tabs__list .is-on {
  background: #fff;
  color: #217346;
  font-weight: 700;
  border-right-color: transparent;
  box-shadow: 0 -1px 0 #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  z-index: 1;
}
.excel-tabs__add {
  flex: 0 0 auto;
  align-self: center;
  width: 16px;
  height: 14px;
  margin: 0 4px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #555;
  font: 500 11px/1 var(--sans);
  cursor: default;
}
.excel-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 16px;
  padding: 2px 6px 2px 8px;
  background: #f3f3f3;
  color: #6a6a6a;
  font: 400 6.5px/1 var(--sans);
}
.excel-statusbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.excel-statusbar__a11y {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.excel-statusbar__a11y::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #888;
  background:
    radial-gradient(circle at 50% 32%, #888 1px, transparent 1.2px),
    linear-gradient(#888, #888) 50% 55% / 1px 3px no-repeat;
  flex-shrink: 0;
  opacity: 0.75;
}
.excel-statusbar__right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.excel-zoom {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  font-style: normal;
}
.excel-zoom__btn {
  font: 500 8px/1 var(--sans);
  color: #666;
  font-style: normal;
}
.excel-zoom__track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 2px;
  background: #c5c5c5;
  border-radius: 1px;
  font-style: normal;
}
.excel-zoom__thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #999;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.15);
  font-style: normal;
}
.excel-zoom__pct {
  min-width: 22px;
  text-align: right;
  color: #555;
}

/* —— Chrome (realistic browser chrome + real site pages) —— */
.host-chrome.is-open {
  background: #dee1e6;
}
.chrome-shell {
  flex-shrink: 0;
  background: #dee1e6;
  /* Clip tab curve shadows so they never bleed outside the host */
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.chrome-tabstrip {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 6px 8px 0 8px;
  min-height: 34px;
  overflow: hidden;
}
.chrome-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 150px;
  height: 28px;
  padding: 0 8px 0 10px;
  margin-right: 1px;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: #3c4043;
  font: 500 9px/1 var(--sans);
  z-index: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}
.chrome-tab:not(.is-on) {
  background: rgba(255, 255, 255, 0.28);
}
.chrome-tab.is-on {
  background: #fff;
  z-index: 2;
  box-shadow: 0 -1px 0 #fff;
}
.chrome-tab__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chrome-tab__close {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 500 11px/1 var(--sans);
  color: #5f6368;
  opacity: 0.55;
}
.chrome-tab.is-on .chrome-tab__close {
  opacity: 0.9;
}
.chrome-tab-new {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0 0 3px 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  font: 500 14px/1 var(--sans);
  cursor: default;
}
.chrome-fav {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font: 700 7px/1 var(--sans);
  color: #fff;
}
.chrome-fav--gartner { background: #1eb3f1; color: #fff; }
.chrome-fav--msft { background: #00a4ef; }
.chrome-fav--saastr { background: #111; }
.chrome-fav--bb { background: #000; }
.chrome-fav--re { background: #ff8000; color: #111; }
.chrome-fav--sec { background: #005ea2; }
.chrome-fav--notion { background: #000; color: #fff; }
.chrome-fav--in { background: #1a73e8; }

.chrome-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 5px;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
}
.chrome-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.chrome-nav__btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #3c4043;
}
.chrome-nav__btn.is-disabled { color: #bdc1c6; }
.chrome-omnibox {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 980px;
  background: #f1f3f4;
}
.chrome-omnibox__lock {
  flex-shrink: 0;
  color: #5f6368;
  display: grid;
  place-items: center;
}
.chrome-omnibox__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 10px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
  letter-spacing: -0.01em;
}
.chrome-omnibox__star {
  flex-shrink: 0;
  font-size: 11px;
  color: #5f6368;
  line-height: 1;
}
.chrome-toolbar__end {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.chrome-ext {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, #e8eaed, #dadce0);
}
.chrome-ext--spacer {
  background: transparent;
  visibility: hidden;
}
.chrome-profile {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  display: grid;
  place-items: center;
  font: 600 7px/1 var(--sans);
}

.host-workspace--chrome {
  position: relative;
  display: block;
  background: #fff;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.chrome-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: #fff;
  font: 500 11px var(--sans);
  color: #5f6368;
}
.chrome-loading[hidden] { display: none !important; }

.site-page {
  display: none;
  height: 100%;
  overflow: hidden;
  background: #fff;
}
.site-page.is-active {
  display: flex;
  flex-direction: column;
}
.site-page[hidden] { display: none !important; }

.site-kicker {
  margin: 0 0 4px;
  font: 600 8px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.site-meta {
  margin: 0 0 8px;
  font: 400 8px/1.3 var(--sans);
  color: #80868b;
}
.site-callout {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 4px;
  font: 500 9px/1.35 var(--sans);
}
.site-callout--bb {
  background: #fff3bf;
  border-left: 3px solid #ffd60a;
  color: #1a1a1a;
}
.site-callout--grow {
  background: #e6f4ea;
  border-left: 3px solid #1e8e3e;
  color: #137333;
}

/* Real webpage screenshots inside Chrome */
.site-shot {
  background: #fff;
}
.site-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Keep SaaStr left rail (logo / share icons) visible under cover crop */
.site-shot--saastr img {
  object-position: top left;
}

/* Gartner: desktop stays centered; mobile overrides below so the left edge isn’t clipped */

/* Notion top chrome rebuilt in HTML so right-side controls can scale independently */
.site-shot--notion {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.site-shot--notion.is-active {
  display: flex;
}
.site-shot--notion img {
  flex: 1;
  min-height: 0;
  height: auto;
}
.notion-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  height: 22px;
  padding: 0 8px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.notion-topbar__left {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.notion-topbar__right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  /* Independent scale for Edited / Share / icons */
  transform: scale(0.85);
  transform-origin: right center;
}
.notion-tb-mark {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #37352f;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 7px/1 ui-sans-serif, system-ui, sans-serif;
  flex-shrink: 0;
}
.notion-tb-crumb {
  font: 400 8px/1.2 ui-sans-serif, system-ui, sans-serif;
  color: #787774;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.notion-tb-crumb i {
  font-style: normal;
  color: #c4c4c0;
  margin: 0 3px;
}
.notion-tb-edited {
  font: 400 7.5px/1 ui-sans-serif, system-ui, sans-serif;
  color: #9b9a97;
  white-space: nowrap;
}
.notion-tb-share {
  font: 500 8px/1 ui-sans-serif, system-ui, sans-serif;
  color: #37352f;
  white-space: nowrap;
  padding: 0 2px;
}
.notion-tb-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #787774;
  flex-shrink: 0;
  font-size: 12px !important;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
  line-height: 1;
}

/* Positive growth placeholders (tabs 2–3 until screenshots arrive) */
.site-growth__bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  background: #0b1f33;
  color: #e8f1f8;
  flex-shrink: 0;
}
.site-growth__bar--soft {
  background: #111;
}
.site-growth__logo {
  font: 800 11px/1 var(--sans);
  letter-spacing: -0.02em;
}
.site-growth__bar span:last-child {
  font: 500 8px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.site-growth__body {
  padding: 10px 12px;
  overflow: hidden;
}
.site-growth__body h3 {
  margin: 0 0 4px;
  font: 700 13px/1.25 var(--sans);
  color: #111;
}
.site-growth__body p {
  margin: 0 0 6px;
  font: 400 10px/1.45 var(--sans);
  color: #333;
}

/* Bloomberg */
.site-bb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: #000;
  color: #fff;
  flex-shrink: 0;
}
.site-bb__logo {
  font: 800 11px/1 "Arial Black", Arial, sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(#111, #111) padding-box;
  border-bottom: 3px solid #ffd60a;
  padding-bottom: 1px;
}
.site-bb__bar nav {
  display: flex;
  gap: 10px;
  font: 500 8px/1 var(--sans);
  color: #bbb;
}
.site-bb__body {
  padding: 10px 12px 12px;
  overflow: hidden;
}
.site-bb__body h3 {
  margin: 0 0 4px;
  font: 700 14px/1.2 Georgia, "Times New Roman", serif;
  color: #111;
}
.site-bb__body p {
  margin: 0 0 6px;
  font: 400 10px/1.45 var(--sans);
  color: #222;
}

/* Reuters */
.site-re__bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px 6px;
  border-bottom: 2px solid #ff8000;
  flex-shrink: 0;
}
.site-re__logo {
  font: 800 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ff8000;
  letter-spacing: -0.03em;
}
.site-re__section {
  font: 600 8px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
}
.site-re__body {
  padding: 10px 12px;
  overflow: hidden;
}
.site-re__body h3 {
  margin: 0 0 4px;
  font: 700 13px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1a1a1a;
}
.site-re__body p {
  margin: 0 0 6px;
  font: 400 10px/1.45 var(--sans);
  color: #333;
}
.site-re__wire {
  padding-top: 4px;
  border-top: 1px solid #e5e5e5;
  color: #555 !important;
  font-style: italic !important;
}

/* SEC EDGAR */
.site-sec__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f0f0f0;
  border-bottom: 3px solid #005ea2;
  flex-shrink: 0;
}
.site-sec__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 22px;
  background: #005ea2;
  color: #fff;
  font: 800 8px/1 var(--sans);
  letter-spacing: 0.04em;
}
.site-sec__bar strong {
  display: block;
  font: 700 10px/1.1 var(--sans);
  color: #1b1b1b;
}
.site-sec__bar em {
  display: block;
  font: 400 8px/1.1 var(--sans);
  color: #555;
  font-style: normal;
}
.site-sec__body {
  padding: 10px 12px;
  background: #fafafa;
  overflow: hidden;
}
.site-sec__form {
  margin: 0 0 6px;
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.04em;
  color: #005ea2;
}
.site-sec__body h3 {
  margin: 0 0 8px;
  font: 600 11px/1.25 var(--sans);
  color: #111;
}
.site-sec__mono {
  margin: 0;
  font: 400 9px/1.5 var(--mono);
  color: #222;
  background: #fff;
  border: 1px solid #ddd;
  padding: 8px;
}

/* Acme Wiki */
.site-wiki__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #f4f5f7;
  border-bottom: 1px solid #dfe1e6;
  flex-shrink: 0;
}
.site-wiki__logo {
  font: 800 10px/1 var(--sans);
  color: #0052cc;
}
.site-wiki__path {
  font: 500 9px/1 var(--sans);
  color: #6b778c;
}
.site-wiki__body {
  padding: 10px 12px;
  overflow: hidden;
}
.site-wiki__body h3 {
  margin: 0 0 4px;
  font: 700 13px/1.25 var(--sans);
  color: #172b4d;
}
.site-wiki__body ul {
  margin: 0;
  padding: 0 0 0 16px;
  font: 400 10px/1.55 var(--sans);
  color: #172b4d;
}

.chrome-agent-chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(15, 23, 32, 0.88);
  color: #e8f5e9;
  font: 600 8px/1.2 var(--mono);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

/* —— Gmail (New Message compose) —— */
.host-gmail {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.gmail-compose {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

/* ── Top chrome: header + To + Subject ── */
.gc-header {
  display: flex;
  align-items: center;
  padding: 9px 8px 9px 14px;
  background: #edf2fc;
  flex-shrink: 0;
}
.gc-header__title {
  font: 500 11px/1 "Google Sans", Arial, sans-serif;
  color: #1a1a2e;
}
.gc-header__badge { display: none; }
.gc-header__controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.gc-ico {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.gc-ico--min::before {
  content: "";
  width: 7px;
  height: 1.2px;
  background: #5f6368;
  border-radius: 1px;
}
.gc-ico--expand {
  font-size: 11px !important;
  color: #5f6368;
  font-style: normal;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
}
.gc-ico--expand::before,
.gc-ico--expand::after {
  content: none;
}
.gc-ico--close::before,
.gc-ico--close::after {
  content: "";
  position: absolute;
  width: 1.2px;
  height: 8px;
  background: #5f6368;
  border-radius: 1px;
  left: 50%;
  top: 50%;
}
.gc-ico--close::before { transform: translate(-50%, -50%) rotate(45deg); }
.gc-ico--close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.gc-row {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid #eceff1;
  flex-shrink: 0;
  gap: 8px;
}
.gc-row__label {
  font: 400 11px/1 "Google Sans", Arial, sans-serif;
  color: #5f6368;
  flex-shrink: 0;
}
.gc-row__ph {
  color: #80868b;
}
.gc-row__side {
  margin-left: auto;
  font: 400 10px/1 "Google Sans", Arial, sans-serif;
  color: #5f6368;
  flex-shrink: 0;
}
.gc-row--to {
  min-height: 0;
}
.gc-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
/* Gmail-style recipient pill */
.gc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 6px 2px 2px;
  border-radius: 980px;
  background: #f3e8d8;
  border: 1px solid #8b6914;
  color: #5c4012;
  font: 400 9px/1.2 "Google Sans", Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
}
.gc-chip__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e07040;
  color: #fff;
  font: 500 9px/1 Georgia, "Times New Roman", serif;
  text-transform: lowercase;
  flex-shrink: 0;
}
.gc-chip__addr {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.gc-chip__x {
  flex-shrink: 0;
  font: 400 11px/1 Arial, sans-serif;
  color: #5c4012;
  opacity: 0.85;
  padding: 0 1px;
  cursor: default;
}
.gc-row--subj {
  position: relative;
}
.gc-row--subj .gc-row__ph {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.gc-subj {
  font: 400 11px/1.3 "Google Sans", Arial, sans-serif;
  color: #1f1f1f;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gmail-attach-live {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 12px 0;
  flex-shrink: 0;
  min-height: 0;
}
.gmail-attach-live:not(:has(.gmail-file:not([hidden]))) {
  padding: 0;
  min-height: 0;
}
.gmail-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 10px/1 "Google Sans", Arial, sans-serif;
  padding: 5px 8px 5px 6px;
  border-radius: 8px;
  background: #f1f3f4;
  border: 1px solid #dadce0;
  color: #3c4043;
  animation: attach-in 0.35s ease;
}
.gmail-file__ico {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
}
.gmail-file__ico--doc   { background: #185abd; }
.gmail-file__ico--xls   { background: #107c41; }
.gmail-file__ico--board { background: #5f6368; }
.gmail-file__ico::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 3px;
  height: 1.5px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 3px 0 rgba(255,255,255,0.85), 0 6px 0 rgba(255,255,255,0.85);
}
@keyframes attach-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* Typing restored — real pixel size, not % of parent font */
.gmail-body-live {
  flex: 1;
  min-height: 0;
  padding: 10px 14px 8px;
  overflow: hidden;
  font: 400 11px/1.55 "Google Sans", Arial, sans-serif;
  color: #1f1f1f;
  white-space: pre-wrap;
  text-indent: 0;
  background: #fff;
}

/* ── Material Symbols base ── */
.mso {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
}

/* ── Format bar (pill) ── */
.gmail-fmt {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 8px 4px;
  padding: 2px 6px;
  background: #e8f0fe;
  border-radius: 980px;
  flex-shrink: 0;
  width: fit-content;
  max-width: calc(100% - 16px);
  overflow: hidden;
  transform: scale(0.78);
  transform-origin: left center;
}
.gf-font {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  font: 400 11px/1 "Google Sans", Arial, sans-serif;
  color: #1f1f1f;
  white-space: nowrap;
}
.gf-caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3.5px solid #444746;
  margin-left: 2px;
}
.gf-sep {
  width: 1px;
  height: 16px;
  background: #c4c7c5;
  margin: 0 3px;
  flex-shrink: 0;
}
.gf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 2px;
  font: 600 11px/1 "Google Sans", Arial, sans-serif;
  color: #444746;
  border-radius: 4px;
  flex-shrink: 0;
}
.gf-btn--tt {
  font-size: 11px;
  gap: 0;
}
.gf-btn--b { font-weight: 700; color: #1f1f1f; }
.gf-btn--i em { font-style: italic; font-weight: 400; font-family: Georgia, serif; font-size: 12px; }
.gf-btn--u { text-decoration: underline; text-underline-offset: 2px; }
.gf-btn--color {
  position: relative;
  color: #1f1f1f;
}
.gf-btn--color::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 2px;
  height: 2.5px;
  background: #1f1f1f;
  border-radius: 1px;
}
.gf-btn--ico {
  min-width: 24px;
  padding: 0;
}
.gf-btn--ico .mso {
  font-size: 16px;
  color: #444746;
}

/* ── Send bar ── */
.gmail-send {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px 8px 6px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.gmail-send__left {
  display: flex;
  align-items: center;
  gap: 0;
  transform: scale(0.78);
  transform-origin: left center;
  flex-shrink: 0;
}
.gs-btn-group {
  display: inline-flex;
  align-items: stretch;
  margin-right: 6px;
  border-radius: 980px;
  overflow: hidden;
  background: #0b57d0;
  height: 32px;
}
.gs-send {
  display: flex;
  align-items: center;
  color: #fff;
  font: 500 13px/1 "Google Sans", Arial, sans-serif;
  padding: 0 14px 0 16px;
}
.gs-caret {
  position: relative;
  width: 26px;
  border-left: 1px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-caret::before {
  content: "";
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid #fff;
}
.gs-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #444746;
  flex-shrink: 0;
}
.gs-tool--aa {
  width: auto;
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  border-radius: 8px;
  background: #d3e3fd;
}
.gs-tool b {
  font: 600 12px/1 "Google Sans", Arial, sans-serif;
  color: #444746;
}
.gs-tool .mso {
  font-size: 18px;
}
.gs-trash {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #444746;
  opacity: 0.75;
  flex-shrink: 0;
  transform: scale(0.78);
  transform-origin: center;
}
.gs-trash .mso {
  font-size: 18px;
}


/* badge hidden in header */

/* —— PowerPoint —— */
.host-workspace--ppt {
  display: grid;
  grid-template-columns: 92px 1fr;
  background: #f3f3f3;
  min-height: 0;
}
.ppt-thumbs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 5px 6px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f3f3f3;
  border-right: 1px solid #d8d8d8;
}
.ppt-thumbs__tabs {
  display: flex;
  gap: 0;
  margin: 0 0 4px;
  font: 600 7px/1 var(--sans);
  color: #777;
  border-bottom: 1px solid #ddd;
}
.ppt-thumbs__tabs span {
  padding: 4px 6px 3px;
  border-bottom: 2px solid transparent;
}
.ppt-thumbs__tabs .is-on {
  color: #c43e1c;
  border-bottom-color: #c43e1c;
}
.ppt-thumb {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 3px;
  align-items: start;
  cursor: default;
  text-align: left;
}
.ppt-thumb__num {
  font: 600 8px/1.2 var(--sans);
  color: #666;
  padding-top: 2px;
}
.ppt-mini {
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 1px;
  aspect-ratio: 16/9;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  position: relative;
}
.ppt-mini--shot {
  padding: 0;
  display: block;
  background: #111;
}
.ppt-mini--shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
}
.ppt-slide--shot {
  padding: 0 !important;
  background: #111;
  overflow: hidden;
}
.ppt-slide--shot .ppt-slide__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}
.ppt-thumb.is-on .ppt-mini {
  border-color: #c43e1c;
  box-shadow: 0 0 0 1px #c43e1c;
}
.ppt-thumb.is-on .ppt-thumb__num { color: #c43e1c; }
.ppt-thumb:not(.is-done):not(.is-on) .ppt-mini { opacity: 0.55; }

.ppt-mini--title {
  background: linear-gradient(160deg, #1b2433 0%, #0e1520 100%);
  color: #fff;
  padding: 4px 5px 4px 7px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.ppt-mini__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #c43e1c;
  font-style: normal;
}
.ppt-mini--title strong { font: 700 6px/1.1 var(--sans); }
.ppt-mini--title em {
  font: 400 4.5px/1.1 var(--sans);
  font-style: normal;
  opacity: 0.65;
}
.ppt-mini--market,
.ppt-mini--budget,
.ppt-mini--growth,
.ppt-mini--ask {
  padding: 5px 4px 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ppt-mini u {
  display: block;
  height: 2px;
  width: 55%;
  background: #1a1a1a;
  border-radius: 1px;
  text-decoration: none;
  margin-bottom: 1px;
}
.ppt-mini--market {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 2px;
  align-content: stretch;
}
.ppt-mini--market u { grid-column: 1 / -1; width: 50%; }
.ppt-mini--market b {
  height: 100%;
  min-height: 10px;
  border-radius: 1px;
  background: #eef3f9;
  border: 1px solid #dde5ef;
  font-weight: 400;
}
.ppt-mini--budget {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  align-items: end;
  gap: 2px;
}
.ppt-mini--budget u { grid-column: 1 / -1; align-self: start; }
.ppt-mini--budget span {
  display: block;
  width: 100%;
  height: var(--h, 50%);
  border-radius: 1px 1px 0 0;
  background: #9bb0c9;
}
.ppt-mini--budget span:last-child { background: #c43e1c; }
.ppt-mini--growth i {
  display: block;
  height: 3px;
  width: 90%;
  background: #e4e4e4;
  border-radius: 1px;
  font-style: normal;
}
.ppt-mini--growth i:nth-child(3) { width: 78%; }
.ppt-mini--growth i:nth-child(4) { width: 62%; }
.ppt-mini--ask {
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}
.ppt-mini--ask strong {
  font: 700 7px/1 var(--sans);
  color: #c43e1c;
}
.ppt-mini--ask em {
  display: block;
  width: 70%;
  height: 2px;
  background: #e8e8e8;
  font-style: normal;
}

/* ─── THUMBNAIL OVERHAUL: new rich mini content ─── */

/* Slide 1 thumbnail — title improvements */
.ppt-mini--title {
  flex-direction: row;
  gap: 0;
  align-items: stretch;
}
.ppt-mini__title-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 3px 5px;
  flex: 1;
  min-width: 0;
}
.ppt-mini__logo {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e85d2c, #c43e1c);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 5px/1 var(--sans);
  color: #fff;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.ppt-mini--title strong {
  font: 700 6px/1.1 var(--sans);
  color: #fff;
  display: block;
}
.ppt-mini--title em {
  display: block;
  font: 500 5px/1.1 var(--sans);
  color: rgba(255,255,255,0.45);
  font-style: normal;
}

/* Slide 2 thumbnail — KPI boxes + horizontal bars */
.ppt-mini--market {
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  padding: 4px 5px 3px;
}
.ppt-mini--market u {
  grid-column: unset;
  width: 100%;
  font: 600 5.5px/1.1 var(--sans);
  color: #1a1a1a;
  text-decoration: none;
  display: block;
  margin-bottom: 1px;
}
.ppt-mini__kpis {
  display: flex;
  gap: 2px;
  width: 100%;
}
.ppt-mini__kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 1px;
  border-radius: 2px;
  border-top: 1.5px solid transparent;
  background: #f7f9fc;
  gap: 1px;
}
.ppt-mini__kpi--a { border-top-color: #c43e1c; }
.ppt-mini__kpi--b { border-top-color: #185abd; }
.ppt-mini__kpi--c { border-top-color: #0f7b3a; }
.ppt-mini__kpi b {
  font: 700 5.5px/1 var(--sans);
  color: #111;
  display: block;
}
.ppt-mini__kpi em {
  font: 500 4px/1 var(--sans);
  color: #888;
  font-style: normal;
  display: block;
}
.ppt-mini__hbars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.ppt-mini__hbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 5px;
}
.ppt-mini__hbar i {
  height: 4px;
  width: var(--bw, 50%);
  border-radius: 1px;
  flex-shrink: 0;
  font-style: normal;
}
.ppt-mini__hbar s {
  font: 500 4px/1 var(--sans);
  color: #666;
  text-decoration: none;
  white-space: nowrap;
}

/* Slide 3 thumbnail — bars + mini table */
.ppt-mini--budget {
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  padding: 4px 5px 3px;
}
.ppt-mini--budget u {
  grid-column: unset;
  width: 100%;
  font: 600 5.5px/1.1 var(--sans);
  color: #1a1a1a;
  text-decoration: none;
  display: block;
  align-self: unset;
  margin-bottom: 1px;
}
.ppt-mini__budget-body {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  flex: 1;
  min-height: 0;
}
.ppt-mini__vbars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  flex-shrink: 0;
}
.ppt-mini__vbars span {
  width: 7px;
  height: var(--h, 50%);
  border-radius: 1px 1px 0 0;
  background: #8fa8c4;
  display: block;
}
.ppt-mini__vbars span.is-hot {
  background: linear-gradient(180deg, #e85d2c, #c43e1c);
}
.ppt-mini__dtable {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px 3px;
  flex: 1;
  align-content: center;
}
.ppt-mini__dtable div {
  height: 4px;
  border-radius: 1px;
  background: #e8e8e8;
}
.ppt-mini__dtable div:nth-child(odd) { background: #d0d8e4; }
.ppt-mini__dtable div:nth-child(4),
.ppt-mini__dtable div:nth-child(3) { background: #c8dac8; }

/* Slide 4 thumbnail — recommendation rows + phase dots */
.ppt-mini--growth {
  flex-direction: column;
  gap: 2px;
  padding: 4px 5px 3px;
  justify-content: flex-start;
}
.ppt-mini--growth u {
  display: block;
  font: 600 5px/1.1 var(--sans);
  color: #c43e1c;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1px;
}
.ppt-mini__recs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.ppt-mini__rec {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 6px;
}
.ppt-mini__rec span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c43e1c;
  flex-shrink: 0;
}
.ppt-mini__rec i {
  flex: 1;
  height: 3px;
  background: #e8e8e8;
  border-radius: 1px;
  font-style: normal;
}
.ppt-mini__phases {
  display: flex;
  gap: 2px;
}
.ppt-mini__phase {
  flex: 1;
  height: 5px;
  border-radius: 1px;
}
.ppt-mini__phase--now { background: #c43e1c; }
.ppt-mini__phase--q2 { background: #185abd; }
.ppt-mini__phase--q3 { background: #8fa8c4; }
.ppt-mini__phase b {
  display: none;
}

/* Slide 5 thumbnail — checkboxes + owner table */
.ppt-mini--ask {
  flex-direction: column;
  gap: 2px;
  padding: 4px 5px 3px;
  align-items: flex-start;
  justify-content: flex-start;
}
.ppt-mini--ask u {
  display: block;
  font: 600 5px/1.1 var(--sans);
  color: #1a1a1a;
  text-decoration: none;
  margin-bottom: 1px;
}
.ppt-mini__checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.ppt-mini__chk {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 6px;
}
.ppt-mini__chk s {
  width: 5px;
  height: 5px;
  border: 1px solid #c43e1c;
  border-radius: 1px;
  flex-shrink: 0;
  text-decoration: none;
  display: block;
}
.ppt-mini__chk s.is-soft { border-color: #bbb; }
.ppt-mini__chk em {
  flex: 1;
  height: 3px;
  background: #e8e8e8;
  border-radius: 1px;
  font-style: normal;
  display: block;
}
.ppt-mini__otable {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px 3px;
  width: 100%;
  margin-top: 1px;
}
.ppt-mini__otable div {
  height: 4px;
  border-radius: 1px;
  background: #e8e8e8;
}
.ppt-mini__otable div:nth-child(odd) { background: #d0d8e4; }
.ppt-mini__otable div:nth-child(3) { background: #c8dac8; width: 60%; }
.ppt-mini__otable div:nth-child(4) { background: #c8dac8; width: 80%; }

.ppt-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: #e8e8e8;
}
.ppt-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  padding: 6px 8px 4px;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}
.ppt-stage {
  width: 100%;
  display: grid;
  place-items: center;
  min-height: 0;
  flex: 1;
}
.ppt-slide {
  display: none;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 16/9;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 18px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.ppt-slide.is-active,
.ppt-slide:not([hidden]) { display: flex; }
.ppt-slide[hidden] { display: none !important; }

.ppt-head {
  flex-shrink: 0;
  padding: 8px 12px 0;
}
.ppt-section {
  margin: 0 0 2px;
  font: 600 7px/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c43e1c;
}
.ppt-slide h3 {
  margin: 0;
  font: 700 12px/1.2 var(--sans);
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.ppt-slide-foot {
  margin-top: auto;
  padding: 4px 12px 6px;
  font: 500 6.5px/1.3 var(--sans);
  color: #888;
  border-top: 1px solid #eee;
}

.ppt-slide--title {
  background: linear-gradient(155deg, #1c2738 0%, #0f1622 72%, #0a1018 100%);
  color: #fff;
  flex-direction: row;
}
.ppt-accent {
  width: 5px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #e85d2c, #c43e1c);
}
.ppt-slide__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px 12px;
  min-width: 0;
}
.ppt-brand {
  margin: 0 0 10px;
  font: 600 7px/1 var(--sans);
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}
.ppt-slide--title h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  max-width: 14ch;
}
.ppt-sub {
  margin: 0;
  font: 400 9px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.72);
  max-width: 28ch;
}
.ppt-title-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 14px;
  font: 500 6.5px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.ppt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 12px 6px;
  flex: 1;
  min-height: 0;
}
.ppt-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 7px;
  background: #f7f9fc;
  border: 1px solid #e3e8ef;
  border-radius: 3px;
  border-top: 2px solid #c43e1c;
}
.ppt-kpi__delta {
  font: 600 6px/1 var(--sans);
  color: #666;
  letter-spacing: 0.02em;
}
.ppt-kpi__delta.is-up { color: #0f7b3a; }
.ppt-kpi strong {
  font: 700 13px/1.05 var(--sans);
  letter-spacing: -0.03em;
  color: #111;
}
.ppt-kpi__label {
  font: 500 6.5px/1.25 var(--sans);
  color: #555;
  margin-top: 2px;
}
.ppt-kpi__src {
  margin-top: auto;
  font: 500 5.5px/1 var(--sans);
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ppt-chart {
  display: grid;
  grid-template-columns: 14px 1fr 72px;
  gap: 4px;
  padding: 4px 10px 2px 8px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.ppt-chart__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0 14px;
  font: 500 5.5px/1 var(--sans);
  color: #999;
  text-align: right;
}
.ppt-chart__plot {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-bottom: 1px solid #d0d0d0;
  border-left: 1px solid #d0d0d0;
  padding: 2px 4px 0 4px;
  background:
    repeating-linear-gradient(
      to top,
      transparent 0,
      transparent calc(25% - 1px),
      #ececec calc(25% - 1px),
      #ececec 25%
    );
}
.ppt-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding-bottom: 2px;
}
.ppt-bar {
  flex: 1;
  max-width: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.ppt-bar i {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: #8fa8c4;
  font-style: normal;
  position: relative;
}
.ppt-bar i b {
  position: absolute;
  top: -9px;
  font: 700 6px/1 var(--sans);
  color: #444;
}
.ppt-bar.is-hot i {
  background: linear-gradient(180deg, #e85d2c, #c43e1c);
}
.ppt-bar.is-hot i b { color: #c43e1c; }
.ppt-bar span {
  font: 600 6px/1 var(--sans);
  color: #555;
  white-space: nowrap;
}
.ppt-callout {
  align-self: center;
  padding: 7px 8px;
  background: #fff7f2;
  border: 1px solid #f0d2bc;
  border-left: 3px solid #c43e1c;
  border-radius: 2px;
}
.ppt-callout strong {
  display: block;
  font: 700 8px/1 var(--sans);
  letter-spacing: 0.08em;
  color: #c43e1c;
  margin-bottom: 3px;
}
.ppt-callout p {
  margin: 0;
  font: 500 7px/1.3 var(--sans);
  color: #3a2a1a;
}
.ppt-callout__note {
  margin-top: 3px !important;
  color: #888 !important;
  font-weight: 400 !important;
}

.ppt-recs {
  list-style: none;
  margin: 0;
  padding: 6px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-height: 0;
}
.ppt-recs li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  padding: 5px 7px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 3px;
  min-height: 1.6em;
}
.ppt-recs__n {
  font: 700 8px/1.2 var(--sans);
  color: #c43e1c;
  letter-spacing: 0.02em;
}
.ppt-recs__t {
  font: 500 9px/1.35 var(--sans);
  color: #222;
}
.ppt-recs li.is-empty {
  background: #f5f5f5;
  border-style: dashed;
}
.ppt-recs li.is-empty .ppt-recs__t {
  color: transparent;
  min-height: 1.2em;
}
.ppt-recs li.is-empty .ppt-recs__n { opacity: 0.35; }

.ppt-decision {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 12px 4px;
  flex: 1;
  min-height: 0;
}
.ppt-check {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 7px;
  align-items: start;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  font: 500 8.5px/1.35 var(--sans);
  color: #222;
}
.ppt-check b { font-weight: 700; color: #c43e1c; }
.ppt-check__box {
  width: 10px;
  height: 10px;
  margin-top: 1px;
  border: 1.5px solid #c43e1c;
  border-radius: 2px;
  background: #fff;
}
.ppt-check__box.is-soft { border-color: #bbb; }
.ppt-owners {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 2px 12px 8px;
  font: 500 6.5px/1.2 var(--sans);
  color: #666;
}
.ppt-owners em {
  font-style: normal;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 3px;
}

/* ─── SLIDE OVERHAUL: new rich slide elements ─── */

/* Slide 1: geometric accent, logo mark, rule */
.ppt-title-geo {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.ppt-title-geo__line {
  position: absolute;
  background: rgba(255,255,255,0.06);
  border-radius: 1px;
}
.ppt-title-geo__line--a {
  width: 1px;
  height: 100%;
  right: 16px;
  top: 0;
  transform: rotate(12deg);
  transform-origin: top right;
}
.ppt-title-geo__line--b {
  width: 1px;
  height: 100%;
  right: 30px;
  top: 0;
  transform: rotate(12deg);
  transform-origin: top right;
  background: rgba(255,255,255,0.04);
}
.ppt-title-geo__dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(196, 62, 28, 0.5);
  top: 10px;
  right: 10px;
}
.ppt-logo-mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #e85d2c, #c43e1c);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 9px/1 var(--sans);
  color: #fff;
  flex-shrink: 0;
  margin-bottom: 6px;
}
.ppt-title-rule {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 10px 0 8px;
  width: 100%;
}

/* Slide 2: category growth bar chart */
.ppt-catchart {
  padding: 0 12px 4px;
  flex-shrink: 0;
}
.ppt-catchart__label {
  margin: 0 0 4px;
  font: 600 7px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
}
.ppt-catrow {
  display: grid;
  grid-template-columns: 58px 1fr 28px;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}
.ppt-catrow__name {
  font: 500 7px/1 var(--sans);
  color: #444;
  white-space: nowrap;
}
.ppt-catrow__track {
  height: 7px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}
.ppt-catrow__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.ppt-catrow__val {
  font: 700 7px/1 var(--sans);
  color: #111;
  text-align: right;
}
/* Adjust market slide kpi grid to not flex:1 since we have more content */
.ppt-slide--market .ppt-kpi-grid {
  flex: 0 0 auto;
  padding-bottom: 2px;
}

/* Slide 3: budget layout with chart + table side by side */
.ppt-budget-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 4px;
  padding: 0 0 2px;
}
.ppt-budget-body .ppt-chart {
  flex: 1;
  min-height: 0;
}
.ppt-dtable {
  width: calc(100% - 20px);
  margin: 0 10px;
  border-collapse: collapse;
  flex-shrink: 0;
}
.ppt-dtable thead tr {
  border-bottom: 1.5px solid #ddd;
}
.ppt-dtable th {
  padding: 2px 4px;
  font: 600 6px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  text-align: left;
}
.ppt-dtable th:not(:first-child) { text-align: right; }
.ppt-dtable td {
  padding: 3px 4px;
  font: 500 7.5px/1 var(--sans);
  color: #222;
}
.ppt-dtable td:not(:first-child) { text-align: right; }
.ppt-dtable tr.is-alt td { background: #f7f9fc; }
.ppt-dtable__num {
  font-weight: 700 !important;
  color: #111 !important;
}
.ppt-dtable__delta {
  font-weight: 600 !important;
}
.ppt-dtable__delta.is-up { color: #0f7b3a !important; }

/* Slide 4: growth layout with recs + timeline */
.ppt-growth-body {
  display: grid;
  grid-template-columns: 1fr 68px;
  gap: 6px;
  padding: 4px 10px 6px 12px;
  flex: 1;
  min-height: 0;
  align-items: start;
}
.ppt-growth-body .ppt-recs {
  padding: 0;
}
.ppt-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.ppt-timeline__label {
  margin: 0 0 5px;
  font: 600 6.5px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #888;
}
.ppt-phase {
  position: relative;
  display: grid;
  grid-template-columns: 8px 1fr;
  grid-template-rows: auto auto;
  gap: 0 5px;
  padding-bottom: 8px;
}
.ppt-phase:last-child { padding-bottom: 0; }
.ppt-phase__dot {
  grid-row: 1 / 2;
  grid-column: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  z-index: 1;
  margin-top: 1px;
  flex-shrink: 0;
}
.ppt-phase--now .ppt-phase__dot {
  background: #c43e1c;
  border-color: #c43e1c;
}
.ppt-phase--q2 .ppt-phase__dot {
  background: #185abd;
  border-color: #185abd;
}
.ppt-phase--q3 .ppt-phase__dot {
  background: #8fa8c4;
  border-color: #8fa8c4;
}
.ppt-phase__bar {
  grid-column: 1;
  grid-row: 2;
  width: 1.5px;
  background: #e0e0e0;
  margin: 0 auto;
  flex: 1;
  min-height: 8px;
}
.ppt-phase:last-child .ppt-phase__bar { display: none; }
.ppt-phase__name {
  grid-row: 1;
  grid-column: 2;
  font: 700 7.5px/1.2 var(--sans);
  color: #1a1a1a;
}
.ppt-phase--now .ppt-phase__name { color: #c43e1c; }
.ppt-phase--q2 .ppt-phase__name { color: #185abd; }
.ppt-phase__desc {
  grid-row: 2;
  grid-column: 2;
  font: 400 6.5px/1.3 var(--sans);
  color: #777;
}

/* Slide 5: decision layout */
.ppt-slide--ask .ppt-decision {
  flex: 0 0 auto;
  padding-bottom: 4px;
}
.ppt-action-table {
  width: calc(100% - 20px);
  margin: 0 10px 6px;
  border-collapse: collapse;
  flex-shrink: 0;
}
.ppt-action-table thead tr {
  border-bottom: 1.5px solid #ddd;
}
.ppt-action-table th {
  padding: 2px 4px;
  font: 600 6px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  text-align: left;
}
.ppt-action-table td {
  padding: 3px 4px;
  font: 500 7px/1 var(--sans);
  color: #333;
  vertical-align: middle;
}
.ppt-action-table tr.is-alt td { background: #f7f9fc; }
.ppt-badge {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 2px;
  font: 600 6px/1.4 var(--sans);
  letter-spacing: 0.03em;
}
.ppt-badge--pending {
  background: #fff3e0;
  color: #b75000;
  border: 1px solid #f5c88a;
}
.ppt-badge--approved {
  background: #e6f4ea;
  color: #0f7b3a;
  border: 1px solid #a8d5b0;
}

.ppt-notes {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 4px 0;
  min-height: 16px;
  flex-shrink: 0;
}
.ppt-notes__label {
  font: 600 7px/1 var(--sans);
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ppt-notes p {
  margin: 0;
  font: 400 7.5px/1.2 var(--sans);
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ppt-statusbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  background: #f3f3f3;
  border-top: 1px solid #d8d8d8;
  flex-shrink: 0;
  font: 500 8px var(--sans);
  color: #555;
}
.ppt-source {
  flex: 1;
  min-width: 0;
  font: 500 8px var(--mono);
  color: #c43e1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ppt-statusbar__meta { color: #666; flex-shrink: 0; }
.ppt-statusbar__views {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.ppt-statusbar__views i {
  width: 10px;
  height: 8px;
  border: 1px solid #aaa;
  border-radius: 1px;
  font-style: normal;
  background: #fff;
}
.ppt-statusbar__views i.is-on {
  border-color: #c43e1c;
  background: #fdece6;
}
.ppt-statusbar__zoom { color: #777; flex-shrink: 0; }

.host-workspace--board {
  padding: 10px;
  background: #f5f5f7;
}
.app-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 100%;
}
.app-board__col {
  background: #ebebef;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-board__col > span {
  font: 600 8px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6e6e73;
}
.app-board__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font: 500 10px var(--sans);
}
.app-board__card.is-hot {
  border-color: rgba(196, 92, 38, 0.55);
  box-shadow: 0 4px 12px rgba(196, 92, 38, 0.15);
}

/* —— Labeled taskbar dock (C + E) —— */
.toolbelt,
.context-canvas.has-mesh > .toolbelt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  pointer-events: none;
  /* Stay out of flex flow so shelf can hug the window edge */
  margin: 0;
  width: auto;
}
.toolbelt__bar {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1px;
  width: min(100% - 36px, 260px);
  max-width: 260px;
  padding: 4px 6px 5px;
  border-radius: 10px 10px 0 0;
  /* Uniform dark glass — no backdrop-filter (avoids shade shifts like the rail) */
  background: rgba(22, 26, 34, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -8px 24px rgba(0, 0, 0, 0.28),
    0 -3px 10px rgba(0, 0, 0, 0.18);
  transform: translate3d(0, 0, 0);
}
.toolbelt__item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 48px;
  height: auto;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Display-only shelf — motion drives state; users can't click */
  pointer-events: none;
  cursor: default;
  position: relative;
  padding: 3px 2px 5px;
  transform-origin: bottom center;
  /* Transform only — background fades left a darker shade on deselected apps */
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toolbelt__item:disabled {
  opacity: 1;
  color: inherit;
}
.toolbelt__item img {
  width: 17px;
  height: 17px;
  display: block;
  object-fit: contain;
  border-radius: 4px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  transition: filter 0.16s ease;
}
.toolbelt__label {
  font: 600 7px/1 var(--sans);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Default + deselected: always clear — never a residual shade */
.toolbelt__item,
.toolbelt__item:not(.is-open) {
  background: transparent;
}
.toolbelt__item:hover:not(.is-open),
.toolbelt__item:focus-visible:not(.is-open) {
  transform: none;
  background: transparent;
  outline: none;
}
.toolbelt__item:hover img,
.toolbelt__item:focus-visible img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.toolbelt__item:hover .toolbelt__label,
.toolbelt__item:focus-visible .toolbelt__label,
.toolbelt__item.is-open .toolbelt__label {
  color: #fff;
}
/* Open app: soft well only (no accent underline) */
.toolbelt__item.is-open,
.toolbelt__item.is-open:hover,
.toolbelt__item.is-open:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.toolbelt__item.is-open {
  transform: none;
}
.toolbelt__item.is-open img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.toolbelt__item:focus-visible {
  outline: none;
}
.toolbelt__item:focus-visible::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  box-shadow: 0 0 0 2px rgba(110, 182, 255, 0.65);
  pointer-events: none;
}

.surface-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.surface-chip {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  min-width: 0;
  background: #f5f5f7;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
}

.surface-chip--active {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(196, 92, 38, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(196, 92, 38, 0.15);
}

.surface-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.surface-chip-icon img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.surface-chip-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.surface-chip-copy strong {
  font: 500 10px var(--sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surface-chip-copy span {
  font: 9px var(--mono);
  color: #788080;
  letter-spacing: 0.02em;
}

.thread-line {
  display: grid;
  grid-template-columns: 23px 22px 1fr;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  font-size: 10px;
}

.thread-line b { font: 9px var(--mono); color: #9da4a2; }
.thread-line span { height: 1px; background: #b3bdb8; }
.thread-line p { margin: 0; }

.status-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 268px);
  margin-top: auto;
  margin-left: auto;
  padding-top: 12px;
}

.context-card,
.live-handoff {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 11px 13px;
  background: var(--paper);
  border: 1px dashed var(--blue);
  color: var(--blue);
  font: 9px var(--mono);
  line-height: 1.35;
}

.context-card p,
.live-handoff p {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.context-card strong,
.live-handoff strong { font-weight: 500; }

.context-card em,
.live-handoff em {
  font-style: normal;
  color: #6d675d;
  font-size: 8px;
  text-transform: uppercase;
  flex-shrink: 0;
  padding-top: 1px;
}

.live-pulse {
  width: 7px;
  height: 7px;
  margin-top: 3px;
  border-radius: 50%;
  background: #6a9a7d;
  box-shadow: 0 0 0 4px #dce9df;
  flex: 0 0 auto;
}

/* Hero desktop — G8 mesh, R9 floating rail, D7 glass toast */
.surface-chip.is-live .surface-chip-copy span {
  color: #3f6b54;
}

.context-canvas.has-mesh {
  isolation: isolate;
  overflow: hidden;
  background-color: var(--mesh-base, #f3ece3);
}

.context-canvas.has-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--mesh-base, #f3ece3);
  background-image: var(--mesh-blooms), var(--mesh-wash);
  background-repeat: no-repeat;
}

.context-canvas.has-mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Isolated squares on a 10px grid — closer than 12px, still open. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='2.5' height='2.5' fill='rgb(46 38 30 / 0.16)'/%3E%3C/svg%3E"),
    var(--mesh-noise);
  background-size: 10px 10px, 180px 180px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.4;
}

.context-canvas.has-mesh > * {
  position: relative;
  z-index: 1;
}

.context-canvas.has-mesh {
  --mesh-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.context-canvas.mesh-g8 {
  /* Oil painting wallpaper inside the mockup window */
  --mesh-base: #c8b8a4;
  --mesh-blooms: none;
  --mesh-wash: none;
}

.context-canvas.mesh-g8.has-mesh::before {
  background-color: transparent;
  background-image: url("assets/desktop-oil-landscape.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Slight blur so UI cards stay primary */
  filter: blur(0.5px) saturate(1.02);
  transform: scale(1.02);
}

/* Keep a whisper of texture over the painting — not a heavy grid */
.context-canvas.mesh-g8.has-mesh::after {
  opacity: 0.08;
  mix-blend-mode: soft-light;
  background-image: var(--mesh-noise);
  background-size: 180px 180px;
}

.desktop-window.rail-r9 .window-body {
  grid-template-columns: 1fr;
  min-height: 0;
}

/* Rail / icons size relative to the mock frame width */
.desktop-window.rail-r9 {
  container-type: inline-size;
  container-name: incredible-desktop;
}

.desktop-window.rail-r9 .context-canvas {
  /* Left inset tracks the fluid rail so hosts don’t collide with it */
  padding: 12px 12px 12px clamp(48px, 8.2cqi, 70px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.desktop-window.rail-r9 .context-canvas > .window-sidebar {
  position: absolute;
  left: clamp(8px, 1.5cqi, 14px);
  top: 12px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Section groups own their internal gaps */
  gap: 0;
  /* Wider rail shell only — icons stay fixed size below */
  width: clamp(32px, 5.5cqi, 42px);
  padding: 8px 0;
  margin: 0;
  /* Soft corners, not a full pill */
  border-radius: 12px;
  /* Uniform dark glass — no backdrop-filter (it was retinting top vs bottom) */
  background: rgba(22, 26, 34, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Lifted off the board */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 10px 28px rgba(0, 0, 0, 0.32),
    0 4px 10px rgba(0, 0, 0, 0.22),
    0 22px 48px rgba(16, 24, 40, 0.28);
  transform: translate3d(0, -3px, 0);
}

.desktop-window.rail-r9 .context-canvas > .window-sidebar::before {
  content: none;
}

/* Primary stack + account — even icon rhythm like reference rail */
.desktop-window.rail-r9 .sidebar-primary,
.desktop-window.rail-r9 .sidebar-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Match reference: even gaps; slightly roomier now that the stack is shorter */
  gap: 12px;
  flex: 0 0 auto;
  width: 100%;
}

.desktop-window.rail-r9 .sidebar-primary {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Pin account to bottom — large empty mid gap like the reference */
.desktop-window.rail-r9 .sidebar-account {
  margin-top: auto;
}

.desktop-window.rail-r9 .sidebar-item {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
}

.desktop-window.rail-r9 .sidebar-item svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

.desktop-window.rail-r9 .sidebar-item--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  transform: translateZ(0);
  isolation: isolate;
}

/* Settings matches profile footprint; gear stroke reads larger */
.desktop-window.rail-r9 .sidebar-item--settings {
  width: 20px;
  height: 20px;
  margin-top: 0;
}

.desktop-window.rail-r9 .sidebar-item--settings svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.45;
}

.desktop-window.rail-r9 .sidebar-item--profile {
  margin-top: 0;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  overflow: hidden;
  padding: 0;
}

.desktop-window.rail-r9 .sidebar-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: inherit;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .desktop-window.rail-r9 .context-canvas > .window-sidebar {
    background: rgba(247, 241, 232, 0.88);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .desktop-window.rail-r9 .context-canvas > .window-sidebar {
    background: rgba(247, 241, 232, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.toast-slot {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: auto;
  /* Tracks the mock frame; nudged slightly smaller */
  width: min(100%, clamp(200px, 28cqi, 250px));
  /* Front card + peek strips of up to 2 cards behind */
  min-height: calc(48px + var(--toast-peek-total, 0px));
  height: auto;
  z-index: 6;
  pointer-events: none;
  /* Deck stack — not a vertical list */
  display: block;
}

.context-canvas.has-mesh .toast-slot {
  position: absolute;
  z-index: 6;
}

.workflow-toast {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  width: 100%;
  margin: 0;
  transform-origin: 50% 0%;
  /* Compositor-friendly enter/exit without spring thrash */
  backface-visibility: hidden;
  /* Settle when reshuffled behind a newer front card */
  transition: box-shadow 0.28s ease, filter 0.28s ease;
}

.workflow-toast .live-pulse {
  margin-top: 3px;
}

/*
  Fully transparent toast — blur only, no color wash.
*/
.toast-d7 {
  --toast-radius: 10px;
  /* position comes from .workflow-toast (absolute deck layers) */
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 11px;
  border-radius: var(--toast-radius);
  overflow: hidden;
  color: #1d1d1f;
  font: 7.5px var(--mono);
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-shadow: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
}

/* Cards tucked behind the front one read as faint top edges */
.workflow-toast[data-stack-depth="1"],
.workflow-toast[data-stack-depth="2"] {
  filter: brightness(0.97);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
}

.workflow-toast[data-stack-depth="2"] {
  filter: brightness(0.94);
}

/* No frost plate — blur lives on the toast itself */
.toast-d7::before {
  content: none;
}

.toast-d7 > * {
  position: relative;
  z-index: 1;
}

.toast-d7 .live-pulse {
  width: 4px;
  height: 4px;
  margin-top: 3px;
  background: #3d9a6a;
  box-shadow: 0 0 0 2px rgba(61, 154, 106, 0.28);
  border-radius: 50%;
  opacity: 1;
}

.toast-d7 .toast-copy {
  flex: 1;
  min-width: 0;
}

.toast-d7 .toast-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.toast-d7 strong {
  font: 500 10px var(--sans);
  color: #1d1d1f;
}

.toast-d7 .toast-timer {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font: 500 7px var(--mono);
  color: #1d1d1f;
  letter-spacing: 0.02em;
}

.toast-d7 .toast-detail {
  display: block;
  color: rgba(29, 29, 31, 0.78);
  font-size: 7.5px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .toast-d7 {
    background: rgba(255, 255, 255, 0.82);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .toast-d7 {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.stage-caption {
  position: absolute;
  bottom: clamp(14px, 2vh, 22px);
  left: 0;
  right: 0;
  text-align: center;
  color: #1d1d1f;
  font: 13px var(--mono);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stage-caption span { color: #6e6e73; }

/* Diagnosis */
.section-kicker {
  display: flex;
  gap: 17px;
  align-items: center;
  color: var(--blue);
}

.kicker-line {
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: 1;
  max-width: 130px;
}

.manifesto {
  padding: 105px 8vw 125px;
  /* Midnight preview — dark field for quote + origins + research */
  background: #1d1d1f;
  color: #f5f5f7;
}

.manifesto-quote {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.manifesto-seal {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 26px;
  background: #f5f5f7;
  -webkit-mask: url("Favicon.svg") center / contain no-repeat;
  mask: url("Favicon.svg") center / contain no-repeat;
}

.manifesto-quote h2 {
  margin: 0;
  font: italic 400 clamp(36px, 5vw, 68px)/1.04 var(--serif);
  letter-spacing: -0.02em;
  color: #f5f5f7;
}

.manifesto-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  margin: 72px 0 0;
}

.manifesto-band::before,
.manifesto-band::after {
  content: "";
  border-top: 1px solid #424245;
}

.manifesto-band-inner {
  min-width: 230px;
  text-align: center;
}

.manifesto-band-inner .research-intro-kicker {
  display: block;
  margin-bottom: 16px;
  letter-spacing: 0.16em;
  color: #a1a1a6;
}

.manifesto-band-inner p,
.manifesto-band-names {
  margin: 0 0 14px;
  font: 400 22px/1.25 var(--serif);
  letter-spacing: -0.02em;
  color: #f5f5f7;
}

.manifesto-band-why {
  margin: 0 0 16px !important;
  /* Desktop: larger why-line; mobile keeps its own size under max-width 800px */
  font: 400 24px/1.3 var(--sans) !important;
  letter-spacing: -0.01em !important;
  color: #a1a1a6;
}

.manifesto-band-why em {
  font-family: var(--serif);
  font-style: italic;
  color: #f5f5f7;
}

.manifesto-band-inner .text-link {
  color: var(--accent);
  border-bottom-color: rgba(0, 113, 227, 0.35);
}

.manifesto h2 em {
  color: #a1a1a6;
  font-style: italic;
}

/* Research timeline on midnight manifesto */
.manifesto .research-intro-kicker { color: #a1a1a6; }

.manifesto .research-body::before {
  border-left-color: #636366;
}

.manifesto .research-layout .research-entry {
  border-bottom-color: #424245;
}

.manifesto .research-heading > span { color: #a1a1a6; }

.manifesto .research-heading > span::before {
  background: #1d1d1f;
  box-shadow: inset 0 0 0 1.5px #f5f5f7;
}

.manifesto .research-layout .research-entry:last-child .research-heading > span::before,
.manifesto .research-entry--now .research-heading > span::before {
  background: #f5f5f7;
  box-shadow: none;
}

.manifesto .research-layout .research-heading h3 { color: #f5f5f7; }

.manifesto .research-layout .research-heading h3 em { color: #a1a1a6; }

.manifesto .research-layout .research-entry-content p { color: #a1a1a6; }

.manifesto .research-layout .research-entry-content p em { color: #f5f5f7; }

.manifesto .research-layout .research-entry--now .research-entry-content p.now-line {
  color: #f5f5f7;
}

.manifesto .research-entry--now .now-rule {
  border-color: #636366;
}

.manifesto .research-entry--now .research-heading h3 .now-logo {
  /* Midnight wordmark → light on dark */
  filter: invert(1);
}

.manifesto .research-rail {
  background: transparent;
}

.manifesto .research-conclusion {
  border-color: #636366;
  color: #f5f5f7;
}

.manifesto .research-conclusion strong,
.manifesto .research-bridge {
  color: #f5f5f7;
  border-color: #636366;
}

.pricing h2 {
  /* Same display band as manifesto / inversion (was billboard 105px) */
  font: clamp(36px, 5vw, 68px) var(--serif);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0;
}

#diagnosis-title {
  min-height: 2.4em;
}

#diagnosis-title em {
  padding-left: 0.04em;
}

.manifesto h2 em,
.pricing h2 em,
.final-cta h2 em {
  color: var(--blue);
  font-style: italic;
}

/* Midnight manifesto overrides the shared em rule above */
.manifesto h2 em { color: #a1a1a6; }

.research-story {
  margin: 0 0 78px;
  padding-top: 40px;
}

.research-intro-kicker {
  font: 10px var(--mono);
  color: var(--blue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.research-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
  gap: clamp(28px, 6vw, 8vw);
  align-items: start;
}

.research-body {
  /* Shared gutter keeps the spine, dots, and copy locked together at every width */
  --tl-gutter: clamp(22px, 2.4vw, 32px);
  --tl-dot: clamp(8px, 0.7vw, 10px);
  --tl-line-x: calc(var(--tl-gutter) / 2);
  --tl-entry-pad: clamp(36px, 4.5vh, 48px);
  border-top: 0;
  position: relative;
  padding-left: var(--tl-gutter);
  min-width: 0;
  /* Now block (and type) can scale with this column, not the full viewport */
  container-type: inline-size;
  container-name: research;
}

.research-body::before {
  content: "";
  position: absolute;
  left: var(--tl-line-x);
  top: calc(var(--tl-entry-pad) + 0.55em);
  bottom: calc(var(--tl-entry-pad) + 0.55em);
  width: 0;
  border-left: 1px dashed var(--blue);
  pointer-events: none;
}

.research-layout .research-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: clamp(420px, 68vh, 780px);
  padding: var(--tl-entry-pad) 0;
  border-bottom: 1px dashed var(--line);
}

.research-layout .research-entry:last-child { border-bottom: 0; }

.research-entry-content {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
  width: 100%;
  max-width: min(650px, 100%);
}

.research-heading {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
}

.research-heading > span {
  position: relative;
  display: inline-block;
  font: 500 clamp(12px, 1.05vw, 14px) var(--mono);
  color: var(--blue);
  letter-spacing: 0.06em;
}

.research-heading > span::before {
  content: "";
  position: absolute;
  /* Center the dot on the dashed spine, regardless of viewport width */
  left: calc(-1 * var(--tl-gutter) + var(--tl-line-x) - (var(--tl-dot) / 2));
  top: 0.35em;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

.research-layout .research-entry:last-child .research-heading > span::before {
  background: var(--blue);
  box-shadow: none;
}

.research-layout .research-heading h3 {
  font: clamp(32px, 3.4vw, 52px) var(--serif);
  font-weight: 400;
  line-height: 0.9;
  margin: 0;
}

/* Inline portraits are for mobile timeline only — rail handles desktop */
.research-portrait-inline {
  display: none;
}

.research-person-copy {
  display: block;
  min-width: 0;
}

.research-layout .research-heading h3 em {
  color: var(--blue);
  font-style: italic;
}

.research-layout .research-entry-content p {
  max-width: min(650px, 100%);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.66;
  margin: 0;
}

.research-layout .research-entry-content p em {
  font-family: var(--serif);
  font-size: 1.08em;
}

.research-entry--now .research-heading {
  /* Year→logo uses the same gap as .research-heading (historical year→name) */
  margin-bottom: clamp(4px, 1cqi, 10px);
}

.research-entry--now .research-heading h3 {
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 0;
}

.research-entry--now .research-heading h3 .now-logo {
  display: block;
  width: clamp(220px, 46cqi, 360px);
  height: auto;
}

.research-layout .research-entry--now .research-entry-content {
  gap: clamp(24px, 3.8cqi, 40px);
  width: 100%;
  max-width: min(760px, 100%);
  overflow: visible;
}

.research-layout .research-entry--now .research-entry-content p.now-line {
  margin: 0;
  max-width: none;
  color: var(--blue);
  font-family: var(--serif);
  font-size: clamp(20px, 4.2cqi, 30px);
  line-height: 1.35;
  white-space: nowrap;
}

.research-layout .research-entry--now .research-entry-content p.now-line:first-of-type {
  font-style: italic;
  font-weight: 400;
}

.research-layout .research-entry--now .research-entry-content p.now-bridge {
  font-style: normal;
}

.research-entry--now .now-rule {
  display: block;
  width: min(100%, 48ch);
  margin: 0;
  border: 0;
  border-top: 1.5px dashed var(--blue);
  opacity: 0.85;
  transform-origin: left center;
}

.research-entry--now .research-heading > span::before {
  width: var(--tl-dot);
  height: var(--tl-dot);
  left: calc(-1 * var(--tl-gutter) + var(--tl-line-x) - (var(--tl-dot) / 2));
  top: 0.35em;
}

/* Hide Now punch lines until coda typing / reduced-motion fill */
.research-entry--now.is-pending .now-line,
.research-entry--now.is-pending .now-rule {
  opacity: 0;
}

.research-entry--now.is-pending .now-rule {
  transform: scaleX(0.2);
}

#diagnosis-title .type-cursor,
.now-line .type-cursor {
  background: var(--blue);
}

/* Shared typewriter cursor (research timeline; hero no longer types) */
.type-cursor {
  display: inline-block;
  width: 0.08em;
  height: 0.92em;
  margin-left: 2px;
  vertical-align: -0.06em;
  background: var(--blue);
  animation: cursor-blink 0.85s steps(1) infinite;
}

.type-cursor.is-serif {
  height: 0.85em;
  vertical-align: 0.02em;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .type-cursor { display: none; }
}

.rail-image--brand {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 55% at 70% 30%, rgba(255, 255, 255, 0.1), transparent 55%),
    #111;
}

.rail-image--brand .brand-mark {
  width: min(42%, 180px);
  height: min(42%, 180px);
  background: #fff;
  -webkit-mask: url("Favicon.svg") center / contain no-repeat;
  mask: url("Favicon.svg") center / contain no-repeat;
  position: relative;
  z-index: 0;
  margin-bottom: 48px;
}

.research-rail {
  /* Option 3: full-bleed portrait well — no vertical word rails */
  display: block;
  height: calc(100svh - 90px);
  min-height: 560px;
  position: sticky;
  top: 90px;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  border-radius: 18px;
}

.rail-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
  border-radius: 18px;
}

.rail-frame-side,
.rail-frame-left,
.rail-frame-right {
  display: none;
}

.rail-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
  pointer-events: none;
  will-change: opacity;
}

.rail-image.active {
  opacity: 1;
  z-index: 2;
}

.rail-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
}

.rail-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 22%;
  /* Apple-like high-contrast B&W */
  filter: grayscale(1) contrast(1.18) brightness(0.96);
}

.rail-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  color: #fff;
  font-family: var(--sans);
  pointer-events: none;
}

.rail-caption strong {
  display: block;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.rail-caption span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #a1a1a6;
  letter-spacing: -0.01em;
}

.rail-image:nth-child(1) { background: #111; }
.rail-image:nth-child(2) { background: #111; }
.rail-image:nth-child(3) { background: #111; }

.research-conclusion {
  border: 1px dashed var(--blue);
  padding: 32px 7vw;
  margin: clamp(140px, 22vh, 240px) auto clamp(72px, 12vh, 128px);
  max-width: 790px;
  font: 26px var(--serif);
  line-height: 1.04;
  text-align: center;
}

.research-conclusion p { margin: 0 0 5px; }

.research-conclusion strong {
  display: block;
  color: var(--blue);
  font-weight: 400;
  font-style: italic;
  margin-top: 23px;
}

.research-bridge {
  display: block;
  margin-top: 23px;
  padding-top: 20px;
  border-top: 1px dashed var(--blue);
  color: var(--blue);
  font: 22px var(--serif);
}

/* Inversion — white field + soft gray cards */
.inversion {
  background: #ffffff;
  color: var(--ink);
  padding: 92px 8vw 105px;
}

.section-kicker.light { color: #6e6e73; }

.inversion h2 {
  font-family: var(--serif);
  /* Align with manifesto / final-cta display size (not the larger pricing display) */
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-align: center;
  margin: 72px auto 56px;
  max-width: 920px;
  color: var(--ink);
  text-wrap: balance;
}

.inversion h2 em {
  color: #6e6e73;
  font-style: italic;
  font-weight: 400;
}

.inversion h2 em strong {
  color: inherit;
  font-style: italic;
  font-weight: 600;
}

/* Mobile-only soft breaks inside the inversion headline (hidden on desktop) */
.br-mobile {
  display: none;
}

.inversion-lede {
  max-width: 480px;
  text-align: center;
  margin: 0 auto 56px;
  color: #6e6e73;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.5;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-radius: 22px;
  box-shadow: none;
  padding: 28px 26px 30px;
  min-height: 265px;
  height: 100%;
  position: relative;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference) {
  .feature-card[data-motion="pending"] {
    opacity: 0;
    transform: translateY(28px);
  }
}

.feature-card-accent {
  background: var(--paper);
  box-shadow: none;
}

.price-label {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #6e6e73);
}

.feature-icon {
  position: absolute;
  right: 22px;
  top: 20px;
  width: 28px;
  height: 28px;
  color: #6e6e73;
  pointer-events: none;
}

.feature-card-accent .feature-icon {
  color: #6e6e73;
}

.feature-icon .icon-anim {
  display: block;
  width: 28px;
  height: 28px;
  overflow: visible;
}

.icon-surfaces .surf {
  stroke: currentColor;
  stroke-width: 1.5;
  fill: transparent;
  transform-origin: center;
  transform-box: fill-box;
}

.icon-lift .lift-chamber {
  stroke: currentColor;
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lift .lift-dot {
  fill: currentColor;
  opacity: 0;
}

.icon-fuse .fuse-orbit {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-dasharray: 4 5;
  opacity: 0.7;
}

.icon-fuse .fuse-spoke {
  transform-origin: 16px 16px;
  transform-box: view-box;
}

.icon-fuse .fuse-spoke.s2 { transform: rotate(120deg); }
.icon-fuse .fuse-spoke.s3 { transform: rotate(240deg); }

.icon-fuse .fuse-dot {
  fill: currentColor;
  transform-origin: 16px 3px;
  transform-box: view-box;
}

.icon-fuse .fuse-core {
  fill: currentColor;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .icon-surfaces .s1 { animation: surf-pulse 2.4s ease-in-out infinite; }
  .icon-surfaces .s2 { animation: surf-pulse 2.4s ease-in-out 0.3s infinite; }
  .icon-surfaces .s3 { animation: surf-pulse 2.4s ease-in-out 0.6s infinite; }
  .icon-surfaces .s4 { animation: surf-pulse 2.4s ease-in-out 0.9s infinite; }

  .icon-lift .lift-d1 { animation: lift-flow 3s ease-in-out infinite; }
  .icon-lift .lift-d2 { animation: lift-flow 3s ease-in-out 1.5s infinite; }

  .icon-fuse .fuse-orbit {
    animation: fuse-spin 6s linear infinite;
  }

  .icon-fuse .s1 .fuse-dot,
  .icon-fuse .s2 .fuse-dot,
  .icon-fuse .s3 .fuse-dot {
    animation: fuse-bounce 1.5s ease-in-out infinite;
  }

  .icon-fuse .fuse-core {
    animation: fuse-glow 1.8s ease-in-out infinite;
  }
}

@keyframes surf-pulse {
  0%, 100% { opacity: 0.35; fill: transparent; }
  40% { opacity: 1; fill: color-mix(in srgb, currentColor 22%, transparent); }
}

@keyframes lift-flow {
  0% { transform: translate(0, 0); opacity: 0; }
  7% { opacity: 1; }
  30% { transform: translate(14px, 0); }
  45% { transform: translate(14px, -8px); }
  90% { opacity: 1; }
  100% { transform: translate(30px, -8px); opacity: 0; }
}

@keyframes fuse-spin {
  to { stroke-dashoffset: -36; }
}

@keyframes fuse-bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(5px);
    opacity: 0.55;
  }
}

@keyframes fuse-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.feature-card h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: 220px;
  margin: 8px 0 0;
  min-height: calc(22px * 1.15 * 2);
  color: var(--ink);
}

.feature-card > p:not(.feature-example) {
  color: #6e6e73;
  max-width: 270px;
  font-size: 14px;
  line-height: 1.5;
  margin: 16px 0 0;
  align-self: start;
}

.feature-card-accent > p:not(.feature-example) { color: #6e6e73; }

.feature-example {
  margin: 24px 0 0;
  min-height: 82px;
  border-top: 1px solid #d2d2d7;
  padding-top: 13px;
  color: #6e6e73;
  font-size: 13px !important;
  line-height: 1.45 !important;
  align-self: end;
}

.feature-example strong {
  display: block;
  margin-bottom: 4px;
  color: #6e6e73;
  font: 500 12px var(--sans);
  letter-spacing: -0.01em;
  text-transform: none;
}

.feature-card:not(.feature-card-accent) .feature-example { color: #6e6e73; }

/* Early access */
.pricing { padding: 105px var(--page-pad) 125px; }

.early-access .pricing-heading {
  display: block;
  text-align: center;
  margin: 65px auto 80px;
}

.early-access .pricing-heading h2,
.early-access .pricing-heading p {
  margin-left: auto;
  margin-right: auto;
}

.early-access .pricing-heading p {
  max-width: 780px;
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.5;
  color: #6e6e73;
}

.price-bands {
  display: grid;
  gap: 14px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.price-band {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: center;
  padding: 36px 40px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 10px 28px rgba(0, 0, 0, 0.04);
}

.price-band--dark {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.price-band--dark .price-label {
  color: rgba(245, 245, 247, 0.5);
}

.price-band h3 {
  font: 400 clamp(26px, 2.6vw, 32px)/1.12 var(--serif);
  letter-spacing: -0.025em;
  margin: 12px 0 10px;
}

.price-band p {
  font: 400 15px/1.55 var(--sans);
  color: #6e6e73;
  max-width: 42ch;
  margin: 0;
}

.price-band--dark p {
  color: rgba(245, 245, 247, 0.7);
}

.price-band__cta {
  justify-self: end;
}

.price-band .button {
  white-space: nowrap;
}

/* Waitlist */
.final-cta {
  position: relative;
  background: var(--blue-dark);
  color: var(--paper);
  padding: 72px var(--page-pad) 80px;
  overflow: hidden;
  /* Wordmark sizes against this section as the page resizes */
  container-type: inline-size;
  container-name: final-cta;
}

.final-cta-mark {
  position: absolute;
  right: 0;
  bottom: 0;
  top: auto;
  left: auto;
  /* Scale with the section width — no fixed px ceiling */
  width: 88%;
  width: 88cqi;
  max-width: none;
  height: auto;
  /* Soft crop past the right edge so it reads as a watermark */
  transform: translateX(16%);
  opacity: 0.14;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  display: block;
}

.final-cta > *:not(.final-cta-mark) {
  position: relative;
  z-index: 1;
}

.final-kicker { color: #86868b; }

.final-cta h2 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.9;
  margin: 20px 0 28px;
  max-width: var(--prose-max);
}

.final-cta h2 em { color: #a1a1a6; }

.final-support {
  max-width: 390px;
  margin: 0 0 32px;
  color: #a1a1a6;
  font: 11px var(--mono);
  line-height: 1.5;
}

.waitlist-form {
  max-width: var(--prose-max);
  display: grid;
  gap: 14px;
}

.waitlist-honey {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.waitlist-fields-stage {
  /* Allow full field width; don’t clip the 2-col grid or autofill */
  overflow: visible;
  min-width: 0;
  width: 100%;
}

.waitlist-fields-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.waitlist-fields-group[hidden] { display: none; }

.waitlist-type-field { max-width: 240px; }

.waitlist-field { display: grid; gap: 8px; }

.waitlist-field span {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #86868b;
}

/* Fallback field chrome (hero overrides separately) */
.waitlist-field input,
.waitlist-field select {
  width: 100%;
  min-height: 45px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #1c1c1e;
  color: #f5f5f7;
  font: 15px/1.2 var(--sans);
}

.waitlist-field input::placeholder { color: #636366; }

.waitlist-field select {
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #86868b 50%),
    linear-gradient(135deg, #86868b 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.final-cta .waitlist-field select option {
  color: var(--ink);
  background: var(--white);
}

/* Option C — filled dark wells on the final CTA */
.final-cta .waitlist-field input,
.final-cta .waitlist-field select {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background-color: #1c1c1e;
  color: #f5f5f7;
  font: 15px/1.2 var(--sans);
}

.final-cta .waitlist-field input:focus,
.final-cta .waitlist-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
  background-color: #1c1c1e;
}

.waitlist-field input:focus,
.waitlist-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
}

.waitlist-form .waitlist-submit {
  justify-self: start;
  min-width: 170px;
  margin-top: 4px;
}

/* Concept B · refined — inset full-height shine (one pass) + soft success stamp */
.waitlist-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.waitlist-submit__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.waitlist-submit__check {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.waitlist-submit__sweep-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  right: 22px;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.waitlist-submit__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.08) 70%,
    transparent 100%
  );
}

/* Paper CTA: softer ink-tinted shine so it reads on a light fill */
.waitlist-submit.button-paper .waitlist-submit__sweep {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(29, 29, 31, 0.05) 30%,
    rgba(29, 29, 31, 0.12) 50%,
    rgba(29, 29, 31, 0.05) 70%,
    transparent 100%
  );
}

.waitlist-submit__rail {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.waitlist-submit.button-paper .waitlist-submit__rail {
  background: rgba(29, 29, 31, 0.12);
}

.waitlist-submit__rail > i {
  display: block;
  height: 100%;
  width: 36%;
  border-radius: inherit;
  background: #7ec2ff;
}

.waitlist-submit.button-paper .waitlist-submit__rail > i {
  background: var(--accent);
}

.waitlist-submit.is-waiting {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.waitlist-submit.button-paper.is-waiting {
  box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.08);
}

.waitlist-submit.is-waiting .waitlist-submit__sweep-lane {
  opacity: 1;
}

.waitlist-submit.is-waiting .waitlist-submit__sweep {
  animation: waitlist-sweep-once 1.6s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
}

.waitlist-submit.is-waiting .waitlist-submit__rail {
  opacity: 1;
}

.waitlist-submit.is-waiting .waitlist-submit__rail > i {
  animation: waitlist-rail-slide 1.1s ease-in-out infinite;
}

.waitlist-submit.is-success {
  background: #d8f0e2;
  color: #1f7a4d;
  box-shadow: inset 0 0 0 1px rgba(31, 122, 77, 0.25);
}

.waitlist-submit.is-success:hover {
  background: #d8f0e2;
  color: #1f7a4d;
  transform: none;
}

.waitlist-submit.is-success .waitlist-submit__check {
  display: block;
  animation: waitlist-check-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.waitlist-submit.is-success .waitlist-submit__sweep-lane,
.waitlist-submit.is-success .waitlist-submit__rail {
  opacity: 0;
}

@keyframes waitlist-sweep-once {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

@keyframes waitlist-rail-slide {
  0% { transform: translateX(-20%); }
  50% { transform: translateX(160%); }
  100% { transform: translateX(-20%); }
}

@keyframes waitlist-check-in {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .waitlist-submit.is-waiting .waitlist-submit__sweep,
  .waitlist-submit.is-waiting .waitlist-submit__rail > i,
  .waitlist-submit.is-success .waitlist-submit__check {
    animation: none !important;
  }

  .waitlist-submit.is-waiting .waitlist-submit__sweep-lane,
  .waitlist-submit.is-waiting .waitlist-submit__rail {
    opacity: 0;
  }
}

.waitlist-message {
  min-height: 20px;
  margin: 0;
  font: 11px var(--mono);
  color: #c6d6e7;
}

.waitlist-message.is-success { color: #b8dcc4; }
.waitlist-message.is-error { color: #f0c4c4; }

.waitlist-form-hero {
  margin-top: clamp(24px, 4vh, 36px);
  max-width: none;
  gap: 10px;
}

.waitlist-form-hero .waitlist-type-field { max-width: none; }

/* Option 5: Apple segmented control */
.type-segment {
  display: inline-flex;
  padding: 3px;
  background: var(--paper);
  border-radius: 980px;
  width: fit-content;
  gap: 0;
}

.type-segment__btn {
  border: 0;
  background: transparent;
  color: #6e6e73;
  font: 500 12px var(--sans);
  padding: 8px 16px;
  border-radius: 980px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.type-segment__btn.is-on {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.type-segment__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.waitlist-type-field .waitlist-type-select[aria-hidden="true"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.waitlist-form-hero .waitlist-fields-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  width: 100%;
}

.waitlist-form-hero .waitlist-fields-business {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  width: 100%;
}

.waitlist-form-hero .waitlist-field input,
.waitlist-form-hero .waitlist-field select {
  min-height: 40px;
  border: 0;
  border-radius: var(--control-radius);
  background: var(--paper);
  color: var(--ink);
}

.waitlist-form-hero .waitlist-field input::placeholder { color: #8a9aaa; }
.waitlist-form-hero .waitlist-field span { color: var(--blue); }

.waitlist-form-hero .waitlist-field select {
  color-scheme: light;
  background-color: var(--paper);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--blue) 50%),
    linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.waitlist-form-hero .waitlist-field select option {
  color: var(--ink);
  background: var(--white);
}

.waitlist-form-hero .waitlist-field input:focus,
.waitlist-form-hero .waitlist-field select:focus {
  border-color: transparent;
  background-color: var(--paper);
  outline: 2px solid rgba(0, 113, 227, 0.35);
  outline-offset: 1px;
}

.waitlist-form-hero .waitlist-submit {
  min-height: 44px;
  margin-top: 0;
  /* Width comes from .hero-cta-row .waitlist-submit (column-fill) */
  padding: 0 22px;
}

.waitlist-form-hero .waitlist-message { color: var(--blue); }
.waitlist-form-hero .waitlist-message.is-success { color: #3d7a52; }
.waitlist-form-hero .waitlist-message.is-error { color: #a63d3d; }

/* ——— Hero static layout (mockup motion lives in desktop-motion.js) ——— */

.hero--agent-create .hero-logo {
  opacity: 1;
  transform: none;
}

.hero--agent-create .hero-copy {
  display: grid;
  /* Title takes what it needs; form keeps the rest — no forced 50/50 clip */
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  justify-content: stretch;
  gap: 0;
  min-width: 0;
  /* Scroll inside the white card if the viewport is short */
  overflow-x: hidden;
  overflow-y: auto;
}

.hero--agent-create .hero-board {
  min-height: 0;
  position: relative;
}

.hero--agent-create .hero-board--write {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(18px, 2.8vh, 32px);
}

.hero--agent-create .hero-board--write #hero-title {
  margin: 0;
}

.hero--agent-create .hero-board--write .hero-intro {
  margin-top: clamp(16px, 2vh, 24px);
  margin-bottom: 0;
}

.hero--agent-create .hero-board--place {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(28px, 4vh, 44px);
  /* Was overflow:hidden — clipped fields, CTA, and autofill */
  overflow: visible;
  min-width: 0;
  width: 100%;
}

.hero--agent-create .waitlist-form-hero {
  opacity: 1;
  gap: 12px;
  margin-top: 0;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.hero--agent-create .waitlist-field > span {
  display: block;
  min-height: 1.2em;
}

.hero--agent-create .build-piece {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hero--agent-create .waitlist-submit.build-piece,
.hero--agent-create .hero-cta-row.build-piece,
.hero--agent-create .hero-vision-link.build-piece,
.hero--agent-create .hero-learn-link.build-piece {
  transform: none;
}

.hero--agent-create .hero-vision-link {
  min-width: 7.5em;
}

.hero--agent-create .hero-vision-link .vision-arrow {
  margin-left: 0.35em;
  opacity: 1;
}

.hero--agent-create .hero-stage {
  transform: none;
}

.hero--agent-create .desktop-window {
  opacity: 1;
  transform: none;
  transform-origin: center center;
}

/* Desktop only: locked artboard + uniform scale (JS sets --desktop-scale) */
@media (min-width: 801px) {
  .desktop-artboard {
    --desktop-design-w: 780px;
    --desktop-design-h: 560px;
    --desktop-scale: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--desktop-design-w) * var(--desktop-scale));
    height: calc(var(--desktop-design-h) * var(--desktop-scale));
    flex-shrink: 0;
  }

  .hero--agent-create .desktop-window,
  .hero--agent-create .desktop-window.is-in,
  .desktop-window {
    width: var(--desktop-design-w);
    height: var(--desktop-design-h);
    max-height: none;
    transform: scale(var(--desktop-scale));
    transform-origin: center center;
  }
}

@media (max-height: 860px) {
  .hero-copy { padding-top: 76px; padding-bottom: 52px; }
  .hero h1 { font-size: clamp(32px, 3.6vw, 48px); }
  .hero-intro { margin-top: 14px; font-size: 15px; }
  .hero-vision-link { bottom: 20px; }
  .hero-stage { padding-bottom: 42px; }
  /* Mock size is fluid via clamp/vw — do not hard-scale down here */
  .window-body { min-height: 0; }
  .canvas-heading { font-size: 40px; margin: 12px 0 14px; }
  .surface-chips { gap: 5px 6px; margin-bottom: 10px; }
  .surface-chip { padding: 5px 6px; grid-template-columns: 28px 1fr; }
  .surface-chip-copy strong { font-size: 9px; }
}

/* Footer */
footer {
  display: flex;
  justify-content: space-between;
  padding: 14px 8vw;
  background: #1d1d1f;
  color: #a1a1a6;
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Reveal */
.reveal { animation: rise 0.8s both; }
.reveal-delay-1 { animation-delay: 0.08s; }
.reveal-delay-2 { animation-delay: 0.16s; }
.reveal-delay-3 { animation-delay: 0.24s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Mobile */
@media (max-width: 800px) {
  /* Stop sideways scroll from full-bleed / absolute children on narrow viewports */
  html, body {
    overflow-x: clip;
    max-width: 100%;
  }

  main, .hero, .manifesto, .research-story, .inversion, .pricing, .final-cta, footer {
    max-width: 100%;
    min-width: 0;
  }

  /* Larger tap targets for text links (Apple HIG ~44px) */
  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 0 8px;
  }

  footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 0;
  }

  /* 16px+ inputs avoid iOS Safari zooming the page on focus */
  .waitlist-field input,
  .waitlist-field select,
  .waitlist-form-hero .waitlist-field input,
  .waitlist-form-hero .waitlist-field select {
    font-size: 16px;
    min-height: 48px;
  }

  .hero {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  /* Keep logo mark small, but clear the notch + enlarge the hit area */
  .hero-logo {
    /* Phone preview notch covers ~top 34px of the screen; keep mark below it */
    top: max(40px, calc(env(safe-area-inset-top, 0px) + 16px));
    left: max(20px, 5.5vw);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }

  .hero-logo img {
    height: 24px;
  }

  .hero-copy {
    height: auto;
    min-height: 0;
    /* Extra top clears absolute logo; side inset keeps fields off the phone edge */
    padding:
      max(108px, calc(env(safe-area-inset-top, 0px) + 84px))
      max(20px, 5.5vw)
      36px;
    justify-content: flex-start;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-vision-link,
  .hero-learn-link {
    position: static;
    margin-top: 24px;
  }

  .hero-stage {
    margin-left: 0;
    border-radius: 0;
  }

  /* Fluid hero title — scales down on narrow phones, caps near prior 46px */
  .hero h1 {
    font-size: clamp(34px, 9.5vw, 46px);
    line-height: 1.1;
  }

  .hero-intro {
    font-size: 16px;
    line-height: 1.55;
  }

  /* Even form rhythm: label↔input air, row gaps, no clipped 2-col fields */
  /* Triple class beats .hero--agent-create .waitlist-form-hero { gap: 12px } */
  .hero.hero--agent-create .waitlist-form-hero {
    gap: 14px;
  }

  .waitlist-form-hero .waitlist-field {
    gap: 12px;
    min-width: 0;
  }

  .waitlist-form-hero .waitlist-fields-group,
  .waitlist-form-hero .waitlist-fields-business {
    /* Override desktop 2-col so mobile single-column wins (specificity) */
    grid-template-columns: 1fr;
    gap: 14px;
    min-width: 0;
  }

  .hero-cta-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Mobile: full-width primary + centered secondary (option F) */
  .hero-cta-row .waitlist-submit {
    width: 100%;
  }

  .hero-vision-inline {
    justify-self: center;
  }

  .hero-stage {
    min-height: 420px;
    /* Extra blue air above the mock and below the caption */
    padding: 36px 4vw 72px;
  }

  .desktop-window {
    width: min(92%, 420px);
    height: min(56vh, 440px);
    max-height: 440px;
    transform: none;
    box-shadow: 0 18px 40px rgba(16, 38, 66, 0.22);
  }

  /* Mobile: unwrap artboard so existing fluid layout is unchanged */
  .desktop-artboard {
    display: contents;
  }

  .window-body { min-height: 0; }

  /* Denser mock UI so the window fits smaller screens */
  .desktop-window.rail-r9 .context-canvas {
    /* Wider square rail → more left inset; room for the smaller app shelf */
    padding: 8px 10px 32px 40px;
  }

  .desktop-window.rail-r9 .context-canvas > .window-sidebar {
    left: 5px;
    top: 8px;
    bottom: 8px;
    /* Match desktop proportion: soft square, not a thin pill */
    width: 28px;
    gap: 0;
    padding: 6px 0;
    border-radius: 8px;
  }

  .desktop-window.rail-r9 .sidebar-item {
    width: 18px;
    height: 18px;
    border-radius: 5px;
  }

  .desktop-window.rail-r9 .sidebar-item svg {
    width: 9px;
    height: 9px;
  }

  /* Primary stack: keep even rhythm on small rails */
  .desktop-window.rail-r9 .sidebar-primary,
  .desktop-window.rail-r9 .sidebar-account {
    gap: 8px;
  }

  .desktop-window.rail-r9 .sidebar-primary .sidebar-item svg {
    width: 11px;
    height: 11px;
  }

  .desktop-window.rail-r9 .sidebar-item--settings,
  .desktop-window.rail-r9 .sidebar-item--profile {
    width: 18px;
    height: 18px;
  }

  /* Profile stays round — don’t inherit the square icon radius */
  .desktop-window.rail-r9 .sidebar-item--profile {
    border-radius: 50%;
  }

  .desktop-window.rail-r9 .sidebar-item--settings svg {
    width: 12px;
    height: 12px;
  }

  /* Smaller app shelf — matches the compact 330×400 mobile desktop */
  .toolbelt__bar {
    width: min(100% - 28px, 200px);
    max-width: 200px;
    gap: 0;
    padding: 3px 4px 4px;
    border-radius: 8px 8px 0 0;
  }

  .toolbelt__item {
    max-width: 36px;
    min-height: 26px;
    gap: 1px;
    padding: 2px 1px 3px;
    border-radius: 5px;
  }

  .toolbelt__item img {
    width: 13px;
    height: 13px;
    border-radius: 3px;
  }

  .toolbelt__label {
    font-size: 6px;
  }

  .toolbelt__item:focus-visible::before {
    border-radius: 5px;
  }

  .canvas-heading {
    font-size: clamp(28px, 8vw, 36px);
    margin: 10px 0 12px;
  }

  .surface-chips {
    gap: 4px 5px;
    margin-bottom: 0;
  }

  .surface-chip {
    padding: 4px 5px;
    grid-template-columns: 22px 1fr;
    align-items: center;
    /* Lock chip height so longer streaming status doesn’t grow the card */
    min-height: 34px;
  }

  .surface-chip-icon {
    width: 20px;
    height: 20px;
  }

  .surface-chip-icon img {
    width: 16px;
    height: 16px;
  }

  .surface-chip-copy {
    gap: 1px;
  }

  .surface-chip-copy strong {
    font-size: 7.5px;
  }

  /* Streaming status line — small, single-line, ellipsis (no vertical expand) */
  .surface-chip-copy span,
  .surface-chip-copy [data-status-copy] {
    font-size: 6.5px;
    line-height: 1.15;
    height: 1.15em;
    max-height: 1.15em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .toast-slot {
    /*
      Fixed width from the longest toast detail
      (“Slide 4 of 12 pulled from plan + forecast” / similar) + side margin.
      Every toast uses this same width so the card doesn’t grow/shrink.
    */
    width: 168px;
    max-width: calc(100% - 12px);
    top: 8px;
    right: 6px;
    bottom: auto;
    min-height: 0;
  }

  .toast-d7 {
    --toast-radius: 8px;
    align-items: flex-start;
    padding: 4px 8px;
    font-size: 7px;
    line-height: 1.2;
    gap: 5px;
  }

  .toast-d7 .live-pulse {
    width: 3px;
    height: 3px;
    margin-top: 2px;
    box-shadow: 0 0 0 1.5px rgba(61, 154, 106, 0.28);
  }

  .toast-d7 strong {
    font-size: 7.5px;
  }

  .toast-d7 .toast-detail {
    font-size: 6.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .toast-d7 .toast-timer {
    font-size: 6.5px;
    padding: 0 4px;
  }

  .toast-d7 .toast-title-row {
    gap: 4px;
    flex-wrap: nowrap;
  }

  .stage-caption {
    font-size: 11px;
    line-height: 1.45;
    /* Lift caption so bottom blue band matches the new stage padding */
    bottom: 22px;
  }

  .hero--agent-create .hero-copy {
    /* Simple stack — no 50/50 board split that leaves empty air under the title */
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    gap: 0;
  }

  /* No typewriter on mobile → don’t reserve empty multi-line slots */
  .hero--agent-create .hero-board--write {
    padding-bottom: 0;
    justify-content: flex-start;
  }

  .hero--agent-create .hero-board--write #hero-title {
    min-height: 0;
  }

  .hero--agent-create .hero-board--write .hero-intro {
    margin-top: 16px;
    min-height: 0;
  }

  .hero--agent-create .hero-board--place {
    overflow: visible;
    /* Match intro→form air to form row gaps (was a big empty band) */
    padding-top: 16px;
  }

  .hero--agent-create .hero-stage {
    transform: none;
    opacity: 1;
  }

  .hero--agent-create .hero-stage.is-in {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .hero--agent-create .desktop-window {
    transform: none;
  }

  .hero--agent-create .desktop-window.is-in {
    transform: none;
  }

  .hero--agent-create .build-piece,
  .hero--agent-create .hero-logo,
  .hero--agent-create .hero-vision-link,
  .hero--agent-create .stage-caption {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .hero--agent-create .hero-vision-link .vision-arrow {
    opacity: 1;
  }

  .hero--agent-create .build-piece.is-drawing [data-type-label],
  .hero--agent-create .build-piece.is-drawing [data-vision-text] {
    visibility: visible;
  }

  .manifesto {
    padding: 72px 8vw 80px;
  }

  .inversion,
  .pricing {
    padding-left: 8vw;
    padding-right: 8vw;
  }

  .manifesto-quote h2 {
    font-size: clamp(28px, 8vw, 40px);
  }

  #diagnosis-title {
    /* No coda typewriter on mobile — don’t reserve empty lines */
    min-height: 0;
  }

  .manifesto-band {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 40px;
  }

  /* Chapter mark: top/bottom rules instead of short side segments on phones */
  .manifesto-band::before,
  .manifesto-band::after {
    display: none;
  }

  .manifesto-band-inner {
    min-width: 0;
    max-width: 100%;
    padding: 22px 0 20px;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
  }

  .manifesto-band-inner .research-intro-kicker {
    margin-bottom: 18px;
  }

  .manifesto-band-names {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .manifesto-band-why {
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: 22ch;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pricing {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .pricing h2 {
    font-size: clamp(28px, 8.6vw, 48px);
    margin-bottom: 28px;
  }

  .price-band {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 20px;
  }

  .price-band__cta {
    justify-self: start;
  }

  .price-band .button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .research-layout {
    display: flex;
    flex-direction: column;
    /* Stretch children — without this, align-items:start shrinks the body to the 24px gutter */
    align-items: stretch;
    gap: 0;
  }

  .research-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    --tl-gutter: 28px;
    --tl-dot: 9px;
    --tl-entry-pad: 28px;
  }

  .research-entry-content {
    gap: 20px;
    width: 100%;
    max-width: 100%;
  }

  .research-layout .research-entry-content p {
    font-size: 15px;
    max-width: 100%;
  }

  /* Large sticky portrait rail is desktop-only — portraits sit beside names instead */
  .research-rail {
    display: none;
  }

  .research-layout .research-entry {
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    width: 100%;
  }

  .research-layout .research-heading h3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-size: clamp(28px, 7.5vw, 38px);
  }

  .research-portrait-inline {
    display: block;
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    margin-left: auto;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 12px;
    background: #111;
    filter: grayscale(1) contrast(1.12);
  }

  .research-person-copy {
    flex: 1;
    min-width: 0;
  }

  .research-entry--now .research-heading h3 .now-logo {
    width: clamp(160px, 65vw, 240px);
  }

  .research-layout .research-entry--now .research-entry-content p.now-line,
  .research-layout .research-entry--now .research-entry-content p.now-bridge {
    font-size: clamp(16px, 4.4vw, 22px);
    white-space: normal;
  }

  .research-conclusion {
    margin-top: 48px;
    margin-bottom: 36px;
    padding: 22px 18px;
    font-size: clamp(18px, 5vw, 22px);
  }

  .feature-grid,
  .price-bands {
    max-width: none;
  }

  /* Phones: stack the three feature cards — 3-col stays cramped under ~800px */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Early-access bands: stack copy + CTA on one column */
  .price-band {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 24px;
  }

  .inversion {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .inversion h2 {
    text-align: left;
    /*
      Size tracks the content column so the fixed mobile breaks
      (Intelligence no / longer lives inside / the model. It lives in / the environment.)
      never wrap again on narrow phones or grow past the column on large ones.
      Content ≈ 100vw − 16vw side padding → ~8.6vw keeps the longest line inside.
    */
    font-size: clamp(28px, 8.6vw, 48px);
    /* Slightly above 1 so descenders/accents don’t collide between forced lines */
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin: 36px 0 22px;
    max-width: none;
    width: 100%;
    /* Forced <br class="br-mobile"> already set the stack — don’t rebalance */
    text-wrap: pretty;
  }

  /* Desktop line breaks off; mobile breaks on (exact 4-line phone stack) */
  .inversion h2 br.br-desktop {
    display: none;
  }

  .inversion h2 br.br-mobile {
    display: inline;
  }

  .inversion-lede {
    text-align: left;
    margin-bottom: 40px;
  }

  .feature-card {
    min-height: 0;
    padding: 28px 24px;
  }

  /* Mobile: never hold cards invisible waiting for scroll-in */
  .feature-card[data-motion="pending"] {
    opacity: 1;
    transform: none;
  }

  .feature-card h3,
  .feature-card > p:not(.feature-example) {
    max-width: none;
  }

  /* Absolute corner icon — keep title clear of it once max-width is lifted */
  .feature-card h3 {
    padding-right: 48px;
  }

  .feature-example {
    min-height: 0;
  }

  .waitlist-fields-group { grid-template-columns: 1fr; }
  .waitlist-form-hero .waitlist-fields-business { grid-template-columns: 1fr; }

  .waitlist-type-field {
    max-width: none;
    width: 100%;
  }

  .waitlist-form-hero .waitlist-type-field {
    max-width: none;
    width: 100%;
  }

  .waitlist-form .waitlist-submit {
    width: 100%;
    min-height: 48px;
    justify-self: stretch;
  }

  .final-cta { padding: 56px 8vw 64px; }

  .final-cta h2 {
    font-size: clamp(32px, 9vw, 48px);
  }

  /* Keep the mark pinned to the section end; a bit less crop on small screens */
  .final-cta-mark {
    width: 92%;
    width: 92cqi;
    transform: translateX(10%);
  }

  footer {
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 8vw;
  }

  /*
    Mobile host scale — Word + Gmail.
    Desktop mock height stays at live values above.
    Shrink chrome + type directly (do NOT enlarge-then-scale — app-stage
    contain:paint clips that and it looks identical to live).
    Skip when preview asks for the unscaled “before” frame.
  */
  /*
    Lower every host slightly (same footprint) so toast cards sit
    more above the window instead of covering the titlebar.
  */
  .desktop-window.rail-r9 .app-window.is-open {
    top: 28px;
    bottom: 30px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .app-window[data-app="docs"].is-open,
  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .app-window[data-app="mail"].is-open {
    top: 32px;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(calc(100% - 20px), 92%);
    height: calc(100% - 62px);
    transform: translateX(-50%);
  }

  /* Excel / Chrome / Slides: nudge right to clear the system rail */
  .desktop-window.rail-r9 .app-window[data-app="sheets"].is-open,
  .desktop-window.rail-r9 .app-window[data-app="chrome"].is-open,
  .desktop-window.rail-r9 .app-window[data-app="deck"].is-open {
    left: 32px;
  }

  /*
    Excel: slightly denser formula bar + grid only.
    Do NOT scale .host-ribbon__shot (tabs / Home ribbon images).
  */
  .desktop-window.rail-r9 .host-excel .excel-fxrow {
    zoom: 0.82;
    padding: 0 4px 3px;
    margin-top: 3px;
    line-height: normal;
  }

  .desktop-window.rail-r9 .host-excel .host-workspace--excel {
    zoom: 0.82;
  }

  /*
    Chrome: slightly smaller tabs + URL bar on mobile only.
    Page content below is unchanged.
    Don’t clamp tab max-width — that crushed the active Gartner tab.
  */
  .desktop-window.rail-r9 .host-chrome .chrome-tabstrip {
    min-height: 28px;
    padding: 4px 6px 0;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-tab {
    height: 24px;
    gap: 3px;
    padding: 0 6px 0 7px;
    border-radius: 8px 8px 0 0;
    font-size: 7.5px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-tab.is-on {
    flex: 1.6 1 0;
    min-width: 72px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-fav {
    width: 10px;
    height: 10px;
    font-size: 6px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-tab__close {
    width: 11px;
    height: 11px;
    font-size: 9px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-tab-new {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    font-size: 12px;
    margin-bottom: 2px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-toolbar {
    gap: 4px;
    padding: 4px 6px 4px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-nav__btn {
    width: 18px;
    height: 18px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-nav__btn svg {
    width: 10px;
    height: 10px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-omnibox {
    height: 22px;
    gap: 4px;
    padding: 0 8px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-omnibox__url {
    font-size: 8px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-omnibox__lock svg {
    width: 8px;
    height: 8px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-omnibox__star {
    font-size: 9px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-profile {
    width: 16px;
    height: 16px;
    font-size: 7px;
  }

  .desktop-window.rail-r9 .host-chrome .chrome-ext {
    width: 11px;
    height: 11px;
  }

  /* Gartner shot: pin crop to the left so headline/logo aren’t clipped */
  .desktop-window.rail-r9 .host-chrome .site-shot--gartner img {
    object-position: top left;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-titlebar {
    padding: 2px 6px;
    font-size: 7px;
    gap: 4px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-titlebar__icon {
    width: 10px;
    height: 10px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-titlebar__badge {
    font-size: 6px;
    padding: 0 4px;
  }

  /* Keep the full Word ribbon visible — scale, don’t crop */
  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-ribbon--word-shot {
    max-height: none;
    overflow: hidden;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-ribbon--word-shot .host-ribbon__shot {
    width: 100%;
    max-height: none;
    height: auto;
    object-fit: fill;
    object-position: left top;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-ribbon__tabs--word {
    font-size: 5.5px;
    padding: 0 4px;
    min-height: 11px;
    gap: 4px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-workspace--word {
    padding-top: 6px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-page {
    width: 62%;
    padding: 6px 10px 5px;
    font: 400 4.75px/1.4 "Calibri", var(--sans);
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-h {
    font-size: 6.5px;
    margin-bottom: 4px;
    line-height: 1.15;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-p {
    margin-bottom: 3px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-p--meta {
    font-size: 4.5px;
    margin-bottom: 5px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-typed-block {
    font: 400 4.75px/1.4 "Calibri", var(--sans);
    min-height: 2.5em;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-header {
    padding: 3px 5px 3px 7px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-header__title {
    font-size: 7.5px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-ico {
    width: 9px;
    height: 9px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-ico--expand {
    font-size: 8px !important;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-row {
    padding: 3px 7px;
    gap: 3px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-row__label,
  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-row__side {
    font-size: 7px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-chip {
    gap: 2px;
    padding: 1px 3px 1px 1px;
    font-size: 6px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-chip__avatar {
    width: 10px;
    height: 10px;
    font-size: 6px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-chip__x {
    font-size: 7px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-subj {
    font-size: 7px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-attach-live {
    gap: 2px;
    padding: 2px 7px 0;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-file {
    gap: 2px;
    font-size: 6px;
    padding: 2px 4px 2px 3px;
    border-radius: 4px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-file__ico {
    width: 8px;
    height: 8px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-body-live {
    padding: 4px 7px 2px;
    font: 400 6.5px/1.4 "Google Sans", Arial, sans-serif;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-fmt {
    transform: scale(0.48);
    transform-origin: left bottom;
    margin: 0 4px 0;
    padding: 1px 4px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-send {
    padding: 0 4px 2px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-send__left {
    transform: scale(0.48);
    transform-origin: left center;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-gmail .mso {
    font-size: 11px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gs-btn-group {
    height: 24px;
  }

  html:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gs-send {
    font-size: 10px;
    padding: 0 10px 0 12px;
  }
}

/*
  Preview harness: lock mocked desktop to live phone pixels.
  Measured on workincredible.com @ 390×844:
    .desktop-window → 330.09 × 400 (width min(92% of stage), height capped 400).
  Do NOT use vh here — iframe vh ≠ phone vh and drifts the size.
*/
html.preview-mobile-hosts .hero--agent-create .desktop-window.rail-r9,
html.preview-mobile-hosts .hero--agent-create .desktop-window.rail-r9.is-in {
  width: 330px;
  height: 400px;
  max-height: 400px;
  transform: none;
}

html.preview-mobile-hosts .desktop-artboard {
  display: contents;
  width: auto;
  height: auto;
}

html.preview-mobile-hosts .desktop-window.rail-r9 .context-canvas {
  padding: 8px 10px 32px 40px;
}

html.preview-mobile-hosts .hero-copy,
html.preview-mobile-hosts .hero-logo,
html.preview-mobile-hosts .hero-caption,
html.preview-mobile-hosts .stage-caption,
html.preview-mobile-hosts main > :not(.hero),
html.preview-mobile-hosts footer {
  display: none !important;
}

html.preview-mobile-hosts .hero {
  min-height: 0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

html.preview-mobile-hosts .hero-stage {
  min-height: 0;
  padding: 8px 4vw 16px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .app-window[data-app="docs"].is-open,
html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .app-window[data-app="mail"].is-open {
  top: 32px;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(calc(100% - 20px), 92%);
  height: calc(100% - 62px);
  transform: translateX(-50%);
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-titlebar {
  padding: 2px 6px;
  font-size: 7px;
  gap: 4px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-titlebar__icon {
  width: 10px;
  height: 10px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-titlebar__badge {
  font-size: 6px;
  padding: 0 4px;
}

/* Keep the full Word ribbon visible — scale, don’t crop */
html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-ribbon--word-shot {
  max-height: none;
  overflow: hidden;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-ribbon--word-shot .host-ribbon__shot {
  width: 100%;
  max-height: none;
  height: auto;
  object-fit: fill;
  object-position: left top;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-ribbon__tabs--word {
  font-size: 5.5px;
  padding: 0 4px;
  min-height: 11px;
  gap: 4px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-workspace--word {
  padding-top: 6px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-page {
  width: 62%;
  padding: 6px 10px 5px;
  font: 400 4.75px/1.4 "Calibri", var(--sans);
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-h {
  font-size: 6.5px;
  margin-bottom: 4px;
  line-height: 1.15;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-p {
  margin-bottom: 3px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-p--meta {
  font-size: 4.5px;
  margin-bottom: 5px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .word-typed-block {
  font: 400 4.75px/1.4 "Calibri", var(--sans);
  min-height: 2.5em;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-header {
  padding: 3px 5px 3px 7px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-header__title {
  font-size: 7.5px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-ico {
  width: 9px;
  height: 9px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-ico--expand {
  font-size: 8px !important;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-row {
  padding: 3px 7px;
  gap: 3px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-row__label,
html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-row__side {
  font-size: 7px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-chip {
  gap: 2px;
  padding: 1px 3px 1px 1px;
  font-size: 6px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-chip__avatar {
  width: 10px;
  height: 10px;
  font-size: 6px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-chip__x {
  font-size: 7px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gc-subj {
  font-size: 7px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-attach-live {
  gap: 2px;
  padding: 2px 7px 0;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-file {
  gap: 2px;
  font-size: 6px;
  padding: 2px 4px 2px 3px;
  border-radius: 4px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-file__ico {
  width: 8px;
  height: 8px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-body-live {
  padding: 4px 7px 2px;
  font: 400 6.5px/1.4 "Google Sans", Arial, sans-serif;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-fmt {
  transform: scale(0.48);
  transform-origin: left bottom;
  margin: 0 4px 0;
  padding: 1px 4px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-send {
  padding: 0 4px 2px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gmail-send__left {
  transform: scale(0.48);
  transform-origin: left center;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .host-gmail .mso {
  font-size: 11px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gs-btn-group {
  height: 24px;
}

html.preview-mobile-hosts:not(.preview-mobile-hosts-unscaled) .desktop-window.rail-r9 .gs-send {
  font-size: 10px;
  padding: 0 10px 0 12px;
}

/* Extra-narrow phones: slightly smaller type and shorter stage */
@media (max-width: 480px) {
  .hero h1 { font-size: 32px; }
  .hero-intro { font-size: 15px; }
  .hero-stage { min-height: 360px; }
  .desktop-window {
    height: min(52vh, 400px);
    max-height: 400px;
  }
  .window-body { min-height: 0; }
  .research-rail { display: none; }
  .desktop-window.rail-r9 .context-canvas {
    padding-left: 32px;
    padding-bottom: 36px;
  }
  .toast-slot {
    width: 168px;
    max-width: calc(100% - 12px);
  }
}

/* Mobile hero entrance: respect reduced motion (no slide/fade) */
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .hero--agent-create .hero-stage,
  .hero--agent-create .hero-stage.is-in,
  .hero--agent-create .desktop-window,
  .hero--agent-create .desktop-window.is-in {
    transition: none;
    transform: none;
    opacity: 1;
  }
}


.desktop-window.rail-r9 .context-canvas > .window-sidebar > * {
  position: relative;
  z-index: 1;
}