/* ==========================================================================
   uprightmedia.io — design system
   Tokens transcribed verbatim from linear.app's computed custom properties
   (static.linear.app/web/_next/static/css/* + :root, read 2026-08-15).
   Names and values are Linear's own, not approximations.
   ========================================================================== */
:root{
  /* surfaces */
  --color-bg-primary:#08090a;
  --color-bg-secondary:#1c1c1f;
  --color-bg-tertiary:#232326;
  --color-bg-quaternary:#28282c;
  --color-bg-translucent:#ffffff0d;
  --color-bg-level-0:#08090a;
  --color-bg-level-1:#0f1011;
  --color-bg-level-2:#141516;
  --color-bg-level-3:#191a1b;

  /* text — four tiers, used deliberately */
  --color-text-primary:#f7f8f8;
  --color-text-secondary:#d0d6e0;
  --color-text-tertiary:#8a8f98;
  --color-text-quaternary:#62666d;

  /* borders */
  --color-border-primary:#23252a;
  --color-border-secondary:#34343a;
  --color-border-tertiary:#3e3e44;
  --color-border-translucent:#ffffff0d;
  --color-border-translucent-strong:#ffffff14;

  /* brand + accents */
  --color-brand-bg:#5e6ad2;
  --color-brand-text:#fff;
  --color-accent:#7170ff;
  --color-green:#27a644;
  --color-red:#eb5757;
  --color-yellow:#f0bf00;

  /* Upright accents — Linear's semantic trio, shifted a hair so the values are ours.
     Used for meaning only: data sources, health, reconciliation. Never decoration. */
  --u-blue:#4CA6FA;    /* was #4EA7FC */
  --u-amber:#F1C84E;   /* was #F2C94C */
  --u-green:#4AB681;   /* was #4CB782 */
  --u-indigo:#5D69D0;  /* was #5E6AD2 */
  --color-button-invert-bg:#e5e5e6;
  --color-button-invert-bg-hover:#fff;

  /* layout rail — responsive, matching Linear at every width */
  --homepage-outer-padding:10px;
  --homepage-padding-inset:32px;
  --homepage-max-width:calc(1344px + var(--homepage-outer-padding) * 2);
  --header-height:72px;
  --header-blur:20px;
  --prose-max-width:624px;

  /* type */
  --font-regular:'Inter',"Inter Variable","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-monospace:"Berkeley Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-weight-normal:400;
  --font-weight-medium:510;
  --font-weight-semibold:590;
  --font-weight-bold:680;

  --title-1-size:1.0625rem;  --title-1-line-height:1.4;   --title-1-letter-spacing:-.012em;
  --title-2-size:1.25rem;    --title-2-line-height:1.33;  --title-2-letter-spacing:-.012em;
  --title-3-size:1.5rem;     --title-3-line-height:1.33;  --title-3-letter-spacing:-.012em;
  --title-4-size:2rem;       --title-4-line-height:1.125; --title-4-letter-spacing:-.022em;
  --title-5-size:2.5rem;     --title-5-line-height:1.1;   --title-5-letter-spacing:-.022em;
  --title-6-size:3rem;       --title-6-line-height:1;     --title-6-letter-spacing:-.022em;
  --title-7-size:3.5rem;     --title-7-line-height:1.1;   --title-7-letter-spacing:-.022em;
  --title-8-size:4rem;       --title-8-line-height:1.06;  --title-8-letter-spacing:-.022em;

  --text-large-size:1.0625rem;  --text-large-line-height:1.6;  --text-large-letter-spacing:0;
  --text-regular-size:.9375rem; --text-regular-line-height:1.6;--text-regular-letter-spacing:-.011em;
  --text-small-size:.875rem;    --text-small-line-height:1.5;  --text-small-letter-spacing:-.013em;
  --text-mini-size:.8125rem;    --text-mini-line-height:1.5;   --text-mini-letter-spacing:-.01em;

  /* radii, shadows, motion */
  --radius-4:4px; --radius-6:6px; --radius-8:8px; --radius-12:12px; --radius-16:16px;
  --radius-rounded:9999px;
  --shadow-stack-low:0px 8px 2px 0px #0000,0px 5px 2px 0px #00000003,0px 3px 2px 0px #0000000a,0px 1px 1px 0px #00000012,0px 0px 1px 0px #00000014;
  --ease-out-quad:cubic-bezier(.25,.46,.45,.94);
  --ease-out-quint:cubic-bezier(.23,1,.32,1);
  --speed-quickTransition:.1s;

  --1fr:minmax(0,1fr);
  --layer-header:100;
}
@media (min-width:1400px){ :root{--homepage-outer-padding:46px;} }
@media (max-width:640px){
  :root{--homepage-outer-padding:16px;--homepage-padding-inset:8px;--header-height:64px;}
}

/* ---------- reset ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-bg-primary);
  color:var(--color-text-primary);
  font-family:var(--font-regular);
  font-size:var(--text-regular-size);
  line-height:var(--text-regular-line-height);
  letter-spacing:var(--text-regular-letter-spacing);
  font-weight:var(--font-weight-normal);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0;}
ul{list-style:none;}
a{color:inherit;text-decoration:none;}
strong{font-weight:var(--font-weight-medium);}
button,input,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px;}

/* ---------- type scale ---------- */
.title-7{font-size:var(--title-7-size);line-height:var(--title-7-line-height);letter-spacing:var(--title-7-letter-spacing);font-weight:var(--font-weight-medium);}
.title-5{font-size:var(--title-5-size);line-height:var(--title-5-line-height);letter-spacing:var(--title-5-letter-spacing);font-weight:var(--font-weight-medium);}
.title-4{font-size:var(--title-4-size);line-height:var(--title-4-line-height);letter-spacing:var(--title-4-letter-spacing);font-weight:var(--font-weight-medium);}
.title-3{font-size:var(--title-3-size);line-height:var(--title-3-line-height);letter-spacing:var(--title-3-letter-spacing);font-weight:var(--font-weight-medium);}
.title-2{font-size:var(--title-2-size);line-height:var(--title-2-line-height);letter-spacing:var(--title-2-letter-spacing);font-weight:var(--font-weight-medium);}
.title-1{font-size:var(--title-1-size);line-height:var(--title-1-line-height);letter-spacing:var(--title-1-letter-spacing);font-weight:var(--font-weight-medium);}
.text-large{font-size:var(--text-large-size);line-height:var(--text-large-line-height);letter-spacing:var(--text-large-letter-spacing);}
.text-regular{font-size:var(--text-regular-size);line-height:var(--text-regular-line-height);letter-spacing:var(--text-regular-letter-spacing);}
.text-small{font-size:var(--text-small-size);line-height:var(--text-small-line-height);letter-spacing:var(--text-small-letter-spacing);}
.text-mini{font-size:var(--text-mini-size);line-height:var(--text-mini-line-height);letter-spacing:var(--text-mini-letter-spacing);}
.t-primary{color:var(--color-text-primary);}
.t-secondary{color:var(--color-text-secondary);}
.t-tertiary{color:var(--color-text-tertiary);}
.t-quaternary{color:var(--color-text-quaternary);}
.mono{font-family:var(--font-monospace);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.tnum{font-variant-numeric:tabular-nums;}
@supports (text-box:trim-both cap alphabetic){ .trim{text-box:trim-both cap alphabetic;} }

/* ---------- rail ---------- */
.rail{max-width:var(--homepage-max-width);width:100%;margin-inline:auto;padding-inline:var(--homepage-outer-padding);}
.inset{padding-inline:var(--homepage-padding-inset);}

/* ---------- header ---------- */
.header{
  --header-bg:transparent; --header-border:transparent;
  position:fixed;inset-inline:0;top:0;z-index:var(--layer-header);
  height:var(--header-height);isolation:isolate;
  -webkit-backdrop-filter:blur(var(--header-blur));backdrop-filter:blur(var(--header-blur));
  background:linear-gradient(180deg,var(--header-bg) 0%,color-mix(in oklab,var(--header-bg) 100%,transparent 5%) 100%);
  border-bottom:1px solid var(--header-border);
  transition:var(--speed-quickTransition) var(--ease-out-quad);
  transition-property:border-color,background;
  user-select:none;
}
html[data-scrolled] .header{--header-border:#ffffff14;--header-bg:var(--color-bg-primary);}
.header:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--color-bg-primary) 0%,transparent 100%);
}
.header-inner{
  position:relative;height:100%;width:100%;display:flex;align-items:center;
  max-width:var(--homepage-max-width);margin-inline:auto;
  padding-inline:calc(var(--homepage-padding-inset) + var(--homepage-outer-padding) - 1px);
}
.logo-item{display:flex;flex:1;justify-content:flex-start;}
.logo-link{
  display:flex;align-items:center;height:32px;margin-left:-8px;padding:0 8px;
  border-radius:var(--radius-6);transition:opacity .16s var(--ease-out-quad);
}
.logo-link:hover{opacity:.85;}
.logo-mark{display:block;height:26px;width:auto;}
.nav-items{display:flex;align-items:center;}
.nav-link{
  height:32px;display:inline-flex;align-items:center;padding:0 12px;
  border-radius:var(--radius-rounded);font-size:var(--text-mini-size);
  color:var(--color-text-tertiary);transition:color .16s var(--ease-out-quad);
}
.nav-link:hover,.nav-link[aria-current]{color:var(--color-text-primary);}
.nav-divider{width:1px;height:16px;margin-inline:8px;background:var(--color-border-primary);}
.header-actions{display:flex;align-items:center;gap:8px;}

/* ---------- buttons (Linear Button.css) ---------- */
.button{
  -webkit-appearance:none;appearance:none;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border:none;background:none;margin:0;
  font-weight:var(--font-weight-medium);font-size:var(--button-font-size);
  height:var(--button-height);line-height:var(--button-height);
  gap:var(--button-gap);padding:var(--button-padding);
  border-radius:var(--radius-rounded);
  transition:.16s var(--ease-out-quad);
  transition-property:border,background-color,color,box-shadow,opacity,filter,transform;
}
.size-small{--button-height:32px;--button-font-size:13px;--button-padding:0 12px;--button-gap:8px;}
.size-medium{--button-height:40px;--button-font-size:13px;--button-padding:0 14px;--button-gap:8px;}
.size-default{--button-height:40px;--button-font-size:15px;--button-padding:0 16px;--button-gap:6px;}
.size-large{--button-height:44px;--button-font-size:16px;--button-padding:0 20px;--button-gap:6px;}
.variant-invert{
  background:var(--color-button-invert-bg);border:1px solid var(--color-button-invert-bg);
  color:var(--color-bg-primary);box-shadow:var(--shadow-stack-low);
}
.variant-invert:hover{background:var(--color-button-invert-bg-hover);}
.variant-invert:active{transform:scale(.97);}
.variant-secondary{
  background:var(--color-bg-translucent);color:var(--color-text-primary);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:inset 0 0 0 1px #ffffff08,inset 0 1px #ffffff0a,0 0 0 1px #0009,0 4px 4px #0000001a;
}
.variant-secondary:hover{background:var(--color-bg-level-3);}
.variant-secondary:active{background:var(--color-bg-level-3);transform:scale(.97);}
.variant-tertiary{
  border:1px solid var(--color-bg-secondary);background:var(--color-bg-primary);
  color:var(--color-text-tertiary);
}
.variant-tertiary:hover{color:var(--color-text-primary);border-color:var(--color-bg-tertiary);background:var(--color-bg-tertiary);}
.link-bright{display:inline-block;color:var(--color-text-secondary);transition:filter .16s var(--ease-out-quad),transform .16s var(--ease-out-quad);}
.link-bright:hover{filter:brightness(1.4);}
.link-bright:active{transform:scale(.97);}

/* ---------- layout primitives ---------- */
main{padding-top:var(--header-height);}
.keyline{width:100%;height:1px;background:var(--color-border-translucent-strong);}
.section{padding-block:128px;}
.section-tight{padding-block:96px;}
.section-header{display:grid;grid-template-columns:1fr 1fr;align-items:start;padding-bottom:96px;}
.section-header .title-col{padding-right:32px;}
.section-header .desc-col{padding-inline:var(--homepage-padding-inset);}
.section-desc{
  color:var(--color-text-secondary);max-width:38ch;
  font-size:var(--title-2-size);line-height:var(--title-2-line-height);
  letter-spacing:var(--title-2-letter-spacing);font-weight:var(--font-weight-normal);
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{padding-top:96px;padding-bottom:24px;}
.page-hero h1{max-width:20ch;}
.page-hero .page-desc{margin-top:24px;}

/* ---------- home hero ---------- */
.hero{padding-top:96px;padding-bottom:64px;}
.hero h1{max-width:19ch;}
.hero-footer{display:flex;align-items:baseline;justify-content:space-between;gap:32px;margin-top:32px;}
.hero-desc{color:var(--color-text-tertiary);max-width:46ch;}
.hero-note{display:flex;align-items:baseline;gap:8px;white-space:nowrap;}
.hero-note .flag{color:var(--color-text-primary);font-weight:var(--font-weight-medium);}
.hero-actions{display:flex;gap:8px;margin-top:32px;flex-wrap:wrap;}

/* ---------- product panel ---------- */
.panel-frame{
  border:1px solid var(--color-border-translucent-strong);
  border-radius:22px;padding:8px;position:relative;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);
}
.panel{
  position:relative;overflow:hidden;background:var(--color-bg-level-1);
  box-shadow:inset 0 0 0 1px var(--color-border-primary);border-radius:12px 12px 0 0;
}
.panel-glow{
  --glow-opacity:.04;position:absolute;top:0;left:38%;width:400px;height:400px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,var(--glow-opacity)) 0%,transparent 50%);
  mix-blend-mode:lighten;pointer-events:none;
}
.panel-caption{margin-top:20px;color:var(--color-text-quaternary);text-align:center;}
.app-bar{display:flex;align-items:center;gap:10px;height:40px;padding-inline:16px;border-bottom:1px solid var(--color-border-primary);}
.app-dots{display:flex;gap:6px;}
.app-dots i{width:9px;height:9px;border-radius:50%;background:var(--color-bg-quaternary);}
.app-path{color:var(--color-text-quaternary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-body{display:grid;grid-template-columns:216px var(--1fr);}
.app-side{border-right:1px solid var(--color-border-primary);padding:16px 12px;}
.side-group{color:var(--color-text-quaternary);padding-inline:8px;margin:20px 0 6px;}
.side-group:first-child{margin-top:0;}
.side-item{display:flex;align-items:center;gap:10px;min-height:28px;padding-inline:8px;border-radius:var(--radius-6);color:var(--color-text-tertiary);}
.side-item[aria-current]{background:var(--color-bg-level-3);color:var(--color-text-primary);}
.side-item i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;}
.app-main{padding:20px 24px 28px;}
.app-main-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.segmented{display:flex;gap:2px;padding:2px;border:1px solid var(--color-border-translucent);border-radius:var(--radius-6);}
.segmented span{padding:2px 10px;border-radius:4px;font-size:var(--text-mini-size);color:var(--color-text-tertiary);}
.segmented span[aria-selected]{background:var(--color-bg-level-3);color:var(--color-text-primary);}
.metric-row{
  display:grid;grid-template-columns:repeat(4,var(--1fr));gap:1px;background:var(--color-border-primary);
  border:1px solid var(--color-border-primary);border-radius:var(--radius-8);overflow:hidden;margin-bottom:20px;
}
.metric{background:var(--color-bg-level-1);padding:14px 16px;}
.metric .label{color:var(--color-text-quaternary);}
.metric .value{margin-top:6px;color:var(--color-text-primary);font-size:22px;letter-spacing:-.022em;font-weight:var(--font-weight-medium);}
.metric .delta{margin-top:4px;color:var(--color-green);}
.metric .delta[data-dir="down"]{color:var(--color-red);}
.chart{border:1px solid var(--color-border-translucent);border-radius:var(--radius-8);padding:14px 16px 8px;margin-bottom:20px;background:var(--color-bg-level-0);}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;color:var(--color-text-tertiary);}
.rows{border:1px solid var(--color-border-translucent);border-radius:var(--radius-8);overflow:hidden;}
.row{display:grid;grid-template-columns:2fr .9fr .9fr .9fr .9fr;gap:12px;align-items:center;padding:10px 16px;font-size:var(--text-small-size);}
.row+.row{border-top:1px solid var(--color-border-translucent);}
.row.head{background:var(--color-bg-level-0);color:var(--color-text-quaternary);font-size:var(--text-mini-size);}
.row .campaign{display:flex;align-items:center;gap:10px;color:var(--color-text-secondary);}
.row .num{color:var(--color-text-tertiary);}

/* ---------- app tab bar ---------- */
.app-tabs{display:flex;align-items:center;gap:4px;padding:0 20px;height:44px;border-bottom:1px solid var(--color-border-primary);}
.app-tabs .tab-label{font-size:var(--text-mini-size);color:var(--color-text-primary);font-weight:var(--font-weight-medium);margin-right:14px;}
.app-tabs .tab{font-size:var(--text-mini-size);color:var(--color-text-tertiary);padding:4px 10px;border-radius:var(--radius-6);}
.app-tabs .tab[aria-selected]{background:var(--color-bg-level-3);color:var(--color-text-primary);}

/* ---------- Linear-style data table ---------- */
.dt-head,.dt-row{
  display:grid;grid-template-columns:2.6fr .7fr .95fr .9fr 1fr .5fr;
  gap:16px;align-items:center;padding:0 20px;
}
.dt-head{height:40px;border-bottom:1px solid var(--color-border-primary);color:var(--color-text-quaternary);font-size:var(--text-mini-size);}
.dt-row{height:52px;font-size:var(--text-small-size);color:var(--color-text-secondary);}
.dt-row.muted{opacity:.55;}
.dt-name{display:flex;align-items:center;gap:10px;min-width:0;}
.dt-name .ico{width:20px;height:20px;border-radius:var(--radius-6);display:grid;place-items:center;flex:none;}
.dt-name .txt{min-width:0;}
.dt-name .sub{color:var(--color-text-quaternary);font-size:var(--text-mini-size);display:block;margin-top:1px;}
.tier-1,.tier-2{position:relative;}
.tier-1{padding-left:22px;}
.tier-2{padding-left:44px;}
.tier-1:before,.tier-2:before{
  content:"";position:absolute;top:-30px;bottom:50%;width:1px;background:var(--color-border-secondary);
}
.tier-1:before{left:9px;} .tier-2:before{left:31px;}
.tier-1:after,.tier-2:after{
  content:"";position:absolute;top:50%;width:11px;height:1px;background:var(--color-border-secondary);
}
.tier-1:after{left:9px;} .tier-2:after{left:31px;}
.health{display:flex;align-items:center;gap:7px;white-space:nowrap;}
.health[data-s="on"]{color:var(--u-green);}
.health[data-s="risk"]{color:var(--u-amber);}
.health[data-s="off"]{color:#eb5757;}
.prog{display:flex;align-items:center;gap:7px;color:var(--color-text-tertiary);white-space:nowrap;}
.prog svg{color:var(--u-indigo);flex:none;}
.dots-count{display:flex;align-items:center;gap:11px;color:var(--color-text-tertiary);white-space:nowrap;}
.dots-count span{display:inline-flex;align-items:center;gap:6px;}
.dots-count i{width:7px;height:7px;border-radius:50%;flex:none;}
.activity{color:var(--u-green);display:flex;justify-content:flex-start;}
.activity.none{color:var(--color-text-quaternary);}

/* ---------- stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,var(--1fr));gap:16px;}
.stat-grid.four{grid-template-columns:repeat(4,var(--1fr));}
.stat-card{
  display:flex;flex-direction:column;justify-content:flex-start;gap:14px;
  min-height:164px;padding:24px;
  background:var(--color-bg-level-1);border:1px solid var(--color-border-translucent);
  border-radius:var(--radius-8);transition:filter .2s ease-out;
}
.stat-card:hover{filter:brightness(125%);}
.stat-value{font-size:var(--title-6-size);line-height:var(--title-6-line-height);letter-spacing:var(--title-6-letter-spacing);font-weight:var(--font-weight-medium);}
.stat-grid.four .stat-value{font-size:var(--title-4-size);}
.stat-value span{color:var(--color-text-tertiary);font-size:24px;letter-spacing:-.012em;}
.stat-label{color:var(--color-text-tertiary);}

/* ---------- ingredient list ---------- */
.ingredients{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(6,auto);}
.ingredients.rows-4{grid-template-rows:repeat(4,auto);}
.ingredients.rows-3{grid-template-rows:repeat(3,auto);}
.ingredient{position:relative;padding-left:32px;}
.ingredient:before{content:"";position:absolute;left:0;bottom:-2px;width:1px;height:28px;background:var(--color-border-translucent-strong);}
.ingredient:last-of-type:before{height:26px;bottom:0;}
.ingredient-row{display:flex;align-items:center;height:28px;color:var(--color-text-secondary);}
.ingredient-row .plus{margin-left:4px;font-size:18px;color:var(--color-text-quaternary);opacity:0;transform:scale(0);transition:opacity .16s var(--ease-out-quad),transform .16s var(--ease-out-quad);}
.ingredient-link{display:block;cursor:default;transition:filter .16s var(--ease-out-quad),transform .16s var(--ease-out-quad);}
.ingredient-link:hover{filter:brightness(1.4);}
.ingredient-link:hover .plus{opacity:1;transform:scale(1);}

/* ---------- prose + notes ---------- */
.prose{max-width:var(--prose-max-width);}
.prose p{color:var(--color-text-tertiary);}
.prose p+p{margin-top:24px;}
.prose strong{color:var(--color-text-secondary);}
.notes{display:grid;gap:0;}
.note{display:grid;grid-template-columns:auto var(--1fr);gap:16px;padding-block:20px;border-top:1px solid var(--color-border-translucent);}
.note:last-child{border-bottom:1px solid var(--color-border-translucent);}
.note .idx{color:var(--color-text-quaternary);padding-top:2px;min-width:34px;}
.note h4{color:var(--color-text-primary);}
.note p{color:var(--color-text-tertiary);margin-top:6px;}

/* ---------- loop blocks (approach) ---------- */
.loops{display:grid;gap:0;}
.loop{display:grid;grid-template-columns:220px var(--1fr);gap:32px;padding-block:36px;border-top:1px solid var(--color-border-translucent);}
.loop:last-child{border-bottom:1px solid var(--color-border-translucent);}
.loop .cadence{color:var(--color-text-quaternary);}
.loop .cadence .tick{color:var(--color-accent);display:block;margin-bottom:6px;}
.loop h3{color:var(--color-text-primary);}
.loop p{color:var(--color-text-tertiary);margin-top:10px;max-width:56ch;}

/* ---------- case notes (work) ---------- */
.case{padding-block:44px;border-top:1px solid var(--color-border-translucent);}
.case:last-of-type{border-bottom:1px solid var(--color-border-translucent);}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.case .client{color:var(--color-text-quaternary);margin-bottom:12px;}
.case h3{color:var(--color-text-primary);max-width:22ch;}
.case .result{color:var(--color-text-secondary);margin-top:14px;}
.case .body{color:var(--color-text-tertiary);max-width:56ch;}

/* ---------- image slots (awaiting art) ---------- */
.img-slot{
  border:1px dashed var(--color-border-secondary);border-radius:var(--radius-12);
  background:var(--color-bg-level-1);display:grid;place-items:center;text-align:center;
  padding:32px;gap:10px;max-height:460px;
}
.img-slot[data-ratio="wide"]{aspect-ratio:16/7;}
.img-slot[data-ratio="diagram"]{aspect-ratio:16/9;}
.img-slot[data-ratio="square"]{aspect-ratio:1/1;}
.img-slot .slot-id{
  font-family:var(--font-monospace);font-size:var(--text-mini-size);
  color:var(--color-text-tertiary);border:1px solid var(--color-border-secondary);
  border-radius:var(--radius-4);padding:3px 8px;
}
.img-slot .slot-desc{color:var(--color-text-quaternary);max-width:48ch;font-size:var(--text-small-size);}

/* ---------- contact ---------- */
.prefooter{display:flex;flex-direction:column;align-items:center;gap:40px;margin-block:224px;text-align:center;}
.prefooter h2{max-width:22ch;}
.contact-card{
  width:100%;max-width:448px;text-align:left;background:var(--color-bg-level-1);
  border:1px solid var(--color-border-translucent);border-radius:var(--radius-12);padding:24px;
}
.field+.field{margin-top:12px;}
.field label{display:block;color:var(--color-text-tertiary);font-size:var(--text-mini-size);margin-bottom:6px;}
.field input,.field textarea{
  width:100%;background:var(--color-bg-level-0);border:1px solid var(--color-border-primary);
  border-radius:var(--radius-6);padding:8px 12px;font-size:var(--text-small-size);
  transition:border-color .16s var(--ease-out-quad);
}
.field input::placeholder,.field textarea::placeholder{color:var(--color-text-quaternary);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-border-tertiary);}
.field textarea{min-height:88px;resize:vertical;}
.contact-card .button{width:100%;margin-top:16px;}
.consent{margin-top:12px;color:var(--color-text-quaternary);}
.consent a{color:var(--color-text-tertiary);text-decoration:underline;text-underline-offset:2px;}

/* ---------- legal pages ---------- */
.legal{max-width:var(--prose-max-width);}
.legal h2{margin-top:48px;margin-bottom:12px;}
.legal p{color:var(--color-text-tertiary);}
.legal p+p{margin-top:16px;}

/* ---------- footer ---------- */
.footer{background:var(--color-bg-primary);border-top:1px solid var(--color-border-primary);}
.footer-inner{
  display:grid;grid-template-columns:repeat(6,var(--1fr));place-items:start;gap:0;
  padding:56px var(--homepage-outer-padding);max-width:var(--homepage-max-width);margin-inline:auto;
}
.footer-col{
  width:100%;padding-inline:var(--homepage-padding-inset);
  font-size:var(--text-mini-size);line-height:var(--text-mini-line-height);letter-spacing:var(--text-mini-letter-spacing);
}
.footer-logo{margin-left:var(--homepage-padding-inset);display:flex;align-items:center;}
.footer-title{color:var(--color-text-primary);font-weight:var(--font-weight-medium);margin-bottom:24px;}
.footer-link{display:inline-flex;align-items:center;min-height:28px;color:var(--color-text-tertiary);white-space:nowrap;}
.footer-link:hover{color:var(--color-text-primary);}
.footer-legal{grid-column:2;align-self:center;margin-top:80px;display:flex;gap:20px;font-size:var(--text-mini-size);color:var(--color-text-quaternary);}
.footer-status{grid-column:3/-2;margin-top:80px;display:flex;align-items:center;gap:8px;font-size:var(--text-mini-size);color:var(--color-text-tertiary);}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--color-green);}

/* ---------- responsive ---------- */
@media (max-width:1280px){ .hero-desc{max-width:378px;} }
@media (max-width:1024px){
  .section{padding-block:96px;}
  .section-header{grid-template-columns:1fr;padding-bottom:64px;}
  .section-header .title-col{padding-right:0;}
  .section-header .desc-col{margin-top:24px;}
  .hero-footer{flex-direction:column;align-items:flex-start;gap:20px;}
  .stat-grid,.stat-grid.four{grid-template-columns:1fr 1fr;}
  .app-body{grid-template-columns:1fr;}
  .app-side{display:none;}
  .footer-inner{grid-template-columns:repeat(4,var(--1fr));row-gap:48px;}
  .footer-legal{grid-column:1/-1;margin-top:0;}
  .footer-status{grid-column:2/-2;margin-top:0;}
  .case-grid{grid-template-columns:1fr;gap:20px;}
  .loop{grid-template-columns:1fr;gap:8px;}
}
@media (max-width:768px){
  .ingredients{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;}
  .metric-row{grid-template-columns:repeat(2,var(--1fr));}
  .row{grid-template-columns:1.6fr 1fr 1fr;}
  .row .opt{display:none;}
  .prefooter{margin-block:128px;}
  .footer-status{grid-column:1/-1;}
  .split-2{grid-template-columns:1fr !important;gap:48px !important;}
  .stat-grid,.stat-grid.four{grid-template-columns:1fr;}
  .stat-card{height:auto;gap:32px;}
}
@media (max-width:640px){
  .nav-items{display:none;}
  .nav-divider{display:none;}
  .header-actions{margin-left:auto;}
  .hero h1,.page-hero h1{font-size:38px;}
  .prefooter h2{font-size:38px;}
  .section .title-5{font-size:var(--title-4-size);line-height:var(--title-4-line-height);}
  .section-desc{color:var(--color-text-tertiary);font-size:var(--text-large-size);line-height:var(--text-large-line-height);letter-spacing:var(--text-large-letter-spacing);}
  .section{padding-block:72px;}
  .prefooter{margin-block:96px;}
  .footer-inner{grid-template-columns:repeat(2,var(--1fr));padding-bottom:24px;}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}html{scroll-behavior:auto;}}


/* ---------- hero: no CTA row, description sits directly under h1 ---------- */
.hero .hero-desc{margin-top:28px;max-width:52ch;}
.lead-line{white-space:nowrap;}
@media (max-width:1100px){ .lead-line{white-space:normal;} }

/* ---------- panel chart ---------- */
.panel-chart{padding:20px 20px 14px;border-bottom:1px solid var(--color-border-primary);}
.panel-chart svg{display:block;width:100%;height:178px;}
.chart-legend{display:flex;gap:18px;margin-top:12px;color:var(--color-text-quaternary);}
.chart-legend span{display:inline-flex;align-items:center;gap:7px;}
.chart-legend i{width:8px;height:8px;border-radius:2px;flex:none;}

/* ---------- visually hidden labels ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (max-width:900px){
  .dt-head,.dt-row{grid-template-columns:2.4fr 1fr 1fr;}
  .dt-head > div:nth-child(n+4),.dt-row > div:nth-child(n+4){display:none;}
}


/* ---------- hard break after the lead sentence ---------- */
.lead-line{display:block;white-space:nowrap;}
@media (max-width:1100px){ .lead-line{white-space:normal;} }

/* ---------- isometric figures (linear.app idiom) ---------- */
.fig{margin:0;display:flex;flex-direction:column;}
.fig-art{display:block;overflow:visible;}
.fig-art svg{display:block;width:100%;height:auto;margin-inline:auto;overflow:visible;}
.fig-cap{color:var(--color-text-tertiary);}

/* standalone: a constrained column so the drawing reads at Linear's proportions */
.fig-solo{max-width:440px;margin-inline:auto;text-align:center;}
.fig-solo .fig-art{
  height:300px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;
}
.fig-solo .fig-art svg{width:auto;height:100%;max-width:100%;}
.fig-solo .fig-cap{max-width:38ch;margin-inline:auto;}

/* three-up band, mirroring linear.app's own figure row */
.fig-row{display:grid;grid-template-columns:repeat(3,var(--1fr));}
.fig-row .fig{padding:0 44px;border-left:1px solid var(--color-border-translucent);}
.fig-row .fig:first-child{border-left:none;padding-left:0;}
.fig-row .fig:last-child{padding-right:0;}
.fig-row .fig-art{
  height:250px;display:flex;align-items:center;justify-content:center;
  margin-bottom:28px;
}
.fig-row .fig-art svg{width:auto;height:100%;max-width:100%;}
.fig-row .fig-cap{max-width:34ch;}
@media (max-width:900px){
  .fig-row{grid-template-columns:1fr;gap:64px;}
  .fig-row .fig{border-left:none;padding:0;}
}

/* the lifted plate drifts, and separates further on hover */
.fig-art .lift{transform:translateY(0);transition:transform .5s var(--ease-out-quint);}
.fig:hover .fig-art .lift{transform:translateY(-9px);}
@media (prefers-reduced-motion:no-preference){
  .fig-art .lift{animation:fig-float 7s ease-in-out infinite;}
  @keyframes fig-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .fig:hover .fig-art .lift{animation:none;transform:translateY(-9px);}
}

/* ---------- platform mark cluster ---------- */
.plat-cluster{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px 34px;
  padding-top:8px;max-width:620px;
}
.plat{transform:translate(var(--dx,0),var(--dy,0));}
.plat-mark{
  display:grid;place-items:center;color:var(--color-text-tertiary);
  transition:color .18s var(--ease-out-quad),transform .18s var(--ease-out-quad);
}
.plat-mark:hover{color:var(--color-text-primary);transform:translateY(-2px);}
.plat-mark svg{display:block;}
@media (max-width:640px){ .plat-cluster{gap:20px 24px;} .plat{transform:none;} }


/* ---------- campaign state badges (hero panel) ---------- */
.badge{
  font-size:var(--text-mini-size);line-height:1;padding:4px 7px;border-radius:var(--radius-4);
  border:1px solid var(--color-border-translucent);color:var(--color-text-tertiary);
}
.badge[data-state="live"]{color:var(--u-green);border-color:#4ab68140;background:#4ab68114;}
.badge[data-state="test"]{color:var(--u-amber);border-color:#f1c84e33;background:#f1c84e12;}

/* ---------- chart + agent log side by side ---------- */
.app-split{display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:20px;}
.app-split .chart{margin-bottom:0;}

.agent{
  border:1px solid var(--color-border-translucent);border-radius:var(--radius-8);
  background:var(--color-bg-level-0);padding:14px 16px;display:flex;flex-direction:column;
}
.agent-head{display:flex;align-items:center;gap:8px;color:var(--color-text-tertiary);margin-bottom:12px;}
.agent-head .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--u-green);flex:none;
  box-shadow:0 0 0 3px #4ab68124;
}
@media (prefers-reduced-motion:no-preference){
  .agent-head .pulse{animation:agent-pulse 2.4s ease-in-out infinite;}
  @keyframes agent-pulse{0%,100%{opacity:1}50%{opacity:.45}}
}
.agent-log{display:flex;flex-direction:column;gap:9px;flex:1;}
.agent-line{
  display:grid;grid-template-columns:12px minmax(0,1fr);gap:9px;align-items:start;
  font-size:12px;line-height:1.45;letter-spacing:-.01em;
}
.agent-line .tick{
  width:7px;height:7px;border-radius:50%;margin-top:5px;
  border:1px solid currentColor;color:var(--color-text-quaternary);
}
.agent-line[data-kind="read"]  .tick{color:var(--u-blue);background:#4ca6fa26;}
.agent-line[data-kind="think"] .tick{color:var(--u-amber);background:#f1c84e26;}
.agent-line[data-kind="run"]   .tick{color:var(--u-indigo);background:#5d69d026;}
.agent-line[data-kind="done"]  .tick{color:var(--u-green);background:var(--u-green);}
.agent-line .what{color:var(--color-text-secondary);grid-column:2;}
.agent-line .meta{color:var(--color-text-quaternary);grid-column:2;display:block;}
.agent-foot{
  margin-top:14px;padding-top:10px;border-top:1px solid var(--color-border-translucent);
  color:var(--color-text-quaternary);
}
/* the row the agent just acted on */
.row[data-agent]{position:relative;}
.row[data-agent]::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  border-radius:2px;background:var(--u-green);opacity:.75;
}

/* ---------- platform tiles (uniform, monochrome) ---------- */
.plat-grid{display:flex;flex-wrap:wrap;gap:10px;padding-top:8px;}
.plat-tile{
  width:64px;height:64px;display:grid;place-items:center;border-radius:var(--radius-12);
  background:var(--color-bg-level-1);border:1px solid var(--color-border-translucent);
  color:var(--color-text-tertiary);
  transition:color .18s var(--ease-out-quad),background .18s var(--ease-out-quad),transform .18s var(--ease-out-quad);
}
.plat-tile:hover{color:var(--color-text-primary);background:var(--color-bg-level-3);transform:translateY(-2px);}
.plat-tile svg{display:block;}

/* ---------- figure bands ---------- */
.fig-pair{display:grid;grid-template-columns:repeat(2,var(--1fr));margin-top:64px;}
.fig-pair .fig{padding:0 44px;border-left:1px solid var(--color-border-translucent);}
.fig-pair .fig:first-child{border-left:none;padding-left:0;}
.fig-pair .fig-art{height:230px;display:flex;align-items:center;justify-content:center;margin-bottom:26px;}
.fig-pair .fig-art svg{width:auto;height:100%;max-width:100%;}
.fig-pair .fig-cap{max-width:44ch;}

.fig-solo-band{margin-top:56px;padding-top:48px;border-top:1px solid var(--color-border-translucent);}

.fig-wide{margin-top:8px;}
.fig-wide .fig-art{padding:8px 0 28px;}
.fig-wide .fig-art svg{width:100%;height:auto;max-height:400px;}
.fig-wide .fig-cap{max-width:62ch;color:var(--color-text-tertiary);}

@media (max-width:900px){
  .app-split{grid-template-columns:1fr;}
  .fig-pair{grid-template-columns:1fr;gap:56px;}
  .fig-pair .fig{border-left:none;padding:0;}
}

.agent-tag{
  margin-left:10px;font-size:10.5px;letter-spacing:.02em;padding:2px 6px;border-radius:4px;
  color:var(--u-green);background:#4ab6811a;border:1px solid #4ab68133;white-space:nowrap;
}
@media (max-width:900px){ .agent-tag{display:none;} }


/* ==========================================================================
   HERO STAGE — four agent workflows running in parallel over a full-width panel.
   The panel keeps its real width; the callouts separate from the UI beneath by
   blur, a soft scrim, and depth rather than by being pushed out of the way.
   ========================================================================== */
.hero-stage{position:relative;}
.hero-stage .stage-panel{position:relative;}

.annot{
  position:absolute;z-index:3;width:228px;
  border-radius:var(--radius-8);padding:12px 14px;
  background:color-mix(in srgb,var(--color-bg-level-1) 86%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  box-shadow:
    0 0 0 1px #ffffff12,
    0 1px 0 0 #ffffff0a inset,
    0 26px 60px -20px #000,
    0 6px 18px -6px #000c;
}
/* a soft pool of shadow so the card lifts off whatever UI sits behind it */
.annot::before{
  content:"";position:absolute;inset:-32px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,#08090ad9,#08090a80 55%,transparent 80%);
}
.annot[data-pos="tl"]{left:0;top:11%;}
.annot[data-pos="tr"]{right:0;top:3%;}
.annot[data-pos="bl"]{left:0;bottom:24%;}
.annot[data-pos="br"]{right:0;bottom:15%;}

.annot-head{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-text-tertiary);margin-bottom:10px;
}
.annot-head .dot{
  width:6px;height:6px;border-radius:50%;background:var(--c);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent);
}
.annot-log{display:flex;flex-direction:column;gap:7px;}
.annot-log li{display:grid;grid-template-columns:9px minmax(0,1fr);gap:8px;font-size:11.5px;line-height:1.4;}
.annot-log .tk{
  position:relative;width:7px;height:7px;border-radius:50%;margin-top:4px;
  border:1px solid var(--c);
}
.annot-log .tk::after{
  content:"";position:absolute;inset:1px;border-radius:50%;background:var(--c);
}
.annot-log .w{color:var(--color-text-secondary);grid-column:2;}
.annot-log .m{position:relative;color:var(--color-text-quaternary);grid-column:2;}
.annot-log .dots{position:absolute;left:0;top:0;display:none;letter-spacing:.1em;}
.annot-log .dots i{font-style:normal;}

/* ---------- the run ----------
   Default state is the finished state, so no-JS and reduced-motion readers get
   the full content. Adding .agents-run rewinds and plays it. */
.agents-run .annot{opacity:0;animation:annot-in .5s var(--ease-out-quad) var(--cd) both;}
.agents-run .annot-log li{opacity:0;animation:line-in .42s var(--ease-out-quad) var(--d) both;}
.agents-run .annot-log .tk::after{
  transform:scale(0);
  animation:tick-fill .3s var(--ease-out-quint) calc(var(--d) + var(--think,2.5s)) both;
}
/* the ring works for a beat before the dot lands */
.agents-run .annot-log .tk{animation:tick-work 1.25s ease-in-out var(--d) var(--dotcycles,2) both;}

/* the sub-bullet "thinks" as ./../... for --think, then the real text resolves */
.agents-run .annot-log .dots{
  display:inline-block;
  animation:dots-out .01s linear calc(var(--d) + var(--think,2.5s)) forwards;
}
.agents-run .annot-log .dots i:nth-child(1){animation:dot-1 1.25s steps(1,end) var(--d) var(--dotcycles,2) both;}
.agents-run .annot-log .dots i:nth-child(2){animation:dot-2 1.25s steps(1,end) var(--d) var(--dotcycles,2) both;}
.agents-run .annot-log .dots i:nth-child(3){animation:dot-3 1.25s steps(1,end) var(--d) var(--dotcycles,2) both;}
.agents-run .annot-log .mt{opacity:0;animation:line-in .4s var(--ease-out-quad) calc(var(--d) + var(--think,2.5s)) both;}

/* the header dot breathes while the card works, then settles */
.agents-run .annot-head .dot{animation:dot-live .95s ease-in-out var(--cd) var(--dotn,6) both;}

@keyframes annot-in{
  from{opacity:0;transform:translateY(8px) scale(.985);}
  to{opacity:1;transform:none;}
}
@keyframes line-in{
  from{opacity:0;transform:translateY(3px);}
  to{opacity:1;transform:none;}
}
@keyframes tick-fill{ from{transform:scale(0);} to{transform:scale(1);} }
@keyframes tick-work{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 45%,transparent);}
  60%{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 0%,transparent);}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 0%,transparent);}
}
@keyframes dot-live{ 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes dots-out{ to{opacity:0;visibility:hidden;} }
@keyframes dot-1{ 0%,100%{opacity:1} }
@keyframes dot-2{ 0%{opacity:0} 33%,100%{opacity:1} }
@keyframes dot-3{ 0%{opacity:0} 66%,100%{opacity:1} }

@media (prefers-reduced-motion:reduce){
  .agents-run .annot,.agents-run .annot-log li,.agents-run .annot-log .tk,
  .agents-run .annot-log .tk::after,.agents-run .annot-log .mt,
  .agents-run .annot-log .dots i,.agents-run .annot-head .dot{animation:none;opacity:1;transform:none;}
  .agents-run .annot-log .tk::after{transform:scale(1);}
  .agents-run .annot-log .dots{display:none;}
}

/* once the margins run out, the callouts fall into a rail beneath the panel */
@media (max-width:1240px){
  .hero-stage{display:grid;grid-template-columns:repeat(4,var(--1fr));gap:12px;}
  .hero-stage .stage-panel{grid-column:1/-1;max-width:100%;margin-bottom:4px;}
  .annot{position:static;width:auto;box-shadow:0 0 0 1px #ffffff0d;backdrop-filter:none;-webkit-backdrop-filter:none;}
  .annot::before{display:none;}
}
@media (max-width:900px){ .hero-stage{grid-template-columns:repeat(2,var(--1fr));} }
@media (max-width:600px){ .hero-stage{grid-template-columns:1fr;} }


/* ==========================================================================
   "WHAT WE RUN" — four capabilities in one cycling panel
   ========================================================================== */
.run-tabs{margin-top:8px;}
.run-bar{
  display:grid;grid-template-columns:repeat(4,var(--1fr));gap:0;
  border-bottom:1px solid var(--color-border-translucent);
}
.run-tab{
  appearance:none;background:none;border:0;cursor:pointer;text-align:left;
  padding:0 20px 0 0;display:flex;flex-direction:column;gap:12px;
}
.run-tab-label{
  font-size:var(--text-regular-size);letter-spacing:-.011em;
  color:var(--color-text-quaternary);
  transition:color .2s var(--ease-out-quad);
}
.run-tab[aria-selected="true"] .run-tab-label{color:var(--color-text-primary);}
.run-tab:hover .run-tab-label{color:var(--color-text-secondary);}
.run-tab-rail{display:block;height:2px;border-radius:2px;background:var(--color-bg-level-3);overflow:hidden;}
.run-tab-rail i{display:block;height:100%;width:0;background:var(--color-text-tertiary);border-radius:2px;}
.run-tab[aria-selected="true"] .run-tab-rail i{
  width:100%;background:var(--u-indigo);
  animation:run-fill 7s linear both;
}
@keyframes run-fill{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .run-tab[aria-selected="true"] .run-tab-rail i{animation:none;width:100%;}
}

.run-panels{padding-top:56px;min-height:392px;}
.run-panel{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:64px;align-items:center;
}
.run-panel[hidden]{display:none;}
.run-art{min-width:0;height:360px;display:flex;align-items:center;justify-content:center;}
.run-art svg{display:block;width:auto;height:100%;max-width:100%;}
.run-copy h3{color:var(--color-text-primary);}
.run-copy p{margin-top:14px;max-width:46ch;}
@media (prefers-reduced-motion:no-preference){
  .run-panel:not([hidden]){animation:run-in .45s var(--ease-out-quad) both;}
  @keyframes run-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (max-width:900px){
  .run-bar{grid-template-columns:repeat(2,var(--1fr));row-gap:20px;}
  .run-panel{grid-template-columns:1fr;gap:32px;}
  .run-panels{padding-top:40px;}
}

/* a wide figure that sits in its own band, centred under a section */
.fig-band{margin-top:56px;padding-top:48px;border-top:1px solid var(--color-border-translucent);}
.fig-wide .fig-art svg{width:100%;height:auto;max-height:420px;}
.fig-wide .fig-cap{max-width:64ch;margin-top:8px;}

/* wide figures read as plates: art centred, caption centred beneath it */
.fig-wide{text-align:center;}
.fig-wide .fig-art{margin-inline:auto;}
.fig-wide .fig-cap{margin-inline:auto;text-align:center;}
.fig-solo .fig-art svg{max-height:320px;}
/* keep the three-up band's art from crowding its caption */
.fig-row .fig-art{height:230px;}


/* wide figures must actually span the rail — earlier solo/row rules were
   leaking a constrained width onto them through the shared .fig-art class */
.fig-wide,
.fig-wide > .fig,
.fig-wide .fig-art{width:100%;max-width:none;}
.fig-wide .fig-art{display:block;height:auto;padding:0;}
.fig-wide .fig-art svg{width:100%;height:auto;max-height:none;margin-inline:auto;}
.fig-wide .fig-cap{margin-top:26px;}


/* ==========================================================================
   MEASUREMENT — statement left, reconciliation ledger right (concept E)
   ========================================================================== */
.meas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;}
.meas-copy p{margin-top:20px;max-width:40ch;}

.ledger{
  background:var(--color-bg-level-1);border:1px solid var(--color-border-translucent);
  border-radius:var(--radius-12);overflow:hidden;
}
.led-head,.led-row{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 40px;
  gap:20px;align-items:center;padding:0 20px;
}
.led-head{height:42px;color:var(--color-text-quaternary);border-bottom:1px solid var(--color-border-primary);}
.led-row{height:48px;font-size:var(--text-small-size);}
.led-row + .led-row{border-top:1px solid var(--color-border-translucent);}
.led-k{color:var(--color-text-secondary);}
.led-v{color:var(--color-text-tertiary);}
.led-s{color:var(--u-green);display:flex;justify-content:flex-end;}
.led-foot{
  display:flex;justify-content:space-between;align-items:center;padding:14px 20px;
  border-top:1px solid var(--color-border-primary);color:var(--color-text-quaternary);
}
.led-foot .ok{color:var(--u-green);}
@media (max-width:1000px){
  .meas{grid-template-columns:1fr;gap:40px;}
  .led-head,.led-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 28px;gap:12px;padding:0 14px;}
}


/* V2: verbatim legal text */
.legal h2{margin-top:40px;margin-bottom:10px;color:var(--color-text-primary);}
.legal .legal-list{margin:12px 0 0;padding-left:22px;color:var(--color-text-tertiary);}
.legal .legal-list li{margin-top:8px;}
.legal .legal-list strong{color:var(--color-text-secondary);font-weight:510;}
.legal a{color:var(--color-text-secondary);text-decoration:underline;text-underline-offset:2px;}
.legal .t-quaternary{color:var(--color-text-quaternary);margin-bottom:8px;}

/* V2: animated loop visuals -------------------------------------------------
   The clips are letterboxed onto the page ground and their edges are dissolved
   with a radial mask, so no rectangle ever meets the background. An ellipse,
   not a circle: the frames are 16:9 and a circular mask clips the short axis
   long before it reaches the long one. */
.asset-frame{
  position:relative;width:100%;overflow:hidden;
  background:var(--color-bg-level-0);
  display:flex;align-items:center;justify-content:center;
}
.seamless-loop{
  display:block;width:100%;height:100%;object-fit:cover;
  pointer-events:none;background:var(--color-bg-level-0);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 60%,transparent 97%);
          mask-image:radial-gradient(ellipse at center,#000 60%,transparent 97%);
}

/* Both of these drop straight into the box the drawing used to occupy, so the
   surrounding rhythm is untouched: .run-art is already 360px tall and
   .fig-row .fig-art is already 250px (230px narrow). The clip fills it and
   object-fit:cover takes up the ratio difference.

   Filling by HEIGHT rather than width matters in the advantage row: its three
   columns carry asymmetric padding (the outer two sit flush to the rail), so
   equal-width frames are impossible there. The SVGs sidestepped this by being
   height-constrained; the clips do the same, which is what keeps the three
   captions on one baseline. The differing widths never read, because the mask
   has already dissolved both vertical edges. */
.run-art .asset-frame,
.fig-video .fig-art .asset-frame{width:100%;height:100%;}

/* The wide variant has no height to fill — .fig-wide .fig-art is auto — so the
   ratio sets it. Held to 1040px rather than the full 1269px rail: the source is
   1280 wide, and letting it run edge to edge would render it at 1:1 and go soft
   on a retina display. Centred, it also sits better under the ingredient list
   than an edge-to-edge band. */
.fig-wide.fig-video .fig-art .asset-frame{
  height:auto;aspect-ratio:16/9;max-width:1040px;margin-inline:auto;
}

/* Reconciliation clip, in the column the ledger table used to hold. 2.1:1 is
   the ratio that table rendered at, cropped to it at encode time so the
   browser is never handed pixels the layout throws away. */
.meas-art .asset-frame{aspect-ratio:2.1/1;}

/* V2: Infrastructure hero — the Tracker, cropped to the reconciliation -------
   Reuses the home panel's frame, so the bottom mask that dissolves it into the
   #08090a ground comes for free and both screens read as the same product. */
.tracker{position:relative;}
.trk-strip{
  display:flex;align-items:center;gap:10px;height:38px;padding-inline:16px;
  border-bottom:1px solid var(--color-border-primary);color:var(--color-text-tertiary);
  overflow:hidden;white-space:nowrap;
}
.trk-live{display:inline-flex;align-items:center;gap:7px;color:var(--color-text-secondary);}
.trk-live i{
  width:6px;height:6px;border-radius:50%;background:var(--u-green);
  box-shadow:0 0 0 3px #4ab6811f;flex:0 0 auto;
}
.trk-sep{color:var(--color-border-tertiary);}
.trk-ok{color:var(--u-green);}

.trk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--color-border-primary);}
.trk-kpi{padding:18px 20px;border-left:1px solid var(--color-border-translucent);min-width:0;}
.trk-kpi:first-child{border-left:none;}
.trk-k{color:var(--color-text-quaternary);}
.trk-v{
  margin-top:7px;color:var(--color-text-primary);font-family:var(--font-monospace);
  font-size:24px;letter-spacing:-.022em;font-variant-numeric:tabular-nums;
}

.trk-head,.trk-row{
  display:grid;grid-template-columns:minmax(0,1.7fr) .85fr .95fr 1.05fr 1fr .72fr;
  gap:16px;align-items:center;padding:0 20px;
}
.trk-head{height:38px;color:var(--color-text-quaternary);
  border-bottom:1px solid var(--color-border-primary);
  font-weight:var(--font-weight-medium);}
.trk-head span + span,.trk-n{text-align:right;}
.trk-row{height:58px;}
.trk-row + .trk-row{border-top:1px solid var(--color-border-translucent);}
.trk-name{color:var(--color-text-secondary);font-size:var(--text-small-size);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trk-sub{color:var(--color-text-quaternary);margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.trk-n{
  font-family:var(--font-monospace);font-size:var(--text-small-size);
  color:var(--color-text-tertiary);font-variant-numeric:tabular-nums;
}
.trk-rev{color:var(--color-text-secondary);}

/* State reads as a hairline pill, never as a spreadsheet fill. Under target is
   amber, not red: the row is still returning more than it costs. */
.trk-roas{
  display:inline-block;padding:3px 9px;border-radius:var(--radius-rounded);
  font-family:var(--font-monospace);font-size:var(--text-mini-size);
  border:1px solid transparent;font-variant-numeric:tabular-nums;
}
.trk-roas[data-state="over"]{color:var(--u-green);background:#4ab68114;border-color:#4ab68133;}
.trk-roas[data-state="under"]{color:var(--u-amber);background:#f1c84e0f;border-color:#f1c84e2b;}

.trk-foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 20px;border-top:1px solid var(--color-border-primary);
  color:var(--color-text-quaternary);
}

@media (max-width:1080px){
  .c-leads,.c-margin{display:none;}
  .trk-head,.trk-row{grid-template-columns:minmax(0,1.7fr) 1fr 1.15fr .8fr;gap:12px;padding:0 16px;}
  .trk-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trk-kpi:nth-child(3){border-left:none;}
  .trk-kpi:nth-child(n+3){border-top:1px solid var(--color-border-translucent);}
  .trk-v{font-size:21px;}
}
@media (max-width:640px){
  .c-spend{display:none;}
  .trk-head,.trk-row{grid-template-columns:minmax(0,1.6fr) 1.1fr .8fr;padding:0 14px;}
  .trk-strip{gap:8px;}
  .trk-kpi{padding:14px 16px;}
  .trk-foot{font-size:11px;}
}

@media (max-width:640px){
  .meas-art .asset-frame{aspect-ratio:16/9;}
}