/* ==========================================================================
   uprightmedia.io — V3 one-page additions
   Loads after site.css and only adds components the one-pager needs.

   COLOUR SYSTEM — four fixed accents, already defined in site.css and already
   present in the loop art. Each belongs to one capability, so colour carries
   meaning and never decorates:

     indigo  #5D69D0  --u-indigo   the model, pages and properties
     blue    #4CA6FA  --u-blue     media
     amber   #F1C84E  --u-amber    creative
     green   #4AB681  --u-green    measurement, results, "approved"

   Put data-c="model|media|creative|measure" on an element and its children
   read var(--c) for fills and var(--c-ink) for small text.
   ========================================================================== */

[data-c="model"]{--c:var(--u-indigo);}
[data-c="media"]{--c:var(--u-blue);}
[data-c="creative"]{--c:var(--u-amber);}
[data-c="measure"]{--c:var(--u-green);}
[data-c]{--c-ink:color-mix(in oklab,var(--c) 74%,#fff);--c-tint:color-mix(in oklab,var(--c) 12%,transparent);--c-line:color-mix(in oklab,var(--c) 32%,transparent);}

/* Header nav: V3 labels are longer than V2's, so never wrap them, and drop the
   links before they crowd the logo and button. */
.nav-link{white-space:nowrap;}
@media (max-width:919px){.nav-items{display:none;}}

/* Anchored sections clear the fixed header. */
[id]{scroll-margin-top:calc(var(--header-height) + 16px);}

/* Section label: a small coloured marker and a mono caption above each heading. */
.kicker{
  display:flex;align-items:center;gap:10px;margin-bottom:28px;
  font-family:var(--font-monospace);font-size:var(--text-mini-size);
  letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-tertiary);
}
/* The marker is the Upright icon, drawn as a mask so it takes the section colour. */
.kicker i{flex:none;width:11px;height:11px;background:var(--c);filter:drop-shadow(0 0 6px var(--c-line));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 446 450'%3E%3Cpath d='M0 72L72 0H446V378L374 450V72ZM14 120H326V432H254V192H14Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 446 450'%3E%3Cpath d='M0 72L72 0H446V378L374 450V72ZM14 120H326V432H254V192H14Z'/%3E%3C/svg%3E") center/contain no-repeat;}
/* The label sits on its own row, so the heading and the text beside it start level. */
.section-header > .kicker{grid-column:1/-1;}
.section-header .section-desc{text-box:trim-both cap alphabetic;}
.contact-split > .kicker{grid-column:1/-1;}

/* Hero */
.pill{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:32px;padding:5px 12px 5px 10px;
  border:1px solid var(--color-border-primary);border-radius:999px;background:var(--color-bg-level-1);
  font-size:var(--text-mini-size);color:var(--color-text-secondary);
}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--u-green);box-shadow:0 0 0 3px color-mix(in oklab,var(--u-green) 22%,transparent);}
/* Hero: 90px under it, then the platforms band. */
.hero.rail{padding-bottom:90px;}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;}
.hero-split h1{max-width:15ch;text-wrap:balance;}
.hero-split .hero-desc{margin-top:28px;max-width:50ch;}
.hero-art{position:relative;}
.hero-art .asset-frame{aspect-ratio:16/9;}
.hero-art:after{
  content:"";position:absolute;inset:-8% -4%;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(40% 50% at 72% 34%,color-mix(in oklab,var(--u-green) 16%,transparent),transparent 70%),
    radial-gradient(45% 55% at 34% 62%,color-mix(in oklab,var(--u-blue) 14%,transparent),transparent 70%);
}
@media (max-width:1023px){
  .hero-split{grid-template-columns:1fr;gap:40px;}
  .hero-split h1{max-width:19ch;}
}

.fineprint{margin-top:24px;color:var(--color-text-quaternary);font-size:var(--text-mini-size);}

/* Scale cards: only the unit takes colour. */
.stat-card[data-c] .stat-value span{color:var(--c-ink);}

/* ---- The money flow -------------------------------------------------- */
.flow{display:grid;grid-template-columns:var(--1fr) 40px var(--1fr) 40px var(--1fr) 40px var(--1fr) 40px var(--1fr);align-items:stretch;}
.flow-node{
  display:flex;flex-direction:column;gap:6px;padding:20px;
  border:1px solid var(--color-border-translucent);border-radius:var(--radius-8);
  background:linear-gradient(180deg,var(--c-tint),transparent 70%),var(--color-bg-level-1);
}
.flow-ico{
  display:grid;place-items:center;width:32px;height:32px;margin-bottom:22px;
  border-radius:var(--radius-8);color:var(--c-ink);background:var(--c-tint);box-shadow:inset 0 0 0 1px var(--c-line);
}
.flow-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.flow-who{font-family:var(--font-monospace);font-size:var(--text-mini-size);letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink);}
.flow-node strong{color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-size:var(--title-1-size);line-height:var(--title-1-line-height);}
.flow-node span.sub{color:var(--color-text-tertiary);font-size:var(--text-small-size);line-height:var(--text-small-line-height);}
.flow-arrow{position:relative;align-self:center;height:1px;margin-inline:6px;background:var(--color-border-tertiary);}
.flow-arrow:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--color-text-quaternary);border-right:1px solid var(--color-text-quaternary);transform:rotate(45deg);}
/* The return path: what converts downstream feeds back into bidding. */
.flow-return{
  position:relative;height:36px;margin:0 10% 0 10%;
  border:1px dashed color-mix(in oklab,var(--u-green) 45%,transparent);border-top:0;border-radius:0 0 14px 14px;
}
.flow-return:before{content:"";position:absolute;left:-4px;top:-1px;width:7px;height:7px;border-top:1px solid var(--u-green);border-left:1px solid var(--u-green);transform:rotate(45deg);}
.flow-return span{
  position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);padding-inline:14px;white-space:nowrap;
  background:var(--color-bg-primary);font-family:var(--font-monospace);font-size:var(--text-mini-size);
  color:color-mix(in oklab,var(--u-green) 74%,#fff);
}
@media (max-width:1023px){
  .flow{grid-template-columns:1fr;}
  .flow-node{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;}
  .flow-ico{margin-bottom:0;}
  .flow-node strong{flex-basis:100%;}
  .flow-arrow{width:1px;height:24px;margin:6px 0 6px 36px;background:var(--color-border-tertiary);}
  .flow-arrow:after{right:-3px;top:auto;bottom:0;transform:rotate(135deg);}
  .flow-return{height:auto;margin:20px 0 0;border:0;}
  .flow-return:before{display:none;}
  .flow-return span{position:static;transform:none;padding:0;white-space:normal;display:block;}
}

/* ---- Agency / lead vendor / Upright ---------------------------------- */
.compare-wrap{margin-top:96px;overflow-x:auto;border:1px solid var(--color-border-translucent);border-radius:var(--radius-8);background:var(--color-bg-level-1);}
.compare{width:100%;min-width:720px;border-collapse:collapse;font-size:var(--text-small-size);line-height:var(--text-small-line-height);}
.compare th,.compare td{text-align:left;vertical-align:top;padding:16px 20px;border-bottom:1px solid var(--color-border-translucent);}
.compare tr:last-child td{border-bottom:0;}
.compare thead th{font-family:var(--font-monospace);font-size:var(--text-mini-size);font-weight:var(--font-weight-normal);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-quaternary);}
.compare td{color:var(--color-text-tertiary);}
.compare td:first-child{color:var(--color-text-quaternary);white-space:nowrap;}
/* The Upright column is lifted a step: a brighter indigo wash and its own hairline
   edges, so the eye lands there first. */
.compare .us{--c:var(--u-indigo);color:var(--color-text-primary);background:color-mix(in oklab,var(--u-indigo) 18%,transparent);border-left:1px solid color-mix(in oklab,var(--u-indigo) 45%,transparent);border-right:1px solid color-mix(in oklab,var(--u-indigo) 45%,transparent);}
.compare thead .us{color:color-mix(in oklab,var(--u-indigo) 70%,#fff);background:color-mix(in oklab,var(--u-indigo) 24%,transparent);border-top:1px solid color-mix(in oklab,var(--u-indigo) 45%,transparent);}
.compare tr:last-child td.us{border-bottom:1px solid color-mix(in oklab,var(--u-indigo) 45%,transparent);}
/* A green tick in front of each Upright cell; the indigo tint comes from .us above. */
.compare td.us{padding-left:46px;background-repeat:no-repeat;background-position:20px 17px;background-size:16px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' fill='%234AB681' fill-opacity='.16' stroke='%234AB681' stroke-opacity='.5'/%3E%3Cpath d='M5 8.2l2 2 4-4.4' stroke='%234AB681' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

/* Capability tabs: each tab runs in its own colour. */
.run-tab[data-c] .run-tab-label:before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:2px;vertical-align:1px;background:var(--c);opacity:.45;transition:opacity .16s var(--ease-out-quad);}
.run-tab[data-c][aria-selected="true"] .run-tab-label:before{opacity:1;box-shadow:0 0 10px 0 var(--c-line);}
.run-tab[data-c][aria-selected="true"] .run-tab-rail i{background:var(--c);}

/* The three advantage columns share one set of rows (art / title / caption / proof),
   so the captions end level and the dividers under them line up. */
@media (min-width:901px){
  .fig-row{grid-template-rows:auto auto auto auto;row-gap:0;}
  .fig-row .fig{display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start;}
  .fig-row .fig-proof{align-self:start;}
}
/* Each advantage leads with its own heading, above the paragraph. */
.fig-title{margin:0 0 10px;color:var(--color-text-primary);}
.fig-row .fig-cap{margin:0;}

/* Proof line under each advantage. */
.fig-proof{
  display:flex;gap:10px;margin:16px 0 0;padding-top:16px;max-width:34ch;
  border-top:1px solid var(--color-border-translucent);
  font-family:var(--font-monospace);font-size:var(--text-mini-size);line-height:1.5;color:var(--color-text-secondary);
}
.fig-proof:before{content:"";flex:none;width:6px;height:6px;margin-top:6px;border-radius:2px;background:var(--c);}

/* Result cards: headline figure, one coloured line, one small chart. */
.result-grid{display:grid;grid-template-columns:repeat(2,var(--1fr));gap:16px;}
.result{min-height:0;gap:16px;}
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;}
.result .stat-value{font-size:var(--title-4-size);line-height:var(--title-4-line-height);letter-spacing:var(--title-4-letter-spacing);}
.result .stat-sub{margin-top:10px;font-family:var(--font-monospace);font-size:var(--text-mini-size);color:var(--c-ink);}
.spark{flex:none;width:132px;height:64px;color:var(--c);overflow:visible;}
.spark .base{stroke:var(--color-border-secondary);stroke-width:1;}
.spark .muted{fill:var(--color-bg-quaternary);stroke:var(--color-border-tertiary);}
@media (max-width:767px){.result-grid{grid-template-columns:1fr;}}
@media (max-width:479px){.result-head{flex-direction:column-reverse;gap:16px;}}

/* Technology: the console sits in the full rail; under it, one centred line. That line
   is what Google's OAuth brand verification reads, so it stays static (no reveal, no
   animation, nothing that starts at opacity 0) and names the tool exactly as the OAuth
   consent screen does. */
.tech-stage{margin-top:0;}
.panel-caption{max-width:72ch;margin-inline:auto;color:var(--color-text-tertiary);}

/* Standards: checked list on the left, the ledger loop on the right. */
.std-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:center;}
.std-grid .asset-frame{aspect-ratio:16/10;border-radius:var(--radius-12);}
.checks{display:grid;gap:0;}
.check-item{display:grid;grid-template-columns:20px var(--1fr);gap:16px;padding-block:18px;border-top:1px solid var(--color-border-translucent);}
.check-item:last-child{border-bottom:1px solid var(--color-border-translucent);}
.check-item svg{width:18px;height:18px;margin-top:2px;color:var(--u-green);}
.check-item h4{color:var(--color-text-primary);}
.check-item p{margin-top:4px;color:var(--color-text-tertiary);}
@media (max-width:1023px){.std-grid{grid-template-columns:1fr;gap:48px;}.std-grid .std-art{order:-1;}}

/* About */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
@media (max-width:767px){.split-2{grid-template-columns:1fr;gap:40px;}}
.exp{display:grid;gap:32px;margin-top:56px;}
.exp h3{color:var(--color-text-quaternary);font-family:var(--font-monospace);font-size:var(--text-mini-size);font-weight:var(--font-weight-normal);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;}
.exp ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
/* Labels carry a coloured dot, the way Linear's issue labels do. */
.exp li{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border:1px solid var(--color-border-primary);border-radius:999px;background:var(--color-bg-level-1);color:var(--color-text-secondary);font-size:var(--text-small-size);}
.exp li:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--u-indigo));}
/* The operator line and the three figures, in one row above the principle cards. */
.about-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr);gap:40px 56px;align-items:center;margin-top:64px;padding-top:48px;border-top:1px solid var(--color-border-translucent);}
.about-lead{margin:0;}
.about-lead strong{display:block;color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-size:var(--title-3-size);line-height:var(--title-3-line-height);letter-spacing:var(--title-3-letter-spacing);}
.about-lead span{display:block;margin-top:10px;max-width:40ch;color:var(--color-text-tertiary);font-size:var(--title-2-size);line-height:1.4;letter-spacing:var(--title-2-letter-spacing);}
@media (min-width:1024px){.about-lead strong{white-space:nowrap;}}
.band-kpis{display:grid;grid-template-columns:repeat(3,var(--1fr));gap:0;margin:0;padding:0;}
.band-kpis > div{padding:4px 0 4px 24px;border-left:1px solid var(--color-border-translucent);}
.band-kpis dt{font-size:var(--title-4-size);line-height:1.1;letter-spacing:var(--title-4-letter-spacing);font-weight:var(--font-weight-normal);color:var(--color-text-secondary);transition:color .25s var(--ease-out-quad);}
.band-kpis dd{margin:10px 0 0;max-width:22ch;font-size:var(--text-small-size);line-height:var(--text-small-line-height);color:var(--color-text-tertiary);transition:color .25s var(--ease-out-quad);}
@media (hover:hover){
  .band-kpis:hover dt{color:var(--color-text-tertiary);}
  .band-kpis:hover dd{color:var(--color-text-quaternary);}
  .band-kpis > div:hover dt,.band-kpis > div:hover dd{color:var(--color-text-primary);}
}
@media (max-width:1023px){
  .about-band{grid-template-columns:1fr;gap:32px;}
  .band-kpis > div:first-child{padding-left:0;border-left:0;}
}
@media (max-width:639px){
  .about-band{margin-top:48px;padding-top:40px;}
  .band-kpis{grid-template-columns:1fr;gap:20px;}
  .band-kpis > div{padding:0;border-left:0;}
}
.principles{display:grid;grid-template-columns:repeat(4,var(--1fr));gap:16px;margin-top:64px;}
.principle{padding:24px;border:1px solid var(--color-border-translucent);border-radius:var(--radius-8);background:linear-gradient(180deg,var(--c-tint),transparent 60%),var(--color-bg-level-1);}
.principle svg{width:20px;height:20px;color:var(--c-ink);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.principle h4{margin-top:32px;color:var(--color-text-primary);}
.principle p{margin-top:8px;color:var(--color-text-tertiary);}
@media (max-width:1023px){.principles{grid-template-columns:1fr 1fr;}}
@media (max-width:639px){.principles{grid-template-columns:1fr;}.principle h4{margin-top:20px;}}

/* FAQ, with an at-a-glance card under the heading. */
.glance{margin-top:48px;max-width:400px;border:1px solid var(--color-border-translucent);border-radius:var(--radius-12);background:var(--color-bg-level-1);overflow:hidden;}
.glance-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--color-border-translucent);font-family:var(--font-monospace);font-size:var(--text-mini-size);color:var(--color-text-tertiary);}
.glance-row{display:grid;grid-template-columns:84px var(--1fr);gap:12px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--color-border-translucent);font-size:var(--text-small-size);}
.glance-row:last-child{border-bottom:0;}
.glance-row dt{display:flex;align-items:center;gap:8px;color:var(--color-text-tertiary);}
.glance-row dt:before{content:"";width:6px;height:6px;border-radius:2px;background:var(--c);}
.glance-row dd{margin:0;color:var(--color-text-primary);}
.faq{border-top:1px solid var(--color-border-translucent);}
.faq details{border-bottom:1px solid var(--color-border-translucent);}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-block:20px;cursor:pointer;list-style:none;
  color:var(--color-text-primary);font-size:var(--title-1-size);line-height:var(--title-1-line-height);font-weight:var(--font-weight-medium);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--color-text-quaternary);transition:transform .16s var(--ease-out-quad),color .16s var(--ease-out-quad);}
.faq summary:hover:after,.faq details[open] summary:after{color:color-mix(in oklab,var(--u-indigo) 70%,#fff);}
.faq details[open] summary:after{transform:rotate(45deg);}
.faq summary:focus-visible{outline:1px solid var(--color-border-tertiary);outline-offset:4px;border-radius:var(--radius-4);}
.faq p{padding-bottom:24px;max-width:64ch;color:var(--color-text-tertiary);}

/* Contact: pitch left, form right, one pool of indigo light behind the form. */
.contact-split{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,448px);gap:0 64px;align-items:start;padding-block:128px;}
.contact-split h2{max-width:24ch;}
.contact-split .lede{margin-top:24px;max-width:44ch;color:var(--color-text-tertiary);}
.contact-split .contact-card{position:relative;box-shadow:0 0 140px -30px color-mix(in oklab,var(--u-indigo) 55%,transparent);}
.contact-card .field + .field{margin-top:12px;}
.contact-card .field input:focus,.contact-card .field textarea:focus{border-color:color-mix(in oklab,var(--u-indigo) 70%,#fff);}
.form-status{margin-top:12px;min-height:1.5em;font-size:var(--text-mini-size);color:var(--color-text-tertiary);}
.form-status.ok{color:var(--u-green);}
.form-status.err{color:var(--color-red);}
@media (max-width:1023px){.contact-split{grid-template-columns:1fr;gap:0;padding-block:96px;}.contact-split .contact-card{margin-top:48px;}}

/* ==========================================================================
   Phone and small-tablet refinements
   ========================================================================== */

/* Agent cards: untouched on desktop (display:contents keeps them children of the
   stage, where they float over the console). */
.annot-strip{display:contents;}

@media (max-width:1024px){
  /* the intro paragraph lines up with its heading once the header is one column */
  .section-header .desc-col{padding-inline:0;}
}

@media (max-width:767px){
  /* Comparison table becomes one card per question, Upright's answer first. */
  .compare-wrap{margin-top:56px;overflow:visible;border:0;border-radius:0;background:none;}
  .compare{display:block;min-width:0;}
  .compare thead{display:none;}
  .compare tbody{display:grid;gap:12px;}
  .compare tr{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--color-border-translucent);border-radius:var(--radius-8);background:var(--color-bg-level-1);}
  .compare td{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 16px;border:0;}
  .compare td:first-child{display:block;order:0;padding:14px 16px 10px;white-space:normal;color:var(--color-text-primary);font-size:var(--text-regular-size);font-weight:var(--font-weight-medium);}
  .compare td[data-label]:before{content:attr(data-label);font-family:var(--font-monospace);font-size:11px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-quaternary);}
  .compare td.us,.compare tr:last-child td.us{order:1;padding:12px 16px;border:0;background-image:none;}
  .compare td.us:before{color:color-mix(in oklab,var(--u-indigo) 62%,#fff);}
  .compare td:nth-child(2){order:2;}
  .compare td:nth-child(3){order:3;padding-bottom:14px;}
}

@media (max-width:640px){
  /* rhythm: the page is long on a phone, so tighten the gaps between blocks */
  .section-header{padding-bottom:40px;}
  .steps{margin-top:40px;}
  .principles{margin-top:56px;}
  .exp{margin-top:40px;}
  .fig-row{gap:48px;}
  .contact-split{padding-block:72px;}
  .glance{margin-top:32px;max-width:none;}

  /* hero: two equal full-width buttons read as deliberate; mismatched widths do not */
  .hero-actions{flex-direction:column;}
  .hero-actions .button{width:100%;justify-content:center;}

  /* Scale heading: the white line leads, the grey continuation steps down a size */
  .section .title-5 .lead-line{display:block;margin-bottom:14px;font-size:30px;line-height:1.12;letter-spacing:-.022em;}
  .section .title-5:has(> .lead-line){font-size:20px;line-height:1.45;letter-spacing:-.012em;}

}

@media (max-width:768px){
  /* Console table: bare fr tracks size to each row's content, so the number columns
     drift from row to row. Fixed tracks keep Spend and Conv. in line. */
  .rows .row{grid-template-columns:minmax(0,1fr) 74px 52px;gap:10px;}
  .rows .row > div:nth-child(n+2){text-align:right;}
  .rows .row .campaign{min-width:0;}
}

@media (max-width:600px){
  /* site.css sets this track to a bare 1fr, which grows to the console's content
     width and pushes it off-screen. minmax(0,1fr) lets it shrink to the viewport. */
  .hero-stage{grid-template-columns:minmax(0,1fr);}
  /* agent cards become one swipeable row instead of four stacked blocks */
  .annot-strip{
    display:flex;gap:12px;grid-column:1/-1;overflow-x:auto;
    margin-inline:calc(var(--homepage-outer-padding) * -1);padding:4px var(--homepage-outer-padding) 12px;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--homepage-outer-padding);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .annot-strip::-webkit-scrollbar{display:none;}
  .annot-strip .annot{flex:0 0 80%;scroll-snap-align:start;}
}

/* ==========================================================================
   Round 6 — four sections rebuilt on reference layouts, in the site's own
   tokens: KPIs as plain text (Stripe), Capabilities as a two-column slider
   with progress rails (Attio), Track record as a bento of cards (Vercel),
   Standards as a horizontal card slider with arrows (Raycast).
   ========================================================================== */

/* ---- KPIs: plain text, centred per column; hovering one lifts it and dims the rest */
.kpis{display:grid;grid-template-columns:repeat(3,var(--1fr));gap:0 24px;margin:72px 0 0;padding:0;text-align:center;}
.kpis > div{padding:8px 16px;}
.kpis dt{font-size:var(--title-6-size);line-height:1;letter-spacing:-.022em;font-weight:var(--font-weight-normal);color:var(--color-text-secondary);transition:color .25s var(--ease-out-quad);}
.kpis dd{margin:16px auto 0;max-width:26ch;font-size:var(--text-regular-size);line-height:1.5;color:var(--color-text-tertiary);transition:color .25s var(--ease-out-quad);}
@media (hover:hover){
  .kpis:hover dt{color:var(--color-text-tertiary);}
  .kpis:hover dd{color:var(--color-text-quaternary);}
  .kpis > div:hover dt,.kpis > div:hover dd{color:var(--color-text-primary);}
}
@media (max-width:767px){
  .kpis{grid-template-columns:repeat(2,var(--1fr));gap:0;margin-top:56px;}
  .kpis > div{padding:8px 12px;}
  .kpis > div:nth-child(3){grid-column:1/-1;margin-top:36px;padding-top:36px;border-top:1px solid var(--color-border-translucent);}
  .kpis dt{font-size:var(--title-5-size);}
}

/* ---- Capabilities: copy and list on the left, the active visual on the right */
.cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;margin-top:0;}
.cap-head{grid-column:1;grid-row:1;padding-right:56px;}
.cap-head h2{max-width:14ch;}
.cap-head .section-desc{margin-top:24px;}
.cap-list{grid-column:1;grid-row:2;align-self:end;padding-right:56px;margin-top:56px;}
.cap-art{grid-column:2;grid-row:1/3;display:flex;align-items:center;padding-left:56px;border-left:1px solid var(--color-border-translucent);}
.cap-art .run-panel{display:block;width:100%;}
.cap-art .run-panel[hidden]{display:none;}
.cap-art .asset-frame{aspect-ratio:16/10;border-radius:var(--radius-12);}
.cap-item{appearance:none;background:none;border:0;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:14px 0;cursor:pointer;text-align:left;color:inherit;font:inherit;}
.cap-item[data-c] .run-tab-label:before{display:none;}
.cap-item .run-tab-label{font-size:var(--title-1-size);line-height:var(--title-1-line-height);letter-spacing:-.012em;font-weight:var(--font-weight-medium);color:var(--color-text-tertiary);transition:color .2s var(--ease-out-quad);}
.cap-item[aria-selected="true"] .run-tab-label{color:var(--color-text-primary);}
.cap-item:hover .run-tab-label{color:var(--color-text-secondary);}
.cap-item:focus-visible{outline:1px solid var(--color-border-tertiary);outline-offset:4px;border-radius:var(--radius-4);}
.cap-desc{display:none;margin-top:10px;max-width:44ch;color:var(--color-text-tertiary);font-size:var(--text-small-size);line-height:var(--text-small-line-height);}
.cap-desc strong{color:var(--color-text-secondary);font-weight:var(--font-weight-medium);}
.cap-item[aria-selected="true"] .cap-desc{display:block;}
.cap-item .run-tab-rail{display:none;margin-top:20px;}
.cap-item[aria-selected="true"] .run-tab-rail{display:block;}
.cap-item .run-tab-rail{background:var(--color-border-secondary);}
.cap .run-tab[aria-selected="true"] .run-tab-rail i{background:var(--color-text-tertiary);animation-duration:12s;}
@media (prefers-reduced-motion:no-preference){
  .cap-item[aria-selected="true"] .cap-desc{animation:run-in .45s var(--ease-out-quad) both;}
}
.cap-segs{display:none;}
@media (max-width:1023px){
  .cap{grid-template-columns:1fr;grid-template-rows:none;}
  .cap-head,.cap-art,.cap-segs,.cap-list{grid-column:1;grid-row:auto;padding:0;border:0;margin:0;}
  .cap-head h2{max-width:none;}
  .cap-art{margin-top:40px;}
  .cap-segs{display:grid;grid-template-columns:repeat(4,var(--1fr));gap:8px;margin-top:20px;}
  .cap-seg{appearance:none;border:0;background:none;padding:10px 0;cursor:pointer;}
  .cap-seg i{display:block;height:2px;border-radius:2px;background:var(--color-border-secondary);overflow:hidden;}
  .cap-seg i b{display:block;height:100%;width:0;background:var(--color-text-tertiary);border-radius:2px;}
  .cap-seg[aria-selected="true"] i b{animation:run-fill 12s linear both;}
  .cap-item{display:none;}
  .cap-item[aria-selected="true"]{display:flex;border:0;padding:8px 0 0;cursor:default;}
  .cap-item .run-tab-rail{display:none !important;}
}
@media (prefers-reduced-motion:reduce){.cap-seg[aria-selected="true"] i b{animation:none;width:100%;}}

/* ---- Track record: flat cards with monochrome product fragments (Vercel) */
.bento{display:grid;grid-template-columns:repeat(2,var(--1fr));gap:12px;}
.bento-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:296px;padding:32px;border:1px solid var(--color-border-primary);border-radius:var(--radius-8);background:var(--color-bg-level-0);overflow:hidden;transition:border-color .2s var(--ease-out-quad);}
.bento-card:hover{border-color:var(--color-border-tertiary);}
.bento-text{position:relative;z-index:1;max-width:46%;}
.bento-text h3{color:var(--color-text-primary);}
.bento-sub{margin-top:8px;font-family:var(--font-monospace);font-size:var(--text-mini-size);line-height:1.5;color:var(--color-text-tertiary);}
.bento-text .text-small{margin-top:12px;color:var(--color-text-tertiary);}
.bento-tall{grid-row:1/3;min-height:0;}
.bento-tall .bento-text{max-width:56%;}
.bento-art{position:absolute;inset:32px 32px 44%;color:var(--color-text-quaternary);}
.bento-art svg{width:100%;height:100%;}
.bento-art .grid path{stroke:var(--color-border-primary);stroke-width:1;fill:none;}
.bento-art .wire rect{fill:none;stroke:currentColor;stroke-width:1;}
.bento-art .wire.faint rect{stroke:var(--color-border-secondary);}
.bento-art .line{fill:none;stroke:var(--color-text-tertiary);stroke-width:1;}
.bento-art .line.faint{stroke:var(--color-border-secondary);}
.bento-frag{position:absolute;right:-1px;top:40px;bottom:-1px;width:52%;display:flex;flex-direction:column;gap:12px;padding:18px 24px;border:1px solid var(--color-border-primary);border-right:0;border-bottom:0;border-radius:var(--radius-8) 0 0 0;background:var(--color-bg-level-1);color:var(--color-text-quaternary);font-size:var(--text-mini-size);}
.bento-frag .frag-head{color:var(--color-text-quaternary);}
.bento-frag .frag-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;}
.bento-frag .frag-row i{display:block;height:8px;width:var(--w);border-radius:2px;background:var(--color-border-secondary);}
.bento-frag .frag-row.on i{background:var(--color-text-secondary);}
.bento-frag .frag-row b{font-weight:var(--font-weight-normal);color:var(--color-text-secondary);}
.bento-frag .frag-chart{display:block;width:100%;height:96px;flex:none;}
.bento-frag .grid path{stroke:var(--color-border-primary);stroke-width:1;fill:none;}
.bento-frag .step,.bento-frag .curve{fill:none;stroke:var(--color-text-secondary);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.bento-frag .frag-foot{display:flex;justify-content:space-between;color:var(--color-text-tertiary);}
.bento-wide{grid-column:1/-1;min-height:232px;}
.bento-wide .bento-frag{width:44%;top:32px;}
@media (max-width:1023px){.bento-text{max-width:52%;}}
@media (max-width:767px){
  .bento{grid-template-columns:1fr;}
  .bento-card,.bento-wide{min-height:0;padding:24px;}
  .bento-tall{grid-row:auto;}
  .bento-text,.bento-tall .bento-text{max-width:none;}
  .bento-art{position:relative;inset:auto;height:200px;margin:0 0 20px;}
  .bento-frag,.bento-wide .bento-frag{position:relative;inset:auto;width:auto;margin:0 -25px 20px 0;top:auto;}
}

/* ---- Standards: cards in a horizontal track that runs off the right edge; arrows below */
.slider{margin-top:8px;}
.slider-track{--bleed:max(0px,calc((100vw - 100%) / 2));display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 0 8px;margin-right:calc(-1 * var(--bleed));padding-right:var(--bleed);scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.slider-track::-webkit-scrollbar{display:none;}
.slide{flex:0 0 340px;scroll-snap-align:start;display:flex;flex-direction:column;min-height:400px;border:1px solid var(--color-border-translucent);border-radius:var(--radius-12);background:linear-gradient(180deg,var(--c-tint),transparent 55%),var(--color-bg-level-1);overflow:hidden;transition:border-color .2s var(--ease-out-quad);}
.slide:hover{border-color:var(--c-line);}
.slide-head{display:flex;align-items:center;gap:12px;padding:24px 24px 0;}
.slide-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-8);color:var(--c-ink);background:var(--c-tint);box-shadow:inset 0 0 0 1px var(--c-line);}
.slide-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.slide h4{color:var(--color-text-primary);}
.slide > p{padding:14px 24px 0;color:var(--color-text-tertiary);}
/* The clips are drawn on black. Screen-blending them lifts the black away so the
   object floats on the card's own tint; isolation keeps the blend inside the card. */
.slide{isolation:isolate;}
.slide-visual{position:relative;flex:1;margin:16px 0 8px;min-height:200px;}
.slide-visual video,.slide-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:screen;}
.slider-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;}
.slider-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--color-border-primary);background:var(--color-bg-level-1);color:var(--color-text-secondary);cursor:pointer;transition:background .16s var(--ease-out-quad),color .16s var(--ease-out-quad),opacity .16s var(--ease-out-quad);}
.slider-btn:hover{background:var(--color-bg-level-3);color:var(--color-text-primary);}
.slider-btn[disabled]{opacity:.35;cursor:default;}
.slider-btn[disabled]:hover{background:var(--color-bg-level-1);color:var(--color-text-secondary);}
.slider-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:767px){
  .slide{flex-basis:78%;min-height:360px;}
  .slider-nav{margin-top:16px;}
}

/* ---- Platforms band under the hero: seven marks in one muted white */
.logo-band{margin-top:20px;padding-block:0 88px;}
.band-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 32px;list-style:none;margin:0;padding:0;}
.band-item{display:inline-flex;align-items:center;gap:10px;color:var(--color-text-secondary);opacity:.72;font-size:var(--text-regular-size);font-weight:var(--font-weight-medium);letter-spacing:-.011em;white-space:nowrap;transition:opacity .2s var(--ease-out-quad);}
.band-item:hover{opacity:1;}
.band-item svg{width:22px;height:22px;fill:currentColor;flex:none;}
@media (max-width:1023px){.band-row{justify-content:center;gap:20px 36px;}}
@media (max-width:640px){
  /* phones: the marks alone, in one row */
  .logo-band{padding-block:0 56px;}
  .band-row{flex-wrap:nowrap;justify-content:space-between;gap:0;}
  .band-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .band-item svg{width:24px;height:24px;}
}

/* ==========================================================================
   Footer — brand on the left, link groups on the right, one quiet legal line
   ========================================================================== */
/* site.css makes .footer-inner a grid with place-items:start; even as a block that
   start-justifies its children, so reset it and let the rows take the full width. */
.footer-v3{display:block;place-items:normal;padding-block:56px 32px;}
.footer-grid{display:flex;width:100%;justify-content:space-between;align-items:flex-start;gap:48px 64px;padding-inline:var(--homepage-padding-inset);}
.footer-grid .footer-col{width:auto;padding-inline:0;}
.footer-brand .footer-logo{margin-left:0;}
.footer-tagline{margin:18px 0 0;color:var(--color-text-tertiary);}
.footer-groups{display:flex;gap:96px;}
.footer-cols{display:flex;gap:48px;}
.footer-bar{display:flex;width:100%;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 32px;margin-top:64px;padding-inline:var(--homepage-padding-inset);font-size:12px;line-height:1.5;letter-spacing:-.01em;color:var(--color-text-quaternary);}
.footer-bar a{color:inherit;transition:color .16s var(--ease-out-quad);}
.footer-bar a:hover{color:var(--color-text-secondary);}
.footer-bar-links{display:inline-flex;gap:24px;}
@media (max-width:1023px){
  .footer-groups{gap:64px;}
}
@media (max-width:767px){
  .footer-grid{flex-direction:column;gap:40px;}
  .footer-groups{flex-direction:column;gap:40px;}
  .footer-bar{margin-top:48px;}
}