/* ScenarioCast — marketing site styles. Shares tokens with the Studio. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --blue-50:#F0F4FF;--blue-100:#DCE6FF;--blue-200:#B8CCFF;--blue-300:#8AAAFB;--blue-400:#4F7BF0;
  --blue-500:#2A5AE0;--blue-600:#1D46C4;--blue-700:#123A8A;--blue-800:#0E2D6B;--blue-900:#0A1F49;--blue-950:#061229;
  --ink-0:#FFFFFF;--ink-50:#F7F9FC;--ink-100:#F0F3F9;--ink-150:#E6EBF4;--ink-200:#D9E0EC;--ink-300:#BAC3D2;
  --ink-400:#8E99AC;--ink-500:#66718A;--ink-600:#485372;--ink-700:#33405E;--ink-800:#1D2C4E;--ink-900:#12203C;--ink-950:#0A162E;
  --mint-100:#E4F8EF;--mint-200:#C9F2E1;--mint-500:#12B981;--mint-700:#0E7A57;
  --amber-100:#FBE8C9;--amber-700:#8A5309;--red-100:#FBE3E1;--red-500:#DC4038;--red-700:#9E2A23;
  --acc:#E23D2E; /* the brand's red accent dot */
  --font-sans:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-display:"Anton","Arial Narrow",Impact,sans-serif;
  --shadow-sm:0 1px 2px rgba(10,31,73,.07),0 1px 1px rgba(10,31,73,.04);
  --shadow-md:0 4px 10px -2px rgba(10,31,73,.09),0 1px 2px rgba(10,31,73,.06);
  --shadow-lg:0 16px 32px -8px rgba(10,31,73,.15),0 2px 6px rgba(10,31,73,.07);
  --ring:0 0 0 3px rgba(42,90,224,.28);
  --ease:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --container:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font:400 16px/1.55 var(--font-sans);color:var(--ink-900);background:var(--ink-0);-webkit-font-smoothing:antialiased;letter-spacing:-0.005em}
a{color:var(--blue-600);text-decoration:none}
a:hover{color:var(--blue-800)}
::selection{background:var(--blue-100);color:var(--blue-900)}
:focus-visible{outline:none;box-shadow:var(--ring)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px}
.tab{font-variant-numeric:tabular-nums}

/* ─── Type ─── */
.d1{font:400 clamp(38px,5.2vw,66px)/1.0 var(--font-display);text-transform:uppercase;color:var(--ink-950);letter-spacing:0.005em;margin:0}
.d2{font:400 clamp(32px,4.2vw,54px)/1.02 var(--font-display);text-transform:uppercase;color:var(--ink-950);letter-spacing:0.005em;margin:0}
.eyeb{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-600)}
.eyeb::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--blue-400)}
.mono-note{font:400 13px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.sub{font:400 18px/1.55 var(--font-sans);color:var(--ink-600);max-width:640px}
.sec{padding:104px 0}
.sec.tint{background:var(--ink-50);border-top:1px solid var(--ink-150);border-bottom:1px solid var(--ink-150)}
.sechead{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;max-width:820px}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;font:500 15px/1 var(--font-sans);border:none;border-radius:7px;cursor:pointer;transition:background-color .12s var(--ease),color .12s var(--ease),box-shadow .12s var(--ease),transform 80ms var(--ease);white-space:nowrap;background:var(--blue-700);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.btn:hover{background:var(--blue-800);color:#fff}
.btn:active{background:var(--blue-900);transform:translateY(.5px)}
.btn.sec2{background:var(--ink-0);color:var(--ink-900);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--ink-200)}
.btn.sec2:hover{background:var(--ink-50);color:var(--ink-900)}
.btn.ghost{background:transparent;color:var(--ink-800);box-shadow:none}
.btn.ghost:hover{background:var(--ink-100);color:var(--ink-900)}
.btn.sm{height:34px;padding:0 14px;font-size:14px}
.btn.onblue{background:#fff;color:var(--blue-900);box-shadow:none}
.btn.onblue:hover{background:var(--blue-50);color:var(--blue-900)}
.btn.onblue-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.btn.onblue-ghost:hover{background:rgba(255,255,255,.08);color:#fff}

/* ─── Nav ─── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-150)}
.nav .wrap{height:64px;display:flex;align-items:center;gap:28px}
.wordmark{font:600 17px/1 var(--font-sans);letter-spacing:-0.05em;color:var(--blue-700);white-space:nowrap}
.wordmark b{color:var(--blue-400);font-weight:600}
.nav-links{display:flex;gap:24px;margin-left:16px;font:500 14px/1 var(--font-sans)}
.nav-links a{color:var(--ink-600)}
.nav-links a:hover{color:var(--ink-950)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ─── Hero ─── */
.hero{position:relative;background:linear-gradient(180deg,#EAF1FB 0%, #F4F8FE 70%, #fff 100%);overflow:hidden}
.hero .grid-motif{position:absolute;inset:0;background-image:linear-gradient(rgba(79,123,240,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(79,123,240,.07) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(70% 80% at 60% 30%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 80% at 60% 30%,#000 20%,transparent 100%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .95fr;gap:56px;align-items:center;padding-top:88px;padding-bottom:96px}
.rdot{position:absolute;width:6px;height:6px;border-radius:99px;background:var(--acc)}
.hero-copy{display:flex;flex-direction:column;gap:26px;position:relative}
.hero-copy .sub{font-size:19px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.facts{border-bottom:1px solid var(--ink-150);background:#fff}
.facts .wrap{display:flex;gap:12px 36px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.facts span{font:500 12px/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}

/* ─── Cards ─── */
.mcard{background:#fff;border:1px solid var(--ink-150);border-radius:14px;box-shadow:var(--shadow-lg)}
.mcard .pad{padding:26px 28px}
.chip-live{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:5px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--ink-600);box-shadow:inset 0 0 0 1px var(--ink-200)}
.mlabel{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-600)}
.bignum{font:600 clamp(44px,4.6vw,62px)/1 var(--font-mono);color:var(--blue-600);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bignum-sub{font:500 15px/1.3 var(--font-mono);color:var(--blue-500)}
.runline{font:400 14px/1.5 var(--font-sans);color:var(--ink-500)}

/* ─── Demo section ─── */
.demo-grid{display:grid;grid-template-columns:1.05fr .8fr 1.15fr;gap:0;border:1px solid var(--ink-150);border-radius:14px;background:#fff;box-shadow:var(--shadow-md);overflow:hidden}
.demo-col{padding:28px;display:flex;flex-direction:column;gap:18px;min-width:0}
.demo-col+.demo-col{border-left:1px solid var(--ink-150)}
.demo-col.mid{background:var(--ink-50)}
.dstep{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600)}
.drow{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px solid var(--ink-150)}
.drow:last-of-type{border-bottom:none}
.drow .nm{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font:500 14px/1.2 var(--font-sans)}
.drow .nm .dn{display:flex;flex-direction:column;gap:2px;min-width:0}
.drow .nm .dn i{font-style:normal;font-weight:400;font-size:12px;color:var(--ink-400)}
.drow .nm .mono-note{letter-spacing:.04em;white-space:nowrap;flex:0 0 auto;text-align:right}
.slider{display:block;position:relative;height:20px;width:100%;touch-action:none}
.slider .tr{position:absolute;left:0;right:0;top:8px;height:5px;border-radius:99px;background:var(--ink-150)}
.slider .band{position:absolute;top:8px;height:5px;border-radius:99px;background:var(--blue-100)}
.slider .zero{position:absolute;top:5px;height:11px;width:2px;border-radius:99px;background:var(--blue-700)}
.slider .h{position:absolute;top:3px;width:14px;height:14px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--ink-300),var(--shadow-sm);cursor:grab;transition:box-shadow .12s var(--ease)}
.slider .h:hover,.slider .h.drag{box-shadow:inset 0 0 0 1.5px var(--blue-500),var(--ring)}
.mid-steps{display:flex;flex-direction:column;gap:14px;font:400 13px/1.6 var(--font-mono);color:var(--ink-600)}
.mid-steps b{color:var(--ink-900);font-weight:500}
.mid-live{margin-top:auto;font:500 12px/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-600)}
.out-nums{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.out-meta{display:flex;gap:22px;font:400 13px/1.4 var(--font-mono);color:var(--ink-500);flex-wrap:wrap}
.out-meta b{color:var(--ink-900);font-weight:500}
.demo-cta{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.demo-cta .mono-note{letter-spacing:.06em;text-transform:none}

/* ─── Offer / cases cards ─── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ocard{background:#fff;border:1px solid var(--ink-150);border-radius:14px;box-shadow:var(--shadow-sm);padding:28px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.ocard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.onum{font:400 44px/1 var(--font-display);color:var(--ink-200)}
.ocard h3{margin:0;font:600 20px/1.25 var(--font-sans);letter-spacing:-.02em;color:var(--ink-950)}
.ocard p{margin:0;font:400 15px/1.55 var(--font-sans);color:var(--ink-600)}
.ocard .go{margin-top:auto;font:500 14px/1 var(--font-sans)}
.ocard .kicker{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600)}
.stat-line{font:500 13px/1.5 var(--font-mono);color:var(--ink-700);background:var(--ink-50);border:1px solid var(--ink-150);border-radius:7px;padding:10px 12px}

/* ─── Why section ─── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.why-list{display:flex;flex-direction:column}
.why-item{padding:22px 0;border-bottom:1px solid var(--ink-150);display:flex;gap:18px;align-items:flex-start}
.why-item:last-child{border-bottom:none}
.why-item .n{font:400 22px/1 var(--font-display);color:var(--blue-400);min-width:34px;padding-top:2px}
.why-item h3{margin:0 0 6px;font:600 19px/1.3 var(--font-sans);letter-spacing:-.02em;color:var(--ink-950)}
.why-item p{margin:0;font:400 15px/1.55 var(--font-sans);color:var(--ink-600)}

/* ─── Steps band ─── */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step4{display:flex;flex-direction:column;gap:10px}
.step4 .n{font:500 12px/1 var(--font-mono);letter-spacing:.14em;color:var(--blue-600)}
.step4 h4{margin:0;font:600 16px/1.3 var(--font-sans);color:var(--ink-950)}
.step4 p{margin:0;font:400 14px/1.5 var(--font-sans);color:var(--ink-600)}

/* ─── Timeline (implementation) ─── */
.tl{display:flex;flex-direction:column}
.tl-item{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:24px 0;border-bottom:1px solid var(--ink-150)}
.tl-item:last-child{border-bottom:none}
.tl-when{font:500 13px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600)}
.tl-item h3{margin:0 0 6px;font:600 18px/1.3 var(--font-sans);color:var(--ink-950)}
.tl-item p{margin:0;font:400 15px/1.55 var(--font-sans);color:var(--ink-600);max-width:640px}

/* ─── Tables (commodities) ─── */
table.mtbl{width:100%;border-collapse:collapse;font:400 14px/1.4 var(--font-sans);background:#fff}
.mtbl th{text-align:left;padding:10px 14px;font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);background:var(--ink-50);border-bottom:1px solid var(--ink-200);white-space:nowrap}
.mtbl td{padding:12px 14px;border-bottom:1px solid var(--ink-150);white-space:nowrap}
.mtbl .num{text-align:right;font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.mtbl tr:hover td{background:var(--blue-50)}
.rangestrip{display:block;position:relative;height:5px;border-radius:99px;background:var(--blue-100);width:120px}
.rangestrip i{position:absolute;top:-2px;bottom:-2px;width:2px;border-radius:99px;background:var(--blue-700)}

/* ─── CTA band ─── */
.cta-band{background:var(--blue-950);color:#fff;position:relative;overflow:hidden}
.cta-band .grid-motif{position:absolute;inset:0;background-image:linear-gradient(rgba(138,170,251,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(138,170,251,.09) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(60% 80% at 50% 40%,#000 20%,transparent 100%);mask-image:radial-gradient(60% 80% at 50% 40%,#000 20%,transparent 100%)}
.cta-band .wrap{position:relative;padding-top:96px;padding-bottom:96px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.cta-band .d2{color:#fff}
.cta-band .sub{color:rgba(255,255,255,.72)}
.cta-band .eyeb{color:var(--blue-300)}
.cta-contact{display:flex;gap:26px;flex-wrap:wrap;font:400 14px/1.4 var(--font-mono);color:rgba(255,255,255,.6)}
.cta-contact a{color:var(--blue-300)}
.cta-contact a:hover{color:#fff}

/* ─── Footer ─── */
.foot{border-top:1px solid var(--ink-150);background:#fff}
.foot .wrap{display:flex;align-items:center;gap:28px;padding-top:28px;padding-bottom:28px;flex-wrap:wrap}
.foot .links{display:flex;gap:20px;font:500 13px/1 var(--font-sans)}
.foot .links a{color:var(--ink-500)}
.foot .links a:hover{color:var(--ink-900)}
.foot .fine{margin-left:auto;font:400 12px/1.4 var(--font-mono);letter-spacing:.06em;color:var(--ink-400)}

/* ─── Page hero (subpages) ─── */
.page-hero{background:linear-gradient(180deg,#EAF1FB 0%,#fff 100%);border-bottom:1px solid var(--ink-150)}
.page-hero .wrap{padding-top:72px;padding-bottom:64px;display:flex;flex-direction:column;gap:18px}

/* ─── Responsive ─── */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .demo-grid{grid-template-columns:1fr}
  .demo-col+.demo-col{border-left:none;border-top:1px solid var(--ink-150)}
  .grid3{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr;gap:36px}
  .steps4{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){.nav-links{display:none}}
@media (max-width:700px){
  .sec{padding:72px 0}
  .wrap{padding:0 20px}
  .steps4{grid-template-columns:1fr}
  .tl-item{grid-template-columns:1fr;gap:6px}
}