/* Guide (MKT-1749): self-contained RC sub-page. Base, header/nav, FAQ, CTA and footer copied from integrations/ (MKT-1946). */
  :root {
    --paper: #F7F5F1; --white: #FFFFFF;
    --ink: #23262A; --ink-600: #505763; --ink-500: #6B7280; --ink-400: #B9BEC6;
    --gray-300: #D5D8DD; --gray-200: #E3E5E8; --gray-100: #F1F2F4;
    --orange: #ED5A29; --orange-hover: #F17E58; --orange-ink: #B8410F; --orange-100: #FEEFEA; --orange-200: #F8CDBB;
    --green-100: #E6F4EC; --green-ink: #1F6B42;
    --dark: #23262A; --dark-panel: #1A1C1F; --dark-border: #3A3E44;
    --shadow: 0 1px 2px 0 rgba(16,24,40,.04), 0 1px 3px 0 rgba(16,24,40,.06);
    --shadow-md: 0 18px 40px -22px rgba(35,38,42,.38);
    --shadow-lg: 0 28px 66px -24px rgba(35,38,42,.40);
    --r-btn: 9px; --r-input: 12px; --r-card: 16px; --r-lg: 22px; --r-pill: 999px;
    --font: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
    --container: min(1160px, 100% - 48px);
    --h1-size: 40px; --h1-lh: 48px; --h2-size: 28px; --h2-lh: 36px;
    --lead-size: 16px; --lead-lh: 25px; --section-gap: 72px;
  }
  @media (min-width: 700px) { :root { --h1-size: 52px; --h1-lh: 60px; --h2-size: 34px; --h2-lh: 42px; --lead-size: 17px; --lead-lh: 27px; --section-gap: 100px; } }
  @media (min-width: 1280px) { :root { --container: min(1200px, 100% - 48px); --h1-size: 62px; --h1-lh: 70px; --h2-size: 40px; --h2-lh: 48px; --lead-size: 19px; --lead-lh: 29px; --section-gap: 128px; } }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: var(--font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
  a { color: var(--orange); text-decoration: none; }
  a:hover { color: var(--orange); }
  button { font-family: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }

  .container { width: var(--container); max-width: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 1; }
  @media (min-width: 1440px) { :root { --container: min(1360px, 100% - 48px); --h1-size: 64px; --h1-lh: 72px; --lead-size: 20px; --lead-lh: 30px; --section-gap: 144px; } }
  @media (max-width: 767px) { :root { --container: min(1160px, 100% - 40px); } }
  .narrow { max-width: 740px; margin: 0 auto; text-align: center; }
  .section { padding: var(--section-gap) 0; position: relative; overflow: hidden; }
  .band { background: var(--white); }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin: 0 0 16px; }
  .h1 { font-size: var(--h1-size); line-height: var(--h1-lh); font-weight: 700; margin: 0 0 22px; letter-spacing: -0.025em; }
  .h2 { font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: 600; margin: 0 0 16px; letter-spacing: -0.015em; }
  .lead { font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--ink-600); margin: 0; }
  .muted { font-size: 14px; color: var(--ink-500); margin: 0; }
  .accent { color: var(--orange); }
  .decor { position: absolute; pointer-events: none; z-index: 0; user-select: none; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 24px; border-radius: var(--r-btn); font-size: 16px; font-weight: 600; border: 1px solid transparent; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
  .btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px -10px rgba(237,90,41,.7); }
  .btn-primary:hover { background: var(--orange-hover); color: #fff; transform: translateY(-1px); }
  .btn-ghost { background: var(--white); color: var(--ink); border-color: var(--gray-300); }
  .btn-ghost:hover { border-color: var(--ink-400); color: var(--ink); }
  .btn-link { background: transparent; color: var(--ink); padding: 10px 6px; border: none; }
  .btn-link:hover { color: var(--orange); }
  .btn-sm { min-height: 44px; padding: 8px 18px; font-size: 15px; }

  /* reveal on scroll (homepage-rc pattern) */
  .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .rv.in { opacity: 1; transform: none; }

  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(237,90,41,.45); } 100% { box-shadow: 0 0 0 12px rgba(237,90,41,0); } }
  @keyframes popin { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes drift { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(10px,-14px) rotate(4deg); } }
  @keyframes flow { to { stroke-dashoffset: -24; } }
  @keyframes scan { 0% { top: -12%; } 100% { top: 100%; } }
  @keyframes type { 0% { width: 0; } 55%, 100% { width: 100%; } }
  @keyframes chipin { 0%, 15% { opacity: 0; transform: translateY(6px) scale(.92); } 25%, 100% { opacity: 1; transform: none; } }
  @keyframes fillbar { 0% { width: 8%; } 80%, 100% { width: 100%; } }
  @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* ===== header + nav (copied from homepage-rc) ===== */
  :root { --header-h: 80px; --ease: cubic-bezier(.16,1,.3,1); }
  .wrap { width: var(--container); max-width: 100%; margin: 0 auto; padding: 0; }
  .site-header button { border: 0; background: transparent; font-family: inherit; padding: 0; }
  .site-header .btn { min-height: 40px; padding: 8px 18px; font-size: 15px; font-weight: 500; box-shadow: none; }
  .site-header .btn-primary { font-weight: 600; }
  .btn-outline { background: var(--white); border: 1px solid var(--gray-200); color: var(--ink); }
  .btn-outline:hover { background: #FAFAFA; border-color: var(--gray-300); color: var(--ink); }

.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);transition:background 220ms ease,box-shadow 220ms ease,border-color 220ms ease;border-bottom:1px solid transparent}
.site-header.is-stuck{background:rgba(247,245,241,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:transparent}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.nav-links{display:flex;align-items:center;gap:6px}
/* The panels are absolutely positioned against the header itself (the sticky header is the
   nearest positioned ancestor), so the items stay static and the panel can be centred on
   .wrap regardless of which trigger opened it. */
.nav-item{position:static;display:flex;align-items:center}
.nav-trigger{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-btn);background:transparent;font-size:15px;font-weight:500;color:var(--ink-600);cursor:pointer;transition:background 140ms ease,color 140ms ease}
.nav-trigger:hover,.nav-item.is-open>.nav-trigger{background:var(--gray-100);color:var(--ink)}
.nav-trigger a,.nav-trigger button{color:inherit}
.nav-trigger-plain{color:var(--ink-600)}
.nav-trigger-split{padding:0}
.nav-trigger-label{display:flex;align-items:center;min-height:44px;padding:0 4px 0 14px}
.nav-caret{display:flex;align-items:center;min-height:44px;padding:0 14px 0 2px;cursor:pointer}
.nav-trigger svg{transition:transform 160ms ease}
.nav-item.is-open .nav-trigger svg{transform:rotate(180deg)}
.header-actions{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-btn);color:var(--ink);cursor:pointer}
.nav-burger-x{display:none}
.nav-burger[aria-expanded="true"] .nav-burger-bars{display:none}
.nav-burger[aria-expanded="true"] .nav-burger-x{display:block}

/* ===== header dropdowns (nav) =====
   "B" style from the approved artboards: bare 20px line icons (no tile), --ink-600 going
   --ink on hover, 500-weight titles, white panel on a 1px --gray-200 border. */
.nav-panel{position:absolute;top:100%;left:50%;z-index:2;width:min(var(--nav-w,1000px),var(--container));margin-top:9px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-4px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
.nav-item.is-open>.nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s,0s,0s}
/* 9px, not 8: top:100% lands on the header's padding box, and the header's 1px bottom
   border sits outside it — this puts the panel exactly 8px under the visible header edge */
/* invisible bridge over the 8px gap, so the pointer can cross from the trigger into the
   panel without ever leaving .nav-item */
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-panel-in{background:var(--white);border:1px solid var(--gray-200);border-radius:14px;box-shadow:0 8px 20px -10px rgba(35,38,42,.12),0 1px 2px rgba(35,38,42,.04);overflow:hidden}
.nav-panel-product{--nav-w:1000px}
.nav-panel-library{--nav-w:1020px}
.nav-panel-res{--nav-w:860px}
.nav-sec{display:flex;flex-direction:column;gap:12px}
.nav-sec-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:0 12px}
.nav-sec-title-flush{padding:0}
.nav-col{display:flex;flex-direction:column;gap:12px;padding:28px 16px 20px}
.nav-col-side{background:var(--white);border-left:1px solid var(--gray-200)}
.nav-list{display:flex;flex-direction:column;gap:4px}
.nav-list-tight{display:flex;flex-direction:column;gap:2px}
/* rich row: icon + title (+ chip) + description, arrow revealed at the right edge on hover */
.nav-row{display:flex;gap:14px;padding:12px;border-radius:12px;color:var(--ink);transition:background 120ms ease}
.nav-row:hover{background:var(--gray-100);color:var(--ink)}
.nav-ico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink-600);transition:color 120ms ease}
.nav-row:hover .nav-ico,.nav-row-c:hover .nav-ico{color:var(--ink)}
.nav-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-row-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:22px}
.nav-row-desc{font-size:13px;line-height:19px;color:var(--ink-600)}
/* always in the box, only faded — revealing it must not reflow the row */
.nav-row-go{margin-left:auto;align-self:center;display:flex;color:var(--ink);opacity:0;transition:opacity 120ms ease}
.nav-row:hover .nav-row-go,.nav-row:focus-visible .nav-row-go{opacity:1}
/* compact one-line row (Popup Library columns) */
.nav-row-c{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-c:hover{background:var(--gray-100);color:var(--ink)}
/* plain text row (Resources / Company) */
.nav-row-p{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:var(--r-btn);font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-p:hover{background:var(--gray-100);color:var(--ink)}
.nav-chip{font-size:11px;font-weight:600;line-height:16px;padding:1px 8px;border-radius:var(--r-pill);background:var(--orange-100);color:#B23A12}
.nav-ai-logos{display:flex;align-items:center;gap:8px;margin-top:6px}
.nav-ai-logos img{width:16px;height:16px}
.nav-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-top:1px solid var(--gray-200);background:var(--white)}
.nav-foot-center{justify-content:center}
.nav-foot-note{font-size:15px;color:var(--ink-600)}
.nav-foot-link,.nav-link-go{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--ink)}
.nav-link-go{min-height:40px}
.nav-foot-link:hover,.nav-link-go:hover{color:var(--ink);text-decoration:underline}
/* Product panel */
.nav-prod-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.nav-usecases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
/* Popup Library panel */
.nav-lib-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px}
.nav-lib-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:28px 20px 24px}
.nav-seasons{display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-left:1px solid var(--gray-200)}
.nav-season-body{display:flex;flex-direction:column;gap:12px}
.nav-season-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nav-season-name{font-size:18px;font-weight:600;line-height:24px}
.nav-season-when{font-size:13px;line-height:19px;color:var(--ink-600);white-space:nowrap}
.nav-season-shot{display:block;padding:14px;border-radius:12px;background:var(--paper)}
.nav-season-shot img{width:100%;height:auto;border-radius:6px;box-shadow:0 6px 16px -8px rgba(35,38,42,.35)}
.nav-season-list{display:flex;flex-direction:column;border-top:1px solid var(--gray-200);padding-top:6px}
.nav-season-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;font-size:15px;font-weight:500;color:var(--ink)}
.nav-season-row:hover{color:var(--ink);text-decoration:underline}
/* Resources panel: the artboard's per-column padding keeps the three columns optically even */
.nav-res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 240px}
.nav-col-l{padding:28px 8px 24px 16px}
.nav-col-r{padding:28px 16px 24px 8px}
.nav-col-c{padding:28px 12px 24px}
/* the mobile sheet only exists under the nav breakpoint */
.mnav{display:none}
/* ===== responsive ===== */
@media (max-width:1059px){
  /* the seasons column needs its 380px; below this the two link columns get the panel */
  .nav-lib-grid{grid-template-columns:minmax(0,1fr)}
  .nav-seasons{display:none}
}
/* ===== tablet ===== */

@media (max-width:767px){
  :root{--header-h:64px}
  .nav-links,.header-signin{display:none}
  .nav-burger{display:flex}
  /* full-height sheet under the (sticky) header; z-index stays below the header's 50 */
  .mnav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;display:flex;flex-direction:column;background:var(--white);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
  .mnav-nav{display:flex;flex-direction:column}
  .mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 20px;border-bottom:1px solid var(--gray-200);font-size:17px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
  .mnav-row svg{flex-shrink:0;color:var(--ink-600)}
  .mnav-chev{transition:transform 160ms ease}
  .mnav-row[aria-expanded="true"] .mnav-chev{transform:rotate(180deg)}
  .mnav-sub{display:none;background:#FCFBF9;border-bottom:1px solid var(--gray-200);padding-bottom:10px}
  .mnav-sub.is-open{display:block}
  .mnav-sub-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:14px 20px 4px}
  .mnav-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;font-size:15px;font-weight:500;color:var(--ink)}
  .mnav-link:hover{color:var(--ink)}
  .mnav-ico{display:flex;color:var(--ink-600)}
  .mnav-arrow{padding:6px 20px 0}
  .mnav-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:16px 20px 24px;border-top:1px solid var(--gray-200)}
  .mnav-cta{font-size:16px}
    .mnav.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}

}
  /* faq */
  .faq-item { border-bottom: 1px solid var(--gray-200); }
  .faq-item:first-child { border-top: 1px solid var(--gray-200); }
  .faq-q { width: 100%; background: transparent; border: none; text-align: left; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); min-height: 44px; }
  .faq-q-text { font-size: 17px; font-weight: 600; }
  .faq-icon { flex-shrink: 0; transition: transform .2s ease; }
  .faq-icon-open { transform: rotate(45deg); }
  .faq-a { padding: 0 0 22px; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-600); max-width: 720px; animation: popin .25s ease both; }

  .cta-sec { position: relative; overflow: hidden; background: var(--paper); padding: var(--section-gap) 0 96px; }
  .motif-enso { position: absolute; right: -140px; top: -60px; width: 520px; height: auto; opacity: .9; pointer-events: none; animation: spin 120s linear infinite; }
  .motif-bamboo { position: absolute; right: -20px; bottom: -180px; width: 300px; height: auto; opacity: .85; pointer-events: none; }
  .cta-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .cta-monk { width: 260px; height: auto; animation: float 6s ease-in-out infinite; }
  .cta-h { font-size: 52px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 0; }
  .btn-lg { min-height: 52px; padding: 13px 30px; font-size: 17px; }
  @media (max-width: 900px) { .motif-enso { width: 360px; right: -120px; opacity: .6; } .motif-bamboo { width: 200px; bottom: -100px; opacity: .6; } }
  @media (max-width: 640px) { .cta-h { font-size: 32px; line-height: 40px; } .cta-monk { width: 190px; } }
  .drift { animation: drift 12s ease-in-out infinite; }

  .site-footer { border-top: 1px solid var(--gray-200); position: relative; z-index: 1; background: var(--paper); }
  .foot-grid { padding: 56px 0 40px; display: grid; grid-template-columns: 320px repeat(4, minmax(0, 1fr)); gap: 40px; }
  .foot-brand { display: flex; flex-direction: column; gap: 12px; }
  .foot-brand img { height: 32px; width: auto; align-self: flex-start; }
  .foot-tag { font-size: 14px; color: var(--ink-600); }
  .foot-h { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
  .foot-link { display: block; font-size: 14px; color: var(--ink-600); line-height: 26px; }
  .foot-link:hover { color: var(--ink); }
  .foot-bottom { display: flex; justify-content: space-between; padding: 0 0 32px; font-size: 12px; color: var(--ink-500); gap: 16px; flex-wrap: wrap; }
  .foot-legal { display: flex; gap: 20px; }
  .foot-legal .foot-link { font-size: 12px; line-height: 16px; }
  @media (max-width: 1100px) { .foot-grid { grid-template-columns: 240px repeat(4, minmax(0, 1fr)); gap: 24px; } }
  @media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 40px 0 28px; } .foot-brand { grid-column: 1 / -1; } .foot-bottom { padding: 0 0 28px; flex-direction: column; gap: 10px; } }
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rv{transition-delay:var(--d,0ms)}


/* ===================== Guide: What is an agentic popup builder? (MKT-1749, direction A · the path) ===================== */
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow)}
.g-motif{position:absolute;pointer-events:none;user-select:none;height:auto;z-index:0}
.g-motif.rv{transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.g-motif.rv.in{opacity:var(--o,1)}

/* reading progress (all widths) */
.g-progress{position:fixed;left:0;top:var(--header-h);height:2px;width:100%;z-index:48;pointer-events:none;background:transparent}
.g-progress i{display:block;height:100%;width:100%;background:var(--orange);transform:scaleX(var(--p,0));transform-origin:0 50%}

/* hero */
.g-hero{position:relative;overflow:hidden;padding:72px 0 64px}
.g-hero .motif-pine{top:24px;left:-90px;height:440px;width:auto}
.g-hero .motif-bamboo{top:-8px;right:-50px;width:360px}
.g-hero-in{position:relative;z-index:1;max-width:860px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.g-hero .h1{margin:0;text-wrap:balance}
.g-hero .lead{max-width:640px;text-wrap:pretty}
.g-ul{position:relative;display:inline-block;color:var(--orange);white-space:nowrap}
.g-ul img{position:absolute;left:-3%;bottom:-.12em;width:106%;height:.3em;object-fit:fill;opacity:.7;z-index:-1;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) .55s}
.in .g-ul img,.g-ul.in img{clip-path:inset(0 0 0 0)}
.g-meta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:14px;color:var(--ink-500)}
.g-meta i{width:4px;height:4px;border-radius:50%;background:var(--ink-400)}

/* body grid */
.g-body{display:grid;grid-template-columns:13rem minmax(0,53rem);gap:4rem;justify-content:center;align-items:start;padding-bottom:40px}

/* toc: a stone path that fills as you read */
.g-toc{position:sticky;top:calc(var(--header-h) + 28px);font-size:14px;line-height:1.45}
.g-toc-h{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.g-toc-path{position:relative}
.g-toc ol{list-style:none;margin:0;padding:0}
.g-toc-path::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;border-left:2px dashed var(--gray-300)}
.g-toc-fill{position:absolute;left:5px;top:10px;width:2px;height:calc(var(--p,0) * (100% - 20px));background:var(--orange);border-radius:2px}
.g-toc li{position:relative;padding:5px 0 5px 24px}
.g-toc li::before{content:"";position:absolute;left:0;top:10px;width:12px;height:9px;border-radius:50%;background:var(--gray-300);transition:background .3s,transform .3s}
.g-toc li.on::before{background:var(--orange)}
.g-toc li.now::before{transform:scale(1.25)}
.g-toc a{color:var(--ink-500);font-weight:500;transition:color .2s}
.g-toc a:hover,.g-toc li.now a{color:var(--ink)}
.g-toc-cta{margin-top:28px;padding-top:20px;border-top:1px solid var(--gray-200);display:flex;flex-direction:column;gap:10px}
.g-toc-cta p{margin:0;font-size:13.5px;color:var(--ink-600)}
.g-toc-cta .btn{min-height:40px;padding:8px 16px;font-size:14px;align-self:flex-start}
.g-toc-cta .btn-primary,.g-toc-cta .btn-primary:hover{color:#fff}

/* mobile toc */
.g-mtoc{display:none;margin:0 0 36px;border:1px solid var(--gray-200);border-radius:var(--r-input);background:var(--white)}
.g-mtoc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:15px;font-weight:600}
.g-mtoc summary::-webkit-details-marker{display:none}
.g-mtoc summary svg{transition:transform .2s}
.g-mtoc[open] summary svg{transform:rotate(180deg)}
.g-mtoc ol{margin:0;padding:0 18px 16px 38px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.g-mtoc a{color:var(--ink-600)}

/* prose */
.g-art{font-size:18px;line-height:1.72;color:var(--ink-600)}
.g-art section{scroll-margin-top:calc(var(--header-h) + 24px)}
.g-art h2{font-size:34px;line-height:1.2;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:88px 0 18px;text-wrap:balance}
.g-art h3{font-size:22px;line-height:1.35;font-weight:600;color:var(--ink);margin:44px 0 12px;text-wrap:balance}
.g-art p{margin:0 0 20px}
.g-art strong,.g-art .lede{font-weight:600;color:var(--ink)}
.g-art ul{margin:0 0 22px;padding-left:22px}
.g-art li{margin:0 0 10px}
.g-art li::marker{color:var(--ink-400)}

/* definition */
.g-def{position:relative;overflow:hidden;padding:36px 38px 34px;margin:0 0 20px}
.g-def .enso{position:absolute;right:-70px;top:-60px;width:280px;opacity:.12;animation:spin 90s linear infinite}
.g-def .eyebrow{position:relative}
.g-def h2{position:relative;margin:10px 0 18px!important}
.g-def p{position:relative}
.g-def .big{font-size:20px;line-height:1.65;color:var(--ink);font-weight:400;margin:0 0 16px}
.g-def p:last-child{margin:0}

/* takeaways */
.g-take{padding:30px 32px;margin:16px 0 0}
.g-take h2{margin:0 0 6px!important}
.g-take .sub{margin:0 0 22px;font-size:15px;color:var(--ink-500)}
.g-take ol{list-style:none;margin:0;padding:0;counter-reset:tk;display:flex;flex-direction:column;gap:14px}
.g-take li{counter-increment:tk;display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;margin:0;font-size:16.5px;line-height:1.6}
.g-take li::before{content:counter(tk);display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-pill);background:var(--orange-100);color:var(--orange);font-size:13px;font-weight:600;margin-top:1px}
.g-take li{opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(200ms + var(--i) * 80ms)}
.g-take.in li{opacity:1;transform:none}

/* the three models at a glance */
.g-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 12px}
.g-model{padding:18px;display:flex;flex-direction:column;gap:10px;color:inherit;transition:transform .2s,border-color .2s}
.g-model:hover{transform:translateY(-2px);border-color:var(--gray-300);color:inherit}
.g-model .g-model-t{margin:0;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.g-model p{margin:0;font-size:14.5px;line-height:1.55}
.g-model .who{font-family:var(--mono);font-size:12px;color:var(--ink-500)}
.g-model.ag{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-100)}
.g-model.ag .who{color:var(--orange)}
.g-fig{height:96px;border-radius:10px;background:var(--paper);position:relative;overflow:hidden}
.fig-self .blk{position:absolute;border-radius:4px;background:var(--gray-200)}
.fig-self .b1{left:12px;top:12px;width:44%;height:22px}
.fig-self .b2{left:12px;top:40px;width:28%;height:14px}
.fig-self .b3{left:12px;top:60px;width:36%;height:20px;background:var(--gray-300)}
.fig-self .drag{left:62%;top:14px;width:26%;height:18px;background:var(--orange-100);border:1px dashed var(--orange);animation:g-drag 4.5s cubic-bezier(.16,1,.3,1) infinite}
.fig-self .cur{position:absolute;width:14px;height:14px;left:calc(62% + 20px);top:26px;animation:g-drag 4.5s cubic-bezier(.16,1,.3,1) infinite}
@keyframes g-drag{0%,15%{transform:translate(0,0)}55%,80%{transform:translate(-40px,50px)}100%{transform:translate(0,0)}}
.fig-man .tk{position:absolute;left:12px;right:12px;height:20px;border-radius:5px;background:var(--white);border:1px solid var(--gray-200);display:flex;align-items:center;gap:6px;padding:0 8px;font-size:10.5px;color:var(--ink-500);font-family:var(--mono);white-space:nowrap;overflow:hidden;animation:g-queue 6s linear infinite}
.fig-man .tk:nth-child(1){top:10px}
.fig-man .tk:nth-child(2){top:36px;animation-delay:-2s}
.fig-man .tk:nth-child(3){top:62px;animation-delay:-4s}
.fig-man .tk i{width:6px;height:6px;border-radius:50%;background:var(--ink-400);flex-shrink:0}
@keyframes g-queue{0%,45%,100%{opacity:1}50%,95%{opacity:.35}}
.fig-ag .pr{position:absolute;left:10px;right:46%;top:14px;height:20px;border-radius:5px;background:var(--white);border:1px solid var(--gray-200);overflow:hidden}
.fig-ag .pr::after{content:"";position:absolute;left:6px;top:8px;height:4px;border-radius:2px;background:var(--ink-400);width:0;animation:g-type 5s steps(12) infinite}
@keyframes g-type{0%{width:0}30%,100%{width:70%}}
.fig-ag .pp{position:absolute;right:10px;top:10px;width:38%;height:76px;border-radius:8px;background:var(--white);border:1px solid var(--gray-200);box-shadow:0 6px 16px rgba(16,24,40,.08);padding:9px;animation:g-land 5s cubic-bezier(.16,1,.3,1) infinite}
.fig-ag .pp b{display:block;height:6px;border-radius:3px;background:var(--ink);width:70%;margin-bottom:6px}
.fig-ag .pp s{display:block;height:4px;border-radius:2px;background:var(--gray-300);width:90%;margin-bottom:10px}
.fig-ag .pp u{display:block;height:12px;border-radius:4px;background:var(--orange);width:60%}
@keyframes g-land{0%,32%{opacity:0;transform:translateY(10px) scale(.94)}42%,90%{opacity:1;transform:none}100%{opacity:0}}

/* tables */
.g-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0 28px}
.g-tbl table{width:100%;min-width:40rem;border-collapse:collapse;font-size:15px;line-height:1.5}
.g-tbl th,.g-tbl td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid var(--gray-100);vertical-align:top}
.g-tbl thead th{white-space:nowrap;font-weight:600;color:var(--ink);border-bottom:1px solid var(--gray-200);padding-top:22px;vertical-align:bottom}
.g-tbl thead th:first-child,.g-tbl tbody th{padding-left:24px}
.g-tbl tbody th{font-weight:600;color:var(--ink);width:12rem}
.g-tbl td{color:var(--ink-600)}
.g-tbl tbody tr:last-child th,.g-tbl tbody tr:last-child td{border-bottom:0}
/* the agentic column is one soft band, padded on both sides, header included */
.g-tbl .ag{color:var(--ink);font-weight:500;background:#FFF6F2;padding-left:20px;padding-right:20px;border-bottom-color:#FBE3DA}
.g-tbl thead .ag{color:var(--orange);font-weight:600;border-bottom-color:#F8CDBB}
.g-tbl td.ag:last-child,.g-tbl th.ag:last-child{padding-right:24px}
.g-tbl tbody tr{opacity:0;transform:translateX(-8px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 70ms + 150ms)}
.g-tbl.in tbody tr{opacity:1;transform:none}

/* criteria as stepping stones; the dashed line fills with scroll */
.g-stones{position:relative;margin:34px 0 36px;padding:0 0 0 76px}
.g-stones-list{list-style:none;margin:0;padding:0}
.g-stones-line{position:absolute;left:25px;top:16px;bottom:24px;width:2px;background:repeating-linear-gradient(var(--gray-300) 0 6px,transparent 6px 13px)}
.g-stones-line i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);background:repeating-linear-gradient(var(--orange) 0 6px,transparent 6px 13px)}
.g-stone{position:relative;margin:0 0 30px}
.g-stone:last-child{margin-bottom:0}
.g-stone::before{content:attr(data-n);position:absolute;left:-76px;top:-2px;width:52px;height:40px;border-radius:50%/46%;background:var(--white);border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--ink-500);transition:background .4s,color .4s,border-color .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.g-stone.on::before{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.06)}
.g-stone h3{margin:0 0 6px!important;font-size:20px}
.g-stone p{margin:0 0 10px}
.g-test{display:flex;gap:14px;align-items:flex-start;margin:14px 0 0!important;font-size:17px;line-height:1.6;color:var(--ink);background:var(--orange-100);border:1px solid var(--orange-200);border-radius:var(--r-input);padding:14px 18px}
.g-test b{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;margin-top:1px;padding:3px 10px;border-radius:var(--r-pill);background:var(--white);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);line-height:20px}

/* MCP */
.g-mcp{display:flex;align-items:center;gap:10px;margin:0 0 20px;flex-wrap:wrap}
.g-mcp span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--gray-200);font-size:14px;font-weight:500;color:var(--ink)}
.g-mcp img{width:18px;height:18px}

/* washing checklist */
.g-check{padding:30px 32px;margin:0 0 26px}
.g-check h3{margin:0 0 18px!important}
.g-check ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.g-check li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;margin:0;font-size:16.5px;line-height:1.6}
.g-check svg{width:24px;height:24px;margin-top:2px}
.g-check svg circle{fill:var(--orange-100)}
.g-check svg path{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(250ms + var(--i) * 180ms)}
.g-check.in svg path{stroke-dashoffset:0}

/* flow */
.g-flow{list-style:none;margin:6px 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;align-items:center}
.g-flow li{display:flex;align-items:center;margin:0;font-size:14px;font-weight:500;color:var(--ink)}
.g-flow li span{padding:7px 14px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--gray-200);white-space:nowrap;transition:background .35s,border-color .35s,color .35s;transition-delay:calc(var(--i) * 120ms + 200ms)}
.g-flow li:not(:last-child)::after{content:"";width:18px;height:2px;margin:0 2px;background:repeating-linear-gradient(90deg,var(--orange) 0 4px,transparent 4px 7px)}
.g-flow.in li span{background:var(--orange-100);border-color:var(--orange-200)}
.g-flow.in li:last-child span{background:var(--orange);border-color:var(--orange);color:#fff}

/* transcript: the lines arrive one by one */
.g-chat{background:var(--dark-panel);border:1px solid var(--dark-border);border-radius:var(--r-card);padding:26px 28px;margin:0 0 28px;font-family:var(--mono);font-size:14px;line-height:1.8;color:var(--gray-200);position:relative;overflow:hidden}
.g-chat .bar{display:flex;gap:6px;margin:0 0 18px}
.g-chat .bar i{width:9px;height:9px;border-radius:50%;background:var(--dark-border)}
.g-chat p{margin:0 0 14px;display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px}
.g-chat p:last-child{margin-bottom:0}
.g-chat .who{color:var(--orange-hover);font-weight:500}
.g-chat .act{color:#9AA1AD}
.js-chat .g-chat p{opacity:0;transform:translateY(6px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.js-chat .g-chat p.on{opacity:1;transform:none}
.g-chat .typing{display:inline-flex;gap:4px;align-items:center;height:1.8em}
.g-chat .typing i{width:5px;height:5px;border-radius:50%;background:#9AA1AD;animation:pulse 1s infinite}
.g-chat .typing i:nth-child(2){animation-delay:.15s}
.g-chat .typing i:nth-child(3){animation-delay:.3s}

/* mechanism: coverage grid, 2 campaigns → 9 */
.g-cover{padding:24px 26px;margin:6px 0 26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center}
.g-cover-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.g-cover-grid span{aspect-ratio:1/1.1;max-width:100%;border-radius:8px;background:var(--gray-100);border:1px dashed var(--gray-300);transition:background .4s,border-color .4s,transform .4s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 90ms + 500ms)}
.g-cover-grid span.base{background:var(--ink-400);border:1px solid var(--ink-400);transition-delay:0ms}
.g-cover.in .g-cover-grid span{background:var(--orange);border:1px solid var(--orange);transform:translateY(-3px)}
.g-cover.in .g-cover-grid span.base{background:var(--ink);border-color:var(--ink);transform:none}
.g-cover-n{font-family:var(--mono);font-size:13px;color:var(--ink-500);text-align:right;white-space:nowrap}
.g-cover-n b{display:block;font-family:var(--font);font-size:34px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.g-cover-legend{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-500)}
.g-cover-legend span{display:inline-flex;align-items:center;gap:6px}
.g-cover-legend i{width:10px;height:10px;border-radius:3px;background:var(--ink)}
.g-cover-legend i.o{background:var(--orange)}

/* economics: the bundle collapses into one */
.g-bundle{padding:22px 24px;margin:6px 0 26px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.8fr);gap:18px;align-items:center}
.g-bundle-roles{display:flex;flex-wrap:wrap;gap:8px}
.g-bundle-roles span{padding:7px 12px;border-radius:var(--r-pill);background:var(--gray-100);font-size:14px;font-weight:500;color:var(--ink-600);transition:opacity .5s,text-decoration-color .5s;text-decoration:line-through;text-decoration-color:transparent;transition-delay:calc(var(--i) * 120ms + 300ms)}
.g-bundle.in .g-bundle-roles span{opacity:.55;text-decoration-color:var(--ink-400)}
.g-bundle-arrow{color:var(--orange)}
.g-bundle-to{padding:12px 16px;border-radius:var(--r-input);background:var(--orange-100);color:var(--ink);font-weight:600;font-size:15px;line-height:1.4;opacity:.4;transition:opacity .6s .9s}
.g-bundle-to small{display:block;font-weight:400;color:var(--ink-600);font-size:13px}
.g-bundle.in .g-bundle-to{opacity:1}

/* FAQ inside the article */
.g-faq{margin-top:8px}
.g-faq .faq-q-text{font-size:17px}

/* CTA: the homepage composer */
.g-cta{position:relative;overflow:hidden;padding:36px 36px 34px;margin-top:88px}
.g-cta .monk{position:absolute;right:18px;bottom:-6px;width:150px;height:auto;opacity:.95;animation:float 6s ease-in-out infinite}
.g-cta h2{margin:0 0 10px!important;font-size:30px;position:relative;max-width:40rem}
.g-cta>p{position:relative;margin:0 0 24px;font-size:17px;max-width:40rem}
.g-comp{position:relative;border:1px solid var(--gray-300);border-radius:var(--r-input);background:var(--white);padding:8px;max-width:560px}
.g-comp textarea{display:block;width:100%;min-height:64px;border:0;background:transparent;resize:none;padding:10px 12px 4px;font:inherit;font-size:16px;line-height:24px;color:var(--ink);outline:none}
.g-comp-bar{display:flex;align-items:center;justify-content:space-between;padding:4px}
.g-comp-attach{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:14px;font-weight:500;color:var(--ink-600)}
.g-comp-send{border:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 18px;border-radius:var(--r-btn);background:var(--orange);color:#fff;font-size:15px;font-weight:600}
.g-comp-send:hover{background:var(--orange-hover);color:#fff}
.g-chips{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-width:560px}
.g-chips button{min-height:36px;padding:6px 14px;border-radius:var(--r-btn);border:1px solid var(--gray-200);background:var(--white);font-size:14px;font-weight:500;color:var(--ink);transition:border-color .15s}
.g-chips button:hover{border-color:var(--orange)}
.g-cta .g-note{position:relative;margin:24px 0 0;font-size:14px;color:var(--ink-500)}
/* the composer runs the full width above the monk; only the chip row keeps clear of him */
.g-comp{max-width:none}
@media (min-width:768px){.g-chips{max-width:calc(100% - 170px)}}

/* responsive */
@media (max-width:1059px){
  .g-body{grid-template-columns:minmax(0,1fr);gap:0;max-width:53rem}
  .g-toc{display:none}
  .g-mtoc{display:block}
}
@media (max-width:767px){
  .g-hero{padding:40px 0 40px}
  .g-hero .motif-pine{height:260px;left:-130px;opacity:.3}
  .g-hero .motif-bamboo{width:170px;right:-60px;top:-20px}
  .g-art{font-size:17px}
  .g-art h2{font-size:28px;margin-top:64px}
  .g-art h3{font-size:20px;margin-top:36px}
  .g-def,.g-take,.g-check,.g-cta{padding:24px 20px}
  .g-def .big{font-size:18px}
  .g-models{grid-template-columns:minmax(0,1fr)}
  .g-stones{padding-left:64px}
  .g-stone::before{left:-64px;width:44px;height:34px}
  .g-stones-line{left:21px}
  .g-test{flex-direction:column;gap:8px;font-size:16px;padding:14px 16px}
  .g-chat{padding:20px 18px;font-size:13px}
  .g-chat p{grid-template-columns:minmax(0,1fr);gap:0}
  .g-cover{grid-template-columns:minmax(0,1fr)}
  .g-cover-grid{gap:5px}
  .g-cover-n{text-align:left}
  .g-bundle{grid-template-columns:minmax(0,1fr)}
  .g-bundle-arrow{transform:rotate(90deg);justify-self:start}
  .g-cta .monk{position:relative;right:auto;bottom:auto;width:140px;margin:0 0 8px}
  .g-cta h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .g-def .enso,.g-cta .monk,.fig-self .drag,.fig-self .cur,.fig-man .tk,.fig-ag .pr::after,.fig-ag .pp{animation:none!important}
  .fig-ag .pr::after{width:70%}
  .g-ul img{clip-path:none;transition:none}
  .g-take li,.g-tbl tbody tr,.js-chat .g-chat p{opacity:1!important;transform:none!important;transition:none!important}
  .g-check svg path{stroke-dashoffset:0;transition:none}
  .g-flow li span,.g-cover-grid span,.g-bundle-roles span,.g-bundle-to{transition:none}
  .g-progress{display:none}
}

/* ===== live demo in the definition card (homepage #demo, OT-1665; styles copied from the RC styles.css) ===== */
:root{--admin-page:#F9FAFB;--r-window:20px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 14px;border-radius:var(--r-btn);border:1px solid var(--gray-200);background:var(--white);color:var(--ink);font-size:14px;font-weight:500;cursor:pointer;transition:background 140ms ease,border-color 140ms ease,color 140ms ease;white-space:nowrap}
.chip:hover{border-color:var(--gray-300);background:#FAFAFA}
.g-demo{position:relative;margin:30px 0 0;display:flex;flex-direction:column;gap:14px}
.g-demo figcaption{text-align:center;font-size:14px;line-height:1.5;color:var(--ink-500)}
.ds-tabs{display:flex;gap:8px;justify-content:center;max-width:100%}
.ds-tab{flex-direction:column;align-items:stretch;gap:6px;min-width:112px;min-height:44px;padding:8px 18px 9px;font-size:14px;color:var(--ink-600)}
.ds-tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ds-tab[aria-selected="true"]:hover{background:var(--ink);border-color:var(--ink)}
.ds-tab-label{text-align:center;line-height:20px}
.ds-tab-bar{display:block;height:3px;border-radius:3px;background:var(--gray-100);overflow:hidden}
.ds-tab[aria-selected="true"] .ds-tab-bar{background:rgba(255,255,255,.22)}
.ds-tab-fill{display:block;height:100%;border-radius:3px;background:var(--orange);transform:scaleX(0);transform-origin:0 50%}
.ds-win{position:relative;border-radius:14px;border:1px solid var(--gray-200);background:var(--white);overflow:hidden;overflow:clip;box-shadow:0 12px 32px -18px rgba(35,38,42,.35)}
.ds-winbar{height:24px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--gray-100);border-bottom:1px solid var(--gray-200)}
.ds-winbar i{width:8px;height:8px;border-radius:50%;background:var(--gray-300)}
.ds-vp{position:relative;width:100%;aspect-ratio:1280/800;overflow:hidden;overflow:clip;background:var(--admin-page)}
@media (max-width:599px){.ds-vp{aspect-ratio:1/1}}
@media (max-width:599px) and (prefers-reduced-motion:reduce){.ds-vp{aspect-ratio:1280/800}}
/* the window settles as it scrolls in (the homepage's view() timeline); without support it simply sits at rest */
@keyframes g-settle{from{opacity:.55;transform:scale(1.04) translateY(22px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){.g-settle{animation:g-settle linear both;animation-timeline:view();animation-range:entry 10% entry 70%}}
@media (max-width:599px){.ds-tabs{gap:6px;width:100%}.ds-tab{flex:1 1 0;min-width:0;padding:7px 10px 8px;font-size:13px}.ds-win{border-radius:12px}.g-demo{margin-top:22px}}
@media (prefers-reduced-motion:reduce){.g-settle{animation:none!important}}

/* ===== the three models as matching spec sheets: same four rows, same order ===== */
.g-spec{padding:26px 30px 10px;margin:0 0 16px;scroll-margin-top:calc(var(--header-h) + 24px)}
.g-spec h3{margin:0 0 6px!important;font-size:22px}
.g-spec h3 span{font-weight:500;color:var(--ink-500)}
.g-spec.ag{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-100)}
.g-spec.ag h3 span{color:var(--orange)}
.g-spec dl{margin:0}
.g-spec dl>div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid var(--gray-100)}
.g-spec dl>div:first-child{border-top:0}
.g-spec dt{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);padding-top:4px}
.g-spec dd{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink-600)}
@media (max-width:767px){.g-spec{padding:22px 20px 6px}.g-spec h3{font-size:20px}.g-spec dl>div{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0}.g-spec dd{font-size:16px}}

/* in-text links: brand orange, underlined so they read as links in running text */
.g-art p a,.g-art dd a{color:var(--orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(237,90,41,.4)}
.g-art p a:hover,.g-art dd a:hover{text-decoration-color:var(--orange)}

/* ===== CTA prompt box states (the live StartPromptBox behaviour) ===== */
.g-comp-attach{border:0;background:transparent;cursor:pointer;border-radius:var(--r-btn)}
.g-comp-attach:hover{color:var(--ink)}
.g-comp-send{cursor:pointer;transition:background .15s,opacity .15s}
.g-comp-send:disabled{opacity:.45;cursor:not-allowed}
.g-comp-send:disabled:hover{background:var(--orange)}
.g-spin{display:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .8s linear infinite}
.g-comp-send.is-busy .g-spin{display:inline-block}
.g-thumbs{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 2px}
.g-thumb{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid var(--gray-200);background:var(--gray-100);flex-shrink:0}
.g-thumb img{width:100%;height:100%;object-fit:cover}
.g-thumb.is-up::after{content:"";position:absolute;inset:0;background:rgba(35,38,42,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.2-8.6'/%3E%3C/svg%3E") center/18px no-repeat}
.g-thumb button{position:absolute;top:3px;right:3px;z-index:1;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:20px;padding:0;cursor:pointer}
.g-thumb button:hover{background:rgba(0,0,0,.8)}
.g-cta .g-err{margin:4px 12px 0;font-size:13px;color:#C0392B}
.g-thumbs[hidden],.g-cta .g-err[hidden]{display:none}