/* ============================================================
   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 main > :first-child{ border-top:var(--v2-navspace) solid transparent; }

/* ============================================================
   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; }

/* ============================================================
   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; 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 .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,4.2vw,60px); 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;
}
@media (max-width:1080px){
  .shot-over{ padding-bottom:0; }
  .shot-over > .ap-dash{ position:static; width:100%; margin-top:14px; 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; }
.deck-card h3{ font:800 1.16rem/1.2 var(--fd); letter-spacing:-.015em; color:var(--ink); margin:0 0 10px; }
.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; }
.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; }
.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); }
  .plat-band{ padding-block:12px 13px; }
}

/* 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; }
  /* 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%; }
}

<!-- Append to public/assets/css/v2.css, after the .ap-alerts block.
     No inline styles anywhere: style-src is 'self' with no unsafe-inline. -->

/* ============================================================
   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; }
.dm-points li{ font:400 1rem/1.6 var(--fb); color:var(--slate); }
.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; }
}