/* =====================================================================
   AgentOS v5 — "The Jam-inspired build"
   Bordered page-shell on warm paper, dot-grid backgrounds, airy
   light-weight headlines, an interactive capability tab-strip, and
   bento grids of real UI components. Green stays the single accent.
   ===================================================================== */
@font-face {
  font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/fonts/dmsans-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("assets/fonts/dmsans-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/dmsans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Host Grotesk"; font-weight: 300 800; font-style: normal; font-display: swap;
  src: url("assets/fonts/hostgrotesk.woff2") format("woff2");
}
@font-face {
  font-family: "Fragment Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/fonts/fragmentmono.woff2") format("woff2");
}

:root {
  --paper: #faf9f5;          /* Jam warm off-white */
  --paper-2: #f2f1ec;
  --card: #ffffff;
  --ink: #1a1a1a;            /* Jam near-black */
  --muted: #b1b0a9;          /* light gray subtitles */
  --muted-2: #6b6b64;
  --line: rgba(20, 20, 16, 0.09);
  --line-2: rgba(20, 20, 16, 0.14);
  --blue: #2f6bff;           /* Jam link blue */
  --green: #1b8a4a;          /* status dots only */
  --green-soft: #e9f4ed;
  --dot: rgba(20, 20, 16, 0.12);
  --radius: 20px;
  --radius-sm: 14px;
  /* Jam uses the system sans stack — no custom webfont */
  --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Content fills most of the viewport with only a small gutter, like Jam */
  --container: 1720px;
  --gutter: clamp(18px, 2.4vw, 40px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* height:auto lets an image's width/height attributes reserve its space
   before it loads (no layout shift) without stretching it once CSS sets
   the width. Any class rule that sets a height still wins. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Dot-grid utility */
.dots {
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: 840px; }

/* ================= Type ================= */
h1, h2, h3 { font-family: var(--font-head); font-weight: 300; letter-spacing: -0.02em; color: var(--ink); line-height: 1.05; }
h1 { font-size: clamp(46px, 6.4vw, 82px); }
h2 { font-size: clamp(32px, 3.8vw, 50px); }
h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 10px; }
.section-title { margin-bottom: 4px; }
.section-sub { font-size: clamp(20px, 2.4vw, 28px); font-family: var(--font-head); font-weight: 300; color: var(--muted); letter-spacing: -0.02em; }
.lead { font-size: 18px; color: var(--muted-2); max-width: 560px; line-height: 1.55; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2);
}
.kicker::before { content: ""; width: 16px; height: 1px; background: var(--line-2); }
.kicker.light { color: rgba(255,255,255,0.7); }
.kicker.light::before { background: rgba(255,255,255,0.3); }

/* ================= Buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 15.5px;
  padding: 12px 22px; border-radius: 999px;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
/* Primary = Jam's dark near-black button (name kept for markup compatibility) */
.btn-dark, .btn-green { background: var(--ink); color: #fff; }
.btn-dark:hover, .btn-green:hover { box-shadow: 0 10px 26px rgba(20,20,16,0.22); }
.btn-frost {
  background: rgba(255,255,255,0.75); color: var(--ink);
  border: 1px solid var(--line-2); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(20,20,16,0.05);
}
.btn-frost:hover { background: #fff; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; margin-top: auto; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ================= Nav ================= */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: background 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(250,249,245,0.85); backdrop-filter: blur(16px); border-color: var(--line); }
.nav-inner { max-width: var(--container); margin: 0 auto; padding: 22px var(--gutter) 15px; display: flex; align-items: center; gap: 34px; }
.brand, .brand-lockup {
  display: inline-flex; align-items: center;
  font-family: var(--font-head); font-weight: 500; font-size: 20px;
  line-height: 1; letter-spacing: -0.02em;
}
.brand { gap: 9px; }
.brand img, .brand-lockup img { display: block; flex: 0 0 auto; object-fit: contain; }
.brand-lockup { gap: 4px; }
.brand-lockup--compact { gap: 3.5px; }
.nav-links { display: flex; gap: 26px; font-size: 15px; color: var(--muted-2); }
.nav-links a { white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
.nav-cta .btn { padding: 9px 18px; font-size: 14.5px; }
/* Seven nav items need more room than six did. Between the mobile
   breakpoint and full desktop, tighten the row so "Sign in" cannot wrap
   onto two lines against the CTA. */
@media (max-width: 1080px) {
  .nav-inner { gap: 20px; }
  .nav-links { gap: 16px; font-size: 14.5px; }
}
@media (max-width: 860px) {
  .nav-inner { gap: 14px; }
  .nav-links { gap: 12px; font-size: 14px; }
  .nav-cta { gap: 8px; }
}

/* ================= Page shell (the bordered card wrapping content) ================= */
.shell {
  max-width: var(--container); margin: 14px auto 0; padding: 0 var(--gutter);
}
.shell-inner {
  border: none; border-radius: 0; overflow: hidden;
  background: var(--card);
  /* keep only horizontal section dividers, no side borders */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.block { border-bottom: 1px solid var(--line); padding: 0; }
.block:last-child { border-bottom: none; }
.block-pad { padding: clamp(40px, 6vw, 92px) clamp(24px, 5vw, 76px); }

/* ================= Hero ================= */
.hero { position: relative; text-align: center; padding: clamp(64px, 9vw, 118px) 24px clamp(20px, 4vw, 44px); overflow: hidden; }

.hero::after { /* soft wash so headline stays crisp over the dots */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 52% at 50% 38%, rgba(250,249,245,0.86) 6%, rgba(250,249,245,0.45) 44%, transparent 74%);
}
.hero-content { position: relative; z-index: 2; }

.hero h1 { max-width: 15ch; margin: 0 auto; }
/* Highlighted words (hero "agents", page-header accents) — plain near-black
   like the surrounding text, then a soft pastel wash (configure.dev-style)
   sweeps left-to-right on load, and again every ~30s. Reusable on any page. */
.grad {
  background: linear-gradient(90deg,
    var(--ink) 0%, var(--ink) 34%,
    #7c9bd6 40%, #a58bde 47%, #8fbf9e 54%, #e3c68f 61%,
    var(--ink) 67%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradSweep 30s ease-in-out infinite;
}
@keyframes gradSweep {
  0%        { background-position: 100% 50%; } /* band off the left, sweep starts on load */
  6%, 100% { background-position: 0% 50%; }    /* swept left-to-right (fast), then rests black */
}
@media (prefers-reduced-motion: reduce) { .grad { animation: none; } }
.hero-sub { font-size: 19px; color: var(--muted-2); max-width: 520px; margin: 22px auto 32px; line-height: 1.5; }

/* Interactive dashboards resting on an ASCII horizon (Hermes/Nous-style backdrop) */
.hero-visual { position: relative; max-width: 1120px; margin: clamp(34px,5vw,58px) auto 0; padding: 0 4px; }
.hero-horizon {
  position: absolute; z-index: 0; left: 50%; top: 58px; bottom: -6%;
  width: min(128%, 1500px); transform: translateX(-50%);
  background: url("assets/img/hero-office-soft.webp") center 30% / cover no-repeat;
  border-radius: 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 74% at 50% 48%, #000 28%, rgba(0,0,0,0.35) 60%, transparent 82%);
  mask-image: radial-gradient(ellipse 70% 74% at 50% 48%, #000 28%, rgba(0,0,0,0.35) 60%, transparent 82%);
  /* Backdrop, not a competing image: the product screenshot has to be the
     brightest, sharpest thing in the hero. */
  /* saturate(0.82) contrast(0.98) blur(1.5px) are baked into hero-office-soft*.webp,
     so phones do not have to run a live blur over the largest element on the page */
  opacity: 0.62;
}
/* soft light wash so the white dashboards read cleanly on top */
.hero-horizon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 62% 66% at 50% 52%, rgba(250,249,245,0.78), rgba(250,249,245,0.34) 58%, transparent 82%);
}
/* interactive clicker sits above the horizon */
.hero-visual .cap-pills,
.hero-visual .cap-stage { position: relative; z-index: 2; }
.hero-visual .cap-pills { padding-top: 0; }
.hero-visual .cap-stage { padding-bottom: 0; min-height: 720px; }
.hero-visual .shotframe { max-width: 968px; }

/* ================= Interactive demo (Jam-style: components over a photo) ================= */
.cap { position: relative; border-top: 1px solid var(--line); overflow: hidden; }
/* Clean paper section, no photo behind the demo */
.cap { background: var(--paper); }
.cap > * { position: relative; z-index: 1; }

.cap-pills {
  display: flex; gap: 10px; padding: 22px clamp(20px,4vw,40px); overflow-x: auto;
  scrollbar-width: none; justify-content: center; flex-wrap: wrap;
}
.cap-pills::-webkit-scrollbar { display: none; }
/* Tabs, not buttons: plain labels with an underline the hero fills as it
   steps between panels, so the strip reads as a selector, not five CTAs. */
.cap-pill {
  flex: none; position: relative; background: none; border: none; border-radius: 0;
  padding: 9px 10px 15px; font-family: inherit; font-size: 14.5px; color: var(--muted-2);
  cursor: pointer; transition: color 0.2s ease; white-space: nowrap;
}
.pill-sm { display: none; }  /* short label, swapped in on phones */
.cap-pill:hover { color: var(--ink); }
.cap-pill.active { color: var(--ink); font-weight: 500; }
.cap-pill::before {  /* faint baseline track under every tab */
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--line);
}
.cap-pill::after {  /* active underline that fills across one auto-cycle */
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left;
}
.cap-pill.active::after { animation: tabProgress 3.6s linear forwards; }
@keyframes tabProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .cap-pill.active::after { animation: none; transform: scaleX(1); } }

.cap-stage { padding: 10px clamp(16px,4vw,44px) clamp(44px,6vw,84px); position: relative; min-height: 560px; }
/* Soft brand-tinted wash behind the floating screenshot, so the product sits
   on colour instead of bare paper. */
.hero-visual .cap-stage::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  top: 54px; width: min(1080px, 94%); height: 560px; border-radius: 48px;
  background:
    radial-gradient(58% 68% at 18% 24%, rgba(47,107,255,0.22), transparent 72%),
    radial-gradient(52% 62% at 84% 18%, rgba(27,138,74,0.17), transparent 72%),
    radial-gradient(62% 58% at 62% 92%, rgba(233,150,74,0.15), transparent 74%);
  filter: blur(56px);
}
.cap-panel { z-index: 1; }  /* sits above the colour wash; positioning is set below */

/* Reusable version of the hero treatment: a screenshot floating on the office
   scene rather than bare paper. Used sparingly, so it stays a beat rather
   than becoming the background of the whole page. */
.shot-stage { position: relative; margin-top: 44px; padding: 34px 0; }
.shot-stage::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%); top: 0; bottom: 0;
  width: min(124%, 1460px); border-radius: 26px;
  background: url("assets/img/hero-office.webp") center 42% / cover no-repeat;
  opacity: 0.5; filter: saturate(0.8) contrast(0.98) blur(2px);
  -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 50%, #000 24%, rgba(0,0,0,0.32) 60%, transparent 84%);
  mask-image: radial-gradient(ellipse 72% 76% at 50% 50%, #000 24%, rgba(0,0,0,0.32) 60%, transparent 84%);
}
.shot-stage::after {  /* light wash so the white UI stays crisp on top */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%); top: 0; bottom: 0;
  width: min(124%, 1460px); border-radius: 26px;
  background: radial-gradient(ellipse 62% 66% at 50% 50%, rgba(250,249,245,0.8), rgba(250,249,245,0.36) 58%, transparent 82%);
}
.shot-stage > * { position: relative; z-index: 1; }

/* Real screenshot in a clean floating window */
.shotframe {
  margin: 0 auto; max-width: 1180px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 2px 4px rgba(20,20,16,0.04), 0 44px 100px rgba(20,20,16,0.20);
  overflow: hidden;
}
.shotbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: #fbfbf9;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.shotbar .url { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.shotbar::before { /* subtle window affordance, monochrome */
  content: ""; width: 40px; height: 8px; border-radius: 99px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px);
}
.shotframe img { display: block; width: 100%; height: auto; }
/* The caption now leads the panel, so it carries real weight instead of
   trailing underneath as fine print. */
.shotcap {
  max-width: 620px; margin: 0 auto 26px; text-align: center;
  font-size: 17.5px; color: #4a4a44; font-weight: 450; line-height: 1.5;
  letter-spacing: -0.002em;
}
/* Every hero screenshot renders at the same size no matter its native
   aspect, so switching tabs never jolts the layout. */
.shotframe > picture { display: block; }
/* Same for bento tiles: <picture> is inline by default, so inside the flex
   .tile-shot it has no width until its image loads, which leaves the image
   0px tall and shoves everything below it down on load. */
.tile-shot > picture { display: block; width: 100%; }
.hero-visual .shotframe > picture > img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center top; }
/* The chat mockup has to match that same 3:2 box, otherwise switching to it
   jolts the page ~200px taller. Tighten its rhythm to fit. */
.hero-visual .shotframe > .talkchat {
  aspect-ratio: 3 / 2; min-height: 0; overflow: hidden;
  padding: 15px clamp(16px,2.6vw,26px); gap: 10px;
}
.hero-visual .talkchat .tc-av { width: 34px; height: 34px; border-radius: 9px; }
.hero-visual .talkchat .tc-name { font-size: 14px; margin-bottom: 1px; }
.hero-visual .talkchat .tc-msg { font-size: 14px; line-height: 1.42; }
.hero-visual .talkchat .tc-input { padding: 9px 13px; font-size: 13.5px; }
/* Otto's closing message already says the work is done, so the summary
   banner is redundant here and the space is worth more. */
.hero-visual .talkchat .tc-done { display: none; }

/* ---- Workflow run view ----
   Built in markup rather than as a screenshot: it stays sharp at any
   resolution, and a finished run sells the outcome better than an
   empty editor canvas does. */
.hero-visual .shotframe > .runview { aspect-ratio: 3 / 2; }
.runview {
  display: grid; grid-template-columns: 1.32fr 1fr; align-items: stretch;
  background: var(--card); text-align: left; overflow: hidden;
}
.rv-steps { padding: 15px clamp(16px,2.4vw,24px); min-width: 0; display: flex; flex-direction: column; }
.rv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rv-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.rv-meta { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.rv-chip {
  flex: none; font-size: 11.5px; font-weight: 500; color: var(--muted-2);
  border: 1px solid var(--line-2); border-radius: 99px; padding: 4px 10px; white-space: nowrap;
}
/* The plain-language ask that produced the run: it is the whole promise of
   this tab, so it belongs in the frame. */
.rv-prompt {
  margin-top: 13px; padding: 11px 13px; border-radius: 11px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--muted-2);
}
.rv-prompt span {
  display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: 4px;
}
.rv-list { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 9px; }
.rv-history {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
}
.rv-run { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted-2); }
.rv-run i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); opacity: 0.65; }
.rv-run--all { color: var(--blue); margin-left: auto; }
.rv-list li { display: flex; align-items: flex-start; gap: 10px; }
.rv-tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: var(--green-soft); color: var(--green);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.rv-step { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.rv-step em { display: block; font-style: normal; font-size: 12px; font-weight: 400; color: var(--muted-2); margin-top: 1px; }
.rv-t { flex: none; font-size: 11.5px; color: var(--muted); }
.rv-output { border-left: 1px solid var(--line); background: var(--paper); padding: 15px clamp(14px,2vw,20px); min-width: 0; display: flex; flex-direction: column; }
.rv-sent {
  margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--muted-2);
}
.rv-label { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.rv-doc { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.rv-doc-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rv-doc-line { font-size: 12px; line-height: 1.5; color: var(--muted-2); margin-top: 7px; }
.rv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 11px 0; }
.rv-stats div { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.rv-stats b { display: block; font-size: 15px; color: var(--ink); }
.rv-stats span { font-size: 10.5px; color: var(--muted); }
.rv-mini { display: grid; gap: 5px; margin-top: 11px; }
.rv-mini i { display: block; height: 7px; border-radius: 4px; background: var(--paper-2); }
.rv-mini i:nth-child(1) { width: 88%; }
.rv-mini i:nth-child(2) { width: 96%; }
.rv-mini i:nth-child(3) { width: 62%; }

/* ================= Panel animations =================
   The Loop plays back like a conversation arriving, and the workflow ticks
   itself off step by step. Both are keyed to .active, so they replay each
   time you land on the tab, and both finish inside the 3.6s auto-cycle.
   Motion is opt-in: anyone asking for reduced motion just sees the result. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes msgIn {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes tickPop {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* Talk to existing agents: each message lands in turn */
  .cap-panel[data-panel="talk"].active .talkchat > * {
    animation: msgIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .cap-panel[data-panel="talk"].active .talkchat > *:nth-child(1) { animation-delay: 0.06s; }
  .cap-panel[data-panel="talk"].active .talkchat > *:nth-child(2) { animation-delay: 0.24s; }
  .cap-panel[data-panel="talk"].active .talkchat > *:nth-child(3) { animation-delay: 0.42s; }
  .cap-panel[data-panel="talk"].active .talkchat > *:nth-child(4) { animation-delay: 0.60s; }
  .cap-panel[data-panel="talk"].active .talkchat > *:nth-child(5) { animation-delay: 0.78s; }
  .cap-panel[data-panel="talk"].active .talkchat > *:nth-child(6) { animation-delay: 0.96s; }
  .cap-panel[data-panel="talk"].active .talkchat > *:nth-child(7) { animation-delay: 1.14s; }
  .cap-panel[data-panel="talk"].active .talkchat > *:nth-child(8) { animation-delay: 1.32s; }
  .cap-panel[data-panel="talk"].active .talkchat > *:nth-child(9) { animation-delay: 1.50s; }

  /* Build workflows: the run completes in front of you */
  .cap-panel[data-panel="flows"].active .rv-head,
  .cap-panel[data-panel="flows"].active .rv-prompt,
  .cap-panel[data-panel="flows"].active .rv-list li,
  .cap-panel[data-panel="flows"].active .rv-history,
  .cap-panel[data-panel="flows"].active .rv-output {
    animation: msgIn 0.40s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .cap-panel[data-panel="flows"].active .rv-head    { animation-delay: 0.04s; }
  .cap-panel[data-panel="flows"].active .rv-prompt  { animation-delay: 0.16s; }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(1) { animation-delay: 0.34s; }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(2) { animation-delay: 0.50s; }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(3) { animation-delay: 0.66s; }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(4) { animation-delay: 0.82s; }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(5) { animation-delay: 0.98s; }
  .cap-panel[data-panel="flows"].active .rv-history { animation-delay: 1.20s; }
  .cap-panel[data-panel="flows"].active .rv-output  { animation-delay: 1.12s; }
  /* the tick lands a beat after its row, so each step reads as completing */
  .cap-panel[data-panel="flows"].active .rv-list li .rv-tick {
    animation: tickPop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(1) .rv-tick { animation-delay: 0.46s; }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(2) .rv-tick { animation-delay: 0.62s; }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(3) .rv-tick { animation-delay: 0.78s; }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(4) .rv-tick { animation-delay: 0.94s; }
  .cap-panel[data-panel="flows"].active .rv-list li:nth-child(5) .rv-tick { animation-delay: 1.10s; }
}

/* ---- The whiteboard ----
   Was an empty three-node editor template that showed no actual work. This
   is the promise in the copy instead: everything in flight, who holds it,
   and the one item waiting on a human. */
.wboard {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; text-align: left;
}
.wb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--paper);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.wb-count {
  margin-left: auto; letter-spacing: 0; text-transform: none;
  background: var(--paper-2); border-radius: 99px; padding: 1px 8px; color: var(--muted-2);
}
.wb-row {
  display: grid; grid-template-columns: 8px 1fr auto auto; align-items: center; gap: 11px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.wb-row:last-child { border-bottom: none; }
.wb-row--wait { background: #fdfcf7; }
.wb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.wb-dot.wb-run { background: var(--green); }
.wb-dot.wb-wait { background: #d08b2c; }
.wb-name { min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.wb-name em {
  display: block; font-style: normal; font-size: 12px; font-weight: 400;
  color: var(--muted-2); margin-top: 2px;
}
.wb-who { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.wb-state {
  font-size: 11px; color: var(--muted-2); white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: 99px; padding: 3px 9px;
}
.wb-state--wait { color: #9a6516; border-color: #e6d3ad; background: #fdf6e7; }
@media (max-width: 560px) {
  .wb-row { grid-template-columns: 8px 1fr auto; gap: 9px; padding: 10px 12px; }
  .wb-who { display: none; }  /* the owner is the first thing to go, not the status */
}
@media (max-width: 720px) {
  .runview { grid-template-columns: 1fr; }
  .rv-output { display: none; }  /* the run itself is the story on a phone */
}

/* "Talk to existing agents" — a chat with your externally-hosted agents */
.talkchat {
  background: var(--card); text-align: left;
  padding: 22px clamp(18px,3vw,30px); min-height: 470px;
  display: flex; flex-direction: column; gap: 18px;
}
.tc-row { display: flex; gap: 13px; align-items: flex-start; }
.tc-av {
  flex: none; width: 42px; height: 42px; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--line-2); background: #fff; display: grid; place-items: center;
}
.tc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-init { background: #3f6f8f; color: #fff; font-weight: 700; font-size: 15px; }
.tc-body { min-width: 0; }
.tc-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.tc-tag {  /* quiet gray label of where the agent lives, no dot */
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 500; color: var(--muted);
}
.tc-time { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.tc-msg { font-size: 15px; line-height: 1.5; color: #2b2b26; }
.tc-input {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border: 1px solid var(--line-2); border-radius: 12px;
  font-size: 14px; color: var(--muted);
}
.tc-input .tc-send { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; background: var(--paper-2); display: grid; place-items: center; color: var(--muted-2); }
.tc-done {
  align-self: flex-start; margin-left: 55px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 10px; background: var(--green-soft); color: var(--green);
  font-size: 13px; font-weight: 600;
}
@media (max-width: 720px) { .tc-done { margin-left: 0; font-size: 12.5px; } }
@media (max-width: 720px) {
  .talkchat { min-height: 0; padding: 16px 14px; gap: 14px; }
  .tc-msg, .tc-name { font-size: 14px; }
}

/* Screenshot panels swap with a soft crossfade */
.cap-panel {
  position: absolute; left: 0; right: 0; top: 10px;
  padding: 0 clamp(16px,4vw,44px);
  opacity: 0; transform: translateY(16px) scale(0.985); pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.cap-panel.active { opacity: 1; transform: none; pointer-events: auto; position: relative; }

/* ================= UI component mocks (bento pieces) ================= */
.ui {
  width: 100%; max-width: 720px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(20,20,16,0.05), 0 26px 60px rgba(20,20,16,0.09);
  overflow: hidden;
}
.ui-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--ink); font-weight: 500;
}
.ui-head .sub { color: var(--muted-2); font-weight: 400; }
.ui-head .right { margin-left: auto; color: var(--muted-2); font-weight: 400; font-size: 12.5px; }
.ui-body { padding: 20px 22px; }

/* Chat bubbles */
.bubbles { display: grid; gap: 10px; }
.bubble { max-width: 82%; padding: 11px 15px; font-size: 14.5px; line-height: 1.5; border-radius: 4px 13px 13px 13px; background: var(--paper-2); }
.bubble.otto { background: var(--green-soft); }
.bubble.me { align-self: flex-end; background: var(--ink); color: #fff; border-radius: 13px 4px 13px 13px; }
.bubble .who { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }
.bubble.me .who { color: rgba(255,255,255,0.6); }

/* Table (filing cabinet) */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 500; color: var(--muted-2); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: none; }
.tbl .sub { color: var(--muted-2); font-size: 12px; }
.tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; background: var(--paper-2); color: var(--muted-2); white-space: nowrap; border: 1px solid var(--line); }
.tag.green, .tag.amber, .tag.red { background: var(--paper-2); color: var(--muted-2); }

/* Rows (whiteboard / tasks) */
.rows { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 14px; }
.row .dot-i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.row .dot-i.open { background: transparent; border: 1.5px solid var(--line-2); }
.row .grow { flex: 1; }

/* Stat tiles + sparklines */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; background: var(--card); }
.stat .label { font-size: 13px; color: var(--muted-2); }
.stat .sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.stat .num { font-family: var(--font-head); font-weight: 300; font-size: 40px; letter-spacing: -0.02em; margin: 8px 0 6px; }
.stat .num .up { font-family: var(--font-body); font-size: 13px; color: var(--muted-2); font-weight: 500; margin-left: 6px; }
.spark { width: 100%; height: 34px; display: block; }

/* Bars (what I know) */
.bars { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 14px; font-size: 14px; }
.bar { height: 7px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink); border-radius: 99px; }
.bar-row .pct { text-align: right; color: var(--muted-2); font-size: 13px; }

/* ================= Bento section ================= */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile {
  grid-column: span 3; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; min-height: 240px; overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tile:hover { box-shadow: 0 18px 44px rgba(20,20,16,0.08); transform: translateY(-2px); }
.tile.wide { grid-column: span 4; }
.tile.narrow { grid-column: span 2; }
.tile.full { grid-column: span 6; }
.tile-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--muted-2); font-size: 15px; line-height: 1.5; }
.tile .fill { margin-top: auto; padding-top: 22px; }

/* Tile that holds a real product screenshot */
.tile.shot { padding: 28px 28px 0; }
.tile.shot .tile-text { padding-bottom: 6px; }
.tile.shot .tile-shot {
  margin-top: auto; border: 1px solid var(--line); border-top-left-radius: 12px; border-top-right-radius: 12px;
  overflow: hidden; box-shadow: 0 -1px 0 rgba(20,20,16,0.02), 0 24px 50px rgba(20,20,16,0.10);
  background: #fbfbf9;
}
.tile.shot .tile-shot img { display: block; width: 100%; height: auto; }
/* Product screenshots are wide, so they only stay legible in a full-width tile.
   Alternate which side the shot sits on to give the run of tiles some rhythm. */
.tile.full.shot.rev { flex-direction: row-reverse; padding: 34px 34px 34px 40px; }
.tile.full.shot { flex-direction: row; align-items: center; gap: 40px; padding: 34px 34px 34px 40px; min-height: 300px; }
.tile.full.shot .tile-text { flex: 0 0 40%; }
.tile.full.shot .tile-shot { flex: 1; margin: 0; border-radius: 12px; align-self: stretch; display: flex; align-items: center; }
@media (max-width: 720px) { .tile.full.shot, .tile.full.shot.rev { flex-direction: column; gap: 22px; } }

/* Handbook mini lines */
.mini-lines { display: grid; gap: 8px; }
.mini-lines i { display: block; height: 10px; border-radius: 4px; background: var(--paper-2); }
.mini-lines i:nth-child(1) { width: 92%; }
.mini-lines i:nth-child(2) { width: 68%; }
.mini-lines i:nth-child(3) { width: 80%; }

/* ================= Logo strip ================= */
.trust { text-align: left; }
.trust .logos { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; margin-top: 22px; opacity: 0.5; }
.trust .logos span { font-family: var(--font-head); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; }

/* ================= Bento span helper ================= */
.tile.third { grid-column: span 2; }   /* 2 of 6 columns = an even third */
.tile.half { grid-column: span 3; }

/* ================= Testimonials (bento tiles) ================= */
.tile.quote { justify-content: space-between; }
.quote blockquote { font-family: var(--font-head); font-weight: 300; font-size: 21px; line-height: 1.35; letter-spacing: -0.01em; }
.tile.wide.quote blockquote { font-size: 24px; }
.quote figcaption { margin-top: auto; padding-top: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }

/* ================= Pricing (bento tiles) ================= */
.tile.plan { padding: 30px; overflow: visible; }   /* let the "Recommended" badge show above the tile */
.plan h3 { font-size: 18px; }
.plan .price { font-family: var(--font-head); font-weight: 300; font-size: 46px; letter-spacing: -0.02em; margin: 8px 0 2px; }
.plan .price span { font-size: 14px; color: var(--muted-2); }
.plan-tag { color: var(--muted-2); font-size: 14.5px; margin-bottom: 20px; }
.plan-featured { border-color: var(--ink); position: relative; }
.plan-featured::before { content: "Recommended"; position: absolute; top: -12px; left: 26px; background: var(--ink); color: #fff; padding: 4px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.pricing-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pricing-plans .tile { grid-column: auto; min-width: 0; padding: 28px 20px; }
.pricing-plans .price { color: var(--ink); }
.pricing-plans .plan-tag { min-height: 3em; }
@media (max-width: 800px) {
  .pricing-plans { grid-template-columns: 1fr; gap: 24px; }
  .pricing-plans .plan-tag { min-height: 0; }
}
.checklist { list-style: none; display: grid; gap: 11px; margin: 0 0 28px; }
.checklist li { padding-left: 26px; position: relative; color: var(--muted-2); font-size: 14.5px; }
.checklist li::before { content: ""; position: absolute; left: 4px; top: 0.58em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }

/* ================= FAQ ================= */
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 22px 4px; }
.faq-list summary { cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 400; font-size: 20px; letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--muted-2); font-size: 22px; transition: transform 0.25s ease, color 0.25s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); color: var(--green); }
.faq-list details p { margin-top: 14px; color: var(--muted-2); font-size: 15.5px; line-height: 1.6; max-width: 660px; }

/* ================= Otto split ================= */
.otto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 720px) { .otto-grid { grid-template-columns: 1fr; gap: 36px; } }
.otto-grid .shotframe { max-width: none; }

/* Otto's daily brief, shown as a wide card below the intro */
.otto-brief {
  max-width: 1000px; margin: clamp(34px,5vw,52px) auto 0;
  border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--card);
  box-shadow: 0 2px 4px rgba(20,20,16,0.05), 0 30px 70px rgba(20,20,16,0.14);
}
.otto-brief img { display: block; width: 100%; height: auto; }

/* ================= Loops (coordination feature) ================= */
.loop-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 44px; }
.loop-benefits b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 6px; }
.loop-benefits p { font-size: 14px; color: var(--muted-2); line-height: 1.5; }
@media (max-width: 860px) { .loop-benefits { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px) { .loop-benefits { grid-template-columns: 1fr; } }
.loop-tags { margin-top: 30px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--muted-2); }

/* ================= Final CTA (dark, with reactive dot field) ================= */
.final { position: relative; text-align: center; color: #fff; padding: clamp(90px,11vw,150px) 24px; overflow: hidden; background: #141310; }
/* recurring ASCII horizon motif, glowing softly out of the dark */
.final::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/img/hero-office.webp") center 62% / cover no-repeat;
  opacity: 0.62; mix-blend-mode: screen; filter: saturate(0.85) contrast(1.08);
  -webkit-mask-image: radial-gradient(ellipse 116% 100% at 50% 66%, #000 40%, transparent 88%);
  mask-image: radial-gradient(ellipse 116% 100% at 50% 66%, #000 40%, transparent 88%);
}
/* Scrim only needs to sit behind the copy, so keep it tight and let the
   surrounding image stay visible. */
.final::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 46% 42% at 50% 42%, rgba(20,19,16,0.82) 10%, transparent 78%); }
/* The scene behind is bright enough to compete with the copy, so give the
   text its own soft shadow instead of dimming the image back down. */
.final-content { position: relative; z-index: 2; text-shadow: 0 1px 18px rgba(12,11,9,0.85), 0 1px 3px rgba(12,11,9,0.6); }
.final h2 { color: #fff; }
.final .btn { text-shadow: none; }
.final .lead { color: rgba(255,255,255,0.78); margin: 20px auto 34px; max-width: 540px; }
.btn-frost-dark { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); }
.btn-frost-dark:hover { background: rgba(255,255,255,0.14); }

/* ================= Footer ================= */
.footer { position: relative; overflow: hidden; padding: 40px var(--gutter); }
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/img/hero-office.webp") center 88% / cover no-repeat;
  opacity: 0.09;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 65%);
  mask-image: linear-gradient(180deg, transparent, #000 65%);
}
.footer-inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.footer-note { color: var(--muted-2); font-size: 13.5px; flex: 1; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; color: var(--muted-2); }
.footer-links a:hover { color: var(--ink); }

/* ================= Insights / blog (inherited pages) ================= */
.page-head { position: relative; overflow: hidden; padding: 150px 0 60px; }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/img/hero-office.webp") center 20% / cover no-repeat;
  opacity: 0.12;
  -webkit-mask-image: radial-gradient(ellipse 80% 92% at 32% 42%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 92% at 32% 42%, #000 18%, transparent 78%);
}
.page-head .container { position: relative; z-index: 1; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 110px; }
.post-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.post-card:hover { box-shadow: 0 16px 40px rgba(20,20,16,0.08); transform: translateY(-3px); }
.post-thumb { aspect-ratio: 16 / 10; background: var(--paper-2); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body { display: flex; flex-direction: column; gap: 11px; padding: 24px 26px 28px; flex: 1; }
.post-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.post-card h3 { font-size: 25px; font-weight: 300; font-family: var(--font-head); }
.post-card p { color: var(--muted-2); font-size: 15px; line-height: 1.5; }
.post-card .read { padding-top: 14px; font-weight: 500; font-size: 15px; color: var(--blue); }

/* ===== Insights index: featured article + topic filter (editorial layout) ===== */
.post-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); font-weight: 600; }
.post-card .post-cat { margin-bottom: -2px; }
.post-card .post-meta { margin-top: auto; }

/* Compact page header for the Insights index */
.page-head--sm { padding: 108px 0 30px; }
.page-head--sm h1 { font-size: clamp(34px, 4.6vw, 54px); }
.page-head--sm .hero-sub { font-size: 17px; margin-top: 12px; }

/* Featured article: text + image */
.feature-card {
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 36px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.feature-card:hover { box-shadow: 0 20px 50px rgba(20,20,16,0.09); transform: translateY(-3px); }
.feature-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px,4vw,52px); }
.feature-card h2 { font-family: var(--font-head); font-weight: 300; letter-spacing: -0.02em; font-size: clamp(28px,3.4vw,42px); margin: 12px 0 16px; max-width: 20ch; }
.feature-card p { color: var(--muted-2); font-size: clamp(16px,1.4vw,18px); line-height: 1.55; max-width: 54ch; }
.feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.feature-foot .read { color: var(--blue); font-weight: 500; font-size: 15px; }
.feature-thumb { min-height: 320px; background: var(--paper-2); }
.feature-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Topic filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.filter-chip {
  font-family: var(--font-body); font-size: 14px; color: var(--muted-2);
  background: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 17px;
  cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.filter-chip:hover { color: var(--ink); border-color: var(--muted); }
.filter-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.feature-card[hidden], .post-card[hidden] { display: none; }
.filter-empty { color: var(--muted-2); font-size: 16px; padding: 12px 0 90px; }

/* Article */
.article { max-width: 720px; margin: 0 auto; padding: 150px 24px 110px; }
.article h1 { font-size: clamp(38px,5vw,60px); margin: 16px 0 12px; }
.article .post-meta { margin-bottom: 40px; display: block; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.article h2 { font-size: 30px; margin: 44px 0 12px; }
.article p { color: #3a3a34; font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
.article ul { margin: 0 0 18px 22px; color: #3a3a34; font-size: 17px; line-height: 1.7; }
.article h3 { font-size: 22px; margin: 34px 0 10px; }
.article .post-signoff { margin-top: 40px; color: var(--muted-2); font-size: 15px; font-style: italic; }
.article .flow { font-size: 15px; color: var(--muted-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; line-height: 1.7; }
.article .table-wrap { overflow-x: auto; margin: 26px 0 30px; border: 1px solid var(--line); border-radius: 12px; }
.article table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.article th, .article td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.article th:last-child, .article td:last-child { border-right: none; }
.article tbody tr:last-child th, .article tbody tr:last-child td { border-bottom: none; }
.article thead th { background: var(--paper-2); font-weight: 600; color: var(--ink); }
.article tbody th { font-weight: 600; color: var(--ink); background: #fbfbf8; white-space: nowrap; }
.article tbody td { color: #3a3a34; }
.article .article-cta { margin-top: 50px; padding: 28px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper-2); display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.article .article-cta p { margin: 0; }

/* About */
.prose { max-width: 720px; }
.prose p { color: #3a3a34; font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
.clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }

/* Legacy section wrapper (used by about/insights) */
.section { padding: 120px 0; }
.section-alt { background: var(--paper-2); }
.section h2 { margin-bottom: 20px; }
.section .lead { margin-bottom: 48px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 32px 28px; }
.card p { color: var(--muted-2); }
.eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 24px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ================= Reveal ================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.06s; }
.reveal.d2 { transition-delay: 0.12s; }
.reveal.d3 { transition-delay: 0.18s; }

/* ================= Responsive ================= */
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile.wide, .tile.narrow, .tile.full, .tile.third, .tile.half { grid-column: span 2; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-inner { gap: 12px; padding: 14px 16px 10px; }
  .nav-cta { flex-shrink: 0; }
  .nav-cta .btn { padding: 7px 12px; font-size: 13px; }
  .hero { padding: clamp(90px, 14vw, 120px) 24px clamp(20px, 4vw, 44px); }
  .bento { grid-template-columns: 1fr; }
  .tile, .tile.wide, .tile.narrow, .tile.full, .tile.third, .tile.half { grid-column: span 1; }
  .tile { padding: 22px; min-height: auto; }
  .tile.full.shot { padding: 22px; }
  .tile.quote blockquote, .tile.wide.quote blockquote { font-size: 18px; }
  .stats, .quotes, .plans, .grid-3, .grid-2, .post-grid, .clips { grid-template-columns: 1fr; }
  .feature-card { grid-template-columns: 1fr; }
  .feature-thumb { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .bar-row { grid-template-columns: 90px 1fr 36px; gap: 10px; font-size: 13px; }
  .bar-row .pct { font-size: 12px; }
  .block-pad { padding: 56px 22px; }
  h1 { font-size: clamp(34px, 10vw, 46px); }
  h2 { font-size: clamp(26px, 7vw, 32px); }
  .hero h1 { max-width: 17ch; }
  .hero-sub { font-size: clamp(15px, 4.2vw, 18px); }
  .cta-row .btn-lg { padding: 12px 20px; font-size: 15px; }
  /* All five tabs stay on screen: short labels, no sideways scrolling. */
  .cap-pills {
    gap: 2px; padding: 12px 10px; justify-content: center;
    flex-wrap: wrap; overflow-x: visible;
  }
  .cap-pill { padding: 11px 8px 14px; font-size: 12.5px; min-height: 44px; flex: 1 1 auto; }
  .pill-lg { display: none; }
  .pill-sm { display: inline; }
  .cap-stage { min-height: 420px; padding: 10px 12px 44px; }
  .shotcap { font-size: 16px; padding: 0 8px; }
  /* Every panel gets the SAME height on a phone, so switching tabs never
     resizes the page. A 3:2 ratio would be far too short here, so the height
     is set directly and each panel trims itself to fit. */
  .hero-visual .shotframe > .talkchat,
  .hero-visual .shotframe > .runview {
    aspect-ratio: 4 / 5; height: auto; min-height: 0; overflow: hidden;
  }
  /* The Loop keeps its height but scrolls inside the frame, so the whole
     conversation is readable without the panel growing. The soft bottom
     edge is the cue that there is more below. */
  .hero-visual .shotframe > .talkchat {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(#000 90%, transparent 100%);
    mask-image: linear-gradient(#000 90%, transparent 100%);
  }
  .hero-visual .shotframe > .talkchat::-webkit-scrollbar { width: 0; }
  /* scrollable, so the full thread including the close-out is worth showing */
  .hero-visual .talkchat .tc-done { display: block; }
  /* The steps are the story on a phone; the prompt and run history are not. */
  .hero-visual .rv-prompt,
  .hero-visual .rv-history { display: none; }
  .loop-benefits { grid-template-columns: 1fr; gap: 20px; }
  .final { padding: clamp(70px, 11vw, 120px) 20px; }
  .final .cta-row { gap: 10px; }
  .final .btn-lg { padding: 12px 20px; font-size: 15px; }
  .footer-inner { flex-direction: column; gap: 14px; text-align: center; }
  .footer-note { text-align: center; flex: none; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
  /* Comfortable touch targets: these were all ~21px tall. */
  .footer-links a { padding: 11px 4px; }
  .nav-signin { padding: 11px 4px; }
  .nav-cta .btn { padding: 11px 18px; }
}
@media (max-width: 480px) {
  .nav-cta { flex-shrink: 0; }
  .nav-cta .btn-frost { display: none; }
  /* Primary CTA on the smallest screens: keep it thumb-sized without
     letting the nav wrap. */
  .nav-cta .btn { padding: 11px 14px; font-size: 13.5px; }
  .nav-inner { gap: 10px; padding-left: 16px; padding-right: 16px; }
}

/* Mobile polish: calmer hero backdrop + a legible crop of the Loops shot */
@media (max-width: 720px) {
  /* the office backdrop is atmosphere, not the subject — quiet it on phones */
  .hero-horizon { opacity: 0.55; }
  /* phones get a lighter copy of the office backdrop (same photo, 800px) */
  .shot-stage::before, .final::before, .footer::before, .page-head::before {
    background-image: url("assets/img/hero-office-m.webp");
  }
  .hero-horizon { background-image: url("assets/img/hero-office-soft-m.webp"); }
  /* the full desktop Loops UI is unreadable shrunk to a phone; crop into the
     live thread (the story) so people can actually read the conversation.
     Framed on the thread itself: the loop list and the timestamp column both
     fall outside the crop. */
  #loops .shotframe img {
    height: 360px; object-fit: cover; object-position: 64% top;
  }
  /* the hero dashboards are full desktop UIs; at phone width the whole thing
     shrinks to an unreadable thumbnail. Near full-bleed the frame and crop into
     the top of each dashboard so its header and content read at a usable size. */
  /* Reclaim the hero's side padding for the visual only: the screenshot was
     rendering 271px wide inside a 375px screen, throwing away a third of the
     width the phone actually has. Text keeps its comfortable margins. */
  .hero-visual { margin-left: -20px; margin-right: -20px; }
  .hero-visual .cap-stage { padding-left: 4px; padding-right: 4px; min-height: 0; }
  .hero-visual .cap-panel { padding-left: 0; padding-right: 0; }
  /* only the dashboard screenshots (direct children), NOT the chat avatars
     nested inside the talk panel's shotframe */
  /* Phones now get purpose-built 4:5 portrait captures, so the image fills
     the frame at its native ratio and nothing is cropped at all. */
  .hero-visual .shotframe > picture > img {
    aspect-ratio: 4 / 5; height: auto; width: 100%;
    object-fit: cover; object-position: top center;
  }
}

/* Mobile: the capability pills are a TAB SWITCHER, not calls to action.
   Wrapped at phone width they stacked into five button-look pills right
   under the real CTAs — seven competing buttons before the first scroll
   (a signup-page bounce, reported Jul 24). So they stay on ONE line, but
   short labels now let all five fit on screen without swiping, which the
   sideways scroll was hiding. Still one quiet row, still not buttons. */
@media (max-width: 768px) {
  .cap-pills {
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: hidden;
    gap: 1px;
    padding: 14px 6px 12px;
  }
  .cap-pill {
    font-size: 12px;
    padding: 12px 6px 14px;
    min-height: 44px;
  }
}

/* Quiet by design: signing in is for people who already know they want to,
   so it sits beside the CTAs without competing with them. */
.nav-signin {
  align-self: center;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;   /* never break across two lines beside the CTA */
  /* --ink-soft measured 3.35:1 against the header — under AA for 14px text. */
  color: var(--ink, #17191a);
  opacity: 0.78;
  margin-right: 4px;
}
.nav-signin:hover { opacity: 1; }

.hero-code-link { margin-top: 18px; font-size: 14px; color: var(--muted-2); }
.hero-code-link a { display: inline-block; padding: 10px 0; }
.hero-code-link a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* The homepage's additional product link must not squeeze the account controls. */
@media (min-width: 721px) and (max-width: 1000px) {
  .nav--code-entry .nav-links { display: none; }
}
@media (max-width: 380px) {
  .nav--code-entry .brand-lockup img, .code-page .nav .brand-lockup img { width: 100px; }
}

/* ================= Insights (listing, article crumbs, related reading) =================
   Cards and covers are generated from one list (wiki: gtm/marketing/insights-build-script).
   Covers are drawn in HTML/CSS on a brand gradient per topic, in four styles:
   product screenshot, big text, comparison, stat. New articles never need an image file. */
[data-cat] { --g1: #dfe6f8; --g2: #cfd9f6; --g3: #efe9fb; --ink-tint: #3353a8; }
[data-cat="guides"]      { --g1: #cdd9f7; --g2: #b9c9f2; --g3: #e6ddf8; --ink-tint: #2f4f9e; }
[data-cat="comparisons"] { --g1: #ddd0f5; --g2: #c9b8ef; --g3: #d3def8; --ink-tint: #5e3e9c; }
[data-cat="industries"]  { --g1: #f3dfbc; --g2: #eccf9c; --g3: #dcebd9; --ink-tint: #7d5217; }
[data-cat="engineering"] { --g1: #cfe6d7; --g2: #b3d9c0; --g3: #d2dff7; --ink-tint: #1f6641; }
[data-cat="product"]     { --g1: #cfe0f4; --g2: #c3e1d6; --g3: #e5dcf7; --ink-tint: #245e7a; }
[data-cat="company"]     { --g1: #f2d9d4; --g2: #eecdb4; --g3: #e3d8f5; --ink-tint: #8c3f38; }

/* Header: big title left, description right */
.ins-head { padding: clamp(130px, 14vw, 176px) 0 clamp(34px, 4vw, 52px); }
.ins-head .container { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: end; gap: clamp(24px, 5vw, 80px); }
.ins-head .kicker { grid-column: 1 / -1; }
.ins-head h1 { font-size: clamp(46px, 6.6vw, 96px); line-height: 0.98; letter-spacing: -0.035em; margin: 0; max-width: 11ch; }
.ins-head-sub { color: var(--muted-2); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; max-width: 44ch; padding-bottom: 8px; }
.ins-body .container, .ins-cta .container, .ins-head .container { max-width: 1280px; }

/* Covers */
.ins-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--g1) 0%, transparent 60%),
    radial-gradient(90% 110% at 100% 100%, var(--g2) 0%, transparent 62%),
    radial-gradient(70% 70% at 90% 10%, var(--g3) 0%, transparent 70%),
    linear-gradient(135deg, var(--g1), var(--g3)); }
.ins-cover::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1.4px) 0 0 / 14px 14px; mask-image: linear-gradient(180deg, #000, transparent 85%); }
.ins-cover-mark { position: absolute; top: 16px; left: 16px; width: 22px; height: 22px; opacity: 0.75; }
.ins-cover--big { aspect-ratio: auto; min-height: 100%; }

.ins-cover--shot { display: flex; align-items: flex-end; justify-content: center; }
.ins-shot { width: 84%; margin-bottom: -2px; border-radius: 12px 12px 0 0; background: #fff; overflow: hidden;
  border: 1px solid rgba(20,20,16,0.10); border-bottom: 0; box-shadow: 0 22px 48px rgba(20,20,16,0.16); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.ins-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
.ins-cover--big .ins-shot { width: 86%; }

.ins-cover--text, .ins-cover--stat { display: flex; align-items: flex-end; padding: clamp(18px, 2.2vw, 26px); }
.ins-cover-text { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; color: var(--ink);
  font-size: clamp(22px, 2.3vw, 30px); max-width: 13ch; }
.ins-cover--big .ins-cover-text { font-size: clamp(34px, 4vw, 56px); }
.ins-stat { display: flex; flex-direction: column; gap: 6px; }
.ins-stat-num { font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--ink); font-size: clamp(30px, 3.2vw, 44px); white-space: nowrap; }
.ins-stat-cap { font-size: 13px; color: var(--ink-tint); font-weight: 500; }

.ins-cover--vs { display: grid; place-items: center; }
.ins-vs { display: flex; align-items: center; gap: 12px; }
.ins-vs-tile { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.92); color: var(--ink);
  border-radius: 14px; padding: 12px 16px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; box-shadow: 0 12px 30px rgba(20,20,16,0.10); }
.ins-vs-sep { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-tint); }
.ins-cover--big .ins-vs-tile { font-size: 19px; padding: 16px 20px; }

.ins-cover--icon { display: grid; place-items: center; }
.ins-cover-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.9); color: var(--ink-tint); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(20,20,16,0.08); }
.ins-cover-icon svg { width: 44%; height: 44%; }

/* Card text */
.ins-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.ins-cat { color: var(--ink-tint); }
.ins-date { font-size: 13px; color: var(--muted-2); }

.ins-feature { display: grid; grid-template-columns: 1.1fr 0.9fr; background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 18px 50px rgba(20,20,16,0.06); transition: box-shadow .3s ease, transform .3s ease; }
.ins-feature:hover { box-shadow: 0 24px 60px rgba(20,20,16,0.10); transform: translateY(-2px); }
.ins-feature .ins-cover { min-height: 380px; }
.ins-feature-body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ins-flag { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  background: var(--paper-2); border-radius: 999px; padding: 5px 11px; }
.ins-feature-title { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.03em; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; max-width: 16ch; }
.ins-read { margin-top: 6px; font-weight: 600; font-size: 15px; color: var(--ink); }
.ins-feature:hover .ins-read, .ins-card:hover .ins-readnow { color: var(--blue); }
.ins-feature:hover .ins-shot, .ins-card:hover .ins-shot { transform: translateY(-5px); }

.ins-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: clamp(56px, 7vw, 88px) 0 24px; }
.ins-section-title { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; }
.ins-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-chip { font: inherit; font-size: 14px; font-weight: 500; color: var(--muted-2); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.ins-chip span { opacity: 0.55; margin-left: 2px; font-variant-numeric: tabular-nums; }
.ins-chip:hover { color: var(--ink); border-color: var(--line-2); }
.ins-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.ins-chip:focus-visible, .ins-card:focus-visible, .ins-feature:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ins-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 0 var(--line); transition: box-shadow .3s ease, transform .3s ease; }
.ins-card:hover { box-shadow: 0 18px 44px rgba(20,20,16,0.09); transform: translateY(-3px); }
.ins-card[hidden] { display: none; }
.ins-grid:not(.is-filtered) .ins-card--is-featured { display: none; }
.ins-card .ins-cover { margin: 8px 8px 0; border-radius: 14px; }
.ins-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.ins-card-title { font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.ins-card-excerpt { color: var(--muted-2); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ins-card-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ins-readnow { font-size: 14px; font-weight: 600; color: var(--ink); transition: color .2s; }
.ins-empty { color: var(--muted-2); padding: 40px 0; text-align: center; }

/* Closing CTA */
.ins-cta { padding: clamp(72px, 9vw, 120px) 0 clamp(80px, 9vw, 128px); }
.ins-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background: #141310; color: #fff; border-radius: 24px; padding: clamp(30px, 4.4vw, 56px);
  background-image: radial-gradient(60% 120% at 100% 0%, rgba(165,139,222,0.35), transparent 60%), radial-gradient(50% 100% at 0% 100%, rgba(124,155,214,0.30), transparent 60%); }
.ins-cta-card h2 { color: #fff; font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; letter-spacing: -0.03em; max-width: 20ch; margin-bottom: 10px; }
.ins-cta-card p { color: rgba(255,255,255,0.72); max-width: 52ch; line-height: 1.55; }
.ins-cta-card .btn-green { background: #fff; color: var(--ink); }
.ins-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Article pages */
.ins-crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted-2); }
.ins-crumbs a { color: var(--muted-2); }
.ins-crumbs a:hover { color: var(--ink); }
.ins-crumbs span { color: var(--muted); }
.ins-related { border-top: 1px solid var(--line); background: var(--paper-2); padding: clamp(56px, 7vw, 90px) var(--gutter); }
.ins-related-inner { max-width: 1280px; margin: 0 auto; }
.ins-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ins-related-head h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.03em; }
.ins-related-head a { font-size: 15px; font-weight: 500; color: var(--muted-2); }
.ins-related-head a:hover { color: var(--ink); }
.article { padding-bottom: 80px; }

@media (max-width: 960px) {
  .ins-head .container { grid-template-columns: 1fr; }
  .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-feature { grid-template-columns: 1fr; }
  .ins-feature .ins-cover { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .ins-grid { grid-template-columns: 1fr; }
  .ins-toolbar { align-items: flex-start; flex-direction: column; }
  .ins-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .ins-chips::-webkit-scrollbar { display: none; }
  .ins-chip { white-space: nowrap; }
  .ins-cta-card { flex-direction: column; align-items: flex-start; }
  .ins-vs-tile { padding: 10px 12px; font-size: 14px; }
}