/* ============================================================================
   Friday - landing page styles  (single stylesheet, no build step)
   --------------------------------------------------------------------------
   Rules apply in source order: later rules intentionally override earlier
   ones, and the ~1.9k !important keep section-scoped overrides winning. The
   cascade order is LOAD-BEARING - do not reorder blocks to "tidy" them; fix
   issues at the owning rule instead.

   STRUCTURE
     1. Design tokens ......... :root custom properties (color, type, hero)
     2. Base & reset .......... box-sizing, html/body, :focus-visible, type
     3. Components & sections . header, hero, workflow, comparison, security,
                                context studio, developer, midpage CTA,
                                fridaybot, FAQ, beta, footer. Section wrappers
                                appear first (~L120-L5100); their internals,
                                responsive @media, and refinements continue
                                below in cascade order.
     4. Late mobile overrides . PPTX studio + context studio single-column
                                fixes, kept LAST so they win the cascade.
   ============================================================================ */

/* === 1. DESIGN TOKENS ====================================================== */

:root {
  color-scheme: dark;
  --accent: #e88a00;
  --accent-hover: #d07a00;
  --black: #050505;
  --text: #fff8f0;
  --muted: rgba(255, 248, 240, 0.68);
  --line: rgba(255, 248, 240, 0.14);
  --cream: #fffbf5;
  --font: "Quicksand", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Satoshi", "General Sans", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-kicker: "General Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-fridaybot: "Array", "Khand", "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-preview-kicker: "Array", "Khand", "General Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-app-ui: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --logo-gradient: linear-gradient(135deg, #d18a24 18%, #e4c34a 92%);
  --fridaybot-gradient: linear-gradient(135deg, #fffbd2 0%, #ffe984 34%, #fff0a8 70%, #fff0a8 100%);
  --hero-bg-ivory: #fff8de;
  --hero-bg-butter: #fff0a8;
  --hero-bg-gold: #ffd45a;
  --hero-bg-amber: #ffc13a;
  --hero-bg-orange: #f58b17;
  --hero-text-strong: #351205;
  --hero-text-soft: rgba(65, 25, 6, 0.78);
  --hero-accent: #e88a00;
  --hero-accent-hover: #ffb51f;
  --hero-glass-border: rgba(255, 255, 255, 0.42);
  --hero-noise-opacity: 0.22;
}

/* === 2. BASE & RESET ====================================================== */

* {
  box-sizing: border-box;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.fridaybot-section :focus-visible {
  outline-color: var(--black);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--black);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  cursor: url("./assets/excel-cross-cursor.svg") 10 10, crosshair;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

:is(
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  blockquote,
  figcaption,
  dd,
  dt,
  th,
  td,
  caption,
  pre,
  em,
  strong,
  small,
  time,
  .chart-title-real,
  .real-section-head,
  .studio-detail-title
) {
  cursor: text;
}

button,
summary,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  cursor: pointer;
}

textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input:not([type]) {
  cursor: text;
}

/* === 3. COMPONENTS & SECTIONS ============================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
  grid-template-areas: "brand nav actions";
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 0 42px;
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  color: var(--hero-text-strong);
  font-size: 18px;
  font-weight: 560;
  letter-spacing: 0;
}

.site-header > nav {
  grid-area: nav;
}

.mobile-nav {
  display: none;
  position: relative;
}

.mobile-nav summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 0 -8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease;
}

.mobile-nav summary:hover,
.mobile-nav summary:focus-visible {
  background: rgba(53, 18, 5, 0.06);
}

.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-nav-icon {
  display: block;
  width: 18px;
  height: 14px;
  background:
    linear-gradient(var(--hero-text-strong), var(--hero-text-strong)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--hero-text-strong), var(--hero-text-strong)) 0 50% / 100% 2px no-repeat,
    linear-gradient(var(--hero-text-strong), var(--hero-text-strong)) 0 100% / 100% 2px no-repeat;
  transition: transform 180ms ease, opacity 180ms ease;
}

.mobile-nav[open] .mobile-nav-icon {
  background: transparent;
  position: relative;
}

.mobile-nav[open] .mobile-nav-icon::before,
.mobile-nav[open] .mobile-nav-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--hero-text-strong);
}

.mobile-nav[open] .mobile-nav-icon::before {
  transform: rotate(45deg);
}

.mobile-nav[open] .mobile-nav-icon::after {
  transform: rotate(-45deg);
}

.site-header.is-elevated {
  background: var(--surface-butter);
  border-bottom-color: var(--surface-butter-border);
  box-shadow: var(--surface-butter-shadow);
  backdrop-filter: none;
}

.site-header.is-elevated .brand {
  font-weight: 720;
}

.site-header.is-elevated nav {
  font-weight: 520;
}

.brand img {
  width: 30px;
  height: 30px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: rgba(65, 25, 6, 0.68);
  font-size: 14px;
  font-weight: 430;
}

nav a,
.hero-cta {
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

nav a {
  white-space: nowrap;
}

nav a:hover {
  color: var(--hero-text-strong);
}

h1,
h2,
h3,
.brand,
.hero-cta {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.01em;
}

h1 {
  line-height: 1.08;
}

h2,
.developer-copy h2,
.security-copy h2,
.context-studio-copy h2,
.comparison-heading h2,
.platform-intro h2,
.fridaybot-copy h2,
.beta-copy h2 {
  line-height: 1.1;
}

h3,
.workflow-copy h3 {
  line-height: 1.16;
}

.hero-copy,
.developer-copy p,
.workflow-copy p,
.security-copy p,
.context-studio-copy p,
.comparison-heading p,
.platform-intro p,
.fridaybot-copy p,
.beta-copy p,
.faq-list details p {
  line-height: 1.58;
}

.hero-kicker,
.section-eyebrow,
.agent-track-head span,
.analytics-evidence span,
.run-ask span,
.run-step span,
.run-panel-head strong,
.security-detail span,
.comparison-heading span,
.comparison-lane-head span,
.sprawl-item span,
.workspace-step span,
.platform-pill,
.harness-window header span,
.harness-track-head span,
.support-card span {
  font-family: var(--font-kicker);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: none;
}

.fridaybot-word,
.hero-kicker a.fridaybot-word,
h2 .fridaybot-word,
summary .fridaybot-word {
  display: inline-block;
  font-family: var(--font-fridaybot);
  font-weight: 520;
  letter-spacing: 0;
  vertical-align: -0.02em;
  background-image: var(--fridaybot-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}

.harness-window header span,
.harness-track-head span,
.harness-token span {
  font-family: var(--font-preview-kicker);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.d-core,
.d-stem,
.d-word,
.section-eyebrow,
.agent-track-head span,
.analytics-evidence span,
.run-ask span,
.run-step span,
.run-panel-head strong,
.security-detail span,
.comparison-heading span,
.comparison-lane-head span,
.sprawl-item span,
.workspace-step span,
.platform-intro h2 span,
.platform-pill,
.harness-window header span,
.harness-track-head span,
.support-card span,
.faq-list details[open] summary {
  background-image: var(--logo-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.friday-product-frame,
.friday-product-frame *,
.preview-app-real,
.preview-app-real * {
  font-family: var(--font-app-ui);
}

.friday-product-frame .section-eyebrow,
.friday-product-frame .agent-track-head span,
.friday-product-frame .analytics-evidence span,
.friday-product-frame .run-ask span,
.friday-product-frame .run-step span,
.friday-product-frame .run-panel-head strong,
.friday-product-frame .security-detail span,
.friday-product-frame .comparison-heading span,
.friday-product-frame .comparison-lane-head span,
.friday-product-frame .sprawl-item span,
.friday-product-frame .workspace-step span,
.friday-product-frame .platform-pill,
.friday-product-frame .harness-window header span,
.friday-product-frame .harness-track-head span,
.friday-product-frame .support-card span {
  background-image: none;
  color: inherit;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.nav-actions {
  grid-area: actions;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}

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

.mobile-nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 4px;
  min-width: min(280px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgba(53, 18, 5, 0.12);
  border-radius: 16px;
  background: rgba(255, 248, 222, 0.98);
  box-shadow: 0 18px 48px rgba(53, 18, 5, 0.16);
  backdrop-filter: blur(18px);
}

.mobile-nav-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--hero-text-strong);
  font-size: 14px;
  font-weight: 520;
  transition: background 160ms ease, color 160ms ease;
}

.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
  background: rgba(232, 138, 0, 0.12);
  color: var(--hero-text-strong);
}

.hero-cta:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(135deg, #fffbd3 0%, #ffe88e 46%, #ffd16a 100%) padding-box,
    conic-gradient(from 90deg, #d88300, #ffeb8a, #fffbd3, #ffc95a, #d88300) border-box;
}

.nav-link-secondary,
.beta-link-secondary {
  flex-shrink: 0;
  color: var(--hero-text-soft);
  font-size: 14px;
  font-weight: 520;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(255, 247, 224, 0.32);
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.nav-link-secondary:hover {
  color: var(--hero-text-strong);
  text-decoration-color: rgba(117, 72, 25, 0.48);
}

.beta-link-secondary {
  color: #6d6256;
  text-decoration-color: rgba(23, 20, 15, 0.22);
}

.beta-link-secondary:hover {
  color: #17140f;
  text-decoration-color: rgba(23, 20, 15, 0.4);
}

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cta-note {
  margin: 0;
  color: var(--hero-text-soft);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.4;
  text-align: center;
}

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 118px 24px 86px;
  text-align: center;
  isolation: isolate;
  background: url("./assets/friday-sheet-surface.svg") left top / 960px 416px repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
  mix-blend-mode: normal;
}

.hero-wallpaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: normal;
}

.hero-wallpaper canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.14;
}

.hero-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  color: var(--hero-text-soft);
  text-shadow: none;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 760;
}

.hero-kicker a.fridaybot-word {
  background-image: linear-gradient(135deg, #c2640c 0%, #9a4400 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
  font-weight: 620;
  text-shadow: none;
  text-decoration: none;
  opacity: 1;
  transition: color 160ms ease;
}

.hero-kicker a.fridaybot-word:hover {
  background-image: linear-gradient(135deg, #e0780c 0%, #b85400 100%);
}

h1 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  max-width: 1180px;
  color: var(--hero-text-strong);
  text-shadow: none;
  font-size: clamp(58px, 8.5vw, 118px);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.hero-headline-display {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.finally-line {
  display: block;
  font-size: 0.5em;
  line-height: 1.02;
}

.ide-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
}

.for-line {
  display: block;
  margin-top: 0.08em;
  font-size: 0.72em;
}

.d-expander {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 1em;
  white-space: nowrap;
}

.d-core,
.d-stem,
.d-word {
  position: relative;
  z-index: 1;
  background-image: linear-gradient(135deg, #5a2a08 0%, #401a06 55%, #351205 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}

.d-stem {
  display: inline-block;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: baseline;
}

.d-word {
  display: inline-block;
  width: 0;
  overflow: hidden;
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
  transition: width 70ms linear;
}

.d-word.is-typing::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.04em;
  height: 0.82em;
  background: rgba(53, 18, 5, 0.85);
  border-radius: 999px;
  transform: translateY(-50%);
  animation: cursorBlink 0.95s steps(1, end) infinite;
}

.hero-copy {
  max-width: 760px;
  margin: 30px auto 0;
  color: var(--hero-text-soft);
  text-shadow: none;
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 350;
  line-height: 1.42;
  letter-spacing: 0;
}

.hero-beta-cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(135deg, #fff8c2 0%, #ffe27a 46%, #ffc95a 100%) padding-box,
    conic-gradient(from 180deg, #d88300, #ffeb8a, #fffbd3, #ffc95a, #d88300) border-box;
  color: #351205;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  box-shadow:
    0 14px 34px rgba(155, 73, 0, 0.18),
    0 0 28px rgba(255, 191, 34, 0.14);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1180px, 100%);
}

.hero-ambient {
  pointer-events: none;
}

.hero-ambient {
  display: none;
}

.hero-ambient-wash {
  position: absolute;
  inset: 0;
}

.hero-ambient-wash {
  background:
    linear-gradient(90deg, rgba(255, 235, 179, 0.26), transparent 26%, transparent 76%, rgba(128, 48, 5, 0.12)),
    linear-gradient(180deg, rgba(255, 238, 191, 0.2), transparent 46%, rgba(110, 42, 4, 0.1));
  opacity: 0.5;
}

.developer-section {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 118px 24px 126px;
  background:
    linear-gradient(180deg, rgba(178, 63, 0, 0.16), rgba(69, 18, 0, 0.22)),
    #e88a00;
  color: #331205;
}

.developer-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("./assets/developer-stripe-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 1;
}

.developer-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(94, 25, 0, 0.26), rgba(255, 192, 50, 0.12) 48%, rgba(79, 19, 0, 0.32)),
    radial-gradient(circle at 18% 30%, rgba(255, 243, 170, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(255, 203, 63, 0.1), rgba(64, 16, 0, 0.2));
}

.developer-section .section-eyebrow,
.developer-section .agent-track-head span,
.developer-section .analytics-evidence span,
.developer-section .workspace-question-card span {
  background-image: none;
  color: #6f2500;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.developer-section .section-eyebrow,
.developer-section .agent-track-head span,
.developer-section .analytics-evidence span,
.developer-section .workspace-question-card span {
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 15px;
}

.developer-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 0.96fr) minmax(440px, 1.04fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.section-eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.developer-copy h2 {
  margin: 0;
  color: #2f0e00;
  font-size: clamp(44px, 6.7vw, 92px);
  font-weight: 560;
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-shadow: 0 12px 38px rgba(255, 220, 92, 0.16);
}

.developer-copy p {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(47, 14, 0, 0.82);
  font-size: 18px;
  line-height: 1.55;
}

.developer-proof {
  position: relative;
  display: grid;
  gap: 12px;
}

.agent-track {
  overflow: hidden;
  border: 1px solid rgba(255, 244, 190, 0.34);
  border-radius: 18px;
  background: rgba(255, 245, 200, 0.22);
  box-shadow: 0 18px 52px rgba(93, 34, 3, 0.18);
  backdrop-filter: blur(20px) saturate(1.18);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.agent-track:hover:not(.code-track) {
  border-color: rgba(255, 249, 214, 0.62);
  background: rgba(255, 238, 164, 0.32);
  transform: translateY(-2px);
}

.agent-track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(92, 30, 3, 0.12);
}

.agent-track-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agent-track-head strong {
  color: rgba(47, 14, 0, 0.88);
  font-size: 14px;
}

.code-track {
  opacity: 0.86;
}

.code-track .agent-workline {
  padding-bottom: 18px;
}

.agent-workline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 12px;
}

.agent-workline span {
  flex: 0 0 auto;
  color: rgba(47, 14, 0, 0.78);
  font-size: 13px;
  font-weight: 720;
  white-space: nowrap;
}

.agent-workline i {
  flex: 1 1 32px;
  min-width: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 247, 196, 0.18), rgba(111, 37, 0, 0.36));
}

.analytics-track {
  border-color: rgba(255, 248, 210, 0.5);
  background:
    linear-gradient(135deg, rgba(255, 247, 193, 0.34), rgba(255, 189, 41, 0.26) 42%),
    rgba(255, 235, 157, 0.2);
}

.analytics-workspace-viz {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.workspace-question-card {
  padding: 16px;
  border: 1px solid rgba(255, 244, 190, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 251, 222, 0.34), rgba(255, 194, 51, 0.18) 56%),
    rgba(255, 243, 190, 0.2);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.workspace-question-card:hover,
.analytics-evidence:hover {
  border-color: rgba(255, 249, 214, 0.58);
  background: rgba(255, 236, 157, 0.34);
  transform: translateY(-1px);
}

.workspace-question-card span,
.analytics-evidence span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workspace-question-card strong,
.analytics-evidence strong,
.analytics-evidence code {
  display: block;
  overflow-wrap: anywhere;
  color: #2f0e00;
  font-size: 15px;
  line-height: 1.32;
}

.analytics-workline {
  padding: 8px 0 4px;
}

.analytics-workline span {
  color: #351205;
}

.analytics-workline i {
  background: linear-gradient(90deg, rgba(232, 138, 0, 0.18), rgba(232, 138, 0, 0.62));
}

.analytics-evidence-row {
  display: grid;
  grid-template-columns: 0.92fr 1.18fr 0.92fr;
  gap: 10px;
}

.analytics-evidence {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 244, 190, 0.32);
  background: rgba(255, 242, 184, 0.22);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.generated-code-evidence {
  border-color: rgba(255, 248, 210, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 248, 210, 0.34), rgba(255, 190, 39, 0.24)),
    rgba(255, 234, 154, 0.22);
}

.analytics-evidence code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.workspace-trace-note {
  color: rgba(47, 14, 0, 0.76);
  font-size: 12px;
}

.workspace-trace-note p {
  margin: 0;
}

.workflow-section {
  position: relative;
  --workflow-run-stack: 188px;
  --workflow-row-chrome: 40px;
  --workflow-frame-height: clamp(340px, calc(100svh - var(--workflow-run-stack) - var(--workflow-row-chrome)), 480px);
  width: 100%;
  margin: 0 auto 0;
  padding: 24px 0 64px;
  overflow: visible;
  border-top: 1px solid rgba(232, 138, 0, 0.2);
  border-bottom: 1px solid rgba(232, 138, 0, 0.18);
  background:
    radial-gradient(circle at 18% 8%, rgba(232, 138, 0, 0.36), transparent 26%),
    radial-gradient(circle at 72% 18%, rgba(255, 181, 64, 0.2), transparent 30%),
    radial-gradient(circle at 26% 74%, rgba(125, 47, 0, 0.54), transparent 34%),
    radial-gradient(circle at 84% 86%, rgba(255, 248, 240, 0.08), transparent 22%),
    linear-gradient(180deg, #050505 0%, #180c05 44%, #0a0705 100%);
  background-size: cover;
  background-position: center;
  color: #17140f;
  isolation: isolate;
}

.workflow-wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.46;
  pointer-events: none;
  mix-blend-mode: screen;
}

.workflow-wallpaper canvas {
  display: block;
  opacity: 0.72;
}

.workflow-section::before,
.workflow-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.workflow-section::before {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(255, 248, 240, 0.1), transparent 34%),
    radial-gradient(ellipse at 32% 70%, rgba(232, 138, 0, 0.22), transparent 28%),
    repeating-radial-gradient(circle at center, rgba(255, 248, 240, 0.06) 0 1px, transparent 1px 5px);
  opacity: 0.72;
}

.workflow-section::after {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.52), transparent 28%, transparent 72%, rgba(5, 5, 5, 0.48)),
    linear-gradient(180deg, rgba(255, 248, 240, 0.04), rgba(255, 248, 240, 0));
  opacity: 0.9;
}

.workflow-copy,
.friday-product-frame {
  position: relative;
  z-index: 2;
}

.workflow-run-console {
  position: sticky;
  top: calc(76px + 8px);
  z-index: 8;
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: min(960px, calc(100% - 48px));
  margin: 0 auto 24px;
  padding: 6px;
  border: 1px solid rgba(255, 248, 240, 0.12);
  border-radius: 20px;
  background: rgba(5, 5, 5, 0.84);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.34);
  text-align: left;
}

.run-ask,
.run-panel {
  min-width: 0;
  border: 1px solid rgba(255, 248, 240, 0.1);
  background: rgba(8, 7, 6, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 248, 240, 0.04);
}

.run-ask {
  flex: 1 1 36%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  border-left: 2px solid rgba(232, 138, 0, 0.72);
  border-radius: 14px;
}

.run-ask span,
.run-step span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.run-ask strong {
  color: var(--cream);
  font-size: 14px;
  line-height: 1.3;
}

.run-step strong,
.run-step code {
  color: var(--cream);
  font-size: 10px;
  line-height: 1.25;
}

.run-ask strong::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 1.05em;
  margin-left: 0.16em;
  border-radius: 999px;
  background: var(--accent);
  vertical-align: -0.16em;
  animation: cursorBlink 0.9s steps(1, end) infinite;
}

.run-flow {
  flex: 0 0 20px;
  align-self: center;
  display: grid;
  place-items: center;
}

.run-flow i {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 248, 240, 0.16);
}

.run-flow i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(232, 138, 0, 0.92), transparent);
  animation: heroTransformSignal 1.9s linear infinite;
}

.run-panel {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-color: rgba(255, 248, 240, 0.08);
  border-radius: 14px;
  background: rgba(8, 7, 6, 0.38);
}

.run-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0 2px;
}

.run-panel-head span {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cream);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}

.run-panel-head strong {
  color: var(--accent);
  font-size: 12px;
  font-style: italic;
  font-weight: 680;
  letter-spacing: 0;
}

.run-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  font-size: 12px;
  line-height: 1.2;
}

.run-status span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-status i {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  animation: statusPulse 1.2s ease-in-out infinite;
}

.run-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.workflow-run-console .run-step strong,
.workflow-run-console .run-step code,
.workflow-run-console .run-output-bars {
  display: none;
}

.workflow-run-console .run-step span {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.run-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 248, 240, 0.09);
  border-radius: 10px;
  background: rgba(255, 248, 240, 0.035);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  opacity: 0.86;
  transform: translateY(0);
  transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.run-step::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: -1px;
  height: 2px;
  border-radius: 999px;
  background: rgba(232, 138, 0, 0.65);
  opacity: 0;
  transition: opacity 160ms ease;
}

.run-step:hover,
.run-step:focus-visible {
  border-color: rgba(232, 138, 0, 0.32);
  background: rgba(232, 138, 0, 0.07);
  opacity: 1;
  transform: none;
  outline: none;
}

.run-step:hover::before,
.run-step:focus-visible::before,
.run-step.is-active::before {
  opacity: 1;
}

.run-step.is-active {
  border-color: rgba(232, 138, 0, 0.42);
  background: rgba(232, 138, 0, 0.1);
  opacity: 1;
  transform: none;
}

.run-step code {
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-output-bars {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 13px;
}

.run-output-bars i {
  width: 7px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  animation: transformBars 2.8s ease-in-out infinite;
}

.run-output-bars i:nth-child(1) { height: 7px; }
.run-output-bars i:nth-child(2) { height: 12px; animation-delay: 0.16s; }
.run-output-bars i:nth-child(3) { height: 9px; animation-delay: 0.32s; }

[data-workflow-row] {
  scroll-margin-top: calc(76px + 112px);
}

.workflow-row {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-columns: 0.34fr 0.66fr;
  gap: clamp(16px, 2.5vw, 28px);
  align-items: center;
  width: min(1280px, calc(100% - 48px));
  min-height: 0;
  margin: 0 auto 16px;
  padding: 14px 20px;
  opacity: 0.92;
  transform: translateY(14px);
  transition: opacity 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.workflow-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid rgba(159, 116, 56, 0.16);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(5, 4, 3, 0.72), rgba(18, 9, 4, 0.48) 48%, rgba(5, 4, 3, 0.34)),
    url("./assets/workflow-bg-4404.jpg");
  background-size: auto, 142%;
  background-position: center, center 38%;
  box-shadow: 0 24px 70px rgba(84, 62, 32, 0.14);
  pointer-events: none;
}

.workflow-row.data-row::before {
  background-image:
    linear-gradient(135deg, rgba(5, 4, 3, 0.72), rgba(21, 9, 4, 0.46) 52%, rgba(5, 4, 3, 0.3)),
    url("./assets/workflow-bg-4402.jpg");
  background-size: auto, 146%;
  background-position: center, center 35%;
}

.workflow-row.chat-row::before {
  background-image:
    linear-gradient(135deg, rgba(5, 4, 3, 0.74), rgba(25, 10, 4, 0.48) 52%, rgba(5, 4, 3, 0.32)),
    url("./assets/workflow-bg-4403.jpg");
  background-size: auto, 142%;
  background-position: center, center 40%;
}

.workflow-row.output-row::before {
  background-image:
    linear-gradient(135deg, rgba(5, 4, 3, 0.72), rgba(27, 11, 4, 0.46) 52%, rgba(5, 4, 3, 0.34)),
    url("./assets/workflow-bg-4405.jpg");
  background-size: auto, 150%;
  background-position: center, center 34%;
}

.workflow-copy {
  width: min(100%, 340px);
  padding: 16px 18px;
  border: 1px solid rgba(255, 248, 240, 0.14);
  border-radius: 20px;
  background: rgba(7, 6, 5, 0.7);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
}

.workflow-row .workflow-copy h3 {
  color: #fff8f0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.34);
}

.workflow-row .workflow-copy p {
  color: rgba(255, 248, 240, 0.78);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.32);
}

.workflow-row .step-node {
  border-color: rgba(232, 138, 0, 0.34);
  background: #17140f;
  color: #fff8f0;
  box-shadow: 0 0 0 5px rgba(232, 138, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.14);
}

.workflow-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.workflow-row.is-visible::before {
  opacity: 1;
}

.workflow-row.is-run-active::before {
  border-color: rgba(232, 138, 0, 0.42);
  box-shadow: 0 24px 70px rgba(84, 62, 32, 0.18), 0 0 0 1px rgba(232, 138, 0, 0.14);
}

@media (hover: hover) {
  .workflow-row:hover::before {
    border-color: rgba(232, 138, 0, 0.34);
    box-shadow: 0 24px 68px rgba(84, 62, 32, 0.16);
  }

  .workflow-row:hover .step-node {
    border-color: #17140f;
    background: #e88a00;
    color: #17140f;
  }

  .workflow-row:hover .friday-product-frame {
    transform: translateY(-2px);
    box-shadow: 0 28px 68px rgba(58, 41, 18, 0.18), 0 0 0 1px rgba(232, 138, 0, 0.18);
  }
}

.workflow-row.data-row .data-view {
  background:
    radial-gradient(circle at 16% 16%, rgba(232, 138, 0, 0.08), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(255, 118, 55, 0.08), transparent 18%),
    linear-gradient(180deg, #fffdf9 0%, #fff7ef 100%);
}

.workflow-row.data-row .real-sidebar {
  width: 220px;
}

.workflow-row.data-row .source-carousel button,
.workflow-row.data-row .table-list label,
.workflow-row.data-row .context-table-card,
.workflow-row.data-row .context-question-bubble,
.workflow-row.data-row .context-answer-card {
  box-shadow: 0 10px 28px rgba(84, 62, 32, 0.04);
}

.workflow-row.reverse {
  grid-template-columns: 0.66fr 0.34fr;
}

.workflow-row.reverse .workflow-copy {
  order: 2;
}

.workflow-row.reverse .step-node {
  border-color: rgba(232, 138, 0, 0.34);
  background: #17140f;
  color: #fff8f0;
  box-shadow: 0 0 0 5px rgba(232, 138, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.14);
}

.step-node {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border: 1px solid rgba(232, 138, 0, 0.5);
  border-radius: 50%;
  background: #050505;
  color: var(--accent);
  box-shadow: 0 0 0 9px rgba(232, 138, 0, 0.07);
  font-size: 13px;
  font-weight: 760;
}

.workflow-copy h3 {
  margin: 0 0 10px;
  color: #fff8f0;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.08;
}

.workflow-copy p {
  max-width: 380px;
  margin: 0;
  color: rgba(255, 248, 240, 0.78);
  font-size: 14px;
  font-weight: 430;
  line-height: 1.4;
}

.friday-product-frame {
  overflow: hidden;
  height: var(--workflow-frame-height);
  min-height: 0;
  border-radius: 8px;
  background: var(--cream);
  color: #1a1a1a;
  box-shadow: 0 24px 66px rgba(58, 41, 18, 0.2), 0 0 0 1px rgba(159, 116, 56, 0.2);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.friday-shell {
  display: flex;
  height: 100%;
  min-height: 0;
  background: #fff;
  font-family: var(--font);
}

.real-sidebar {
  width: 260px;
  flex-shrink: 0;
  padding: 14px 16px 28px;
  border-right: 1px solid #e0e0e0;
  background: #fff;
}

.real-brand,
.real-row,
.real-section-head {
  font-family: var(--font);
}

.real-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 18px;
  padding: 8px 10px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
  color: #555;
  font-size: 13px;
  font-weight: 650;
}

.real-brand img {
  width: 24px;
  height: 24px;
}

.real-section {
  margin-top: 18px;
}

.real-section-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #767676;
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.real-row {
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1a1a1a;
  text-align: left;
  font-size: 13px;
  font-weight: 520;
}

.real-row.active {
  background: #f0f0f0;
  font-weight: 650;
}

.data-view,
.chat-view-real {
  position: relative;
  flex: 1;
  padding: 22px;
  overflow: hidden;
}

.org-company-header-real {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0d4c4;
}

.org-company-header-real img {
  width: 38px;
  height: 38px;
}

.org-company-header-real span {
  display: block;
  color: #e88a00;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.org-company-header-real strong {
  display: block;
  grid-column: 1 / -1;
  margin-top: 2px;
  color: #1a1a1a;
  font-size: 22px;
  line-height: 1.1;
}

.org-company-header-real button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #e0d4c4;
  border-radius: 8px;
  background: #fff;
  color: #9a5a00;
  font-weight: 650;
}

.context-run-flow {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-bottom: 0;
}

.context-question-bubble,
.context-answer-card {
  border: 1px solid #eadfce;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
}

.context-question-bubble {
  width: min(88%, 420px);
  margin-left: auto;
  padding: 11px 13px;
  border-color: rgba(232, 138, 0, 0.38);
  background: #fffbf5;
}

.context-question-bubble span,
.context-answer-card header span,
.context-selection-grid h4 {
  display: block;
  margin: 0 0 5px;
  color: #e88a00;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.context-question-bubble p {
  margin: 0;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 680;
  line-height: 1.35;
}

.context-answer-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.context-answer-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #eadfce;
}

.context-answer-card header strong {
  display: block;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 760;
  line-height: 1.2;
}

.context-selection-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(180px, 0.95fr);
  gap: 10px;
}

.context-selection-grid section {
  min-width: 0;
}

.context-table-picks span,
.context-selection-grid li {
  color: #60574c;
  font-size: 11px;
  line-height: 1.35;
}

.context-selection-grid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.context-selection-grid li {
  position: relative;
  padding-left: 15px;
}

.context-selection-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e88a00;
}

.message {
  max-width: 82%;
  margin-bottom: 10px;
  padding: 10px 14px;
  color: #1a1a1a;
  font-size: 13px;
  line-height: 1.42;
}

.message p,
.message strong {
  margin: 0;
}

.chat-view-real .message {
  animation: messageRise 5.2s ease-in-out infinite;
}

.chat-view-real .message:nth-of-type(2) { animation-delay: 0.2s; }
.chat-view-real .message:nth-of-type(3) { animation-delay: 0.4s; }

.friday-message {
  border-left: 3px solid #e88a00;
  border-radius: 4px 12px 12px 12px;
  background: #fffbf5;
}

.user-message {
  margin-left: auto;
  border: 1px solid #e88a00;
  border-radius: 12px 4px 12px 12px;
  background: #fff;
}

.composer-real {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 6px 0 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  color: #767676;
  font-size: 14px;
}

.composer-real button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #e88a00;
  font-size: 20px;
}

.with-artifacts {
  display: grid;
  grid-template-columns: 1fr 340px;
}

.sql-details-real {
  max-width: 92%;
  margin-top: 8px;
  color: #767676;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
}

.sql-details-real summary {
  width: fit-content;
  color: #767676;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  user-select: none;
}

.sql-details-real summary:hover {
  color: #e88a00;
}

.sql-card-real {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #e0d4c4;
  border-radius: 8px;
  background: #fffbf5;
  color: #1a1a1a;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
}

.sql-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #e0d4c4;
  background: #f5ede3;
}

.row-badge-real {
  border-radius: 10px;
  background: #e88a00;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  padding: 2px 7px;
}

.sql-card-head button {
  margin-left: auto;
  border: 0;
  background: none;
  color: #e88a00;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 5px;
}

.sql-card-head button:hover {
  text-decoration: underline;
}

.sql-code-block-real {
  overflow: hidden;
  margin: 8px;
  border: 1px solid #e8dfd5;
  border-radius: 8px;
  background: #fff8f0;
}

.sql-code-block-real[hidden] {
  display: none;
}

.sql-code-head-real {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px;
  border-bottom: 1px solid #e8dfd5;
  background: #f7efe6;
}

.sql-code-head-real span {
  color: #8c7b6a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sql-code-head-real button {
  min-width: 44px;
  border: 1px solid #d4c5b3;
  border-radius: 4px;
  background: transparent;
  color: #8c7b6a;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  padding: 2px 6px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sql-code-head-real button:hover {
  border-color: #e88a00;
  background: #fff;
  color: #e88a00;
}

.sql-code-real {
  overflow-x: auto;
  margin: 0;
  padding: 10px 12px;
  background: #fff8f0;
  color: #4a3b2a;
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.sql-table-real {
  display: grid;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fffbf5;
  overflow: hidden;
}

.sql-table-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sql-table-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sql-table-real span,
.sql-table-real b {
  overflow: hidden;
  padding: 5px 9px;
  border-bottom: 1px solid #f0e8de;
  background: transparent;
  color: #1a1a1a;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sql-table-real span {
  background: #f5ede3;
  color: #555;
  font-size: 10px;
  font-weight: 600;
}

.sql-table-cols-3 b:nth-last-child(-n + 3),
.sql-table-cols-4 b:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.artifact-panel-real {
  padding: 18px;
  border-left: 1px solid rgba(228, 216, 200, 0.9);
  background: #fff;
  box-shadow: -18px 0 45px rgba(36, 26, 18, 0.08);
}

.artifact-head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  margin: -18px -18px 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #e0d4c4;
  background: #fff;
}

.artifact-head button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #e0d4c4;
  border-radius: 999px;
  background: #fff;
  color: #9a5a00;
  font-size: 11px;
  font-weight: 700;
}

.artifact-head select {
  min-height: 28px;
  max-width: 96px;
  border: 1px solid #e0d4c4;
  border-radius: 999px;
  background: #fff;
  color: #5a4a3a;
  font-size: 11px;
  font-weight: 700;
}

.artifact-panel-real article {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(228, 216, 200, 0.9);
  border-radius: 8px;
  background: #fff;
}

.artifact-panel-real span {
  color: #e88a00;
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.artifact-panel-real b {
  color: #1a1a1a;
  font-size: 13px;
}

.artifact-panel-real small {
  color: #767676;
}

.viz-card-real {
  overflow: hidden;
  border: 1px solid #e0d4c4;
  border-radius: 8px;
  background: #fffbf5;
}

.card-header-real {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid #e0d4c4;
  background: #f5ede3;
}

.card-header-real span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #e88a00;
  color: #fff;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: lowercase;
}

.card-header-real small {
  color: #767676;
  font-size: 10px;
}

.dashboard-canvas-real {
  flex: 1;
  overflow: auto;
  padding: 18px;
  background: #f7f6f2;
}

.dashboard-canvas-real[hidden] {
  display: none;
}

.dashboard-hero-real {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid rgba(34, 34, 34, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(24, 20, 14, 0.08);
}

.dashboard-hero-real h4 {
  margin: 0;
  color: #17140f;
  font-size: 28px;
  line-height: 1.06;
}

.dashboard-hero-real p {
  max-width: 760px;
  margin: 8px 0 0;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.widget-grid-real {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
}

.dashboard-widget-real {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(34, 34, 34, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 25, 18, 0.14);
}

.dashboard-widget-real.size-compact {
  grid-column: span 1;
}

.dashboard-widget-real.size-standard {
  grid-column: span 2;
}

.dashboard-widget-real.size-wide {
  grid-column: 1 / -1;
}

.widget-visual-real {
  height: 100%;
  min-height: 0;
  background: #faf8f2;
}

.dashboard-widget-real.type-chart .widget-visual-real {
  min-height: 260px;
}

.dashboard-widget-real.type-metric .widget-visual-real {
  min-height: 170px;
}

.dashboard-widget-real.type-insight .widget-visual-real {
  min-height: 170px;
}

.workflow-row .step-node {
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border: 1px solid rgba(232, 138, 0, 0.58);
  background: #17140f;
  color: #fff8f0;
  box-shadow: 0 0 0 5px rgba(232, 138, 0, 0.08), 0 12px 26px rgba(58, 41, 18, 0.12);
  font-size: 21px;
  font-weight: 760;
  transition: transform 220ms ease, background 220ms ease, color 220ms ease, border-color 220ms ease;
  animation: none;
}

.workflow-row .step-node::after {
  display: none;
}

.app-shell-preview.with-artifacts {
  display: grid;
  grid-template-columns: 190px minmax(300px, 1fr) 250px;
}

.context-chat-shell.with-artifacts {
  /* Chat column min is 0, not 360px: a 360px min plus the 64px rail and 270px
     artifact panel needs >=694px, so on a narrower frame the panel (and its
     Share button) overflowed and got clipped by `overflow: hidden`. Letting the
     chat shrink keeps the panel fully inside the frame. */
  position: relative;
  grid-template-columns: 64px minmax(0, 1fr) 270px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.output-preview-frame {
  min-height: 0;
  background: #fffaf3;
}

.preview-app-real {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(232, 138, 0, 0.08), transparent 22%),
    linear-gradient(180deg, #fffdf9 0%, #f6efe6 100%);
}

.preview-app-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(224, 212, 196, 0.9);
  background: rgba(255, 255, 255, 0.78);
}

.preview-app-toolbar span:not(.workflow-action-hint-chip) {
  display: block;
  margin-bottom: 3px;
  color: #767676;
  font-size: 12px;
  font-weight: 620;
}

.preview-app-toolbar strong {
  display: block;
  color: #17140f;
  font-size: 24px;
  font-weight: 760;
  line-height: 1.05;
}

.preview-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-controls select,
.preview-controls button {
  min-height: 38px;
  border: 1px solid #e0d4c4;
  border-radius: 999px;
  background: #fff;
  color: #8c5200;
  font-size: 13px;
  font-weight: 720;
}

.preview-controls select {
  padding: 0 34px 0 14px;
}

.preview-controls button {
  padding: 0 18px;
  background: #e88a00;
  border-color: #e88a00;
  color: #fff8f0;
}

.workspace-preview {
  padding: 18px 18px 76px;
}

.context-chat-shell .collapsed-sidebar {
  display: flex;
  width: 64px;
  padding: 14px 10px;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}

.collapsed-sidebar .real-section {
  display: grid;
  gap: 9px;
  margin-top: 0;
}

.compact-brand {
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
}

.compact-brand span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rail-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e0d4c4;
  border-radius: 10px;
  background: #fff;
  color: #8c5200;
  font-size: 12px;
  font-weight: 760;
}

.rail-dot svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail-dot.active {
  border-color: rgba(232, 138, 0, 0.45);
  background: #fff8f0;
  color: #e88a00;
}

.context-chat-shell .workspace-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
}

.chat-scroll-real {
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 6px 0;
  scrollbar-width: thin;
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 16px), transparent 100%);
}

.context-chat-shell .message {
  animation: none;
}

.context-chat-shell .friday-message b {
  font-weight: 780;
}

.chat-context-card {
  display: grid;
  gap: 8px;
}

.chat-context-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.chat-context-card header span,
.chat-context-grid em {
  display: block;
  color: #e88a00;
  font-size: 9px;
  font-style: normal;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-context-card header b {
  flex: 0 0 auto;
  color: #1a1a1a;
  font-size: 12px;
}

.chat-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(130px, 0.92fr);
  gap: 8px;
}

.chat-context-grid p,
.chat-context-grid ul {
  margin: 4px 0 0;
}

.chat-context-grid p {
  color: #60574c;
  font-size: 11px;
  line-height: 1.35;
}

.chat-context-grid p b {
  display: block;
  color: #1a1a1a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.chat-context-grid ul {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}

.chat-context-grid li {
  position: relative;
  padding-left: 11px;
  color: #60574c;
  font-size: 11px;
  line-height: 1.32;
}

.chat-context-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e88a00;
}

.chart-generated-message {
  max-width: 92%;
  border-color: #e88a00;
  background: #fffaf3;
  box-shadow: 0 10px 26px rgba(57, 42, 23, 0.08);
}

.chart-generated-message p {
  margin-top: 3px;
}

.detailed-friday-response {
  border-color: rgba(232, 138, 0, 0.82);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 198, 63, 0.22), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, #fff5e7 100%);
}

.detailed-friday-response > p {
  color: #3b2a18;
}

.chat-viz-card {
  margin-top: 10px;
  box-shadow: 0 12px 28px rgba(95, 56, 0, 0.09);
}

.context-chat-shell .sql-details-real {
  max-width: 92%;
  margin: 8px 0 10px;
}

.context-chat-shell .sql-table-real span,
.context-chat-shell .sql-table-real b {
  padding: 5px 9px;
  font-size: 10.5px;
}

.context-chat-shell .sql-table-real span {
  font-size: 10px;
}

.context-chat-shell .composer-real {
  position: static;
  min-height: 42px;
  margin-top: 10px;
}

.app-shell-preview .real-sidebar {
  width: auto;
  padding: 14px 12px 24px;
}

.app-shell-preview .real-brand {
  font-size: 12px;
}

.app-shell-preview .real-row {
  padding: 8px 9px;
  font-size: 12px;
}

.app-shell-preview .message {
  max-width: 88%;
  padding: 9px 12px;
  font-size: 12px;
}

.app-shell-preview .sql-details-real {
  max-width: 88%;
  font-size: 12px;
}

.app-shell-preview .composer-real {
  left: 18px;
  right: 18px;
  bottom: 18px;
  min-height: 42px;
  font-size: 12px;
}

.app-shell-preview .artifact-panel-real {
  padding: 16px;
}

.app-shell-preview .artifact-panel-real article {
  padding: 13px;
}

.live-artifacts {
  background: #fff8f0;
}

.context-chat-shell .live-artifacts {
  display: block;
  min-width: 0;
  padding: 14px;
  overflow-y: auto;
  scrollbar-color: rgba(232, 138, 0, 0.42) rgba(255, 248, 240, 0.8);
  scrollbar-width: thin;
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
}

.context-chat-shell .live-artifacts .artifact-head {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Panel padding is 0 here (see `.context-chat-shell .live-artifacts`), so the
     header must not use negative margins to bleed — that pushed it (and the
     Share button) past the panel/frame border, which `overflow:hidden` clipped.
     Flush margins let the header's own padding provide the inset. */
  margin: 0 0 12px;
  background: rgba(255, 248, 240, 0.92);
  backdrop-filter: blur(18px) saturate(1.15);
}

.live-artifacts .artifact-head button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #e0d4c4;
  border-radius: 999px;
  background: #fff;
  color: #9a5a00;
  font-size: 12px;
  font-weight: 700;
}

.artifact-chart-card,
.artifact-metric-card,
.artifact-insight-card {
  min-height: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.artifact-chart-card:hover,
.artifact-metric-card:hover,
.artifact-insight-card:hover {
  border-color: rgba(232, 138, 0, 0.38);
  box-shadow: 0 14px 28px rgba(95, 56, 0, 0.09);
  transform: translateY(-1px);
}

.artifact-metric-card b {
  color: #e88a00;
  font-size: 48px;
  line-height: 1;
}

.artifact-panel-real .number-body,
.workspace-artifact-stack .number-body,
.dashboard-widget-real .number-body {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.artifact-panel-real .number-value,
.workspace-artifact-stack .number-value,
.dashboard-widget-real .number-value {
  color: #e88a00;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 820;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.artifact-panel-real .number-label,
.workspace-artifact-stack .number-label,
.dashboard-widget-real .number-label {
  color: #5f5143;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.24;
}

.artifact-panel-real .panel-chart-real {
  margin-top: 8px;
}

.chart-title-real,
.chat-viz-card > b,
.artifact-chart-card > b {
  padding: 0 10px;
}

.chart-title-real {
  color: #2f2519;
  font-size: 12px;
  font-weight: 780;
}

.preview-surface-real {
  display: flex;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #17140f;
  flex-direction: column;
  overflow: hidden;
}

.preview-surface-real[hidden] {
  display: none;
}

.preview-surface-real .dashboard-canvas-real,
.preview-surface-real .ppt-studio-real {
  min-height: 0;
  flex: 1;
}

.preview-surface-real .dashboard-canvas-real {
  padding: 16px 24px 24px;
}

.preview-surface-real .dashboard-hero-real {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid rgba(224, 212, 196, 0.9);
  border-radius: 12px;
  background: #fff;
}

.preview-surface-real .dashboard-hero-real h4 {
  font-size: 28px;
}

.preview-surface-real .dashboard-hero-real p {
  font-size: 12px;
}

.preview-surface-real .widget-grid-real {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.preview-surface-real .dashboard-widget-real {
  padding: 0;
  border-radius: 12px;
}

.preview-surface-real .dashboard-widget-real.size-compact,
.preview-surface-real .dashboard-widget-real.size-standard {
  grid-column: span 2;
}

.preview-surface-real .dashboard-widget-real.size-wide {
  grid-column: 1 / -1;
}

.preview-surface-real .dashboard-widget-real.type-metric .widget-visual-real,
.preview-surface-real .dashboard-widget-real.type-insight .widget-visual-real {
  min-height: 104px;
}

.preview-surface-real .dashboard-widget-real.type-chart .widget-visual-real {
  min-height: 190px;
}

.preview-surface-real .dashboard-canvas-real {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 191, 53, 0.12), transparent 24%),
    linear-gradient(180deg, #fffaf1 0%, #f6eadb 100%);
}

.preview-surface-real .dashboard-widget-real {
  box-shadow: 0 14px 32px rgba(66, 43, 15, 0.1);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.preview-surface-real .dashboard-widget-real:hover {
  border-color: rgba(232, 138, 0, 0.3);
  box-shadow: 0 20px 42px rgba(66, 43, 15, 0.15);
  transform: translateY(-1px);
}

.ppt-studio-real {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  background: #f7f6f2;
}

.ppt-studio-real[hidden] {
  display: none;
}

.ppt-rail-real {
  padding: 12px;
  border-right: 1px solid rgba(34, 34, 34, 0.08);
  background: #fff;
}

.ppt-rail-real strong {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
}

.ppt-rail-real button {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 6px 8px;
  align-items: center;
  width: 100%;
  margin-bottom: 7px;
  padding: 8px;
  border: 1px solid rgba(34, 34, 34, 0.08);
  border-radius: 9px;
  background: #faf8f2;
  color: #17140f;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.ppt-rail-real button:hover,
.ppt-rail-real button:focus-visible {
  border-color: rgba(232, 138, 0, 0.34);
  background: #fffaf3;
  transform: translateY(-1px);
  outline: none;
}

.ppt-rail-real button.active {
  border-color: rgba(232, 138, 0, 0.44);
  background: #fff8f0;
}

.ppt-rail-real button span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #17140f;
  color: #fff8f0;
  font-size: 10px;
}

.ppt-rail-real button em {
  grid-column: 2;
  color: #8a8177;
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

.ppt-stage-real {
  display: grid;
  place-items: center;
  padding: 18px;
  background: #eee7dd;
}

.preview-slide-real {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 16 / 9;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(34, 34, 34, 0.14);
  border-radius: 6px;
  background: #fffaf2;
  box-shadow: 0 18px 38px rgba(31, 25, 18, 0.18);
}

.preview-slide-real h4 {
  max-width: 230px;
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
}

.preview-slide-real p {
  max-width: 230px;
  margin: 8px 0 0;
  color: #5c5348;
  font-size: 11px;
  line-height: 1.35;
}

.slide-chart-real {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: end;
  gap: 8px;
  width: 142px;
  height: 86px;
  border-bottom: 1px solid #d8cbbb;
}

.slide-chart-real i {
  width: 24px;
  border-radius: 5px 5px 0 0;
  background: #e88a00;
}

.slide-chart-real i:nth-child(1) { height: 44px; }
.slide-chart-real i:nth-child(2) { height: 60px; }
.slide-chart-real i:nth-child(3) { height: 74px; }
.slide-chart-real i:nth-child(4) { height: 50px; }

.preview-slide-real.is-swapping {
  animation: slideSwap 0.22s ease both;
}

.slide-chart-real[data-variant="summary"]::before {
  content: "2 tables + 3 notes";
  position: absolute;
  right: 0;
  top: -24px;
  padding: 4px 7px;
  border: 1px solid rgba(232, 138, 0, 0.2);
  border-radius: 999px;
  background: #fff8f0;
  color: #9a5a00;
  font-size: 9px;
  font-weight: 760;
}

.slide-chart-real[data-variant="metric"],
.slide-chart-real[data-variant="conclusion"] {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(232, 138, 0, 0.2);
  border-radius: 10px;
  background: #fff8f0;
}

.slide-chart-real[data-variant="metric"] i,
.slide-chart-real[data-variant="conclusion"] i {
  display: none;
}

.slide-chart-real[data-variant="metric"]::before {
  content: "-6.4 pts";
  color: #e88a00;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.slide-chart-real[data-variant="metric"]::after {
  content: "Enterprise expansion QoQ";
  max-width: 112px;
  color: #5c5348;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.slide-chart-real[data-variant="conclusion"]::before {
  content: "Focus";
}

.slide-chart-real[data-variant="conclusion"]::after {
  content: "Late-stage enterprise cohorts";
  max-width: 116px;
  color: #33291e;
  font-size: 15px;
  font-weight: 780;
  line-height: 1.15;
  text-align: center;
}

@keyframes slideSwap {
  from {
    opacity: 0.62;
    transform: translateY(6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.security-section {
  position: relative;
  overflow: hidden;
  padding: 122px 24px 116px;
  background: #e88a00;
  color: #2f0e00;
  isolation: isolate;
}

.security-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 50% 58%, rgba(255, 246, 92, 0.42), transparent 46%),
    radial-gradient(ellipse at 10% 98%, rgba(139, 37, 0, 0.26), transparent 34%),
    radial-gradient(ellipse at 96% 4%, rgba(255, 184, 28, 0.36), transparent 28%),
    url("./assets/security-bloom-bg.svg");
  background-position: center;
  background-size: cover, cover, cover, cover;
  opacity: 1;
  transform: scale(1.02);
  animation: warmBloomPan 18s ease-in-out infinite alternate;
}

.security-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 20%, rgba(255, 248, 210, 0.36), transparent 26%),
    radial-gradient(circle at 18% 74%, rgba(113, 31, 0, 0.22), transparent 34%),
    linear-gradient(90deg, rgba(69, 15, 0, 0.22), rgba(255, 219, 97, 0.08) 46%, rgba(91, 21, 0, 0.2)),
    linear-gradient(180deg, rgba(255, 239, 167, 0.08), rgba(43, 9, 0, 0.18));
  mix-blend-mode: multiply;
}

.security-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(460px, 1.22fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.security-copy h2 {
  max-width: 600px;
  margin: 0;
  color: #2b0c00;
  font-size: clamp(44px, 6.1vw, 84px);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.038em;
  text-shadow: 0 18px 46px rgba(255, 229, 130, 0.16);
}

.security-section .section-eyebrow {
  color: #6f2200;
  font-size: 15px;
  font-weight: 780;
  letter-spacing: 0.02em;
  text-transform: none;
}

.security-copy p {
  max-width: 570px;
  margin: 24px 0 0;
  color: rgba(47, 14, 0, 0.78);
  font-size: 18px;
  line-height: 1.55;
}

.security-visual {
  min-width: 0;
}

.security-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 216, 0.52);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 250, 216, 0.62), transparent 32%),
    linear-gradient(145deg, rgba(255, 250, 220, 0.38), rgba(255, 188, 38, 0.16) 46%, rgba(109, 27, 0, 0.14)),
    rgba(255, 242, 184, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.78),
    0 34px 110px rgba(70, 15, 0, 0.32);
  backdrop-filter: blur(26px) saturate(1.36);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.security-window:hover {
  border-color: rgba(255, 252, 225, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.88),
    0 38px 130px rgba(70, 15, 0, 0.38),
    0 0 0 1px rgba(255, 232, 112, 0.22);
  transform: translateY(-3px);
}

.security-window::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: 29px;
  background:
    linear-gradient(120deg, rgba(255, 255, 240, 0.28), transparent 32%, rgba(255, 201, 57, 0.2) 68%, transparent),
    radial-gradient(circle at 74% 18%, rgba(255, 235, 126, 0.34), transparent 26%);
  opacity: 0.78;
}

.security-window header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid rgba(86, 24, 0, 0.14);
}

.security-window header span,
.security-detail span {
  display: block;
  color: #7a2600;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: none;
}

.security-window header strong {
  display: block;
  margin-top: 5px;
  color: #2b0c00;
  font-size: 28px;
  line-height: 1.05;
}

.security-window header em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(109, 31, 0, 0.18);
  border-radius: 999px;
  background: rgba(255, 241, 169, 0.42);
  color: #612000;
  font-style: normal;
  font-size: 12px;
  font-weight: 760;
}

.security-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(190px, 0.42fr);
  gap: 22px;
  align-items: stretch;
  padding: 24px 26px 26px;
}

.security-device {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  border: 1px solid rgba(255, 248, 216, 0.42);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 252, 226, 0.62), transparent 28%),
    linear-gradient(160deg, rgba(255, 241, 177, 0.42), rgba(231, 122, 0, 0.2) 52%, rgba(91, 21, 0, 0.14)),
    rgba(255, 238, 169, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.7),
    0 22px 60px rgba(77, 19, 0, 0.2);
  transition: transform 220ms ease, border-color 220ms ease;
}

.security-window:hover .security-device {
  border-color: rgba(255, 252, 226, 0.64);
  transform: translateY(-1px);
}

.security-device::before,
.security-device::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.security-device::before {
  inset: 44px 32px 30px;
  border: 1px solid rgba(109, 31, 0, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 226, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 25, 0, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

.security-device::after {
  top: 68px;
  right: 54px;
  bottom: 44px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 249, 202, 0.88), transparent);
  animation: securityScan 2.7s ease-in-out infinite;
}

.security-device-bar {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 7px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(86, 24, 0, 0.12);
}

.security-device-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(92, 25, 0, 0.2);
}

.security-device-bar span:first-child {
  background: #e88a00;
}

.security-device-screen {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: 284px;
  padding: 34px 34px 32px 138px;
}

.security-lock-mark {
  position: absolute;
  top: 50%;
  left: 36px;
  width: 68px;
  height: 56px;
  transform: translateY(-42%);
  border: 2px solid rgba(232, 138, 0, 0.74);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 251, 212, 0.62), rgba(255, 173, 32, 0.26)),
    rgba(255, 230, 140, 0.24);
  box-shadow: 0 22px 48px rgba(98, 28, 0, 0.22);
}

.security-lock-mark::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -26px;
  height: 32px;
  border: 2px solid rgba(232, 138, 0, 0.74);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
}

.security-lock-mark i {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 8px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #7a2600;
}

.security-device-screen strong {
  display: block;
  min-height: 1.9em;
  color: #2b0c00;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 760;
  line-height: 0.95;
  letter-spacing: -0.018em;
}

.security-device-screen small {
  display: block;
  margin-top: 12px;
  color: rgba(47, 14, 0, 0.62);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.security-signal-lines {
  display: grid;
  gap: 8px;
  width: min(260px, 100%);
  margin-top: 28px;
}

.security-signal-lines i {
  height: 2px;
  background: linear-gradient(90deg, #7a2600, rgba(255, 246, 188, 0.34));
  transform-origin: left;
  animation: securityLine 2.3s ease-in-out infinite;
}

.security-signal-lines i:nth-child(2) {
  width: 72%;
  animation-delay: 0.16s;
}

.security-signal-lines i:nth-child(3) {
  width: 48%;
  animation-delay: 0.32s;
}

.security-controls {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 330px;
  padding-left: 22px;
  border-left: 1px solid rgba(86, 24, 0, 0.14);
}

.security-control {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 247, 198, 0.14);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.security-control:hover,
.security-control:focus-visible,
.security-control.active {
  border-color: rgba(255, 252, 224, 0.58);
  background:
    linear-gradient(135deg, rgba(255, 250, 211, 0.54), rgba(255, 194, 51, 0.26)),
    rgba(255, 236, 154, 0.28);
  color: #2b0c00;
  box-shadow: 0 12px 34px rgba(91, 21, 0, 0.16);
  transform: translateX(4px);
}

.security-control:focus-visible {
  outline: 2px solid rgba(255, 250, 210, 0.9);
  outline-offset: 4px;
}

.security-control span {
  display: block;
  color: rgba(47, 14, 0, 0.72);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.01em;
}

.security-control:hover span,
.security-control:focus-visible span,
.security-control.active span {
  color: #2b0c00;
}

.security-detail {
  position: relative;
  min-height: 168px;
  margin: 18px 0 0;
  padding: 18px;
  border: 1px solid rgba(255, 248, 216, 0.38);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 251, 222, 0.34), rgba(255, 191, 47, 0.12)),
    rgba(255, 244, 190, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 238, 0.58);
  backdrop-filter: blur(18px) saturate(1.18);
}

.security-detail strong {
  display: block;
  max-width: 178px;
  min-height: 2.04em;
  margin-top: 8px;
  color: #2b0c00;
  font-size: 26px;
  line-height: 1.02;
}

.security-detail p {
  max-width: 190px;
  margin: 10px 0 0;
  color: rgba(47, 14, 0, 0.64);
  font-size: 13px;
  line-height: 1.45;
}

@keyframes securityScan {
  0%, 100% { transform: translateX(-150px); opacity: 0; }
  18%, 78% { opacity: 1; }
  50% { transform: translateX(12px); }
}

@keyframes warmBloomPan {
  from { transform: scale(1.02) translate3d(-1.2%, -0.8%, 0); }
  to { transform: scale(1.06) translate3d(1.2%, 0.8%, 0); }
}

@keyframes securityLine {
  0%, 100% { transform: scaleX(0.42); opacity: 0.42; }
  50% { transform: scaleX(1); opacity: 1; }
}

.context-engine-section {
  position: relative;
  overflow: hidden;
  padding: 122px 24px 118px;
  background:
    linear-gradient(180deg, #fff8f0 0%, #fffdf9 52%, #f4eadc 100%);
  color: #17140f;
}

.context-engine-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(232, 138, 0, 0.18), transparent 28%),
    radial-gradient(circle at 84% 64%, rgba(23, 20, 15, 0.08), transparent 30%);
}

.context-engine-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(480px, 1.22fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.context-engine-copy h2 {
  max-width: 650px;
  margin: 0;
  color: #17140f;
  font-size: clamp(42px, 6vw, 82px);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.018em;
}

.context-engine-copy p {
  max-width: 560px;
  margin: 24px 0 0;
  color: #63594d;
  font-size: 18px;
  line-height: 1.55;
}

.context-studio-board {
  position: relative;
  min-width: 0;
  min-height: 610px;
  isolation: isolate;
}

.studio-shot {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 10px;
  width: min(70%, 480px);
  height: 522px;
  margin: 0;
  min-width: 0;
  opacity: 0.72;
  pointer-events: none;
  transform: translate(calc(-50% + var(--studio-offset-x, 0px)), calc(-50% + var(--studio-offset-y, 0px)));
  transition:
    opacity 220ms ease,
    transform 240ms ease,
    filter 220ms ease,
    z-index 0ms linear 120ms;
  will-change: transform;
}

.studio-shot.active {
  z-index: 6;
  opacity: 1;
  pointer-events: auto;
  --studio-offset-x: 0px;
  --studio-offset-y: 28px;
}

.studio-shot.previous {
  z-index: 3;
  --studio-offset-x: -176px;
  --studio-offset-y: -14px;
}

.studio-shot.next {
  z-index: 3;
  --studio-offset-x: 176px;
  --studio-offset-y: -14px;
}

.studio-shot.is-offstage {
  z-index: 1;
  opacity: 0;
  --studio-offset-x: 0px;
  --studio-offset-y: -14px;
}

.studio-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(23, 20, 15, 0.14);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.92);
  color: #17140f;
  box-shadow: 0 16px 42px rgba(83, 60, 29, 0.16);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.studio-carousel-btn:hover,
.studio-carousel-btn:focus-visible {
  border-color: rgba(232, 138, 0, 0.42);
  background: #fff8ef;
  transform: translateY(-50%) scale(1.04);
}

.studio-carousel-btn span {
  font-size: 19px;
  font-weight: 860;
  line-height: 1;
}

.studio-carousel-prev {
  left: 2px;
}

.studio-carousel-next {
  right: 2px;
}

.studio-product-frame {
  min-width: 0;
  height: 476px;
  overflow: hidden;
  border: 1px solid rgba(23, 20, 15, 0.14);
  border-radius: 8px;
  background: #fcfaf6;
  box-shadow:
    0 28px 80px rgba(83, 60, 29, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.studio-shot:hover .studio-product-frame,
.studio-shot:focus-within .studio-product-frame {
  border-color: rgba(232, 138, 0, 0.36);
  box-shadow:
    0 36px 96px rgba(83, 60, 29, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.78) inset;
}

.studio-frame-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 248, 240, 0.1);
  background: #17140f;
  color: #fff8f0;
}

.studio-frame-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.studio-frame-caption span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(232, 138, 0, 0.42);
  border-radius: 50%;
  background: rgba(232, 138, 0, 0.12);
  color: #ffb13b;
  font-size: 10px;
  font-weight: 860;
}

.studio-frame-caption strong {
  overflow: hidden;
  color: #fff8f0;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-frame-top small {
  overflow: hidden;
  color: rgba(255, 248, 240, 0.56);
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-frame-top em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(255, 248, 240, 0.12);
  border-radius: 999px;
  color: rgba(255, 248, 240, 0.72);
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}

.table-shot .studio-product-frame {
  min-height: 0;
}

.studio-table-pane {
  display: grid;
  grid-template-columns: minmax(170px, 0.34fr) minmax(0, 0.66fr);
  height: calc(100% - 48px);
  min-height: 0;
}

.studio-table-list {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 14px;
  border-right: 1px solid rgba(23, 20, 15, 0.1);
  background: #f5efe6;
}

.studio-table-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 8px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #17140f;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.studio-table-row:hover {
  background: #f5f5f5;
}

.studio-table-row.active {
  border-left-color: #e88a00;
  background: rgba(232, 138, 0, 0.08);
}

.studio-table-row.active:hover {
  background: rgba(232, 138, 0, 0.08);
}

.studio-table-row strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-table-row span {
  color: #7b7166;
  font-size: 11px;
  line-height: 1.35;
}

.studio-table-detail {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.studio-table-detail header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.studio-detail-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.studio-detail-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: auto;
}

.studio-refresh-meta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #b0a89d;
  cursor: default;
}

.studio-refresh-meta-btn svg {
  display: block;
}

.studio-table-detail header strong {
  overflow: hidden;
  color: #17140f;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-table-detail header span {
  color: #81766b;
  font-size: 12px;
}

.studio-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.studio-meta-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(23, 20, 15, 0.1);
  border-radius: 999px;
  background: #fffdf9;
  color: #81766b;
  font-size: 11px;
  font-weight: 500;
}

.studio-table-note {
  margin: 0;
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #63594d;
  font-size: 12px;
  line-height: 1.45;
}

.studio-table-note.is-empty {
  color: #81766b;
  opacity: 0.5;
  font-style: italic;
}

.studio-column-list {
  display: grid;
  gap: 8px;
}

.studio-column-list div {
  display: grid;
  grid-template-columns: minmax(104px, 0.42fr) minmax(0, 0.58fr);
  gap: 10px;
  min-height: 42px;
  padding: 9px;
  border: 1px solid rgba(23, 20, 15, 0.1);
  border-radius: 7px;
  background: #fffdf9;
}

.studio-column-list strong {
  overflow: hidden;
  color: #17140f;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-column-list span {
  color: #746a5f;
  font-size: 11px;
  line-height: 1.25;
}

.notebook-frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.notebook-frame .studio-notebook {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.saving-frame {
  min-height: 0;
}

.studio-notebook {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 14px;
}

/* Memory cell — mirrors askfriday MemoryNotebook.svelte: a flat cell with a
   run button (collapsed until the cell is dirty), a gutter stripe, the memory
   text inline, and a hover-revealed delete. No dropdown/expander. */
.studio-memory-cell {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(23, 20, 15, 0.1);
  border-radius: 6px;
  background: #f6f3ed;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}

.studio-memory-cell.is-active {
  border-color: rgba(23, 20, 15, 0.16);
  background: #fffdf9;
}

/* run / save button — width 0 until the cell is active (dirty) or saved */
.studio-cell-run {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b46d00;
  font-size: 10px;
  opacity: 0;
  overflow: hidden;
  transition:
    width 160ms ease,
    opacity 160ms ease,
    color 160ms ease;
}

.studio-cell-run::before {
  content: "\25B6";
}

.studio-memory-cell.is-active .studio-cell-run,
.studio-memory-cell.is-saved .studio-cell-run {
  width: 26px;
  opacity: 1;
}

.studio-memory-cell.is-saved .studio-cell-run {
  color: #23863b;
}

.studio-memory-cell.is-saved .studio-cell-run::before {
  content: "\2713";
}

/* gutter stripe — grey at rest, orange when active, green when saved */
.studio-cell-gutter {
  flex-shrink: 0;
  width: 3px;
  background: #d9d1c6;
  border-radius: 3px 0 0 3px;
  transition: background 160ms ease;
}

.studio-memory-cell.is-active .studio-cell-gutter {
  background: #e88a00;
}

.studio-memory-cell.is-saved .studio-cell-gutter {
  background: #23863b;
}

.studio-cell-editor {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px 34px 12px 11px;
  color: #302a23;
  font-size: 12px;
  line-height: 1.5;
}

/* delete affordance — appears on cell hover */
.studio-cell-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #9a9087;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transition:
    opacity 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.studio-memory-cell:hover .studio-cell-delete {
  opacity: 1;
}

.studio-cell-delete:hover {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

/* add-cell divider — revealed on notebook hover, like the product */
.studio-add-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  opacity: 0;
  transition: opacity 160ms ease;
}

.studio-notebook:hover .studio-add-divider {
  opacity: 1;
}

.studio-add-divider span {
  height: 1px;
  background: rgba(23, 20, 15, 0.1);
}

.studio-add-divider button {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(23, 20, 15, 0.12);
  border-radius: 50%;
  background: #fffdf9;
  color: #7b7166;
  font-size: 13px;
  font-weight: 720;
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

.studio-add-divider button:hover {
  border-color: #e88a00;
  color: #e88a00;
}

.studio-chat-surface {
  display: flex;
  flex-direction: column;
  height: calc(100% - 48px);
  min-height: 0;
  padding: 0;
}

.studio-chat-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 8px;
  scrollbar-width: thin;
}

.studio-chat-surface .message {
  max-width: 88%;
  margin-bottom: 0;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
}

.studio-chat-surface .message p {
  margin: 0;
}

.studio-chat-surface .message code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.92em;
}

.studio-chat-surface .user-message {
  margin-left: auto;
  border: 1px solid #e88a00;
  border-radius: 12px 4px 12px 12px;
  background: #fff;
  color: #17140f;
}

.studio-chat-surface .friday-message {
  border-left: 3px solid #e88a00;
  border-radius: 4px 12px 12px 12px;
  background: #fffbf5;
  color: #17140f;
}

.studio-chat-surface .studio-status-input {
  flex-shrink: 0;
  margin: 0 16px 14px;
}

.studio-status-input.is-idle {
  border-color: rgba(23, 20, 15, 0.12);
  background: #fffdf9;
  color: #63594d;
}

.studio-status-input.is-idle i {
  background: rgba(99, 89, 77, 0.28);
  box-shadow: none;
  animation: none;
}

.studio-status-input.is-idle span {
  color: #8a8074;
  font-style: italic;
  font-weight: 600;
}

.studio-chat-surface.is-animating .message {
  opacity: 0.34;
  transition:
    opacity 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.studio-chat-surface.is-animating .message.is-learning-active {
  opacity: 1;
  transform: translateY(-1px);
}

.studio-chat-surface.is-animating .message.is-learning-active.user-message {
  box-shadow: 0 0 0 1px rgba(232, 138, 0, 0.42);
}

.studio-chat-surface.is-animating .message.is-learning-active.friday-message {
  border-left-color: #e88a00;
  box-shadow: 0 12px 28px rgba(232, 138, 0, 0.18);
}

.studio-status-input.is-idle.is-replay-hint span {
  color: #9a5d00;
  font-style: normal;
  font-weight: 680;
}

.studio-status-input {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-top: 2px;
  padding: 0 12px;
  border: 1px solid rgba(23, 20, 15, 0.12);
  border-radius: 8px;
  background: #17140f;
  color: #fff8f0;
}

.studio-status-input i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e88a00;
  box-shadow: 0 0 0 0 rgba(232, 138, 0, 0.3);
  animation: studioStatusPulse 1.6s ease-out infinite;
}

.studio-status-input span {
  overflow: hidden;
  color: rgba(255, 248, 240, 0.8);
  font-size: 12px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-section {
  position: relative;
  overflow: hidden;
  padding: 78px 24px 88px;
  background:
    radial-gradient(circle at 18% 16%, rgba(232, 138, 0, 0.12), transparent 24%),
    linear-gradient(180deg, #050505 0%, #0d0805 52%, #050505 100%);
  color: var(--cream);
}

.comparison-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 248, 240, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 240, 0.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.comparison-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.comparison-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.58fr);
  gap: 18px 42px;
  align-items: end;
  width: 100%;
  margin-bottom: 30px;
}

.comparison-heading span,
.comparison-lane-head span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparison-heading > span {
  grid-column: 1 / -1;
}

.comparison-heading h2 {
  grid-column: 1;
  margin: 0;
  max-width: 820px;
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.comparison-heading p {
  grid-column: 2;
  max-width: 390px;
  margin: 0;
  color: rgba(255, 248, 240, 0.7);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
}

.comparison-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.comparison-lane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255, 248, 240, 0.08);
  background: rgba(7, 6, 5, 0.34);
}

.friday-lane {
  border-color: rgba(232, 138, 0, 0.28);
  background:
    linear-gradient(180deg, rgba(232, 138, 0, 0.08), rgba(255, 248, 240, 0.025)),
    rgba(7, 6, 5, 0.66);
  box-shadow: 0 24px 70px rgba(232, 138, 0, 0.08);
}

.comparison-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -18px -18px 0;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 248, 240, 0.08);
}

.comparison-lane-head strong {
  color: rgba(47, 14, 0, 0.88);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: normal;
}

.comparison-spine {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 100%;
}

.comparison-spine span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(232, 138, 0, 0.44);
  border-radius: 50%;
  background: rgba(23, 20, 15, 0.82);
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.comparison-spine i {
  width: 1px;
  align-self: stretch;
  min-height: 0;
  background:
    linear-gradient(180deg, transparent, rgba(232, 138, 0, 0.58), transparent),
    linear-gradient(180deg, rgba(255, 248, 240, 0.16), rgba(255, 248, 240, 0.16));
}

.operator-chip {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 248, 240, 0.14);
  border-radius: 999px;
  background: rgba(255, 248, 240, 0.08);
  color: rgba(255, 248, 240, 0.78);
  font-size: 12px;
  font-weight: 760;
}

.operator-chip span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(232, 138, 0, 0.12);
}

.sprawl-item {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 6px;
  width: 188px;
  min-height: 98px;
  padding: 13px;
  border: 1px solid rgba(255, 248, 240, 0.1);
  border-radius: 8px;
  background: rgba(12, 11, 10, 0.82);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  opacity: 0.82;
  transform: translateY(12px) rotate(var(--r));
  transition: opacity 420ms ease, transform 420ms ease, border-color 180ms ease;
}

.sprawl-item.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--r));
}

.sprawl-item:hover {
  border-color: rgba(232, 138, 0, 0.4);
}

.sprawl-item span,
.workspace-step span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sprawl-item strong {
  color: var(--cream);
  font-size: 15px;
  line-height: 1.18;
}

.sprawl-item small {
  color: rgba(255, 248, 240, 0.5);
  font-size: 12px;
}

.request-fragment {
  left: 28px;
  top: 82px;
  --r: -3deg;
}

.docs-fragment {
  right: 30px;
  top: 66px;
  --r: 5deg;
}

.sql-fragment {
  left: 134px;
  top: 188px;
  --r: 2deg;
}

.sheet-fragment {
  left: 34px;
  bottom: 108px;
  --r: 4deg;
}

.chart-fragment {
  right: 26px;
  top: 220px;
  --r: -5deg;
}

.deck-fragment {
  right: 88px;
  bottom: 48px;
  --r: -2deg;
}

.jira-fragment {
  right: 24px;
  top: 66px;
  --r: 4deg;
}

.email-fragment {
  left: 18px;
  top: 168px;
  --r: 3deg;
}

.catalog-fragment {
  right: 34px;
  top: 188px;
  --r: -4deg;
}

.notebook-fragment {
  right: 18px;
  top: 278px;
  --r: 5deg;
}

.looker-fragment {
  left: 22px;
  bottom: 168px;
  --r: -3deg;
}

.workspace-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: minmax(96px, auto);
  gap: 12px;
  padding: 18px;
}

.workspace-flow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(232, 138, 0, 0.86), transparent);
  box-shadow: 0 0 22px rgba(232, 138, 0, 0.22);
  transform: translateX(-50%);
}

.workspace-step {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 248, 240, 0.11);
  border-radius: 8px;
  background: rgba(5, 5, 5, 0.66);
  opacity: 0.88;
  transform: translateY(12px);
  transition: opacity 420ms ease, transform 420ms ease, border-color 180ms ease;
}

.workspace-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.workspace-step:hover {
  border-color: rgba(232, 138, 0, 0.44);
}

.workspace-step p,
.workspace-step code {
  margin: 0;
  color: rgba(255, 248, 240, 0.78);
  font-size: 13px;
  line-height: 1.38;
}

.workspace-step code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ask-step,
.sql-step {
  grid-column: 1;
}

.scope-step,
.artifact-step {
  grid-column: 2;
}

.publish-step {
  grid-column: 1 / -1;
  min-height: 76px;
}

.context-rail {
  position: absolute;
  left: 50%;
  top: 86px;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 154px;
  color: rgba(255, 248, 240, 0.54);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}

.context-rail small {
  display: none;
}

.context-rail b {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(232, 138, 0, 0.12), 0 0 28px rgba(232, 138, 0, 0.4);
  animation: contextPulse 2.4s ease-in-out infinite;
}

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

.fridaybot-section {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 88px 24px 92px;
  background:
    radial-gradient(circle at 82% 24%, rgba(232, 138, 0, 0.16), transparent 30%),
    linear-gradient(180deg, #050505 0%, #0b0a08 54%, #050505 100%);
}

.fridaybot-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 248, 240, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 240, 0.034) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.fridaybot-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(440px, 1.18fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.fridaybot-copy h2 {
  max-width: 600px;
  margin: 0;
  color: var(--cream);
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.fridaybot-copy p {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(255, 248, 240, 0.68);
  font-size: 18px;
  line-height: 1.55;
}

.fridaybot-visual {
  min-width: 0;
}

/* Harness window - mirrors .security-window grammar */
.harness-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 240, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 248, 240, 0.07), rgba(255, 248, 240, 0.015)),
    #0d0d0c;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.34);
}

.harness-window header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 248, 240, 0.12);
}

.harness-window header span {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.harness-window header strong {
  display: block;
  margin-top: 5px;
  color: var(--cream);
  font-size: 28px;
  line-height: 1.05;
}

.harness-window header em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(232, 138, 0, 0.28);
  border-radius: 999px;
  background: rgba(232, 138, 0, 0.09);
  color: #ffbd58;
  font-style: normal;
  font-size: 12px;
  font-weight: 760;
}

.harness-body {
  display: grid;
  gap: 0;
  padding: 22px;
}

.harness-track {
  border: 1px solid rgba(255, 248, 240, 0.12);
  background: rgba(255, 248, 240, 0.045);
}

.harness-track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 248, 240, 0.1);
}

.harness-track-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.harness-track-head strong {
  color: rgba(255, 248, 240, 0.86);
  font-size: 14px;
  text-align: right;
}

.harness-models {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
}

.harness-models span {
  padding: 7px 14px;
  border: 1px solid rgba(255, 248, 240, 0.16);
  color: rgba(255, 248, 240, 0.74);
  font-size: 13px;
  font-weight: 680;
}

.harness-models span.active {
  border-color: rgba(232, 138, 0, 0.5);
  background: rgba(232, 138, 0, 0.12);
  color: #ffbd58;
}

/* core track gets the accent treatment, like .analytics-track / .friday-lane */
.harness-track-core {
  border-color: rgba(232, 138, 0, 0.28);
  background:
    linear-gradient(135deg, rgba(232, 138, 0, 0.11), rgba(255, 248, 240, 0.045) 42%),
    rgba(8, 7, 6, 0.72);
}

.harness-workline {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
}

.harness-workline span {
  color: rgba(255, 248, 240, 0.86);
  font-size: 13px;
  font-weight: 720;
}

.harness-workline i {
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(232, 138, 0, 0.2), rgba(232, 138, 0, 0.86), rgba(232, 138, 0, 0.2));
  background-size: 200% 100%;
  animation: contextFlow 2.8s linear infinite;
}

.harness-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
}

.harness-context b {
  margin-right: 4px;
  color: rgba(255, 248, 240, 0.5);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.harness-context span {
  padding: 5px 11px;
  border: 1px solid rgba(255, 248, 240, 0.12);
  background: rgba(5, 5, 5, 0.4);
  color: rgba(255, 248, 240, 0.72);
  font-size: 12px;
}

/* vertical connector between tracks - mirrors .run-flow */
.harness-flow {
  display: grid;
  justify-items: center;
  height: 22px;
}

.harness-flow i {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(232, 138, 0, 0.12), rgba(232, 138, 0, 0.7), rgba(232, 138, 0, 0.12));
  background-size: 100% 200%;
  animation: contextFlowVert 2.8s linear infinite;
}

.harness-outputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.harness-token {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 248, 240, 0.13);
  background: rgba(5, 5, 5, 0.46);
}

.harness-token span {
  display: block;
  margin-bottom: 9px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.harness-token strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--cream);
  font-size: 14px;
  line-height: 1.3;
}

.harness-token small {
  display: block;
  margin-top: 9px;
  color: rgba(255, 248, 240, 0.58);
  font-size: 11.5px;
}

@keyframes contextFlowVert {
  from { background-position: 0 0; }
  to { background-position: 0 -200%; }
}

.beta-section {
  position: relative;
  width: min(1240px, calc(100% - 32px));
  margin: 86px auto 0;
  overflow: hidden;
  border: 1px solid rgba(232, 138, 0, 0.24);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 248, 240, 0.95), rgba(255, 251, 245, 0.88)),
    radial-gradient(circle at 74% 20%, rgba(232, 138, 0, 0.18), transparent 34%);
  color: #17140f;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.18);
}

.beta-shell {
  display: grid;
  grid-template-columns: minmax(240px, 0.88fr) minmax(340px, 1.12fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
  padding: 40px 44px;
}

.beta-copy {
  max-width: 480px;
}

.beta-copy h2 {
  margin: 0;
  color: #17140f;
  font-size: clamp(36px, 4.8vw, 58px);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.beta-copy p {
  max-width: 38ch;
  margin: 14px 0 0;
  color: #63594d;
  font-size: 17px;
  line-height: 1.45;
}

.beta-offer {
  display: grid;
  grid-template-columns: minmax(96px, 0.3fr) minmax(240px, 0.7fr);
  gap: 10px;
  width: 100%;
}

.beta-seat-count,
.beta-terms,
.beta-actions {
  border: 1px solid rgba(23, 20, 15, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.beta-seat-count {
  display: grid;
  align-content: center;
  padding: 14px 12px;
  text-align: center;
}

.beta-seat-count span,
.beta-terms b {
  color: #9a5a00;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.beta-seat-count strong {
  display: block;
  margin-top: 6px;
  color: #17140f;
  font-size: 56px;
  font-weight: 780;
  line-height: 0.9;
}

.beta-seat-count small {
  display: block;
  margin-top: 6px;
  color: #6d6256;
  font-size: 12px;
  font-weight: 700;
}

.beta-terms {
  display: grid;
  gap: 1px;
  overflow: hidden;
  background: rgba(23, 20, 15, 0.12);
}

.beta-terms div {
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.beta-terms b {
  display: block;
}

.beta-terms span {
  display: block;
  margin-top: 4px;
  color: #63594d;
  font-size: 12px;
  line-height: 1.3;
}

.beta-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
}

.beta-actions .cta-block {
  align-items: center;
}

.midpage-cta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 24px;
  background: var(--surface-butter);
}

.midpage-cta-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.midpage-cta-shell > p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.45;
}

.midpage-cta-shell .cta-block {
  width: 100%;
  max-width: 420px;
}

.faq-section {
  width: min(1240px, calc(100% - 32px));
  margin: 86px auto 0;
  padding: 0 24px;
}

.faq-shell {
  max-width: 760px;
  margin: 0 auto;
}

.faq-shell h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 36px;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 248, 240, 0.04);
  overflow: hidden;
  transition: border-color 160ms ease;
}

.faq-list details[open] {
  border-color: rgba(232, 138, 0, 0.4);
}

.faq-list summary {
  position: relative;
  padding: 18px 44px 18px 20px;
  color: var(--cream);
  font-size: 16px;
  font-weight: 680;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 160ms ease, border-color 160ms ease;
}

.faq-list details[open] summary {
  color: var(--accent);
}

.faq-list details[open] summary::after {
  border-color: var(--accent);
  transform: translateY(-35%) rotate(-135deg);
}

.faq-list details p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.sticky-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 19;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(53, 18, 5, 0.1);
  background: rgba(255, 248, 222, 0.97);
  backdrop-filter: blur(18px);
}

.sticky-cta.is-visible {
  display: block;
}

.sticky-cta[hidden] {
  display: none !important;
}

.sticky-cta .cta-block {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

body.has-sticky-cta {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

.site-footer {
  width: 100%;
  margin: 72px auto 0;
  padding: 0 24px max(56px, 12vh);
  background: #050505;
}

.footer-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 30px 0 0;
  border-top: 1px solid rgba(255, 248, 240, 0.16);
}

.footer-shell strong {
  display: block;
  color: #fff8f0;
  font-size: 18px;
}

.footer-shell p {
  max-width: 560px;
  margin: 8px 0 0;
  color: rgba(255, 248, 240, 0.62);
  font-size: 14px;
}

.footer-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 248, 240, 0.14);
  border-radius: 999px;
  color: #fff8f0;
  font-size: 14px;
  font-weight: 650;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.footer-links a:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 138, 0, 0.52);
  background: rgba(232, 138, 0, 0.1);
}

@keyframes tablePulse {
  50% { border-color: rgba(232, 138, 0, 0.48); background: #fff8f0; }
}

@keyframes cursorBlink {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

@keyframes heroTransformSignal {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes transformBars {
  50% { transform: scaleY(0.82); transform-origin: bottom; }
}

@keyframes statusPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes studioStatusPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 138, 0, 0.32);
    transform: scale(0.9);
  }

  72% {
    box-shadow: 0 0 0 9px rgba(232, 138, 0, 0);
    transform: scale(1);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(232, 138, 0, 0);
    transform: scale(0.9);
  }
}

@keyframes tableLink {
  to { background-position: 14px 0; }
}

@keyframes barLift {
  50% { transform: scaleY(0.86); transform-origin: bottom; }
}

@keyframes hoverRail {
  to { transform: translateX(35%); }
}

@keyframes protocolDash {
  to { stroke-dashoffset: -96; }
}

@keyframes miniPrompt {
  50% { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(232, 138, 0, 0.12); }
}

@keyframes rowScan {
  50% { border-color: rgba(232, 138, 0, 0.54); background: rgba(232, 138, 0, 0.08); }
}

@keyframes contextFlow {
  to { background-position: -200% 0; }
}

@keyframes contextPulse {
  50% { transform: scale(1.16); box-shadow: 0 0 0 10px rgba(232, 138, 0, 0.08), 0 0 34px rgba(232, 138, 0, 0.48); }
}

@keyframes assembleNode {
  0% { transform: translate(var(--from-x), var(--from-y)) scale(0.82); opacity: 0; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes coreLock {
  0%, 100% { border-color: rgba(232, 138, 0, 0.46); transform: translate(-50%, -50%) scale(1); }
  42%, 72% { border-color: rgba(255, 248, 240, 0.58); transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes messageRise {
  50% { transform: translateY(-3px); }
}

@keyframes scrollThumb {
  50% { transform: translateY(105px); }
}

@media (min-width: 821px) {
  .sticky-cta {
    display: none !important;
  }

  body.has-sticky-cta {
    padding-bottom: 0;
  }
}

@media (max-width: 1100px) {
  .site-header {
    padding: 0 24px;
  }

  nav {
    gap: 20px;
    font-size: 13px;
  }
}

@media (max-width: 960px) {
  .site-header {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "brand cta menu";
  }

  nav {
    display: none;
  }

  .nav-link-secondary {
    display: none;
  }

  .nav-actions {
    display: contents;
  }

  .nav-actions .hero-cta {
    grid-area: cta;
    justify-self: center;
    min-height: 40px;
    max-width: min(260px, calc(100vw - 148px));
    padding: 0 16px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .mobile-nav {
    display: block;
    grid-area: menu;
    justify-self: end;
  }
}

@media (max-width: 820px) {
  .site-header {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand menu";
    min-height: 68px;
    padding: 0 16px;
  }

  nav {
    display: none;
  }

  .nav-actions .hero-cta {
    display: none;
  }

  .nav-link-secondary {
    display: none;
  }

  .brand {
    font-size: 17px;
  }

  .brand img {
    width: 28px;
    height: 28px;
  }

  .ide-line {
    font-size: 0.86em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .d-expander {
    max-width: calc(100% - 2em);
  }

  .hero {
    min-height: 92vh;
    min-height: 92svh;
    padding: 104px 18px 64px;
  }

  .hero-kicker {
    margin-bottom: 18px;
    font-size: 14px;
  }

  h1 {
    font-size: clamp(46px, 12.5vw, 82px);
    letter-spacing: -0.03em;
  }

  .hero-copy {
    margin-top: 26px;
    max-width: 620px;
    font-size: 17px;
  }

  .hero-beta-cta {
    margin-top: 24px;
    gap: 12px;
  }

  .midpage-cta-section {
    width: calc(100% - 32px);
    padding: 36px 16px;
  }

  .faq-section {
    width: calc(100% - 32px);
    margin-top: 58px;
  }

  .workflow-run-console {
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 32px);
    margin-bottom: 32px;
    padding: 8px;
  }

  .run-flow {
    display: none;
  }

  .run-ask,
  .run-panel {
    flex: 1 1 auto;
    width: 100%;
  }

  .run-panel {
    padding: 8px;
  }

  .run-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .developer-section {
    padding: 76px 16px 84px;
  }

  .developer-shell {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .developer-copy h2 {
    font-size: clamp(38px, 11vw, 64px);
  }

  .developer-copy p {
    max-width: none;
    font-size: 16px;
  }

  .security-section {
    padding: 78px 16px 86px;
  }

  .security-shell {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .security-copy h2 {
    font-size: clamp(38px, 10vw, 64px);
  }

  .security-copy p {
    max-width: none;
    font-size: 16px;
  }

  .security-stage {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.38fr);
  }

  .context-engine-section {
    padding: 78px 16px 86px;
  }

  .context-engine-shell {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .context-engine-copy h2 {
    font-size: clamp(38px, 10vw, 64px);
  }

  .context-engine-copy p {
    max-width: none;
    font-size: 16px;
  }

  .context-studio-board {
    min-height: 610px;
  }

  .studio-shot {
    width: min(64%, 480px);
  }

  .studio-shot.previous {
    --studio-offset-x: -168px;
  }

  .studio-shot.next {
    --studio-offset-x: 168px;
  }

  .table-shot .studio-product-frame,
  .notebook-frame,
  .saving-frame {
    min-height: 0;
  }

  .studio-table-pane {
    min-height: 330px;
  }

  .workflow-section {
    padding: 64px 14px 84px;
  }

  .comparison-section {
    padding: 64px 14px 72px;
  }

  .comparison-heading {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }

  .comparison-heading > span {
    margin-bottom: 0;
  }

  .comparison-heading h2 {
    font-size: clamp(32px, 9vw, 48px);
    line-height: 1.04;
  }

  .comparison-heading p {
    grid-column: 1;
    max-width: none;
    font-size: 16px;
    line-height: 1.48;
    margin-top: 2px;
  }

  .comparison-board {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .comparison-lane {
    padding: 16px;
    gap: 14px;
  }

  .comparison-lane-head {
    margin: -16px -16px 0;
    padding: 14px 16px;
  }

  .comparison-lane-head strong {
    font-size: 13px;
  }

  .friday-lane {
    min-height: 0;
  }

  .operator-chip {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    width: fit-content;
  }

  .manual-lane {
    min-height: min(420px, 78vw);
    overflow: hidden;
  }

  .manual-lane .sprawl-item {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    width: min(168px, 38vw);
    min-height: 72px;
    padding: 10px;
  }

  .manual-lane .sprawl-item.is-visible {
    transform: translateY(0) rotate(var(--r));
  }

  .workspace-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
    padding: 14px;
  }

  .workspace-step {
    padding: 12px;
    gap: 7px;
  }

  .workspace-flow::before,
  .context-rail {
    display: none;
  }

  .ask-step,
  .sql-step {
    grid-column: 1;
  }

  .scope-step,
  .artifact-step {
    grid-column: 2;
  }

  .publish-step {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .comparison-spine {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    min-height: auto;
    padding: 22px 0;
  }

  .comparison-spine i {
    display: none;
  }

  .comparison-spine span {
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    height: 44px;
  }

  .workflow-row,
  .workflow-row.reverse {
    grid-template-columns: 1fr;
    gap: 22px;
    width: 100%;
    min-height: auto;
    margin-bottom: 24px;
    padding: 32px 18px;
  }

  .workflow-row::before {
    inset: 0;
    border-radius: 20px;
  }

  .workflow-row.reverse .workflow-copy {
    order: 0;
  }

  .workflow-copy p {
    max-width: none;
  }

  .workflow-copy {
    width: 100%;
    padding: 20px;
  }

  .friday-product-frame,
  .friday-shell {
    width: 100%;
    min-height: 0;
  }

  .real-sidebar {
    display: none;
  }

  .context-chat-shell .collapsed-sidebar {
    display: none;
  }

  .data-view,
  .chat-view-real {
    min-width: 0;
    padding: 16px;
  }

  .org-company-header-real {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }

  .org-company-header-real button {
    grid-column: 1 / -1;
    width: max-content;
  }

  .context-selection-grid {
    grid-template-columns: 1fr;
  }

  .with-artifacts {
    grid-template-columns: 1fr;
  }

  .app-shell-preview.with-artifacts {
    grid-template-columns: 1fr;
  }

  .context-chat-shell.with-artifacts {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .context-chat-shell .workspace-preview {
    min-height: 620px;
  }

  .preview-surface-real {
    min-height: 560px;
  }

  .preview-app-toolbar,
  .preview-surface-head {
    flex-direction: column;
    align-items: stretch;
  }

  .preview-controls {
    width: 100%;
  }

  .preview-controls select,
  .preview-controls button {
    flex: 1;
  }

  .preview-surface-real .widget-grid-real,
  .ppt-studio-real {
    grid-template-columns: 1fr;
  }

  .ppt-rail-real {
    border-right: 0;
    border-bottom: 1px solid rgba(34, 34, 34, 0.08);
  }

  .artifact-panel-real {
    border-left: 0;
    border-top: 1px solid rgba(228, 216, 200, 0.9);
  }

  .artifact-head {
    flex-wrap: wrap;
  }

  .fridaybot-section {
    width: min(100% - 16px, 1240px);
    margin-top: -28px;
  }

  .fridaybot-shell {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fridaybot-copy h2 {
    font-size: clamp(32px, 8vw, 50px);
  }

  .fridaybot-copy p,
  .footer-shell p {
    font-size: 15px;
  }

  .harness-window header strong {
    font-size: 24px;
  }

  .beta-section {
    width: min(100% - 16px, 760px);
    margin-top: 58px;
  }

  .beta-shell {
    grid-template-columns: 1fr;
    padding: 34px 24px;
  }

  .beta-copy {
    max-width: none;
    text-align: center;
  }

  .beta-copy p {
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
  }

  .beta-offer {
    grid-template-columns: 1fr;
  }

  .beta-terms {
    grid-template-columns: 1fr;
  }

  .beta-actions {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .site-footer {
    width: 100%;
    margin-bottom: 0;
    padding: 0 16px 42px;
  }

  .footer-shell {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .site-header {
    min-height: 64px;
    padding: 0 12px;
  }

  .site-header .nav-actions .hero-cta {
    min-height: 38px;
    max-width: min(220px, calc(100vw - 120px));
    padding: 6px 12px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .workflow-section {
    padding: 48px 10px 72px;
  }

  .developer-section {
    padding: 62px 12px 70px;
  }

  .developer-copy h2 {
    font-size: clamp(34px, 12vw, 52px);
  }

  .security-section {
    padding: 64px 12px 72px;
  }

  .security-window header {
    flex-direction: column;
  }

  .security-stage {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 16px 14px;
  }

  .security-device {
    min-height: 218px;
  }

  .security-device::before {
    inset: 42px 18px 24px;
  }

  .security-device-screen {
    min-height: 174px;
    padding: 30px 24px 28px 112px;
  }

  .security-lock-mark {
    left: 26px;
    width: 58px;
    height: 48px;
  }

  .security-lock-mark::before {
    left: 12px;
    right: 12px;
    top: -22px;
    height: 28px;
  }

  .security-device-screen strong {
    font-size: clamp(27px, 8vw, 38px);
    min-height: 2.04em;
  }

  .security-controls {
    min-height: auto;
    padding: 0;
    border-left: 0;
  }

  .security-detail {
    min-height: 168px;
    margin: 16px 0 0;
  }

  .context-engine-section {
    padding: 64px 12px 72px;
  }

  .context-studio-board {
    min-height: 650px;
  }

  .studio-shot,
  .table-shot,
  .memory-shot,
  .saving-shot {
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(100%, 366px);
    height: 560px;
  }

  .studio-shot.active {
    --studio-offset-x: 0px;
    --studio-offset-y: 20px;
  }

  .studio-shot.previous {
    opacity: 0;
    --studio-offset-x: -24px;
    --studio-offset-y: -10px;
  }

  .studio-shot.next {
    opacity: 0;
    --studio-offset-x: 24px;
    --studio-offset-y: -10px;
  }

  .context-studio-board:hover .studio-shot:not(:hover):not(:focus-within) {
    filter: none;
  }

  .studio-carousel-prev {
    left: 0;
  }

  .studio-carousel-next {
    right: 0;
  }

  .studio-frame-caption strong {
    font-size: 12px;
  }

  .studio-frame-top {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 12px;
  }

  .studio-frame-top em {
    display: none;
  }

  .studio-table-pane {
    grid-template-columns: 1fr;
    height: calc(100% - 48px);
    min-height: 0;
  }

  .studio-table-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(182px, 1fr);
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 20, 15, 0.1);
    padding: 10px;
  }

  .studio-table-row {
    min-width: 182px;
  }

  .studio-table-detail {
    padding: 14px;
  }

  .studio-table-detail header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .studio-column-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .studio-chat-surface .message {
    max-width: 100%;
  }

  .studio-product-frame {
    height: 514px;
  }

  .agent-track-head,
  .analytics-workspace-viz {
    padding: 14px;
  }

  .analytics-evidence-row {
    grid-template-columns: 1fr;
  }

  .agent-workline {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .agent-workline span {
    padding: 6px 8px;
    border: 1px solid rgba(255, 248, 240, 0.1);
    background: rgba(255, 248, 240, 0.045);
  }

  .agent-workline i {
    display: none;
  }

  .comparison-section {
    padding: 56px 10px 64px;
  }

  .comparison-lane {
    padding: 14px;
  }

  .comparison-heading h2 {
    font-size: clamp(28px, 10vw, 40px);
  }

  .comparison-heading p,
  .workspace-step p,
  .workspace-step code {
    font-size: 14px;
  }

  .workspace-flow {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .ask-step,
  .scope-step,
  .sql-step,
  .artifact-step,
  .publish-step {
    grid-column: 1;
  }

  .workflow-row,
  .workflow-row.reverse {
    gap: 16px;
    padding: 22px 12px;
    border-radius: 18px;
  }

  .workflow-row::before {
    border-radius: 18px;
    background-size: auto, 178%;
  }

  .workflow-copy {
    padding: 18px;
    border-radius: 18px;
  }

  .workflow-row .step-node {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
  }

  .friday-product-frame,
  .friday-shell,
  .preview-app-real {
    min-height: 0;
  }

  .workflow-run-console {
    top: calc(76px + 6px);
    width: calc(100% - 24px);
    margin-bottom: 20px;
    padding: 8px;
  }

  .run-panel-head {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .run-status {
    max-width: 52%;
  }

  .run-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .run-step {
    flex: initial;
    min-height: 34px;
    padding: 6px 5px;
    scroll-snap-align: unset;
  }

  .workflow-run-console .run-step span {
    font-size: 12px;
  }

  .run-step strong,
  .run-step code {
    font-size: 11px;
  }

  .hero-beta-cta {
    width: min(100%, 320px);
  }

  .hero-copy {
    font-size: 16px;
  }

  .cta-block {
    width: 100%;
  }

  .cta-block .hero-cta {
    width: 100%;
  }

  .org-company-header-real strong,
  .workspace-label,
  .preview-app-toolbar strong {
    font-size: 18px;
  }

  .data-tabs-real,
  .source-carousel,
  .artifact-head,
  .preview-controls {
    gap: 8px;
  }

  .context-run-flow {
    margin-top: 12px;
    gap: 10px;
    padding-bottom: 0;
  }

  .context-question-bubble {
    width: auto;
    margin-left: 0;
  }

  .context-answer-card {
    padding: 12px;
  }

  .context-answer-card header {
    display: grid;
    gap: 4px;
  }

  .context-answer-card header strong {
    font-size: 16px;
  }

  .chat-context-grid {
    grid-template-columns: 1fr;
  }

  .message,
  .sql-details-real,
  .composer-real {
    max-width: 100%;
  }

  .preview-surface-real {
    min-height: 0;
  }

  .preview-surface-real .dashboard-canvas-real {
    padding: 12px;
  }

  .beta-section {
    width: min(100% - 20px, 520px);
    border-radius: 18px;
  }

  .beta-shell {
    padding: 24px;
  }

  .beta-copy h2 {
    font-size: clamp(32px, 10vw, 46px);
  }

  .beta-seat-count strong {
    font-size: 48px;
  }

  .harness-outputs {
    grid-template-columns: 1fr;
  }

  .harness-workline {
    gap: 8px;
    padding: 16px 12px;
  }

  .harness-workline span {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-wallpaper {
    mix-blend-mode: normal;
    opacity: 0.96;
  }

  .workflow-wallpaper {
    display: none;
  }
}

.friday-product-frame .friday-context-reply {
  width: fit-content;
  max-width: 92%;
  margin: 0 0 10px;
  padding: 8px 13.6px;
  border: 0;
  border-left: 3px solid #e88a00;
  border-radius: 4px 12px 12px 12px;
  background: #fff8f0;
  color: #1a1a1a;
  box-shadow: none;
  font-family: var(--font-app-ui);
  font-size: 12.6px;
  line-height: 1.4;
}

.workflow-row.data-row .context-answer-card.friday-context-reply {
  width: min(100%, 520px);
  max-width: 100%;
  padding: 8px 13.6px;
}

.friday-context-reply .reply-author {
  display: block;
  margin: 0 0 6px;
  color: #1a1a1a;
  font-family: var(--font-app-ui);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
}

.friday-context-reply .chat-context-card {
  display: grid;
  gap: 8px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

.friday-context-reply .chat-context-card header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 16px;
}

.friday-context-reply .chat-context-card header b {
  color: #1a1a1a;
  font-family: var(--font-app-ui);
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.2;
}

.friday-context-reply .chat-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(130px, 0.92fr);
  gap: 8px;
}

.friday-context-reply .chat-context-grid em {
  display: block;
  margin: 0 0 4px;
  color: #e88a00;
  font-family: var(--font-app-ui);
  font-size: 9px;
  font-style: normal;
  font-weight: 780;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.friday-context-reply .chat-context-grid p,
.friday-context-reply .chat-context-grid ul {
  margin: 4px 0 0;
}

.friday-context-reply .chat-context-grid p {
  color: #60574c;
  font-family: var(--font-app-ui);
  font-size: 11px;
  line-height: 1.35;
}

.friday-context-reply .chat-context-grid p b {
  display: block;
  color: #1a1a1a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 780;
}

.friday-context-reply .chat-context-grid ul {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}

.friday-context-reply .chat-context-grid li {
  position: relative;
  padding-left: 11px;
  color: #60574c;
  font-family: var(--font-app-ui);
  font-size: 11px;
  line-height: 1.35;
}

.friday-context-reply .chat-context-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #e88a00;
}

@media (max-width: 640px) {
  .friday-context-reply .chat-context-grid {
    grid-template-columns: 1fr;
  }
}

.context-chat-shell .chat-scroll-real {
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
}

.context-chat-shell .message {
  animation: none;
}

.context-chat-shell .friday-message {
  background: #fff8f0;
  color: #1a1a1a;
  border-left: 3px solid #e88a00;
  border-radius: 4px 12px 12px 12px;
  padding: 8px 13.6px;
  box-shadow: none;
  font-family: var(--font-app-ui);
  font-size: 12px;
  line-height: 1.4;
}

.context-chat-shell .friday-message > strong,
.context-chat-shell .friday-message .reply-author {
  display: block;
  margin: 0 0 4px;
  color: #1a1a1a;
  font-family: var(--font-app-ui);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
}

/* Direct-child `> p` only (matching the `> strong` rule above): the context
   card styles its own metadata via `.friday-context-reply .chat-context-grid p`,
   the same rule step 1 uses. A descendant `p` here leaks into that card and
   darkens the metadata to the bold name color, collapsing the hierarchy. */
.context-chat-shell .friday-message > p {
  color: #1a1a1a;
  font-family: var(--font-app-ui);
  font-size: 12px;
  line-height: 1.4;
}

.workspace-viz-card,
.viz-card-real {
  overflow: hidden;
  min-width: 0;
  margin-top: 0;
  border: 1px solid #e0d4c4;
  border-radius: 8px;
  background: #fffbf5;
  color: #171717;
  font-family: var(--font-app-ui);
  font-size: 12px;
  box-shadow: none;
}

.workspace-viz-card .card-header-real,
.viz-card-real .card-header-real {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f5ede3;
  border-bottom: 1px solid #e0d4c4;
}

.workspace-viz-card .card-header-real span,
.viz-card-real .card-header-real span {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e88a00;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: lowercase;
}

.workspace-viz-card.insight-card .card-header-real span,
.viz-card-real.insight-card .card-header-real span,
.artifact-insight-card .card-header-real span {
  background: #2d7d9a;
}

.workspace-viz-card .number-body,
.viz-card-real .number-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
}

.workspace-viz-card .number-value,
.viz-card-real .number-value {
  color: #e88a00;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.workspace-viz-card .number-label,
.viz-card-real .number-label {
  color: #767676;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}

.workspace-viz-card .insight-body,
.viz-card-real .insight-body {
  padding: 10px 12px;
}

.workspace-viz-card .insight-text,
.viz-card-real .insight-text {
  color: #60574c;
  font-size: 11.5px;
  line-height: 1.45;
}

.workspace-viz-card .insight-text p,
.viz-card-real .insight-text p {
  margin: 0 0 4px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.chart-card-real {
  display: grid;
  grid-template-rows: auto auto auto;
}

.chart-title-real,
.artifact-chart-card > b {
  padding: 9px 10px 0;
  color: #171717;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.panel-chart-real {
  min-height: 118px;
}

.context-chat-shell .live-artifacts {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fffbf5;
}

.context-chat-shell .artifact-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 12px;
  border-bottom: 1px solid #e0d4c4;
  background: #ffffff;
}

.context-chat-shell .artifact-head strong {
  color: #171717;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.1;
}

.context-chat-shell .live-artifacts article {
  margin: 10px 12px 0;
  padding: 0;
}

.context-chat-shell .live-artifacts article:last-child {
  margin-bottom: 12px;
}

.context-chat-shell .live-artifacts .number-card {
  min-height: 96px;
}

.context-chat-shell .live-artifacts .number-card .number-body {
  padding: 13px 10px 14px;
}

.context-chat-shell .live-artifacts .chart-card-real {
  min-height: 144px;
}

.context-chat-shell .live-artifacts .insight-card {
  min-height: 92px;
}

.output-preview-frame .preview-app-real {
  background: #fffbf5;
  color: #171717;
  font-family: var(--font-app-ui);
}

.output-preview-frame .preview-app-toolbar {
  min-height: 66px;
  padding: 14px 18px;
  border-bottom: 1px solid #e0d4c4;
  background: #ffffff;
}

.output-preview-frame .preview-app-toolbar span:not(.workflow-action-hint-chip) {
  color: #6f6254;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.output-preview-frame .preview-app-toolbar strong {
  color: #171717;
  font-size: 22px;
  font-weight: 750;
  line-height: 1.1;
}

.output-preview-frame .preview-controls select,
.output-preview-frame .preview-controls button {
  height: 34px;
  border-radius: 12px;
  font-family: var(--font-app-ui);
  font-size: 12px;
  font-weight: 750;
}

.output-preview-frame .preview-controls select {
  border: 1px solid #d8cdbf;
  background: #ffffff;
  color: #6f6254;
}

.output-preview-frame .preview-controls button {
  border: 1px solid #e88a00;
  background: #e88a00;
  color: #ffffff;
}

.preview-surface-real {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #f7f6f2;
}

.preview-surface-real .dashboard-canvas-real {
  overflow: auto;
  padding: 16px 18px 20px;
  background: #f7f6f2;
}

.preview-surface-real .dashboard-hero-real {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid #e0d4c4;
  border-radius: 14px;
  background: #ffffff;
}

.preview-surface-real .dashboard-hero-real h4 {
  margin: 0;
  color: #171717;
  font-size: 26px;
  font-weight: 760;
  line-height: 1.1;
}

.preview-surface-real .dashboard-hero-real p {
  max-width: 680px;
  margin: 8px 0 0;
  color: #6f6254;
  font-size: 12px;
  line-height: 1.45;
}

.preview-surface-real .widget-grid-real {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.preview-surface-real .dashboard-widget-real {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.preview-surface-real .dashboard-widget-real.size-compact,
.preview-surface-real .dashboard-widget-real.size-standard {
  grid-column: span 2;
}

.preview-surface-real .dashboard-widget-real.size-wide {
  grid-column: 1 / -1;
}

.preview-surface-real .dashboard-widget-real .viz-card-real {
  height: 100%;
  border-radius: 12px;
}

.preview-surface-real .dashboard-widget-real.type-metric .viz-card-real,
.preview-surface-real .dashboard-widget-real.type-insight .viz-card-real {
  min-height: 118px;
}

.preview-surface-real .dashboard-widget-real.type-chart .viz-card-real {
  min-height: 206px;
}

.preview-surface-real .dashboard-widget-real .number-body {
  padding: 18px 14px;
}

.preview-surface-real .dashboard-widget-real .number-value {
  color: #e88a00;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: none;
}

.preview-surface-real .dashboard-widget-real .number-label {
  color: #767676;
  font-size: 12px;
}

.preview-surface-real .dashboard-widget-real .insight-body {
  padding: 14px 16px;
}

.preview-surface-real .dashboard-widget-real .insight-text p {
  color: #60574c;
  font-size: 13px;
  line-height: 1.45;
}

.ppt-studio-real {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
  background: #f7f6f2;
}

.ppt-studio-real[hidden] {
  display: none;
}

.ppt-rail-real {
  overflow: auto;
  padding: 12px;
  border-right: 1px solid #e0d4c4;
  background: #ffffff;
}

.ppt-rail-real > strong {
  display: block;
  margin: 0 0 10px;
  color: #171717;
  font-size: 14px;
  font-weight: 750;
}

.ppt-rail-real button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 9px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid #e0d4c4;
  border-radius: 10px;
  background: #fffbf5;
  color: #171717;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.ppt-rail-real button.active,
.ppt-rail-real button:hover {
  border-color: rgba(232, 138, 0, 0.5);
  background: #fff8f0;
}

.ppt-rail-real button span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #f5ede3;
  color: #6f6254;
  font-size: 11px;
  font-weight: 750;
}

.ppt-rail-real button.active span {
  background: #e88a00;
  color: #ffffff;
}

.ppt-rail-real button strong {
  overflow: hidden;
  color: #171717;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppt-rail-real button em {
  color: #8a8177;
  font-size: 10px;
  font-style: normal;
  line-height: 1.2;
}

.ppt-stage-real {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px;
  background: #f7f6f2;
}

.preview-slide-real {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #d8cdbf;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 54px rgba(36, 26, 18, 0.12);
  padding: 42px 52px;
}

.preview-slide-real h4 {
  max-width: 420px;
  margin: 0;
  color: #171717;
  font-size: 34px;
  font-weight: 760;
  line-height: 1.05;
}

.preview-slide-real p {
  max-width: 360px;
  margin: 14px 0 0;
  color: #5f554b;
  font-size: 14px;
  line-height: 1.45;
}

.slide-chart-real {
  position: absolute;
  right: 52px;
  bottom: 40px;
  left: 52px;
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 12px;
  height: 112px;
  border-bottom: 1px solid #d8cdbf;
}

.slide-chart-real i {
  width: 38px;
  border-radius: 6px 6px 0 0;
  background: #e88a00;
}

.slide-chart-real i:nth-child(1) { height: 66px; }
.slide-chart-real i:nth-child(2) { height: 104px; }
.slide-chart-real i:nth-child(3) { height: 82px; }
.slide-chart-real i:nth-child(4) { height: 48px; }

.slide-chart-real[data-variant=metric] {
  display: grid;
  place-items: center;
  border: 0;
  height: 132px;
  color: #e88a00;
}

.slide-chart-real[data-variant=metric]::before {
  content: "-6.4 pts";
  font-size: 52px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.slide-chart-real[data-variant=conclusion] {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  border: 0;
  gap: 8px;
}

.slide-chart-real[data-variant=conclusion]::before,
.slide-chart-real[data-variant=conclusion]::after {
  content: "";
  height: 16px;
  border-radius: 999px;
  background: #e88a00;
}

.output-preview-frame .studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 9px 17px;
  border-bottom: 1px solid #e0d4c4;
  background: #ffffff;
}

.output-preview-frame .toolbar-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.output-preview-frame .preview-toolbar-title {
  margin: 0;
  color: #171717;
  font-family: var(--font-app-ui);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.1;
}

.output-preview-frame .toolbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.output-preview-frame .toolbar-actions .mode-select {
  height: 30px;
  min-height: 30px;
  max-width: 104px;
  padding: 0 24px 0 9px;
  border: 1px solid #d8cdbf;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #4f453b;
  font-family: var(--font-app-ui);
  font-size: 11px;
  font-weight: 700;
}

.output-preview-frame .toolbar-actions .icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid #d8cdbf;
  border-radius: 8px;
  background: #ffffff;
  color: #6f6254;
  font-family: var(--font-app-ui);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.output-preview-frame .toolbar-actions .icon-action.secondary:hover,
.output-preview-frame .toolbar-actions .mode-select:hover {
  border-color: #e1be86;
  background: #fff8f0;
}

.output-preview-frame .toolbar-actions {
  gap: 7px;
}

.output-preview-frame .toolbar-actions .icon-action.edit-action {
  width: 32px;
  min-width: 32px;
  padding: 0;
  font-size: 14px;
}

.preview-surface-real .dashboard-canvas-real,
.preview-surface-real .ppt-studio-real {
  flex: 1 1 auto;
}

.preview-surface-real .dashboard-hero-real {
  position: relative;
  overflow: visible;
}

.preview-surface-real .dashboard-hero-real .hero-copy {
  max-width: 1120px;
  /* Reset the 30px top margin that the page-hero .hero-copy rule leaks in;
     the dashboard hero spaces itself with its own padding. */
  margin: 0;
}

.preview-surface-real .dashboard-hero-real .editable-dashboard-block h4 {
  margin: 0;
  color: #171717;
  font-size: 26px;
  font-weight: 760;
  line-height: 1.1;
}

.preview-surface-real .dashboard-hero-real .editable-dashboard-block p {
  max-width: 680px;
  margin: 8px 0 0;
  color: #6f6254;
  font-size: 12px;
  line-height: 1.45;
}

@keyframes dashboardBusyReveal {
  0%, 38% { opacity: 1; }
  52%, 100% { opacity: 0; }
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-body {
  min-height: 0;
  padding: 14px 10px 16px;
  justify-content: center;
  box-sizing: border-box;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-value {
  font-size: 28px;
  line-height: 1.05;
  white-space: nowrap;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.output-preview-frame .toolbar-actions .icon-action.edit-action {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border-color: rgba(224, 212, 196, 0.95);
  background: #fffdf9;
  color: #171717;
}

.output-preview-frame .toolbar-actions .icon-action.edit-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep the output preview toolbar a single compact row at every width.
   The generic .preview-app-toolbar/.preview-controls rules (used by another
   surface) stack this toolbar into a column and stretch the controls to full
   width below 820px; the output toolbar's content fits on one row, so opt out. */
.output-preview-frame .studio-toolbar {
  flex-direction: row;
}

.output-preview-frame .toolbar-actions.preview-controls {
  width: auto;
}

.output-preview-frame .toolbar-actions .mode-select,
.output-preview-frame .toolbar-actions .icon-action {
  flex: 0 0 auto;
}

.context-chat-shell .live-artifacts .artifact-metric-card {
  min-height: 118px;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-body {
  min-height: 76px;
  gap: 6px;
  padding: 12px 10px 14px;
  align-items: center;
  justify-content: center;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-value {
  font-size: 27px;
  line-height: 1.05;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-label {
  display: block;
  width: 100%;
  max-width: 150px;
  overflow: visible;
  color: #767676;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.preview-surface-real .dashboard-canvas-real {
  padding: 12px 16px 16px;
}

.preview-surface-real .dashboard-hero-real {
  min-height: 0;
  margin-bottom: 10px;
  padding: 13px 15px;
}

.preview-surface-real .dashboard-hero-real .editable-dashboard-block h4 {
  font-size: 23px;
  line-height: 1.06;
}

.preview-surface-real .dashboard-hero-real .editable-dashboard-block p {
  max-width: 720px;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.35;
}

.preview-surface-real .widget-grid-real {
  gap: 10px;
}

.preview-surface-real .dashboard-widget-real.type-metric .viz-card-real,
.preview-surface-real .dashboard-widget-real.type-insight .viz-card-real {
  min-height: 108px;
}

.preview-surface-real .dashboard-widget-real .number-body {
  min-height: 72px;
  padding: 13px 12px 14px;
}

.preview-surface-real .dashboard-widget-real .number-value {
  font-size: 36px;
}

.preview-surface-real .dashboard-widget-real .insight-body {
  min-height: 72px;
  padding: 12px 14px;
}

.preview-surface-real .dashboard-widget-real .insight-text p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.38;
}

.preview-surface-real .dashboard-widget-real.type-chart .viz-card-real {
  min-height: 196px;
}

.ppt-studio-real {
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: 392px;
  background: #f7f3ec;
}

.ppt-rail-real {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #fffdf9;
}

.ppt-rail-heading {
  display: grid;
  gap: 2px;
  padding: 4px 4px 6px;
}

.ppt-rail-heading strong {
  margin: 0;
  color: #171717;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.1;
}

.ppt-rail-heading span {
  color: #776d62;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.25;
}

.ppt-rail-list {
  display: grid;
  gap: 8px;
}

.ppt-rail-real .ppt-rail-list button {
  margin: 0;
}

.ppt-stage-real {
  display: grid;
  place-items: center;
  min-height: 392px;
  padding: 18px;
  background:
    radial-gradient(circle at 22% 14%, rgba(232, 138, 0, 0.12), transparent 30%),
    linear-gradient(135deg, #f7f3ec 0%, #fffdf9 100%);
}

.preview-slide-real {
  width: min(100%, 580px);
  aspect-ratio: 16 / 9;
  min-height: 0;
  padding: 34px 38px;
  border: 1px solid #e0d4c4;
  border-radius: 10px;
  background: #fffdf9;
  box-shadow: 0 22px 50px rgba(32, 24, 14, 0.12);
}

.preview-slide-real h4 {
  max-width: 420px;
  margin: 0 0 12px;
  color: #171717;
  font-size: 33px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.preview-slide-real p {
  max-width: 440px;
  margin: 0 0 20px;
  color: #675c50;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.slide-chart-real {
  margin-top: 8px;
}
.output-preview-frame .studio-toolbar {
  align-items: flex-start;
}

.output-preview-frame .toolbar-title-row {
  flex: 1 1 auto;
  align-items: flex-start;
}

.preview-surface-real .ppt-studio-real {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  background: #f7f3ec;
}

.preview-surface-real .ppt-stage-real {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 520px;
  padding: 34px 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(232, 138, 0, 0.14), transparent 32%),
    linear-gradient(135deg, #f7f3ec 0%, #fffdf9 100%);
}

.preview-surface-real .preview-slide-real {
  position: relative;
  box-sizing: border-box;
  display: grid;
  width: min(760px, 92%);
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 48px 56px;
  overflow: hidden;
  border: 1px solid #e0d4c4;
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 24px 52px rgba(36, 26, 18, 0.12);
  transform: none;
}

.preview-surface-real .preview-slide-real h4 {
  margin: 0;
  color: #171717;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 820;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.preview-surface-real .preview-slide-real p {
  margin: 16px 0 0;
  color: #675c50;
  font-size: 16px;
  font-weight: 680;
  line-height: 1.35;
}

.preview-surface-real .slide-chart-real {
  position: static !important;
  inset: auto !important;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

.preview-surface-real .slide-chart-real i {
  display: block;
  flex: 0 0 auto;
  width: 36px;
  border-radius: 8px 8px 0 0;
  background: #e88a00;
}

.preview-surface-real .slide-chart-real i:nth-child(1) { height: 64px; }
.preview-surface-real .slide-chart-real i:nth-child(2) { height: 108px; }
.preview-surface-real .slide-chart-real i:nth-child(3) { height: 84px; }
.preview-surface-real .slide-chart-real i:nth-child(4) { height: 52px; }

.preview-surface-real .preview-slide-real[data-slide-variant="title"] {
  grid-template-rows: auto auto;
  align-content: center;
}

.preview-surface-real .preview-slide-real[data-slide-variant="title"] h4 {
  max-width: 610px;
}

.preview-surface-real .preview-slide-real[data-slide-variant="title"] p {
  max-width: 560px;
}

.preview-surface-real .slide-chart-real[data-variant="title"] {
  display: none !important;
}

.preview-surface-real .slide-chart-real[data-variant="title"]::before,
.preview-surface-real .slide-chart-real[data-variant="title"]::after {
  content: none !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  max-width: 640px;
}

.preview-surface-real .slide-chart-real[data-variant="chart"] {
  position: relative !important;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
  align-self: end;
  min-height: 150px;
  padding: 0 34px 0 0;
}

.preview-surface-real .slide-chart-real[data-variant="chart"]::before {
  content: "Expansion by segment";
  position: absolute;
  right: 34px;
  bottom: 126px;
  color: #6f6254;
  font-size: 13px;
  font-weight: 760;
}

.preview-surface-real .slide-chart-real[data-variant="chart"]::after {
  content: none !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-rows: auto auto;
  column-gap: 38px;
  align-content: center;
  align-items: center;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] p {
  grid-column: 1;
  max-width: 450px;
}

.preview-surface-real .slide-chart-real[data-variant="metric"] {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 210px;
  height: 172px;
  padding: 16px;
  border: 1px solid rgba(232, 138, 0, 0.14);
  border-radius: 18px;
  background: #fff8f0;
}

.preview-surface-real .slide-chart-real[data-variant="metric"] i,
.preview-surface-real .slide-chart-real[data-variant="conclusion"] i {
  display: none !important;
}

.preview-surface-real .slide-chart-real[data-variant="metric"]::before {
  content: "-6.4\A pts";
  white-space: pre-line;
  color: #e88a00;
  font-size: 58px;
  font-weight: 840;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.preview-surface-real .slide-chart-real[data-variant="metric"]::after {
  content: "Enterprise expansion QoQ";
  max-width: 150px;
  color: #5c5348;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.15;
  text-align: center;
}

.preview-surface-real .preview-slide-real[data-slide-variant="conclusion"] {
  grid-template-rows: auto auto;
  align-content: center;
}

.preview-surface-real .preview-slide-real[data-slide-variant="conclusion"] h4 {
  max-width: 620px;
}

.preview-surface-real .preview-slide-real[data-slide-variant="conclusion"] p {
  display: none;
}

.preview-surface-real .slide-chart-real[data-variant="conclusion"] {
  display: block;
  margin-top: 26px;
}

.preview-surface-real .slide-chart-real[data-variant="conclusion"]::before,
.preview-surface-real .slide-chart-real[data-variant="conclusion"]::after {
  content: none !important;
}

.preview-surface-real .slide-chart-real[data-variant="conclusion"] ul {
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-surface-real .slide-chart-real[data-variant="conclusion"] li {
  position: relative;
  padding-left: 24px;
  color: #5f554b;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.35;
}

.preview-surface-real .slide-chart-real[data-variant="conclusion"] li::before {
  content: "";
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e88a00;
}

@media (max-width: 820px) {
  .preview-surface-real .ppt-studio-real {
    grid-template-columns: 1fr;
  }

  .preview-surface-real .ppt-stage-real {
    min-height: 420px;
    padding: 22px;
  }

  .preview-surface-real .preview-slide-real {
    width: min(560px, 94%);
    padding: 28px;
  }

  .preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .preview-surface-real .slide-chart-real[data-variant="metric"] {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

.friday-product-frame.output-preview-frame,
.output-preview-frame .preview-app-real,
.output-preview-frame .preview-surface-real,
.output-preview-frame .ppt-studio-real {
  width: 100%;
  max-width: none;
}

.output-preview-frame .preview-surface-real {
  display: flex;
  flex-direction: column;
}

.output-preview-frame .ppt-studio-real {
  flex: 1 1 auto;
  grid-template-columns: 260px minmax(680px, 1fr);
}

.output-preview-frame .ppt-stage-real {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  place-items: center;
}

.output-preview-frame .preview-slide-real {
  width: min(860px, 88%);
  min-width: min(720px, 88%);
  place-self: center;
}

.output-preview-frame .slide-chart-real {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.output-preview-frame .slide-chart-real[data-variant="chart"] {
  width: 100%;
  min-height: 156px;
  justify-content: flex-end;
}

.output-preview-frame .slide-chart-real[data-variant="conclusion"] {
  width: 100%;
}

.output-preview-frame .slide-chart-real[data-variant="conclusion"] ul {
  width: min(100%, 650px);
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] .slide-chart-real[data-variant="metric"] {
  width: 210px;
  min-width: 210px;
  justify-self: end;
}

@media (max-width: 920px) {
  .output-preview-frame .ppt-studio-real {
    grid-template-columns: 1fr;
  }

  .output-preview-frame .preview-slide-real {
    width: min(560px, 94%);
    min-width: 0;
  }
}

.output-preview-frame .ppt-studio-real,
.preview-surface-real .ppt-studio-real {
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.output-preview-frame .ppt-stage-real,
.preview-surface-real .ppt-stage-real {
  min-height: 0;
  height: 100%;
  padding: 20px 24px;
  overflow: hidden;
}

.output-preview-frame .preview-slide-real,
.preview-surface-real .preview-slide-real {
  width: min(620px, 90%);
  min-width: 0;
  max-width: 100%;
  max-height: calc(100% - 8px);
  padding: clamp(24px, 4vw, 42px) clamp(28px, 4.5vw, 52px);
}

.output-preview-frame .preview-slide-real[data-slide-variant="title"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="title"] h4 {
  font-size: clamp(30px, 4vw, 46px);
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4,
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4,
.output-preview-frame .preview-slide-real[data-slide-variant="conclusion"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="conclusion"] h4 {
  font-size: clamp(26px, 3vw, 38px);
}

.output-preview-frame .preview-slide-real p,
.preview-surface-real .preview-slide-real p {
  font-size: clamp(12px, 1.45vw, 15px);
}

.output-preview-frame .slide-chart-real[data-variant="chart"],
.preview-surface-real .slide-chart-real[data-variant="chart"] {
  min-height: 112px;
}

.output-preview-frame .slide-chart-real[data-variant="chart"]::before,
.preview-surface-real .slide-chart-real[data-variant="chart"]::before {
  bottom: 104px;
}

.output-preview-frame .slide-chart-real[data-variant="chart"] i,
.preview-surface-real .slide-chart-real[data-variant="chart"] i {
  width: 30px;
}

.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(1),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(1) { height: 48px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(2),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(2) { height: 84px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(3),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(3) { height: 66px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(4),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(4) { height: 42px; }

.output-preview-frame .slide-chart-real[data-variant="metric"],
.preview-surface-real .slide-chart-real[data-variant="metric"] {
  width: 176px;
  min-width: 176px;
  height: 140px;
}

.output-preview-frame .slide-chart-real[data-variant="metric"]::before,
.preview-surface-real .slide-chart-real[data-variant="metric"]::before {
  font-size: 48px;
}

.output-preview-frame .slide-chart-real[data-variant="conclusion"] li,
.preview-surface-real .slide-chart-real[data-variant="conclusion"] li {
  font-size: clamp(12px, 1.45vw, 15px);
}

@media (max-width: 920px) {
  .output-preview-frame .ppt-studio-real,
  .preview-surface-real .ppt-studio-real {
    grid-template-columns: 1fr;
  }
}

.preview-surface-real .dashboard-canvas-real[hidden],
.preview-surface-real .ppt-studio-real[hidden] {
  display: none !important;
}

.output-preview-frame .ppt-studio-real,
.preview-surface-real .ppt-studio-real {
  grid-template-columns: 224px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.output-preview-frame .ppt-stage-real,
.preview-surface-real .ppt-stage-real {
  height: 100%;
  min-height: 0;
  padding: 24px 32px;
}

.output-preview-frame .preview-slide-real,
.preview-surface-real .preview-slide-real {
  width: min(800px, 88%);
  aspect-ratio: 16 / 9;
  padding: 40px 48px;
  overflow: hidden;
}

.output-preview-frame .preview-slide-real h4,
.preview-surface-real .preview-slide-real h4 {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.02;
}

.output-preview-frame .preview-slide-real p,
.preview-surface-real .preview-slide-real p {
  font-size: clamp(13px, 1.35vw, 16px);
  line-height: 1.35;
}

.output-preview-frame .preview-slide-real[data-slide-variant="title"],
.preview-surface-real .preview-slide-real[data-slide-variant="title"] {
  grid-template-rows: auto auto;
  align-content: center;
}

.output-preview-frame .preview-slide-real[data-slide-variant="title"] .slide-chart-real,
.preview-surface-real .preview-slide-real[data-slide-variant="title"] .slide-chart-real {
  display: none !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"],
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-rows: auto auto;
  column-gap: 28px;
  align-content: center;
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"] h4,
.output-preview-frame .preview-slide-real[data-slide-variant="chart"] p,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  grid-column: 1;
  max-width: 420px;
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4,
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4 {
  font-size: clamp(28px, 3vw, 40px);
}

.output-preview-frame .slide-chart-real[data-variant="chart"],
.preview-surface-real .slide-chart-real[data-variant="chart"] {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  min-height: 150px;
  padding: 26px 0 0;
}

.output-preview-frame .slide-chart-real[data-variant="chart"]::before,
.preview-surface-real .slide-chart-real[data-variant="chart"]::before {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
}

.output-preview-frame .slide-chart-real[data-variant="chart"] i,
.preview-surface-real .slide-chart-real[data-variant="chart"] i {
  width: 34px;
}

.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(1),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(1) { height: 66px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(2),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(2) { height: 118px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(3),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(3) { height: 88px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(4),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(4) { height: 58px; }

.output-preview-frame .preview-slide-real[data-slide-variant="metric"],
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
  grid-template-columns: minmax(0, 1fr) 210px;
  grid-template-rows: auto auto;
  column-gap: 30px;
  align-content: center;
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] h4,
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] p,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] p {
  grid-column: 1;
  max-width: 390px;
}

.output-preview-frame .slide-chart-real[data-variant="metric"],
.preview-surface-real .slide-chart-real[data-variant="metric"] {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: 190px;
  min-width: 190px;
  height: 154px;
}

.output-preview-frame .slide-chart-real[data-variant="metric"]::before,
.preview-surface-real .slide-chart-real[data-variant="metric"]::before {
  font-size: 52px;
}

.output-preview-frame .preview-slide-real[data-slide-variant="conclusion"],
.preview-surface-real .preview-slide-real[data-slide-variant="conclusion"] {
  grid-template-rows: auto auto;
  align-content: center;
}

.output-preview-frame .preview-slide-real[data-slide-variant="conclusion"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="conclusion"] h4 {
  font-size: clamp(34px, 4vw, 52px);
}

.output-preview-frame .slide-chart-real[data-variant="conclusion"],
.preview-surface-real .slide-chart-real[data-variant="conclusion"] {
  margin-top: 22px;
  width: 100%;
}

.output-preview-frame .slide-chart-real[data-variant="conclusion"] ul,
.preview-surface-real .slide-chart-real[data-variant="conclusion"] ul {
  max-width: 640px;
}

.output-preview-frame .slide-chart-real[data-variant="conclusion"] li,
.preview-surface-real .slide-chart-real[data-variant="conclusion"] li {
  font-size: clamp(13px, 1.35vw, 16px);
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"],
.preview-surface-real .preview-slide-real[data-slide-variant="chart"],
.output-preview-frame .preview-slide-real[data-slide-variant="metric"],
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr);
  row-gap: 10px;
  align-content: stretch;
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"] h4,
.output-preview-frame .preview-slide-real[data-slide-variant="chart"] p,
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] h4,
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] p,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] p {
  grid-column: 1;
  max-width: 100%;
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4,
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.02;
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"] p,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p,
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] p,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] p {
  margin-top: 0;
  font-size: clamp(11px, 1.2vw, 13px);
  line-height: 1.3;
}

.output-preview-frame .slide-chart-real[data-variant="chart"],
.preview-surface-real .slide-chart-real[data-variant="chart"] {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  justify-self: stretch;
  min-height: 92px;
  padding-top: 18px;
  justify-content: flex-end;
}

.output-preview-frame .slide-chart-real[data-variant="chart"]::before,
.preview-surface-real .slide-chart-real[data-variant="chart"]::before {
  top: 0;
  right: 0;
  left: auto;
  transform: none;
  font-size: 11px;
}

.output-preview-frame .slide-chart-real[data-variant="chart"] i,
.preview-surface-real .slide-chart-real[data-variant="chart"] i {
  width: 28px;
}

.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(1),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(1) { height: 42px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(2),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(2) { height: 76px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(3),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(3) { height: 58px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(4),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(4) { height: 38px; }

.output-preview-frame .slide-chart-real[data-variant="metric"],
.preview-surface-real .slide-chart-real[data-variant="metric"] {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  justify-self: start;
  width: 168px;
  min-width: 168px;
  height: 126px;
}

.output-preview-frame .slide-chart-real[data-variant="metric"]::before,
.preview-surface-real .slide-chart-real[data-variant="metric"]::before {
  font-size: 42px;
}

.output-preview-frame .slide-chart-real[data-variant="metric"]::after,
.preview-surface-real .slide-chart-real[data-variant="metric"]::after {
  font-size: 10px;
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"],
.preview-surface-real .preview-slide-real[data-slide-variant="chart"],
.output-preview-frame .preview-slide-real[data-slide-variant="metric"],
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
  padding: 24px 28px;
  row-gap: 6px;
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4,
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4 {
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.02;
}

.output-preview-frame .preview-slide-real[data-slide-variant="chart"] p,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p,
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] p,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] p {
  font-size: 10.5px;
  line-height: 1.22;
}

.output-preview-frame .slide-chart-real[data-variant="chart"],
.preview-surface-real .slide-chart-real[data-variant="chart"] {
  min-height: 72px;
  padding-top: 14px;
  gap: 10px;
}

.output-preview-frame .slide-chart-real[data-variant="chart"]::before,
.preview-surface-real .slide-chart-real[data-variant="chart"]::before {
  font-size: 10px;
}

.output-preview-frame .slide-chart-real[data-variant="chart"] i,
.preview-surface-real .slide-chart-real[data-variant="chart"] i {
  width: 24px;
}

.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(1),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(1) { height: 32px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(2),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(2) { height: 58px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(3),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(3) { height: 44px; }
.output-preview-frame .slide-chart-real[data-variant="chart"] i:nth-child(4),
.preview-surface-real .slide-chart-real[data-variant="chart"] i:nth-child(4) { height: 30px; }

.output-preview-frame .slide-chart-real[data-variant="metric"],
.preview-surface-real .slide-chart-real[data-variant="metric"] {
  width: 138px;
  min-width: 138px;
  height: 96px;
  padding: 10px;
}

.output-preview-frame .slide-chart-real[data-variant="metric"]::before,
.preview-surface-real .slide-chart-real[data-variant="metric"]::before {
  font-size: 34px;
  line-height: 0.9;
}

.output-preview-frame .slide-chart-real[data-variant="metric"]::after,
.preview-surface-real .slide-chart-real[data-variant="metric"]::after {
  max-width: 110px;
  font-size: 8.5px;
}

.friday-echart-real {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
  min-height: 180px;
  padding: 28px 24px 42px 46px;
  background: #fffbf5;
  box-sizing: border-box;
}

.dashboard-echart {
  min-height: 246px;
  padding: 36px 36px 54px 58px;
}

.friday-echart-real::before {
  content: "";
  position: absolute;
  left: 46px;
  right: 20px;
  bottom: 40px;
  height: 1px;
  background: #e4d8c8;
}

.dashboard-echart::before {
  left: 58px;
  right: 34px;
  bottom: 52px;
}

.echart-grid-line {
  position: absolute;
  left: 46px;
  right: 20px;
  height: 1px;
  background: rgba(224, 212, 196, 0.66);
  pointer-events: none;
}

.dashboard-echart .echart-grid-line {
  left: 58px;
  right: 34px;
}

.echart-grid-line.line-top { top: 30px; }
.echart-grid-line.line-mid { top: 50%; }
.echart-grid-line.line-bottom { bottom: 40px; }
.dashboard-echart .echart-grid-line.line-bottom { bottom: 52px; }

.echart-y {
  position: absolute;
  left: 14px;
  color: #8a8177;
  font-family: var(--font-app-ui);
  font-size: 10px;
  font-weight: 650;
}

.echart-y.y-top { top: 23px; }
.echart-y.y-mid { top: calc(50% - 7px); }
.echart-y.y-bottom { bottom: 33px; }
.dashboard-echart .echart-y.y-bottom { bottom: 45px; }

.echart-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  justify-items: center;
  align-items: end;
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #5f554b;
  cursor: pointer;
  font-family: var(--font-app-ui);
}

.echart-bar i {
  display: block;
  width: min(56px, 68%);
  height: var(--h);
  min-height: 12px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #ffc858 0%, #e88a00 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 160ms ease, filter 160ms ease;
}

.echart-bar.active i,
.echart-bar:hover i,
.echart-bar:focus-visible i {
  filter: saturate(1.12);
  transform: scaleY(1.04);
}

.echart-bar:focus-visible {
  outline: 2px solid rgba(232, 138, 0, 0.42);
  outline-offset: 4px;
}

.echart-bar span {
  overflow: hidden;
  width: 100%;
  margin-top: 9px;
  color: #6f6254;
  font-size: 10px;
  font-weight: 680;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.echart-bar b {
  margin-top: 3px;
  color: #171717;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
}

.chat-viz-card .friday-echart-real {
  min-height: 154px;
}

.context-chat-shell .live-artifacts .friday-echart-real {
  min-height: 144px;
  gap: 10px;
  padding: 26px 14px 39px 38px;
}

.context-chat-shell .live-artifacts .friday-echart-real::before,
.context-chat-shell .live-artifacts .friday-echart-real .echart-grid-line {
  left: 38px;
  right: 12px;
}

.context-chat-shell .live-artifacts .echart-y {
  left: 10px;
}

.context-chat-shell .live-artifacts .echart-bar i {
  width: min(42px, 70%);
}

.context-chat-shell .live-artifacts .echart-bar span {
  font-size: 8.5px;
}

.context-chat-shell .live-artifacts {
  scrollbar-color: rgba(232, 138, 0, 0.42) rgba(255, 248, 240, 0.86);
  scrollbar-width: thin;
}

.context-chat-shell .live-artifacts .artifact-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.12);
}

.preview-surface-real .dashboard-canvas-real {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 190, 54, 0.16), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(232, 138, 0, 0.1), transparent 22%),
    linear-gradient(180deg, #fffaf1 0%, #f6eadb 100%);
}

.preview-surface-real .dashboard-widget-real {
  transition: transform 180ms ease, filter 180ms ease;
}

.preview-surface-real .dashboard-widget-real:hover {
  filter: saturate(1.06);
  transform: translateY(-1px);
}

.output-preview-frame .slide-chart-real[data-variant="metric"]::before,
.preview-surface-real .slide-chart-real[data-variant="metric"]::before {
  content: "-8.1\A pts";
}

.output-preview-frame .slide-chart-real[data-variant="metric"]::after,
.preview-surface-real .slide-chart-real[data-variant="metric"]::after {
  content: "Late-stage account expansion";
}

.chart-card-real {
  border-color: #d9ccb8;
  border-radius: 12px;
  background: #fbf7f0;
}

.chart-card-real .card-header-real {
  min-height: 58px;
  padding: 11px 18px;
  background: #eee7dd;
}

.chart-card-real .card-header-real span {
  border-radius: 999px;
  background: #ef9000;
  color: #fff;
  font-size: 18px;
  font-weight: 760;
  line-height: 1;
  padding: 9px 14px;
}

.chart-card-real .card-header-real::after {
  content: "×";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 1px solid #d7c8b3;
  border-radius: 7px;
  background: #fffaf3;
  color: #8a8177;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}

.dashboard-widget-real .chart-card-real .card-header-real::after {
  content: "+";
  color: #ef9000;
}

.chart-card-real > b,
.chart-card-real .chart-title-real {
  display: block;
  padding: 28px 24px 0;
  color: #3f3f45;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 780;
  line-height: 1.16;
  text-align: center;
}

.friday-echart-real {
  min-height: 310px;
  gap: clamp(16px, 4vw, 64px);
  padding: 44px 44px 82px 70px;
  background: #fbf7f0;
}

.friday-echart-real::before {
  left: 70px;
  right: 44px;
  bottom: 82px;
  background: #55565d;
}

.echart-grid-line {
  left: 70px;
  right: 44px;
  background: #d9dde1;
}

.echart-grid-line.line-top { top: 46px; }
.echart-grid-line.line-mid { top: 50%; }
.echart-grid-line.line-bottom { bottom: 82px; }

.echart-y {
  left: 32px;
  color: #55565d;
  font-size: 22px;
  font-weight: 430;
}

.echart-y.y-top { top: 34px; }
.echart-y.y-mid { top: calc(50% - 13px); }
.echart-y.y-bottom { bottom: 69px; }

.echart-bar {
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  justify-content: center;
  gap: 0;
}

.echart-bar i,
.echart-bar::before {
  display: block;
  width: min(44px, 38%);
  border-radius: 0;
  box-shadow: none;
}

.echart-bar i {
  height: var(--h);
  background: #5473d9;
}

.echart-bar::before {
  content: "";
  order: 1;
  height: var(--h2, var(--h));
  background: #b8dc28;
}

.echart-bar span {
  grid-column: 1 / -1;
  order: 2;
  width: max-content;
  max-width: 140px;
  margin-top: 12px;
  color: #55565d;
  font-size: 20px;
  font-weight: 430;
  line-height: 1.1;
}

.echart-bar b {
  display: none;
}

.friday-echart-real::after {
  content: "■ Previous quarter     ■ Current quarter";
  position: absolute;
  left: 50%;
  bottom: 22px;
  color: #55565d;
  font-size: 18px;
  font-weight: 430;
  letter-spacing: 0.01em;
  transform: translateX(-50%);
  white-space: pre;
}

.dashboard-echart {
  min-height: 360px;
  padding: 58px 70px 92px 92px;
}

.dashboard-echart::before {
  left: 92px;
  right: 70px;
  bottom: 92px;
}

.dashboard-echart .echart-grid-line {
  left: 92px;
  right: 70px;
}

.dashboard-echart .echart-grid-line.line-bottom {
  bottom: 92px;
}

.dashboard-echart .echart-y {
  left: 50px;
}

.dashboard-echart .echart-y.y-bottom {
  bottom: 79px;
}

.preview-surface-real .dashboard-widget-real.size-standard,
.preview-surface-real .dashboard-widget-real.size-wide,
.preview-surface-real .dashboard-widget-real.type-insight,
.preview-surface-real .dashboard-widget-real.type-chart {
  grid-column: 1 / -1;
}

.preview-surface-real .dashboard-widget-real.type-metric {
  grid-column: span 2;
}

.preview-surface-real .dashboard-widget-real.type-insight .viz-card-real {
  min-height: 112px;
}

.preview-surface-real .dashboard-widget-real.type-chart .viz-card-real {
  min-height: 430px;
}

.context-chat-shell .live-artifacts .friday-echart-real,
.chat-viz-card .friday-echart-real,
.workspace-artifact-stack .chart-card-real .friday-echart-real {
  min-height: 240px;
  gap: 18px;
  padding: 36px 24px 68px 54px;
}

.context-chat-shell .live-artifacts .friday-echart-real::before,
.context-chat-shell .live-artifacts .friday-echart-real .echart-grid-line,
.chat-viz-card .friday-echart-real::before,
.chat-viz-card .friday-echart-real .echart-grid-line,
.workspace-artifact-stack .friday-echart-real::before,
.workspace-artifact-stack .friday-echart-real .echart-grid-line {
  left: 54px;
  right: 24px;
}

.context-chat-shell .live-artifacts .echart-y,
.chat-viz-card .echart-y,
.workspace-artifact-stack .echart-y {
  left: 22px;
  font-size: 14px;
}

.context-chat-shell .live-artifacts .echart-bar span,
.chat-viz-card .echart-bar span,
.workspace-artifact-stack .echart-bar span {
  max-width: 92px;
  font-size: 12px;
}

.context-chat-shell .live-artifacts .friday-echart-real::after,
.chat-viz-card .friday-echart-real::after,
.workspace-artifact-stack .friday-echart-real::after {
  bottom: 18px;
  font-size: 12px;
}

.context-studio-board {
  touch-action: pan-y;
}

.studio-shot.previous,
.studio-shot.next {
  pointer-events: auto;
  cursor: pointer;
}

.studio-shot.previous .studio-product-frame,
.studio-shot.next .studio-product-frame {
  cursor: pointer;
}

.studio-table-row,
.studio-memory-cell,
.studio-chat-surface,
.studio-add-divider button {
  cursor: pointer;
}

.studio-product-frame.is-inspecting .studio-table-detail {
  animation: contextInspectPulse 420ms ease both;
}

.studio-column-list div {
  transition: background 160ms ease, transform 160ms ease;
}

.studio-column-list div:hover {
  background: rgba(232, 138, 0, 0.08);
  transform: translateX(3px);
}

.studio-memory-cell:hover {
  border-color: rgba(23, 20, 15, 0.16);
}

.studio-notebook.is-adding .studio-add-divider button {
  animation: addMemoryPop 700ms ease both;
}

.studio-notebook.is-adding .studio-add-divider::after {
  content: "";
  display: block;
  height: 34px;
  margin: 8px 16px 0;
  border: 1px dashed rgba(232, 138, 0, 0.42);
  border-radius: 12px;
  background: rgba(232, 138, 0, 0.06);
  animation: newMemoryReveal 700ms ease both;
}

.saving-frame.is-saving .studio-status-input i {
  animation: savingSpin 760ms linear infinite;
}

.saving-frame.is-saving .studio-chat-surface .friday-message,
.saving-frame.is-saved .studio-chat-surface .friday-message {
  border-color: rgba(232, 138, 0, 0.28);
  box-shadow: 0 16px 34px rgba(232, 138, 0, 0.12);
}

.saving-frame.is-saved .studio-status-input {
  border-color: rgba(45, 132, 85, 0.42);
  background: #edf7f1;
  color: #1d4f38;
}

.saving-frame.is-saved .studio-status-input span {
  color: #1d4f38;
  font-style: normal;
  font-weight: 720;
}

.saving-frame.is-saved .studio-status-input i {
  background: #2d8455;
  box-shadow: 0 0 0 4px rgba(45, 132, 85, 0.2);
  animation: none;
}

@keyframes contextInspectPulse {
  0% { transform: translateY(0); box-shadow: none; }
  45% { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(232, 138, 0, 0.16); }
  100% { transform: translateY(0); box-shadow: none; }
}

@keyframes addMemoryPop {
  0% { transform: scale(1); }
  42% { transform: scale(1.16) rotate(8deg); }
  100% { transform: scale(1); }
}

@keyframes newMemoryReveal {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes savingSpin {
  to { transform: rotate(360deg); }
}

.studio-product-frame {
  position: relative;
}

.studio-table-detail {
  overflow: hidden;
}

.studio-table-detail header strong,
.studio-table-detail header span,
.studio-table-note {
  overflow-wrap: anywhere;
}

.studio-column-list {
  min-width: 0;
}

.studio-column-list div {
  grid-template-columns: minmax(0, 1fr) minmax(88px, 0.9fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.studio-column-list strong,
.studio-column-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-column-list strong {
  white-space: nowrap;
}

.studio-column-list span {
  justify-self: end;
  max-width: 100%;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .studio-column-list div {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .studio-column-list span {
    justify-self: start;
    text-align: left;
  }
}

.studio-table-pane {
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 0.72fr);
}

.studio-table-detail {
  width: 100%;
  justify-items: stretch;
}

.studio-table-detail header,
.studio-meta-pills,
.studio-table-note,
.studio-column-list {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.studio-table-note {
  min-height: 28px;
  display: flex;
  align-items: center;
}

.studio-column-list div {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.7fr);
}

.studio-column-list span {
  justify-self: end;
}

@media (min-width: 760px) {
  .studio-shot.active.table-shot {
    width: min(78%, 560px);
  }
}

h1,
.developer-copy h2,
.comparison-heading h2,
.platform-intro h2,
.fridaybot-copy h2,
.beta-copy h2 {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.04em;
}

h1 {
  font-weight: 620;
  line-height: 0.98;
}

.finally-line {
  font-weight: 560;
  letter-spacing: -0.035em;
}

.ide-line,
.for-line {
  font-weight: 620;
}

.developer-copy h2,
.comparison-heading h2,
.platform-intro h2,
.fridaybot-copy h2,
.beta-copy h2 {
  line-height: 1.02;
}

.comparison-section {
  background: #e88a00;
  color: #351205;
}

.comparison-section::before {
  background-image:
    radial-gradient(rgba(255, 244, 185, 0.2) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), #000 18%, #000 82%, rgba(0, 0, 0, 0.5));
}

.comparison-heading span,
.comparison-lane-head span,
.sprawl-item span,
.workspace-step span {
  background-image: none;
  color: #7c2a03;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.015em;
  text-transform: none;
}

.comparison-heading h2,
.comparison-lane-head strong,
.sprawl-item strong {
  color: #351205;
}

.comparison-heading p,
.sprawl-item small,
.workspace-step p,
.workspace-step code,
.context-rail,
.context-strip span {
  color: rgba(53, 18, 5, 0.74);
}

.comparison-lane {
  border-color: rgba(89, 30, 3, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 213, 90, 0.34), rgba(255, 177, 31, 0.14)),
    rgba(255, 196, 58, 0.2);
  box-shadow: 0 24px 72px rgba(89, 30, 3, 0.16);
  backdrop-filter: blur(14px) saturate(1.02);
}

.friday-lane {
  border-color: rgba(89, 30, 3, 0.26);
  background:
    linear-gradient(145deg, rgba(255, 213, 90, 0.42), rgba(255, 193, 58, 0.22)),
    rgba(255, 207, 67, 0.24);
  box-shadow: 0 24px 76px rgba(89, 30, 3, 0.2);
}

.comparison-lane-head {
  border-bottom-color: rgba(89, 30, 3, 0.14);
}

.comparison-spine span {
  border-color: rgba(89, 30, 3, 0.28);
  background: #351205;
  color: #ffd45a;
}

.comparison-spine i {
  background:
    linear-gradient(180deg, transparent, rgba(53, 18, 5, 0.44), transparent),
    linear-gradient(180deg, rgba(255, 244, 185, 0.34), rgba(255, 244, 185, 0.34));
}

.sprawl-item,
.workspace-step {
  border-color: rgba(89, 30, 3, 0.2);
  background: rgba(255, 219, 116, 0.62);
  box-shadow: 0 16px 34px rgba(89, 30, 3, 0.14);
}

.sprawl-item:hover,
.workspace-step:hover {
  border-color: rgba(89, 30, 3, 0.36);
  background: rgba(255, 232, 151, 0.72);
}

.workspace-flow::before,
.context-strip i {
  background: linear-gradient(180deg, transparent, rgba(53, 18, 5, 0.55), transparent);
  box-shadow: 0 0 22px rgba(53, 18, 5, 0.14);
}

.context-rail b,
.mini-bars i,
.operator-chip span {
  background: #ffd45a;
  box-shadow: 0 0 0 7px rgba(255, 212, 90, 0.18), 0 0 28px rgba(255, 212, 90, 0.36);
}

.comparison-section {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 244, 162, 0.46), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(255, 112, 12, 0.32), transparent 30%),
    radial-gradient(circle at 42% 90%, rgba(117, 30, 0, 0.2), transparent 36%),
    linear-gradient(135deg, #ffb21a 0%, #e88a00 48%, #cc5208 100%);
}

.comparison-section::before {
  opacity: 0.9;
  background-image:
    linear-gradient(45deg, rgba(255, 250, 203, 0.16) 25%, transparent 25%, transparent 75%, rgba(255, 250, 203, 0.16) 75%),
    linear-gradient(45deg, rgba(255, 250, 203, 0.16) 25%, transparent 25%, transparent 75%, rgba(255, 250, 203, 0.16) 75%),
    radial-gradient(circle at 50% 50%, rgba(255, 245, 175, 0.2) 0 1px, transparent 1.8px);
  background-position: 0 0, 15px 15px, 0 0;
  background-size: 30px 30px, 30px 30px, 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 18%, #000 82%, rgba(0, 0, 0, 0.35));
}

.comparison-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 251, 215, 0.3), transparent 28%),
    linear-gradient(90deg, rgba(85, 19, 0, 0.16), transparent 26%, transparent 74%, rgba(85, 19, 0, 0.18));
}

.comparison-shell {
  position: relative;
  z-index: 1;
}

.comparison-lane {
  border-color: rgba(255, 248, 205, 0.42);
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 251, 214, 0.34), transparent 32%),
    linear-gradient(145deg, rgba(255, 246, 197, 0.26), rgba(255, 178, 26, 0.13)),
    rgba(255, 234, 155, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.58),
    0 24px 82px rgba(89, 25, 0, 0.22);
  backdrop-filter: blur(20px) saturate(1.22);
}

.comparison-lane:hover {
  border-color: rgba(255, 252, 224, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.76),
    0 30px 96px rgba(89, 25, 0, 0.28);
}

.sprawl-item,
.workspace-step {
  border-color: rgba(255, 249, 214, 0.52);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 224, 0.52), transparent 34%),
    linear-gradient(145deg, rgba(255, 251, 218, 0.52), rgba(255, 194, 50, 0.25)),
    rgba(255, 244, 184, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.76),
    0 18px 44px rgba(89, 25, 0, 0.18);
  backdrop-filter: blur(18px) saturate(1.18);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.sprawl-item:hover,
.workspace-step:hover {
  border-color: rgba(255, 253, 230, 0.82);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 230, 0.68), transparent 34%),
    linear-gradient(145deg, rgba(255, 254, 231, 0.64), rgba(255, 199, 54, 0.34)),
    rgba(255, 244, 184, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.9),
    0 24px 58px rgba(89, 25, 0, 0.24),
    0 0 0 1px rgba(255, 235, 121, 0.26);
  transform: translateY(-4px) scale(1.015);
}

.workspace-step.is-visible:hover {
  transform: translateY(-4px) scale(1.015);
}

.sprawl-item span,
.workspace-step span,
.context-strip strong,
.comparison-lane-head span {
  color: #6c2200;
}

.sprawl-item strong,
.workspace-step p,
.workspace-step code,
.future-toolbar span,
.future-toolbar strong {
  color: #2f0e00;
}

.workspace-step p,
.workspace-step code,
.sprawl-item small,
.context-strip span,
.context-rail {
  color: rgba(47, 14, 0, 0.72);
}

.workspace-flow::before {
  background:
    linear-gradient(180deg, rgba(255, 251, 216, 0.06), rgba(255, 251, 216, 0.82), rgba(255, 251, 216, 0.08));
  box-shadow: 0 0 28px rgba(255, 244, 166, 0.38);
}

.context-rail {
  background:
    linear-gradient(180deg, rgba(111, 34, 0, 0.08), rgba(111, 34, 0, 0.44), rgba(111, 34, 0, 0.08));
  box-shadow: 0 0 28px rgba(255, 244, 166, 0.24);
}

.site-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.is-elevated {
  background: var(--surface-butter);
  border-bottom-color: var(--surface-butter-border);
  box-shadow: var(--surface-butter-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.comparison-heading {
  gap: 16px 42px;
  margin-bottom: 32px;
}

.comparison-heading span {
  color: #6b2100;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: none;
}

.comparison-heading h2 {
  line-height: 1.02;
}

.operator-chip {
  z-index: 5;
  border-color: rgba(255, 250, 214, 0.7);
  background:
    linear-gradient(135deg, rgba(255, 252, 221, 0.78), rgba(255, 195, 44, 0.36)),
    rgba(255, 240, 170, 0.38);
  color: #2b0c00;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.9),
    0 16px 38px rgba(83, 24, 0, 0.22);
  backdrop-filter: blur(18px) saturate(1.2);
}

.operator-chip span {
  background: #7a2600;
  box-shadow: 0 0 0 7px rgba(255, 237, 149, 0.34), 0 0 28px rgba(255, 237, 149, 0.34);
}

.preview-surface-real .dashboard-widget-real.type-insight,
.preview-surface-real .dashboard-widget-real.type-chart {
  grid-column: 1 / -1 !important;
}

.preview-surface-real .dashboard-widget-real.type-metric {
  grid-column: span 2 !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .viz-card-real {
  min-height: 430px;
}

.slide-chart-real[data-variant="chart"] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end !important;
  justify-content: initial !important;
  gap: clamp(18px, 4vw, 54px) !important;
  min-height: 230px !important;
  padding: 42px 44px 72px 66px !important;
  border: 1px solid #d9ccb8 !important;
  border-radius: 12px !important;
  background: #fbf7f0 !important;
}

.slide-chart-real[data-variant="chart"]::before {
  content: "" !important;
  position: absolute !important;
  left: 66px !important;
  right: 44px !important;
  bottom: 72px !important;
  width: auto !important;
  height: 1px !important;
  background: #55565d !important;
  transform: none !important;
}

.slide-chart-real[data-variant="chart"]::after {
  content: "■ Previous quarter     ■ Current quarter" !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 20px !important;
  width: max-content !important;
  color: #55565d !important;
  font-size: 13px !important;
  font-weight: 430 !important;
  transform: translateX(-50%) !important;
  white-space: pre !important;
}

.slide-chart-real[data-variant="chart"] .echart-grid-line {
  position: absolute;
  left: 66px;
  right: 44px;
  height: 1px;
  background: #d9dde1;
}

.slide-chart-real[data-variant="chart"] .echart-grid-line.line-top { top: 42px; }
.slide-chart-real[data-variant="chart"] .echart-grid-line.line-mid { top: 50%; }
.slide-chart-real[data-variant="chart"] .echart-grid-line.line-bottom { bottom: 72px; }

.slide-chart-real[data-variant="chart"] .echart-y {
  position: absolute;
  left: 28px;
  color: #55565d;
  font-size: 15px;
  font-weight: 430;
}

.slide-chart-real[data-variant="chart"] .echart-y.y-top { top: 32px; }
.slide-chart-real[data-variant="chart"] .echart-y.y-mid { top: calc(50% - 9px); }
.slide-chart-real[data-variant="chart"] .echart-y.y-bottom { bottom: 63px; }

.slide-chart-real[data-variant="chart"] .echart-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: end;
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
}

.slide-chart-real[data-variant="chart"] .echart-bar i,
.slide-chart-real[data-variant="chart"] .echart-bar::before {
  display: block !important;
  width: min(34px, 38%) !important;
  border-radius: 0 !important;
}

.slide-chart-real[data-variant="chart"] .echart-bar i {
  height: var(--h) !important;
  background: #5473d9 !important;
}

.slide-chart-real[data-variant="chart"] .echart-bar::before {
  content: "";
  order: 1;
  height: var(--h2, var(--h));
  background: #b8dc28;
}

.slide-chart-real[data-variant="chart"] .echart-bar span {
  order: 2;
  width: max-content;
  max-width: 110px;
  margin-top: 9px;
  color: #55565d;
  font-size: 12px;
  font-weight: 430;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.slide-chart-real[data-variant="chart"] .echart-bar b {
  display: none;
}

.friday-echart-real .echart-bar,
.slide-chart-real[data-variant="chart"] .echart-bar {
  display: flex !important;
  position: relative;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 6px;
  padding-bottom: 34px;
}

.friday-echart-real .echart-bar i,
.friday-echart-real .echart-bar::before,
.slide-chart-real[data-variant="chart"] .echart-bar i,
.slide-chart-real[data-variant="chart"] .echart-bar::before {
  align-self: flex-end;
  flex: 0 0 auto;
}

.friday-echart-real .echart-bar span,
.slide-chart-real[data-variant="chart"] .echart-bar span {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
}

.context-chat-shell {
  --preview-artifact-height: 154px;
  --preview-chart-height: 108px;
}

.context-chat-shell .chart-card-real .card-header-real,
.output-preview-frame .chart-card-real .card-header-real {
  min-height: 36px;
  padding: 7px 10px;
}

.context-chat-shell .chart-card-real .card-header-real span,
.output-preview-frame .chart-card-real .card-header-real span {
  font-size: 10px;
  font-weight: 650;
  padding: 2px 8px;
}

.context-chat-shell .chart-card-real .card-header-real::after,
.output-preview-frame .chart-card-real .card-header-real::after {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 18px;
}

.context-chat-shell .chart-card-real > b,
.context-chat-shell .chart-card-real .chart-title-real,
.output-preview-frame .chart-card-real > b,
.output-preview-frame .chart-card-real .chart-title-real {
  padding: 10px 12px 0;
  font-size: 13px;
  line-height: 1.15;
}

.context-chat-shell .friday-echart-real,
.output-preview-frame .friday-echart-real {
  min-height: var(--preview-chart-height) !important;
  gap: 8px !important;
  padding: 20px 16px 34px 34px !important;
}

.context-chat-shell .friday-echart-real::before,
.output-preview-frame .friday-echart-real::before {
  left: 34px !important;
  right: 14px !important;
  bottom: 34px !important;
}

.context-chat-shell .friday-echart-real .echart-grid-line,
.output-preview-frame .friday-echart-real .echart-grid-line {
  left: 34px !important;
  right: 14px !important;
}

.context-chat-shell .friday-echart-real .echart-grid-line.line-top,
.output-preview-frame .friday-echart-real .echart-grid-line.line-top {
  top: 20px !important;
}

.context-chat-shell .friday-echart-real .echart-grid-line.line-bottom,
.output-preview-frame .friday-echart-real .echart-grid-line.line-bottom {
  bottom: 34px !important;
}

.context-chat-shell .friday-echart-real .echart-y,
.output-preview-frame .friday-echart-real .echart-y {
  left: 10px !important;
  font-size: 10px !important;
}

.context-chat-shell .friday-echart-real .echart-y.y-top,
.output-preview-frame .friday-echart-real .echart-y.y-top {
  top: 14px !important;
}

.context-chat-shell .friday-echart-real .echart-y.y-bottom,
.output-preview-frame .friday-echart-real .echart-y.y-bottom {
  bottom: 27px !important;
}

.context-chat-shell .friday-echart-real .echart-bar,
.output-preview-frame .friday-echart-real .echart-bar {
  gap: 4px !important;
  padding-bottom: 20px !important;
}

.context-chat-shell .friday-echart-real .echart-bar i,
.context-chat-shell .friday-echart-real .echart-bar::before,
.output-preview-frame .friday-echart-real .echart-bar i,
.output-preview-frame .friday-echart-real .echart-bar::before {
  width: min(22px, 38%) !important;
}

.context-chat-shell .friday-echart-real .echart-bar span,
.output-preview-frame .friday-echart-real .echart-bar span {
  bottom: 0 !important;
  max-width: 68px !important;
  font-size: 9px !important;
}

.context-chat-shell .friday-echart-real::after,
.output-preview-frame .friday-echart-real::after {
  bottom: 10px !important;
  font-size: 9px !important;
}

.context-chat-shell .live-artifacts article,
.workspace-artifact-stack .workspace-viz-card {
  height: var(--preview-artifact-height);
  min-height: var(--preview-artifact-height) !important;
  max-height: var(--preview-artifact-height);
}

.context-chat-shell .live-artifacts .viz-card-real,
.workspace-artifact-stack .workspace-viz-card {
  display: flex;
  flex-direction: column;
}

.context-chat-shell .live-artifacts .number-body,
.workspace-artifact-stack .number-body,
.context-chat-shell .live-artifacts .insight-body,
.workspace-artifact-stack .insight-body {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
}

.context-chat-shell .live-artifacts .friday-echart-real,
.workspace-artifact-stack .friday-echart-real {
  flex: 1 1 auto;
}

.chat-viz-card {
  max-height: 220px;
}

.chat-viz-card .friday-echart-real {
  min-height: 128px !important;
}

.preview-surface-real .widget-grid-real {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.preview-surface-real .dashboard-widget-real.type-metric {
  grid-column: span 3 !important;
}

.preview-surface-real .dashboard-widget-real.type-insight,
.preview-surface-real .dashboard-widget-real.type-chart {
  grid-column: 1 / -1 !important;
}

.preview-surface-real .dashboard-widget-real.type-insight .viz-card-real {
  min-height: 118px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .viz-card-real {
  min-height: 300px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real {
  min-height: 236px !important;
  padding: 34px 42px 58px 58px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real::before,
.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real .echart-grid-line {
  left: 58px !important;
  right: 38px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real::before,
.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real .echart-grid-line.line-bottom {
  bottom: 58px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .echart-y {
  left: 22px !important;
  font-size: 13px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .echart-bar i,
.preview-surface-real .dashboard-widget-real.type-chart .echart-bar::before {
  width: min(34px, 38%) !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .echart-bar span {
  max-width: 120px !important;
  font-size: 13px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real::after {
  bottom: 18px !important;
  font-size: 13px !important;
}

.slide-chart-real[data-variant="chart"] {
  min-height: 170px !important;
  padding: 30px 34px 54px 50px !important;
}

.slide-chart-real[data-variant="chart"]::before,
.slide-chart-real[data-variant="chart"] .echart-grid-line {
  left: 50px !important;
  right: 34px !important;
}

.slide-chart-real[data-variant="chart"]::before,
.slide-chart-real[data-variant="chart"] .echart-grid-line.line-bottom {
  bottom: 54px !important;
}

.slide-chart-real[data-variant="chart"]::after {
  bottom: 14px !important;
  font-size: 11px !important;
}

.slide-chart-real[data-variant="chart"] .echart-y {
  left: 18px !important;
  font-size: 12px !important;
}

.slide-chart-real[data-variant="chart"] .echart-bar i,
.slide-chart-real[data-variant="chart"] .echart-bar::before {
  width: min(26px, 38%) !important;
}

.context-chat-shell {
  --metric-artifact-height: 92px;
  --insight-artifact-height: 104px;
  --chart-artifact-height: 248px;
}

.context-chat-shell .live-artifacts .artifact-metric-card,
.workspace-artifact-stack .number-card {
  height: var(--metric-artifact-height) !important;
  min-height: var(--metric-artifact-height) !important;
  max-height: var(--metric-artifact-height) !important;
}

.context-chat-shell .live-artifacts .artifact-insight-card,
.workspace-artifact-stack .insight-card {
  height: auto !important;
  min-height: var(--insight-artifact-height) !important;
  max-height: none !important;
}

.context-chat-shell .live-artifacts .artifact-chart-card,
.workspace-artifact-stack .chart-card-real {
  height: var(--chart-artifact-height) !important;
  min-height: var(--chart-artifact-height) !important;
  max-height: var(--chart-artifact-height) !important;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-body,
.workspace-artifact-stack .number-body {
  min-height: 0 !important;
  padding: 10px 10px 12px !important;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-value,
.workspace-artifact-stack .number-value {
  font-size: 25px !important;
  line-height: 1 !important;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-label,
.workspace-artifact-stack .number-label {
  font-size: 10.5px !important;
}

.context-chat-shell .live-artifacts .artifact-insight-card .insight-body,
.workspace-artifact-stack .insight-body {
  padding: 12px 14px !important;
  justify-content: flex-start !important;
}

.context-chat-shell .live-artifacts .artifact-insight-card .insight-text,
.workspace-artifact-stack .insight-text {
  font-size: 11.5px !important;
  line-height: 1.42 !important;
}

.context-chat-shell .live-artifacts .artifact-chart-card .friday-echart-real,
.workspace-artifact-stack .chart-card-real .friday-echart-real {
  min-height: 174px !important;
  padding: 34px 26px 44px 44px !important;
}

.chat-viz-card {
  max-height: none !important;
}

.chat-viz-card .friday-echart-real {
  min-height: 188px !important;
  padding: 36px 28px 48px 48px !important;
}

.friday-echart-real,
.slide-chart-real[data-variant="chart"] {
  background: #050505 !important;
}

.friday-echart-real::before,
.friday-echart-real .echart-grid-line,
.slide-chart-real[data-variant="chart"]::before,
.slide-chart-real[data-variant="chart"] .echart-grid-line {
  background: rgba(255, 255, 255, 0.82) !important;
}

.friday-echart-real .echart-y,
.friday-echart-real .echart-bar span,
.slide-chart-real[data-variant="chart"] .echart-y,
.slide-chart-real[data-variant="chart"] .echart-bar span {
  color: #6b6d75 !important;
  font-weight: 700 !important;
}

.friday-echart-real .echart-bar i,
.slide-chart-real[data-variant="chart"] .echart-bar i {
  width: min(50px, 54%) !important;
  background: #ef9000 !important;
}

.friday-echart-real .echart-bar::before,
.slide-chart-real[data-variant="chart"] .echart-bar::before {
  display: none !important;
}

.friday-echart-real::after,
.slide-chart-real[data-variant="chart"]::after {
  content: none !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .viz-card-real {
  min-height: 360px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real {
  min-height: 286px !important;
  padding: 42px 54px 68px 72px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real::before,
.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real .echart-grid-line {
  left: 72px !important;
  right: 54px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real::before,
.preview-surface-real .dashboard-widget-real.type-chart .friday-echart-real .echart-grid-line.line-bottom {
  bottom: 68px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .echart-y {
  left: 28px !important;
  font-size: 16px !important;
}

.preview-surface-real .dashboard-widget-real.type-chart .echart-bar span {
  max-width: 140px !important;
  font-size: 15px !important;
}

.preview-surface-real .dashboard-widget-real.type-insight .viz-card-real {
  min-height: 96px !important;
}

.preview-surface-real .dashboard-widget-real.type-insight .insight-body {
  padding: 14px 18px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr) !important;
  grid-template-rows: 1fr !important;
  column-gap: 28px !important;
  align-items: center !important;
  padding: 42px 44px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  grid-column: 1 !important;
  max-width: 100% !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  align-self: end;
  margin-bottom: 12px;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.04 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  align-self: start;
  font-size: clamp(12px, 1.3vw, 15px) !important;
  line-height: 1.38 !important;
}

.slide-chart-real[data-variant="chart"] {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: stretch !important;
  min-height: 270px !important;
  height: 100% !important;
  padding: 48px 42px 62px 58px !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.slide-chart-real[data-variant="chart"]::before,
.slide-chart-real[data-variant="chart"] .echart-grid-line {
  left: 58px !important;
  right: 42px !important;
}

.slide-chart-real[data-variant="chart"]::before,
.slide-chart-real[data-variant="chart"] .echart-grid-line.line-bottom {
  bottom: 62px !important;
}

.slide-chart-real[data-variant="chart"] .echart-grid-line.line-top {
  top: 48px !important;
}

.slide-chart-real[data-variant="chart"] .echart-y {
  left: 18px !important;
  font-size: 15px !important;
}

.slide-chart-real[data-variant="chart"] .echart-bar {
  padding-bottom: 28px !important;
}

.slide-chart-real[data-variant="chart"] .echart-bar i {
  width: min(46px, 62%) !important;
}

.slide-chart-real[data-variant="chart"] .echart-bar span {
  bottom: 2px !important;
  max-width: 110px;
  font-size: 13px !important;
}

.context-chat-shell .artifact-head {
  padding-left: 20px !important;
}

.context-chat-shell .artifact-head strong {
  min-width: 92px;
  overflow: visible;
  color: #171717;
  white-space: nowrap;
}

.context-chat-shell .viz-card-real .card-header-real small,
.output-preview-frame .viz-card-real .card-header-real small,
.workspace-viz-card .card-header-real small {
  display: none !important;
}

.friday-echart-real,
.slide-chart-real[data-variant="chart"] {
  background: #fbf7f0 !important;
}

.friday-echart-real::before,
.friday-echart-real .echart-grid-line,
.slide-chart-real[data-variant="chart"]::before,
.slide-chart-real[data-variant="chart"] .echart-grid-line {
  background: #d9dde1 !important;
}

.friday-echart-real .echart-y,
.friday-echart-real .echart-bar span,
.slide-chart-real[data-variant="chart"] .echart-y,
.slide-chart-real[data-variant="chart"] .echart-bar span {
  color: #55565d !important;
  font-weight: 430 !important;
}

.friday-echart-real .echart-bar i,
.slide-chart-real[data-variant="chart"] .echart-bar i {
  background: #5473d9 !important;
}

.friday-echart-real .echart-bar::before,
.slide-chart-real[data-variant="chart"] .echart-bar::before {
  display: block !important;
  background: #b8dc28 !important;
}

.friday-echart-real::after,
.slide-chart-real[data-variant="chart"]::after {
  content: "■ Previous quarter     ■ Current quarter" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  color: #55565d !important;
  font-size: 11px !important;
  font-weight: 430 !important;
  transform: translateX(-50%) !important;
  white-space: pre !important;
}

.context-chat-shell .live-artifacts .friday-echart-real::after,
.workspace-artifact-stack .friday-echart-real::after,
.chat-viz-card .friday-echart-real::after {
  bottom: 9px !important;
  font-size: 9px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 30px !important;
  align-content: center !important;
  align-items: center !important;
  padding: 44px 46px !important;
  background: #fffdf9 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  max-width: 100% !important;
  margin: 0 0 14px !important;
  color: #171717 !important;
  font-size: clamp(30px, 3.5vw, 46px) !important;
  font-weight: 820 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #675c50 !important;
  font-size: clamp(12px, 1.3vw, 15px) !important;
  font-weight: 620 !important;
  line-height: 1.42 !important;
}

.slide-chart-real[data-variant="chart"] {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  width: 100% !important;
  height: min(310px, 100%) !important;
  min-height: 260px !important;
  padding: 42px 38px 58px 56px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.slide-chart-real[data-variant="chart"]::before,
.slide-chart-real[data-variant="chart"] .echart-grid-line {
  left: 56px !important;
  right: 38px !important;
}

.slide-chart-real[data-variant="chart"]::before,
.slide-chart-real[data-variant="chart"] .echart-grid-line.line-bottom {
  bottom: 58px !important;
}

.slide-chart-real[data-variant="chart"] .echart-grid-line.line-top {
  top: 42px !important;
}

.slide-chart-real[data-variant="chart"] .echart-y {
  left: 18px !important;
  font-size: 14px !important;
}

.slide-chart-real[data-variant="chart"] .echart-bar {
  gap: 5px !important;
  padding-bottom: 30px !important;
}

.slide-chart-real[data-variant="chart"] .echart-bar i,
.slide-chart-real[data-variant="chart"] .echart-bar::before {
  width: min(34px, 42%) !important;
}

.slide-chart-real[data-variant="chart"] .echart-bar span {
  bottom: 2px !important;
  max-width: 118px !important;
  font-size: 12px !important;
}

.workspace-artifact-stack .chart-card-real,
.context-chat-shell .live-artifacts .artifact-chart-card {
  min-height: 248px !important;
}

.friday-echart-real::after,
.slide-chart-real[data-variant="chart"]::after {
  content: "Previous quarter     Current quarter" !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  display: grid !important;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 14px 34px !important;
  align-items: center !important;
  align-content: center !important;
  padding: 38px 46px !important;
  overflow: hidden !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  overflow: visible !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(12px, 1.18vw, 14px) !important;
  line-height: 1.38 !important;
}

.preview-surface-real .slide-chart-real[data-variant="chart"] {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 286px !important;
  min-height: 286px !important;
  max-height: 286px !important;
  padding: 42px 40px 58px 58px !important;
}

.preview-surface-real .slide-chart-real[data-variant="chart"]::before,
.preview-surface-real .slide-chart-real[data-variant="chart"] .echart-grid-line {
  left: 58px !important;
  right: 40px !important;
}

.preview-surface-real .slide-chart-real[data-variant="chart"] .echart-bar {
  min-width: 0 !important;
  padding-bottom: 29px !important;
}

.preview-surface-real .slide-chart-real[data-variant="chart"] .echart-bar i,
.preview-surface-real .slide-chart-real[data-variant="chart"] .echart-bar::before {
  width: min(36px, 42%) !important;
}

.preview-surface-real .slide-chart-real[data-variant="chart"] .echart-bar span {
  max-width: 90px !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 16px !important;
  padding: 42px 58px !important;
  background: #fffdf9 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4 {
  grid-row: 1 !important;
  max-width: 620px !important;
  margin: 0 !important;
  font-size: clamp(30px, 3.8vw, 50px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.05em !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] p {
  grid-row: 3 !important;
  max-width: 590px !important;
  margin: 0 !important;
  font-size: clamp(13px, 1.35vw, 17px) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.preview-surface-real .slide-chart-real[data-variant="metric"] {
  grid-row: 2 !important;
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: min(430px, 82%) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.preview-surface-real .slide-chart-real[data-variant="metric"]::before,
.preview-surface-real .slide-chart-real[data-variant="metric"]::after {
  content: none !important;
}

.ppt-metric-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 18px 28px;
  border: 1px solid rgba(232, 138, 0, 0.22);
  border-radius: 24px;
  background: #fff9ef;
  color: #e88a00;
  text-align: center;
}

.ppt-metric-card strong {
  display: block;
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 820;
  letter-spacing: -0.06em;
  line-height: 0.85;
}

.ppt-metric-card strong span {
  display: block;
}

.ppt-metric-card small {
  color: #62594f;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.1;
}

@media (max-width: 820px) {
  .preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    padding: 26px !important;
  }

  .preview-surface-real .slide-chart-real[data-variant="chart"] {
    grid-column: 1 !important;
    grid-row: 3 !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
}

.preview-surface-real .ppt-stage-real {
  padding: 26px !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 224, 128, 0.24), transparent 34%),
    #f5efe5 !important;
}

.preview-surface-real .preview-slide-real {
  width: min(760px, 94%) !important;
  max-width: 760px !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  border-radius: 26px !important;
  border: 1px solid rgba(216, 196, 164, 0.72) !important;
  background: #fffdf8 !important;
  box-shadow: 0 24px 54px rgba(75, 47, 12, 0.16) !important;
  overflow: hidden !important;
}

.preview-surface-real .preview-slide-real h4,
.preview-surface-real .preview-slide-real p,
.preview-surface-real .slide-chart-real {
  min-width: 0 !important;
}

.preview-surface-real .preview-slide-real h4 {
  color: #151515 !important;
  font-weight: 780 !important;
  text-wrap: balance;
}

.preview-surface-real .preview-slide-real p {
  color: #64584b !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr) !important;
  grid-template-rows: auto 1fr !important;
  column-gap: 34px !important;
  row-gap: 14px !important;
  padding: 38px 44px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  margin: 0 !important;
  max-width: 100% !important;
  font-size: clamp(26px, 3.1vw, 41px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.048em !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin: 0 !important;
  max-width: 100% !important;
  font-size: clamp(12px, 1.18vw, 14px) !important;
  font-weight: 690 !important;
  line-height: 1.38 !important;
}

.preview-surface-real .slide-chart-real[data-variant="chart"] {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: stretch !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.preview-surface-real .slide-chart-real[data-variant="chart"]::before,
.preview-surface-real .slide-chart-real[data-variant="chart"]::after {
  content: none !important;
}

.ppt-chart-card {
  position: relative;
  display: block;
  height: 292px;
  min-height: 292px;
  box-sizing: border-box;
  padding: 36px 34px 60px 52px;
  border-radius: 22px;
  background: #fbf7f0;
  box-shadow: inset 0 0 0 1px rgba(216, 204, 188, 0.86);
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  justify-items: start !important;
  align-content: center !important;
  row-gap: 18px !important;
  padding: 40px 52px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4 {
  grid-row: 1 !important;
  max-width: 620px !important;
  margin: 0 !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.052em !important;
}

.preview-surface-real .slide-chart-real[data-variant="metric"] {
  grid-row: 2 !important;
  display: block !important;
  width: min(360px, 72%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] p {
  grid-row: 3 !important;
  max-width: 620px !important;
  margin: 0 !important;
  font-size: clamp(13px, 1.35vw, 17px) !important;
  font-weight: 720 !important;
  line-height: 1.34 !important;
}

.ppt-metric-card {
  padding: 18px 26px !important;
  border-radius: 24px !important;
}

@media (max-width: 820px) {
  .preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    padding: 26px !important;
  }

  .preview-surface-real .slide-chart-real[data-variant="chart"] {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .ppt-chart-card {
    height: 220px;
    min-height: 220px;
  }
}

.dashboard-widget-real .chart-card-real .card-header-real::after,
.output-preview-frame .dashboard-widget-real .chart-card-real .card-header-real::after {
  content: none !important;
  display: none !important;
}

.output-preview-frame .dashboard-widget-real.type-metric .number-card {
  min-height: 138px !important;
  height: auto !important;
  border-radius: 24px !important;
}

.output-preview-frame .dashboard-widget-real.type-metric .number-body {
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  min-height: 82px !important;
  padding: 16px 22px 20px !important;
}

.output-preview-frame .dashboard-widget-real.type-metric .number-value {
  color: #e88a00 !important;
  font-size: clamp(32px, 4.2vw, 52px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.92 !important;
}

.output-preview-frame .dashboard-widget-real.type-metric .number-label {
  max-width: 220px !important;
  color: #4b4339 !important;
  font-size: 13px !important;
  font-weight: 740 !important;
  line-height: 1.15 !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .chart-card-real {
  min-height: 372px !important;
  overflow: hidden !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .chart-title-real {
  display: block !important;
  padding: 18px 24px 0 !important;
  color: #2d2925 !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .friday-echart-real {
  min-height: 284px !important;
  margin-top: 8px !important;
  padding-top: 34px !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .friday-echart-real::after {
  bottom: 14px !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .echart-bar b {
  top: -22px !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .echart-bar span {
  color: #4f5258 !important;
  font-size: 12px !important;
  font-weight: 590 !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .card-header-real {
  /* Symmetric vertical padding so align-items:center actually centers the
     "chart" kicker in the header band (was 20/0 top/bottom, which pinned it
     to the bottom). 11px keeps the band the same height the chart expects. */
  padding: 11px 24px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  display: grid !important;
  grid-template-columns: 270px minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  column-gap: 30px !important;
  row-gap: 14px !important;
  align-items: center !important;
  align-content: center !important;
  padding: 42px 48px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  max-width: 270px !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #151515 !important;
  font-size: 28px !important;
  font-weight: 760 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
  text-wrap: balance !important;
  white-space: normal !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  max-width: 270px !important;
  margin: 0 !important;
  color: #62584d !important;
  font-size: 13px !important;
  font-weight: 690 !important;
  line-height: 1.34 !important;
  white-space: normal !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .slide-chart-real[data-variant="chart"] {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: stretch !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 360px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: visible !important;
  background: transparent !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .ppt-chart-card {
  height: 238px !important;
  min-height: 238px !important;
  max-height: 238px !important;
  padding: 30px 28px 52px 46px !important;
  border-radius: 18px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  row-gap: 16px !important;
  align-content: center !important;
  justify-items: start !important;
  padding: 40px 56px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  max-width: 620px !important;
  margin: 0 !important;
  overflow: visible !important;
  font-size: 32px !important;
  font-weight: 760 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .slide-chart-real[data-variant="metric"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 310px !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card {
  padding: 16px 24px !important;
  border-radius: 22px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card strong {
  font-size: 48px !important;
  line-height: 0.86 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card small {
  font-size: 12px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] p {
  grid-column: 1 !important;
  grid-row: 3 !important;
  max-width: 620px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.34 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-columns: 300px minmax(0, 1fr) !important;
  column-gap: 24px !important;
  padding: 36px 40px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  max-width: 300px !important;
  font-size: 30px !important;
  font-weight: 760 !important;
  letter-spacing: -0.038em !important;
  line-height: 1.08 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  max-width: 300px !important;
  font-size: 13px !important;
  font-weight: 660 !important;
  line-height: 1.36 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .slide-chart-real[data-variant="chart"] {
  justify-self: stretch !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .ppt-chart-card {
  width: 100% !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  padding: 30px 30px 48px 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-columns: 285px minmax(0, 1fr) !important;
  column-gap: 28px !important;
  padding: 38px 42px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  max-width: 285px !important;
  font-size: 29px !important;
  line-height: 1.08 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  max-width: 285px !important;
  font-size: 12.5px !important;
  line-height: 1.34 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .slide-chart-real[data-variant="chart"] {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .ppt-chart-card {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.ppt-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ppt-svg-title {
  fill: #3e3e44;
  font-size: 21px;
  font-weight: 780;
  letter-spacing: -0.02em;
}

.ppt-svg-grid {
  stroke: #d9dde1;
  stroke-width: 1.6;
}

.ppt-svg-axis {
  stroke: #4d4f56;
  stroke-width: 1.6;
}

.ppt-svg-axis-label,
.ppt-svg-x-label,
.ppt-svg-legend {
  fill: #55565d;
  font-weight: 560;
}

.ppt-svg-axis-label {
  font-size: 16px;
}

.ppt-svg-x-label {
  font-size: 14px;
  text-anchor: middle;
}

.ppt-svg-legend {
  font-size: 13px;
}

.ppt-svg-prev {
  fill: #5473d9;
}

.ppt-svg-current {
  fill: #b8dc28;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-columns: 245px minmax(0, 1fr) !important;
  column-gap: 24px !important;
  padding: 38px 40px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  max-width: 245px !important;
  font-size: 27px !important;
  line-height: 1.08 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  max-width: 232px !important;
  font-size: 11.8px !important;
  line-height: 1.32 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .slide-chart-real[data-variant="chart"] {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .ppt-chart-card {
  transform: scale(1.18);
  transform-origin: center right;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 241, 151, 0.42), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255, 139, 23, 0.28), transparent 30%),
    linear-gradient(135deg, #fff3b2 0%, #ffc13a 46%, #e88a00 100%) !important;
}

.comparison-heading {
  gap: 16px 42px !important;
  margin-bottom: 36px !important;
}

.comparison-heading span {
  margin-bottom: 0 !important;
}

.comparison-heading h2 {
  margin-top: 0 !important;
}

.comparison-lane {
  border-radius: 34px !important;
  border-color: rgba(255, 255, 225, 0.52) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 232, 0.48), transparent 34%),
    linear-gradient(145deg, rgba(255, 252, 222, 0.36), rgba(255, 184, 34, 0.18)),
    rgba(255, 225, 132, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.78),
    0 30px 90px rgba(89, 25, 0, 0.22) !important;
  backdrop-filter: blur(20px) saturate(1.22);
}

.sprawl-item,
.workspace-step,
.context-strip,
.future-toolbar {
  backdrop-filter: blur(18px) saturate(1.22);
}

.workspace-flow::before,
.context-rail {
  opacity: 0 !important;
  display: none !important;
}

.workspace-step {
  z-index: 3 !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 232, 0.78), transparent 35%),
    linear-gradient(145deg, rgba(255, 252, 218, 0.58), rgba(255, 194, 58, 0.2)),
    rgba(255, 244, 184, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 238, 0.84),
    0 18px 40px rgba(89, 25, 0, 0.16) !important;
}

.workflow-section,
.fridaybot-section,
.context-engine-section,
.faq-section,
.beta-section,
.midpage-cta-section,
.site-footer {
  color: #351205;
}

.workflow-section,
.fridaybot-section,
.context-engine-section {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 249, 196, 0.42), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(255, 145, 0, 0.22), transparent 34%),
    linear-gradient(135deg, #fff4b8 0%, #ffd36d 44%, #f29a16 100%) !important;
}

.workflow-section::after {
  background:
    linear-gradient(90deg, rgba(255, 251, 214, 0.18), transparent 28%, transparent 72%, rgba(255, 180, 45, 0.18)),
    linear-gradient(180deg, rgba(255, 252, 222, 0.16), rgba(255, 177, 31, 0.08)) !important;
}

.faq-section {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 251, 218, 0.48), transparent 32%),
    linear-gradient(135deg, rgba(255, 245, 182, 0.7), rgba(255, 181, 31, 0.22)) !important;
  border-color: rgba(122, 48, 0, 0.16) !important;
  border-radius: 32px;
  backdrop-filter: blur(18px) saturate(1.18);
}

.beta-section {
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 252, 222, 0.55), transparent 28%),
    linear-gradient(135deg, rgba(255, 213, 90, 0.72), rgba(232, 138, 0, 0.34)) !important;
  border-color: rgba(255, 250, 214, 0.5) !important;
  box-shadow: 0 28px 88px rgba(89, 25, 0, 0.2) !important;
  backdrop-filter: blur(22px) saturate(1.2);
}

.site-footer {
  background: var(--surface-butter) !important;
}

.footer-shell strong {
  color: #351205 !important;
}

.footer-shell p,
.footer-links a {
  color: rgba(53, 18, 5, 0.72) !important;
}

.footer-links a {
  border-color: rgba(53, 18, 5, 0.2) !important;
  background: rgba(255, 248, 205, 0.22) !important;
  backdrop-filter: blur(14px);
}

.midpage-cta-section {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 56px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface-butter) !important;
  box-shadow: none !important;
}

.midpage-cta-section::before {
  content: none !important;
  display: none !important;
}

.midpage-cta-section::after {
  content: none !important;
  display: none !important;
}

.midpage-cta-shell {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.midpage-cta-shell > p {
  max-width: 660px !important;
  color: var(--sheet-text, #351205) !important;
  font-weight: 650;
  text-shadow: none !important;
}

@media (max-width: 640px) {
  .midpage-cta-section {
    width: 100% !important;
    padding: 42px 18px !important;
    background-position: center center !important;
  }

  .midpage-cta-shell {
    padding: 0 !important;
  }
}

.fridaybot-section {
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  padding: 96px 24px 104px !important;
  color: #351205 !important;
  background:
    radial-gradient(circle at 15% 16%, rgba(255, 248, 163, 0.78), transparent 29%),
    radial-gradient(circle at 86% 20%, rgba(255, 126, 0, 0.42), transparent 32%),
    linear-gradient(135deg, #ffd33f 0%, #ffb000 42%, #f28a00 72%, #c95700 100%) !important;
}

.fridaybot-section::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.54;
  background-image:
    url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff06a' stroke-width='1.35' stroke-linecap='square' opacity='.74'%3E%3Cpath d='M0 18H42V0M42 18V54H78V36H120V0M156 0V36H180M0 72H24V108H60V90H96V54H138V72H180M0 144H36V126H72V162H108V126H144V108H180M18 0V54M60 0V18M96 0V36M138 18V54M24 72V36H60M78 72H120V108M144 72V90H162M0 162H18V180M54 180V144M90 180V162H126M162 180V144H180'/%3E%3Cpath d='M0 42H18M42 42H60M84 18H102M126 36H144M18 126H36M72 108H90M108 144H144M144 126H162M126 90H180' opacity='.58'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 250, 165, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 250, 165, 0.16) 1px, transparent 1px);
  background-size: 180px 180px, 44px 44px, 44px 44px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 88%, transparent 100%);
}

.fridaybot-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 222, 0.22), transparent 24%, transparent 74%, rgba(132, 45, 0, 0.16)),
    radial-gradient(circle at 48% 54%, rgba(255, 255, 214, 0.18), transparent 42%);
}

.fridaybot-section .fridaybot-shell {
  z-index: 1;
  width: min(1200px, 100%) !important;
}

.fridaybot-section .section-eyebrow {
  color: rgba(72, 24, 0, 0.82) !important;
  text-shadow: 0 1px 0 rgba(255, 244, 160, 0.42);
}

.fridaybot-copy h2 {
  color: #351205 !important;
  text-wrap: balance;
}

.fridaybot-copy p {
  color: rgba(53, 18, 5, 0.82) !important;
  font-weight: 540;
}

.fridaybot-section .fridaybot-word {
  background-image: linear-gradient(135deg, #3b1000 0%, #8f2c00 26%, #f08400 62%, #fff3a0 100%) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 248, 190, 0.45));
}

.fridaybot-section .harness-window {
  border: 1px solid rgba(255, 249, 202, 0.62) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 218, 0.58), transparent 31%),
    linear-gradient(145deg, rgba(255, 251, 216, 0.42), rgba(255, 166, 21, 0.22)),
    rgba(255, 206, 82, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 228, 0.84),
    inset 0 -1px 0 rgba(107, 35, 0, 0.12),
    0 34px 90px rgba(101, 34, 0, 0.24) !important;
  backdrop-filter: blur(24px) saturate(1.28);
}

.fridaybot-section .harness-window header {
  border-bottom-color: rgba(107, 35, 0, 0.14) !important;
  background: linear-gradient(90deg, rgba(255, 251, 222, 0.34), rgba(255, 179, 34, 0.16));
}

.fridaybot-section .harness-window header span,
.fridaybot-section .harness-track-head span,
.fridaybot-section .harness-token span,
.fridaybot-section .harness-context b {
  color: #8d3100 !important;
}

.fridaybot-section .harness-window header strong,
.fridaybot-section .harness-track-head strong,
.fridaybot-section .harness-workline span,
.fridaybot-section .harness-token strong {
  color: #351205 !important;
}

.fridaybot-section .harness-window header em,
.fridaybot-section .harness-models span.active {
  border-color: rgba(255, 178, 24, 0.62) !important;
  background: linear-gradient(135deg, rgba(255, 248, 190, 0.82), rgba(255, 169, 18, 0.28)) !important;
  color: #5a1b00 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 224, 0.78);
}

.fridaybot-section .harness-body {
  background:
    radial-gradient(circle at 52% 0%, rgba(255, 252, 216, 0.34), transparent 38%),
    linear-gradient(180deg, rgba(255, 238, 151, 0.18), rgba(255, 161, 0, 0.1));
}

.fridaybot-section .harness-track {
  border-color: rgba(107, 35, 0, 0.15) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 225, 0.42), rgba(255, 193, 58, 0.16)),
    rgba(255, 242, 180, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 229, 0.62);
  backdrop-filter: blur(18px) saturate(1.18);
}

.fridaybot-section .harness-track-head {
  border-bottom-color: rgba(107, 35, 0, 0.12) !important;
}

.fridaybot-section .harness-models span,
.fridaybot-section .harness-context span,
.fridaybot-section .harness-token {
  border-color: rgba(107, 35, 0, 0.14) !important;
  background: rgba(255, 252, 220, 0.34) !important;
  color: rgba(53, 18, 5, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 229, 0.5);
}

.fridaybot-section .harness-track-core,
.fridaybot-section .harness-token-memory {
  border-color: rgba(255, 172, 0, 0.5) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 252, 206, 0.58), transparent 34%),
    linear-gradient(135deg, rgba(255, 183, 27, 0.3), rgba(255, 248, 210, 0.24)) !important;
}

.fridaybot-section .harness-token small {
  color: rgba(53, 18, 5, 0.62) !important;
}

.fridaybot-section .harness-workline i,
.fridaybot-section .harness-flow i {
  background: linear-gradient(90deg, rgba(141, 49, 0, 0.12), rgba(255, 169, 0, 0.95), rgba(141, 49, 0, 0.12)) !important;
}

.fridaybot-section .harness-flow i {
  background: linear-gradient(180deg, rgba(141, 49, 0, 0.12), rgba(255, 169, 0, 0.92), rgba(141, 49, 0, 0.12)) !important;
}

@media (max-width: 820px) {
  .fridaybot-section {
    padding: 76px 18px 84px !important;
  }
}

.fridaybot-section .fridaybot-word {
  background-image: linear-gradient(135deg, #3a0e00 0%, #692000 38%, #b24100 72%, #e86f00 100%) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 246, 174, 0.28));
}

.fridaybot-copy h2 .fridaybot-word {
  -webkit-text-stroke: 0.35px rgba(57, 14, 0, 0.18);
}

.fridaybot-section .harness-window::before {
  content: "";
  position: absolute;
  inset: -40% -18%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 252, 202, 0.6) 45%, transparent 59%),
    radial-gradient(circle at 32% 42%, rgba(255, 244, 112, 0.44), transparent 24%);
  transform: translateX(-34%);
  animation: fridaybotGleam 5.4s ease-in-out infinite;
}

.fridaybot-section .harness-window > * {
  position: relative;
  z-index: 1;
}

.fridaybot-section .harness-track-core {
  position: relative;
  overflow: hidden;
}

.fridaybot-section .harness-track-core::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.52;
  background:
    radial-gradient(circle at var(--mx, 18%) 50%, rgba(255, 247, 137, 0.42), transparent 18%),
    linear-gradient(90deg, transparent, rgba(255, 185, 18, 0.26), transparent);
  background-size: 180% 100%;
  animation: fridaybotTrackGlow 3.6s linear infinite;
}

.fridaybot-section .harness-models span,
.fridaybot-section .harness-token {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.fridaybot-section .harness-models span:hover,
.fridaybot-section .harness-token:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 178, 24, 0.72) !important;
  background: rgba(255, 252, 216, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 231, 0.74),
    0 12px 28px rgba(108, 37, 0, 0.14) !important;
}

@keyframes fridaybotGleam {
  0%, 18% {
    transform: translateX(-42%) rotate(-3deg);
    opacity: 0;
  }
  44% {
    opacity: 0.5;
  }
  72%, 100% {
    transform: translateX(38%) rotate(-3deg);
    opacity: 0;
  }
}

@keyframes fridaybotTrackGlow {
  from { background-position: 120% 0; }
  to { background-position: -80% 0; }
}

.context-engine-section,
.faq-section,
.beta-section,
.site-footer {
  position: relative;
  overflow: hidden;
}

.context-engine-section {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 249, 187, 0.58), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255, 139, 0, 0.25), transparent 32%),
    linear-gradient(135deg, #fff2a9 0%, #ffc13a 46%, #ef8f05 100%) !important;
}

.faq-section::before,
.beta-section::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff08a' stroke-width='1' opacity='.42'%3E%3Cpath d='M0 20H28V0M28 20V48H56V32H96V0M112 0V28H140M0 70H22V98H54V82H84V54H116V70H140M0 126H32V112H62V140M78 140V112H110V96H140'/%3E%3Cpath d='M0 48H18M44 48H64M76 20H102M18 112H42M82 92H118M108 42H140'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 18% 20%, rgba(255, 255, 219, 0.26), transparent 28%),
    linear-gradient(rgba(255, 250, 182, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 250, 182, 0.1) 1px, transparent 1px);
  background-size: 140px 140px, 100% 100%, 34px 34px, 34px 34px;
  opacity: 0.6;
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 86%, transparent 100%);
}

.context-engine-shell,
.faq-shell,
.beta-shell,
.footer-shell {
  position: relative;
  z-index: 1;
}

.faq-section {
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 252, 208, 0.74), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(255, 142, 0, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(255, 235, 126, 0.88), rgba(255, 171, 18, 0.38)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 224, 0.6),
    0 24px 70px rgba(100, 35, 0, 0.14);
}

.faq-list details {
  backdrop-filter: blur(16px) saturate(1.15);
}

.beta-section {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 218, 0.72), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(255, 138, 0, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(255, 235, 126, 0.88), rgba(232, 138, 0, 0.38)) !important;
}

.site-footer {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 232, 109, 0.56), transparent 31%),
    radial-gradient(circle at 86% 72%, rgba(117, 36, 0, 0.28), transparent 34%),
    linear-gradient(135deg, #ffd45a 0%, #e88a00 55%, #a33400 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .fridaybot-section .harness-window::before,
  .fridaybot-section .harness-track-core::after,
  .fridaybot-section .harness-models span.active,
  .fridaybot-section .harness-token-memory {
    animation: none !important;
  }
}

.workflow-row::before {
  border-color: rgba(255, 246, 174, 0.46) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 246, 174, 0.52), rgba(255, 169, 0, 0.22) 48%, rgba(110, 38, 0, 0.22)) !important;
  background-size: auto !important;
  background-position: center !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 224, 0.62),
    0 28px 76px rgba(94, 32, 0, 0.2) !important;
}

.workflow-row.data-row::before {
  background-image:
    linear-gradient(135deg, rgba(255, 246, 174, 0.5), rgba(255, 176, 20, 0.22) 52%, rgba(92, 29, 0, 0.2)) !important;
  background-size: auto !important;
  background-position: center !important;
}

.workflow-row.chat-row::before {
  background-image:
    linear-gradient(135deg, rgba(255, 248, 194, 0.48), rgba(244, 140, 0, 0.24) 52%, rgba(90, 30, 0, 0.22)) !important;
  background-size: auto !important;
  background-position: center !important;
}

.workflow-row.output-row::before {
  background-image:
    linear-gradient(135deg, rgba(255, 239, 145, 0.5), rgba(255, 177, 24, 0.18) 44%, rgba(52, 15, 0, 0.34)) !important;
  background-size: auto !important;
  background-position: center !important;
}

.workflow-copy {
  border-color: rgba(255, 244, 175, 0.54) !important;
  background:
    linear-gradient(135deg, rgba(255, 251, 220, 0.42), rgba(255, 178, 28, 0.2)),
    rgba(255, 214, 96, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 224, 0.58),
    0 20px 52px rgba(82, 26, 0, 0.16) !important;
  backdrop-filter: blur(18px) saturate(1.22);
}

.workflow-row .workflow-copy h3 {
  color: #351205 !important;
  text-shadow: 0 1px 0 rgba(255, 248, 186, 0.48) !important;
}

.workflow-row .workflow-copy p {
  color: rgba(53, 18, 5, 0.8) !important;
  text-shadow: none !important;
  font-weight: 520;
}

.workflow-row .step-node,
.workflow-row.reverse .step-node {
  border-color: rgba(255, 246, 174, 0.72) !important;
  background:
    linear-gradient(135deg, #fff7ad, #ffc13a 56%, #ff8a00) !important;
  color: #351205 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 224, 0.76),
    0 0 0 5px rgba(255, 195, 58, 0.18),
    0 16px 34px rgba(80, 24, 0, 0.18) !important;
}

.workflow-run-console {
  border: 1px solid rgba(255, 245, 176, 0.5);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 252, 220, 0.46), rgba(255, 175, 22, 0.2)),
    rgba(255, 205, 71, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 228, 0.64),
    0 20px 54px rgba(82, 26, 0, 0.16);
  backdrop-filter: blur(18px) saturate(1.24);
}

.run-ask,
.run-panel {
  border-color: rgba(106, 35, 0, 0.16) !important;
  background: rgba(255, 250, 214, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 224, 0.58) !important;
}

.run-step {
  border-color: rgba(106, 35, 0, 0.14) !important;
  background:
    linear-gradient(135deg, rgba(255, 250, 214, 0.56), rgba(255, 184, 36, 0.18)) !important;
  color: #351205 !important;
}

.run-step:hover,
.run-step:focus-visible,
.run-step.is-active {
  border-color: rgba(255, 169, 0, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(255, 252, 222, 0.82), rgba(255, 171, 18, 0.34)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 228, 0.72),
    0 10px 24px rgba(91, 29, 0, 0.13) !important;
}

.run-ask span,
.run-step span {
  color: #8b2e00 !important;
}

.run-ask strong,
.run-step strong,
.run-step code {
  color: #351205 !important;
}

.run-ask strong::after,
.run-output-bars i {
  background: #ff8a00 !important;
}

.run-flow i {
  background: rgba(89, 28, 0, 0.16) !important;
}

.run-flow i::after {
  background: linear-gradient(90deg, transparent, rgba(255, 139, 0, 0.95), transparent) !important;
}

.beta-section {
  background:
    linear-gradient(135deg, rgba(255, 251, 218, 0.38), rgba(255, 174, 24, 0.16)),
    linear-gradient(135deg, #ffd45a, #e88a00) !important;
  border-color: rgba(255, 245, 176, 0.58) !important;
}

.site-footer {
  background:
    linear-gradient(135deg, rgba(255, 245, 176, 0.28), rgba(70, 18, 0, 0.2)),
    linear-gradient(135deg, #ffd45a 0%, #e88a00 52%, #9f3300 100%) !important;
}

.beta-section::before,
.site-footer::before {
  opacity: 0.34 !important;
}

@media (max-width: 820px) {
  .beta-section,
  .site-footer {
    background-size: 74% auto, 78% auto, 72% auto, auto !important;
  }
}

.workflow-row::before,
.workflow-row.data-row::before {
  background-image:
    radial-gradient(circle at 10% 4%, rgba(255, 253, 202, 0.88) 0 9%, transparent 26%),
    radial-gradient(circle at 27% 13%, rgba(255, 86, 64, 0.58) 0 8%, transparent 26%),
    radial-gradient(circle at 88% 16%, rgba(255, 46, 0, 0.5) 0 9%, transparent 27%),
    radial-gradient(circle at 74% 82%, rgba(255, 251, 226, 0.9) 0 13%, transparent 31%),
    radial-gradient(circle at 14% 78%, rgba(255, 224, 121, 0.74) 0 12%, transparent 32%),
    radial-gradient(circle at 52% 50%, rgba(255, 191, 0, 0.62) 0 28%, transparent 54%),
    linear-gradient(135deg, #ffca05 0%, #ff9900 45%, #ff6a00 100%) !important;
  background-size: cover !important;
  background-position: center !important;
}

.workflow-row.chat-row::before {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255, 244, 147, 0.78) 0 9%, transparent 26%),
    radial-gradient(circle at 35% 3%, rgba(155, 61, 0, 0.36) 0 8%, transparent 23%),
    radial-gradient(circle at 54% 42%, rgba(255, 225, 55, 0.74) 0 12%, transparent 30%),
    radial-gradient(circle at 82% 38%, rgba(255, 145, 0, 0.52) 0 15%, transparent 36%),
    radial-gradient(circle at 16% 74%, rgba(171, 59, 0, 0.34) 0 14%, transparent 34%),
    radial-gradient(circle at 78% 86%, rgba(255, 214, 39, 0.55) 0 10%, transparent 29%),
    linear-gradient(135deg, #ffd905 0%, #ffb000 42%, #ef7d00 100%) !important;
}

.workflow-row.output-row::before {
  background-image:
    radial-gradient(circle at 8% 8%, rgba(45, 13, 0, 0.76) 0 16%, transparent 38%),
    radial-gradient(circle at 28% 20%, rgba(255, 240, 155, 0.64) 0 8%, transparent 25%),
    radial-gradient(circle at 85% 18%, rgba(255, 248, 194, 0.88) 0 17%, transparent 38%),
    radial-gradient(circle at 22% 72%, rgba(255, 112, 0, 0.54) 0 14%, transparent 34%),
    radial-gradient(circle at 64% 60%, rgba(255, 184, 39, 0.58) 0 28%, transparent 58%),
    linear-gradient(135deg, #5b1b00 0%, #c65a00 38%, #ffc33b 100%) !important;
}

.workflow-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 30px;
  opacity: 0.26;
  background:
    linear-gradient(rgba(255, 246, 176, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 246, 176, 0.14) 1px, transparent 1px),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 225, 0.18), transparent 40%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  mix-blend-mode: screen;
}

.workflow-row > * {
  position: relative;
  z-index: 1;
}

.beta-section {
  background:
    radial-gradient(circle at 8% 6%, rgba(255, 253, 202, 0.82) 0 10%, transparent 28%),
    radial-gradient(circle at 28% 18%, rgba(255, 90, 52, 0.42) 0 8%, transparent 26%),
    radial-gradient(circle at 82% 22%, rgba(255, 84, 0, 0.42) 0 11%, transparent 31%),
    radial-gradient(circle at 72% 78%, rgba(255, 251, 224, 0.72) 0 14%, transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(255, 210, 49, 0.58) 0 13%, transparent 34%),
    linear-gradient(135deg, #ffd33f 0%, #ff9f00 48%, #e45f00 100%) !important;
}

.site-footer {
  background:
    radial-gradient(circle at 8% 12%, rgba(52, 12, 0, 0.68) 0 15%, transparent 36%),
    radial-gradient(circle at 34% 18%, rgba(255, 236, 144, 0.48) 0 8%, transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(255, 248, 194, 0.64) 0 16%, transparent 38%),
    radial-gradient(circle at 18% 78%, rgba(255, 108, 0, 0.42) 0 13%, transparent 34%),
    radial-gradient(circle at 64% 68%, rgba(255, 184, 39, 0.46) 0 24%, transparent 55%),
    linear-gradient(135deg, #5f1a00 0%, #d46600 48%, #ffc43d 100%) !important;
}

.beta-section::before,
.site-footer::before {
  background-image:
    linear-gradient(rgba(255, 246, 176, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 246, 176, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 25% 20%, rgba(255, 255, 226, 0.2), transparent 32%) !important;
  background-size: 38px 38px, 38px 38px, 100% 100% !important;
  opacity: 0.42 !important;
  mix-blend-mode: screen;
}

@media (max-width: 820px) {
  .workflow-row::after {
    border-radius: 20px;
  }

  .beta-section,
  .site-footer {
    background-size: cover !important;
  }
}

.workflow-section {
  background: #f6a900 !important;
  border-top-color: rgba(105, 37, 0, 0.12) !important;
  border-bottom-color: rgba(105, 37, 0, 0.12) !important;
}

.workflow-section::before,
.workflow-section::after {
  content: none !important;
  display: none !important;
}

.workflow-row::after,
.faq-section::before,
.beta-section::before,
.site-footer::before {
  content: none !important;
  display: none !important;
}

.context-engine-section {
  background: #fff3a8 !important;
}

.context-engine-section::before {
  background-image:
    linear-gradient(rgba(177, 89, 0, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177, 89, 0, 0.06) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  opacity: 0.65 !important;
}

.context-studio-board {
  border-radius: 34px;
  background:
    linear-gradient(rgba(159, 74, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 74, 0, 0.048) 1px, transparent 1px),
    #fff7c9 !important;
  background-size: 30px 30px, 30px 30px, auto !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 226, 0.72),
    0 28px 74px rgba(111, 45, 0, 0.12);
}

.comparison-heading {
  grid-template-columns: 1fr !important;
  gap: 16px 42px !important;
  align-items: start !important;
  margin-bottom: 32px !important;
}

.comparison-heading > span {
  grid-column: 1 / -1 !important;
  margin-bottom: 0 !important;
  align-self: start;
}

.comparison-heading h2 {
  grid-column: 1 / -1 !important;
  margin-top: 0 !important;
}

.comparison-heading p {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

.faq-section {
  padding: 64px 24px !important;
  background:
    linear-gradient(90deg, #ffef45 0%, #ffd31f 24%, #f6aa05 46%, #e88312 70%, #bb5a23 100%) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.faq-shell {
  max-width: 860px !important;
  padding: 38px 42px;
  border: 1px solid rgba(255, 246, 178, 0.58);
  border-radius: 32px;
  background:
    linear-gradient(90deg, rgba(255, 250, 184, 0.82) 0%, rgba(255, 211, 31, 0.58) 28%, rgba(239, 137, 0, 0.42) 64%, rgba(166, 74, 19, 0.34) 100%),
    rgba(255, 228, 101, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 224, 0.72),
    0 30px 80px rgba(97, 34, 0, 0.18);
  backdrop-filter: blur(16px) saturate(1.14);
}

.faq-shell > .section-eyebrow {
  display: flex;
  width: fit-content;
  margin: 0 0 8px !important;
  color: #7a2600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.faq-shell h2 {
  margin-top: 0 !important;
  color: #351205 !important;
}

.faq-list {
  margin-top: 26px;
}

.faq-list details {
  border-color: rgba(77, 24, 0, 0.14) !important;
  background: rgba(255, 248, 205, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 224, 0.54);
}

.beta-section {
  background:
    linear-gradient(90deg, #fff05b 0%, #ffd127 24%, #f3a705 48%, #e88312 72%, #c66a21 100%) !important;
  border-color: rgba(255, 246, 178, 0.58) !important;
}

.beta-shell {
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255, 250, 184, 0.72), rgba(255, 179, 25, 0.32), rgba(179, 80, 24, 0.22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 224, 0.68),
    0 24px 68px rgba(98, 34, 0, 0.16);
  backdrop-filter: blur(14px) saturate(1.12);
}

.site-footer {
  background:
    linear-gradient(90deg, #ffd64a 0%, #f6aa05 34%, #e88312 68%, #bd5a19 100%) !important;
}

.footer-shell {
  border-color: rgba(83, 27, 0, 0.16) !important;
  background:
    linear-gradient(135deg, rgba(255, 249, 199, 0.42), rgba(255, 184, 35, 0.18)),
    rgba(255, 213, 93, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 224, 0.58),
    0 18px 50px rgba(94, 32, 0, 0.12);
}

@media (max-width: 720px) {
  .faq-section {
    padding: 42px 16px !important;
  }

  .faq-shell {
    padding: 28px 20px;
    border-radius: 24px;
  }

  .comparison-heading > span {
    margin-bottom: 0 !important;
  }
}

.workflow-section {
  background: #fff3a8 !important;
}

.workflow-row::before,
.workflow-row.data-row::before,
.workflow-row.chat-row::before,
.workflow-row.output-row::before {
  border-color: var(--glass-row-border) !important;
  background: var(--glass-row-background) !important;
  box-shadow: var(--glass-row-shadow) !important;
  backdrop-filter: var(--glass-row-filter);
}

.workflow-copy {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.workflow-row .workflow-copy h3 {
  color: #351205 !important;
  text-shadow: none !important;
}

.workflow-row .workflow-copy p {
  color: rgba(53, 18, 5, 0.72) !important;
  text-shadow: none !important;
}

@media (max-width: 820px) {
  .workflow-copy {
    padding: 8px 0 !important;
  }
}

.workflow-section,
.faq-section {
  background:
    linear-gradient(rgba(177, 89, 0, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177, 89, 0, 0.06) 1px, transparent 1px),
    #fff3a8 !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}

.workflow-run-console .run-panel-head span,
.workflow-run-console .run-panel-head strong,
.workflow-run-console .run-status,
.workflow-run-console .run-status span {
  color: #351205 !important;
}

.workflow-run-console .run-panel-head {
  border-bottom-color: rgba(53, 18, 5, 0.12) !important;
}

.workflow-run-console .run-status i {
  background: #8b2e00 !important;
}

.context-studio-board {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.faq-section {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.faq-shell {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.manual-lane .operator-chip {
  content: none !important;
  display: none !important;
}

.manual-lane .sprawl-item {
  z-index: 2;
  transition:
    opacity 420ms ease,
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    z-index 0s 220ms;
}

.manual-lane .sprawl-item:hover,
.manual-lane .sprawl-item.is-visible:hover,
.manual-lane .sprawl-item.is-front {
  z-index: 24;
  transform: translateY(-8px) rotate(var(--r)) scale(1.035);
  transition:
    opacity 420ms ease,
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    z-index 0s 0s;
}

.midpage-cta-section {
  position: relative;
  isolation: isolate;
  background: var(--surface-butter) !important;
}

.midpage-cta-section canvas,
.midpage-cta-section .vanta-canvas {
  display: none !important;
  z-index: 0 !important;
}

.midpage-cta-section > * {
  position: relative;
  z-index: 1;
}

.beta-section,
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.beta-section {
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 250, 190, 0.84), transparent 34%),
    radial-gradient(circle at 74% 22%, rgba(255, 175, 34, 0.72), transparent 38%),
    radial-gradient(circle at 34% 86%, rgba(255, 117, 16, 0.5), transparent 38%),
    linear-gradient(135deg, #ffca00 0%, #ff9d00 48%, #c66d13 100%) !important;
}

.site-footer {
  background: var(--surface-butter) !important;
}

.beta-section canvas,
.beta-section .vanta-canvas,
.site-footer canvas,
.site-footer .vanta-canvas {
  z-index: 0 !important;
}

.beta-section > *,
.site-footer > * {
  position: relative;
  z-index: 1;
}

.beta-shell {
  border-color: rgba(255, 246, 178, 0.48) !important;
  background:
    linear-gradient(135deg, rgba(255, 251, 214, 0.36), rgba(255, 184, 35, 0.16)),
    rgba(72, 24, 0, 0.1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 224, 0.5),
    0 22px 70px rgba(72, 24, 0, 0.16) !important;
  backdrop-filter: blur(14px) saturate(1.12);
}

.footer-shell {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.footer-shell strong,
.footer-shell p,
.footer-links a {
  color: var(--sheet-text) !important;
  text-shadow: none !important;
}

.footer-links a {
  border-color: rgba(255, 246, 178, 0.44) !important;
  background: rgba(255, 248, 205, 0.16) !important;
}

.footer-links a:hover {
  border-color: rgba(255, 250, 207, 0.76) !important;
  background: rgba(255, 248, 205, 0.26) !important;
}

.faq-shell > .section-eyebrow,
.faq-shell h2 {
  color: #351205 !important;
}

.site-footer {
  width: 100% !important;
  min-height: 220px;
  margin: 0 !important;
  padding: 58px 32px 64px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.footer-shell {
  width: min(1240px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.footer-shell strong {
  color: #fff8d5 !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  font-weight: 780;
  line-height: 1;
}

.footer-shell p {
  max-width: 720px !important;
  margin-top: 14px !important;
  color: rgba(255, 248, 213, 0.9) !important;
  font-size: clamp(16px, 1.4vw, 21px) !important;
  line-height: 1.35;
}

.footer-links {
  align-items: center;
  gap: 16px !important;
}

.footer-links a {
  min-height: 54px !important;
  padding: 0 28px !important;
  border: 1px solid rgba(255, 246, 178, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(255, 248, 205, 0.14) !important;
  color: #fff8d5 !important;
  font-size: 17px !important;
  font-weight: 760 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 224, 0.34);
  backdrop-filter: blur(14px) saturate(1.12);
}

.footer-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 250, 207, 0.78) !important;
  background: rgba(255, 248, 205, 0.26) !important;
}

@media (max-width: 720px) {
  .site-footer {
    padding: 48px 20px 56px !important;
  }

  .footer-shell {
    align-items: flex-start !important;
  }

  .footer-links {
    justify-content: flex-start !important;
  }
}

.site-footer {
  min-height: 120px !important;
  padding: 28px 32px 34px !important;
}

.footer-shell {
  align-items: center !important;
}

.footer-shell strong {
  color: #351205 !important;
  font-size: clamp(20px, 1.6vw, 26px) !important;
  text-shadow: none !important;
}

.footer-shell p {
  max-width: 680px !important;
  margin-top: 8px !important;
  color: rgba(53, 18, 5, 0.84) !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  text-shadow: none !important;
}

.footer-links a {
  min-height: 44px !important;
  padding: 0 22px !important;
  color: #351205 !important;
  font-size: 15px !important;
  text-shadow: none !important;
  border-color: rgba(53, 18, 5, 0.18) !important;
  background: rgba(255, 248, 205, 0.26) !important;
}

.footer-links a:hover {
  border-color: rgba(53, 18, 5, 0.32) !important;
  background: rgba(255, 248, 205, 0.38) !important;
}

.midpage-cta-shell > p {
  color: #351205 !important;
  text-shadow: none !important;
}

.beta-copy .section-eyebrow {
  color: #351205 !important;
  text-shadow: none !important;
}

@media (max-width: 720px) {
  .site-footer {
    padding: 26px 20px 32px !important;
  }
}

.site-footer {
  margin-top: clamp(28px, 4vw, 56px) !important;
  padding-top: 30px !important;
}

@media (max-width: 720px) {
  .site-footer {
    margin-top: 28px !important;
    padding-top: 28px !important;
  }
}

.site-footer {
  background:
    radial-gradient(ellipse 72% 140% at 50% 50%, rgba(255, 245, 178, 0.28), transparent 66%),
    linear-gradient(90deg, rgba(255, 222, 93, 0.28), rgba(255, 168, 24, 0.24), rgba(198, 109, 19, 0.26)),
    linear-gradient(135deg, rgba(255, 190, 0, 0.78) 0%, rgba(255, 145, 0, 0.76) 46%, rgba(183, 89, 13, 0.78) 100%) !important;
  backdrop-filter: blur(18px) saturate(1.18);
}

.site-footer::after {
  content: none !important;
  display: none !important;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 225, 0.12), rgba(255, 166, 0, 0.04)),
    linear-gradient(90deg, rgba(255, 251, 210, 0.1), rgba(255, 218, 118, 0.08), rgba(93, 32, 0, 0.06));
  opacity: 0.72;
  mix-blend-mode: screen;
}

.site-footer canvas,
.site-footer .vanta-canvas {
  display: none !important;
}

:root {
  --sheet-bg: #fff3a8;
  --sheet-bg-soft: #fff7c9;
  --sheet-line: rgba(141, 87, 0, 0.2);
  --sheet-text: #351205;
  --sheet-text-soft: rgba(53, 18, 5, 0.72);
  --sheet-accent: #a94a00;
  --sheet-select: #237346;
  --sheet-bg-x: 0px;
  --sheet-bg-y: 0px;
  --sheet-select-x: 192px;
  --sheet-select-y: 128px;
  --sheet-select-w: 96px;
  --sheet-select-h: 32px;
  --sheet-cell-x: 192px;
  --sheet-cell-y: 128px;
  --sheet-cell-w: 96px;
  --sheet-cell-h: 32px;
  --sheet-cell-delay: 0ms;

  /* Surface grammar — butter: canvas/conversion; glass: proof panels; cream: product inset */
  --surface-butter: var(--sheet-bg);
  --surface-butter-border: rgba(87, 30, 5, 0.12);
  --surface-butter-shadow: 0 10px 34px rgba(87, 30, 5, 0.1);

  --section-pad-y: clamp(80px, 7vw, 104px);
  --section-pad-x: 24px;
  --section-cta-pad-y: clamp(28px, 3.5vw, 44px);

  --glass-shell-border: rgba(111, 68, 26, 0.18);
  --glass-shell-background: linear-gradient(135deg, rgba(255, 255, 246, 0.64), rgba(255, 237, 194, 0.28)), rgba(255, 250, 237, 0.44);
  --glass-shell-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 22px 64px rgba(103, 55, 7, 0.1);
  --glass-shell-filter: blur(18px) saturate(1.1);
  --glass-shell-radius: 28px;

  --glass-row-border: rgba(111, 68, 26, 0.16);
  --glass-row-background: linear-gradient(135deg, rgba(255, 255, 246, 0.44), rgba(255, 237, 194, 0.18)), rgba(255, 250, 237, 0.22);
  --glass-row-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 20px 56px rgba(103, 55, 7, 0.08);
  --glass-row-filter: blur(18px) saturate(1.08);

  --glass-chip-border: rgba(111, 68, 26, 0.16);
  --glass-chip-background: rgba(255, 250, 237, 0.42);
  --glass-chip-background-strong: linear-gradient(135deg, rgba(255, 255, 246, 0.74), rgba(255, 232, 168, 0.42)), rgba(255, 250, 237, 0.55);
  --glass-chip-shadow: 0 14px 34px rgba(103, 55, 7, 0.12);

  --faq-chip-border: rgba(111, 68, 26, 0.22);
  --faq-chip-background: #fff8ef;
  --faq-chip-background-hover: #fff3dc;
  --faq-chip-background-open: #fff0c4;
  --faq-chip-shadow: 0 4px 14px rgba(103, 55, 7, 0.08);

  --glass-header-background: rgba(255, 250, 237, 0.18);

  --glass-pill-border: rgba(53, 18, 5, 0.2);
  --glass-pill-background: linear-gradient(135deg, rgba(255, 255, 231, 0.44), rgba(255, 197, 66, 0.24));
  --glass-pill-shadow: inset 0 1px 0 rgba(255, 255, 235, 0.5), 0 10px 30px rgba(103, 55, 7, 0.08);

  --product-inset-background: linear-gradient(135deg, rgba(255, 255, 248, 0.96), rgba(255, 244, 218, 0.92)), #fff8ef;
}

.developer-section,
.comparison-section,
.workflow-section,
.security-section,
.beta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--sheet-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 243, 168, 0.98), rgba(255, 243, 168, 0.94)),
    var(--sheet-bg) !important;
}

.developer-section::before,
.comparison-section::before,
.workflow-section::before,
.security-section::before,
.beta-section::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 252, 216, 0.38), transparent 15%, transparent 86%, rgba(219, 164, 74, 0.1)),
    url("./assets/friday-sheet-surface.svg") left top / 960px 416px repeat !important;
  opacity: 0.94 !important;
  transform: none !important;
  animation: none !important;
  mask-image: none !important;
}

.developer-section::after,
.comparison-section::after,
.workflow-section::after,
.security-section::after,
.beta-section::after {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  box-sizing: border-box;
  width: var(--sheet-select-w);
  height: var(--sheet-select-h);
  pointer-events: none;
  border: 2px solid var(--sheet-select);
  background:
    linear-gradient(var(--sheet-select), var(--sheet-select)) calc(100% + 1px) calc(100% + 1px) / 8px 8px no-repeat,
    rgba(35, 115, 70, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 0 0 1px rgba(35, 115, 70, 0.16),
    0 10px 28px rgba(35, 115, 70, 0.12);
  transform: translate(var(--sheet-select-x), var(--sheet-select-y));
  transition:
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1),
    width 780ms cubic-bezier(0.22, 1, 0.36, 1),
    height 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.developer-section > *,
.comparison-section > *,
.workflow-section > *,
.security-section > *,
.beta-section > * {
  position: relative;
  z-index: 1;
}

.workflow-wallpaper,
.beta-section canvas,
.beta-section .vanta-canvas {
  display: none !important;
}

.developer-section .section-eyebrow,
.comparison-heading span,
.comparison-lane-head span,
.workflow-copy .step-node,
.workflow-copy h3,
.security-section .section-eyebrow,
.beta-copy .section-eyebrow {
  color: var(--sheet-accent) !important;
  text-shadow: none !important;
}

.developer-copy h2,
.comparison-heading h2,
.comparison-lane-head strong,
.workflow-row .workflow-copy h3,
.security-copy h2,
.beta-copy h2 {
  color: var(--sheet-text) !important;
  text-shadow: none !important;
}

.developer-copy p,
.comparison-heading p,
.workflow-row .workflow-copy p,
.security-copy p,
.beta-copy p {
  color: var(--sheet-text-soft) !important;
  text-shadow: none !important;
}

.comparison-lane,
.workflow-run-console,
.context-strip,
.friday-product-frame,
.security-window,
.beta-shell {
  border: 1px solid var(--glass-shell-border) !important;
  background: var(--glass-shell-background) !important;
  box-shadow: var(--glass-shell-shadow) !important;
  backdrop-filter: var(--glass-shell-filter);
}

.comparison-lane,
.future-workspace,
.workflow-run-console,
.friday-product-frame,
.security-window,
.beta-shell {
  border-radius: var(--glass-shell-radius) !important;
}

.workflow-row::before,
.workflow-row.data-row::before,
.workflow-row.chat-row::before,
.workflow-row.output-row::before {
  border-color: var(--glass-row-border) !important;
  background: var(--glass-row-background) !important;
  box-shadow: var(--glass-row-shadow) !important;
  backdrop-filter: var(--glass-row-filter);
}

.workflow-row::after {
  display: none !important;
}

.comparison-lane-head,
.future-toolbar,
.security-window header {
  border-color: var(--glass-chip-border) !important;
  background: var(--glass-header-background) !important;
}

.future-toolbar,
.workspace-step,
.run-step,
.security-control,
.security-detail,
.beta-seat-count,
.beta-terms,
.beta-actions {
  border-color: var(--glass-chip-border) !important;
  background: var(--glass-chip-background) !important;
  color: var(--sheet-text) !important;
}

.sprawl-item {
  border-color: var(--glass-chip-border) !important;
  background: var(--glass-chip-background-strong) !important;
  color: var(--sheet-text) !important;
  box-shadow: var(--glass-chip-shadow) !important;
}

.sprawl-item strong,
.workspace-step p,
.workspace-step code,
.future-toolbar span,
.future-toolbar strong,
.security-detail strong,
.security-device-screen strong,
.beta-terms b {
  color: var(--sheet-text) !important;
}

.sprawl-item span,
.sprawl-item small,
.workspace-step span,
.security-detail span,
.security-window header span,
.beta-seat-count span,
.beta-terms span,
.beta-seat-count small {
  color: var(--sheet-text-soft) !important;
}

.comparison-spine span,
.run-status i {
  border-color: rgba(169, 74, 0, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(255, 232, 132, 0.78), rgba(255, 153, 0, 0.55)) !important;
  color: var(--sheet-text) !important;
}

.comparison-spine i,
.context-rail b,
.run-flow i {
  background:
    linear-gradient(90deg, transparent, rgba(169, 74, 0, 0.48), transparent) !important;
}

.security-control:hover,
.security-control:focus-visible,
.security-control.active,
.run-step:hover,
.run-step.is-active {
  border-color: rgba(169, 74, 0, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(255, 249, 218, 0.82), rgba(255, 216, 125, 0.48)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .developer-section::after,
  .comparison-section::after,
  .workflow-section::after,
  .security-section::after,
  .beta-section::after {
    transition: none !important;
  }
}

.revenue-context-message .chat-context-grid,
.friday-product-frame .context-answer-card .chat-context-grid {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr);
}

.friday-context-reply .chat-context-grid section:first-child p {
  margin-top: 5px;
}

.metric-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.context-chat-shell .metric-card-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.context-chat-shell .metric-card-row .compact-number-card:last-child {
  grid-column: 1 / -1;
}

.compact-number-card .number-body {
  min-height: 76px;
  padding: 12px 10px 14px;
}

.compact-number-card .number-value {
  font-size: 26px;
  letter-spacing: -0.035em;
}

.compact-number-card .number-label {
  max-width: 116px;
}

.artifact-pin {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 4;
  display: block;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 1px solid #e0d4c4;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.artifact-pin::before,
.artifact-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  border-radius: 999px;
  background: #e88a00;
  transform: translate(-50%, -50%);
}

.artifact-pin::after {
  width: 1.5px;
  height: 10px;
}

.artifact-pin:hover,
.artifact-pin:focus-visible {
  border-color: #e88a00;
  background: #e88a00;
  outline: none;
}

.artifact-pin:hover::before,
.artifact-pin:hover::after,
.artifact-pin:focus-visible::before,
.artifact-pin:focus-visible::after {
  background: #ffffff;
}

.artifact-pin::selection {
  background: transparent;
}

.revenue-segment-echart {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: clamp(12px, 5%, 24px) !important;
  min-height: 190px;
  padding: 30px 24px 48px 50px !important;
}

.revenue-segment-echart::before {
  left: 50px !important;
  right: 24px !important;
  bottom: 48px !important;
  height: 1.5px !important;
  background: #4d4f56 !important;
}

.revenue-segment-echart .echart-grid-line {
  left: 50px !important;
  right: 24px !important;
}

.revenue-segment-echart .echart-grid-line.line-bottom {
  bottom: 48px !important;
  background: #4d4f56 !important;
}

.revenue-segment-echart .echart-bar {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 100% !important;
  min-height: 110px;
  padding: 0 !important;
  border: 0;
  background: transparent;
  cursor: default;
}

.revenue-segment-echart .echart-bar i,
.revenue-segment-echart .echart-bar::before {
  content: "";
  display: block !important;
  align-self: flex-end !important;
  width: min(24px, 36%) !important;
  min-height: 4px !important;
  border-radius: 4px 4px 0 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.revenue-segment-echart .echart-bar i {
  height: var(--h) !important;
  background: #5473d9 !important;
}

.revenue-segment-echart .echart-bar::before {
  order: 0 !important;
  height: var(--h2, var(--h)) !important;
  background: #b8dc28 !important;
}

.revenue-segment-echart .echart-bar span {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 92px !important;
  margin: 0 !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
  white-space: normal !important;
}

.revenue-segment-echart .echart-bar b {
  display: none !important;
}

.revenue-segment-echart::after {
  content: "Previous fiscal QTD     Current fiscal QTD" !important;
  bottom: 12px !important;
  font-size: 11px !important;
}

.context-chat-shell .live-artifacts .revenue-segment-echart::after,
.workspace-artifact-stack .revenue-segment-echart::after,
.chat-viz-card .revenue-segment-echart::after {
  bottom: 9px !important;
  font-size: 9px !important;
}

.revenue-segment-echart .echart-y,
.line-echart-real .echart-y {
  color: #55565d !important;
  font-size: 10px !important;
  font-weight: 560 !important;
}

.revenue-segment-echart .echart-bar span {
  color: #55565d !important;
  font-size: 10px !important;
  font-weight: 560 !important;
}

.line-echart-real,
.pareto-echart-real {
  position: relative;
  display: block !important;
  min-height: 188px;
  padding: 30px 18px 38px 46px !important;
  box-sizing: border-box;
}

.line-echart-real::before,
.line-echart-real::after,
.pareto-echart-real::before,
.pareto-echart-real::after {
  content: none !important;
}

.line-echart-real .echart-grid-line {
  left: 46px !important;
  right: 18px !important;
}

.line-echart-real .echart-grid-line.line-bottom {
  background: #4d4f56 !important;
}

.segment-trend-line .echart-grid-line.line-mid {
  background: #4d4f56 !important;
}

.line-chart-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 132px;
  overflow: visible;
  fill: none;
}

.line-series {
  fill: none !important;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 2px rgba(28, 26, 22, 0.12));
}

.line-series.enterprise,
.line-legend .enterprise,
.ppt-svg-line.enterprise,
.ppt-svg-legend.enterprise {
  stroke: #5473d9;
  color: #5473d9;
  fill: #5473d9;
}

.line-series.midmarket,
.line-legend .midmarket,
.ppt-svg-line.midmarket,
.ppt-svg-legend.midmarket {
  stroke: #e88a00;
  color: #e88a00;
  fill: #e88a00;
}

.line-series.smb,
.line-legend .smb,
.ppt-svg-line.smb,
.ppt-svg-legend.smb {
  stroke: #2d7d9a;
  color: #2d7d9a;
  fill: #2d7d9a;
}

.line-series.onboarding,
.line-legend .onboarding,
.ppt-svg-line.onboarding,
.ppt-svg-legend.onboarding {
  stroke: #2d7d9a;
  color: #2d7d9a;
  fill: #2d7d9a;
}

.line-series.adoption,
.line-legend .adoption,
.ppt-svg-line.adoption,
.ppt-svg-legend.adoption {
  stroke: #e88a00;
  color: #e88a00;
  fill: #e88a00;
}

.line-series.renewal,
.line-legend .renewal,
.ppt-svg-line.renewal,
.ppt-svg-legend.renewal {
  stroke: #5473d9;
  color: #5473d9;
  fill: #5473d9;
}

.line-legend {
  position: absolute;
  left: 46px;
  right: 18px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: #55565d;
  font-size: 9.5px;
  font-weight: 620;
}

.line-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.line-legend span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.stat-table-real {
  display: grid;
  gap: 0;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid #e0d4c4;
  border-radius: 8px;
  background: #fffdf9;
  color: #3f372f;
  font-family: var(--font-app-ui);
  font-size: 11px;
}

.stat-table-real > div {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 0.7fr;
  border-top: 1px solid #eee3d5;
}

.stat-table-real > div:first-child {
  border-top: 0;
  background: #f5ede3;
  color: #6f6254;
  font-size: 9.5px;
  font-weight: 760;
  text-transform: uppercase;
}

.stat-table-real span,
.stat-table-real b {
  min-width: 0;
  padding: 7px 8px;
  border-left: 1px solid #eee3d5;
  line-height: 1.25;
}

.stat-table-real span:first-child,
.stat-table-real b:first-child {
  border-left: 0;
}

.stat-table-real b {
  font-weight: 650;
}

.pareto-echart-real {
  display: block !important;
  min-height: 210px;
  padding: 16px 14px 12px !important;
}

.pareto-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pareto-axis {
  stroke: #4d4f56;
  stroke-width: 1.6;
}

.pareto-grid {
  stroke: #d9dde1;
  stroke-width: 1.2;
}

.pareto-bar {
  fill: #b8dc28;
}

.pareto-bar.muted {
  fill: #5473d9;
}

.pareto-line {
  fill: none;
  stroke: #e88a00;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pareto-point {
  fill: #e88a00;
  stroke: #fffdf9;
  stroke-width: 3;
}

.pareto-axis-label,
.pareto-x,
.pareto-callout-text {
  fill: #55565d;
  font-family: var(--font-app-ui);
  font-size: 12px;
  font-weight: 600;
}

.pareto-x {
  text-anchor: middle;
  font-size: 11px;
}

.pareto-callout-text {
  fill: #4d3823;
  font-weight: 780;
}

.dashboard-pareto {
  min-height: 320px !important;
  padding: 24px 26px 18px !important;
}

.action-plan-list {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0 0 0 16px;
}

.action-plan-list li {
  color: #1a1a1a;
  font-size: 12px;
  line-height: 1.38;
}

.dashboard-stat-table {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.stat-dashboard-card {
  min-height: 176px;
}

.dashboard-pareto {
  min-height: 272px !important;
  padding: 28px 28px 24px !important;
}

.ppt-svg-line {
  fill: none !important;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ppt-svg-line.pareto {
  stroke: #e88a00;
}

.ppt-svg-legend.strong {
  fill: #4d3823;
  font-weight: 760;
}

.ppt-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(620px, 100%);
}

.preview-surface-real .slide-chart-real[data-variant="metric"]::before,
.preview-surface-real .slide-chart-real[data-variant="metric"]::after,
.output-preview-frame .slide-chart-real[data-variant="metric"]::before,
.output-preview-frame .slide-chart-real[data-variant="metric"]::after {
  content: none !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .slide-chart-real[data-variant="metric"] {
  width: min(620px, 100%) !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card {
  min-width: 0;
  padding: 14px 14px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card strong {
  font-size: 34px !important;
  letter-spacing: -0.045em !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card small {
  font-size: 10.5px !important;
}

@media (max-width: 760px) {
  .metric-card-row,
  .ppt-metric-grid {
    grid-template-columns: 1fr;
  }

  .revenue-context-message .chat-context-grid,
  .friday-product-frame .context-answer-card .chat-context-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 821px) {
  .workflow-section {
    --workflow-run-stack: 188px;
    --workflow-row-chrome: 40px;
    --workflow-frame-height: clamp(340px, calc(100svh - var(--workflow-run-stack) - var(--workflow-row-chrome)), 480px);
  }
}

.context-chat-shell .chart-card-real .card-header-real::after,
.context-chat-shell .live-artifacts .chart-card-real .card-header-real::after,
.output-preview-frame .chart-card-real .card-header-real::after {
  content: none !important;
  display: none !important;
}

.context-chat-shell .live-artifacts .artifact-metric-card {
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
}

.context-chat-shell .live-artifacts .artifact-metric-card .card-header-real {
  min-height: 24px;
  padding: 4px 10px;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-body {
  min-height: 0 !important;
  padding: 4px 8px 7px !important;
  gap: 1px !important;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-value {
  font-size: 21px !important;
  line-height: 0.95 !important;
}

.context-chat-shell .live-artifacts .artifact-metric-card .number-label {
  max-width: 150px !important;
  font-size: 8px !important;
  line-height: 1.05 !important;
}

.context-chat-shell .live-artifacts .artifact-chart-card {
  height: 184px !important;
  min-height: 184px !important;
  max-height: 184px !important;
}

.context-chat-shell .metric-card-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.context-chat-shell .metric-card-row .compact-number-card:last-child {
  grid-column: auto !important;
}

.context-chat-shell .compact-number-card .number-body {
  min-height: 46px !important;
  padding: 6px 6px 7px !important;
}

.context-chat-shell .compact-number-card .number-value {
  font-size: 18px !important;
}

.context-chat-shell .compact-number-card .number-label {
  max-width: 94px !important;
  font-size: 7.8px !important;
  line-height: 1.08 !important;
}

.context-chat-shell .live-artifacts .chart-card-real > b {
  padding-top: 7px !important;
  font-size: 10.5px !important;
}

.context-chat-shell .live-artifacts .revenue-segment-echart,
.context-chat-shell .live-artifacts .line-echart-real,
.context-chat-shell .live-artifacts .pareto-echart-real {
  min-height: 118px !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart {
  min-height: 152px !important;
  padding-top: 24px !important;
  padding-bottom: 42px !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart::before,
.context-chat-shell .chat-viz-card .revenue-segment-echart .echart-grid-line.line-bottom {
  bottom: 42px !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart .echart-bar span {
  top: calc(100% + 4px) !important;
  bottom: auto !important;
}

.output-preview-frame .dashboard-canvas-real {
  padding: 12px 14px 16px !important;
}

.output-preview-frame .dashboard-hero-real {
  margin-bottom: 8px !important;
  padding: 10px 16px !important;
}

.output-preview-frame .dashboard-hero-real h4 {
  font-size: 18px !important;
}

.output-preview-frame .dashboard-hero-real p {
  margin-top: 2px !important;
  font-size: 9.8px !important;
  line-height: 1.22 !important;
}

.output-preview-frame .widget-grid-real {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.output-preview-frame .dashboard-widget-real.type-metric {
  grid-column: span 2 !important;
}

.output-preview-frame .dashboard-widget-real.type-metric .number-card {
  min-height: 82px !important;
  /* Fill the grid cell so every metric card is the same height as the tallest
     (the 2-line "-9.0%" label). Without this the 1-line cards stop at their
     content height and leave an empty strip below that surfaces on hover. */
  height: 100% !important;
  border-radius: 14px !important;
}

.output-preview-frame .dashboard-widget-real.type-metric .number-body {
  min-height: 48px !important;
  padding: 7px 12px 9px !important;
  gap: 2px !important;
  /* The dashboard metric body is a grid (align-items only centers vertically),
     so center horizontally too — matches the flex-centered chat artifact cards. */
  justify-items: center !important;
  text-align: center !important;
}

.output-preview-frame .dashboard-widget-real.type-metric .number-value {
  font-size: clamp(24px, 2.8vw, 34px) !important;
}

.output-preview-frame .dashboard-widget-real.type-metric .number-label {
  max-width: 160px !important;
  font-size: 9.5px !important;
}

/* The shared widget hover shadow (0 20px 42px) is sized for the large chart
   cards; on the small metric cards it pools well below the card and spills out
   their open side edges, looking like something emerging. Use a tighter,
   card-hugging shadow here instead. */
.output-preview-frame .dashboard-widget-real.type-metric:hover {
  box-shadow: 0 6px 16px rgba(66, 43, 15, 0.1) !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .chart-card-real {
  min-height: 246px !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .chart-title-real {
  padding: 11px 16px 0 !important;
  font-size: clamp(13px, 1.35vw, 18px) !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .friday-echart-real {
  min-height: 176px !important;
}

.output-preview-frame .revenue-segment-echart {
  padding-bottom: 58px !important;
}

.output-preview-frame .revenue-segment-echart::before,
.output-preview-frame .revenue-segment-echart .echart-grid-line.line-bottom {
  bottom: 58px !important;
}

.output-preview-frame .revenue-segment-echart::after {
  bottom: 16px !important;
}

.preview-surface-real .ppt-stage-real {
  padding: 18px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr) !important;
  column-gap: 22px !important;
  padding: 32px 36px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  max-width: none !important;
  font-size: 25px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  max-width: none !important;
  font-size: 11.5px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .slide-chart-real[data-variant="chart"] {
  max-width: none !important;
  width: 100% !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .ppt-chart-card {
  transform: none !important;
  transform-origin: center !important;
  width: 100% !important;
}

.workspace-viz-card,
.chart-card-real,
.number-card {
  position: relative;
}

.artifact-pin {
  top: 5px !important;
  right: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  padding: 3px !important;
  border: 1px solid #e0d4c4 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #e88a00 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.artifact-pin::before,
.artifact-pin::after {
  content: none !important;
  display: none !important;
}

.artifact-pin svg {
  display: block;
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.artifact-pin:hover,
.artifact-pin:focus-visible {
  border-color: #e88a00 !important;
  background: #e88a00 !important;
  color: #fffdf9 !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart {
  min-height: 116px !important;
  padding: 18px 14px 34px 38px !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart::before,
.context-chat-shell .chat-viz-card .revenue-segment-echart .echart-grid-line {
  left: 38px !important;
  right: 14px !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart::before,
.context-chat-shell .chat-viz-card .revenue-segment-echart .echart-grid-line.line-bottom {
  bottom: 34px !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart .echart-grid-line.line-top {
  top: 18px !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart .echart-y {
  left: 10px !important;
  font-size: 10px !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart .echart-y.y-bottom {
  bottom: 27px !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart .echart-bar {
  min-height: 74px !important;
  padding-bottom: 0 !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart .echart-bar span {
  top: calc(100% + 4px) !important;
  bottom: auto !important;
}

.context-chat-shell .live-artifacts .revenue-segment-echart .echart-bar,
.output-preview-frame .revenue-segment-echart .echart-bar {
  padding-bottom: 0 !important;
}

.context-chat-shell .live-artifacts .revenue-segment-echart .echart-bar span,
.output-preview-frame .revenue-segment-echart .echart-bar span {
  top: calc(100% + 4px) !important;
  bottom: auto !important;
}

.context-chat-shell .chat-viz-card .revenue-segment-echart::after {
  bottom: 8px !important;
}

.context-chat-shell .detailed-friday-response {
  padding: 8px 12px !important;
}

.context-chat-shell .detailed-friday-response > p {
  margin: 5px 0 !important;
  font-size: 11.5px !important;
  line-height: 1.28 !important;
}
#workflow-chat .detailed-friday-response {
  font-size: 12.6px !important;
  line-height: 1.4 !important;
}

#workflow-chat .detailed-friday-response > strong,
#workflow-chat .detailed-friday-response .reply-author {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#workflow-chat .detailed-friday-response > p {
  color: #60574c !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

#workflow-chat .detailed-friday-response > p b {
  color: #1a1a1a;
}

.context-chat-shell .metric-card-row {
  gap: 6px !important;
  margin: 6px 0 !important;
}
#workflow-chat .metric-card-row {
  width: min(100%, 280px);
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

#workflow-chat .metric-card-row .compact-number-card,
#workflow-chat .metric-card-row .compact-number-card:last-child {
  grid-column: 1 / -1 !important;
}

.context-chat-shell .compact-number-card .card-header-real {
  min-height: 24px !important;
  padding: 4px 8px !important;
}

.context-chat-shell .chat-viz-card .card-header-real {
  min-height: 28px !important;
  padding: 5px 9px !important;
}

.context-chat-shell .chat-viz-card > b {
  padding-top: 8px !important;
}
#workflow-chat .chat-viz-card .revenue-segment-echart {
  min-height: 184px !important;
  padding: 24px 16px 54px 42px !important;
}

#workflow-chat .chat-viz-card .revenue-segment-echart::before,
#workflow-chat .chat-viz-card .revenue-segment-echart .echart-grid-line {
  left: 42px !important;
  right: 16px !important;
}

#workflow-chat .chat-viz-card .revenue-segment-echart::before,
#workflow-chat .chat-viz-card .revenue-segment-echart .echart-grid-line.line-bottom {
  bottom: 54px !important;
}

#workflow-chat .chat-viz-card .revenue-segment-echart .echart-grid-line.line-top {
  top: 24px !important;
}

#workflow-chat .chat-viz-card .revenue-segment-echart .echart-y {
  left: 12px !important;
}

#workflow-chat .chat-viz-card .revenue-segment-echart .echart-y.y-bottom {
  bottom: 46px !important;
}

#workflow-chat .chat-viz-card .revenue-segment-echart .echart-bar {
  min-height: 106px !important;
}

#workflow-chat .chat-viz-card .revenue-segment-echart .echart-bar span {
  top: calc(100% + 6px) !important;
}

#workflow-chat .chat-viz-card .revenue-segment-echart::after {
  bottom: 14px !important;
}

#workflow-chat .chat-viz-card .line-echart-real {
  min-height: 184px !important;
  padding: 24px 16px 54px 42px !important;
}

#workflow-chat .chat-viz-card .line-echart-real .line-chart-svg {
  height: 106px !important;
}

#workflow-chat .chat-viz-card .line-echart-real .echart-grid-line {
  left: 42px !important;
  right: 16px !important;
}

#workflow-chat .chat-viz-card .line-echart-real .echart-grid-line.line-top {
  top: 24px !important;
}

#workflow-chat .chat-viz-card .line-echart-real .echart-grid-line.line-mid {
  top: calc(50% - 15.5px) !important;
}

#workflow-chat .chat-viz-card .line-echart-real .echart-grid-line.line-bottom {
  bottom: 54px !important;
}

#workflow-chat .chat-viz-card .line-echart-real .echart-y {
  left: 12px !important;
}

#workflow-chat .chat-viz-card .line-echart-real .echart-y.y-top {
  top: 18px !important;
}

#workflow-chat .chat-viz-card .line-echart-real .echart-y.y-mid {
  top: calc(50% - 21.5px) !important;
}

#workflow-chat .chat-viz-card .line-echart-real .echart-y.y-bottom {
  bottom: 46px !important;
}

#workflow-chat .chat-viz-card .line-echart-real .line-legend {
  left: 42px !important;
  right: 16px !important;
  bottom: 14px !important;
}

.workflow-run-console {
  z-index: 1 !important;
}

.workflow-copy,
.friday-product-frame {
  z-index: 3 !important;
}

.pareto-right-label,
.ppt-svg-right-label {
  text-anchor: start;
  fill: #6a6259 !important;
  font-weight: 650 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
  grid-template-columns: minmax(0, 0.31fr) minmax(0, 0.69fr) !important;
  column-gap: 16px !important;
  padding: 30px 34px !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4 {
  font-size: 24px !important;
  line-height: 1.08 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
  font-size: 11px !important;
  line-height: 1.3 !important;
}

.preview-surface-real .preview-slide-real[data-slide-variant="chart"] .ppt-chart-card {
  transform: none !important;
  transform-origin: center !important;
}

.context-chat-shell .workspace-preview {
  padding: 12px 16px 14px !important;
}

.context-chat-shell .user-message {
  padding: 7px 10px !important;
}

.context-chat-shell .user-message p {
  font-size: 11.5px !important;
}

.context-chat-shell .compact-number-card .card-header-real {
  min-height: 20px !important;
  padding: 3px 7px !important;
}

.context-chat-shell .compact-number-card .number-body {
  min-height: 36px !important;
  padding: 5px 5px 6px !important;
}

.context-chat-shell .compact-number-card .number-value {
  font-size: 16.5px !important;
}

.context-chat-shell .compact-number-card .number-label {
  font-size: 7.4px !important;
}

.context-chat-shell .composer-real {
  min-height: 36px !important;
  margin-top: 6px !important;
}

/* perf: pause decorative animations while their section is off-screen.
   Invisible by construction -- a paused section is never on screen, and
   resuming continues from the same position (no restart/jump). */
[data-anim-paused],
[data-anim-paused] * {
  animation-play-state: paused !important;
}

/* Artifact sidebar charts (Analyze subsection) render the full chart like
   the main chat transcript — all axis labels, x-labels, and legend — instead
   of being cropped to a fixed card height. Markup completed in index.html;
   this lets the cards grow to fit. */
.context-chat-shell .live-artifacts .artifact-chart-card {
  height: auto !important;
  min-height: var(--chart-artifact-height) !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}

#workflow-chat .live-artifacts .artifact-chart-card {
  border-color: #d9ccb8 !important;
  background: #fbf7f0 !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .card-header-real {
  background: #eee7dd !important;
  border-bottom-color: #e0d4c4 !important;
}

#workflow-chat .live-artifacts .artifact-chart-card > b {
  background: transparent !important;
}

.context-chat-shell .live-artifacts .artifact-chart-card .friday-echart-real {
  min-height: 188px !important;
}

#workflow-chat .live-artifacts .artifact-insight-card {
  flex: 0 0 auto !important;
  min-height: 148px !important;
}

/* The broad `.artifact-panel-real span` rule uppercases and enlarges every
   span; keep chart axis/legend labels matching the chat charts (normal case,
   same legend size). Colours already resolve from the series classes. */
.context-chat-shell .live-artifacts .friday-echart-real span {
  text-transform: none;
}

.context-chat-shell .live-artifacts .friday-echart-real .line-legend span {
  font-size: 9.5px;
}
#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart,
#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real {
  min-height: 184px !important;
  padding: 24px 16px 54px 42px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart::before,
#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart .echart-grid-line,
#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .echart-grid-line {
  left: 42px !important;
  right: 16px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart::before,
#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart .echart-grid-line.line-bottom,
#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .echart-grid-line.line-bottom {
  bottom: 54px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart .echart-grid-line.line-top,
#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .echart-grid-line.line-top {
  top: 24px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .echart-grid-line.line-mid {
  top: calc(50% - 15.5px) !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart .echart-y,
#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .echart-y {
  left: 12px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart .echart-y.y-bottom,
#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .echart-y.y-bottom {
  bottom: 46px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .echart-y.y-top {
  top: 18px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .echart-y.y-mid {
  top: calc(50% - 21.5px) !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart .echart-bar {
  min-height: 106px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart .echart-bar span {
  top: calc(100% + 6px) !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .revenue-segment-echart::after,
#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .line-legend {
  bottom: 14px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .line-legend {
  left: 42px !important;
  right: 16px !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .line-legend span {
  gap: 4px !important;
  white-space: nowrap !important;
}

#workflow-chat .live-artifacts .artifact-chart-card .line-echart-real .line-chart-svg {
  height: 106px !important;
}

.analyze-pareto-svg {
  display: none;
}
.context-chat-shell.with-artifacts {
  transition: grid-template-columns 220ms ease;
}

.context-chat-shell.with-artifacts.is-artifacts-collapsed {
  grid-template-columns: 64px minmax(0, 1fr) 48px !important;
}

@media (max-width: 820px) {
  .context-chat-shell.with-artifacts.is-artifacts-collapsed {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  .context-chat-shell.with-artifacts.is-artifacts-collapsed .workspace-preview {
    grid-column: 1;
    min-width: 0;
  }

  .context-chat-shell.with-artifacts.is-artifacts-collapsed .live-artifacts {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
  }

  .context-chat-shell.with-artifacts:not(.is-artifacts-collapsed) {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }

  .context-chat-shell.with-artifacts:not(.is-artifacts-collapsed) .workspace-preview {
    display: none !important;
  }

  .context-chat-shell.with-artifacts:not(.is-artifacts-collapsed) .live-artifacts {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-left: 0;
  }

  .context-chat-shell.with-artifacts:not(.is-artifacts-collapsed) .live-artifacts .artifact-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    place-items: center start !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid #e0d4c4 !important;
  }

  .context-chat-shell.with-artifacts:not(.is-artifacts-collapsed) .live-artifacts .artifact-head strong {
    display: block !important;
    font-size: 13px !important;
  }

  .context-chat-shell.with-artifacts:not(.is-artifacts-collapsed) .live-artifacts .artifact-head button:not(.artifact-collapse-toggle) {
    display: inline-flex !important;
    align-items: center;
    font-size: 11px !important;
    padding: 0 8px !important;
  }
}

.context-chat-shell .artifact-head {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.context-chat-shell .artifact-collapse-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px !important;
  padding: 0 !important;
  border: 1px solid rgba(232, 138, 0, 0.42);
  border-radius: 8px !important;
  background: #fff8f0;
  color: #e88a00;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(157, 82, 0, 0.12);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.context-chat-shell .artifact-collapse-toggle:hover,
.context-chat-shell .artifact-collapse-toggle:focus-visible {
  border-color: rgba(232, 138, 0, 0.42);
  background: #fff8f0;
  color: #e88a00;
  box-shadow: 0 6px 18px rgba(157, 82, 0, 0.13);
  transform: translateY(-1px);
}

.context-chat-shell .artifact-collapse-toggle svg {
  pointer-events: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.context-chat-shell.is-artifacts-collapsed .artifact-collapse-toggle svg {
  transform: rotate(180deg);
}

.workflow-action-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.workflow-action-hint--shell {
  position: absolute;
  z-index: 12;
  top: 14px;
  right: 54px;
  transform: translateX(10px);
}

.workflow-hint-anchor {
  position: relative;
  display: flex;
  align-items: center;
}

.workflow-action-hint--control {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%) translateX(10px);
}

.workflow-action-hint-chip {
  padding: 7px 11px;
  border: 1px solid rgba(232, 138, 0, 0.48);
  border-radius: 999px;
  background: rgba(255, 248, 240, 0.98);
  color: #9a5a00;
  font-family: var(--font-app-ui);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 10px 24px rgba(157, 82, 0, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

.workflow-action-hint-arrow {
  position: relative;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #e88a00;
  animation: workflowHintNudge 1.6s ease-in-out infinite;
}

.workflow-action-hint-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #e88a00;
  border-right: 2px solid #e88a00;
  transform: translateY(-50%) rotate(45deg);
}

#workflow-chat.is-run-active.is-visible .context-chat-shell.is-artifacts-collapsed .workflow-action-hint--shell,
#workflow-chat.is-visible .context-chat-shell.is-artifacts-collapsed .workflow-action-hint--shell {
  opacity: 1;
  transform: translateX(0);
}

#workflow-output.is-run-active.is-visible .preview-app-real:has([data-preview-panel][data-preview-mode="dashboard"]) .workflow-action-hint--control {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

#workflow-chat.is-run-active.is-visible .context-chat-shell.is-artifacts-collapsed .workflow-action-hint-chip,
#workflow-output.is-run-active.is-visible .preview-app-real:has([data-preview-panel][data-preview-mode="dashboard"]) .workflow-action-hint-chip {
  animation: workflowHintBob 2.4s ease-in-out infinite;
}

#workflow-chat.is-run-active.is-visible .context-chat-shell.is-artifacts-collapsed .artifact-collapse-toggle {
  position: relative;
  z-index: 3;
  border: 1px solid rgba(232, 138, 0, 0.58) !important;
  background: #fff8f0 !important;
  color: #e88a00 !important;
  animation: workflowHintPulse 1.85s ease-out infinite;
}

#workflow-chat.is-run-active.is-visible .context-chat-shell.is-artifacts-collapsed .live-artifacts {
  background:
    linear-gradient(180deg, rgba(255, 248, 240, 0.98) 0%, rgba(255, 251, 245, 0.98) 100%);
  box-shadow: inset 3px 0 0 rgba(232, 138, 0, 0.42);
}

@keyframes workflowHintPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(232, 138, 0, 0.42);
    transform: scale(1);
  }

  55% {
    box-shadow: 0 0 0 11px rgba(232, 138, 0, 0);
    transform: scale(1.08);
  }
}

@keyframes workflowHintBob {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-4px);
  }
}

@keyframes workflowHintNudge {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.72;
  }

  50% {
    transform: translateX(5px);
    opacity: 1;
  }
}

#workflow-output.is-run-active.is-visible .preview-app-real:has([data-preview-panel][data-preview-mode="dashboard"]) .mode-select {
  position: relative;
  z-index: 3;
  border-color: rgba(232, 138, 0, 0.58) !important;
  background: #fff8f0 !important;
  color: #9a5a00 !important;
  animation: workflowHintPulse 1.85s ease-out infinite;
}

#workflow-output.is-run-active.is-visible .preview-app-real:has([data-preview-panel][data-preview-mode="dashboard"]) .preview-app-toolbar {
  box-shadow: inset 0 -3px 0 rgba(232, 138, 0, 0.28);
}

.context-chat-shell.is-artifacts-collapsed .live-artifacts {
  padding: 12px 8px !important;
  overflow: hidden !important;
  mask-image: none !important;
}

.context-chat-shell.is-artifacts-collapsed .live-artifacts .artifact-head {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: 1fr !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.context-chat-shell.is-artifacts-collapsed .live-artifacts .artifact-head strong,
.context-chat-shell.is-artifacts-collapsed .live-artifacts .artifact-head select,
.context-chat-shell.is-artifacts-collapsed .live-artifacts .artifact-head button:not(.artifact-collapse-toggle),
.context-chat-shell.is-artifacts-collapsed .live-artifacts article {
  display: none !important;
}
body {
  background-color: var(--sheet-bg) !important;
}

main {
  position: relative;
  isolation: isolate;
  background: var(--sheet-bg);
}

main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("./assets/friday-sheet-surface.svg") left top / 960px 416px repeat;
  opacity: 1;
}

main > section,
main > footer {
  position: relative;
  z-index: 1;
}

.developer-section,
.comparison-section,
.workflow-section,
.security-section,
.context-engine-section,
.fridaybot-section,
.faq-section,
.beta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--sheet-text) !important;
  background: transparent !important;
}

.developer-section::before,
.comparison-section::before,
.workflow-section::before,
.security-section::before,
.context-engine-section::before,
.fridaybot-section::before,
.faq-section::before,
.beta-section::before,
.site-footer::before {
  content: none !important;
  display: none !important;
}

.developer-section::after,
.comparison-section::after,
.workflow-section::after,
.security-section::after,
.context-engine-section::after,
.fridaybot-section::after,
.faq-section::after,
.beta-section::after {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--sheet-select-w);
  height: var(--sheet-select-h);
  pointer-events: none;
  display: block !important;
  opacity: 0 !important;
  border: 2px solid var(--sheet-select);
  background:
    linear-gradient(var(--sheet-select), var(--sheet-select)) calc(100% + 1px) calc(100% + 1px) / 8px 8px no-repeat,
    rgba(35, 115, 70, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 0 0 1px rgba(35, 115, 70, 0.16),
    0 10px 28px rgba(35, 115, 70, 0.12);
  transform: translate(var(--sheet-select-x), var(--sheet-select-y));
  transition:
    opacity 460ms ease,
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1),
    width 780ms cubic-bezier(0.22, 1, 0.36, 1),
    height 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .developer-section::after,
  .comparison-section::after,
  .workflow-section::after,
  .security-section::after,
  .context-engine-section::after,
  .fridaybot-section::after,
  .faq-section::after,
  .beta-section::after {
    transition: opacity 240ms ease !important;
  }
}

.developer-section > *,
.comparison-section > *,
.workflow-section > *,
.security-section > *,
.context-engine-section > *,
.fridaybot-section > *,
.faq-section > *,
.beta-section > * {
  position: relative;
  z-index: 1;
}

.developer-section .section-eyebrow,
.comparison-heading span,
.comparison-lane-head span,
.workflow-copy .step-node,
.workflow-copy h3,
.security-section .section-eyebrow,
.context-engine-section .section-eyebrow,
.fridaybot-section .section-eyebrow,
.faq-shell > .section-eyebrow,
.beta-copy .section-eyebrow {
  color: var(--sheet-accent) !important;
  text-shadow: none !important;
}

.developer-copy h2,
.comparison-heading h2,
.comparison-lane-head strong,
.workflow-row .workflow-copy h3,
.security-copy h2,
.context-engine-copy h2,
.fridaybot-copy h2,
.faq-shell h2,
.beta-copy h2,
.footer-shell strong {
  color: var(--sheet-text) !important;
  text-shadow: none !important;
}

.developer-copy p,
.comparison-heading p,
.workflow-row .workflow-copy p,
.security-copy p,
.context-engine-copy p,
.fridaybot-copy p,
.faq-list details p,
.beta-copy p,
.footer-shell p {
  color: var(--sheet-text-soft) !important;
  text-shadow: none !important;
}

.comparison-lane,
.workflow-run-console,
.context-strip,
.friday-product-frame,
.security-window,
.context-studio-board,
.studio-product-frame,
.harness-window,
.beta-shell {
  border-color: var(--glass-shell-border) !important;
  background: var(--glass-shell-background) !important;
  box-shadow: var(--glass-shell-shadow) !important;
  backdrop-filter: var(--glass-shell-filter);
}

.midpage-cta-section {
  position: relative;
  isolation: isolate;
  background: var(--surface-butter) !important;
}

.midpage-cta-section canvas,
.midpage-cta-section .vanta-canvas {
  display: none !important;
}

.midpage-cta-section::before,
.midpage-cta-section::after {
  content: none !important;
  display: none !important;
}

.hero {
  z-index: 2;
}

.output-preview-frame {
  background: var(--product-inset-background) !important;
}

.output-preview-frame .preview-app-real,
.output-preview-frame .preview-surface-real,
.output-preview-frame .dashboard-canvas-real,
.output-preview-frame .ppt-studio-real {
  background: var(--product-inset-background) !important;
}

.output-preview-frame .preview-surface-real::before,
.output-preview-frame .preview-surface-real::after,
.output-preview-frame .dashboard-canvas-real::before,
.output-preview-frame .dashboard-canvas-real::after,
.output-preview-frame .ppt-studio-real::before,
.output-preview-frame .ppt-studio-real::after {
  content: none !important;
  display: none !important;
}

.context-studio-board {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.studio-shot.active {
  opacity: 1 !important;
}

.studio-shot.active .studio-product-frame {
  border-color: rgba(23, 20, 15, 0.14) !important;
  background: #fcfaf6 !important;
  box-shadow:
    0 28px 80px rgba(83, 60, 29, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
  backdrop-filter: none !important;
}

.manual-lane {
  position: relative;
  min-height: 450px;
  overflow: hidden;
}

.manual-lane .sprawl-item {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2;
}

.manual-lane .comparison-lane-head {
  position: relative;
  z-index: 12;
}

/* Sprawl heap — outer ring + center fill */
.manual-lane .request-fragment {
  left: calc(50% - 84px);
  top: 75px;
  z-index: 1;
  --r: -4deg;
}

.manual-lane .jira-fragment {
  left: calc(50% - 6px);
  top: 98px;
  z-index: 2;
  --r: 8deg;
}

.manual-lane .docs-fragment {
  left: calc(50% + 48px);
  top: 160px;
  z-index: 3;
  --r: 14deg;
}

.manual-lane .catalog-fragment {
  left: calc(50% + 26px);
  top: 315px;
  z-index: 4;
  --r: 4deg;
}

.manual-lane .sheet-fragment {
  left: calc(50% - 194px);
  top: 315px;
  z-index: 5;
  --r: -12deg;
}

.manual-lane .looker-fragment {
  left: calc(50% - 227px);
  top: 241px;
  z-index: 6;
  --r: -10deg;
}

.manual-lane .chart-fragment {
  left: calc(50% - 216px);
  top: 160px;
  z-index: 7;
  --r: -6deg;
}

.manual-lane .deck-fragment {
  left: calc(50% - 162px);
  top: 98px;
  z-index: 8;
  --r: -2deg;
}

.manual-lane .sql-fragment {
  left: calc(50% - 52px);
  top: 200px;
  z-index: 14;
  --r: 2deg;
}

.manual-lane .email-fragment {
  left: calc(50% - 34px);
  top: 248px;
  z-index: 13;
  --r: -3deg;
}

.manual-lane .notebook-fragment {
  left: calc(50% - 134px);
  top: 244px;
  z-index: 11;
  --r: 5deg;
}

@media (max-width: 760px) {
  .manual-lane {
    min-height: min(380px, 105vw);
    overflow: hidden;
  }

  .manual-lane .sprawl-item {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    width: min(152px, 44vw);
    min-height: 68px;
    padding: 8px;
    transform: translateY(12px) rotate(var(--r));
  }

  .manual-lane .sprawl-item.is-visible {
    transform: translateY(0) rotate(var(--r));
  }

  .manual-lane .sprawl-item:hover,
  .manual-lane .sprawl-item.is-visible:hover,
  .manual-lane .sprawl-item.is-front {
    z-index: 24;
    transform: translateY(-6px) rotate(var(--r)) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .developer-section::after,
  .comparison-section::after,
  .workflow-section::after,
  .security-section::after,
  .context-engine-section::after,
  .fridaybot-section::after,
  .faq-section::after,
  .beta-section::after,
  .site-footer::after {
    transition: none !important;
  }

  .manual-lane .sprawl-item:hover,
  .manual-lane .sprawl-item.is-visible:hover,
  .manual-lane .sprawl-item.is-front {
    transform: rotate(var(--r));
  }
}

/* Comparison lane contrast — scattered fragments vs connected workspace */
.comparison-board .comparison-lane {
  padding: 14px;
  gap: 0;
}

.comparison-board .comparison-lane-head {
  margin: -14px -14px 0;
  padding: 11px 14px;
}

.manual-lane {
  border: 1px solid var(--surface-butter-border) !important;
  background: var(--surface-butter) !important;
  box-shadow: var(--surface-butter-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.manual-lane .comparison-lane-head {
  border-bottom: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.comparison-lane-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.comparison-lane-head span {
  font-size: 11px !important;
  font-weight: 820 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--sheet-accent) !important;
}

.comparison-lane-head strong {
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  color: rgba(47, 14, 0, 0.88) !important;
}

.manual-lane .sprawl-item {
  border-style: dashed !important;
  border-radius: 10px !important;
  width: 168px;
  min-height: 76px;
  padding: 10px;
  gap: 4px;
  background: #fff8ef !important;
  box-shadow: 0 6px 18px rgba(103, 55, 7, 0.07) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

.manual-lane .sprawl-item.is-visible {
  opacity: 1 !important;
}

.manual-lane .sprawl-item span {
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: rgba(111, 68, 26, 0.72) !important;
}

.manual-lane .sprawl-item strong {
  color: rgba(47, 14, 0, 0.82) !important;
  font-size: 13px !important;
  line-height: 1.16 !important;
}

.manual-lane .sprawl-item small {
  color: rgba(47, 14, 0, 0.48) !important;
  font-size: 11px !important;
}

.manual-lane .sprawl-item:hover,
.manual-lane .sprawl-item.is-visible:hover,
.manual-lane .sprawl-item.is-front {
  border-style: solid !important;
  border-color: rgba(111, 68, 26, 0.28) !important;
  background: #fffbf5 !important;
  box-shadow: 0 14px 32px rgba(103, 55, 7, 0.12) !important;
  opacity: 1 !important;
}

.friday-lane {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.friday-lane .workspace-flow {
  flex: 1;
  padding: 8px 0 0;
  gap: 8px;
  grid-auto-rows: auto;
}

.friday-lane .workspace-step {
  gap: 5px;
  padding: 11px 12px;
}

.friday-lane .workspace-step p,
.friday-lane .workspace-step code {
  font-size: 15px;
  line-height: 1.35;
}

.friday-lane .publish-step {
  min-height: 0;
}

.friday-lane .artifact-card {
  display: grid;
  gap: 8px;
}

.friday-lane .artifact-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.friday-lane .artifact-card-head strong {
  font-size: 13px;
  font-weight: 720;
  letter-spacing: -0.01em;
  color: var(--sheet-text);
}

.friday-lane .artifact-chart {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 14px;
  height: 58px;
  padding: 0 4px 7px;
}

.friday-lane .artifact-chart::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: rgba(53, 18, 5, 0.16);
}

.friday-lane .artifact-chart i {
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(232, 138, 0, 0.42), rgba(232, 138, 0, 0.16));
}

.friday-lane .artifact-chart i.is-peak {
  background: linear-gradient(180deg, var(--accent), #c97400);
  box-shadow: 0 5px 14px rgba(201, 116, 0, 0.32);
}

.friday-lane .artifact-chart i:nth-child(1) {
  height: 100%;
}

.friday-lane .artifact-chart i:nth-child(2) {
  height: 58%;
}

.friday-lane .artifact-chart i:nth-child(3) {
  height: 34%;
}

.friday-lane .artifact-card-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.friday-lane .artifact-card-foot b {
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sheet-text-soft);
}

.friday-lane .friday-lane-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.friday-lane .friday-lane-brand img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.friday-lane .friday-lane-brand span {
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--sheet-text) !important;
}

.friday-lane .workspace-step {
  border-style: solid !important;
  border-radius: 14px !important;
  border-left: 3px solid var(--accent) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 248, 0.82), rgba(255, 237, 194, 0.38)),
    rgba(255, 250, 237, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 14px 34px rgba(103, 55, 7, 0.11) !important;
  backdrop-filter: blur(16px) saturate(1.14) !important;
}

.friday-lane .workspace-step span {
  font-size: 12px !important;
  font-weight: 820 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}

.friday-lane .workspace-step:hover,
.friday-lane .workspace-step.is-visible:hover {
  border-left-color: #c97400 !important;
  border-color: rgba(169, 74, 0, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 248, 0.92), rgba(255, 224, 148, 0.52)),
    rgba(255, 250, 237, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 42px rgba(103, 55, 7, 0.14) !important;
  transform: translateY(-3px) !important;
}

.faq-section {
  background: transparent !important;
}

.faq-shell {
  background: transparent !important;
}

.workflow-run-console {
  z-index: 20 !important;
}

.workflow-row {
  z-index: 2 !important;
}

.workflow-copy,
.friday-product-frame {
  z-index: 3 !important;
}

.workflow-section .friday-product-frame,
.workflow-section .friday-shell,
.workflow-section .chat-view-real,
.workflow-section .data-view,
.workflow-section .artifact-panel-real,
.workflow-section .preview-app-real,
.workflow-section .preview-surface-real,
.workflow-section .dashboard-canvas-real,
.workflow-section .ppt-studio-real {
  background: var(--product-inset-background) !important;
}

.workflow-section .friday-product-frame::before,
.workflow-section .friday-product-frame::after,
.workflow-section .preview-app-real::before,
.workflow-section .preview-app-real::after,
.workflow-section .preview-surface-real::before,
.workflow-section .preview-surface-real::after {
  content: none !important;
  display: none !important;
}

.beta-shell {
  border-color: rgba(255, 246, 185, 0.62) !important;
  background: rgba(255, 255, 232, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 28px 86px rgba(113, 58, 0, 0.14) !important;
  backdrop-filter: blur(22px) saturate(1.18);
}

.security-window,
.security-device-screen {
  background:
    linear-gradient(135deg, rgba(255, 255, 232, 0.82), rgba(255, 224, 132, 0.5)),
    rgba(255, 249, 203, 0.52) !important;
}

.site-footer {
  background: var(--surface-butter) !important;
  backdrop-filter: none !important;
}

.footer-shell {
  border-color: rgba(111, 68, 26, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 246, 0.58), rgba(255, 232, 177, 0.28)),
    rgba(255, 249, 220, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 18px 58px rgba(103, 55, 7, 0.1) !important;
  backdrop-filter: blur(20px) saturate(1.12);
}

.workflow-row.data-row .friday-product-frame,
.workflow-row.data-row .friday-shell,
.workflow-row.data-row .data-view,
.workflow-row.data-row .context-run-flow {
  background:
    linear-gradient(135deg, rgba(255, 255, 248, 0.98), rgba(255, 246, 226, 0.96)),
    #fff8ef !important;
}

.workflow-row.data-row .context-answer-card.friday-context-reply {
  background: #fff8f0 !important;
  box-shadow:
    0 20px 54px rgba(83, 60, 29, 0.1),
    0 0 0 1px rgba(232, 138, 0, 0.1) !important;
}

main::before {
  content: none !important;
  display: none !important;
}

.developer-section::before,
.comparison-section::before,
.workflow-section::before,
.security-section::before,
.context-engine-section::before,
.fridaybot-section::before,
.faq-section::before,
.beta-section::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  pointer-events: none;
  background: url("./assets/friday-sheet-surface.svg") var(--sheet-bg-x) var(--sheet-bg-y) / 960px 416px repeat !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  mask-image: none !important;
  mix-blend-mode: normal !important;
}

.midpage-cta-section::before,
.midpage-cta-section::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.hero::before {
  content: "" !important;
}

.workflow-section .friday-product-frame {
  position: relative;
  isolation: isolate;
  background: #fff8ef !important;
  /* Square the three workflow app screens so the rounded corners (28px from
     the shared frame rule) no longer clip the app UI at the edges. Scoped to
     the workflow section so the shared rule still rounds comparison lanes,
     the run console, security window and beta shell. */
  border-radius: 0 !important;
}

.workflow-section .friday-product-frame::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 250, 0.99), rgba(255, 246, 226, 0.98)),
    #fff8ef !important;
  opacity: 1 !important;
}

.workflow-section .friday-product-frame > * {
  position: relative;
  z-index: 1;
}

.workflow-section .context-run-view,
.workflow-section .workspace-preview,
.workflow-section .preview-app-real,
.workflow-section .preview-surface-real,
.workflow-section .dashboard-canvas-real,
.workflow-section .ppt-studio-real,
.workflow-section .live-artifacts {
  background:
    linear-gradient(135deg, rgba(255, 255, 250, 0.99), rgba(255, 246, 226, 0.98)),
    #fff8ef !important;
}

.workflow-run-console {
  position: sticky !important;
  top: calc(76px + 12px) !important;
  z-index: 60 !important;
  border-color: rgba(255, 246, 185, 0.54) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 238, 0.54), rgba(255, 219, 118, 0.24)),
    rgba(255, 246, 202, 0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 18px 58px rgba(103, 55, 7, 0.13) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
}

.workflow-run-console .run-ask,
.workflow-run-console .run-panel,
.workflow-run-console .run-step {
  border-color: rgba(111, 68, 26, 0.16) !important;
  background: rgba(255, 251, 235, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

.workflow-run-console .run-ask strong,
.workflow-run-console .run-step strong,
.workflow-run-console .run-step code,
.workflow-run-console .run-panel-head span {
  color: var(--sheet-text) !important;
}

.workflow-run-console .run-panel-head strong,
.workflow-run-console .run-status span,
.workflow-run-console .run-ask span,
.workflow-run-console .run-step span {
  color: var(--sheet-accent) !important;
}

.site-footer::before {
  content: none !important;
  display: none !important;
}

.beta-section {
  background: var(--sheet-bg) !important;
}

.beta-section::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  pointer-events: none;
  background: url("./assets/friday-sheet-surface.svg") var(--sheet-bg-x) var(--sheet-bg-y) / 960px 416px repeat !important;
  opacity: 1 !important;
}

.beta-section > * {
  position: relative;
  z-index: 1;
}

.site-footer {
  background: var(--surface-butter) !important;
  backdrop-filter: none !important;
}

.footer-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.footer-shell strong,
.footer-shell p,
.footer-links a {
  color: var(--sheet-text) !important;
}

.footer-links a {
  border-color: rgba(53, 18, 5, 0.18) !important;
  background: rgba(255, 251, 230, 0.24) !important;
}

.developer-section .analytics-track,
.fridaybot-section .harness-window,
.fridaybot-section .harness-track,
.fridaybot-section .harness-token {
  border-color: var(--glass-shell-border) !important;
  background: var(--glass-shell-background) !important;
  box-shadow: var(--glass-shell-shadow) !important;
  backdrop-filter: var(--glass-shell-filter);
}

.developer-section .code-track {
  border: 1px solid var(--surface-butter-border) !important;
  background: var(--surface-butter) !important;
  box-shadow: var(--surface-butter-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.developer-section .code-track .agent-track-head {
  border-bottom-color: var(--surface-butter-border) !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.developer-section .analytics-track,
.fridaybot-section .harness-window {
  border-radius: 24px !important;
}

.developer-section .workspace-question-card,
.developer-section .analytics-evidence,
.developer-section .workspace-trace-note,
.fridaybot-section .harness-models span,
.fridaybot-section .harness-context span,
.fridaybot-section .harness-token {
  border-color: var(--glass-chip-border) !important;
  background: var(--glass-chip-background) !important;
  color: var(--sheet-text) !important;
  box-shadow: none !important;
}

.developer-section .analytics-track .agent-track-head,
.fridaybot-section .harness-window header,
.fridaybot-section .harness-track-head {
  border-color: var(--glass-chip-border) !important;
  background: var(--glass-header-background) !important;
}

.developer-section .analytics-track:hover,
.developer-section .workspace-question-card:hover,
.developer-section .analytics-evidence:hover,
.fridaybot-section .harness-models span:hover,
.fridaybot-section .harness-token:hover {
  border-color: rgba(169, 74, 0, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(255, 249, 218, 0.82), rgba(255, 216, 125, 0.48)) !important;
  transform: translateY(-2px);
}

.fridaybot-section .harness-track-core {
  border-color: rgba(169, 74, 0, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(255, 232, 132, 0.78), rgba(255, 153, 0, 0.34)) !important;
}

.developer-section .agent-track-head span,
.developer-section .workspace-question-card span,
.developer-section .analytics-evidence span,
.fridaybot-section .harness-window header span,
.fridaybot-section .harness-track-head span,
.fridaybot-section .harness-token span,
.fridaybot-section .harness-context b {
  color: var(--sheet-accent) !important;
}

.developer-section .agent-track-head strong,
.developer-section .workspace-question-card strong,
.developer-section .analytics-evidence strong,
.developer-section .analytics-evidence code,
.developer-section .workspace-trace-note p,
.developer-section .agent-workline span,
.fridaybot-section .harness-window header strong,
.fridaybot-section .harness-track-head strong,
.fridaybot-section .harness-workline span,
.fridaybot-section .harness-models span,
.fridaybot-section .harness-context span,
.fridaybot-section .harness-token strong {
  color: var(--sheet-text) !important;
}

.fridaybot-section .harness-window header em,
.fridaybot-section .harness-token small {
  color: var(--sheet-text-soft) !important;
}

.fridaybot-section .harness-window header em {
  border-color: rgba(111, 68, 26, 0.16) !important;
  background: rgba(255, 250, 237, 0.42) !important;
}

.developer-section .agent-workline i,
.fridaybot-section .harness-workline i {
  background:
    linear-gradient(90deg, transparent, rgba(169, 74, 0, 0.48), transparent) !important;
}

.fridaybot-section .harness-flow i {
  background:
    linear-gradient(180deg, transparent, rgba(169, 74, 0, 0.48), transparent) !important;
}

.beta-section {
  background:
    linear-gradient(var(--sheet-line) 1px, transparent 1px) left top / 96px 32px repeat,
    linear-gradient(90deg, var(--sheet-line) 1px, transparent 1px) left top / 96px 32px repeat,
    var(--sheet-bg) !important;
}

.beta-section::before {
  content: none !important;
  display: none !important;
}

main {
  background:
    linear-gradient(var(--sheet-line) 1px, transparent 1px) left top / 96px 32px repeat,
    linear-gradient(90deg, var(--sheet-line) 1px, transparent 1px) left top / 96px 32px repeat,
    var(--sheet-bg) !important;
}

/* Keep the Context Studio headline clear of the preview carousel on wide screens. */
@media (min-width: 981px) {
  .context-engine-shell {
    grid-template-columns: minmax(260px, 0.7fr) minmax(500px, 1.3fr);
    gap: clamp(58px, 6.8vw, 104px);
  }

  .context-engine-copy {
    justify-self: start;
    max-width: 590px;
    transform: translateX(clamp(-34px, -2vw, -16px));
  }

  .context-engine-copy h2 {
    max-width: 590px;
  }

  .context-engine-copy p {
    max-width: 520px;
  }
}

/* Final footer theme: flat butter — canvas/conversion, not glass. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(30px, 4vw, 58px) !important;
  padding: 30px 32px 34px !important;
  border-top: 1px solid var(--surface-butter-border);
  background: var(--surface-butter) !important;
  color: var(--sheet-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-footer::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.site-footer::after {
  content: none !important;
  display: none !important;
}

.site-footer canvas,
.site-footer .vanta-canvas {
  display: none !important;
}

.footer-shell {
  position: relative;
  z-index: 1;
  width: min(1240px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.footer-shell strong {
  color: var(--sheet-text) !important;
  font-size: clamp(20px, 1.6vw, 26px) !important;
  text-shadow: none !important;
}

.footer-shell p {
  max-width: 700px !important;
  margin-top: 8px !important;
  color: rgba(53, 18, 5, 0.82) !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  text-shadow: none !important;
}

.footer-links a {
  min-height: 44px !important;
  padding: 0 22px !important;
  border: 1px solid var(--glass-pill-border) !important;
  background: var(--glass-pill-background) !important;
  color: var(--sheet-text) !important;
  box-shadow: var(--glass-pill-shadow) !important;
  text-shadow: none !important;
}

.footer-links a:hover {
  border-color: rgba(53, 18, 5, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 231, 0.62), rgba(255, 184, 40, 0.34)) !important;
}

/*
 * Surface grammar lock — single source of truth for butter vs glass tiers.
 * Butter: midpage CTAs, scrolled nav, footer (canvas / conversion / chrome).
 * Glass row: workflow step cards. FAQ: flat cream chips (not glass). Shell/chip tiers live in tokens above.
 */
.midpage-cta-section,
.site-header.is-elevated,
.site-footer {
  background: var(--surface-butter) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.midpage-cta-section::before,
.midpage-cta-section::after,
.site-footer::before,
.site-footer::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.workflow-row::before,
.workflow-row.data-row::before,
.workflow-row.chat-row::before,
.workflow-row.output-row::before {
  border-color: var(--glass-row-border) !important;
  background: var(--glass-row-background) !important;
  box-shadow: var(--glass-row-shadow) !important;
  backdrop-filter: var(--glass-row-filter) !important;
}

.context-studio-board {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.faq-list details {
  border: 1px solid var(--faq-chip-border) !important;
  background: var(--faq-chip-background) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.faq-list details:not([open]):hover {
  border-color: rgba(169, 74, 0, 0.28) !important;
  background-color: var(--faq-chip-background-hover) !important;
  background-image: none !important;
}

.faq-list details[open] {
  border-color: rgba(169, 74, 0, 0.34) !important;
  background-color: var(--faq-chip-background-open) !important;
  background-image: none !important;
  box-shadow: var(--faq-chip-shadow) !important;
}

.faq-list summary {
  color: var(--sheet-text) !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

.faq-list details[open] summary {
  color: var(--sheet-accent) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.faq-list details p {
  color: var(--sheet-text-soft) !important;
}

.faq-list summary::after {
  border-color: rgba(53, 18, 5, 0.55) !important;
}

.faq-list details[open] summary::after {
  border-color: var(--sheet-accent) !important;
}

.faq-list summary .fridaybot-word,
.faq-list details p .fridaybot-word {
  color: var(--sheet-accent) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}

/* Match the hero dynamic word and cursor to the visible Fridaybot brown range. */
.hero .d-core,
.hero .d-stem,
.hero .d-word {
  background-image: linear-gradient(135deg, #3a0e00 0%, #692000 42%, #8f2c00 100%) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
}

.hero .d-word.is-typing::after {
  background: #692000 !important;
  box-shadow: 0 0 0 1px rgba(255, 238, 171, 0.2);
}

/* Let the workflow step bar stick while scrolling through the workspace steps. */
.workflow-section {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

@supports not (overflow: clip) {
  .workflow-section {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* Final PPT preview repair: reserve layout space for cards and conclusion text. */
.output-preview-frame .preview-slide-real[data-slide-variant="metric"],
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, auto) minmax(0, 1fr) !important;
  align-content: stretch !important;
  justify-items: stretch !important;
  row-gap: clamp(8px, 1.2vw, 14px) !important;
  padding: clamp(24px, 3vw, 38px) !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] h4 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.02 !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] .slide-chart-real[data-variant="metric"],
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .slide-chart-real[data-variant="metric"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
  position: static !important;
  display: block !important;
  align-self: start !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.output-preview-frame .ppt-metric-grid,
.preview-surface-real .ppt-metric-grid {
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1vw, 12px) !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card {
  min-width: 0 !important;
  padding: clamp(10px, 1.3vw, 16px) clamp(10px, 1.5vw, 18px) !important;
  border-radius: 18px !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card strong,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card strong {
  font-size: clamp(28px, 3.8vw, 44px) !important;
  line-height: 0.9 !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card small,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card small {
  font-size: clamp(8.5px, 0.95vw, 11px) !important;
  line-height: 1.12 !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] p,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] p {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
  font-size: clamp(11px, 1.15vw, 14px) !important;
  line-height: 1.32 !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="conclusion"],
.preview-surface-real .preview-slide-real[data-slide-variant="conclusion"] {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  row-gap: clamp(12px, 1.6vw, 18px) !important;
  padding: clamp(24px, 3vw, 38px) !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="conclusion"] h4,
.preview-surface-real .preview-slide-real[data-slide-variant="conclusion"] h4 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  line-height: 1.02 !important;
}

.output-preview-frame .slide-chart-real[data-variant="conclusion"],
.preview-surface-real .slide-chart-real[data-variant="conclusion"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: stretch !important;
  container-type: size !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.output-preview-frame .slide-chart-real[data-variant="conclusion"] ul,
.preview-surface-real .slide-chart-real[data-variant="conclusion"] ul {
  display: grid !important;
  align-content: space-between !important;
  gap: clamp(3px, 4cqh, 7px) !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.output-preview-frame .slide-chart-real[data-variant="conclusion"] li,
.preview-surface-real .slide-chart-real[data-variant="conclusion"] li {
  padding: clamp(4px, 5cqh, 8px) clamp(9px, 1.2vw, 14px) !important;
  border-radius: 14px !important;
  overflow-wrap: normal;
  word-break: normal;
  font-size: clamp(7px, 8.5cqh, 13px) !important;
  line-height: 1.18 !important;
}

/* Align the bullet dot's center to the first text line (tracks the cqh padding + line-height above). */
.output-preview-frame .slide-chart-real[data-variant="conclusion"] li::before,
.preview-surface-real .slide-chart-real[data-variant="conclusion"] li::before {
  top: calc(clamp(4px, 5cqh, 8px) + 0.5lh - 4.5px) !important;
}

@media (max-width: 760px) {
  .output-preview-frame .ppt-metric-grid,
  .preview-surface-real .ppt-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .output-preview-frame .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card,
  .preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card {
    padding: 9px 8px !important;
  }

  .output-preview-frame .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card strong,
  .preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card strong {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  .output-preview-frame .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card small,
  .preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card small {
    font-size: 8px !important;
  }
}

/* Hard containment for PPT metric cards: no numeral or label bleed. */
.output-preview-frame .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card {
  box-sizing: border-box !important;
  container-type: inline-size !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: center !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card strong,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card strong {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: #e88a00 !important;
  font-size: clamp(6px, 28cqw, 30px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

.output-preview-frame .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card small,
.preview-surface-real .preview-slide-real[data-slide-variant="metric"] .ppt-metric-card small {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #62594f !important;
  font-size: clamp(4px, 10cqw, 9.5px) !important;
  line-height: 1.14 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}

/* Run console: final layout coherence (wins over theme duplicates). */
.workflow-run-console {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: min(960px, calc(100% - 48px)) !important;
  padding: 8px !important;
  position: sticky !important;
  top: clamp(74px, 8vh, 92px) !important;
  z-index: 140 !important;
  margin-bottom: clamp(28px, 4vw, 46px) !important;
}

.workflow-run-console .run-ask {
  flex: 0 1 34% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: stretch !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

.workflow-run-console .run-flow {
  flex: 0 0 18px !important;
  align-self: center !important;
}

.workflow-run-console .run-panel {
  flex: 1 1 62% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: stretch !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
}

.workflow-run-console .run-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

.workflow-run-console .run-panel-head > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.workflow-run-console .run-status {
  flex: 0 1 auto !important;
  max-width: 44% !important;
  min-width: 0 !important;
  font-size: 12px !important;
}

.workflow-run-console .run-ask span {
  font-size: 12px !important;
}

.workflow-run-console .run-ask strong {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.workflow-run-console .run-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.workflow-run-console .run-step {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 6px !important;
  min-width: 0 !important;
}

.workflow-run-console .run-step span {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 820px) {
  .workflow-run-console {
    flex-direction: column !important;
    width: calc(100% - 32px) !important;
  }

  .workflow-run-console .run-ask,
  .workflow-run-console .run-panel {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  .workflow-run-console .run-flow {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .workflow-run-console {
    width: calc(100% - 24px) !important;
  }

  .workflow-run-console .run-step span {
    font-size: 12px !important;
  }

  .workflow-run-console .run-status {
    max-width: 50% !important;
  }
}

@media (max-width: 720px) {
  .workflow-run-console {
    top: 72px !important;
  }
}

/* Workflow section: fit each step row + sticky console in one viewport. */
.workflow-section {
  --workflow-run-stack: 188px !important;
  --workflow-row-chrome: 40px !important;
  --workflow-frame-height: clamp(340px, calc(100svh - var(--workflow-run-stack) - var(--workflow-row-chrome)), 480px) !important;
}

.workflow-section .workflow-run-console {
  margin-bottom: 16px !important;
}

.workflow-section .workflow-row {
  gap: clamp(16px, 2.5vw, 28px) !important;
  margin-bottom: 16px !important;
  padding: 14px 20px !important;
}

.workflow-section .friday-product-frame {
  height: var(--workflow-frame-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.workflow-section .friday-product-frame > .friday-shell,
.workflow-section .friday-product-frame > .preview-app-real {
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
}

.workflow-section .preview-surface-real .dashboard-canvas-real,
.workflow-section .context-chat-shell .chat-scroll-real,
.workflow-section .context-run-flow {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.workflow-section .data-view.context-run-view {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.workflow-section .context-run-view .org-company-header-real {
  flex-shrink: 0;
}

.workflow-section .context-run-flow {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.workflow-section .preview-surface-real .ppt-studio-real,
.workflow-section .preview-surface-real .ppt-stage-real,
.workflow-section .output-preview-frame .preview-surface-real,
.workflow-section .output-preview-frame .ppt-studio-real,
.workflow-section .output-preview-frame .ppt-stage-real {
  min-height: 0 !important;
  height: 100% !important;
}

@media (max-width: 820px) {
  .workflow-section {
    --workflow-run-stack: 180px !important;
    --workflow-row-chrome: 64px !important;
    --workflow-frame-height: clamp(320px, calc(100svh - var(--workflow-run-stack) - var(--workflow-row-chrome)), 440px) !important;
  }

  .workflow-section .friday-product-frame,
  .workflow-section .friday-shell,
  .workflow-section .preview-app-real,
  .workflow-section .preview-surface-real {
    min-height: 0 !important;
  }

  .workflow-section .context-chat-shell.with-artifacts {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .workflow-section .context-chat-shell .workspace-preview {
    min-height: 0 !important;
  }
}

@media (max-width: 560px) {
  .workflow-section {
    --workflow-run-stack: 172px !important;
    --workflow-row-chrome: 80px !important;
    --workflow-frame-height: clamp(300px, calc(100svh - var(--workflow-run-stack) - var(--workflow-row-chrome)), 400px) !important;
  }
}

/* Pareto charts in workflow chat + dashboard: use the full SVG (same as PPT slide). */
#workflow-chat .pareto-chart-card .pareto-echart-real {
  display: block !important;
  min-height: 0 !important;
  padding: 10px 14px 12px 10px !important;
}

#workflow-chat .pareto-chart-card .pareto-echart-real .pareto-svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

#workflow-chat .pareto-chart-card .pareto-echart-real .analyze-pareto-svg {
  display: none !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .chart-card-real:has(.dashboard-pareto) {
  min-height: 0 !important;
}

.output-preview-frame .dashboard-widget-real.type-chart .dashboard-pareto.pareto-echart-real {
  min-height: 0 !important;
  max-height: 152px !important;
  margin-top: 0 !important;
  padding: 8px 10px 10px 8px !important;
}

.output-preview-frame .dashboard-pareto .pareto-svg {
  display: block !important;
  width: 100% !important;
  height: 128px !important;
  overflow: visible !important;
}

/* Section rhythm — even vertical spacing between page blocks. */
main > .hero {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

main > .developer-section,
main > .comparison-section,
main > .workflow-section,
main > .security-section,
main > .context-engine-section,
main > .fridaybot-section,
main > .faq-section,
main > .beta-section {
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y) !important;
}

main > .developer-section,
main > .comparison-section,
main > .security-section,
main > .context-engine-section,
main > .fridaybot-section,
main > .faq-section,
main > .beta-section {
  padding-left: var(--section-pad-x) !important;
  padding-right: var(--section-pad-x) !important;
}

main > .midpage-cta-section {
  padding-top: var(--section-cta-pad-y) !important;
  padding-bottom: var(--section-cta-pad-y) !important;
  padding-left: var(--section-pad-x) !important;
  padding-right: var(--section-pad-x) !important;
}

main > .midpage-cta-section .midpage-cta-shell {
  gap: 14px;
}

main > .faq-section,
main > .beta-section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* FAQ → Beta: one rhythm step instead of doubled section padding. */
main > .faq-section:has(+ .beta-section) {
  padding-bottom: calc(var(--section-pad-y) / 2) !important;
}

main > .faq-section + .beta-section {
  padding-top: calc(var(--section-pad-y) / 2) !important;
}

/* Beta → Footer: one rhythm step + compact footer chrome. */
main > .beta-section:has(+ .site-footer) {
  padding-bottom: calc(var(--section-pad-y) / 2) !important;
}

main > .beta-section + .site-footer {
  padding-top: calc(var(--section-pad-y) / 2) !important;
}

.site-footer {
  margin-top: 0 !important;
  padding-top: var(--section-cta-pad-y) !important;
  padding-bottom: clamp(36px, 5vw, 52px) !important;
  padding-left: var(--section-pad-x) !important;
  padding-right: var(--section-pad-x) !important;
  min-height: 0 !important;
}

@media (max-width: 820px) {
  :root {
    --section-pad-y: clamp(64px, 10vw, 80px);
    --section-pad-x: 16px;
    --section-cta-pad-y: clamp(22px, 4.5vw, 32px);
  }
}

.comparison-section .sheet-cell-layer {
  display: none !important;
}

.sheet-cell-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sheet-cell {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: var(--sheet-cell-w);
  height: var(--sheet-cell-h);
  pointer-events: none;
  border: 2px solid var(--sheet-select);
  background:
    linear-gradient(var(--sheet-select), var(--sheet-select)) calc(100% + 1px) calc(100% + 1px) / 8px 8px no-repeat,
    rgba(35, 115, 70, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 0 0 1px rgba(35, 115, 70, 0.16),
    0 10px 28px rgba(35, 115, 70, 0.12);
  transform: translate(var(--sheet-cell-x), var(--sheet-cell-y));
  transition:
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1),
    width 780ms cubic-bezier(0.22, 1, 0.36, 1),
    height 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .sheet-cell {
    transition: none !important;
  }
}

/* DOM sheet cells — hide legacy ::after selection. */
.developer-section::after,
.comparison-section::after,
.workflow-section::after,
.security-section::after,
.context-engine-section::after,
.fridaybot-section::after,
.faq-section::after,
.beta-section::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* === 4. LATE MOBILE OVERRIDES - keep LAST so they win the cascade ========= */

/* ============================================================
   Mobile PPTX output (<=920px): stack the slide studio.
   Desktop is a 224px rail + stage 2-column grid, and the
   chart/metric slides use 2-column internal layouts. Several
   later unconditional/!important rules above re-assert those
   2-column layouts at every width, so the mobile single-column
   intent must be re-stated here, last, to win the cascade.
   Scoped to the output frame only (.output-preview-frame /
   .preview-surface-real); no other section is affected.
   ============================================================ */
@media (max-width: 920px) {
  /* give stacked slides room (the chart needs vertical space).
     Beats `.workflow-section .friday-product-frame { height: ... !important }`
     which otherwise pins the frame to the ~400px mobile var height. */
  .workflow-section .friday-product-frame.output-preview-frame {
    height: min(470px, 80svh) !important;
  }

  /* studio: rail on top, stage fills the rest */
  .output-preview-frame .ppt-studio-real,
  .preview-surface-real .ppt-studio-real {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* rail: compact horizontal scroll strip */
  .output-preview-frame .ppt-rail-real,
  .preview-surface-real .ppt-rail-real {
    display: block;
    gap: 0;
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .output-preview-frame .ppt-rail-heading,
  .preview-surface-real .ppt-rail-heading {
    display: none;
  }

  .output-preview-frame .ppt-rail-list,
  .preview-surface-real .ppt-rail-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: max-content;
    min-width: 100%;
  }

  .output-preview-frame .ppt-rail-real .ppt-rail-list button,
  .preview-surface-real .ppt-rail-real .ppt-rail-list button {
    flex: 0 0 136px;
    width: 136px;
    min-width: 136px;
    margin-bottom: 0;
    white-space: normal;
  }

  .output-preview-frame .ppt-rail-real .ppt-rail-list button strong,
  .preview-surface-real .ppt-rail-real .ppt-rail-list button strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .output-preview-frame .ppt-rail-real .ppt-rail-list button em,
  .preview-surface-real .ppt-rail-real .ppt-rail-list button em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .output-preview-frame .ppt-stage-real,
  .preview-surface-real .ppt-stage-real {
    padding: 12px;
  }

  /* slide fills the stage (uniform card size); drop fixed 16:9 */
  .output-preview-frame .preview-slide-real,
  .preview-surface-real .preview-slide-real {
    width: 100%;
    min-width: 0;
    height: 100%;
    aspect-ratio: auto !important;
    padding: 20px 22px;
  }

  /* chart + metric: force single column */
  .output-preview-frame .preview-slide-real[data-slide-variant="chart"],
  .preview-surface-real .preview-slide-real[data-slide-variant="chart"],
  .output-preview-frame .preview-slide-real[data-slide-variant="metric"],
  .preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
    grid-template-columns: 1fr !important;
  }

  .output-preview-frame .preview-slide-real[data-slide-variant="chart"] h4,
  .output-preview-frame .preview-slide-real[data-slide-variant="chart"] p,
  .preview-surface-real .preview-slide-real[data-slide-variant="chart"] h4,
  .preview-surface-real .preview-slide-real[data-slide-variant="chart"] p {
    grid-column: 1 !important;
    max-width: 100% !important;
  }

  /* chart variant: title + copy on top, chart fills below */
  .output-preview-frame .preview-slide-real[data-slide-variant="chart"],
  .preview-surface-real .preview-slide-real[data-slide-variant="chart"] {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  .output-preview-frame .preview-slide-real[data-slide-variant="chart"] .slide-chart-real[data-variant="chart"],
  .preview-surface-real .preview-slide-real[data-slide-variant="chart"] .slide-chart-real[data-variant="chart"] {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    min-height: 0 !important;
    padding-top: 6px !important;
    overflow: hidden !important;
  }

  .output-preview-frame .preview-slide-real[data-slide-variant="chart"] .ppt-chart-card,
  .preview-surface-real .preview-slide-real[data-slide-variant="chart"] .ppt-chart-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .output-preview-frame .preview-slide-real[data-slide-variant="chart"] .ppt-chart-svg,
  .preview-surface-real .preview-slide-real[data-slide-variant="chart"] .ppt-chart-svg {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  /* metric + conclusion: center the (shorter) content block */
  .output-preview-frame .preview-slide-real[data-slide-variant="metric"],
  .preview-surface-real .preview-slide-real[data-slide-variant="metric"] {
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    row-gap: 10px !important;
  }

  .output-preview-frame .preview-slide-real[data-slide-variant="conclusion"],
  .preview-surface-real .preview-slide-real[data-slide-variant="conclusion"] {
    align-content: center !important;
  }
}

/* ============================================================
   Mobile context studio (<=760px): stack the "Table metadata"
   carousel card. Same override-stacking issue as the PPTX
   studio — the 560px single-column intent (~line 7311) is
   undone by later unconditional rules (.studio-table-pane and
   .studio-column-list div 2-column, ~10182/10209), so it must
   be re-stated here, last. Also fixes the carousel arrows
   overlapping the card and the notebook cells clipping to one
   line. Desktop (>760px) keeps the 2-column card.
   ============================================================ */
@media (max-width: 760px) {
  /* active card fills the board (room for the bottom controls) */
  .context-studio-board .studio-shot.active {
    width: min(100%, 460px);
  }

  /* table card: stack the table list over the detail */
  .studio-table-pane {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* table list: compact horizontal scroll strip on top */
  .studio-table-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 20, 15, 0.1);
    padding: 10px;
  }

  .studio-table-row {
    min-width: 168px;
  }

  .studio-table-detail {
    overflow-y: auto;
  }

  /* column rows: name over description, tightened so all fit */
  .studio-column-list {
    gap: 5px;
  }

  .studio-column-list div {
    grid-template-columns: 1fr;
    gap: 2px;
    min-height: 0;
    padding: 6px 9px;
  }

  .studio-column-list span {
    justify-self: start;
    text-align: left;
  }

  /* notebook card: let memory cells grow to fit (no 1-line clip) */
  .studio-notebook {
    grid-auto-rows: min-content;
  }

  .studio-memory-cell {
    align-self: start;
  }

  /* carousel arrows: move to a bottom-center control row (was
     vertically centered over the now-full-width card content) */
  .context-studio-board .studio-carousel-btn {
    top: auto;
    bottom: 4px;
    width: 38px;
    height: 38px;
    transform: none;
  }

  .context-studio-board .studio-carousel-prev {
    left: calc(50% - 46px);
    right: auto;
  }

  .context-studio-board .studio-carousel-next {
    right: calc(50% - 46px);
    left: auto;
  }

  .context-studio-board .studio-carousel-btn:hover,
  .context-studio-board .studio-carousel-btn:focus-visible {
    transform: scale(1.04);
  }
}