/* ============================================================
   Upbuild v2 : the platform site
   Loaded AFTER main.css. It reuses every token, font and button
   from main.css and adds only what the platform pages need:
   the inset header, the app demo window, the manifesto deck,
   the alternating feature rack, and the solution page furniture.
   No em dashes anywhere in this file, by owner rule.
   ============================================================ */

:root{
  --v2-side: 24px;          /* how far the inset header sits off each edge */
  --v2-top: 14px;           /* and off the top */
  --v2-barh: 62px;
  /* the vertical space the fixed header takes out of the page: the height of
     the first block's transparent top border (see body.v2 main > :first-child) */
  --v2-navspace: calc(var(--v2-barh) + var(--v2-top) + 8px);
  --v2-sec: clamp(72px, 8vw, 118px);   /* vertical rhythm between sections */
}

/* the open drawer locks the page; the scrollbar's lane stays reserved, so
   locking never widens the page and nothing shifts sideways */
html{ scrollbar-gutter:stable; }
html.v2-lock{ overflow:hidden; }
body.v2{ background:var(--card); }

/* main.css underlines every link on hover. That is right for a link in a
   sentence and wrong for a whole card that happens to be one: the underline
   propagates into the heading and the body copy. Every card-shaped link opts
   out, itself and its descendants. */
body.v2 a.deck-card,body.v2 a.deck-card:hover,body.v2 a.deck-card *,
body.v2 a.llm,body.v2 a.llm:hover,body.v2 a.llm *,
body.v2 .v2pan a,body.v2 .v2pan a:hover,body.v2 .v2pan a *,
body.v2 a.feat-cta,body.v2 a.feat-cta:hover,
body.v2 .v2nav a,body.v2 .v2nav a:hover,
body.v2 .v2drawer a,body.v2 .v2drawer a:hover,
body.v2 a.btn,body.v2 a.btn:hover{ text-decoration:none; }
/* the hero's dotted chips: two to a row, each column as wide as its longest chip,
   with room to wrap inside a column on a narrow phone */
body.v2 .trust-chips{ display:grid; grid-template-columns:repeat(2, minmax(0, max-content)); row-gap:11px; column-gap:24px; }
body.v2 .trust-chips li{ line-height:1.35; align-items:flex-start; }
/* the dot sits on the first line when a chip wraps on a phone */
body.v2 .trust-chips li::before{ flex:none; margin-top:calc(.675em - 3px); }
/* The header floats (fixed), so the page leaves room for it. That room used to
   be main's top padding, which showed the body's white around the header above
   every gray first section. The first block now runs up under the header
   instead, through a transparent top border of the same height: a background
   paints under its own border, so the band around the pill is always the
   colour of the section below it, on every page. */
body.v2:not(.legacy) main > :first-child{ border-top:var(--v2-navspace) solid transparent; }
/* The older pages (blog, data reference, setup, enterprise, legal, 404) carry the same
   header, stamped in by build-v2.py. Their first block is marked .v2-first and takes the
   header's room the same way; linked headings land below the bar, and the data
   reference's search bar sticks just under it. */
body.v2.legacy .v2-first{ border-top:var(--v2-navspace) solid transparent; }
body.v2.legacy [id]{ scroll-margin-top:calc(var(--v2-navspace) + 12px); }
body.v2.legacy .ftoolbar{ top:calc(var(--v2-top) + var(--v2-barh) + 10px); }
/* The demo page is one screen: the header, the form centred in what is left, and the
   landers' compact dark footer at the bottom (build-v2.py "foot": "lander"). */
body.v2.fit{ display:flex; flex-direction:column; min-height:100svh; }
body.v2.fit > main{ flex:1 0 auto; display:flex; flex-direction:column; }
body.v2.fit > main > .dm-sec{ flex:1 0 auto; min-height:0; }
body.v2.fit .lp-foot{ flex:none; }
@media (max-height:860px) and (min-width:901px){
  body.v2.fit .dm-sec{ padding-block:14px; }
  body.v2.fit .lp-foot{ padding-block:12px 10px; }
  body.v2.fit .lp-foot .lp-plat{ margin-top:10px; }
  body.v2.fit .lp-foot .lp-plat img{ height:22px; }
  body.v2.fit .lp-legal{ margin-top:12px; }
}
@media (max-height:740px) and (min-width:901px){
  body.v2.fit .dm-card{ padding:22px 28px; }
  body.v2.fit .dm-form{ gap:12px; }
  body.v2.fit .dm-f input{ height:42px; }
  body.v2.fit .dm-sub{ margin-bottom:16px; }
}

/* ============================================================
   THE FIRST FOLD
   The hero and the platform strip together are exactly one
   screen, whatever the screen is, with the dark strip landing on
   the fold and the copy and demo centred in what is left above
   it. svh, not vh, so a mobile browser's collapsing toolbar does
   not push the strip out of sight on load.
   ============================================================ */
.v2fold{
  /* a full screen: the header's band is its own top border (border-box) */
  min-height:100svh;
  display:flex; flex-direction:column;
}
.v2fold > .v2hero{
  /* grow to fill the fold, but never shrink below the copy: on a very short
     screen the fold gives up and the strip drops just under it, which is the
     right failure. Clipping the headline would not be. */
  flex:1 0 auto; display:flex; align-items:center;
}
.v2fold > .v2hero > .wrap{ width:100%; }
.v2fold > .plat-band{ flex:none; }
/* the platform strip on the fold: taller, with bigger marks (owner, 10 Sep). The hero
   above centres its copy and demo in whatever height is left, so it re-centres itself */
@media (min-width:1081px){
  body.v2 .plat-band{ padding-block:26px 30px; }
  body.v2 .plat-band .lp-plat-eyebrow{ margin-bottom:18px; }
  body.v2 .plat-band .lp-plat-eyebrow span{ font-size:.68rem; }
  body.v2 .plat-band .lp-plat{ gap:clamp(20px,3.3vw,52px); }
  body.v2 .plat-band .lp-plat img{ height:34px; }
}

/* ============================================================
   1. THE INSET HEADER
   A narrowed bar that floats inside the page margins instead of
   spanning edge to edge, the ObservePoint move the owner asked for.
   ============================================================ */
.v2nav{
  position:fixed; top:var(--v2-top); left:var(--v2-side); right:var(--v2-side);
  z-index:80;
  max-width:calc(var(--maxw) + 48px); margin-inline:auto;
  height:var(--v2-barh);
  display:flex; align-items:center; gap:18px;
  padding:0 10px 0 20px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  box-shadow:0 1px 2px rgba(14,21,38,.04), 0 12px 34px -18px rgba(14,21,38,.22);
  transition:box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.v2nav.stuck{
  background:rgba(255,255,255,.95);
  border-color:var(--line-strong,#C6CDDD);
  box-shadow:0 2px 6px rgba(14,21,38,.06), 0 20px 46px -22px rgba(14,21,38,.32);
}
.v2nav .logo{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  font:800 1.06rem/1 var(--fd); color:var(--ink); text-decoration:none; letter-spacing:-.01em;
}
.v2nav .logo img,.v2nav .logo .mark{ width:28px; height:28px; }

/* --- the menu --- */
.v2menu{ display:flex; align-items:center; gap:2px; margin-right:auto; }
.v2menu > li{ position:relative; list-style:none; }
.v2menu > li > a,
.v2menu > li > button{
  display:inline-flex; align-items:center; gap:5px;
  font:500 .875rem/1 var(--fb); color:var(--text);
  background:none; border:0; cursor:pointer;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  transition:background .14s ease, color .14s ease;
}
.v2menu > li > a:hover,
.v2menu > li > button:hover,
.v2menu > li.open > button{ background:#EEF1F6; color:var(--ink); }
.v2menu > li > button .cv{ width:11px; height:11px; flex:none; transition:transform .16s ease; }
.v2menu > li.open > button .cv{ transform:rotate(180deg); }
.v2menu > li > a[aria-current]{ color:var(--pos-deep); }

/* --- the dropdown panel --- */
.v2pan{
  position:absolute; top:calc(100% + 10px); left:-8px;
  width:344px; padding:10px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 44px rgba(14,21,38,.16);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
li.open > .v2pan{ opacity:1; visibility:visible; transform:none; }
.v2pan .lab{
  display:block; font:500 .64rem/1 var(--fm); letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); padding:8px 10px 10px;
}
.v2pan a{
  display:flex; align-items:flex-start; gap:11px;
  padding:9px 10px; border-radius:12px; text-decoration:none;
  transition:background .12s ease;
}
.v2pan a:hover{ background:#EEF1F6; }
.v2pan a .ic{
  flex:none; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  background:var(--pos-soft); color:var(--pos-deep);
}
.v2pan a .ic svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* The assistant marks are solid silhouettes, not line icons. The rule above is
   for our own stroked glyphs and, being CSS, it beat the fill="currentColor"
   attribute on the markup: every brand mark came out as a thin outline and
   Copilot, which is one solid shape, came out blank. */
.v2pan a .ic.mcp svg{ fill:currentColor; stroke:none; }
.v2pan a b{ display:block; font:600 .875rem/1.3 var(--fb); color:var(--ink); }
.v2pan a span{ display:block; font:400 .78rem/1.45 var(--fb); color:var(--slate); margin-top:2px; }
.v2pan a > span > span{ min-height:calc(2 * 1.45 * .78rem); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* every menu row two lines tall (owner, 2026-09-11) */
.v2pan a .ic.mcp{ background:#F3EFFE; color:#6D28D9; }
.v2pan .sep{ height:1px; background:var(--line); margin:8px 10px; }
.v2pan .foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; margin:2px 0 0;
  font:500 .78rem/1.3 var(--fb); color:var(--pos-deep);
  background:var(--pos-soft); border-radius:12px; text-decoration:none;
}
.v2pan .foot:hover{ background:#CBF7EB; }
/* the connector panel is violet throughout, its footer link included */
.v2pan .foot.mcp{ color:#6D28D9; background:#F3EFFE; }
.v2pan .foot.mcp:hover{ background:#E7DEFB; }

/* --- the CTA cluster --- */
.v2cta{ display:flex; align-items:center; gap:8px; flex:none; }
.v2cta .lin{
  display:inline-flex; align-items:center; gap:7px;
  font:500 .875rem/1 var(--fb); color:var(--text); text-decoration:none;
  padding:10px 12px; border-radius:10px;
}
.v2cta .lin:hover{ background:#EEF1F6; color:var(--ink); }
/* a drawn padlock, not a glyph from a font: it keeps its weight next to the
   14px label at every zoom and never falls back to a box */
.v2cta .lin svg{
  width:14px; height:14px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.v2cta .btn{ padding:10px 16px; font-size:.85rem; }
.v2burger{ display:none; }
.v2drawer{ display:none; }

/* ============================================================
   2. HERO
   ============================================================ */
.v2hero{ padding:clamp(20px,4vh,52px) 0 clamp(24px,4vh,56px); }
.v2hero-grid{
  display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(30px,7.5vw,110px); align-items:center;
}
.v2hero h1{
  font:800 clamp(2.4rem,4.8vw,3.85rem)/1.04 var(--fd);
  letter-spacing:-.028em; color:var(--ink); margin:.5rem 0 1rem;
}
/* the marker highlight must never break across two lines: half a stripe on the
   end of one line and half on the start of the next reads as a mistake */
.v2hero h1 .hl,.sol-hero h1 .hl{ white-space:nowrap; }
.v2hero .lead{
  font:400 clamp(.99rem,1.14vw,1.08rem)/1.62 var(--fb);
  color:var(--slate); max-width:30em; margin:0 0 1.5rem;
}
.v2hero .hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:1.35rem; }

/* ============================================================
   3. THE APP DEMO WINDOW
   Mirrors app.upbuild.app. Fixed height, never resizes.
   ============================================================ */
.ap-wrap{ display:flex; flex-direction:column; }
.ap-win{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
  height:clamp(380px,60vh,532px);
  box-shadow:0 30px 74px -24px rgba(9,16,32,.4), 0 2px 6px rgba(9,16,32,.06);
}
.ap-bar{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:10px 13px; background:#F6F7FB; border-bottom:1px solid var(--line);
}
.ap-lights{ display:inline-flex; gap:6px; }
.ap-lights i{ width:9px; height:9px; border-radius:50%; background:#D6DBE6; }
.ap-lights i:first-child{ background:#E6B0A6; }
.ap-lights i:nth-child(2){ background:#E8CFA0; }
.ap-lights i:last-child{ background:#A9DFC9; }
.ap-url{
  font:400 .7rem/1 var(--fm); color:var(--faint);
  background:var(--card); border:1px solid var(--line);
  padding:5px 12px; border-radius:var(--radius-pill); margin-left:4px;
}
.ap-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font:500 .64rem/1 var(--fm); letter-spacing:.06em; color:var(--pos-deep);
  background:var(--pos-soft); border:1px solid #B9F3E6;
  padding:5px 9px; border-radius:var(--radius-pill);
}
.ap-live i{ width:6px; height:6px; border-radius:50%; background:var(--pos-deep); animation:pulse 1.8s infinite; }

.ap-shell{ flex:1; min-height:0; display:grid; grid-template-columns:122px minmax(0,1fr); }
.ap-side{
  background:#F6F7FB; border-right:1px solid var(--line);
  padding:10px 7px; display:flex; flex-direction:column; gap:10px; min-width:0;
}
.ap-org{ display:flex; align-items:center; gap:8px; padding:2px 6px 0; min-width:0; }
.ap-org .av{
  width:19px; height:19px; border-radius:6px; flex:none;
  background:var(--pos-soft); color:var(--pos-deep);
  display:grid; place-items:center; font:700 .58rem/1 var(--fd);
}
.ap-org b{ display:block; font:600 .67rem/1.1 var(--fb); color:var(--ink); }
.ap-org span{ display:block; font:500 .48rem/1 var(--fm); letter-spacing:.1em; color:var(--faint); margin-top:2px; }
.ap-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.ap-nav li{
  display:flex; align-items:center; gap:6px;
  font:500 .66rem/1 var(--fb); color:var(--slate);
  padding:6px 7px; border-radius:7px; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.ap-nav li i{ width:4px; height:4px; border-radius:50%; background:var(--line-strong,#C6CDDD); flex:none; transition:background .2s ease; }
.ap-nav li.on{ background:var(--pos-soft); color:var(--pos-deep); font-weight:600; }
.ap-nav li.on i{ background:var(--pos-deep); }

.ap-main{ min-width:0; display:flex; flex-direction:column; }
.ap-head{ flex:none; padding:11px 15px 8px; border-bottom:1px solid var(--line); }
.ap-head .ap-eb{
  display:block; font:500 .52rem/1 var(--fm); letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); margin-bottom:4px;
}
.ap-head h3{ font:800 .88rem/1.1 var(--fd); color:var(--ink); margin:0; letter-spacing:-.012em; }

.ap-body{
  flex:1; min-height:0; contain:size; overflow:hidden;
  /* no overscroll-behavior here: the body is a scroll port (overflow:hidden
     still makes one), and "none" stopped the wheel chaining to the page, so
     the page froze whenever the pointer was over the demo */
  padding:12px 15px 13px; display:flex; flex-direction:column; gap:9px;
  transition:opacity .34s ease;
}
.ap-body.ap-out{ opacity:0; }
.ap-body > *{ flex:none; }
.ap-fade{ animation:apin .34s ease both; }
@keyframes apin{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }

/* CSP note: style-src is 'self' with no unsafe-inline, so a style="" attribute
   in markup is dropped by the browser. Everything below exists because of that:
   no page or scene may carry an inline style, only a class, or a value written
   from JS through the CSSOM, which CSP does allow. */
.ap-q.wide{ max-width:100%; margin-bottom:12px; }
.shot .sub.after{ margin:12px 0 0; }
.ap-leg i.c1{ background:var(--pos-bright); }
.ap-leg i.c2{ background:#D6DBE6; }
.ap-legend i.k1{ background:var(--pos-bright); }
.ap-legend i.k2{ background:var(--pos); }
.ap-legend i.k3{ background:var(--pos-deep); }
.ap-legend i.k4{ background:var(--line-strong,#C6CDDD); }
.ap-donut{ --g:conic-gradient(var(--pos-bright) 0 23.4%, var(--pos) 23.4% 40.6%, var(--pos-deep) 40.6% 54.9%, var(--line-strong,#C6CDDD) 54.9% 100%); }

/* the chart's values, as classes, applied when the container gains .go */
.ap-bars.go i.h31{ height:31%; }
.ap-bars.go i.h42{ height:42%; }
.ap-bars.go i.h44{ height:44%; }
.ap-bars.go i.h47{ height:47%; }
.ap-bars.go i.h51{ height:51%; }
.ap-bars.go i.h52{ height:52%; }
.ap-bars.go i.h55{ height:55%; }
.ap-bars.go i.h61{ height:61%; }
.ap-bars.go i.h63{ height:63%; }
.ap-bars.go i.h66{ height:66%; }
.ap-bars.go i.h74{ height:74%; }
.ap-bars.go i.h91{ height:91%; }
.ap-rank.go u.w32::after{ width:32%; }
.ap-rank.go u.w56::after{ width:56%; }
.ap-rank.go u.w68::after{ width:68%; }
.ap-rank.go u.w92::after{ width:92%; }

.ap-qrow{ align-self:flex-end; display:flex; align-items:flex-end; gap:7px; max-width:86%; }
.ap-q{
  background:var(--pos-soft); color:var(--ink);
  font:400 .74rem/1.5 var(--fb);
  padding:8px 11px; border-radius:12px 12px 4px 12px;
}
/* the asker's monogram. Violet is the identity colour in the product's own
   design system, so people read as people and never as a state. */
.ap-av{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font:600 .52rem/1 var(--fm); letter-spacing:.02em; color:#fff;
  background:var(--ink-3,#20294A);
}
.ap-av.p2{ background:#6D28D9; }
.ap-av.p3{ background:var(--pos-deep); }
.ap-a{ align-self:flex-start; max-width:96%; }
.ap-badge{
  display:block; width:-moz-fit-content; width:fit-content;
  font:500 .5rem/1 var(--fm); letter-spacing:.1em; text-transform:uppercase;
  color:#071018; background:var(--pos-bright);
  padding:3px 6px; border-radius:4px; margin-bottom:6px;
}
.ap-a p{ font:400 .74rem/1.6 var(--fb); color:var(--text); margin:0 0 7px; }
.ap-a p.ap-gap{ margin-top:8px; color:var(--slate); }
.ap-a strong{ font-weight:600; color:var(--ink); }
.ap-work{
  display:inline-flex; align-items:center; gap:8px;
  font:400 .56rem/1 var(--fm); color:var(--faint);
  background:#F6F7FB; border:1px solid var(--line);
  padding:5px 9px; border-radius:var(--radius-pill);
}
.ap-dots3{ display:inline-flex; gap:3px; }
.ap-dots3 i{ width:3px; height:3px; border-radius:50%; background:var(--pos); animation:apbounce 1s infinite; }
.ap-dots3 i:nth-child(2){ animation-delay:.15s } .ap-dots3 i:nth-child(3){ animation-delay:.3s }
@keyframes apbounce{ 0%,60%,100%{ opacity:.28 } 30%{ opacity:1 } }

.ap-mono{
  font:400 .67rem/1.4 var(--fm); color:var(--pos-deep);
  background:var(--pos-soft); padding:1px 4px; border-radius:4px;
}
.ap-chip{
  display:inline-block; font:500 .63rem/1.4 var(--fm); color:var(--pos-deep);
  background:var(--pos-soft); border:1px solid #B9F3E6;
  padding:2px 6px; border-radius:5px; margin:0 2px;
}
.ap-chip.v{ color:#3F3AA8; background:#EEEEFC; border-color:rgba(63,58,168,.25); }
.ap-pill{
  display:inline-block; font:500 .5rem/1 var(--fm); letter-spacing:.07em;
  padding:3px 7px; border-radius:var(--radius-pill);
  color:var(--slate); background:#EEF1F6;
}
.ap-pill.ok{ color:var(--pos-deep); background:var(--pos-soft); }

.ap-tbl{
  width:100%; table-layout:fixed; border-collapse:collapse;
  font:400 .65rem/1.35 var(--fm);
  background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.ap-tbl th{
  color:var(--faint); font-weight:500; text-align:left; padding:6px 8px;
  background:#FAFBFD; border-bottom:1px solid var(--line);
  white-space:nowrap; font-size:.55rem; letter-spacing:.06em; text-transform:uppercase;
}
.ap-tbl td{ color:var(--text); padding:6px 8px; border-bottom:1px solid #F0F2F7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-tbl tr:last-child td{ border-bottom:0; }
.ap-tbl .n{ text-align:right; font-variant-numeric:tabular-nums; }

.ap-donut-row{ display:flex; align-items:center; gap:16px; }
.ap-donut{
  flex:none; width:96px; height:96px; border-radius:50%;
  background:var(--g); display:grid; place-content:center; text-align:center; position:relative;
}
.ap-donut::after{
  content:""; position:absolute; inset:19px; border-radius:50%; background:var(--card);
}
.ap-donut b,.ap-donut span{ position:relative; z-index:1; }
.ap-donut b{ display:block; font:700 .92rem/1 var(--fd); color:var(--ink); }
.ap-donut span{ display:block; font:500 .54rem/1 var(--fm); letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin-top:3px; }
.ap-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; min-width:0; }
.ap-legend li{ display:flex; align-items:center; gap:7px; font:400 .72rem/1.2 var(--fb); color:var(--text); }
.ap-legend i{ width:8px; height:8px; border-radius:2px; flex:none; }
.ap-legend em{ font:500 .68rem/1 var(--fm); color:var(--faint); font-style:normal; margin-left:auto; padding-left:10px; }

/* THE DASHBOARD STILL
   Modelled on a real published Upbuild report: a wordmark header, a filter
   row, KPI tiles with their own sparkline, a chart pair and a ranked list.
   Two of them, one layered behind the other, so it reads as a set of boards
   rather than a single screenshot. Everything is drawn small on purpose. */
.ap-stack{ position:relative; padding:9px 9px 0 0; }
.ap-stack .ap-dash.back{
  position:absolute; left:9px; right:0; top:0; bottom:14px; z-index:0;
  transform:rotate(-1.4deg); transform-origin:bottom left;
}
.ap-stack .ap-dash.front{ position:relative; z-index:1; }

.ap-dash{
  background:var(--card); border:1px solid var(--line); border-radius:9px;
  overflow:hidden; box-shadow:0 1px 2px rgba(14,21,38,.05), 0 10px 24px -14px rgba(14,21,38,.3);
}
.ap-dash-top{
  display:flex; align-items:center; gap:8px;
  padding:7px 9px; background:#FAFBFD; border-bottom:1px solid var(--line);
}
.ap-dash-mark{
  flex:none; width:13px; height:13px; border-radius:4px;
  background:var(--ink); position:relative;
}
.ap-dash-mark::after{
  content:""; position:absolute; inset:4px 4px 3px; border-radius:1px;
  background:var(--pos-bright);
}
.ap-dash-top span{
  font:700 .64rem/1.2 var(--fd); color:var(--ink); letter-spacing:.06em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ap-dash-top em{
  margin-left:auto; font:500 .46rem/1 var(--fm); color:var(--pos-deep);
  font-style:normal; white-space:nowrap;
  background:var(--pos-soft); border-radius:var(--radius-pill); padding:3px 6px;
}
.ap-dash-in{ padding:8px 9px 9px; }

/* the report's own title block */
.ap-dash-title{ text-align:center; margin-bottom:8px; }
.ap-dash-title b{ display:block; font:800 .78rem/1.15 var(--fd); color:var(--ink); }
.ap-dash-title i{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font:500 .4rem/1 var(--fm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pos-deep); font-style:normal; margin-top:4px;
}
.ap-dash-title i::before,.ap-dash-title i::after{
  content:""; width:26px; height:1px; background:var(--pos);
}

/* the filter row */
.ap-filters{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-bottom:7px; }
.ap-filters span{
  display:flex; align-items:center; justify-content:space-between; gap:4px;
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:4px 5px; font:500 .4rem/1 var(--fm); letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); overflow:hidden;
}
.ap-filters span em{ font-style:normal; color:var(--text); letter-spacing:0; text-transform:none; }

/* KPI tiles, each with a sparkline */
.ap-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-bottom:7px; }
.ap-kpis div{ background:#FAFBFD; border:1px solid var(--line); border-radius:5px; padding:5px 6px; overflow:hidden; }
.ap-kpis span{ display:block; font:500 .4rem/1 var(--fm); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.ap-kpis b{ display:block; font:700 .76rem/1.15 var(--fd); color:var(--ink); margin-top:2px; }
.ap-spark{ display:flex; align-items:flex-end; gap:1px; height:11px; margin-top:4px; }
.ap-spark i{ flex:1; background:var(--pos-bright); border-radius:1px; }
.ap-spark i:nth-child(1){ height:38% } .ap-spark i:nth-child(2){ height:56% }
.ap-spark i:nth-child(3){ height:44% } .ap-spark i:nth-child(4){ height:72% }
.ap-spark i:nth-child(5){ height:60% } .ap-spark i:nth-child(6){ height:86% }
.ap-spark i:nth-child(7){ height:70% } .ap-spark i:nth-child(8){ height:100% }
.ap-spark.rev{ flex-direction:row-reverse; }
.ap-spark.mid i:nth-child(2n){ height:40% }
.ap-spark.mid i:nth-child(3n){ height:92% }

/* the chart pair */
.ap-panes{ display:grid; grid-template-columns:1.35fr 1fr; gap:5px; }
.ap-pane{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 7px; min-width:0; }
.ap-pane h5{
  font:600 .48rem/1.2 var(--fb); color:var(--ink); margin:0 0 1px;
  display:flex; align-items:center; gap:5px;
}
.ap-pane h5 u{
  text-decoration:none; font:500 .38rem/1 var(--fm); letter-spacing:.08em;
  color:var(--pos-deep); background:var(--pos-soft); padding:2px 4px; border-radius:3px;
}
.ap-pane p{ font:400 .4rem/1.3 var(--fm); color:var(--faint); margin:0 0 5px; }

.ap-chart{ position:relative; }
.ap-grid{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.ap-grid i{ height:1px; background:var(--line); display:block; }
.ap-bars{ position:relative; display:flex; align-items:flex-end; gap:3px; height:52px; }
.ap-bars i{
  flex:1; height:0; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--pos-bright),var(--pos) 70%);
  transition:height .6s cubic-bezier(.2,.7,.3,1);
}
.ap-bars i.b2{ background:linear-gradient(180deg,#1F5F55,#2F7A6D); }
.ap-bars i.b3{ background:#C6CDDD; }
.ap-xax{ display:flex; gap:3px; margin-top:4px; }
.ap-xax span{ flex:1; text-align:center; font:400 .36rem/1 var(--fm); color:var(--faint); }
.ap-leg{ display:flex; gap:9px; align-items:center; margin-bottom:4px; }
.ap-leg span{ display:inline-flex; align-items:center; gap:4px; font:400 .4rem/1 var(--fm); color:var(--slate); }
.ap-leg i{ width:5px; height:5px; border-radius:50%; }

/* the ranked list */
.ap-rank{ display:flex; flex-direction:column; gap:3px; }
.ap-rank div{ display:flex; align-items:center; gap:5px; font:400 .44rem/1.2 var(--fm); color:var(--text); }
.ap-rank em{ flex:none; width:42px; font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-rank b{ flex:none; width:30px; text-align:right; font-weight:500; color:var(--ink); }
.ap-rank u{ flex:1; height:5px; border-radius:3px; background:#EEF1F6; text-decoration:none; overflow:hidden; }
.ap-rank u::after{ content:""; display:block; height:100%; width:0; background:var(--pos); border-radius:3px; transition:width .6s cubic-bezier(.2,.7,.3,1) .1s; }

/* A published board laid over a static product still, so the section shows the
   list and the thing the list produces at the same time. It sits inside the
   shot's own box, never bleeding past it, and folds away on narrow screens. */
/* The wrapper's box has to INCLUDE the overhang, or the grid centres the still
   and the card hanging off it drags the whole composition visually low. The
   padding is the overhang, the card sits at the padded bottom, and
   align-items:center then centres the pair as one object. */
.shot-over{ position:relative; padding-bottom:var(--ov-drop,120px); }
.shot-over > .ap-dash{
  /* it hangs down to the level of the section's own button, and takes less
     width, so most of the card behind it stays readable */
  position:absolute; right:10px; bottom:0; width:60%; z-index:2;
  transform:rotate(-1.2deg); transform-origin:bottom right;
  box-shadow:0 2px 6px rgba(14,21,38,.1), 0 22px 44px -18px rgba(14,21,38,.5);
}

/* an overlay card is read at a glance, not studied: everything inside runs a
   size down from the demo's, with more air between the rows */
.shot-over > .ap-dash .ap-dash-in{ padding:12px 13px 13px; }
.shot-over > .ap-dash .ap-qrow{ margin-bottom:14px; max-width:100%; }
.shot-over > .ap-dash .ap-q{ font-size:.62rem; padding:7px 10px; }
.shot-over > .ap-dash .ap-av{ width:19px; height:19px; font-size:.46rem; }
.shot-over > .ap-dash .ap-badge{ margin-bottom:12px; }
.shot-over > .ap-dash .ap-pane{ padding:9px 10px 10px; }
.shot-over > .ap-dash .ap-pane h5{ font-size:.44rem; margin-bottom:3px; }
.shot-over > .ap-dash .ap-pane > p{ font-size:.38rem; margin-bottom:10px; }
.shot-over > .ap-dash .ap-trend{ margin-top:2px; }
.shot-over > .ap-dash .ap-foot{ margin-top:9px; font-size:.38rem; }
.shot-over > .ap-dash .ap-dash-title{ margin-bottom:11px; }
.shot-over > .ap-dash .ap-filters{ margin-bottom:10px; }
.shot-over > .ap-dash .ap-kpis{ margin-bottom:11px; }
.shot-over > .shot{ position:relative; z-index:1; }
/* the flipped sections put their still on the left, so the board hangs off the
   other corner and leans the other way */
.shot-over.left > .ap-dash{
  right:auto; left:10px;
  transform:rotate(1.2deg); transform-origin:bottom left;
}
/* AI Insights page: the animated shared chat runs without the app's sidebar */
.ap-win.solo .ap-shell{ grid-template-columns:minmax(0,1fr); }
.ap-win.solo .ap-pane{ margin-top:6px; }
/* a second series in a market comparison */
.ap-leg i.c3{ background:#2F7A6D; }

/* AI Dashboards page: the share dialog laid over a shared dashboard */
.shot-over.share{ --ov-drop:150px; }
.shot-over > .ap-dash.ap-share{ width:min(62%, 320px); }
.ap-share-h{ font:700 .68rem/1.3 var(--fb); color:var(--ink); margin:0 0 9px; }
.ap-share-people{ display:flex; flex-direction:column; gap:6px; margin-bottom:11px; }
.ap-share-people div{ display:flex; align-items:center; gap:7px; }
.ap-share-people b{ flex:1; font:600 .6rem/1.2 var(--fb); color:var(--ink); }
.ap-share-people i{ font:500 .52rem/1 var(--fm); font-style:normal; color:var(--slate); }
.ap-share-lab{ font:500 .46rem/1 var(--fm); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 6px; }
.ap-share-row{ display:flex; align-items:center; gap:8px; padding:7px 8px; margin-bottom:6px; background:#FAFBFD; border:1px solid var(--line); border-radius:8px; }
.ap-share-row div{ flex:1; min-width:0; }
.ap-share-row b{ display:block; font:600 .6rem/1.25 var(--fb); color:var(--ink); }
.ap-share-row i{ display:block; font:400 .52rem/1.35 var(--fb); font-style:normal; color:var(--slate); }
.ap-share-ic{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--pos-soft); color:var(--pos-deep); }
.ap-share-ic svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ap-toggle{ flex:none; position:relative; width:24px; height:14px; border-radius:7px; background:#C6CDDD; }
.ap-toggle::after{ content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:#fff; }
.ap-toggle.on{ background:var(--pos); }
.ap-toggle.on::after{ left:12px; }
.ap-share-link{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.ap-share-link .ap-mono{ font-size:.52rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ap-share-copy{ flex:none; font:600 .56rem/1 var(--fb); color:#071018; background:var(--pos-bright); padding:6px 10px; border-radius:var(--radius-pill); }
/* AI Dashboards page: the edit chat's composer, and the chart recoloured by the prompt */
.ap-compose{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:7px 7px 7px 11px; background:#fff; border:1px solid var(--line-strong,#C6CDDD); border-radius:12px; }
.ap-compose-t{ flex:1; font:400 .72rem/1.3 var(--fb); color:var(--faint); }
.ap-compose.top{ margin:0 0 12px; }
/* before and after: the live v32 leans behind, the v33 draft the prompt made sits in
   front; both hang low enough that the prompt box above stays in full view */
.shot-over.edit{ --ov-drop:215px; }
.shot-over.edit > .ap-dash.ap-before{ right:auto; left:6px; bottom:36px; width:54%; transform:rotate(-2.2deg); transform-origin:bottom left; z-index:2; }
.shot-over.edit > .ap-dash:not(.ap-before){ width:56%; z-index:3; }
.ap-dash-top em.was{ color:var(--slate); background:#EEF1F6; }
.ap-compose-t.typed{ color:var(--ink); }
.ap-clip{ flex:none; display:grid; place-items:center; color:var(--slate); }
.ap-clip svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ap-compose b{ flex:none; font:600 .66rem/1 var(--fb); color:#071018; background:var(--pos-bright); padding:8px 12px; border-radius:var(--radius-pill); }
.ap-bars.dk i:not(.b3){ background:linear-gradient(180deg,#0F8C7A,#066A5C); }
.ap-leg i.c1.dk{ background:#067A69; }

@media (max-width:1080px){
  .shot-over{ padding-bottom:0; }
  .shot-over > .ap-dash{ position:static; width:100%; margin-top:14px; transform:none; }
  /* stacked on small screens: no tilt on the left-hung cards either, and the share dialog runs full width */
  .shot-over.left > .ap-dash{ transform:none; }
  .shot-over > .ap-dash.ap-share{ width:100%; }
  .shot-over.edit > .ap-dash.ap-before, .shot-over.edit > .ap-dash:not(.ap-before){ width:100%; transform:none; }
}

/* a trend chart drawn as one inline SVG. Presentation attributes, never a
   style attribute, because style-src has no unsafe-inline */
.ap-trend{ display:block; width:100%; }
.ap-trend svg{ display:block; width:100%; height:auto; }
.ap-foot{
  display:flex; align-items:center; gap:6px; margin-top:5px;
  font:400 .4rem/1 var(--fm); color:var(--faint);
}
.ap-foot b{ font-weight:500; color:var(--pos-deep); }
.ap-foot span{ margin-left:auto; }

/* the alerts list: one row per guardrail that fired */
.ap-alerts{ display:flex; flex-direction:column; gap:5px; }
.ap-alerts > div{
  display:flex; align-items:flex-start; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:7px;
  padding:7px 9px;
}
.ap-alerts i{
  flex:none; width:6px; height:6px; border-radius:50%; margin-top:4px;
  background:var(--pos-deep);
}
.ap-alerts .warn i,.ap-alerts i.warn{ background:#B45309; }
.ap-alerts .stop i,.ap-alerts i.stop{ background:#B3261E; }
.ap-alerts .t{ flex:1; min-width:0; }
.ap-alerts b{ display:block; font:600 .68rem/1.35 var(--fb); color:var(--ink); }
.ap-alerts span{ display:block; font:400 .61rem/1.4 var(--fm); color:var(--faint); margin-top:2px; }
.ap-alerts em{
  margin-left:auto; flex:none; font:500 .5rem/1 var(--fm); letter-spacing:.06em;
  font-style:normal; color:var(--slate); background:#EEF1F6;
  padding:3px 6px; border-radius:var(--radius-pill); white-space:nowrap;
}

/* the ranked list under the chart */
.ap-rank{ display:flex; flex-direction:column; gap:4px; }
.ap-rank div{ display:flex; align-items:center; gap:7px; font:400 .55rem/1.2 var(--fm); color:var(--text); }
.ap-rank em{ flex:none; width:74px; font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-rank b{ flex:none; width:38px; text-align:right; font-weight:500; color:var(--ink); }
.ap-rank u{ flex:1; height:5px; border-radius:3px; background:#EEF1F6; text-decoration:none; overflow:hidden; }
.ap-rank u::after{ content:""; display:block; height:100%; width:0; background:var(--pos); border-radius:3px; transition:width .6s cubic-bezier(.2,.7,.3,1) .1s; }

.ap-specs{ display:flex; flex-direction:column; gap:0; background:var(--card); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.ap-specs > div{
  display:flex; align-items:center; gap:10px; padding:7px 10px;
  border-bottom:1px solid #F0F2F7; font:400 .67rem/1.4 var(--fb); color:var(--text);
  white-space:nowrap; overflow:hidden;
}
.ap-specs > div:last-child{ border-bottom:0; }
.ap-specs > div > span:first-child{
  flex:none; width:80px; font:500 .52rem/1.3 var(--fm); letter-spacing:.07em;
  text-transform:uppercase; color:var(--faint);
}
.ap-verrow{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ap-btn{
  font:600 .6rem/1 var(--fb); color:var(--ink); background:var(--card);
  border:1px solid var(--line-strong,#C6CDDD); padding:5px 9px;
  border-radius:var(--radius-pill); cursor:default;
}
.ap-note{ font:400 .58rem/1.3 var(--fm); color:var(--faint); }

.ap-dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.ap-dot{ width:8px; height:8px; border-radius:99px; border:0; background:var(--line-strong,#C6CDDD); cursor:pointer; padding:0; transition:all .25s; }
.ap-dot.on{ background:var(--pos); width:22px; }

/* ============================================================
   4. THE MANIFESTO DECK  (the Accutics-style scroll cards)
   Three cards that rise and settle as the section enters view.
   Unlike the reference, they stay the SAME size: shrinking the
   third card costs readability for nothing.
   ============================================================ */
.deck{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
.deck-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 22px 22px; min-height:300px;
  box-shadow:var(--shadow-1);
  text-decoration:none; cursor:pointer;
  opacity:0; transform:translateY(30px);
  transition:opacity .58s cubic-bezier(.2,.7,.3,1), transform .58s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.deck.in .deck-card{ opacity:1; transform:none; }
.deck.in .deck-card:nth-child(2){ transition-delay:.08s; }
.deck.in .deck-card:nth-child(3){ transition-delay:.16s; }
.deck.in .deck-card:nth-child(4){ transition-delay:.24s; }

/* the card effect: the whole card goes mint, lifts, and grows its top rule */
.deck-card:hover,.deck-card:focus-visible{
  background:var(--pos-soft); border-color:#9CEBD8;
  box-shadow:var(--shadow-2); transform:translateY(-4px); outline:none;
}
.deck-card::before{
  content:""; position:absolute; left:22px; right:22px; top:0; height:3px;
  border-radius:0 0 3px 3px; background:var(--pos-bright);
  transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.deck-card:hover::before,.deck-card:focus-visible::before{ transform:scaleX(1); }

/* the icon with its section's name beside it (the old 01 to 04 numbers are gone) */
.deck-top{ display:flex; align-items:center; gap:11px; margin-bottom:18px; min-width:0; }
.deck-lab{ font:600 .72rem/1.2 var(--fb); letter-spacing:.11em; text-transform:uppercase; color:var(--pos-deep); }
.deck-card .ic{
  flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--pos-soft); color:var(--pos-deep);
  transition:background .22s ease, color .22s ease;
}
.deck-card:hover .ic{ background:var(--pos-bright); color:#071018; }
.deck-card .ic svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* titles are short and sized to hold one row at every four-across width */
.deck-card h3{ font:800 clamp(1.02rem, 1.3vw, 1.16rem)/1.2 var(--fd); letter-spacing:-.015em; color:var(--ink); margin:0 0 10px; }
/* four across gets cramped on small laptops and tablets: two by two there */
@media (max-width:1180px) and (min-width:901px){ .deck{ grid-template-columns:repeat(2,1fr); } .deck-card{ min-height:0; } .deck-card h3{ font-size:1.16rem; } }
.deck-card p{ font:400 .89rem/1.6 var(--fb); color:var(--slate); margin:0; }

/* one round mint button per card, centred, pointing down at the section it
   opens further down this same page */
.deck-card .go{
  margin-top:auto; padding-top:20px;
  align-self:center; flex:none; display:block;
}
.deck-card .go span{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--pos-bright); color:#071018;
  box-shadow:0 2px 4px rgba(14,21,38,.1), 0 10px 22px -10px rgba(0,251,206,.85);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.deck-card .go svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.deck-card:hover .go span{
  transform:translateY(3px);
  box-shadow:0 2px 4px rgba(14,21,38,.12), 0 14px 28px -10px rgba(0,251,206,.95);
}

@media (prefers-reduced-motion:reduce){
  .deck-card{ opacity:1; transform:none; transition:none; }
  .deck-card:hover{ transform:none; }
  .deck-card::before,.deck-card .go span{ transition:none; }
  .deck-card:hover .go span{ transform:none; }
}

/* ============================================================
   5. THE ALTERNATING FEATURE RACK
   Text one side, product the other, backgrounds alternating
   white and paper, exactly the uptimal.com/agentic-ai rhythm.
   ============================================================ */
/* The rhythm is lifted from uptimal.com/agentic-ai, measured rather than
   guessed: 6fr/5fr, the flip swaps ORDER only and never the ratio, the only
   separator is the paper-to-white colour step, and there are no dividers. */
.feat{ padding:clamp(48px,7vw,92px) 0; scroll-margin-top:calc(var(--v2-navspace) + 12px); }
.feat.alt{ background:var(--paper); }
.feat-grid{
  display:grid; grid-template-columns:6fr 5fr;
  gap:clamp(30px,5vw,72px); align-items:center;
}
.feat.rev .feat-grid > .feat-copy{ order:2; }
.feat.rev .feat-grid > .feat-media{ order:1; }
/* a grid item's default min-width is auto, which lets a nowrap table inside the
   product still push the whole column wider than its track. Pin it to 0. */
.feat-copy,.feat-media{ min-width:0; }

/* eyebrow: mono, wide tracking, with the house mint dot in front */
/* THE CENTRED HEADING BLOCK
   Built for portfolios, Why Upbuild exists and Coverage now wear exactly what
   the connector band wears: centred, the .eyebrow dash, one measured paragraph,
   and the same 26 / 26 / 60 rhythm. main.css caps .section-head at 640px and
   left aligns it, which is why these read as a different family before. */
.deck-head{
  max-width:none; text-align:center;
  margin-bottom:clamp(38px,4.4vw,60px);
}
.deck-head .eyebrow{ margin-bottom:26px; }
.deck-head h2{ margin:0 0 26px; }
.deck-head .section-sub{
  font:400 1.04rem/1.72 var(--fb); color:var(--slate);
  max-width:62ch; margin:0 auto;
}
.deck-head .section-sub + .section-sub{ margin-top:18px; }

/* the same green as .eyebrow in main.css, so every eyebrow on the site reads
   as one family whichever of the two treatments it wears */
.feat-copy .eb,.sol-hero .eb,.deck-head .eb,.lead-side .eb{
  display:inline-flex; align-items:center; gap:8px;
  font:500 .72rem/1 var(--fm); letter-spacing:.14em; text-transform:uppercase;
  color:#088C77; margin:0 0 12px;
}
.feat-copy .eb::before,.sol-hero .eb::before,.deck-head .eb::before,.lead-side .eb::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#088C77; flex:none;
}
.feat-copy h2{
  font:800 clamp(1.9rem,1.2rem + 2vw,2.62rem)/1.12 var(--fd);
  letter-spacing:-.015em; color:var(--ink); margin:12px 0 clamp(14px,3.2vw,22px);
}
.feat-copy > p{ font:400 1rem/1.65 var(--fb); color:var(--slate); margin:0 0 24px; }

/* the house list device: no bullets, a 3px mint rule and a heading per point */
.feat-pt{ border-left:3px solid var(--pos); padding:2px 0 2px 16px; margin:0 0 18px; }
.feat-pt h3{ font:700 1.04rem/1.3 var(--fd); color:var(--ink); margin:0 0 6px; }
.feat-pt p{ font:400 .94rem/1.6 var(--fb); color:var(--slate); margin:0; }

.feat-cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:4px;
  padding:12px 20px; border-radius:var(--radius-pill);
  font:600 .9rem/1 var(--fb); color:#071018; text-decoration:none;
  background:var(--pos-bright); border:1px solid var(--pos-bright);
  box-shadow:0 1px 2px rgba(14,21,38,.06), 0 10px 22px -12px rgba(0,251,206,.9);
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.feat-cta .arr{ transition:transform .18s ease; }
.feat-cta:hover{
  background:#0FEFC4; transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(14,21,38,.08), 0 14px 28px -12px rgba(0,251,206,1);
}
.feat-cta:hover .arr{ transform:translateX(3px); }

/* the two columns fade up independently, media a beat behind the copy */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.12s; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
}

/* the product still, a real screen rebuilt in markup */
.shot{
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 58px -26px rgba(9,16,32,.34), 0 2px 6px rgba(9,16,32,.05);
}
.shot-bar{
  display:flex; align-items:center; gap:9px; padding:9px 12px;
  background:#F6F7FB; border-bottom:1px solid var(--line);
  font:500 .64rem/1 var(--fm); letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}
.shot-bar .dot{
  width:8px; height:8px; border-radius:50%; background:var(--pos); flex:none;
  animation:shotpulse 1.8s infinite;
}
@keyframes shotpulse{
  0%{ box-shadow:0 0 0 0 rgba(10,174,150,.34) }
  70%{ box-shadow:0 0 0 9px rgba(10,174,150,0) }
  100%{ box-shadow:0 0 0 0 rgba(10,174,150,0) }
}
@media (prefers-reduced-motion:reduce){ .shot-bar .dot{ animation:none } }
.shot-bar .pill{
  margin-left:auto; font:500 .62rem/1 var(--fm); letter-spacing:.06em;
  color:var(--pos-deep); background:var(--card); border:1px solid #B9F3E6;
  padding:4px 8px; border-radius:var(--radius-pill); text-transform:none;
}
.shot-body{ padding:15px 16px 17px; }
.shot h4{ font:800 1.08rem/1.16 var(--fd); color:var(--ink); margin:0 0 4px; letter-spacing:-.012em; }
.shot h4 .hl{ background:linear-gradient(transparent 58%, var(--pos-bright) 58%); padding:0 2px; }
.shot .sub{ font:400 .8rem/1.5 var(--fb); color:var(--slate); margin:0 0 14px; }
.shot table{ width:100%; border-collapse:collapse; font:400 .74rem/1.4 var(--fb); }
.shot th{
  font:500 .58rem/1 var(--fm); letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  text-align:left; padding:7px 8px; background:#FAFBFD; border-bottom:1px solid var(--line); white-space:nowrap;
}
.shot td{ padding:8px; border-bottom:1px solid #F0F2F7; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shot tr:last-child td{ border-bottom:0; }
.shot td .id{ display:block; font:400 .6rem/1.3 var(--fm); color:var(--faint); margin-top:2px; }
.shot td b{ font-weight:600; color:var(--ink); }
.shot .n{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--fm); font-size:.7rem; }
.shot-scroll{ overflow-x:auto; }
/* phones: demo tables wrap inside the card instead of scrolling sideways */
@media (max-width:640px){
  .shot th, .shot td{ white-space:normal; overflow-wrap:break-word; padding-left:6px; padding-right:6px; }
  .shot .n, .shot td .tag{ white-space:nowrap; }
  .shot td .id{ overflow-wrap:anywhere; }
  .shot-body{ padding-left:12px; padding-right:12px; }
  .shot table{ font-size:.7rem; }
  .shot th{ letter-spacing:.04em; }
}
.tag{
  display:inline-block; font:500 .58rem/1 var(--fm); letter-spacing:.07em;
  padding:4px 7px; border-radius:var(--radius-pill); background:#EEF1F6; color:var(--slate);
}
.tag.ok{ background:var(--pos-soft); color:var(--pos-deep); }
.tag.draft{ background:#FDF8EC; color:#8b6b12; }
.tag.idx{ background:#EEEEFC; color:#3F3AA8; }
.tag.soon{ background:#F3EFFE; color:#6D28D9; }

/* ============================================================
   6. THE MCP ADD ON BAND
   ============================================================ */
.addon{ padding:calc(var(--v2-sec) + 14px) 0; background:var(--ink); color:#fff; }
/* the band's four rows, eyebrow, headline, paragraph, cards, each get real air
   between them: on ink, tight rows read as one grey block */
.addon .eyebrow{ color:var(--pos-bright); margin-bottom:26px; }
.addon h2{ font:800 clamp(1.9rem,3vw,2.7rem)/1.1 var(--fd); letter-spacing:-.022em; margin:0 0 26px; color:#fff; }
.addon h2 .hl{ background:linear-gradient(transparent 58%, rgba(0,251,206,.28) 58%); padding:0 3px; }
/* :not(.eyebrow) matters: the eyebrow is a <p> in this block too, and a bare
   .addon-mid > p out-specifies .eyebrow and blows it up to body size */
.addon-mid > p:not(.eyebrow){ font:400 1.04rem/1.72 var(--fb); color:rgba(255,255,255,.72); max-width:62ch; margin:0 auto; }
.addon-mid{ text-align:center; margin-bottom:clamp(38px,4.4vw,60px); }

/* a centred heading block sitting on the ink band reads in the band's colours */
.addon .deck-head .eyebrow{ color:var(--pos-bright); }
.addon .deck-head h2{ color:#fff; }
.addon .deck-head .section-sub{ color:rgba(255,255,255,.72); }
.addon .deck-head h2 .hl{ background:linear-gradient(transparent 58%, rgba(0,251,206,.28) 58%); padding:0 3px; }
.addon .scale-row b{ color:#fff; }
.addon .scale-row span{ color:rgba(255,255,255,.62); }
.llms{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.llm{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:24px 20px; border-radius:var(--radius-lg); text-decoration:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.llm:hover{ background:rgba(255,255,255,.09); border-color:rgba(0,251,206,.4); transform:translateY(-2px); }
.llm svg{ width:26px; height:26px; fill:#fff; }
.llm b{ font:600 .98rem/1 var(--fb); color:#fff; }
.llm span{ font:400 .82rem/1.5 var(--fb); color:rgba(255,255,255,.62); }
.llm em{ margin-top:auto; padding-top:12px; font:600 .8rem/1 var(--fb); color:var(--pos-bright); font-style:normal; }

/* ============================================================
   7. PROOF / SCALE STRIP
   ============================================================ */
.scale-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.scale-row div{ padding:2px 0; }
.scale-row b{ display:block; font:800 clamp(1.9rem,3.1vw,2.6rem)/1 var(--fd); color:var(--ink); letter-spacing:-.02em; }
.scale-row span{ display:block; font:400 .88rem/1.5 var(--fb); color:var(--slate); margin-top:8px; }

/* ============================================================
   8. SOLUTION PAGE FURNITURE
   ============================================================ */
.sol-hero{ padding:clamp(30px,4.6vw,58px) 0 clamp(34px,4vw,54px); background:var(--paper); }
.sol-hero h1{ font:800 clamp(2.25rem,4.3vw,3.35rem)/1.05 var(--fd); letter-spacing:-.026em; color:var(--ink); margin:.5rem 0 1rem; }
.sol-hero .lead{ font:400 clamp(1.02rem,1.2vw,1.14rem)/1.64 var(--fb); color:var(--slate); max-width:56ch; margin:0 0 1.5rem; }
.crumb{ font:500 .72rem/1 var(--fm); letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin:0 0 6px; }
.crumb a{ color:var(--pos-deep); text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:s; }
.steps > div{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 20px;
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
/* hovered, a step card goes light green and lifts, like every other card on the site */
.steps > div:hover{ background:var(--pos-soft); border-color:#9CEBD8; box-shadow:var(--shadow-2); transform:translateY(-3px); }
.steps > div::before{ transition:background-color .2s ease, color .2s ease; }
.steps > div:hover::before{ background:var(--pos-bright); color:#071018; }
.steps > div::before{
  counter-increment:s; content:counter(s);
  display:grid; place-items:center; width:28px; height:28px; border-radius:9px;
  background:var(--pos-soft); color:var(--pos-deep);
  font:700 .84rem/1 var(--fd); margin-bottom:14px;
}
.steps h3{ font:800 1.06rem/1.2 var(--fd); color:var(--ink); margin:0 0 8px; }
.steps p{ font:400 .9rem/1.6 var(--fb); color:var(--slate); margin:0; }

.two{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

/* ============================================================
   9. MOBILE
   ============================================================ */
/* laptop heights: the fold is fixed, so the content has to give, not the strip */
@media (max-height:900px) and (min-width:1081px){
  .v2hero h1{ font-size:clamp(2.2rem,4vw,3.1rem); }
  .v2hero .lead{ font-size:1.02rem; line-height:1.58; margin-bottom:1.2rem; }
  .v2hero .hero-ctas{ margin-bottom:1rem; }
  .ap-win{ height:clamp(300px,47vh,430px); }
  .ap-dots{ margin-top:12px; }
}
@media (max-height:760px) and (min-width:1081px){
  .v2hero h1{ font-size:clamp(2rem,3.4vw,2.7rem); }
  .v2hero .lead{ font-size:.98rem; }
  .ap-win{ height:clamp(280px,44vh,380px); }
  body.v2 .plat-band{ padding-block:16px 18px; }
  body.v2 .plat-band .lp-plat-eyebrow{ margin-bottom:12px; }
  body.v2 .plat-band .lp-plat img{ height:28px; }
}

/* below the two column breakpoint the fold stops being a promise: a stacked
   hero plus a demo cannot honestly fit one small screen, so let it flow */
@media (max-width:1080px){
  .v2fold{ min-height:0; display:block; }
  .v2fold > .v2hero{ display:block; }
  .v2hero-grid{ grid-template-columns:1fr; gap:34px; }
  .feat-grid{ grid-template-columns:1fr; gap:30px; }
  .feat.rev .feat-grid > .feat-copy,.feat.rev .feat-grid > .feat-media{ order:0; }
  .llms{ grid-template-columns:repeat(2,1fr); }
  .scale-row{ grid-template-columns:repeat(2,1fr); gap:24px 20px; }
}
@media (max-width:900px){
  :root{ --v2-side:12px; --v2-top:10px; --v2-barh:58px; }
  .v2menu,.v2cta .lin,.v2cta .btn-ghost{ display:none; }
  /* the hidden menu is what pushed the buttons right on desktop, so here the
     button group pushes itself to the bar's right end */
  .v2cta{ gap:8px; margin-left:auto; }
  .v2cta .btn{ height:40px; padding:0 16px; }
  /* the menu button: just the three lines, no border and no ring (owner's
     call), packed in the middle (flex, not grid: a grid spread them over the
     full height), turning into a cross while the drawer is open. Hover and
     keyboard focus show the same soft tint as the header's other links. */
  .v2burger{
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    flex:none; width:40px; height:40px; padding:0; cursor:pointer;
    background:none; border:0; border-radius:10px; color:var(--ink);
    transition:background .15s ease;
  }
  .v2burger:hover, .v2burger:focus-visible{ background:#EEF1F6; }
  .v2burger:focus{ outline:none; }
  .v2burger span{ display:block; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .15s ease; }
  .v2burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .v2burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .v2burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  /* the lines sit 10px inside their button, so this matches the logo's 20px */
  .v2nav{ padding-right:10px; }
  .v2drawer{
    position:fixed; inset:calc(var(--v2-top) + var(--v2-barh) + 8px) var(--v2-side) auto var(--v2-side);
    z-index:79; background:var(--card); border:1px solid var(--line); border-radius:20px;
    box-shadow:0 24px 60px -18px rgba(14,21,38,.34);
    padding:12px; max-height:calc(100vh - var(--v2-barh) - 44px); overflow:auto;
    display:none;
  }
  .v2drawer.open{ display:block; }
  .v2drawer .lab{
    display:block; font:500 .62rem/1 var(--fm); letter-spacing:.13em; text-transform:uppercase;
    color:var(--faint); padding:10px 10px 6px;
  }
  /* rows sized so the whole drawer, buttons included, fits a normal phone */
  .v2drawer a{
    display:block; padding:9px 10px; border-radius:11px; text-decoration:none;
    font:500 .95rem/1.3 var(--fb); color:var(--ink);
  }
  .v2drawer a:hover{ background:#EEF1F6; }
  .v2drawer .sep{ height:1px; background:var(--line); margin:8px 10px; }
  /* the drawer carries the same icon rows as the desktop panels (owner, 2026-09-12) */
  .v2drawer a.row{ display:flex; align-items:center; gap:11px; padding:7px 10px; }
  .v2drawer a.row b{ font:600 .93rem/1.3 var(--fb); color:var(--ink); }
  .v2drawer a.row .ic{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--pos-soft); color:var(--pos-deep); }
  .v2drawer a.row .ic svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .v2drawer a.row .ic.mcp{ background:#F3EFFE; color:#6D28D9; }
  .v2drawer a.row .ic.mcp svg{ fill:currentColor; stroke:none; }
  .v2drawer a.row.more{ padding-left:51px; font:600 .84rem/1.3 var(--fb); color:var(--pos-deep); }
  .v2drawer a.row.more.mcp{ color:#6D28D9; }
  .v2drawer a.row.more .arr{ margin-left:4px; }
  .v2drawer a.lin{ display:flex; align-items:center; gap:8px; }
  .v2drawer a.lin svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  /* real buttons, like the header's: centred pills (the drawer's row rule
     above made them blocks with left text and square corners) */
  .v2drawer .btn{ display:flex; width:100%; justify-content:center; margin-top:8px; padding:12px 18px; border-radius:var(--radius-pill); font-weight:600; }
  .deck{ grid-template-columns:1fr; }
  .deck-card{ min-height:0; }
  .steps{ grid-template-columns:1fr; }
  .two{ grid-template-columns:1fr; }
  .ap-shell{ grid-template-columns:1fr; }
  .ap-side{ display:none; }
  .ap-win{ height:clamp(320px,60vh,430px); }
}
@media (max-width:560px){
  /* the spec list is a two column key/value row on desktop; below this it
     stacks, because a nowrap row is what pushed the card past the viewport */
  .ap-specs > div{ display:block; white-space:normal; }
  .ap-specs > div > span:first-child{ display:block; width:auto; margin-bottom:3px; }
  .llms{ grid-template-columns:1fr; }
  .scale-row{ grid-template-columns:1fr; }
  .ap-donut-row{ flex-direction:column; align-items:flex-start; gap:12px; }
  .ap-head{ padding:11px 13px 8px; }
  .ap-body{ padding:11px 13px 12px; }
  .ap-q{ max-width:92%; }
}

/* ============================================================
   THE BIGQUERY TABLE PREVIEW
   An overlay card for the AI Data Exports section: where the rows
   an export writes actually land, so the export reads as real and
   not as a promise. It borrows the .ap-dash shell so it sits with
   its siblings, then drops every green cue from the head and takes
   a BigQuery blue mark and active tab, so it reads as somebody
   else's console rather than as ours.
   These rules must sit AFTER the .ap-tbl and .tag blocks: several
   of them tie on specificity and win only by source order.
   No inline styles anywhere: style-src is 'self' with no
   unsafe-inline, so an inline style attribute would be dropped.
   ============================================================ */
.ap-bq{ --bq:#4285F4; --bq-ink:#1557C0; width:380px; max-width:100%; }

/* the head: a blue mark and a neutral pill, never our green */
.ap-bq .ap-dash-mark{ background:var(--bq); }
.ap-bq .ap-dash-mark::after{ background:#FFFFFF; }
.ap-bq .ap-dash-top span{ letter-spacing:0; }
.ap-bq .ap-dash-top em{ color:var(--slate); background:#EEF1F6; }

/* project / Datasets / dataset / Tables / table, on one line */
.ap-bq-crumb{
  display:flex; align-items:center; gap:5px; margin-bottom:7px;
  font:400 .44rem/1.3 var(--fm); color:var(--faint);
  white-space:nowrap; overflow:hidden;
}
.ap-bq-crumb i{ font-style:normal; color:var(--line-strong,#C6CDDD); }
.ap-bq-crumb b{ font-weight:500; color:var(--ink); }

/* the tab row. Sentence case, not our uppercase mono chrome: this is
   another company's screen and should not read in our voice. */
.ap-bq-tabs{
  display:flex; align-items:flex-end; gap:12px;
  border-bottom:1px solid var(--line); margin-bottom:8px;
}
.ap-bq-tabs span{
  font:400 .46rem/1 var(--fm); color:var(--faint);
  padding-bottom:5px; margin-bottom:-1px; border-bottom:2px solid transparent;
}
.ap-bq-tabs span.on{ color:var(--bq-ink); font-weight:500; border-bottom-color:var(--bq); }
.ap-bq-tabs u{
  text-decoration:none; font:400 .42rem/1 var(--fm); color:var(--slate);
  background:#EEF1F6; border-radius:4px; padding:4px 6px; margin-bottom:4px;
}
.ap-bq-tabs u:first-of-type{ margin-left:auto; }

/* the grid. .ap-tbl already gives the frame, the header wash, the fixed
   layout and the ellipsis: this only tightens the scale and pins the six
   column widths as percentages, so the card keeps its proportions at any
   width the section gives it. The widths are not eyeballed, they are the
   measured content width of each column plus a share of what is left, with
   name (the column that is meant to truncate) taking the largest share. */
.ap-bq-grid{ font-size:.48rem; }
.ap-bq-grid th{ font-size:.44rem; letter-spacing:0; text-transform:none; padding:5px 4px; }
.ap-bq-grid td{ padding:4px; }
.ap-bq-grid th:nth-child(1),.ap-bq-grid td:nth-child(1){ width:7%; }
.ap-bq-grid th:nth-child(2),.ap-bq-grid td:nth-child(2){ width:26%; }
.ap-bq-grid th:nth-child(3),.ap-bq-grid td:nth-child(3){ width:17%; }
.ap-bq-grid th:nth-child(4),.ap-bq-grid td:nth-child(4){ width:23%; }
.ap-bq-grid th:nth-child(5),.ap-bq-grid td:nth-child(5){ width:14%; }
.ap-bq-grid th:nth-child(6),.ap-bq-grid td:nth-child(6){ width:13%; }
/* the row number is the console's own gutter, not data */
.ap-bq-grid td:nth-child(1){ color:var(--faint); text-align:right; font-variant-numeric:tabular-nums; }
.ap-bq-grid td:nth-child(2){ color:var(--ink); font-weight:500; }
.ap-bq-grid td:nth-child(3){ font-variant-numeric:tabular-nums; }
.ap-bq-grid .tag{ font-size:.4rem; letter-spacing:.05em; padding:3px 4px; }

.ap-bq-foot{
  display:flex; align-items:center; gap:8px; margin-top:7px;
  font:400 .42rem/1.3 var(--fm); color:var(--faint); white-space:nowrap; overflow:hidden;
}
.ap-bq-foot span{ margin-left:auto; }

/* WIDTH, and why this rule has to exist.
   .shot-over > .ap-dash gives an overlay 60% of the media column. That column
   is 5fr of a 6fr/5fr grid inside a 1300px wrap, so 60% lands around 320px,
   and six columns of real data do not fit in 320px: the ids and the pill start
   to cut. This card asks for more of the column instead, capped so it stays at
   the size it was drawn for. Same specificity as the rule it overrides, so it
   only wins by sitting later in the file.
   It is scoped to the desktop side of the overlay's own 1080px breakpoint, so
   the rule that drops the card below the still and gives it the full width is
   left exactly as it is. */
@media (min-width:1081px){
  .shot-over > .ap-bq{ width:min(390px,92%); }
}

/* on a phone the six columns stop being readable before they stop fitting.
   campaign_id is the one a reader can lose, so it goes and the other five
   take the room back. */
@media (max-width:560px){
  .ap-bq-grid th:nth-child(3),.ap-bq-grid td:nth-child(3){ display:none; }
  .ap-bq-grid th:nth-child(1),.ap-bq-grid td:nth-child(1){ width:8%; }
  .ap-bq-grid th:nth-child(2),.ap-bq-grid td:nth-child(2){ width:32%; }
  .ap-bq-grid th:nth-child(4),.ap-bq-grid td:nth-child(4){ width:26%; }
  .ap-bq-grid th:nth-child(5),.ap-bq-grid td:nth-child(5){ width:19%; }
  .ap-bq-grid th:nth-child(6),.ap-bq-grid td:nth-child(6){ width:15%; }
}


/* ============================================================
   THE ALERT FAN
   Four alerts that fired, dealt rather than listed: each card is
   stepped right by a constant amount, pulled up over the one
   before it, and turned a degree or so the other way, so the
   section reads "several of these arrive, all the time" instead
   of "here is a notification".
   The cards ARE .ap-alerts rows. Nothing about an alert's
   anatomy (dot, title, where and when, tag) is re-invented here,
   only the way they are dealt out.
   ============================================================ */
.ap-alerts.ap-fan{
  /* the rows are dealt, not stacked in a column, so the flex column and its
     gap that .ap-alerts sets both go away */
  display:block;
  /* the fan is its own frame of reference: nothing here is positioned against
     anything outside it */
  position:relative;
  max-width:400px; margin-inline:auto;
  --ap-fan-step:12px;        /* how far right each card moves from the last */
}

.ap-alerts.ap-fan > .ap-fan-card{
  position:relative;
  /* every card gives up the same three steps, so the fan ends up exactly as
     wide as its wrapper however wide the wrapper turns out to be */
  width:calc(100% - (var(--ap-fan-step) * 3));
  /* the overlap. About 26px of each card behind stays visible, which is its
     dot, its whole title and its tag: enough to read four different alerts */
  margin-top:-19px;
  padding:8px 10px;
  transform-origin:50% 50%;
}
.ap-alerts.ap-fan > .ap-fan-card:first-child{ margin-top:0; }

/* an overlay card is read at a glance: a size down from the alerts list in the
   demo window, and every line pinned to one line so the deal stays even */
.ap-fan > .ap-fan-card .t b,
.ap-fan > .ap-fan-card .t > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-fan > .ap-fan-card .t b{ font-size:.56rem; }
.ap-fan > .ap-fan-card .t > span{ font-size:.5rem; }
.ap-fan > .ap-fan-card em{ font-size:.44rem; padding:2px 5px; }

/* the deal itself. Rotation alternates and stays inside two degrees, and
   because the card in front sits LOWER than the one it covers, its shadow is
   cast upwards, onto the card behind, not down into empty space. */
.ap-fan > .ap-fan-1{
  margin-left:0; z-index:1; transform:rotate(-1.5deg);
  box-shadow:0 1px 2px rgba(14,21,38,.05);
}
.ap-fan > .ap-fan-2{
  margin-left:var(--ap-fan-step); z-index:2; transform:rotate(1.2deg);
  box-shadow:0 -2px 6px -1px rgba(14,21,38,.1);
}
.ap-fan > .ap-fan-3{
  margin-left:calc(var(--ap-fan-step) * 2); z-index:3; transform:rotate(-.9deg);
  box-shadow:0 -3px 10px -2px rgba(14,21,38,.14);
}
.ap-fan > .ap-fan-4{
  margin-left:calc(var(--ap-fan-step) * 3); z-index:4; transform:rotate(.6deg);
  box-shadow:0 -4px 14px -3px rgba(14,21,38,.18), 0 2px 6px -2px rgba(14,21,38,.08);
}

/* Only the card in front carries its second line. On a card behind, that line
   falls right about where the next card's edge cuts across it, and half a
   sentence poking out from under a card reads as a rendering bug, not as a
   stack. Fade it out rather than remove it, so it is still there to be read
   aloud, and so the four cards keep exactly the same height. */
.ap-fan > .ap-fan-1 .t > span,
.ap-fan > .ap-fan-2 .t > span,
.ap-fan > .ap-fan-3 .t > span{ opacity:0; }

/* The cards behind also recede in weight, but the fade is on their CONTENTS,
   never on the card. Fading a whole card would let the card underneath it
   print through the overlap, which is visible and looks like a smudge. The
   background and border stay solid, the dot, the words and the tag step back. */
.ap-fan > .ap-fan-1 > *{ opacity:.78; }
.ap-fan > .ap-fan-2 > *{ opacity:.86; }
.ap-fan > .ap-fan-3 > *{ opacity:.93; }

/* A fan is wider and much shorter than a published board, so its overlay takes
   a little more of the still than the 60% the dashboard one takes. 428px is the
   400px fan plus .ap-dash-in's own padding and border, so on a roomy column the
   card is exactly as wide as the fan and no wider; on a narrow one it gives up
   percentage instead of ellipsizing the alerts. Width only: left, right and the
   lean stay with the existing .shot-over rules, the flipped .left one included. */
.shot-over > .ap-dash.ap-fan-dash{ width:min(86%, 428px); }

@media (max-width:1080px){
  /* .shot-over already unpins the card here. The fan stops being a fan and
     becomes what it always was underneath: a plain list of alerts. */
  .shot-over > .ap-dash.ap-fan-dash{ width:100%; }
  /* the existing rule that flattens an unpinned overlay is .shot-over > .ap-dash,
     which .shot-over.left > .ap-dash outweighs, so a left hung card keeps its
     lean down here. Straighten this one explicitly. */
  .shot-over.left > .ap-dash.ap-fan-dash{ transform:none; }
  .ap-alerts.ap-fan{ max-width:none; }
  .ap-alerts.ap-fan > .ap-fan-card{
    width:100%; margin-left:0; margin-top:5px;
    transform:none;
    box-shadow:0 1px 2px rgba(14,21,38,.04);
  }
  .ap-alerts.ap-fan > .ap-fan-card:first-child{ margin-top:0; }
  .ap-alerts.ap-fan > .ap-fan-card > *,
  .ap-alerts.ap-fan > .ap-fan-card .t > span{ opacity:1; }
}

/* ============================================================
   BOOK A DEMO  (/get-demo/)
   One screen: copy on the left (eyebrow, title, lead, four
   points), the form on the right. The copy keeps its natural
   spacing and is centred against the card, so any difference in
   height sits evenly above and below it, never as a gap inside
   it. Form controls follow the app's: 12px radius, ink border on
   hover, green focus with a mint halo.
   ============================================================ */
.dm-sec{ background:var(--paper); min-height:100svh; display:flex; align-items:center; padding:clamp(28px,4vh,56px) 0; }
.dm-sec > .wrap{ width:100%; }
.dm-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(32px,6vw,96px); align-items:center; }
.dm-copy, .dm-top{ display:flex; flex-direction:column; min-width:0; }
/* block, not inline: an inline eyebrow sits in a taller text line and
   starts 14px below the card's top edge */
.dm-copy .eyebrow{ margin:0 0 16px; display:flex; width:fit-content; }
/* one measure for the lead and the points, so both end on the same right
   edge; on wide screens the text is justified, making that edge a clean line */
.dm-top{ max-width:39rem; }
@media (min-width:901px){ .dm-top .lead, .dm-points li{ text-align:justify; } }
/* the site's mint-disc tick (.lp-bullets), indented under the lead */
.dm-points{ margin:24px 0 0 20px; gap:18px; max-width:35rem; }
.dm-points li{ font:400 1rem/1.6 var(--fb); color:var(--slate); text-wrap:pretty; }
.dm-points li::before, .dm-points li::after{ top:calc(.8em - 11px); }
.dm-points b{ color:var(--ink); font-weight:600; }
.dm-points a{ color:var(--pos-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.dm-top h1{ font:800 clamp(2.2rem,4vw,3.2rem)/1.05 var(--fd); letter-spacing:-.028em; color:var(--ink); margin:0 0 18px; }
.dm-top .lead{ font:400 clamp(1rem,1.2vw,1.12rem)/1.65 var(--fb); color:var(--slate); max-width:none; margin:0; }
/* the numbered steps on the confirmation screen */
.dm-steps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:dm; max-width:34em; }
.dm-steps li{ display:flex; gap:12px; align-items:flex-start; font:400 .95rem/1.5 var(--fb); color:var(--slate); }
.dm-steps li::before{
  counter-increment:dm; content:counter(dm); flex:none;
  width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:var(--pos-soft); color:var(--pos-deep); font:700 .74rem/1 var(--fd);
}
.dm-steps b{ color:var(--ink); font-weight:600; }
.dm-steps a{ color:var(--pos-deep); font-weight:600; }

.dm-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-2); align-self:start;
}
.dm-card h2{ font:800 1.5rem/1.15 var(--fd); letter-spacing:-.02em; color:var(--ink); margin:0 0 6px; }
.dm-sub{ font:400 .9rem/1.5 var(--fb); color:var(--slate); margin:0 0 22px; }
.dm-sub b{ color:var(--ink); }
.dm-form{ display:grid; gap:16px; }
.dm-f{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.dm-f label{ font:600 .8rem/1.2 var(--fb); color:var(--text); }
.dm-f input{
  width:100%; height:46px; font:400 .92rem/1.4 var(--fb); color:var(--ink);
  background:#fff; border:1px solid var(--line-strong,#C6CDDD); border-radius:12px;
  padding:10px 13px; outline:none; transition:border-color .12s, box-shadow .12s;
}
.dm-f input::placeholder{ color:var(--faint); }
.dm-f input:hover{ border-color:var(--ink); }
.dm-f input:focus{ border-color:var(--pos); box-shadow:0 0 0 3px var(--pos-soft); }
.dm-why{ display:none; font:400 .76rem/1.3 var(--fb); color:#B3261E; }
.dm-f.bad input{ border-color:#B3261E; box-shadow:0 0 0 3px #FBECEA; }
.dm-f.bad .dm-why{ display:block; }
/* the privacy tick: the site's .consent row, required before sending */
.dm-consent{ line-height:1.45; margin:2px 0 0; cursor:pointer; }
.dm-consent input{ flex:none; cursor:pointer; } /* the tick itself: main.css, .consent */
/* the privacy link beside every consent tick reads the same on every form */
body.v2 .consent a{ color:var(--slate); text-decoration:underline; text-underline-offset:2px; }
.dm-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.dm-status{ font:400 .82rem/1.45 var(--fb); color:#B3261E; margin:0; }
.dm-status:empty{ display:none; }
.dm-status a{ color:#B3261E; font-weight:600; text-decoration:underline; }
.dm-send{ width:100%; justify-content:center; padding:14px 20px; font-size:.95rem; margin-top:4px; }
.dm-send[disabled]{ opacity:.6; cursor:default; }
.dm-notice{ font:400 .76rem/1.5 var(--fb); color:var(--faint); margin:2px 0 0; text-align:center; }
.dm-notice a{ color:var(--slate); text-decoration:underline; text-underline-offset:2px; }
.dm-done .dm-ok{
  width:44px; height:44px; border-radius:50%; background:var(--pos-soft);
  display:grid; place-items:center; margin-bottom:14px;
}
.dm-ok svg{ width:22px; height:22px; fill:none; stroke:var(--pos-deep); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.dm-done .dm-steps{ margin-top:4px; }
.gone{ display:none !important; }

@media (max-width:900px){
  .dm-sec{ min-height:0; }
  .dm-grid{ grid-template-columns:1fr; }
}

/* ===== BOOK A DEMO looks like the app's sign-up page (owner order 11/09/2026) ===== */
/* the heading font with its optical-size axis, as Google serves it to the app
   (SIL Open Font License, self-hosted, latin subset) */
@font-face{font-family:'Bricolage Opsz';font-style:normal;font-weight:700 800;font-display:swap;src:url('../fonts/bricolage-opsz.woff2') format('woff2')}
body.v2.fit{ background:var(--paper); }
.dm-sec > .dm-grid{ max-width:1140px; }
.dm-copy .eyebrow{ margin:0 0 12px; }
.dm-copy .eyebrow::before{ width:26px; border-radius:0; }
.dm-top h1{ font:800 clamp(32px,4.4vw,50px)/1.04 'Bricolage Opsz',var(--fd); letter-spacing:-.03em; color:var(--ink); margin:0 0 16px; }
.dm-top .lead{ font:400 1.08rem/1.6 var(--fb); color:var(--slate); max-width:52ch; margin:0 0 20px; }
.dm-top .lead, .dm-points li{ text-align:start; }
.dm-points{ margin:0; gap:11px; max-width:31.2rem; }
.dm-points li{ font:400 .97rem/1.5 var(--fb); color:var(--text); padding-left:34px; text-wrap:pretty; }
.dm-points li::before, .dm-points li::after{ top:1px; }
.dm-card h2{ font:800 1.5rem/normal 'Bricolage Opsz',var(--fd); letter-spacing:-.02em; color:var(--text); margin:0 0 8px; }
.dm-sub{ font:400 14.5px/1.55 var(--fb); color:var(--slate); margin:0 0 20px; }
.dm-card{ padding:38px 34px; border-radius:20px; }
/* the form sits 524px tall like the sign-up card: 14px between fields, 2px above the button */
.dm-form{ gap:14px; }
.dm-send{ margin-top:2px; }
@media (min-width:901px){
  body.v2.fit .dm-sec{ padding-block:clamp(10px,1.4vh,28px); }
  .dm-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:clamp(40px,6.5vw,88px); }
  .dm-card{ align-self:center; }
}
@media (max-width:900px){
  .dm-sec{ padding-block:clamp(10px,1.4vh,28px); }
  .dm-grid{ row-gap:clamp(28px,5vw,64px); }
  .dm-points{ margin-bottom:8px; }
}
@media (max-width:480px){ .dm-grid{ padding-inline:16px; } }

/* ============================================================
   LIVE DEMOS (livedemos.js)
   etl-flow, etl-chat, ins-dash. Each scoped to its own root.
   ============================================================ */
/* ============================================================
   etl-flow: the "data travels" visual on /ai-etl/, section 1.
   Source logos on one end, one export card in the middle, the
   three kinds of destination on the other end, joined by a fan
   of wires that runs BEHIND the opaque card. The wires are drawn
   by demo.js from measured positions, so they meet every tile
   and the card exactly at any width.
   Everything is scoped under .xf. No em dashes, by owner rule.
   ============================================================ */

.xf{
  --xf-wire:#CDD5E2;
  --xf-arrow:#B7C1D2;
  container:xf / inline-size;
  position:relative;
  width:100%; max-width:660px; margin-inline:auto;
}

/* the stage: sources, gap, card, gap, destinations. The two gaps are
   where the wires are seen; they share whatever the card leaves */
.xf-stage{
  --xf-srcw:38px;
  --xf-dstw:80px;
  position:relative;
  display:grid;
  /* a percentage here is of the stage, which is the demo's own width */
  grid-template-columns:var(--xf-srcw) minmax(0,1fr) clamp(280px, 58%, 352px) minmax(0,1fr) var(--xf-dstw);
  grid-template-areas:"src . card . dst";
  align-items:center;
  padding:4px 0 6px;
}

/* the wires sit under everything else; demo.js sets the viewBox to the
   stage's own pixel size, so one unit is one CSS pixel */
.xf-wires{
  position:absolute; left:0; top:0; width:100%; height:100%;
  z-index:0; overflow:visible; pointer-events:none;
}
.xf-wires .xf-w{ fill:none; stroke:var(--xf-wire); stroke-width:1.5; }
.xf-wires .xf-tr{ fill:none; stroke:var(--pos); stroke-width:2; stroke-linecap:round; }
.xf-wires .xf-ar{ fill:var(--xf-arrow); transition:fill .35s ease; }
.xf-wires .xf-ar.xf-on{ fill:var(--pos); }
.xf-wires .xf-d{ fill:var(--pos); stroke:#fff; stroke-width:1.2; }
.xf-wires .xf-h{ fill:var(--pos-bright); }

/* ---------- the tiles at both ends ---------- */
.xf-src,.xf-dst{
  position:relative; z-index:1;
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
}
.xf-src{ grid-area:src; gap:12px; }
.xf-dst{ grid-area:dst; gap:16px; }
.xf-tile{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 1px 2px rgba(14,21,38,.05), 0 8px 18px -12px rgba(14,21,38,.28);
  transition:border-color .35s ease, box-shadow .35s ease;
}
.xf-from{
  width:var(--xf-srcw); height:var(--xf-srcw);
  display:grid; place-items:center;
}
.xf-from img{ width:20px; height:20px; }
.xf-to{
  width:var(--xf-dstw);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:9px 4px 8px; text-align:center;
}
.xf-ic{
  flex:none; width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--pos-soft); color:var(--pos-deep);
  transition:background .35s ease, color .35s ease;
}
.xf-ic svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
/* every label holds two lines, so the three tiles are one height */
.xf-lab{
  display:flex; align-items:center; justify-content:center;
  min-height:2.5em;
  font:500 .69rem/1.25 var(--fb); color:var(--ink);
}

/* a source lights up as its data leaves; a destination as the data lands */
.xf-from.xf-ping,.xf-to.xf-hit{
  border-color:#9CEBD8;
  box-shadow:0 0 0 4px rgba(0,251,206,.16), 0 8px 18px -12px rgba(14,21,38,.28);
}
.xf-to.xf-hit .xf-ic{ background:var(--pos-bright); color:#071018; }

/* ---------- the export card ---------- */
.xf-card{
  grid-area:card; position:relative; z-index:2; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 58px -26px rgba(9,16,32,.34), 0 2px 6px rgba(9,16,32,.05);
}
.xf-bar{
  position:relative;
  display:flex; align-items:center; gap:8px;
  padding:8px 10px 8px 13px;
  background:#F6F7FB; border-bottom:1px solid var(--line);
  font:500 .66rem/1 var(--fm); letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  white-space:nowrap;
}
.xf-dot{
  flex:none; width:8px; height:8px; border-radius:50%; background:var(--pos);
  animation:xf-pulse 1.8s infinite;
}
@keyframes xf-pulse{
  0%{ box-shadow:0 0 0 0 rgba(10,174,150,.34) }
  70%{ box-shadow:0 0 0 7px rgba(10,174,150,0) }
  100%{ box-shadow:0 0 0 0 rgba(10,174,150,0) }
}
/* both words live in one grid cell, so the pill is as wide as the longer
   one all the time and never changes size when the state flips */
.xf-pill{
  margin-left:auto; display:inline-grid;
  font:500 .66rem/1 var(--fm); letter-spacing:.03em; text-transform:none;
  color:var(--pos-deep); background:var(--card); border:1px solid #B9F3E6;
  padding:4px 9px; border-radius:var(--radius-pill);
  transition:background .3s ease;
}
/* the outgoing word fades first and the incoming one follows it, so the
   two never show on top of each other */
.xf-pill > span{ grid-area:1 / 1; text-align:center; transition:opacity .18s ease; }
.xf-pill > .xf-p-ok{ transition-delay:.18s; }
.xf-pill > .xf-p-run{ opacity:0; transition-delay:0s; }
.xf.xf-running .xf-pill{ background:var(--pos-soft); }
.xf.xf-running .xf-pill > .xf-p-run{ opacity:1; transition-delay:.18s; }
.xf.xf-running .xf-pill > .xf-p-ok{ opacity:0; transition-delay:0s; }
/* the run's progress, drawn along the bar's bottom rule */
.xf-prog{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--pos); transform-origin:left center; transform:scaleX(0);
  opacity:0; transition:opacity .45s ease;
}
/* the bar only animates its length while it is showing; hidden, it snaps
   back to zero, so the next run never starts with a bar running backwards */
.xf-prog.xf-on{ opacity:1; transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .45s ease; }

/* ---------- the export card: a shared chat ----------
   Two prompts and two replies live in the card from the first frame, so
   its size is fixed; the script only fades them in, one at a time, and
   fades the whole chat out before the next loop. Without the script the
   finished chat stands, with the thinking pills hidden. */
.xf-body{
  position:relative; padding:10px 12px 12px;
  display:flex; flex-direction:column; gap:7px;
  /* the card keeps the height it had with the larger text: the owner wants
     the box this size, with smaller text inside it */
  min-height:369px;
}
.xf .ap-qrow{ max-width:88%; gap:6px; }
.xf .ap-q{ text-wrap:pretty; font:400 .66rem/1.45 var(--fb); padding:6px 9px; border-radius:10px 10px 4px 10px; }
.xf .ap-a{ max-width:100%; }
.xf .ap-a p{ font:400 .66rem/1.5 var(--fb); margin:0 0 5px; }
.xf .ap-a p:last-child{ margin-bottom:0; }
.xf .ap-av{ width:20px; height:20px; font-size:.5rem; }
.xf .ap-badge{ font-size:.54rem; letter-spacing:.08em; padding:3px 5px; margin-bottom:5px; }
.xf .ap-work{ font-size:.58rem; padding:5px 9px; }
.xf .ap-chip{ font-size:.6rem; padding:1px 5px; }
/* the thinking pill and the reply share one cell, so the reply takes the
   pill's place and the cell is the reply's size from the start */
.xf-slot{ display:grid; }
.xf-slot > *{ grid-area:1 / 1; }
.xf-work{ align-self:start; justify-self:start; }
.xf:not(.xf-js) .xf-work{ visibility:hidden; }
/* what an empty chat says, until the first prompt arrives */
.xf-hint{
  position:absolute; inset:0; margin:0; padding:0 24px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font:400 .68rem/1.5 var(--fb); color:var(--faint);
  opacity:0; transition:opacity .22s ease; pointer-events:none;
}
.xf-js:not(.xf-s1) .xf-hint{ opacity:1; }
.xf-js.xf-out .xf-hint{ opacity:0; }
/* every message arrives whole and fades in: typing would rewrap the bubble */
.xf-js .xf-m{ opacity:0; transform:translateY(6px); transition:opacity .38s ease, transform .38s ease; }
.xf-js.xf-s1 .xf-m1, .xf-js.xf-s2 .xf-m2, .xf-js.xf-s4 .xf-m3, .xf-js.xf-s5 .xf-m4{ opacity:1; transform:none; }
.xf-js .xf-reply{ opacity:0; transition:opacity .38s ease; }
.xf-js.xf-s3 .xf-m2 .xf-reply, .xf-js.xf-s6 .xf-m4 .xf-reply{ opacity:1; transition:opacity .4s ease .18s; }
.xf-js.xf-s3 .xf-m2 .xf-work, .xf-js.xf-s6 .xf-m4 .xf-work{ opacity:0; transition:opacity .18s ease; }
.xf-js.xf-out .xf-m{ opacity:0; transform:none; transition:opacity .4s ease; }

/* the run line under a reply: state, then OK or the three dots, then the
   rows that have landed. Each pair shares one cell, so a swap moves
   nothing, and the count sits in a fixed width so the line never jumps */
.xf-line{
  display:flex; align-items:center; gap:6px; white-space:nowrap; height:16px;
  font:400 .66rem/1 var(--fb); color:var(--slate);
}
.xf-st,.xf-state{ display:inline-grid; align-items:center; justify-items:start; }
.xf-st > span,.xf-state > span{ grid-area:1 / 1; transition:opacity .18s ease; }
.xf-st > .xf-st-a{ opacity:0; transition-delay:0s; }
.xf-st > .xf-st-b{ transition-delay:.18s; }
.xf-line.xf-run .xf-st > .xf-st-a{ opacity:1; transition-delay:.18s; }
.xf-line.xf-run .xf-st > .xf-st-b{ opacity:0; transition-delay:0s; }
.xf .tag{ font-size:.58rem; padding:3px 6px; line-height:1; }
.xf-state > .xf-ok{ transition-delay:.18s; }
.xf-state > .xf-wait{ display:inline-flex; gap:4px; padding-left:2px; opacity:0; transition-delay:0s; }
.xf-wait i{ width:4px; height:4px; border-radius:50%; background:var(--pos); animation:xf-bounce 1s infinite; }
.xf-wait i:nth-child(2){ animation-delay:.15s; }
.xf-wait i:nth-child(3){ animation-delay:.3s; }
@keyframes xf-bounce{ 0%,60%,100%{ opacity:.28 } 30%{ opacity:1 } }
.xf-line.xf-run .xf-state > .xf-ok{ opacity:0; transition-delay:0s; }
.xf-line.xf-run .xf-state > .xf-wait{ opacity:1; transition-delay:.18s; }
.xf-nn{ display:inline-flex; align-items:center; gap:6px; transition:opacity .3s ease; }
.xf-js .xf-line.xf-run:not(.xf-has-n) .xf-nn{ opacity:0; }
.xf-line b{ font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.xf-n{ display:inline-block; min-width:7ch; text-align:right; }

/* ---------- narrow two column desktops (screens about 1080 to 1250px wide) ----------
   the card is narrower, so the bubbles take a little more of it */
@container xf (max-width:519px){
  .xf-stage{
    --xf-srcw:36px; --xf-dstw:76px;
    grid-template-columns:var(--xf-srcw) minmax(0,1fr) clamp(250px, 58%, 352px) minmax(0,1fr) var(--xf-dstw);
  }
  .xf .ap-qrow{ max-width:94%; }
  .xf-body{ padding:11px 12px 13px; }
}

/* ---------- phones: sources in a row above, destinations in a row below,
   the wires fan down through the card. The threshold sits below the
   narrowest two column desktop (a 1081px screen gives the demo 438px), so
   a desktop never gets the tall phone layout ---------- */
@container xf (max-width:429px){
  .xf-stage{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"src" "card" "dst";
    row-gap:46px; padding:0;
  }
  .xf-src{ flex-direction:row; justify-content:center; gap:20px; }
  .xf-dst{ flex-direction:row; justify-content:center; gap:12px; }
  .xf-to{ width:min(88px, calc((100% - 48px) / 3)); }
  .xf .ap-qrow{ max-width:88%; }
  .xf-body{ padding:12px 14px 14px; }
}

/* browsers without container queries still get the phone layout, keyed to
   the screen instead of the demo's own width */
@supports not (container-type:inline-size){
  @media (max-width:560px){
    .xf-stage{
      grid-template-columns:minmax(0,1fr);
      grid-template-areas:"src" "card" "dst";
      row-gap:46px; padding:0;
    }
    .xf-src{ flex-direction:row; justify-content:center; gap:20px; }
    .xf-dst{ flex-direction:row; justify-content:center; gap:12px; }
    .xf-to{ width:min(88px, calc((100% - 48px) / 3)); }
  }
}

@media (prefers-reduced-motion:reduce){
  .xf-dot,.xf-wait i{ animation:none; }
  .xf-tile,.xf-ic,.xf-pill,.xf-pill > span,.xf-state > span,.xf-st > span,.xf-prog,.xf-wires .xf-ar,.xf-m,.xf-reply,.xf-work,.xf-hint{ transition:none; }
}

/* ============================================================
   AI DATA EXPORTS, SECTION 2: "Ask about this export", live
   One export's own chat panel. A colleague prompts a new Monday
   run and a backfill, Upbuild AI answers, the schedule list gains
   its row, the version pill turns v7 into v8, and the history
   travels from three platforms into a data warehouse.

   The box never changes size. Every element is in the layout from
   the first frame and only its opacity or transform ever moves, so
   no step can push, wrap or reflow anything. The height is auto on
   purpose: the content is the same in every frame, so the box is
   exactly as tall as that content (with a floor for air) and can
   never clip or overflow, whatever the width.

   CSP: style-src 'self', no unsafe-inline. No style attributes; the
   script only toggles classes and writes transforms through the CSSOM.
   Everything is scoped under .xc; keyframes are prefixed xc-.
   ============================================================ */
/* the same cap as the flow demo in section 1 of this page: in the stacked
   layout (1080px and below) the window stays a window instead of running
   the whole column; side by side the column is narrower than this anyway */
.xc-wrap{ container:xc / inline-size; width:100%; max-width:660px; margin-inline:auto; }

.xc.ap-win{ height:auto; min-height:500px; }

/* the part that fades between loops: the window chrome stays put */
.xc-main{
  flex:1 1 auto; display:flex; flex-direction:column;
  transition:opacity .4s ease;
}
.xc.xc-on-out .xc-main{ opacity:0; }
/* the reset between loops happens while faded out, with every
   transition switched off, so nothing is seen sliding backwards. Only the
   faded part: the pulse in the window bar never restarts */
.xc.xc-on-reset .xc-main *, .xc.xc-on-reset .xc-main *::before, .xc.xc-on-reset .xc-main *::after{
  transition:none !important; animation:none !important;
}

/* every label in the window reads at 10.5px or more */
.xc .ap-live{ font-size:.66rem; }

/* ---------- the panel's header: which export, which version ---------- */
.xc-head{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:11px 15px 10px; border-bottom:1px solid var(--line);
}
.xc-title{ flex:1; min-width:0; }
.xc-eb{
  display:block; font:500 .66rem/1 var(--fm); letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:5px;
}
.xc-name{
  display:block; font:800 .96rem/1.2 var(--fd); color:var(--ink);
  letter-spacing:-.012em; white-space:nowrap;
}
.xc-ver{
  flex:none; display:grid; min-width:38px;
  font:500 .72rem/1 var(--fm); color:var(--pos-deep);
  background:var(--card); border:1px solid #B9F3E6;
  padding:5px 10px; border-radius:var(--radius-pill);
}
/* the flip: v7 leaves upwards, then v8 rises into its place */
.xc-ver > span{ grid-area:1/1; text-align:center; }
.xc-v8{ opacity:0; transform:translateY(6px); }
.xc-on-add .xc-v7{
  opacity:0; transform:translateY(-6px);
  transition:opacity .18s ease .55s, transform .18s ease-in .55s;
}
.xc-on-add .xc-v8{
  opacity:1; transform:none;
  transition:opacity .26s ease .74s, transform .3s cubic-bezier(.2,.7,.3,1) .74s;
}
.xc-on-add .xc-ver{ animation:xc-flash 2s ease .6s; }
@keyframes xc-flash{
  0%{ background:var(--pos-bright); border-color:var(--pos-bright); color:#071018; }
  35%{ background:var(--pos-soft); border-color:#8EE6D2; color:var(--pos-deep); }
  100%{ background:var(--card); border-color:#B9F3E6; }
}

/* ---------- body: three fixed regions, top to bottom ---------- */
.xc-body{
  flex:1 1 auto; display:flex; flex-direction:column; gap:14px;
  padding:13px 15px 15px;
}

/* ---------- region 1: the schedules ---------- */
.xc-sched{ flex:none; }
.xc-lab{
  font:500 .66rem/1 var(--fm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin:0 0 8px;
}
/* three slots, always. The rows are placed by slot, so the list can
   make room for a new row without anything around it moving */
.xc-rows{
  --xc-rh:34px; --xc-gap:5px;
  position:relative; height:calc(var(--xc-rh) * 3 + var(--xc-gap) * 2);
}
.xc-row{
  --xc-slot:0; --xc-x:0px;
  position:absolute; top:0; left:0; right:0; height:var(--xc-rh);
  display:flex; align-items:center; gap:8px; padding:0 10px;
  background:var(--card); border:1px solid var(--line); border-radius:9px;
  font:400 .75rem/1.3 var(--fb); color:var(--text); white-space:nowrap;
  transform:translate(var(--xc-x), calc((var(--xc-rh) + var(--xc-gap)) * var(--xc-slot)));
  transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .45s ease;
  z-index:1;
}
.xc-ic{ flex:none; width:14px; height:14px; color:var(--faint); }
.xc-when b{ font-weight:600; color:var(--ink); }
.xc-when i{ font-style:normal; color:var(--faint); margin:0 5px; }
.xc-l2{ display:contents; }
/* the flex gap would open a wider space before the dot than after it */
.xc-what{ margin-left:-8px; }
.xc-what::before{ content:"\00B7"; color:var(--faint); margin:0 5px; }
.xc-how{
  margin-left:auto; font:500 .66rem/1 var(--fm); color:var(--slate);
  background:#EEF1F6; padding:4px 8px; border-radius:var(--radius-pill);
}

/* where each row sits before the change */
.xc-r-mon{ --xc-slot:1; --xc-x:-14px; opacity:0; }
.xc-r-month{ --xc-slot:1; }
.xc-ghost{
  --xc-slot:2; z-index:0; justify-content:center;
  background:transparent; border:1px dashed #C6CDDD;
  font:500 .66rem/1 var(--fm); letter-spacing:.04em; color:var(--faint);
}

/* and after it: the monthly row steps down, the Monday row slides in
   where it was, and the empty slot gives way */
.xc-on-add .xc-r-month{ --xc-slot:2; }
.xc-on-add .xc-ghost{ opacity:0; transition:opacity .2s ease; }
.xc-on-add .xc-r-mon{
  --xc-x:0px; opacity:1;
  background:#F2FDF9; border-color:#BDEFE2;
  transition:transform .6s cubic-bezier(.2,.7,.3,1) .28s, opacity .45s ease .28s;
  animation:xc-hi 2.6s ease .28s;
}
.xc-on-add .xc-r-mon .xc-how{ color:var(--pos-deep); background:var(--pos-soft); }
.xc-on-add .xc-r-mon .xc-ic{ color:var(--pos); }
@keyframes xc-hi{
  0%,30%{ background:var(--pos-soft); border-color:#8EE6D2; box-shadow:0 0 0 3px rgba(0,251,206,.18); }
  100%{ background:#F2FDF9; border-color:#BDEFE2; box-shadow:0 0 0 0 rgba(0,251,206,0); }
}

/* ---------- region 2: the conversation, two messages at most ---------- */
.xc-chat{
  flex:1 1 auto; position:relative;
  display:flex; flex-direction:column; justify-content:center; gap:11px;
}
.xc .ap-qrow{ max-width:88%; }
.xc .ap-av{ width:24px; height:24px; font-size:.66rem; }
.xc .ap-badge{ font-size:.66rem; letter-spacing:.08em; padding:3px 6px; margin-bottom:6px; }
.xc .ap-work{ font-size:.66rem; padding:6px 10px; }
.xc .ap-chip{ font-size:.66rem; }
.xc .ap-a{ max-width:100%; }
.xc .ap-a p.xc-reply{ margin:0; }
.xc .ap-q, .xc .xc-reply{ text-wrap:pretty; }
/* "Saved as version 8" is one thought: it never breaks in the middle */
.xc-nw{ white-space:nowrap; }

.xc-hint{
  position:absolute; inset:0; margin:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font:400 .74rem/1.5 var(--fb); color:var(--faint);
  transition:opacity .22s ease;
}
.xc-on-q .xc-hint{ opacity:0; }

/* the question arrives whole, never typed: typing rewraps the bubble */
.xc-qrow, .xc-ans{
  opacity:0; transform:translateY(6px);
  transition:opacity .38s ease, transform .38s ease;
}
.xc-on-q .xc-qrow, .xc-on-w .xc-ans, .xc-on-a .xc-ans{ opacity:1; transform:none; }
.xc-on-q .xc-qrow{ transition-delay:.22s; }

/* the thinking pill and the reply share one cell: the reply takes the
   pill's place, and the cell is the reply's size from the start */
.xc-slot{ display:grid; }
.xc-slot > *{ grid-area:1/1; }
.xc-work{ align-self:start; justify-self:start; }
.xc-reply{ opacity:0; transition:opacity .38s ease; }
.xc-on-a .xc-reply{ opacity:1; transition:opacity .4s ease .18s; }
.xc-on-a .xc-work{ opacity:0; transition:opacity .18s ease; }

/* ---------- region 3: the run, where the data travels ---------- */
.xc-strip{
  flex:none; display:flex; flex-direction:column; gap:10px;
  background:#FAFBFD; border:1px solid var(--line); border-radius:11px;
  padding:10px 12px 12px;
}
.xc-strip-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.xc-st, .xc-tags{ display:grid; }
/* a swap is sequential: the outgoing label leaves first and the incoming
   one follows, so two labels are never seen on top of each other */
.xc-st > *, .xc-tags > *{ grid-area:1/1; transition:opacity .2s ease; }
.xc-st{ font:600 .74rem/1.3 var(--fb); color:var(--ink); white-space:nowrap; }
.xc-tags{ justify-items:end; }
.xc .xc-tags .tag{ font-size:.66rem; padding:4px 8px; white-space:nowrap; }
.xc .xc-tags .xc-t-idle{ background:#EEF1F6; color:var(--slate); }
.xc-t-run{ display:inline-flex; align-items:center; gap:5px; }
.xc-t-run i{
  width:6px; height:6px; border-radius:50%; background:var(--pos-deep);
  animation:xc-pulse 1.4s ease-in-out infinite;
}
@keyframes xc-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

.xc-st-run, .xc-st-done, .xc-t-run, .xc-t-done{ opacity:0; }
.xc-on-go .xc-st-idle, .xc-on-go .xc-t-idle{ opacity:0; }
.xc-on-go:not(.xc-on-done) .xc-st-run, .xc-on-go:not(.xc-on-done) .xc-t-run,
.xc-on-done .xc-st-done, .xc-on-done .xc-t-done{ opacity:1; transition:opacity .32s ease .2s; }

/* three platforms on the left, one warehouse on the right, the lanes
   between them drawn by the script at the box's own pixel size. The markup
   carries a stretched default, its ends tucked under the chips and the
   node, so the lanes are there even before (or without) the script */
.xc-flow{
  position:relative; height:76px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.xc-lanes{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; }
.xc-lane{ fill:none; stroke:#D8DEE9; stroke-width:1.5; transition:stroke .6s ease; }
.xc-on-go .xc-lane{ stroke:#A9EBDC; }
.xc-on-done .xc-lane{ stroke:var(--pos); }
.xc-dots{
  fill:none; stroke:var(--pos); stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:0 14; opacity:0; transition:opacity .45s ease;
}
.xc-on-go .xc-dots{ opacity:1; animation:xc-flow 1s linear infinite; }
.xc-on-go .xc-d2{ animation-duration:.86s; }
.xc-on-go .xc-d3{ animation-duration:1.14s; }
.xc-on-done .xc-dots{ opacity:0; }
@keyframes xc-flow{ from{ stroke-dashoffset:28 } to{ stroke-dashoffset:0 } }

.xc-srcs{ position:relative; display:flex; flex-direction:column; gap:5px; }
.xc-src{
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(14,21,38,.05);
}
.xc-src img{ width:13px; height:13px; }
.xc-on-go:not(.xc-on-done) .xc-src{ animation:xc-ping 2.4s ease-out infinite; }
.xc-on-go:not(.xc-on-done) .xc-src:nth-child(2){ animation-delay:.8s; }
.xc-on-go:not(.xc-on-done) .xc-src:nth-child(3){ animation-delay:1.6s; }
@keyframes xc-ping{
  0%{ box-shadow:0 0 0 0 rgba(10,174,150,.35), 0 1px 2px rgba(14,21,38,.05); }
  60%,100%{ box-shadow:0 0 0 6px rgba(10,174,150,0), 0 1px 2px rgba(14,21,38,.05); }
}

.xc-dw{
  position:relative; flex:none; display:flex; align-items:center; gap:6px;
  padding:5px 11px 5px 8px; background:var(--card);
  border:1px solid var(--line); border-radius:10px;
  font:600 .72rem/1 var(--fb); color:var(--ink); white-space:nowrap;
  box-shadow:0 1px 2px rgba(14,21,38,.05);
  transition:border-color .5s ease;
}
/* the icon's own box is big enough to hold the done tick on its corner */
.xc-dw-icw{ position:relative; flex:none; width:24px; height:24px; }
.xc-dw-ic{ position:absolute; left:1px; top:2px; width:18px; height:18px; color:var(--slate); transition:color .5s ease; }
.xc-on-go .xc-dw{ border-color:#8EE6D2; }
.xc-on-go .xc-dw-ic{ color:var(--pos-deep); }
.xc-ok{
  position:absolute; right:1px; bottom:1px; width:13px; height:13px; border-radius:50%;
  background:var(--pos); box-shadow:0 0 0 2px var(--card);
  transform:scale(0); transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.xc-ok::after{
  content:""; position:absolute; left:4.3px; top:2.6px; width:3.2px; height:5.8px;
  border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(45deg);
}
.xc-on-done .xc-ok{ transform:scale(1); }

/* the progress row */
.xc-prog{ display:flex; align-items:center; gap:10px; }
.xc-bar{ flex:1 1 auto; min-width:0; position:relative; height:6px; border-radius:3px; background:#E7EBF2; }
.xc-bar b, .xc-bar i{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:3px; transform-origin:left center; }
.xc-bar b{ background:#C4EDE2; transition:opacity .35s ease; }
.xc-bar i{
  background:linear-gradient(90deg, var(--pos), #19E3BE);
  transform:scaleX(0); opacity:0; transition:opacity .3s ease;
}
.xc-on-go .xc-bar b{ opacity:0; }
.xc-on-go .xc-bar i{ opacity:1; }
.xc-on-done .xc-bar i{ transform:scaleX(1); }
/* fixed slots in a mono face: the longest label fits, so a changing
   number can never wrap or nudge the bar */
.xc-month, .xc-count{
  flex:none; font:500 .7rem/1 var(--fm); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.xc-month{ width:8.4ch; color:var(--ink); }
.xc-count{ width:12.4ch; color:var(--faint); }
.xc-count b{ font-weight:500; color:var(--slate); }
.xc-on-done .xc-count b{ color:var(--ink); }

/* ---------- narrow boxes (phones, and the stacked layout's edges) ---------- */
/* a schedule row stops fitting one line around here: it becomes two, the
   when on top, the what and how beneath, as plain text */
@container xc (max-width:440px){
  .xc-rows{ --xc-rh:44px; }
  .xc-row{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    column-gap:9px; row-gap:3px; align-content:center;
  }
  .xc-ghost{ display:flex; }
  .xc-ic{ grid-row:1 / span 2; align-self:center; }
  .xc-l2{ display:block; grid-column:2; font-size:.7rem; color:var(--slate); }
  .xc-what{ margin-left:0; }
  .xc-what::before{ content:none; }
  .xc-how{ margin:0; padding:0; background:none; font:inherit; color:inherit; }
  .xc-what + .xc-how::before{ content:"\00B7"; color:var(--faint); margin:0 5px; }
  .xc-on-add .xc-r-mon .xc-how{ background:none; color:var(--pos-deep); }
}
@container xc (max-width:380px){
  .xc-head{ padding:10px 13px 9px; }
  .xc-body{ padding:12px 13px 13px; gap:13px; }
  .xc .ap-qrow{ max-width:94%; }
  .xc-strip{ padding:10px 10px 11px; }
  .xc-prog{ gap:8px; }
  .xc-dw{ padding:5px 9px 5px 7px; }
}

@media (prefers-reduced-motion:reduce){
  .xc *, .xc *::before, .xc *::after{ animation:none !important; transition:none !important; }
}

/* ============================================================
   AI INSIGHTS, "From insight to dashboard"  (data-live="ins-dash")
   One app window, one loop. A shared chat answers with a chart,
   a colleague asks for it on the dashboard, the view changes to
   the Executive Overview and the chart card travels from the chat
   into the empty slot waiting for it.
   Rules of the house: the window has a fixed height for its width
   band and never resizes during the loop; nothing scrolls; no text
   under 10.5px; no inline styles (style-src 'self'), so every
   value lives here as a class and JS only writes through the CSSOM.
   Every selector is scoped under .i2d. No em dashes in this file.
   ============================================================ */

/* the root is a size container, so the dashboard lays itself out for
   the width the section gives it (half a desktop column, a full
   tablet row, a phone), not for the viewport */
.i2d{ container:i2d / inline-size; position:relative; }

.i2d-win{
  height:560px;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 30px 74px -24px rgba(9,16,32,.4), 0 2px 6px rgba(9,16,32,.06);
}
@container i2d (min-width:440px){ .i2d-win{ height:524px; } }
@container i2d (min-width:680px){ .i2d-win{ height:540px; } }

/* ---------- window chrome ---------- */
.i2d-bar{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:9px 12px; background:#F6F7FB; border-bottom:1px solid var(--line);
}
.i2d-lights{ display:inline-flex; gap:6px; flex:none; }
.i2d-lights i{ width:9px; height:9px; border-radius:50%; background:#E6B0A6; }
.i2d-lights i:nth-child(2){ background:#E8CFA0; }
.i2d-lights i:nth-child(3){ background:#A9DFC9; }
/* two views, one lit: the pill moves when the view changes, the words never do */
.i2d-tabs{ margin-left:auto; display:inline-flex; gap:4px; min-width:0; }
.i2d-tab{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font:500 10.5px/1 var(--fm); letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); padding:5px 9px; border:1px solid transparent; border-radius:var(--radius-pill);
  transition:color .35s ease, background-color .35s ease, border-color .35s ease;
}
.i2d-tab i{ width:6px; height:6px; border-radius:50%; background:#C6CDDD; flex:none; transition:background-color .35s ease; }
.i2d .i2d-tab-chat,
.i2d.i2d-dashon .i2d-tab-dash{ color:var(--pos-deep); background:var(--pos-soft); border-color:#B9F3E6; }
.i2d .i2d-tab-chat i,
.i2d.i2d-dashon .i2d-tab-dash i{ background:var(--pos-deep); animation:i2d-pulse 1.8s infinite; }
.i2d.i2d-dashon .i2d-tab-chat{ color:var(--faint); background:transparent; border-color:transparent; }
.i2d.i2d-dashon .i2d-tab-chat i{ background:#C6CDDD; animation:none; }
@keyframes i2d-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ---------- the two views, stacked ---------- */
.i2d-views{ position:relative; flex:1; min-height:0; overflow:hidden; transition:opacity .38s ease; }
.i2d.i2d-out .i2d-views{ opacity:0; }
.i2d-chat,.i2d-dash{
  position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden;
  transition:opacity .42s ease, visibility 0s linear 0s;
}
.i2d-chat{ background:var(--card); }
.i2d-dash{ background:#F4F6FA; opacity:0; visibility:hidden; transition:opacity .4s ease .04s, visibility 0s linear .44s; }
.i2d.i2d-dashon .i2d-chat{ opacity:0; visibility:hidden; transition:opacity .36s ease, visibility 0s linear .36s; }
.i2d.i2d-dashon .i2d-dash{ opacity:1; visibility:visible; transition:opacity .4s ease .04s, visibility 0s linear 0s; }
/* the loop resets while the views are faded out: no transition may show */
.i2d.i2d-snap *,.i2d.i2d-snap *::before,.i2d.i2d-snap *::after{ transition:none !important; animation:none !important; }
.i2d-park{ position:absolute; inset:0; z-index:4; pointer-events:none; }

/* ---------- the head both views share ---------- */
.i2d-head{
  flex:none; display:flex; align-items:center; gap:10px; min-width:0;
  padding:11px 15px 10px; background:var(--card); border-bottom:1px solid var(--line);
}
.i2d-ht{ min-width:0; }
.i2d-eb{
  display:block; font:500 10.5px/1 var(--fm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-bottom:5px;
}
.i2d-h{ display:block; font:800 15px/1.15 var(--fd); letter-spacing:-.012em; color:var(--ink); }
.i2d-meta{ display:block; font:400 11px/1.35 var(--fb); color:var(--slate); margin-top:3px; }
.i2d-avs{ margin-left:auto; display:flex; flex:none; }
.i2d-avs .i2d-av{ box-shadow:0 0 0 2px var(--card); }
.i2d-avs .i2d-av + .i2d-av{ margin-left:-2px; }

/* ---------- stage A: the shared chat ---------- */
.i2d-log{
  flex:1; min-height:0; overflow:hidden;
  padding:13px 15px 12px; display:flex; flex-direction:column; gap:10px;
}
.i2d-log > *{ flex:none; }
.i2d-qrow{ align-self:flex-end; display:flex; align-items:flex-end; gap:7px; max-width:88%; }
.i2d-q{
  background:var(--pos-soft); color:var(--ink); font:400 12px/1.5 var(--fb);
  padding:8px 11px; border-radius:12px 12px 4px 12px;
  text-wrap:pretty; /* a question that wraps never leaves one word on its own line */
}
.i2d-av{
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font:600 10.5px/1 var(--fm); color:#fff; background:var(--ink-3,#20294A);
}
.i2d-av.i2d-p2{ background:#6D28D9; }
.i2d-av.i2d-p3{ background:var(--pos-deep); }
/* full width, so the card's fallback width (no JS) has a real box to measure against */
.i2d-a{ align-self:stretch; min-width:0; }
.i2d-badge{
  display:block; width:-moz-fit-content; width:fit-content;
  font:500 10.5px/1 var(--fm); letter-spacing:.08em; text-transform:uppercase;
  color:#071018; background:var(--pos-bright); padding:3px 6px; border-radius:4px; margin-bottom:7px;
}
.i2d-ans > p{ font:400 12px/1.55 var(--fb); color:var(--text); margin:0; }
.i2d-ans > p + .i2d-host{ margin-top:8px; }
.i2d-work{
  display:inline-flex; align-items:center; gap:8px;
  font:400 10.5px/1 var(--fm); color:var(--faint);
  background:#F6F7FB; border:1px solid var(--line); padding:5px 9px; border-radius:var(--radius-pill);
}
.i2d-dots{ display:inline-flex; gap:3px; }
.i2d-dots i{ width:3px; height:3px; border-radius:50%; background:var(--pos); animation:i2d-bounce 1s infinite; }
.i2d-dots i:nth-child(2){ animation-delay:.15s; }
.i2d-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes i2d-bounce{ 0%,60%,100%{ opacity:.28 } 30%{ opacity:1 } }

/* the steps play in one by one. Without JS every step shows, finished */
.i2d-js .i2d-step:not(.is-in){ display:none; }
.i2d-js .i2d-step.is-in{ animation:i2d-in .34s ease both; }
.i2d-a .i2d-work{ display:none; }
.i2d-js .i2d-a:not(.is-done) .i2d-work{ display:inline-flex; }
.i2d-js .i2d-a:not(.is-done) .i2d-ans{ display:none; }
.i2d-js .i2d-a.is-done .i2d-ans{ animation:i2d-in .34s ease both; }
@keyframes i2d-in{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }

/* the answer's chart card. Its box is exactly the dashboard slot's box
   (JS copies the slot's size into --i2d-cw / --i2d-ch before the card
   shows), so the trip into the slot is a pure move, never a stretch */
.i2d-host{ position:relative; width:var(--i2d-cw, min(100%, 300px)); height:var(--i2d-ch, 150px); max-width:100%; }
.i2d-card{
  position:absolute; inset:0; display:flex; flex-direction:column; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px 10px; overflow:hidden;
  box-shadow:0 1px 2px rgba(14,21,38,.05);
  transform-origin:50% 50%;
  transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.i2d-card.is-lift{
  transform:scale(1.03); border-color:#9CEBD8;
  box-shadow:0 22px 40px -18px rgba(9,16,32,.45), 0 0 0 3px rgba(0,251,206,.18);
}
/* parked above both views while the view changes under it */
.i2d-park > .i2d-card{ inset:auto; }
/* the FLIP's invert frame: applied with no transition at all */
.i2d .i2d-card.i2d-notr{ transition:none; }
.i2d .i2d-card.is-fly{
  z-index:5;
  transition:transform .95s cubic-bezier(.45,.05,.2,1), box-shadow .95s ease;
  box-shadow:0 26px 44px -20px rgba(9,16,32,.5), 0 0 0 3px rgba(0,251,206,.14);
}

/* tile and card titles */
.i2d-th{ display:flex; align-items:center; gap:7px; min-width:0; flex:none; }
.i2d-th b{ font:600 12px/1.25 var(--fb); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.i2d-th u{
  flex:none; text-decoration:none; font:500 10.5px/1 var(--fm); letter-spacing:.05em;
  color:var(--pos-deep); background:var(--pos-soft); padding:2px 5px; border-radius:4px;
}
.i2d-ts{ flex:none; font:400 10.5px/1.3 var(--fm); color:var(--faint); margin:3px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.i2d-card .i2d-ts{ margin:3px 0 0; }

/* the four markets, horizontal bars that grow when the card gains .go */
.i2d-hbars{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:space-evenly; margin-top:4px; }
.i2d-hbars > div{ display:grid; grid-template-columns:58px minmax(0,1fr) 34px; align-items:center; gap:8px; }
.i2d-hbars em{ font:400 11px/1.2 var(--fb); font-style:normal; color:var(--text); white-space:nowrap; }
.i2d-hbars span{ display:block; height:9px; border-radius:5px; background:#EEF1F6; overflow:hidden; }
.i2d-hbars i{
  display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg, var(--pos), var(--pos-bright));
  transform-origin:0 50%;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
/* the bars wait at zero only when JS is there to grow them */
.i2d-js .i2d-hbars:not(.go) i{ transform:scaleX(0); }
.i2d-hbars > div:nth-child(2) i{ transition-delay:.08s; }
.i2d-hbars > div:nth-child(3) i{ transition-delay:.16s; }
.i2d-hbars > div:nth-child(4) i{ transition-delay:.24s; }
.i2d-hbars i.i2d-w100{ width:100%; }
.i2d-hbars i.i2d-w71{ width:71%; }
.i2d-hbars i.i2d-w46{ width:46%; }
.i2d-hbars i.i2d-w33{ width:33%; }
.i2d-hbars b{ font:500 11px/1.2 var(--fm); color:var(--pos-deep); text-align:right; white-space:nowrap; }

/* ---------- stage B: the dashboard ---------- */
.i2d-canvas{ flex:1; min-height:0; display:flex; flex-direction:column; gap:9px; padding:11px 12px 12px; }
.i2d-kpis{ flex:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.i2d-kpi{
  min-width:0; background:var(--card); border:1px solid var(--line); border-radius:9px;
  padding:8px 10px 8px; box-shadow:0 1px 2px rgba(14,21,38,.04);
}
.i2d-kpi > span{ display:block; font:500 10.5px/1 var(--fm); letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
.i2d-kpi > b{ display:block; font:700 17px/1.1 var(--fd); color:var(--ink); margin-top:5px; letter-spacing:-.01em; white-space:nowrap; }
.i2d-kr{ display:flex; align-items:flex-end; gap:8px; margin-top:5px; }
.i2d-kr em{ flex:none; font:500 10.5px/1 var(--fm); font-style:normal; color:var(--pos-deep); }
/* every trend ends on its tallest, darkest bar, because every figure grew;
   a wide tile keeps the spark compact at its right edge instead of stretching it */
.i2d-spark{ flex:1; min-width:0; max-width:104px; margin-left:auto; display:flex; align-items:flex-end; gap:2px; height:12px; }
.i2d-spark i{ flex:1; border-radius:1px; background:#9CEBD8; }
.i2d-spark i:nth-child(1){ height:38% } .i2d-spark i:nth-child(2){ height:52% }
.i2d-spark i:nth-child(3){ height:44% } .i2d-spark i:nth-child(4){ height:66% }
.i2d-spark i:nth-child(5){ height:58% } .i2d-spark i:nth-child(6){ height:80% }
.i2d-spark i:nth-child(7){ height:72% } .i2d-spark i:nth-child(8){ height:100%; background:var(--pos); }
.i2d-spark.i2d-sp2 i:nth-child(1){ height:30% } .i2d-spark.i2d-sp2 i:nth-child(2){ height:42% }
.i2d-spark.i2d-sp2 i:nth-child(3){ height:36% } .i2d-spark.i2d-sp2 i:nth-child(4){ height:54% }
.i2d-spark.i2d-sp2 i:nth-child(5){ height:62% } .i2d-spark.i2d-sp2 i:nth-child(6){ height:58% }
.i2d-spark.i2d-sp2 i:nth-child(7){ height:78% }
.i2d-spark.i2d-sp3 i:nth-child(1){ height:62% } .i2d-spark.i2d-sp3 i:nth-child(2){ height:56% }
.i2d-spark.i2d-sp3 i:nth-child(3){ height:66% } .i2d-spark.i2d-sp3 i:nth-child(4){ height:60% }
.i2d-spark.i2d-sp3 i:nth-child(5){ height:72% } .i2d-spark.i2d-sp3 i:nth-child(6){ height:68% }
.i2d-spark.i2d-sp3 i:nth-child(7){ height:80% }
.i2d-spark.i2d-sp4 i:nth-child(1){ height:46% } .i2d-spark.i2d-sp4 i:nth-child(2){ height:40% }
.i2d-spark.i2d-sp4 i:nth-child(3){ height:56% } .i2d-spark.i2d-sp4 i:nth-child(4){ height:50% }
.i2d-spark.i2d-sp4 i:nth-child(5){ height:64% } .i2d-spark.i2d-sp4 i:nth-child(6){ height:74% }
.i2d-spark.i2d-sp4 i:nth-child(7){ height:70% }

/* the tiles: phones show the weekly revenue and the slot; wider
   windows add the platform split and the orders trend */
.i2d-grid{
  flex:1; min-height:0; display:grid; gap:9px;
  grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr));
}
.i2d-tile{
  min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px 10px; box-shadow:0 1px 2px rgba(14,21,38,.04);
}
.i2d .i2d-t-plat,.i2d .i2d-t-ord{ display:none; }

/* revenue by week: twelve bars on a light grid */
.i2d-vchart{ flex:1; min-height:0; display:flex; flex-direction:column; margin-top:9px; }
.i2d-vbars{
  flex:1; min-height:0; display:flex; align-items:flex-end; gap:4px; padding-top:2px;
  background:repeating-linear-gradient(to top, #EEF1F6 0 1px, transparent 1px 25%);
  border-bottom:1px solid var(--line);
}
.i2d-vbars i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg, var(--pos-bright), var(--pos) 75%); }
.i2d-vbars i:nth-child(odd){ opacity:.82; }
.i2d-vbars .i2d-h44{ height:44% } .i2d-vbars .i2d-h52{ height:52% } .i2d-vbars .i2d-h48{ height:48% }
.i2d-vbars .i2d-h61{ height:61% } .i2d-vbars .i2d-h57{ height:57% } .i2d-vbars .i2d-h66{ height:66% }
.i2d-vbars .i2d-h63{ height:63% } .i2d-vbars .i2d-h72{ height:72% } .i2d-vbars .i2d-h70{ height:70% }
.i2d-vbars .i2d-h81{ height:81% } .i2d-vbars .i2d-h78{ height:78% } .i2d-vbars .i2d-h92{ height:92% }
.i2d-xax{ flex:none; display:flex; justify-content:space-between; margin-top:5px; padding:0 2px; }
.i2d-xax span{ font:400 10.5px/1 var(--fm); color:var(--faint); }

/* spend by platform: a donut and its legend */
.i2d-donut-row{ flex:1; min-height:0; display:flex; align-items:center; gap:14px; margin-top:6px; }
.i2d-donut{
  flex:none; position:relative; width:74px; height:74px; border-radius:50%;
  background:conic-gradient(var(--pos) 0 46%, var(--pos-bright) 46% 84%, #9CEBD8 84% 100%);
}
.i2d-donut::after{ content:""; position:absolute; inset:17px; border-radius:50%; background:var(--card); }
.i2d-legend{ list-style:none; margin:0; padding:0; flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.i2d-legend li{ display:flex; align-items:center; gap:7px; font:400 11px/1.2 var(--fb); color:var(--text); white-space:nowrap; }
.i2d-legend i{ flex:none; width:8px; height:8px; border-radius:2px; }
.i2d-legend i.i2d-k1{ background:var(--pos); }
.i2d-legend i.i2d-k2{ background:var(--pos-bright); }
.i2d-legend i.i2d-k3{ background:#9CEBD8; }
.i2d-legend em{ margin-left:auto; padding-left:8px; font:500 11px/1.2 var(--fm); font-style:normal; color:var(--ink); }

/* orders by week: one area line */
.i2d-area{ flex:1; min-height:0; display:flex; flex-direction:column; margin-top:9px; }
.i2d-area svg{
  flex:1; min-height:0; width:100%; height:auto; display:block;
  background:repeating-linear-gradient(to top, #EEF1F6 0 1px, transparent 1px 25%);
  border-bottom:1px solid var(--line);
}

/* the empty slot the answer lands in */
.i2d-slot{ position:relative; min-width:0; min-height:0; border-radius:10px; }
.i2d-slot::before{
  content:""; position:absolute; inset:0; border-radius:10px;
  border:1.5px dashed #7ED9C6; background:rgba(221,251,243,.5);
}
.i2d-slot-lab{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font:500 10.5px/1 var(--fm); letter-spacing:.06em; text-transform:uppercase; color:var(--pos-deep);
}
.i2d-slot-lab i{ position:relative; width:22px; height:22px; border-radius:50%; background:var(--card); border:1px solid #9CEBD8; }
.i2d-slot-lab i::before,.i2d-slot-lab i::after{
  content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; margin:-.75px 0 0 -5px;
  background:var(--pos-deep); border-radius:1px;
}
.i2d-slot-lab i::after{ transform:rotate(90deg); }
.i2d-slot > .i2d-card{ z-index:1; }
/* landed: a mint glow that settles into a mint edge, and the badge */
.i2d-slot.is-landed > .i2d-card{ border-color:var(--pos); animation:i2d-glow 1.7s ease-out both; }
@keyframes i2d-glow{
  0%{ box-shadow:0 0 0 0 rgba(0,251,206,0), 0 1px 2px rgba(14,21,38,.05); }
  22%{ box-shadow:0 0 0 4px rgba(0,251,206,.5), 0 0 30px 6px rgba(0,251,206,.42); }
  100%{ box-shadow:0 0 0 3px rgba(0,251,206,.22), 0 6px 18px -8px rgba(10,174,150,.4); }
}
.i2d-new{
  position:absolute; z-index:3; top:-9px; right:10px;
  font:500 10.5px/1 var(--fm); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  color:#071018; background:var(--pos-bright); padding:4px 8px; border-radius:var(--radius-pill);
  box-shadow:0 4px 10px -4px rgba(6,122,105,.55);
  opacity:0; transform:translateY(4px) scale(.92);
  transition:opacity .3s ease, transform .4s cubic-bezier(.3,1.5,.5,1);
}
.i2d-slot.is-landed > .i2d-new{ opacity:1; transform:none; transition-delay:.25s; }

/* ---------- width bands ---------- */
/* phones: the four KPIs share one strip, the dashboard keeps two tiles (the weekly
   revenue and the slot), and the slot row is fixed so the chart card is roomy */
@container i2d (max-width:439.98px){
  /* a little more room for the questions, so Marta's fits on one line on most phones */
  .i2d-qrow{ max-width:94%; }
  .i2d-dash .i2d-avs{ display:none; }
  .i2d-kpis{
    /* the two euro figures are the widest, ROAS the narrowest */
    grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1fr); gap:0;
    background:var(--card); border:1px solid var(--line); border-radius:9px;
    box-shadow:0 1px 2px rgba(14,21,38,.04);
  }
  .i2d-kpi{ border:0; border-radius:0; box-shadow:none; background:none; padding:9px 4px 10px 9px; }
  .i2d-kpi + .i2d-kpi{ border-left:1px solid #EEF1F6; }
  .i2d-kpi > b{ font-size:15px; margin-top:6px; }
  .i2d-kr{ display:none; }
  .i2d-grid{ grid-template-rows:minmax(0,1fr) 158px; }
}
@container i2d (min-width:440px){
  .i2d-kpis{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .i2d-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .i2d .i2d-t-plat,.i2d .i2d-t-ord{ display:flex; }
}
/* the narrowest desktop column: the card's source chip gives its room to the
   title, and the donut steps down so the legend keeps its figures */
@container i2d (min-width:440px) and (max-width:499.98px){
  .i2d-card .i2d-th u{ display:none; }
  .i2d-donut{ width:62px; height:62px; }
  .i2d-donut::after{ inset:14px; }
  .i2d-donut-row{ gap:10px; }
  .i2d-legend em{ padding-left:6px; }
}
/* the narrowest three-column window (tablets): the platform tile is a third of
   the row, so the donut steps down and the legend's figures stay in line */
@container i2d (min-width:680px) and (max-width:759.98px){
  .i2d-donut{ width:62px; height:62px; }
  .i2d-donut::after{ inset:14px; }
  .i2d-donut-row{ gap:10px; }
  .i2d-legend em{ padding-left:6px; }
}
@container i2d (min-width:680px){
  .i2d-head{ padding:12px 18px 11px; }
  /* a wide window keeps the conversation in a centred column, like the app,
     and the chat reads a size up */
  .i2d-log{ padding:16px max(18px, calc((100% - 640px) / 2)) 12px; gap:12px; }
  .i2d-q,.i2d-ans > p{ font-size:13px; }
  .i2d-h{ font-size:16px; }
  .i2d-canvas{ padding:13px 16px 14px; gap:11px; }
  .i2d-kpis{ gap:10px; }
  .i2d-kpi{ padding:10px 12px; }
  .i2d-kpi > b{ font-size:19px; }
  .i2d-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
  .i2d-t-rev,.i2d-t-ord{ grid-column:span 2; }
  .i2d-vbars{ gap:6px; }
}

@media (prefers-reduced-motion:reduce){
  .i2d *,.i2d *::before,.i2d *::after{ animation:none !important; transition:none !important; }
}

/* ============================================================
   AI ALERTS, "Write an alert in one sentence", live
   One engine, three scenes (data-scene="budget|naming|gtm").
   A colleague writes the rule, Upbuild AI sets it up and shows
   what it covers, and the alert itself arrives as a message in
   the destination app (Microsoft Teams, Slack, email), sliding in
   as a card over the lower part of the window.

   The window never changes size. Every message is in the layout
   from the first frame and only its opacity or transform ever
   moves. The body is a grid whose single cell holds both the chat
   and the overlay card (bottom aligned), so the overlay can never
   add height, overflow or scroll: the body is as tall as the
   taller of the two, with a floor for air, whatever the width.

   CSP: style-src 'self', no unsafe-inline. No style attributes;
   the script only toggles classes on the root (al-on-*).
   Everything is scoped under .al; keyframes are prefixed al-.
   No em dashes, by owner rule.
   ============================================================ */
/* the wrapper keeps room on the right and below, so the alert card can
   pop out past the window's edges and still stay inside the demo's box */
.al-wrap{
  --al-outr:30px; --al-outb:34px;
  container:al / inline-size; box-sizing:content-box; width:auto; max-width:660px; margin-inline:auto;
  padding:0 var(--al-outr) var(--al-outb) 0;
}
@media (max-width:560px){ .al-wrap{ --al-outr:16px; --al-outb:18px; } }

/* the .ap-win chrome, with its viewport-based height replaced: the
   content is the same in every frame, so the box is exactly as tall as
   that content and can never clip anything */
.al.ap-win{ height:auto; min-height:0; overflow:visible; }
/* the window no longer clips, so the bar rounds its own top corners */
.al .ap-bar{ border-radius:15px 15px 0 0; }
.al .ap-live{ font-size:.66rem; }

/* the part that fades between loops: the window bar stays put */
.al-main{ flex:1 1 auto; display:flex; flex-direction:column; transition:opacity .4s ease; }
.al.al-on-out .al-main{ opacity:0; }
/* the reset between loops happens while faded out, with every transition
   switched off, so nothing is seen sliding backwards */
.al.al-on-reset .al-main *, .al.al-on-reset .al-main *::before, .al.al-on-reset .al-main *::after{
  transition:none !important; animation:none !important;
}

/* ---------- the head: which organisation, which kind of alert ---------- */
.al-head{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:11px 15px 10px; border-bottom:1px solid var(--line);
}
.al-title{ flex:1 1 auto; min-width:0; }
.al-eb{
  display:block; font:500 .66rem/1 var(--fm); letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.al-name{
  display:block; font:800 .96rem/1.2 var(--fd); color:var(--ink);
  letter-spacing:-.012em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* the count of live alerts: 3 leaves upwards, 4 rises into its place */
.al-count{
  flex:none; display:grid;
  font:500 .72rem/1 var(--fm); color:var(--pos-deep);
  background:var(--card); border:1px solid #B9F3E6;
  padding:5px 10px; border-radius:var(--radius-pill); white-space:nowrap;
}
.al-count > span{ grid-area:1/1; text-align:center; }
.al-c4{ opacity:0; transform:translateY(6px); }
.al-on-a .al-c3{
  opacity:0; transform:translateY(-6px);
  transition:opacity .18s ease .5s, transform .18s ease-in .5s;
}
.al-on-a .al-c4{
  opacity:1; transform:none;
  transition:opacity .26s ease .7s, transform .3s cubic-bezier(.2,.7,.3,1) .7s;
}
.al-on-a .al-count{ animation:al-flash 2s ease .55s; }
@keyframes al-flash{
  0%{ background:var(--pos-bright); border-color:var(--pos-bright); color:#071018; }
  35%{ background:var(--pos-soft); border-color:#8EE6D2; color:var(--pos-deep); }
  100%{ background:var(--card); border-color:#B9F3E6; }
}

/* ---------- the body: one cell, the chat and the overlay stacked ---------- */
.al-body{
  --al-rise:12px; --al-padx:15px; --al-padb:15px;
  flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1fr);
  min-height:392px; padding:13px var(--al-padx) var(--al-padb);
}
.al-chat{
  grid-area:1/1; align-self:stretch; position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-start; gap:11px; min-width:0;
  transition:opacity .5s ease;
}
/* the chat steps back while the alert is on top of it */
.al-on-over .al-chat{ opacity:.5; }
.al-hint{
  position:absolute; inset:0; margin:0; padding:0 8%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font:400 .74rem/1.5 var(--fb); color:var(--faint);
  transition:opacity .22s ease;
}
.al-on-q .al-hint{ opacity:0; }

/* the conversation, in the site's chat primitives, every label at 10.5px or more */
.al .ap-qrow{ max-width:88%; }
.al .ap-av{ width:24px; height:24px; font-size:.66rem; }
.al .ap-badge{ font-size:.66rem; letter-spacing:.08em; padding:3px 6px; margin-bottom:6px; }
.al .ap-work{ font-size:.66rem; padding:6px 10px; }
.al .ap-a{ max-width:100%; }
.al .ap-q, .al .al-txt{ text-wrap:pretty; }
.al .ap-a p.al-txt{ margin:0 0 9px; }

/* the question arrives whole, never typed: typing rewraps the bubble */
.al-qrow, .al-ans{
  opacity:0; transform:translateY(6px);
  transition:opacity .38s ease, transform .38s ease;
}
.al-on-q .al-qrow, .al-on-w .al-ans, .al-on-a .al-ans{ opacity:1; transform:none; }
.al-on-q .al-qrow{ transition-delay:.22s; }

/* the thinking pill and the reply share one cell: the reply takes the
   pill's place, and the cell is the reply's size from the start */
.al-slot{ display:grid; grid-template-columns:minmax(0,1fr); }
.al-slot > *{ grid-area:1/1; min-width:0; }
.al-work{ align-self:start; justify-self:start; }
.al-reply{ opacity:0; transition:opacity .38s ease; }
.al-on-a .al-reply{ opacity:1; transition:opacity .4s ease .18s; }
.al-on-a .al-work{ opacity:0; transition:opacity .18s ease; }

/* the rule card: what was set up, in four rows, a beat after the sentence */
.al-rule{
  background:var(--card); border:1px solid var(--line); border-radius:9px; overflow:hidden;
  opacity:0; transform:translateY(5px);
  transition:opacity .4s ease, transform .4s ease;
}
.al-on-a .al-rule{ opacity:1; transform:none; transition-delay:.55s; }
.al-rule-h{
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  background:#FAFBFD; border-bottom:1px solid var(--line);
  font:600 .72rem/1.2 var(--fb); color:var(--ink);
}
.al-rule-h .tag{ margin-left:auto; font-size:.66rem; padding:3px 7px; line-height:1; }
.al-rule-r{
  display:flex; align-items:flex-start; gap:10px; padding:6px 10px;
  border-bottom:1px solid #F0F2F7; font:400 .72rem/1.4 var(--fb); color:var(--text);
  overflow-wrap:anywhere;
}
.al-rule-r:last-child{ border-bottom:0; }
.al-rule-r > span{
  flex:none; width:56px; padding-top:2px;
  font:500 .66rem/1.3 var(--fm); letter-spacing:.07em; text-transform:uppercase; color:var(--faint);
}

/* ---------- the overlay: the alert as it lands in the destination app ---------- */
.al-over{
  --al-acc:var(--ink);
  grid-area:1/1; align-self:end; position:relative; z-index:2;
  /* it starts inside the chat and overhangs the window's right and bottom
     edges by about 24px, into the wrapper's room */
  margin:0 calc(6px - var(--al-padx) - var(--al-outr)) calc(10px - var(--al-padb) - var(--al-outb)) 26px; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 34px 60px -22px rgba(9,16,32,.55), 0 10px 24px -10px rgba(9,16,32,.22), 0 2px 6px rgba(9,16,32,.08);
  opacity:0; transform:translateY(var(--al-rise));
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.al-on-over .al-over{ opacity:1; transform:none; }
/* on desktops it lands with a slight tilt, like a card dropped on a desk */
@media (min-width:1081px){
  .al-over{ transform:translateY(var(--al-rise)) rotate(0deg); transform-origin:50% 60%; }
  .al-on-over .al-over{ transform:rotate(-1.3deg); }
}
.al-ov-teams{ --al-acc:#5B5FC7; }
.al-ov-slack{ --al-acc:#4A154B; }
.al-ov-mail{ --al-acc:#0E1526; }
.al-over::before{ content:""; display:block; height:3px; background:var(--al-acc); }

/* the strip that names the app and the channel */
.al-ov-bar{
  display:flex; align-items:center; gap:8px; padding:7px 11px;
  background:#FAFBFD; border-bottom:1px solid var(--line);
}
.al-ov-mark{
  flex:none; width:18px; height:18px; border-radius:5px;
  background:var(--al-acc); color:#fff; display:grid; place-items:center;
  font:700 .66rem/1 var(--fb);
}
.al-ov-mark svg{ width:11px; height:11px; }
.al-ov-ch{
  flex:0 1 auto; min-width:0; font:600 .74rem/1.2 var(--fb); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.al-ov-app{
  margin-left:auto; flex:none; font:500 .66rem/1 var(--fm); letter-spacing:.04em;
  color:var(--faint); white-space:nowrap;
}

/* the message: a sender column and the content */
.al-msg{
  display:grid; grid-template-columns:24px minmax(0,1fr);
  column-gap:9px; row-gap:6px; padding:10px 12px 12px;
}
.al-u{
  grid-row:1 / span 2; width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:var(--pos-bright); display:grid; place-items:center;
  font:700 .66rem/1 var(--fd);
}
.al-ov-slack .al-u{ border-radius:6px; }
.al-who{
  display:flex; align-items:center; gap:7px; min-width:0;
  font:600 .74rem/1.2 var(--fb); color:var(--ink);
}
.al-who em{ font:500 .66rem/1 var(--fm); font-style:normal; color:var(--faint); white-space:nowrap; }
/* a mail client keeps the time at the right; the chat apps set it by the name */
.al-ov-mail .al-who em{ margin-left:auto; }
.al-app{
  font:600 .66rem/1 var(--fm); letter-spacing:.06em; color:var(--slate);
  background:#EEF1F6; padding:3px 4px; border-radius:3px;
}
.al-urg{
  font:600 .66rem/1 var(--fm); letter-spacing:.06em; color:#B42318;
  background:#FEE4E2; padding:3px 6px; border-radius:4px;
}
.al-mbody{ grid-column:2; min-width:0; display:flex; flex-direction:column; gap:7px; }

/* shared buttons: the accent one is the app's own primary */
.al-btns{ display:flex; gap:6px; flex-wrap:wrap; margin-top:1px; }
.al-btn{
  display:inline-block; font:600 .68rem/1 var(--fb); color:var(--ink);
  background:var(--card); border:1px solid #C6CDDD; padding:6px 10px; border-radius:6px;
  white-space:nowrap;
}
.al-btn.p{ background:var(--al-acc); border-color:var(--al-acc); color:#fff; }

/* Teams: an Upbuild card with an amber pacing bar */
.al-tc{
  display:flex; flex-direction:column; gap:7px;
  border:1px solid var(--line); border-left:3px solid #F59E0B; border-radius:8px;
  padding:9px 11px 10px; background:var(--card);
}
.al-tc-t{ display:flex; align-items:center; gap:6px; font:700 .78rem/1.2 var(--fb); color:var(--ink); }
.al-tc-t::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:#F59E0B; }
.al-tc p{ margin:0; font:400 .74rem/1.45 var(--fb); color:var(--text); text-wrap:pretty; }
.al-tc p b{ font-weight:600; color:var(--ink); }
.al-tc small{ font:400 .7rem/1.35 var(--fb); color:var(--slate); }
.al-prog{ display:flex; align-items:center; gap:8px; }
.al-bar{ flex:1 1 auto; min-width:0; position:relative; height:6px; border-radius:3px; background:#EEF1F6; overflow:hidden; }
.al-bar i{
  position:absolute; left:0; top:0; height:100%; width:84%; border-radius:3px; background:#F59E0B;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .9s cubic-bezier(.2,.7,.3,1) .45s;
}
.al-on-over .al-bar i{ transform:scaleX(1); }
.al-prog b{ flex:none; font:500 .66rem/1 var(--fm); color:#B45309; }

/* Slack: three names and the suggested fix beside each */
.al-sl-t{ font:700 .76rem/1.3 var(--fb); color:var(--ink); }
.al-nm{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:10px; row-gap:5px; align-items:center;
  font:500 .68rem/1.3 var(--fm);
}
.al-bad{ color:var(--text); white-space:nowrap; }
.al-fix{ display:inline-flex; align-items:center; gap:6px; min-width:0; color:var(--pos-deep); }
.al-fix::before{ content:"\2192"; flex:none; color:var(--faint); }
.al-fix > span{ background:var(--pos-soft); padding:2px 5px; border-radius:4px; white-space:nowrap; }

/* email: a subject, a small chart of purchases an hour, three facts. In a
   wide box the chart and the facts sit side by side, so the card stays as
   short as the other two; in a narrow one they stack */
.al-em-s{ font:700 .78rem/1.3 var(--fb); color:var(--ink); text-wrap:pretty; }
.al-em-row{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:10px; align-items:start; }
.al-chart{ min-width:0; border:1px solid var(--line); border-radius:8px; padding:7px 10px 6px; background:#FAFBFD; }
.al-ch-cap{ font:500 .66rem/1 var(--fm); letter-spacing:.04em; color:var(--faint); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.al-bars{
  position:relative; display:grid; grid-template-columns:repeat(8,1fr); gap:4px;
  align-items:end; height:44px; border-bottom:1px solid #D8DEE9;
}
.al-bars i{
  display:block; background:var(--pos); border-radius:2px 2px 0 0;
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.al-bars .h58{ height:58%; } .al-bars .h64{ height:64%; } .al-bars .h55{ height:55%; }
.al-bars .h70{ height:70%; } .al-bars .h62{ height:62%; } .al-bars .h66{ height:66%; }
.al-bars .z{ height:2px; background:#B42318; border-radius:1px; }
.al-on-over .al-bars i{ transform:scaleY(1); }
.al-on-over .al-bars i:nth-child(1){ transition-delay:.35s; }
.al-on-over .al-bars i:nth-child(2){ transition-delay:.41s; }
.al-on-over .al-bars i:nth-child(3){ transition-delay:.47s; }
.al-on-over .al-bars i:nth-child(4){ transition-delay:.53s; }
.al-on-over .al-bars i:nth-child(5){ transition-delay:.59s; }
.al-on-over .al-bars i:nth-child(6){ transition-delay:.65s; }
.al-on-over .al-bars i:nth-child(7){ transition-delay:.71s; }
.al-on-over .al-bars i:nth-child(8){ transition-delay:.77s; }
/* the marker sits on the boundary between 13:00 and 14:00: six bars and
   five and a half gaps in, which is 75% of the row plus a quarter gap */
.al-mk{
  position:absolute; left:calc(75% + 1px); top:0; bottom:-1px; width:0;
  border-left:1.5px dashed #B42318;
  opacity:0; transition:opacity .4s ease .95s;
}
.al-on-over .al-mk{ opacity:1; }
.al-mk > span{
  position:absolute; right:6px; top:0; white-space:nowrap;
  font:500 .66rem/1.2 var(--fb); color:#B42318;
}
.al-hrs{
  display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin-top:4px;
  font:500 .66rem/1 var(--fm); color:var(--faint); text-align:center;
}
.al-hrs .r{ color:#B42318; }
.al-facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; min-width:0; }
.al-facts li{ position:relative; padding-left:12px; font:400 .72rem/1.4 var(--fb); color:var(--text); text-wrap:pretty; }
.al-facts li::before{ content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:#B42318; }
.al-facts li + li::before{ background:#C6CDDD; }

/* ---------- narrow boxes (phones, and the stacked layout's edges) ---------- */
@container al (max-width:479px){
  .al-em-row{ grid-template-columns:minmax(0,1fr); gap:7px; }
}
@container al (max-width:430px){
  .al-head{ padding:10px 13px 9px; }
  .al-body{ --al-rise:10px; --al-padx:12px; --al-padb:12px; padding:12px var(--al-padx) var(--al-padb); }
  .al-over{ margin-left:14px; }
  .al .ap-qrow{ max-width:94%; }
  /* the overlay simplifies rather than shrinks: no sender avatar, no app
     name in the strip, no second button, and each suggested name goes
     under the name it fixes */
  .al-msg{ grid-template-columns:minmax(0,1fr); padding:9px 11px 11px; }
  .al-u{ display:none; }
  .al-mbody{ grid-column:1; }
  .al-ov-app{ display:none; }
  .al-btn.s{ display:none; }
  .al-nm{ grid-template-columns:minmax(0,1fr); row-gap:2px; }
  .al-nm .al-fix{ margin:0 0 5px 8px; }
  .al-nm .al-fix:last-child{ margin-bottom:0; }
}
@container al (max-width:350px){
  .al-head{ gap:8px; }
  .al-tc{ padding:8px 9px 9px; }
  .al-chart{ padding:6px 8px 5px; }
}

@media (prefers-reduced-motion:reduce){
  .al *, .al *::before, .al *::after{ animation:none !important; transition:none !important; }
}

/* ============================================================
   AI ALERTS, "Built-in alerts": the admin email, live (data-live="admin")
   The same window as the three examples (.al), with a dashboards and
   connections panel instead of a chat. One loop: a dashboard refresh
   fails because a connection has expired, the row goes stale and the
   connection asks to be reconnected, the admins get one email (the same
   pop-out card as the other alerts), an admin presses Reconnect, and
   everything is fresh again. Every state is in the markup from the first
   frame; the script only toggles classes on the root (ad-on-*), so the
   window never changes size. Scoped under .ad; no em dashes.
   ============================================================ */
.ad-panel{
  grid-area:1/1; align-self:stretch; position:relative; z-index:1;
  display:flex; flex-direction:column; gap:6px; min-width:0;
  transition:opacity .5s ease;
}
/* the panel steps back while the email is on top, and comes forward again
   once the admin has fixed it, so the rows turning fresh can be seen */
.al-on-over .ad-panel{ opacity:.5; }
.al-on-over.ad-on-fixed .ad-panel{ opacity:1; }
.ad-sec{
  font:500 .6rem/1 var(--fm); letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  margin:4px 0 2px;
}
.ad-rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.ad-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px;
  padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:var(--card);
  transition:background .4s ease, border-color .4s ease;
}
.ad-row b{ display:inline-flex; align-items:center; gap:7px; font:600 .74rem/1.3 var(--fb); color:var(--ink); white-space:nowrap; }
.ad-sub{ font:400 .68rem/1.3 var(--fb); color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--pos); transition:background .3s ease; }
/* the row's tags share one cell, so a swap moves nothing */
.ad-st{ display:inline-grid; justify-items:end; }
.ad-st > .tag{ grid-area:1/1; font-size:.58rem; padding:3px 7px; line-height:1; white-space:nowrap; transition:opacity .2s ease; }
.ad-s-run{ display:inline-flex; align-items:center; gap:5px; background:#EEF1F6; color:var(--slate); }
.ad-s-run i{ width:5px; height:5px; border-radius:50%; background:var(--pos-deep); animation:ad-pulse 1.2s ease-in-out infinite; }
@keyframes ad-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.ad-s-bad{ background:#FBE3E0; color:#A32217; }
.ad-r1 .ad-s-bad{ background:#FCEBD1; color:#8A4B00; }
.ad-s-run,.ad-s-bad{ opacity:0; }
/* refreshing: the tag on the first dashboard */
.ad-on-run:not(.ad-on-fail) .ad-r1 .ad-s-ok{ opacity:0; }
.ad-on-run:not(.ad-on-fail) .ad-r1 .ad-s-run{ opacity:1; }
/* failed: the dashboard goes stale and the connection asks for help */
.ad-on-fail:not(.ad-on-fixed) .ad-r1 .ad-s-ok{ opacity:0; }
.ad-on-fail:not(.ad-on-fixed) .ad-r1 .ad-s-bad{ opacity:1; }
.ad-on-fail:not(.ad-on-fixed) .ad-r1{ background:#FFF8EC; border-color:#F3D9A8; }
.ad-on-fail:not(.ad-on-fixed) .ad-c2 .ad-s-ok{ opacity:0; }
.ad-on-fail:not(.ad-on-fixed) .ad-c2 .ad-s-bad{ opacity:1; }
.ad-on-fail:not(.ad-on-fixed) .ad-c2{ background:#FFF3F1; border-color:#F2C4BE; }
.ad-on-fail:not(.ad-on-fixed) .ad-c2 .ad-dot{ background:#C8362A; }
/* fixed: both rows settle on mint */
.ad-on-fixed .ad-r1,.ad-on-fixed .ad-c2{ background:var(--pos-soft); border-color:#B9F3E6; }
/* the log line under the rows: two lines share one cell */
.ad-log{ display:grid; margin:2px 0 0; min-height:2.6em; }
.ad-log > span{
  grid-area:1/1; font:400 .68rem/1.4 var(--fb); color:var(--slate); text-wrap:pretty;
  opacity:0; transition:opacity .3s ease;
}
.ad-on-fail:not(.ad-on-fixed) .ad-l1{ opacity:1; }
.ad-on-fixed .ad-l2{ opacity:1; }
/* the email */
.ad-to{
  font:500 .6rem/1 var(--fm); letter-spacing:.04em; color:var(--slate);
  background:#EEF1F6; padding:3px 6px; border-radius:var(--radius-pill); white-space:nowrap;
}
.ad-fixbtn{ display:inline-grid; transition:transform .15s ease, background .3s ease, border-color .3s ease, color .3s ease; }
.ad-fixbtn > span{ grid-area:1/1; text-align:center; white-space:nowrap; transition:opacity .2s ease; }
.ad-b2{ opacity:0; }
.ad-on-press .ad-fixbtn{ transform:scale(.96); filter:brightness(.88); }
.ad-on-fixed .ad-fixbtn{ background:var(--pos-soft); border-color:#B9F3E6; color:var(--pos-deep); }
.ad-on-fixed .ad-b1{ opacity:0; }
.ad-on-fixed .ad-b2{ opacity:1; }
@container al (max-width:430px){
  .ad-sub{ display:none; }
  .ad-row{ grid-template-columns:minmax(0,1fr) auto; padding:7px 9px; }
}
@media (prefers-reduced-motion:reduce){
  .ad-s-run i{ animation:none; }
}

/* ============================================================
   CONNECTOR PAGES (body.mcp): the violet of the header's connector
   menu in place of the site's mint, for highlights, demos and calls
   to action. Scoped to main, so the shared header and footer stay
   exactly as they are on every other page.
   ============================================================ */
body.mcp main{
  --pos:#6D28D9; --pos-soft:#F3EFFE; --pos-bright:#DDD6FE; --pos-deep:#5B21B6;
  --mcp:#6D28D9; --mcp-line:#C4B5FD;
}
body.mcp main .btn-primary{ background:var(--mcp); color:#fff; box-shadow:0 8px 20px -8px rgba(109,40,217,.55); }
body.mcp main .btn-primary:hover{ background:#5B21B6; color:#fff; }
body.mcp main .btn-primary.sent,body.mcp main .btn-primary.sent:disabled{ background:var(--mcp); color:#fff; }
body.mcp main .feat-cta{ color:#fff; background:var(--mcp); border-color:var(--mcp); box-shadow:0 1px 2px rgba(14,21,38,.06), 0 10px 22px -12px rgba(109,40,217,.9); }
body.mcp main .feat-cta:hover{ background:#5B21B6; border-color:#5B21B6; color:#fff; }
body.mcp main .eyebrow,body.mcp main .feat-copy .eb,body.mcp main .sol-hero .eb,body.mcp main .deck-head .eb,body.mcp main .lead-side .eb{ color:var(--mcp); }
body.mcp main .feat-copy .eb::before,body.mcp main .sol-hero .eb::before,body.mcp main .deck-head .eb::before,body.mcp main .lead-side .eb::before{ background:var(--mcp); }
body.mcp main .plat-fields{ color:var(--mcp); }
body.mcp main .plat-fields:hover{ color:#5B21B6; }
body.mcp main .plat:hover{ border-color:var(--mcp-line); }
body.mcp main .steps > div:hover{ border-color:var(--mcp-line); }
body.mcp main .steps > div:hover::before{ background:var(--mcp); color:#fff; }
body.mcp main .ap-live,body.mcp main .shot-bar .pill,body.mcp main .ap-chip{ border-color:var(--mcp-line); }
body.mcp main .addon h2 .hl,body.mcp main .addon .deck-head h2 .hl{ background:linear-gradient(transparent 58%, rgba(196,181,253,.45) 58%); }
body.mcp main .pick input:checked + span{ border-color:var(--mcp); color:var(--mcp); background:var(--pos-soft); }
body.mcp main .consent input[type="checkbox"]:checked{ border-color:var(--mcp); background:var(--pos-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D28D9' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }

/* copy buttons on the prompt cards, added by livedemos.js: one press
   copies the prompt, a small tip says Copied */
body.mcp main .ap-q.has-copy{ position:relative; padding-right:70px; }
.copybtn{
  position:absolute; right:7px; top:6px; display:inline-flex; align-items:center; gap:5px;
  font:600 .6rem/1 var(--fm); letter-spacing:.08em; text-transform:uppercase;
  color:var(--mcp,#6D28D9); background:#fff; border:1px solid var(--mcp-line,#C4B5FD); border-radius:var(--radius-pill);
  padding:5px 8px; cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.copybtn:hover{ background:#F3EFFE; }
.copybtn:active{ transform:scale(.96); }
.copybtn:focus-visible{ outline:2px solid var(--mcp,#6D28D9); outline-offset:2px; }
.copybtn svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.copytip{
  position:absolute; right:0; bottom:calc(100% + 7px); white-space:nowrap;
  font:500 .66rem/1 var(--fb); letter-spacing:0; text-transform:none; color:#fff; background:var(--ink); padding:6px 8px; border-radius:6px;
  opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; pointer-events:none;
}
.copytip::after{ content:""; position:absolute; right:12px; top:100%; border:5px solid transparent; border-top-color:var(--ink); }
.copybtn.copied .copytip{ opacity:1; transform:none; }
.copysrc{ position:fixed; left:-9999px; top:0; opacity:0; }

/* ============================================================
   THE MCP CONNECTOR IN CLAUDE, live (data-live="claude")
   One engine, three scenes (data-scene="answer|dash|audit").
   A colleague asks in Claude's own window; Claude calls Upbuild
   once per platform or tool (a compact row each, a spinner that
   becomes a tick), then answers: a table (answer), a dashboard
   published to Upbuild that pops out of the window and is then
   changed from the chat (dash), or a written audit (audit).

   The window never changes size. Every message is in the layout
   from the first frame and only its opacity or transform moves.
   In the dash scene the two exchanges share one grid cell: the
   first dims when the Upbuild card lands over its lower part and
   fades out when the second arrives above the card, so the card
   never covers a live message and the cell is as tall as the
   taller exchange, whatever the width.

   Claude's look, not Upbuild's: cream window, warm border, dark
   warm text, the Claude mark and a terracotta accent. Everything
   that belongs to Upbuild (the tool tile, the published card,
   the chips) is violet, the connector colour on this site.

   CSP: style-src 'self', no unsafe-inline. No style attributes;
   the script only toggles classes on the root (cl-on-*) and on
   the tool rows (is-on, is-done). Scoped under .cl or cl-;
   keyframes prefixed cl-. No em dashes, by owner rule.
   ============================================================ */

/* the wrapper keeps room on the right and below, so the published card
   can pop out past the window's edges and still stay inside the demo's
   box. All three scenes share it, so the three windows are one width */
.cl-wrap{
  --cl-outr:30px; --cl-outb:34px;
  container:cl / inline-size; box-sizing:content-box; width:auto; max-width:660px; margin-inline:auto;
  padding:0 var(--cl-outr) var(--cl-outb) 0;
}
@media (max-width:560px){ .cl-wrap{ --cl-outr:16px; --cl-outb:18px; } }

/* ---------- the window ---------- */
.cl{
  --cl-bg:#FAF9F5; --cl-bub:#F0EEE6; --cl-line:#E6E3DA; --cl-line2:#EDEAE1;
  --cl-ink:#1F1E1B; --cl-mute:#6B675E; --cl-faint:#9A958A;
  --cl-acc:#D97757; --cl-acc-soft:#F8E7DF;
  --cl-vio:#6D28D9; --cl-vio-deep:#5B21B6; --cl-vio-soft:#F3EFFE; --cl-vio-line:#C4B5FD;
  --cl-padx:15px; --cl-padb:15px; --cl-foot:56px; --cl-rise:12px;
  position:relative; display:flex; flex-direction:column;
  background:var(--cl-bg); border:1px solid var(--cl-line); border-radius:16px;
  box-shadow:0 30px 74px -24px rgba(9,16,32,.4), 0 2px 6px rgba(9,16,32,.06);
  font-family:var(--fb); color:var(--cl-ink); text-align:left;
}
.cl *, .cl *::before, .cl *::after{ box-sizing:border-box; }

/* the title bar: the window's lights, Claude's mark and name, and the
   connector pill that says Upbuild is switched on in this chat */
.cl-bar{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--cl-line); border-radius:15px 15px 0 0;
}
.cl-lights{ display:inline-flex; gap:6px; }
.cl-lights i{ width:9px; height:9px; border-radius:50%; background:#DCD8CD; }
.cl-lights i:first-child{ background:#E6B0A6; }
.cl-lights i:nth-child(2){ background:#E8CFA0; }
.cl-lights i:last-child{ background:#A9DFC9; }
.cl-app{
  display:inline-flex; align-items:center; gap:7px; margin-left:4px;
  font:700 .82rem/1 var(--fd); color:var(--cl-ink); letter-spacing:-.01em; white-space:nowrap;
}
.cl-mark{ display:block; width:16px; height:16px; fill:var(--cl-acc); flex:none; }
.cl-conn{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font:500 .66rem/1 var(--fm); letter-spacing:.04em; color:var(--cl-vio-deep);
  background:var(--cl-vio-soft); border:1px solid #DDD6FE;
  padding:5px 9px; border-radius:var(--radius-pill); white-space:nowrap;
}
.cl-conn i{ width:6px; height:6px; border-radius:50%; background:var(--cl-vio); }

/* the part that fades between loops: the bar and the composer stay put */
.cl-main{ flex:1 1 auto; display:flex; flex-direction:column; transition:opacity .4s ease; }
.cl.cl-on-out .cl-main{ opacity:0; }
/* the reset between loops happens while faded out, with every transition
   switched off, so nothing is seen sliding backwards */
.cl.cl-on-reset .cl-main *, .cl.cl-on-reset .cl-main *::before, .cl.cl-on-reset .cl-main *::after{
  transition:none !important; animation:none !important;
}

/* the composer at the foot, as in Claude's window: it is chrome, so it
   never fades between loops; the published card lands over it, and while
   it does the composer steps back and its placeholder goes, so no cut
   word peeks out beside the card */
.cl-compose{ flex:none; height:var(--cl-foot); padding:0 var(--cl-padx) 14px; transition:opacity .5s ease; }
.cl-on-over .cl-compose{ opacity:.5; }
.cl-ph{ transition:opacity .3s ease; }
.cl-on-over .cl-ph{ opacity:0; }
.cl-compose > div{
  height:42px; display:flex; align-items:center; gap:10px;
  padding:0 8px 0 14px; background:#fff; border:1px solid var(--cl-line); border-radius:13px;
  font:400 .78rem/1 var(--fb); color:var(--cl-faint); white-space:nowrap; overflow:hidden;
}
.cl-ph{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cl-send{
  flex:none; width:28px; height:28px; border-radius:8px; background:var(--cl-acc);
  display:grid; place-items:center;
}
.cl-send svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- the body: one cell, the exchanges stacked ---------- */
.cl-body{ flex:1 1 auto; display:flex; flex-direction:column; padding:14px var(--cl-padx) var(--cl-padb); }
.cl-view{ flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1fr); min-width:0; }
.cl-x{ grid-area:1/1; min-width:0; display:flex; flex-direction:column; gap:12px; align-self:start; }
.cl-x2{ align-self:stretch; }
.cl-x2m{ display:flex; flex-direction:column; gap:12px; min-width:0; }

/* the colleague's message, as Claude shows it: a monogram and a cream bubble */
.cl-u{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
.cl-av{
  flex:none; width:24px; height:24px; border-radius:50%; margin-top:2px;
  background:var(--cl-ink); color:#FAF9F5; display:grid; place-items:center;
  font:600 .6rem/1 var(--fm); letter-spacing:.02em;
}
.cl-bub{
  min-width:0; max-width:92%; padding:9px 13px; border-radius:14px 14px 14px 4px;
  background:var(--cl-bub); color:var(--cl-ink); font:400 .8rem/1.5 var(--fb); text-wrap:pretty;
}

/* Claude's reply: the mark in the margin, the content beside it */
.cl-a{ display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:10px; align-items:start; min-width:0; }
.cl-amark{ width:16px; height:16px; margin:5px 0 0 4px; }
.cl-ac{ min-width:0; display:flex; flex-direction:column; gap:10px; }
.cl-ans{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.cl-ans p{ margin:0; font:400 .8rem/1.55 var(--fb); color:var(--cl-ink); text-wrap:pretty; }
.cl-ans p b{ font-weight:600; }

/* the tool calls, one row each: the Upbuild tile, "Upbuild · what was
   called", a note once it has answered, and the spinner-then-tick slot */
.cl-rows{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.cl-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:9px; align-items:center;
  padding:6px 10px 6px 9px; border:1px solid var(--cl-line); border-radius:10px; background:#F6F4ED;
  min-width:0;
}
.cl-tm{
  grid-column:1; grid-row:1 / span 2; align-self:start; margin-top:1px;
  width:18px; height:18px; border-radius:5px;
  background:var(--cl-vio); color:#fff; display:grid; place-items:center;
  font:700 .66rem/1 var(--fd);
}
.cl-tl{
  grid-column:2; grid-row:1; min-width:0; font:400 .76rem/1.3 var(--fb); color:var(--cl-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cl-tl b{ font-weight:600; }
.cl-tl i{ font-style:normal; color:var(--cl-faint); margin:0 2px; }
.cl-tl code{ font:500 .72rem/1 var(--fm); color:var(--cl-vio-deep); background:var(--cl-vio-soft); padding:2px 5px; border-radius:4px; }
.cl-tn{
  grid-column:2; grid-row:2; min-width:0; font:400 .72rem/1.35 var(--fb); color:var(--cl-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
  opacity:0; transition:opacity .35s ease;
}
.cl-ts{ grid-column:3; grid-row:1 / span 2; display:grid; width:16px; height:16px; }
.cl-ts > *{ grid-area:1/1; }
.cl-spin{
  display:block; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--cl-acc-soft); border-top-color:var(--cl-acc);
  animation:cl-spin .8s linear infinite;
}
@keyframes cl-spin{ to{ transform:rotate(360deg); } }
.cl-tick{
  display:block; width:16px; height:16px; fill:none; stroke:var(--cl-acc); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
/* a row is laid out from the first frame and only fades in; the tick
   replaces the spinner in the same 16px slot */
.cl-row{ opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease; }
.cl-row.is-on{ opacity:1; transform:none; }
.cl-row.is-done .cl-spin{ animation:none; opacity:0; transition:opacity .15s ease; }
.cl-row.is-done .cl-tick{ opacity:1; transform:none; }
.cl-row.is-done .cl-tn{ opacity:1; transition-delay:.12s; }

/* the messages arrive whole, never typed */
.cl-q, .cl-a, .cl-ans{ opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; }
.cl-on-q .cl-x1 .cl-q, .cl-on-w .cl-x1 .cl-a, .cl-on-a .cl-x1 .cl-ans{ opacity:1; transform:none; }
.cl-on-q2 .cl-x2 .cl-q, .cl-on-w2 .cl-x2 .cl-a, .cl-on-a2 .cl-x2 .cl-ans{ opacity:1; transform:none; }
.cl-on-q .cl-x1 .cl-q, .cl-on-q2 .cl-x2 .cl-q{ transition-delay:.2s; }

/* ---------- the answer table (scene: answer) ---------- */
.cl-tbl{ width:100%; border-collapse:collapse; table-layout:auto; font:400 .76rem/1.35 var(--fb); color:var(--cl-ink); }
.cl-tbl th{
  text-align:left; font-weight:600; font-size:.7rem; color:var(--cl-mute);
  padding:5px 8px 6px; border-bottom:1px solid #D9D5C9; white-space:nowrap;
}
.cl-tbl td{ padding:6px 8px; border-bottom:1px solid var(--cl-line2); white-space:nowrap; }
.cl-tbl tr:last-child td{ border-bottom:0; }
.cl-tbl th:first-child, .cl-tbl td:first-child{ padding-left:2px; }
.cl-tbl th:last-child, .cl-tbl td:last-child{ padding-right:2px; }
.cl-tbl .n{ text-align:right; font-variant-numeric:tabular-nums; }
.cl-tbl td.up{ color:#B4532E; font-weight:600; }
.cl-tbl td.dn{ color:var(--cl-mute); }
.cl-tbl .cl-s{ display:none; }
/* the rows follow one another, a few frames apart */
.cl-tbl tbody tr{ opacity:0; transition:opacity .35s ease; }
.cl-on-a .cl-tbl tbody tr{ opacity:1; }
.cl-on-a .cl-tbl tbody tr:nth-child(1){ transition-delay:.25s; }
.cl-on-a .cl-tbl tbody tr:nth-child(2){ transition-delay:.4s; }
.cl-on-a .cl-tbl tbody tr:nth-child(3){ transition-delay:.55s; }
.cl-ans .cl-after{ opacity:0; transition:opacity .4s ease .95s; }
.cl-on-a .cl-ans .cl-after{ opacity:1; }

/* ---------- the chips: Upbuild's, so violet ---------- */
.cl-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cl-chip{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  font:500 .7rem/1 var(--fm); color:var(--cl-vio-deep);
  background:var(--cl-vio-soft); border:1px solid var(--cl-vio-line);
  padding:5px 8px; border-radius:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cl-chip svg{ flex:none; width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cl-chip.cl-chip-doc{ color:var(--cl-ink); background:#fff; border-color:var(--cl-line); }

/* ---------- scene: dash. The first exchange steps back, then leaves ---------- */
.cl-x1{ transition:opacity .5s ease, transform .5s ease; }
.cl-on-over .cl-x1{ opacity:.5; }
.cl-on-x2 .cl-x1{ opacity:0; transform:translateY(-10px); transition:opacity .4s ease, transform .5s ease; }

/* the published card: it sits at the foot of the second exchange, in
   the flow, and overhangs the window's right and bottom edges by about
   24px into the wrapper's room, over the composer */
.cl-slot{ margin-top:auto; padding-top:12px; min-width:0; }
.cl-over{
  position:relative; z-index:2; min-width:0;
  margin:0 calc(6px - var(--cl-padx) - var(--cl-outr)) calc(10px - var(--cl-padb) - var(--cl-outb) - var(--cl-foot)) 26px;
  background:var(--card,#fff); border:1px solid var(--line,#E4E8F1); border-radius:12px; overflow:hidden;
  box-shadow:0 34px 60px -22px rgba(9,16,32,.55), 0 10px 24px -10px rgba(9,16,32,.22), 0 2px 6px rgba(9,16,32,.08);
  font-family:var(--fb); color:var(--text,#1B2334);
  opacity:0; transform:translateY(var(--cl-rise));
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.cl-on-over .cl-over{ opacity:1; transform:none; }
/* on desktops it lands with a slight tilt, like a card dropped on a desk */
@media (min-width:1081px){
  .cl-over{ transform:translateY(var(--cl-rise)) rotate(0deg); transform-origin:50% 60%; }
  .cl-on-over .cl-over{ transform:rotate(-1.3deg); }
}
.cl-over::before{ content:""; display:block; height:3px; background:var(--cl-vio); }
.cl-din{ padding:9px 12px 12px; display:flex; flex-direction:column; gap:9px; }

/* the head: the Upbuild wordmark and the freshness tag, then the name */
.cl-dh{
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-areas:"m w . t" "n n n d";
  column-gap:8px; row-gap:3px; align-items:center; min-width:0;
}
.cl-dh1, .cl-dh2{ display:contents; }
.cl-dmark{
  grid-area:m; width:16px; height:16px; border-radius:4px; background:var(--cl-vio); color:#fff;
  display:grid; place-items:center; font:700 .66rem/1 var(--fd);
}
.cl-dwm{ grid-area:w; font:500 .66rem/1 var(--fm); letter-spacing:.12em; color:var(--cl-vio); white-space:nowrap; }
.cl-dtag{
  grid-area:t; justify-self:end; font:500 .66rem/1 var(--fm); letter-spacing:.07em;
  color:var(--cl-vio); background:var(--cl-vio-soft); padding:4px 7px; border-radius:var(--radius-pill);
}
.cl-on-over .cl-dtag{ animation:cl-fresh 1.8s ease .65s; }
@keyframes cl-fresh{
  0%{ background:var(--cl-vio); color:#fff; }
  40%{ background:#E4DBFD; color:var(--cl-vio); }
  100%{ background:var(--cl-vio-soft); }
}
.cl-dname{
  grid-area:n; min-width:0; font:700 .9rem/1.2 var(--fd); color:var(--ink,#0E1526); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* the version and cadence: v1 leaves, v2 takes its place in the same cell */
.cl-dmeta{ grid-area:d; justify-self:end; display:grid; font:500 .66rem/1 var(--fm); color:var(--slate,#5A6478); white-space:nowrap; }
.cl-dmeta > span{ grid-area:1/1; text-align:right; transition:opacity .3s ease; }
.cl-dmeta .v2{ opacity:0; }
.cl-on-a2 .cl-dmeta .v1{ opacity:0; }
.cl-on-a2 .cl-dmeta .v2{ opacity:1; transition-delay:.25s; }
.cl-dmeta .cl-s{ display:none; }

/* the KPI row */
.cl-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.cl-kpi{ min-width:0; padding:7px 9px 8px; border:1px solid var(--line,#E4E8F1); border-radius:8px; background:#FAFBFD; overflow:hidden; }
.cl-kpi span{ display:block; font:400 .7rem/1.2 var(--fb); color:var(--slate,#5A6478); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-kpi .cl-s{ display:none; }
.cl-kpi b{ display:block; margin-top:3px; font:800 1.02rem/1.1 var(--fd); color:var(--ink,#0E1526); letter-spacing:-.01em; white-space:nowrap; }

/* the tiles: the chart alone at v1, then the ROAS tile slides in beside
   it. The second column opens from nothing, so the card keeps its height */
.cl-tiles{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0fr); gap:0; min-width:0;
  transition:grid-template-columns .55s cubic-bezier(.2,.7,.3,1), gap .55s cubic-bezier(.2,.7,.3,1);
}
.cl-on-a2 .cl-tiles{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.cl-tile{ min-width:0; overflow:hidden; }
.cl-tin{ padding:7px 9px 8px; border:1px solid var(--line,#E4E8F1); border-radius:8px; background:#fff; min-width:0; }
.cl-tile2{ opacity:0; transform:translateX(10px); transition:opacity .35s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.cl-on-a2 .cl-tile2{ opacity:1; transform:none; transition-delay:.3s; }
.cl-tcap{ display:flex; align-items:center; gap:6px; margin-bottom:6px; font:600 .7rem/1.2 var(--fb); color:var(--ink,#0E1526); white-space:nowrap; overflow:hidden; }
.cl-tcap .cl-s{ display:none; }
.cl-new{
  flex:none; font:500 .66rem/1 var(--fm); letter-spacing:.07em; color:#fff; background:var(--cl-vio);
  padding:3px 5px; border-radius:4px;
}
.cl-bars{ display:flex; flex-direction:column; gap:5px; }
.cl-brow{ display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; }
.cl-bl{ flex:none; width:64px; font:400 .7rem/1.2 var(--fb); color:var(--slate,#5A6478); overflow:hidden; text-overflow:ellipsis; }
.cl-bt{ flex:1 1 auto; min-width:8px; height:7px; border-radius:4px; background:#EEF1F6; overflow:hidden; }
.cl-bt i{
  display:block; height:100%; border-radius:4px; background:var(--cl-vio);
  transform:scaleX(0); transform-origin:left center; transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.cl-bv{ flex:none; width:40px; text-align:right; font:500 .66rem/1 var(--fm); color:var(--text,#1B2334); font-variant-numeric:tabular-nums; }
.cl-bl .cl-s{ display:none; }
.cl-bt .w100{ width:100%; } .cl-bt .w68{ width:68%; } .cl-bt .w24{ width:24%; }
.cl-bt .w85{ width:85%; } .cl-bt .w67{ width:67%; }
.cl-on-over .cl-tile1 .cl-bt i{ transform:scaleX(1); }
.cl-on-over .cl-tile1 .cl-brow:nth-child(1) .cl-bt i{ transition-delay:.5s; }
.cl-on-over .cl-tile1 .cl-brow:nth-child(2) .cl-bt i{ transition-delay:.58s; }
.cl-on-over .cl-tile1 .cl-brow:nth-child(3) .cl-bt i{ transition-delay:.66s; }
.cl-on-a2 .cl-tile2 .cl-bt i{ transform:scaleX(1); }
.cl-on-a2 .cl-tile2 .cl-brow:nth-child(1) .cl-bt i{ transition-delay:.6s; }
.cl-on-a2 .cl-tile2 .cl-brow:nth-child(2) .cl-bt i{ transition-delay:.68s; }
.cl-on-a2 .cl-tile2 .cl-brow:nth-child(3) .cl-bt i{ transition-delay:.76s; }

/* ---------- scene: audit. The written finding, as an artifact ---------- */
.cl-art{
  background:#fff; border:1px solid var(--cl-line); border-radius:12px; overflow:hidden;
  box-shadow:0 1px 2px rgba(31,30,27,.04), 0 8px 20px -14px rgba(31,30,27,.25);
}
.cl-art-h{
  display:flex; align-items:center; gap:9px; padding:9px 12px;
  border-bottom:1px solid var(--cl-line2); background:#FCFBF8;
}
.cl-art-ic{ flex:none; width:22px; height:22px; border-radius:6px; background:var(--cl-acc-soft); display:grid; place-items:center; }
.cl-art-ic svg{ width:13px; height:13px; fill:none; stroke:var(--cl-acc); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cl-art-t{ min-width:0; font:700 .86rem/1.25 var(--fd); color:var(--cl-ink); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-art-t i{ font-style:normal; color:var(--cl-faint); margin:0 5px; }
.cl-art-b{ padding:10px 12px 11px; display:flex; flex-direction:column; gap:8px; }
.cl-fnd{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:cl-f; }
.cl-fnd li{
  position:relative; padding-left:22px; font:400 .78rem/1.45 var(--fb); color:var(--cl-ink); text-wrap:pretty;
  opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease;
}
.cl-fnd li::before{
  counter-increment:cl-f; content:counter(cl-f); position:absolute; left:0; top:2px;
  width:16px; height:16px; border-radius:50%; background:var(--cl-acc-soft); color:var(--cl-acc);
  font:600 .66rem/16px var(--fm); text-align:center;
}
.cl-on-a .cl-fnd li{ opacity:1; transform:none; }
.cl-on-a .cl-fnd li:nth-child(1){ transition-delay:.3s; }
.cl-on-a .cl-fnd li:nth-child(2){ transition-delay:.5s; }
.cl-on-a .cl-fnd li:nth-child(3){ transition-delay:.7s; }
.cl-art-f{
  display:flex; align-items:center; gap:10px; padding-top:8px; border-top:1px solid var(--cl-line2); min-width:0;
  opacity:0; transition:opacity .4s ease 1s;
}
.cl-on-a .cl-art-f{ opacity:1; }
.cl-art-f > span{ flex:1 1 auto; min-width:0; font:600 .76rem/1.3 var(--fb); color:var(--cl-ink); }
.cl-art-f .cl-chip{ flex:none; }

/* ---------- narrow boxes (phones, and the two column layout's edges) ---------- */
@container cl (max-width:519px){
  /* the version and cadence in the card head go short */
  .cl-dmeta .cl-w{ display:none; }
  .cl-dmeta .cl-s{ display:inline; }
}
@container cl (max-width:389px){
  .cl{ --cl-padx:12px; --cl-padb:12px; }
  .cl-body{ padding-top:12px; }
  .cl-bar{ padding:9px 12px; }
  .cl-compose{ padding-left:12px; padding-right:12px; }
  /* the reply loses its margin: the mark sits above the content instead */
  .cl-a{ grid-template-columns:minmax(0,1fr); row-gap:6px; }
  .cl-amark{ margin:0 0 0 1px; }
  .cl-bub{ max-width:100%; }
  /* the table keeps its text size and drops a column instead */
  .cl-tbl .cl-conv{ display:none; }
  .cl-tbl .cl-w{ display:none; }
  .cl-tbl .cl-s{ display:inline; }
  .cl-tbl th, .cl-tbl td{ padding-left:6px; padding-right:6px; }
  /* the card gets the width: a shorter left margin, tighter tiles, short labels */
  .cl-over{ margin-left:12px; }
  .cl-din{ padding:8px 9px 10px; gap:8px; }
  .cl-kpis{ gap:5px; }
  .cl-kpi{ padding:6px 7px 7px; }
  .cl-tin{ padding:6px 7px 7px; }
  .cl-on-a2 .cl-tiles{ gap:6px; }
  .cl-bl{ width:44px; }
  .cl-bl .cl-w{ display:none; }
  .cl-bl .cl-s{ display:inline; }
  .cl-bv{ width:34px; }
  .cl-art-f{ flex-wrap:wrap; gap:7px; }
  .cl-art-t{ white-space:normal; }
}
@container cl (max-width:309px){
  .cl{ --cl-padx:10px; --cl-padb:10px; }
  .cl-bar{ padding:8px 10px; gap:8px; }
  .cl-compose{ padding-left:10px; padding-right:10px; }
  /* the pill keeps the name and drops the word */
  .cl-conn{ padding:5px 7px; }
  .cl-conn .cl-w{ display:none; }
  /* a long tool name wraps under "Upbuild" rather than losing its end */
  .cl-row{ padding:6px 8px 6px 7px; column-gap:7px; }
  .cl-tl, .cl-tn{ white-space:normal; }
  .cl-over{ margin-left:8px; }
  .cl-tbl th, .cl-tbl td{ padding-left:4px; padding-right:4px; }
  /* the card: the version goes up beside the wordmark, the name has the
     whole second row; the KPI labels go short; each bar has its label and
     value above the track, so the track keeps the tile's full width */
  .cl-dh{ grid-template-areas:"m w d t" "n n n n"; }
  .cl-dmeta{ justify-self:start; }
  .cl-dmeta > span{ text-align:left; }
  .cl-kpi{ padding:5px 6px 6px; }
  .cl-kpi .cl-w{ display:none; }
  .cl-kpi .cl-s{ display:inline; }
  .cl-kpi b{ font-size:.96rem; }
  .cl-brow{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:6px; row-gap:3px; }
  .cl-bl{ width:auto; grid-row:1; grid-column:1; }
  .cl-bv{ width:auto; grid-row:1; grid-column:2; }
  .cl-bt{ grid-row:2; grid-column:1 / span 2; }
  .cl-bars{ gap:6px; }
  .cl-tcap .cl-w{ display:none; }
  .cl-tcap .cl-s{ display:inline; }
}

@media (prefers-reduced-motion:reduce){
  .cl *, .cl *::before, .cl *::after{ animation:none !important; transition:none !important; }
}

/* the same demo windows in each assistant's own look: only the colours
   change, the layout and the script are shared */
.cl.cl-gpt{ --cl-bg:#FFFFFF; --cl-bub:#F4F4F4; --cl-line:#E5E5E5; --cl-line2:#ECECEC; --cl-ink:#0D0D0D; --cl-mute:#5D5D5D; --cl-faint:#8E8E8E; --cl-acc:#0D0D0D; --cl-acc-soft:#ECECEC; }
.cl.cl-copilot{ --cl-bg:#FBFBFD; --cl-bub:#EEF0F6; --cl-line:#E1E4EC; --cl-line2:#E9EBF2; --cl-ink:#242424; --cl-mute:#616161; --cl-faint:#8A8A8A; --cl-acc:#5B5FC7; --cl-acc-soft:#E8E9F8; }
.cl.cl-gemini{ --cl-bg:#FFFFFF; --cl-bub:#F0F4F9; --cl-line:#DDE3EA; --cl-line2:#E8EDF3; --cl-ink:#1F1F1F; --cl-mute:#5E6470; --cl-faint:#8B919B; --cl-acc:#1A73E8; --cl-acc-soft:#E3ECFA; }

/* the setup guide on the violet theme: tabs, step numbers, callouts, copy buttons */
body.mcp main .tab[aria-selected="true"]{ color:var(--mcp); border-bottom-color:var(--mcp); }
body.mcp main .gnum{ color:var(--mcp); }
body.mcp main .callout.green{ border-color:var(--mcp-line); }
body.mcp main .copy-btn:hover,body.mcp main .copy-btn.copied{ background:var(--mcp); color:#fff; }
body.mcp main .p-bar{ border-color:rgba(196,181,253,.6); }
/* long highlights in a hero may wrap on phones instead of running off the screen */
@media (max-width:560px){ .sol-hero h1 .hl{ white-space:normal; } }

/* the assistant's name in the demo bar: the short form on phones */
.cl-app .cl-s{ display:none; }
@container cl (max-width:389px){
  .cl-app .cl-w{ display:none; }
  .cl-app .cl-s{ display:inline; }
}
/* section intros never end on a lone word */
body.v2 .section-sub{ text-wrap:pretty; }

/* a note under a set of steps, and a row of buttons that closes a section */
.sec-note{
  margin:20px 0 0;
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 24px;
}
.sec-note p{ margin:0; font:400 .95rem/1.65 var(--fb); color:var(--slate); text-wrap:pretty; }
.sec-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }
/* cards on a dark band keep dark headings: the band's white heading rule
   must not reach into white cards */
/* ---------- Coverage cards link to the data reference ---------- */
a.plat-link{ display:flex; flex-direction:column; color:inherit; text-decoration:none; }
a.plat-link p{ margin-bottom:0; }
a.plat-link .plat-fields{ margin-top:auto; padding-top:16px; }
a.plat-link:focus-visible{ outline:2px solid var(--pos); outline-offset:3px; }

.band-ink .plat h3{ color:var(--ink); }
body.mcp main .band-ink .eyebrow{ color:#C4B5FD; }
body.mcp main .band-ink .eyebrow::before{ background:#C4B5FD; }

/* centred section heads on a dark band: the intro and the highlight stay readable */
.band-ink .section-sub{ color:#C9D0E0; }
.band-ink h2 .hl{ background:linear-gradient(transparent 58%, rgba(0,251,206,.28) 58%); color:#fff; padding:0 3px; }
body.mcp main .band-ink h2 .hl{ background:linear-gradient(transparent 58%, rgba(196,181,253,.38) 58%); }

/* connector pricing: the featured card is light like its neighbours, with a
   violet edge and the badge centred, instead of the old dark card */
body.mcp main #pricing .price.feat{
  background:var(--card); border:2px solid var(--mcp); color:inherit; padding:32px 30px; margin:0; transform:none;
  box-shadow:0 26px 56px -28px rgba(109,40,217,.5), 0 2px 6px rgba(9,16,32,.05);
}
body.mcp main #pricing .price.feat h3,body.mcp main #pricing .price.feat .amount{ color:var(--ink); }
body.mcp main #pricing .price.feat .who,body.mcp main #pricing .price.feat .feat-list li{ color:var(--slate); }
body.mcp main #pricing .feat-list li::before{ color:var(--mcp); }
body.mcp main #pricing .seat-line{ background:#F3EFFE; border-color:#C4B5FD; color:var(--ink); }
body.mcp main #pricing .tag-best{ background:var(--mcp); left:50%; transform:translateX(-50%); }
body.mcp main #pricing .price{ transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
body.mcp main #pricing .price:hover{ border-color:var(--mcp-line); }
body.mcp main #pricing .price.feat:hover{ border-color:var(--mcp); box-shadow:0 30px 60px -28px rgba(109,40,217,.55); }

/* ===== Governance section on the home (2026-09-12): white, centred head, four cards with icons ===== */
#governance .plat-head{ align-items:flex-start; }
.gv-ic{ flex:none; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--pos-soft); color:var(--pos-deep); border:1px solid #B9F3E6; }
.gv-ic svg{ width:20px; height:20px; }
.gv-ctas{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:34px; }
.gv-link{ font:600 .95rem/1.3 var(--fb); color:var(--pos-deep); text-decoration:none; }
.gv-link:hover{ text-decoration:underline; }

/* ===== Company page: Uptimal (2026-09-12) ===== */
.co-hero{ padding:clamp(20px,4vh,52px) 0 clamp(24px,4vh,56px); }
.v2fold > .co-hero{ flex:1 0 auto; display:flex; align-items:center; }
.v2fold > .co-hero > .wrap{ width:100%; }
.v2fold > .plat-band.co-band{ flex:none; }
.co-hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center; }
body.v2 .co-hero .trust-chips{ display:flex; flex-wrap:nowrap; grid-template-columns:none; gap:8px 14px; white-space:nowrap; max-width:none; }
body.v2 .co-hero .trust-chips li{ white-space:nowrap; }
.co-hero h1{ font:800 clamp(2rem,4vw,3.1rem)/1.06 var(--fd); color:var(--ink); letter-spacing:-.025em; margin:14px 0 18px; }
.co-hero h1 .hl{ white-space:nowrap; }
.co-hero .lead{ font:400 clamp(1rem,1.2vw,1.12rem)/1.6 var(--fb); color:var(--slate); max-width:24em; margin:0 0 26px; }
.co-hero .hero-ctas{ margin-bottom:22px; }
.co-collage{ position:relative; aspect-ratio:1.06; min-height:320px; }
.co-collage img{
  position:absolute; width:64%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:18px;
  filter:grayscale(1) contrast(1.05); box-shadow:0 30px 60px -28px rgba(9,16,32,.55);
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 62%, transparent 100%);
  mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 62%, transparent 100%);
}
.co-collage .c1{ left:0; top:4%; transform:rotate(-4deg); z-index:2; }
.co-collage .c2{ right:0; top:0; transform:rotate(3deg); z-index:3; }
.co-collage .c3{ left:6%; bottom:5%; width:70%; transform:rotate(2deg); z-index:5; }
.co-collage .c4{ right:0; bottom:0; transform:rotate(-3deg); z-index:4; }
/* mint arcs on the outer corners, behind the photos */
.co-arc{ position:absolute; width:clamp(90px,11vw,140px); height:auto; z-index:6; fill:none; stroke:var(--pos-bright); stroke-linecap:round; pointer-events:none; }
.co-arc path:nth-child(1){ stroke-width:7; }
.co-arc path:nth-child(2){ stroke-width:6; opacity:.7; }
.co-arc path:nth-child(3){ stroke-width:5; opacity:.42; }
.co-arc.a1{ left:-11%; top:-9%; transform:rotate(-135deg); }
.co-arc.a2{ right:-7%; top:-8%; transform:rotate(-45deg); }
.co-arc.a3{ right:-7%; bottom:-6%; transform:rotate(40deg); }
.co-hero{ position:relative; z-index:1; overflow-x:clip; }
.co-band{ position:relative; z-index:0; }
/* client strip: the home's platform band with a slow marquee of white logos, every logo in the same 140 x 32 box */
.co-logos{ overflow:hidden; margin-top:22px; padding-bottom:6px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.co-track{ display:flex; align-items:center; gap:clamp(44px,5vw,76px); width:max-content; padding-inline:38px; animation:co-scroll 52s linear infinite; }
.co-track img{ display:block; height:32px; width:140px; object-fit:contain; object-position:center; filter:brightness(0) invert(1); opacity:.82; flex:none; }
.co-track img.wide{ width:200px; }
@keyframes co-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .co-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:20px; } .co-track img[aria-hidden]{ display:none; } .co-logos{ -webkit-mask-image:none; mask-image:none; } }
.co-shot{ margin:0; }
.co-shot img{ display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 30px 70px -30px rgba(9,16,32,.5), 0 2px 6px rgba(9,16,32,.06); }
.co-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 24px; }
.co-stats div{ border-left:3px solid var(--pos); padding:2px 0 2px 14px; }
.co-stats b{ display:block; font:800 1.5rem/1.1 var(--fd); color:var(--ink); letter-spacing:-.02em; margin-bottom:5px; }
.co-stats span{ font:400 .86rem/1.45 var(--fb); color:var(--slate); }
@media (min-width:1081px) and (max-height:820px){ .co-collage{ aspect-ratio:1.22; } .co-hero{ padding-block:14px 22px; } .co-hero h1{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:14px; } .co-hero .lead{ margin-bottom:20px; } .co-hero .hero-ctas{ margin-bottom:16px; } }
@media (max-width:1080px){ .co-hero-grid{ grid-template-columns:minmax(0,1fr); } body.v2 .co-hero .trust-chips{ flex-wrap:wrap; white-space:normal; } .co-collage{ width:100%; max-width:520px; margin:8px auto 0; } .v2fold > .co-hero{ display:block; } }
@media (max-width:640px){ .co-stats{ grid-template-columns:1fr 1fr; } .co-collage{ min-height:0; aspect-ratio:1.1; } .co-arc{ width:64px; } .co-track img{ height:26px; width:110px; } .co-track img.wide{ width:150px; } }

/* ===== demo and no-access pages on phones (2026-09-12): title, then the form card, then the points; the page scrolls. dm-mobile-flow */
@media (max-width:900px){
  body.v2.fit > main{ display:block; }
  .dm-sec{ min-height:0; display:block; padding-block:24px 40px; }
  .dm-grid{ display:flex; flex-direction:column; gap:0; }
  .dm-copy, .dm-top{ display:contents; }
  .dm-top > .eyebrow{ order:1; margin-bottom:14px; }
  .dm-top > h1{ order:2; margin-bottom:26px; }
  .dm-top > .lead{ display:none; }
  .dm-card{ order:4; align-self:stretch; width:100%; max-width:none; margin:0 0 34px; }
  .dm-points{ order:5; margin-top:0; gap:16px; }
}

/* ===== phones: captions stay short enough for one row (2026-09-12). phone-eyebrows ===== */
@media (max-width:560px){
  body.v2 .eyebrow{ font-size:.62rem; letter-spacing:.1em; }
  body.v2 .feat-copy .eb, body.v2 .sol-hero .eb, body.v2 .deck-head .eb, body.v2 .lead-side .eb{ font-size:.62rem; letter-spacing:.1em; }
  body.v2 .plat-band .lp-plat-eyebrow, body.v2 .co-band .lp-plat-eyebrow{ white-space:nowrap; gap:8px; }
  body.v2 .plat-band .lp-plat-eyebrow span, body.v2 .co-band .lp-plat-eyebrow span{ font-size:clamp(.48rem,2.45vw,.62rem); letter-spacing:.1em; white-space:nowrap; }
  body.v2 .plat-band .lp-plat-eyebrow::before, body.v2 .plat-band .lp-plat-eyebrow::after, body.v2 .co-band .lp-plat-eyebrow::before, body.v2 .co-band .lp-plat-eyebrow::after{ width:12px; flex:none; }
  .eb-tail{ display:none; }
}

/* phones: the Company column spans the row and its links flow in two columns (2026-09-12). phone-footer */
@media (max-width:560px){
  body.v2 .footer-grid > div:nth-child(4){ grid-column:1 / -1; }
  body.v2 .footer-grid > div:nth-child(4) ul{ display:grid; grid-template-columns:1fr 1fr; column-gap:26px; }
  body.v2 .footer-tag{ max-width:none; }
}