:root{
  --bg:#ffffff;
  --bg-soft:#faf9f7;
  --border:#eae6e0;
  --text:#1c1a17;
  --text-dim:#66625a;
  --text-mute:#9a958a;
  --brand:#8c2e26;
  --brand-dark:#6e2119;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter', sans-serif; background:var(--bg); color:var(--text); line-height:1.7; font-size:16px;}
.wrap{max-width:1040px; margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}

nav{border-bottom:1px solid var(--border);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:88px;}
.logo-img{height:54px;}
.navlinks{display:flex; gap:40px; font-size:15px; color:var(--text-dim);}
.navlinks a:hover{color:var(--brand);}
.btn{padding:13px 28px; border-radius:6px; font-size:15px; font-weight:600; display:inline-block;}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-ghost{color:var(--text);}

.hero{padding:96px 0 110px;}
.hero .wrap{max-width:1100px;}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center;}
.tagline{font-size:15px; font-style:italic; color:var(--brand); margin-bottom:22px;}
h1{font-size:46px; font-weight:700; line-height:1.22; margin-bottom:22px; letter-spacing:-1px;}
.sub{font-size:18px; color:var(--text-dim); margin:0 0 36px; max-width:480px;}

/* OEE HERO VISUAL */
.oee-visual{position:relative; padding:20px 0;}
.oee-card{
  position:relative; background:linear-gradient(155deg,#ffffff 0%,#fbf9f6 100%);
  border-radius:20px; padding:26px; border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(28,26,23,.04), 0 24px 48px -20px rgba(28,26,23,.16);
}
.oee-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.oee-top .t{font-size:13px; font-weight:600; color:var(--text-dim);}
.oee-live{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#1a8f5c;}
.oee-dot{width:7px; height:7px; border-radius:50%; background:#1a8f5c; box-shadow:0 0 0 3px rgba(26,143,92,.18);}

.oee-main{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; margin-bottom:22px;}
.gauge{position:relative; width:112px; height:112px;}
.gauge svg{transform:rotate(-90deg);}
.gauge-val{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.gauge-val .n{font-size:26px; font-weight:700; line-height:1;}
.gauge-val .l{font-size:10px; color:var(--text-mute); margin-top:2px; letter-spacing:.5px;}

.mini-kpis{display:flex; flex-direction:column; gap:10px;}
.mini-kpi{display:flex; justify-content:space-between; align-items:center; background:#faf9f7; border-radius:9px; padding:9px 13px;}
.mini-kpi .l{font-size:12px; color:var(--text-dim);}
.mini-kpi .v{font-size:14px; font-weight:700;}
.mini-kpi .bar-track{height:4px; width:64px; background:#eee9e2; border-radius:2px; overflow:hidden; margin-top:5px;}
.mini-kpi .bar-fill{height:100%; border-radius:2px;}

.oee-chart{background:#faf9f7; border-radius:12px; padding:16px 18px; margin-bottom:16px;}
.oee-chart .l{font-size:11px; color:var(--text-mute); margin-bottom:10px; display:block;}

.oee-hook{
  display:flex; gap:11px; align-items:flex-start;
  background:linear-gradient(135deg,#8c2e26 0%,#6e2119 100%);
  border-radius:12px; padding:15px 16px;
  box-shadow:0 10px 24px -10px rgba(140,46,38,.5);
}
.oee-hook .star{color:#f3c9c4; font-size:16px; line-height:1.4;}
.oee-hook .txt{font-size:12.5px; color:#fbe4e2; line-height:1.55;}
.oee-hook .txt b{color:#fff;}

.float-badge{
  position:absolute; top:-14px; left:-14px; background:#fff; border:1px solid var(--border);
  border-radius:10px; padding:9px 14px; box-shadow:0 10px 24px -8px rgba(28,26,23,.18);
  font-size:12px; font-weight:600; display:flex; align-items:center; gap:7px; z-index:2;
}
.float-badge .fdot{width:6px; height:6px; border-radius:50%; background:#d2691e;}

section{padding:120px 0;}
.band{background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.kicker{font-size:14px; color:var(--brand); font-weight:600; margin-bottom:18px; display:block;}
h2{font-size:36px; font-weight:700; margin-bottom:22px; letter-spacing:-0.5px; max-width:600px;}
.lead{font-size:18px; color:var(--text-dim); max-width:560px; margin-bottom:16px;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;}
.two-col .right p{font-size:16px; color:var(--text-dim); margin-bottom:20px;}

.stack{display:flex; flex-direction:column; gap:44px; margin-top:56px;}
.row{display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:baseline; padding-bottom:36px; border-bottom:1px solid var(--border);}
.row:last-child{border-bottom:none;}
.row .num{font-size:14px; color:var(--text-mute); font-weight:600;}
.row h3{font-size:20px; font-weight:600; margin-bottom:8px;}
.row p{font-size:15.5px; color:var(--text-dim); max-width:520px;}

.approach-list{display:flex; flex-direction:column; margin-top:48px;}
.astep{display:flex; align-items:center; gap:24px; padding:22px 0; border-bottom:1px solid var(--border);}
.astep:first-child{border-top:1px solid var(--border);}
.astep .n{font-size:15px; color:var(--brand); font-weight:700; width:36px;}
.astep .t{font-size:17px; font-weight:500;}
.approach-note{margin-top:32px; font-size:17px; color:var(--text-dim);}
.approach-note b{color:var(--text);}

.about{display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:center;}
.avatar{width:220px; height:220px; border-radius:50%; overflow:hidden; border:1px solid var(--border); flex-shrink:0;}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.about h2{margin-bottom:16px;}
.about p{font-size:16px; color:var(--text-dim); margin-bottom:14px; max-width:520px;}
.about-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px;}
.about-tags span{font-size:13px; color:var(--text-dim);}
.about-tags span:not(:last-child)::after{content:'·'; margin-right:8px; color:var(--text-mute);}

.cta{text-align:center;}
.cta .wrap{max-width:600px;}
.cta h2{margin:0 auto 18px; text-align:center;}
.cta p{font-size:17px; color:var(--text-dim); margin-bottom:36px;}

footer{border-top:1px solid var(--border); padding:48px 0; font-size:14px; color:var(--text-mute);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .flogo{height:34px; opacity:.8;}
footer .fmeta{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
footer a:hover{color:var(--brand);}

/* Responsive */
@media (max-width: 860px){
  .navlinks{display:none;}
  .hero{padding:64px 0 72px;}
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  h1{font-size:34px;}
  section{padding:72px 0;}
  h2{font-size:28px;}
  .two-col{grid-template-columns:1fr; gap:32px;}
  .about{grid-template-columns:1fr; text-align:center; gap:28px;}
  .about .avatar{margin:0 auto;}
  .about-tags{justify-content:center;}
  .row{grid-template-columns:1fr; gap:8px;}
  .float-badge{position:static; display:inline-flex; margin-bottom:14px;}
}
@media (max-width: 480px){
  .wrap{padding:0 20px;}
  h1{font-size:28px;}
  .avatar{width:160px; height:160px;}
}

/* ── bari product identity ─────────────────────────────────────────────
   The purple belongs to the product. The site keeps its own red so the
   two brands stay distinguishable rather than blending into one. */
:root{
  --bari:#4b12a0;
  --bari-soft:#f3eeff;
}

.nav-actions{display:flex; align-items:center; gap:14px;}
.btn-bari{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bari-soft); color:var(--bari);
  border:1px solid #ddd0f7; padding:10px 18px;
}
.btn-bari:hover{background:#ebe2ff;}
.bari-mark-sm{height:18px; width:auto; display:block;}
.btn-outline{border:1px solid var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--text-dim);}

/* Hero: the slogan is now the claim, not a caption above it */
.hero-claim{font-size:52px; line-height:1.14; letter-spacing:-1.4px; margin-bottom:24px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

/* Products */
#products{padding:88px 0;}
.bari-head{display:flex; align-items:flex-start; gap:36px; margin:6px 0 40px; flex-wrap:wrap;}
.bari-wordmark{height:52px; width:auto; flex-shrink:0;}
.bari-lead{margin:0; max-width:620px;}

.prod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.prod-card{
  border:1px solid var(--border); border-radius:16px; padding:30px;
  background:var(--bg); display:flex; flex-direction:column;
}
.prod-live{border-color:#ddd0f7; background:linear-gradient(160deg,#fdfcff 0%,#f8f5ff 100%);}
.prod-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.prod-card h3{font-size:21px; font-weight:700; letter-spacing:-.3px;}
.prod-card p{color:var(--text-dim); font-size:15.5px;}

.pill{font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:99px; white-space:nowrap; letter-spacing:.2px;}
.pill-live{background:#556b2f; color:#fff;}
.pill-soon{background:var(--bg-soft); color:var(--text-mute); border:1px solid var(--border);}

.prod-points{list-style:none; margin:18px 0 26px; display:flex; flex-direction:column; gap:9px;}
.prod-points li{
  position:relative; padding-left:20px; font-size:14.5px; color:var(--text-dim); line-height:1.55;
}
.prod-points li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--bari);
}
.prod-cta{margin-top:auto; align-self:flex-start;}
.prod-note{margin-top:26px; font-size:14.5px; color:var(--text-mute); max-width:720px;}

.about-role{font-size:16.5px; color:var(--text-dim); margin-bottom:16px; font-weight:500;}

@media (max-width:860px){
  .hero-claim{font-size:38px; letter-spacing:-1px;}
  .prod-grid{grid-template-columns:1fr;}
  .bari-head{gap:20px;}
  .bari-wordmark{height:42px;}
  .navlinks{display:none;}
}

/* Hero mock now carries the product's identity, not the site's red */
.oee-top .t{display:flex; align-items:center; gap:7px;}
.bari-mark-xs{height:14px; width:auto;}
.oee-live{color:var(--bari);}
.oee-dot{background:var(--bari); box-shadow:0 0 0 3px rgba(75,18,160,.14);}
.float-badge .fdot{background:#c98a2e;}
.oee-hook{
  background:linear-gradient(135deg,#4b12a0 0%,#33096f 100%);
  box-shadow:0 10px 24px -10px rgba(75,18,160,.5);
}
.oee-hook .star{color:#cbb6f2;}
.oee-hook .txt{color:#e7dcfb;}

/* ── Layout corrections ────────────────────────────────────────────────
   The page was set to a 1040px column inside a much wider viewport, which
   left large dead margins on both sides on a normal desktop screen. */
.wrap{max-width:1240px; padding:0 44px;}
.hero .wrap{max-width:1240px;}
.hero{padding:56px 0 84px;}
.hero-grid{grid-template-columns:1.05fr .95fr; gap:56px;}

/* The claim is the page's loudest element; it must not orphan a word. */
.hero-claim{font-size:56px; line-height:1.08; letter-spacing:-1.6px; text-wrap:balance;}
.sub{font-size:18.5px; max-width:520px; margin-bottom:32px;}

/* Product-coloured primary action, since the product now leads the page */
.btn-bari-solid{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--bari); color:#fff; padding:13px 26px;
}
.btn-bari-solid:hover{background:#3a0d7d;}
.bari-mark-btn{height:16px; width:auto; filter:brightness(0) invert(1);}

/* Nav button carries the real wordmark rather than a letterform + text */
.btn-bari{padding:9px 20px;}
.bari-mark-sm{height:20px;}

/* Five-character values overflowed the ring at the old size */
.gauge-val .n{font-size:21px; letter-spacing:-.5px;}

.site-origin{margin-top:6px; color:var(--text-mute); font-size:13.5px;}

@media (max-width:1100px){
  .wrap{max-width:100%; padding:0 32px;}
}
@media (max-width:860px){
  .hero-claim{font-size:36px; letter-spacing:-.8px;}
  .hero{padding:40px 0 56px;}
}

/* One button holds text, the other an image, so their natural heights differ.
   Pin both to the same box and centre the contents instead of relying on padding. */
.nav-actions .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 26px; line-height:1;
}
.btn-bari{gap:0;}
.nav-actions .bari-mark-sm{height:22px;}

/* Wordmark inside the mock's header row */
.bari-mark-xs{height:15px; width:auto;}

/* Equal padding still yields unequal widths, because a wordmark is narrower
   than the words "Get in touch". Give both a shared floor so they read as a pair. */
.nav-actions .btn{min-width:168px;}

/* ── bari-branded actions ──────────────────────────────────────────────
   The wordmark is an image and the label is text, so they don't share a
   baseline automatically. Aligning the boxes centrally leaves the word
   sitting high, because the mark's descender ("bari" has none) makes its
   optical centre differ from the text's. Nudge the label instead. */
.bari-word{
  font-family:'Poppins', 'Inter', sans-serif;
  font-weight:600;
  color:var(--bari);
  letter-spacing:-.2px;
}

.btn-bari-lg{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; font-size:17px;
}
.bari-mark-cta{height:22px; width:auto; display:block; position:relative; top:1px;}
.btn-bari-lg .bari-word{font-size:18px; position:relative; top:1px;}

/* Plain text link, no chrome */
.nav-signin{
  font-family:'Poppins', 'Inter', sans-serif;
  font-weight:600; font-size:15px; color:var(--bari);
  padding:0 4px; white-space:nowrap;
}
.nav-signin:hover{color:#3a0d7d;}

/* Sign in on the product card: label only, same purple wordmark styling */
.prod-cta.btn-bari{padding:12px 26px;}
.prod-cta .bari-word{font-size:16px;}

/* Only the bari button needs the shared width; the plain link must not stretch */
.nav-actions .nav-signin{min-width:0; height:auto;}

/* Sticky header: the bari and Sign in actions should stay reachable once the
   visitor has scrolled past the hero, which is where they decide to act. */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
}

/* Get in touch : bari roughly 1 : 3 */
.nav-actions .btn{min-width:0;}
.nav-actions .btn-primary{min-width:120px;}
.nav-actions .btn-bari{min-width:360px;}

/* Both nav buttons: height 48px, width = 3× height = 144px */
.nav-actions .btn-primary,
.nav-actions .btn-bari{
  min-width:0; width:144px; height:48px; padding:0;
}

/* ── New dashboard card ─────────────────────────────────────────────── */
.oee-card2{
  background:#fff; border:1px solid #e8e3f2; border-radius:18px;
  padding:22px; box-shadow:0 2px 8px rgba(75,18,160,.06), 0 20px 48px -20px rgba(75,18,160,.14);
}
.oc-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.oc-brand{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text-dim);}
.oc-logo{height:18px; width:auto;}
.oc-live{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#4b12a0;}
.oc-dot{width:7px; height:7px; border-radius:50%; background:#4b12a0; box-shadow:0 0 0 3px rgba(75,18,160,.15);}

.oc-top-row{display:grid; grid-template-columns:auto 1fr; gap:14px; margin-bottom:14px;}

.oc-gauge-card{display:flex; flex-direction:column; align-items:center; background:#faf8ff; border:1px solid #ece6f7; border-radius:12px; padding:16px 20px;}
.oc-kpi-card{background:#fafaf8; border:1px solid #eee9e0; border-radius:12px; padding:14px 16px;}
.oc-kpi-col{display:flex; flex-direction:column; gap:10px;}
.oc-kpi-label{font-size:11.5px; color:var(--text-dim); margin-bottom:2px;}
.oc-kpi-top{display:flex; align-items:center; gap:6px; margin-bottom:4px;}
.oc-kpi-dot{width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0;}
.oc-kpi-val{font-size:26px; font-weight:700; line-height:1; margin-bottom:6px;}
.oc-kpi-vs{font-size:10.5px; color:var(--text-mute); margin-top:4px;}
.oc-spark{width:100%; height:28px; display:block;}

.oc-gauge-wrap{position:relative; display:inline-block;}
.oc-gauge-inner{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.oc-gauge-n{font-size:22px; font-weight:700; color:#1c1a17; line-height:1;}
.oc-gauge-l{font-size:10px; color:var(--text-mute); letter-spacing:.4px; margin-top:2px;}
.oc-gauge-t{font-size:9.5px; color:#4b12a0; font-weight:600; margin-top:3px;}

.oc-chart-card{background:#fafaf8; border:1px solid #eee9e0; border-radius:12px; padding:16px; margin-bottom:12px;}
.oc-chart-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.oc-chart-title{font-size:12px; font-weight:600; color:var(--text-dim);}
.oc-chart-range{font-size:11px; color:var(--text-mute); background:#f0edf8; padding:3px 8px; border-radius:6px;}
.oc-chart-body{display:flex; align-items:stretch;}
/* The labels must line up with the SVG's own gridlines, so the column height
   has to track the chart, not the whole card. */
.oc-yaxis{
  display:flex; flex-direction:column; justify-content:space-between;
  font-size:10px; color:var(--text-mute); flex-shrink:0;
  min-width:30px; text-align:right; padding-bottom:18px;
  line-height:1;
}
.oc-chart-svg-wrap{flex:1; min-width:0;}
.oc-xaxis{display:flex; justify-content:space-between; font-size:10px; color:var(--text-mute); margin-top:4px;}

.oc-insight{
  display:flex; gap:12px; align-items:flex-start;
  background:linear-gradient(135deg,#4b12a0 0%,#33096f 100%);
  border-radius:12px; padding:14px 16px;
  box-shadow:0 8px 20px -8px rgba(75,18,160,.45);
}
.oc-insight-icon{color:#c9b2f0; font-size:16px; line-height:1.4; flex-shrink:0;}
.oc-insight-txt{font-size:12.5px; color:#e8dcfb; line-height:1.6;}
.oc-insight-txt b{color:#fff;}

/* ── Card density ──────────────────────────────────────────────────────
   The card has to fit the hero without the trend chart or the insight bar
   falling below the fold, so every block gives up a little height. */
.oee-card2{padding:18px;}
.oc-header{margin-bottom:14px;}
.oc-top-row{gap:12px; margin-bottom:12px;}
.oc-gauge-card{padding:12px 16px;}
.oc-kpi-card{padding:11px 13px;}
.oc-kpi-col{gap:8px;}
.oc-kpi-val{font-size:22px; margin-bottom:4px;}
.oc-spark{height:22px;}
.oc-chart-card{padding:12px 14px; margin-bottom:10px;}
.oc-chart-head{margin-bottom:6px;}
.oc-insight{padding:12px 14px;}
.oc-insight-txt{font-size:12px; line-height:1.55;}
.oc-gauge-n{font-size:20px;}

/* ── Hero fills exactly one screen ─────────────────────────────────────
   Fixed paddings can't do this: on a short laptop the card overflowed, on a
   tall monitor a void opened above the slogan. Tie the section to the actual
   viewport instead, minus the sticky header, and let the grid centre itself
   inside whatever height that turns out to be.
   100dvh (not 100vh) so mobile browser chrome doesn't cause a scroll. */
.hero{
  min-height:calc(100dvh - 88px);
  display:flex; align-items:center;
  padding:24px 0;
}
.hero > .wrap{width:100%;}

/* Both columns start from the same top edge; centring them against each other
   was what pushed the slogan down the page. */
.hero-grid{align-items:center; gap:48px;}
.oee-visual{padding:0;}

/* The claim should own the space it's given rather than sit in a small block */
.hero-claim{font-size:clamp(34px, 4.4vw, 60px); margin-bottom:20px;}
.sub{font-size:clamp(15.5px, 1.15vw, 18.5px); margin-bottom:26px;}

@media (max-width:900px){
  /* Stacked, the two blocks can't share one screen — let it scroll naturally. */
  .hero{min-height:0; padding:32px 0 44px;}
  .hero-grid{align-items:start; gap:32px;}
}

/* ── Guarantee the insight bar is always on screen ─────────────────────
   Adding up block heights by hand kept being wrong, so stop relying on it:
   bound the card to the space that exists and let the trend chart absorb
   the difference. The insight bar then can't be pushed below the fold. */
.oee-card2{
  display:flex; flex-direction:column;
  max-height:calc(100dvh - 88px - 48px);
  overflow:hidden;
}
.oc-header, .oc-top-row, .oc-insight{flex:0 0 auto;}

.oc-chart-card{
  flex:1 1 auto; min-height:120px;
  display:flex; flex-direction:column;
}
.oc-chart-body{flex:1 1 auto; min-height:0;}
.oc-chart-svg-wrap{display:flex; flex-direction:column; min-height:0;}
/* preserveAspectRatio:none is safe here because the chart is a plotted line,
   not text or circles — but the labels inside it would distort, so they are
   sized in the viewBox and the box is never stretched more than ~1.2x. */
.oc-trend-svg{flex:1 1 auto; width:100%; min-height:0; display:block;}

@media (max-width:900px){
  .oee-card2{max-height:none; overflow:visible;}
  .oc-trend-svg{height:150px;}
}

/* ── Hero claim, marker-underline treatment ────────────────────────────
   All caps, very heavy, tight leading — the words form a solid block, and
   the purple lands only on the one that carries the argument. */
.hero-claim{
  font-family:'Archivo Black', 'Inter', sans-serif;
  font-weight:400;              /* Archivo Black is already the heavy cut */
  text-transform:uppercase;
  font-size:clamp(30px, 3.9vw, 54px);
  line-height:1.02;
  letter-spacing:-.5px;
  margin-bottom:24px;
}
.hc-line{display:block;}
.hc-mark{position:relative; color:var(--bari); display:inline-block; padding-bottom:.06em;}
.hc-underline{
  position:absolute; left:-2%; bottom:-.04em; width:104%; height:auto;
  pointer-events:none; display:block;
}

/* Column split: 3 units of text to 4 units of dashboard card */
.hero-grid{grid-template-columns:3fr 4fr;}
.hc-dot{color:var(--bari);}


/* The chart now carries its own axes inside the SVG, so it just needs to fill
   the space the card gives it. A minimum keeps it legible when the viewport is
   short and the card squeezes. */
.oc-trend-svg{flex:1 1 auto; width:100%; min-height:130px; display:block;}
.oc-chart-svg-wrap{flex:1 1 auto; display:flex; min-height:0;}

/* Narrow the gauge column so the top row is shorter; the height it gives up
   goes to the trend chart, which is what was being clipped. */
.oc-top-row{grid-template-columns:138px 1fr;}
.oc-gauge-card{padding:10px 8px;}
.oc-gauge-n{font-size:19px;}
.oc-gauge-l{font-size:9.5px;}
.oc-gauge-t{font-size:9px;}
.oc-trend-svg{min-height:140px;}

/* ── Card, final pass ──────────────────────────────────────────────────
   Written last so it settles the earlier rules that had accumulated and
   started contradicting each other. */

/* Square gauge card, sized to the KPI column beside it */
.oc-top-row{grid-template-columns:222px 1fr; gap:10px; margin-bottom:10px;}
.oc-gauge-card{
  display:flex; flex-direction:column; align-items:stretch;
  padding:11px 13px;
  background:#faf8ff; border-color:#ece6f7;
}
/* Same header treatment as the two cards beside it: dot, left aligned */
.oc-gauge-card .oc-kpi-top{margin-bottom:0;}
.oc-gauge-wrap{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.oc-gauge-inner{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;}
.oc-gauge-n{font-size:27px; font-weight:700; color:#1c1a17; line-height:1;}
.oc-gauge-t{font-size:10px; color:#4b12a0; font-weight:600; margin-top:5px;}

/* Even gaps: KPI cards, top row and chart all separated by the same 10px */
.oc-kpi-col{gap:10px;}
.oc-chart-card{margin-bottom:10px; padding:12px 14px;}

/* The comparison figure is useful information, not a footnote */
.oc-kpi-vs{color:var(--text-dim); font-size:11px; margin-top:5px;}
.oc-spark{height:26px;}

/* The insight bar was the heaviest thing on an otherwise light card */
.oc-insight{
  background:#f5f1ff;
  border:1px solid #ddd0f7;
  box-shadow:none;
  padding:11px 13px;
  align-items:center;
}
.oc-insight-icon{color:#4b12a0; font-size:14px;}
.oc-insight-txt{color:#4a4458; font-size:12px; line-height:1.5;}
.oc-insight-txt b{color:#3a0d7d;}

/* The chart draws its own axes, so it only needs room to breathe */
.oc-trend-svg{flex:1 1 auto; width:100%; min-height:150px; display:block;}