/* ============================================================
   PayJSR — Commerce & Billing Infrastructure
   Premium light / ice theme · v3
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Geist:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* surfaces */
  --white:     #ffffff;
  --ice:       #f5f8ff;
  --ice-2:     #eef5ff;
  --ice-3:     #e7eeff;
  --navy:      #07152f;   /* deep navy text + cinematic surface */
  --midnight:  #030b1f;   /* darkest cinematic surface */

  /* ink on light */
  --ink:       #07152f;
  --ink-soft:  #41527a;
  --ink-mute:  #6b7a9f;
  --ink-faint: #9aa7c4;

  /* ink on dark */
  --d-ink:     #eef3ff;
  --d-soft:    #b3c1e2;
  --d-mute:    #8190b6;
  --d-faint:   #5a6c95;

  /* accent */
  --blue:      #075bff;   /* PayJSR blue */
  --electric:  #006bff;   /* electric blue */
  --cyan:      #00c8ff;   /* cyan accent */
  --blue-700:  #0042cc;
  --blue-50:   #eaf1ff;
  --grad:      linear-gradient(100deg, #075bff 0%, #006bff 45%, #00c8ff 100%);
  --grad-soft: linear-gradient(135deg, #075bff, #00c8ff);

  /* status (green ONLY for financial states) */
  --ok:        #0f9d6b;
  --ok-bg:     #e4f7ef;
  --warn:      #b7791f;
  --warn-bg:   #fdf3e0;

  /* hairlines */
  --line:      rgba(7,21,47,.09);
  --line-2:    rgba(7,21,47,.14);
  --d-line:    rgba(255,255,255,.10);
  --d-line-2:  rgba(255,255,255,.16);

  /* type */
  --display: 'Sora', system-ui, sans-serif;
  --body:    'Geist', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* metrics */
  --maxw: 1180px;
  --r-lg: 22px;
  --r-md: 15px;
  --r-sm: 10px;

  /* shadows (light) */
  --sh-sm:  0 2px 6px rgba(7,21,47,.05);
  --sh:     0 18px 44px -22px rgba(7,21,47,.28), 0 2px 8px rgba(7,21,47,.04);
  --sh-lg:  0 40px 90px -36px rgba(7,21,47,.40), 0 8px 24px -12px rgba(7,21,47,.12);
  --sh-blue:0 30px 70px -28px rgba(7,91,255,.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  background: var(--white);
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.011em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { overflow-x: clip; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 26px; }
section { position: relative; }
.sec-pad { padding-block: clamp(54px, 6.5vw, 90px); }

/* section surfaces */
.bg-white { background: var(--white); }
.bg-ice   { background: var(--ice); }
.bg-ice-2 { background: linear-gradient(180deg, var(--ice), var(--ice-2)); }
.bg-dark  { background: var(--midnight); color: var(--d-ink); }
.bg-dark .h-sec { color: #fff; }

/* eyebrow */
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 500;
  color: var(--blue); display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content:''; width: 18px; height: 1.5px; background: var(--grad); border-radius: 2px; }
.bg-dark .eyebrow { color: var(--cyan); }

/* headings */
h1,h2,h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.h-sec { font-size: clamp(28px, 3.6vw, 44px); color: var(--ink); }
.sec-lead { color: var(--ink-soft); font-size: clamp(15.5px, 1.35vw, 18px); line-height: 1.6; max-width: 60ch; }
.bg-dark .sec-lead { color: var(--d-soft); }
.sec-head { max-width: 680px; margin-bottom: clamp(34px, 4vw, 52px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .sec-lead { margin-inline: auto; }
.sec-head .eyebrow { margin-bottom: 16px; }
.sec-head .h-sec { margin-bottom: 14px; }

.text-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding-inline: 22px; border-radius: 11px;
  font-weight: 500; font-size: 14.5px; border: 1px solid transparent;
  transition: transform .22s, box-shadow .22s, background .22s, border-color .22s, color .22s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, var(--sh-blue); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 36px 80px -26px rgba(7,91,255,.7); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-sm); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--blue); color: var(--blue); }
.bg-dark .btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: var(--d-line-2); }
.bg-dark .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: var(--cyan); }
.btn-sm { height: 40px; padding-inline: 16px; font-size: 13.5px; border-radius: 9px; }
.btn-lg { height: 54px; padding-inline: 28px; font-size: 15.5px; }

/* ---------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: 68px;
  display: flex; align-items: center; transition: background .3s, border-color .3s, box-shadow .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(255,255,255,.82); backdrop-filter: blur(18px) saturate(160%); border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand-logo { height: 30px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { font-size: 14px; color: var(--ink-soft); padding: 8px 13px; border-radius: 8px; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--blue); background: var(--blue-50); }
.nav-cta { display: flex; align-items: center; gap: 9px; }
.nav-burger { display: none; width: 40px; height: 40px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-2); align-items: center; justify-content: center; box-shadow: var(--sh-sm); }
.nav-burger span { width: 17px; height: 1.7px; background: var(--ink); position: relative; box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); border-radius: 2px; }

.mobile-menu {
  position: fixed; inset: 68px 0 auto 0; z-index: 99; background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px); border-bottom: 1px solid var(--line);
  padding: 16px 26px 24px; display: none; flex-direction: column; gap: 2px;
  transform: translateY(-10px); opacity: 0; transition: opacity .25s, transform .25s; box-shadow: var(--sh);
}
.mobile-menu.open { display: flex; transform: none; opacity: 1; }
.mobile-menu a { padding: 13px 12px; border-radius: 10px; color: var(--ink-soft); font-size: 16px; }
.mobile-menu a:hover { background: var(--blue-50); color: var(--blue); }
.mobile-menu .btn { margin-top: 10px; width: 100%; }

/* ---------------------------------------------------------- shared card bits */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.pill-ok { color: var(--ok); background: var(--ok-bg); }
.pill-ok::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.pill-blue { color: var(--blue); background: var(--blue-50); }
.pill-warn { color: var(--warn); background: var(--warn-bg); }
.pill-roadmap { color: var(--ink-mute); background: rgba(7,21,47,.05); }

.kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.kv .k { color: var(--ink-mute); white-space: nowrap; } .kv .v { color: var(--ink); font-weight: 500; white-space: nowrap; }
.kv .v.mono { font-family: var(--mono); }
.bar { height: 6px; border-radius: 4px; background: var(--ice-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad); }

/* ============================================================ HERO */
.hero { position: relative; padding-top: 116px; padding-bottom: clamp(48px, 6vw, 84px); overflow: hidden; background: linear-gradient(180deg, var(--ice) 0%, var(--ice-2) 52%, var(--white) 100%); }
.hero::before { /* ambient blue glow */
  content:''; position: absolute; top: -180px; right: -120px; width: 720px; height: 720px; pointer-events: none;
  background: radial-gradient(circle, rgba(0,107,255,.16), transparent 62%); z-index: 0;
}
.hero::after { /* grid */
  content:''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(7,91,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(7,91,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 35%, #000 30%, transparent 76%);
          mask-image: radial-gradient(ellipse 80% 70% at 60% 35%, #000 30%, transparent 76%);
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.12fr 1fr; gap: 44px; align-items: center; min-height: calc(100vh - 168px); }
.hero-copy { max-width: 560px; }
.hero h1 { font-size: clamp(36px, 4.3vw, 56px); font-weight: 600; letter-spacing: -.035em; margin: 16px 0 18px; }
.hero-sub { color: var(--ink-soft); font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.62; max-width: 52ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.trust-row { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.trust-row .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); }
.trust-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.trust-pill { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); box-shadow: var(--sh-sm); }
.hero-micro { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-mute); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hero-micro b { color: var(--ink-soft); font-weight: 500; }
.hero-micro .dot { color: var(--blue); }

/* hero visual */
.hero-stage { position: relative; height: 500px; }
.hero-stage svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.wire { fill: none; stroke: url(#wireGrad); stroke-width: 2; stroke-linecap: round; opacity: .8; stroke-dasharray: 5 8; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -26; } }
.hero-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 128px; height: 128px; border-radius: 30px; display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(7,91,255,.25); box-shadow: 0 0 0 6px rgba(255,255,255,.6), 0 24px 60px -16px rgba(7,91,255,.5);
  animation: corepulse 3.4s ease-in-out infinite;
}
.hero-core::after { content:''; position: absolute; inset: -28px; border-radius: 46px; background: radial-gradient(circle, rgba(0,107,255,.32), transparent 70%); z-index: -1; }
@keyframes corepulse { 0%,100% { box-shadow: 0 0 0 6px rgba(255,255,255,.6), 0 22px 54px -18px rgba(7,91,255,.45); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,.6), 0 34px 80px -14px rgba(7,91,255,.65); } }
.hero-core img { width: 78px; }
.hero-core .lifecycle { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }

.hframe {
  position: absolute; z-index: 3; background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sh-lg); padding: 13px 14px; backdrop-filter: blur(4px);
  animation: floaty var(--dur,7s) ease-in-out infinite; will-change: transform;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(var(--amp,-10px)); } }
.hframe .fh { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.hframe .ft { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.hframe .ft.b { color: var(--blue); }
.hframe .amt { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }

/* ============================================================ LOGO STRIP */
.logos { padding-block: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos .wrap { display: flex; align-items: center; justify-content: center; gap: 14px 40px; flex-wrap: wrap; }
.logos .lab { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.logos .meth { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink-faint); letter-spacing: -.02em; }

/* ============================================================ CAPABILITY STRIP (sell/bill/orchestrate) */
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cap {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 22px;
  box-shadow: var(--sh); transition: transform .3s, box-shadow .3s; position: relative; overflow: hidden;
}
.cap:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.cap .tag { position: absolute; top: 18px; right: 20px; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: .1em; }
.cap .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-50); margin-bottom: 16px; }
.cap .ic svg { width: 21px; height: 21px; stroke: var(--blue); fill: none; }
.cap h3 { font-size: 18px; margin-bottom: 8px; }
.cap p { font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; }
.cap .mini { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

/* ============================================================ CENTERED STORY */
.cstory { position: relative; }
.cstory-intro { max-width: 820px; margin: 0 auto; padding: 0 26px clamp(20px, 3vw, 40px); text-align: center; position: relative; z-index: 2; }
.cstory-intro .eyebrow { margin-bottom: 16px; }
.cstory-intro .h-sec { font-size: clamp(26px, 3.4vw, 40px); color: #fff; }
.cstory-pin { position: relative; }
.cstory-sticky {
  position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 28px);
  padding: 84px 26px 56px; position: sticky; z-index: 2;
}
.cstory-dots { display: flex; gap: 9px; position: relative; z-index: 3; }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); border: none; cursor: pointer; padding: 0; transition: width .35s, background .35s; }
.cs-dot.on { width: 26px; border-radius: 5px; background: var(--grad); }

.cstory-meta { position: relative; width: 100%; max-width: 600px; height: 118px; text-align: center; z-index: 2; }
.s-step { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); pointer-events: none; cursor: default; }
.s-step.active { opacity: 1; transform: none; pointer-events: auto; }
.sn-num { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--cyan); display: block; margin-bottom: 9px; }
.s-step h4 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); color: #fff; letter-spacing: -.02em; margin-bottom: 10px; }
.s-step p { font-size: 14.5px; color: var(--d-soft); line-height: 1.55; max-width: 520px; margin: 0 auto; }

.cstory-stage { position: relative; width: min(440px, 100%); height: clamp(440px, 56vh, 540px); z-index: 2; }
.cstory-stage::before { content:''; position: absolute; inset: -6% -12%; background: radial-gradient(ellipse at center, rgba(0,107,255,.28), transparent 64%); z-index: 0; pointer-events: none; }
.pframe {
  position: absolute; inset: 0; margin: auto; width: min(440px, 100%); height: max-content;
  max-height: 100%; opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  pointer-events: none; z-index: 1;
}
.pframe.active { opacity: 1; transform: none; pointer-events: auto; z-index: 2; }

/* product UI window */
.win { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-lg); overflow: hidden; }
.win-top { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--ice); }
.win-top .dots { display: flex; gap: 5px; }
.win-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.win-top .title { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); margin-left: 4px; }
.win-top .title b { color: var(--ink); font-weight: 600; }
.win-body { padding: 18px; }
.field { height: 40px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--ice); display: flex; align-items: center; padding: 0 13px; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.field.mono { font-family: var(--mono); }
.field .lbl { color: var(--ink-faint); }
.flbl { font-size: 11px; font-weight: 500; color: var(--ink-mute); margin-bottom: 6px; display: block; letter-spacing: .01em; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--ice-2); border: 1px solid var(--line); }
.seg span { font-size: 12px; padding: 6px 12px; border-radius: 7px; color: var(--ink-mute); font-weight: 500; }
.seg span.on { background: var(--white); color: var(--blue); box-shadow: var(--sh-sm); }
.win-cta { width: 100%; height: 44px; border-radius: 10px; border: none; background: var(--grad); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--sh-blue); display: flex; align-items: center; justify-content: center; gap: 8px; }
.win-cta svg { width: 16px; height: 16px; flex: none; }
.win-cta img { flex: none; }
.win-foot { text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 11px; }

/* routing rows */
.route { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line); margin-bottom: 8px; }
.route.sel { border-color: var(--blue); background: var(--blue-50); }
.route .rdot { width: 30px; height: 30px; border-radius: 8px; background: var(--ice-2); display: grid; place-items: center; flex: none; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--blue); }
.route .rmeta { margin-left: auto; text-align: right; }
.route .rmeta .pct { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ok); }
.route .rmeta .sub { font-size: 10.5px; color: var(--ink-faint); }

/* ledger rows */
.led-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.led-row:last-child { border-bottom: none; }
.led-row .ll { color: var(--ink-soft); display: flex; align-items: center; gap: 9px; }
.led-row .lv { font-family: var(--mono); font-weight: 600; }
.led-row .lv.pos { color: var(--ok); }
.led-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--ice-2); display: grid; place-items: center; }
.led-ic svg { width: 14px; height: 14px; stroke: var(--blue); fill: none; }

/* event rows */
.evt { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 7px; background: var(--white); }
.evt .ed { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px var(--ok-bg); }
.evt code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.evt .st { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ok); font-weight: 600; }

/* ============================================================ CHECKOUT SECTION */
.split { display: grid; grid-template-columns: 1.06fr 1fr; gap: 52px; align-items: center; }
.checkout-visual { position: relative; min-height: 440px; display: grid; place-items: center; }
.checkout-visual::before { content:''; position: absolute; inset: 6% 8%; background: radial-gradient(ellipse, rgba(0,107,255,.12), transparent 68%); }
.pchip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh); white-space: nowrap; animation: drift var(--cd,9s) ease-in-out infinite; }
.pchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(var(--cx,0), var(--cy,-12px)); } }
.checkout-card { position: relative; z-index: 4; width: min(330px, 90%); background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-lg); padding: 22px; }
.cc-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.cc-brand img { height: 18px; }
.cc-line { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; color: var(--ink); font-weight: 500; }
.cc-line span:first-child { color: var(--ink-soft); font-weight: 400; }
.cc-total { display: flex; align-items: center; justify-content: space-between; margin: 15px 0; }
.cc-total .amt { font-family: var(--display); font-weight: 700; font-size: 25px; }
.feature-list { display: flex; flex-direction: column; gap: 6px; }
.feature { display: flex; gap: 14px; padding: 16px; border-radius: 13px; border: 1px solid transparent; transition: border-color .3s, background .3s; }
.feature:hover { background: var(--white); border-color: var(--line); box-shadow: var(--sh); }
.feature .fic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--blue-50); }
.feature .fic svg { width: 19px; height: 19px; stroke: var(--blue); fill: none; }
.feature h4 { font-family: var(--display); font-weight: 600; font-size: 15.5px; margin-bottom: 4px; }
.feature p { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }

/* ============================================================ OPERATING MODELS */
.models-diagram { max-width: 840px; margin: 0 auto clamp(34px,4vw,44px); }
.models-diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.flow-node { display: inline-flex; flex-direction: column; gap: 1px; align-items: center; padding: 11px 18px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh); }
.flow-node b { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink); }
.flow-node span { font-size: 10.5px; color: var(--ink-mute); }
.flow-node.feat { border-color: var(--blue); }
.flow-node.feat b { color: var(--blue); }
.models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.model { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh); }
.model.feat { border-color: rgba(7,91,255,.3); background: linear-gradient(165deg, var(--blue-50), var(--white)); }
.model .mtag { display: inline-flex; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); padding: 5px 11px; border-radius: 999px; background: var(--blue-50); margin-bottom: 16px; }
.model h3 { font-size: 22px; margin-bottom: 10px; }
.model > p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.model ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.model li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-soft); align-items: flex-start; }
.model li svg { width: 17px; height: 17px; flex: none; margin-top: 1px; stroke: var(--blue); fill: none; }
.model .rev { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-mute); }
.model .rev b { color: var(--ink-soft); font-weight: 500; font-family: var(--mono); }

/* ============================================================ NETWORK + FINANCIAL (grouped) */
.nf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.nf-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh); display: flex; flex-direction: column; }
.nf-card .eyebrow { margin-bottom: 14px; }
.nf-card h3 { font-size: 22px; margin-bottom: 10px; letter-spacing: -.025em; }
.nf-card > p { font-size: 14px; color: var(--ink-soft); line-height: 1.58; }
.nf-visual { margin-top: 22px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.nf-note { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 16px; line-height: 1.55; }

/* phone */
.phone { width: 248px; margin: 0 auto; border-radius: 36px; padding: 9px; background: var(--navy); box-shadow: var(--sh-lg); position: relative; }
.phone-screen { border-radius: 28px; overflow: hidden; background: var(--ice); height: 420px; position: relative; }
.phone-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 80px; height: 18px; border-radius: 999px; background: var(--navy); z-index: 6; }
.merchant { padding: 42px 18px 18px; }
.merchant .mt { font-family: var(--display); font-weight: 600; font-size: 15px; }
.merchant .ms { font-size: 11.5px; color: var(--ink-mute); margin-bottom: 14px; }
.pay-btn { width: 100%; height: 46px; border-radius: 12px; border: none; margin-top: 12px; background: var(--grad); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--sh-blue); }
.pay-btn img { height: 15px; filter: brightness(0) invert(1); }
.net-sheet { position: absolute; left: 7px; right: 7px; bottom: 7px; z-index: 8; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 15px 15px 17px; box-shadow: 0 -18px 44px -14px rgba(7,21,47,.4); transform: translateY(112%); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.net-sheet.up { transform: translateY(0); }
.sheet-grip { width: 34px; height: 4px; border-radius: 999px; background: var(--line-2); margin: 0 auto 13px; }
.sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; font-family: var(--display); font-weight: 600; font-size: 13.5px; }
.sheet-head img { height: 13px; }
.bal-card { background: var(--grad); border-radius: 13px; padding: 13px; margin-bottom: 12px; color: #fff; }
.bal-card .lab { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.bal-card .amt { font-family: var(--display); font-weight: 700; font-size: 23px; margin-top: 2px; }
.src { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; border: 1px solid var(--line); margin-bottom: 7px; font-size: 12.5px; }
.src:last-child { margin-bottom: 0; }
.src.sel { border-color: var(--blue); background: var(--blue-50); }
.src .si { width: 28px; height: 28px; border-radius: 8px; background: var(--ice-2); display: grid; place-items: center; flex: none; color: var(--blue); }
.src .smeta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

/* finance frame */
.fin-frame { background: var(--ice); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.fin-bal { background: var(--navy); color: #fff; border-radius: 13px; padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden; }
.fin-bal::after { content:''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(0,200,255,.3), transparent 70%); }
.fin-bal .lab { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.fin-bal .amt { font-family: var(--display); font-weight: 700; font-size: 30px; margin-top: 4px; }
.fin-bal .row { display: flex; gap: 22px; margin-top: 14px; position: relative; z-index: 2; }
.fin-bal .row .lab2 { font-size: 10.5px; color: var(--d-mute); white-space: nowrap; }
.fin-bal .row .v2 { font-family: var(--mono); font-size: 14px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.fin-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fin-item { padding: 12px 13px; border-radius: 11px; border: 1px solid var(--line); background: var(--white); }
.fin-item .ft { display: flex; align-items: center; justify-content: space-between; }
.fin-item .ft .ct { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.fin-item h5 { font-family: var(--display); font-weight: 600; font-size: 13px; margin-top: 7px; }

/* ============================================================ AI + DEV (dark) */
.ai-dev { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.panel-dark { background: rgba(255,255,255,.03); border: 1px solid var(--d-line-2); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-lg); display: flex; flex-direction: column; }
.panel-dark .eyebrow { margin-bottom: 14px; }
.panel-dark h3 { font-size: 21px; color: #fff; margin-bottom: 9px; letter-spacing: -.025em; }
.panel-dark > p { font-size: 13.5px; color: var(--d-soft); line-height: 1.58; }
.pd-stage { margin-top: 20px; flex: 1; }

/* ai chat */
.ai-msg { display: flex; gap: 10px; margin-bottom: 12px; }
.ai-msg .av { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; }
.ai-msg .av.bot { background: var(--grad); }
.ai-msg .av.usr { background: rgba(255,255,255,.08); border: 1px solid var(--d-line-2); }
.ai-msg .av svg { width: 16px; height: 16px; }
.ai-msg .bubble { background: rgba(255,255,255,.05); border: 1px solid var(--d-line); border-radius: 12px; padding: 11px 13px; font-size: 13px; color: var(--d-soft); line-height: 1.5; }
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg.user .bubble { background: rgba(7,91,255,.16); border-color: rgba(0,107,255,.35); color: #fff; }
.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 40px; margin-bottom: 6px; }
.ai-chip { font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--d-line-2); background: rgba(255,255,255,.04); color: var(--d-soft); display: inline-flex; align-items: center; gap: 6px; }
.ai-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }

/* code panel */
.code { background: var(--midnight); border: 1px solid var(--d-line-2); border-radius: 13px; overflow: hidden; }
.code-top { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--d-line); }
.code-top .dots { display: flex; gap: 5px; } .code-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--d-line-2); }
.code-top .fname { font-family: var(--mono); font-size: 11px; color: var(--d-mute); margin-left: 5px; }
.code-body { padding: 15px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.8; min-height: 150px; }
.code-body .ln { white-space: pre; }
.c-key { color: #6aa6ff; } .c-str { color: #4fd1b0; } .c-num { color: #ffcd6b; } .c-com { color: var(--d-faint); } .c-fn { color: var(--cyan); } .c-pun { color: var(--d-mute); }
.dev-events { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.dev-evt { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--d-line); background: rgba(255,255,255,.03); opacity: .4; transform: translateX(8px); transition: opacity .45s, transform .45s; }
.dev-evt.fire { opacity: 1; transform: none; }
.dev-evt code { font-family: var(--mono); font-size: 11.5px; color: var(--d-ink); }
.dev-evt .st { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: #4fd1b0; font-weight: 600; }
.dev-evt .st::before { content:''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4fd1b0; margin-right: 6px; box-shadow: 0 0 8px #4fd1b0; }
.api-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.api-chip { font-family: var(--mono); font-size: 12px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--d-line-2); background: rgba(255,255,255,.04); color: var(--d-soft); }
.api-chip b { color: var(--cyan); font-weight: 500; }

/* ============================================================ FINAL CTA */
.final { background: var(--midnight); color: #fff; text-align: center; overflow: hidden; position: relative; }
.final::before { content:''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0,107,255,.22), transparent 70%); }
.final .wrap { position: relative; z-index: 2; }
.final-core { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 28px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 70px 0 rgba(7,91,255,.6), 0 0 0 6px rgba(255,255,255,.1); }
.final-core img { width: 50px; }
.final h2 { font-size: clamp(32px, 4.6vw, 52px); color: #fff; margin-bottom: 16px; }
.final .sec-lead { color: var(--d-soft); margin: 0 auto 32px; }
.final-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================ FOOTER */
.footer { background: var(--navy); color: var(--d-soft); padding-top: 64px; padding-bottom: 36px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 34px; }
.footer-brand img { height: 30px; margin-bottom: 18px; }
.footer-brand p { font-size: 13.5px; color: var(--d-mute); line-height: 1.6; max-width: 32ch; }
.footer-brand .nav-cta { margin-top: 20px; }
.fcol h5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--d-faint); margin-bottom: 14px; }
.fcol a { display: block; font-size: 13.5px; color: var(--d-soft); padding: 5px 0; transition: color .2s; }
.fcol a:hover { color: #fff; }
.footer-legal { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--d-line); display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; }
.legal-block { font-size: 12px; color: var(--d-mute); line-height: 1.7; max-width: 56ch; }
.legal-block b { color: var(--d-soft); font-weight: 500; }
.legal-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.legal-card { font-size: 11.5px; color: var(--d-mute); padding: 12px 15px; border-radius: 11px; border: 1px solid var(--d-line); background: rgba(255,255,255,.02); line-height: 1.5; }
.legal-card b { display: block; color: #fff; font-family: var(--display); font-weight: 600; font-size: 12.5px; margin-bottom: 3px; }
.legal-meta { font-size: 12px; color: var(--d-faint); font-family: var(--mono); line-height: 1.7; }

/* ============================================================ reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }
.reveal[data-d="4"] { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .hframe, .hero-core, .final-core, .pchip { animation: none !important; }
  .wire { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 1000px) {
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 38px; }
}
@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .nav-burger { display: flex; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; min-height: 0; }
  .hero-stage { height: 400px; order: 2; }
  .split, .ai-dev, .nf-grid, .models-grid { grid-template-columns: 1fr; gap: 36px; }
  .checkout-visual { min-height: 400px; }
  /* stacked story (no pin) on mobile */
  .cstory.stacked .cstory-pin { height: auto !important; }
  .cstory.stacked .cstory-sticky { position: static; min-height: 0; padding: 8px 0 0; display: block; }
  .cstory.stacked .cstory-dots { display: none; }
  .cstory.stacked .cstory-meta { position: static; height: auto; text-align: left; max-width: none; margin-bottom: 4px; }
  .cstory.stacked .s-step { position: static; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 0; }
  .cstory.stacked .s-step p { margin: 0; max-width: none; }
  .cstory.stacked .cstory-stage { position: relative; width: 100%; height: auto; margin-bottom: 38px; }
  .cstory.stacked .cstory-stage::before { display: none; }
  .cstory.stacked .pframe { position: relative; inset: auto; opacity: 1; transform: none; width: 100%; max-height: none; margin: 14px auto 0; pointer-events: auto; }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 18px; }
  .cap-grid { grid-template-columns: 1fr; }
  .models-diagram { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
  .legal-card { flex: 1; min-width: 0; }
  .hero-cta .btn, .final-cta .btn { flex: 1 1 auto; }
  .fin-list { grid-template-columns: 1fr; }
}

/* ============================================================
   v4 POLISH
   ============================================================ */

/* ---------- technology-sky for dark sections ---------- */
.bg-dark, .final { position: relative; isolation: isolate; }
.bg-dark::after, .final .sky {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 28% 64%, rgba(0,200,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 47% 16%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 63% 48%, rgba(122,176,255,.6), transparent),
    radial-gradient(1.7px 1.7px at 78% 26%, rgba(0,200,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 88% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 36% 84%, rgba(122,176,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 88%, rgba(255,255,255,.4), transparent),
    radial-gradient(2.4px 2.4px at 20% 44%, rgba(0,200,255,.35), transparent),
    radial-gradient(2.6px 2.6px at 82% 50%, rgba(7,91,255,.4), transparent);
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 100% 92% at 50% 40%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 92% at 50% 40%, #000 55%, transparent 100%);
  opacity: .9;
}
/* faint connecting node-lines, very subtle */
.bg-dark::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0 49.7%, rgba(0,200,255,.05) 49.8% 50.2%, transparent 50.3%),
    linear-gradient(64deg, transparent 0 49.7%, rgba(7,91,255,.05) 49.8% 50.2%, transparent 50.3%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000, transparent 80%);
}
.final .sky { z-index: 0; }
/* keep content above the sky */
.cstory-sticky, .cstory-intro { position: relative; z-index: 2; }
.cstory-sticky { position: sticky; }
.final .wrap { z-index: 2; }

/* tall story section: paint stars on the pinned layer so they're always visible */
.cstory-sticky::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 26% 70%, rgba(0,200,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 44% 14%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 60% 52%, rgba(122,176,255,.6), transparent),
    radial-gradient(1.7px 1.7px at 80% 24%, rgba(0,200,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 90% 66%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 34% 88%, rgba(122,176,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 72% 86%, rgba(255,255,255,.4), transparent),
    radial-gradient(2.4px 2.4px at 18% 46%, rgba(0,200,255,.3), transparent),
    radial-gradient(2.6px 2.6px at 84% 46%, rgba(7,91,255,.36), transparent);
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 95% 92% at 50% 48%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 92% at 50% 48%, #000 58%, transparent 100%);
  opacity: .85;
}

/* ---------- hero headline word animation (see .hero-anim block below) ---------- */
.hw.text-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- hero core: alive ring ---------- */
.hero-core::before {
  content: ''; position: absolute; inset: -4px; border-radius: 33px; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(0,200,255,.85), rgba(7,91,255,.6) 42%, transparent 56% 100%);
  animation: spin 5.5s linear infinite; filter: blur(.3px);
}
@keyframes spin { to { transform: rotate(360deg); } }
.wire { filter: drop-shadow(0 0 3px rgba(0,200,255,.45)); }
/* endpoint nodes for physical feel */
.wire-node { fill: #fff; stroke: var(--blue); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(0,200,255,.6)); }

/* ---------- checkout v2 (payment methods) ---------- */
.co2 { position: relative; z-index: 4; width: min(360px, 94%); background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-lg); overflow: hidden; }
.co2-head { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; transition: background .5s; }
.co2-head .mk { display: flex; align-items: center; gap: 9px; }
.co2-head .mlogo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px; transition: background .5s; }
.co2-head .mname { font-family: var(--display); font-weight: 600; font-size: 14.5px; line-height: 1.1; color: var(--ink); }
.co2-head .msec { font-size: 10.5px; color: var(--ink-mute); font-family: var(--mono); display: flex; align-items: center; gap: 4px; }
.co2-head .secured { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--ink-mute); }
.co2-head .secured img { height: 12px; }
.co2-body { padding: 16px 18px 18px; }
.co2-prod { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.co2-thumb { width: 46px; height: 46px; border-radius: 11px; flex: none; background: var(--grad-soft); position: relative; overflow: hidden; transition: background .5s; }
.co2-thumb::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 60%); }
.co2-prod .pn { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink); }
.co2-prod .pm-meta { font-size: 11.5px; color: var(--ink-mute); }
.co2-prod .pp { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.pm-list { display: flex; flex-direction: column; gap: 7px; }
.pm { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--white); cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s; position: relative; }
.pm.sel { border-color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 3px rgba(7,91,255,.08); }
.pm-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--ice-2); border: 1px solid var(--line); }
.pm-ic svg { width: 18px; height: 18px; }
.pm-ic img { width: 19px; }
.pm-tx .nm { font-weight: 600; font-size: 13.5px; line-height: 1.15; white-space: nowrap; color: var(--ink); }
.pm-tx .sb { font-size: 10.5px; color: var(--ink-mute); white-space: nowrap; }
.pm-radio { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; display: grid; place-items: center; transition: border-color .25s; }
.pm.sel .pm-radio { border-color: var(--blue); }
.pm.sel .pm-radio::after { content:''; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); }
.pm.primary { border-color: rgba(7,91,255,.4); background: linear-gradient(100deg, rgba(7,91,255,.07), rgba(0,200,255,.06)); }
.pm.primary .pm-ic { background: var(--grad); border-color: transparent; }
.pm.primary .pm-ic img { filter: brightness(0) invert(1); }
.pm.primary.sel { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,91,255,.1); }
.pm-tag { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--blue); background: var(--white); border: 1px solid rgba(7,91,255,.25); padding: 3px 7px; border-radius: 999px; text-transform: uppercase; }
.pm.sel ~ .pm .pm-radio, .pm .pm-radio { }
.pm-fields { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .3s, margin .45s; }
.pm-fields.show { max-height: 260px; opacity: 1; margin-top: 9px; }
.pm-benefit { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--blue); font-weight: 500; margin: 11px 2px 13px; }
.pm-benefit svg { width: 13px; height: 13px; flex: none; stroke: var(--blue); fill: none; }
.co2-pay { width: 100%; height: 46px; border-radius: 11px; border: none; background: var(--grad); color: #fff; font-weight: 600; font-size: 14.5px; box-shadow: var(--sh-blue); display: flex; align-items: center; justify-content: center; gap: 8px; }
.co2-foot { text-align: center; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 11px; }

/* ---------- routing v2 ---------- */
.rt-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--ice); border: 1px solid var(--line); margin-bottom: 12px; }
.rt-head .rl { font-size: 11px; color: var(--ink-soft); font-weight: 500; }
.rt-head .rv { font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--ink); }
.rt-flow { display: flex; flex-direction: column; gap: 0; margin-bottom: 13px; }
.rt-step { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.rt-step .rs-ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600; }
.rt-step.fail .rs-ic { background: var(--warn-bg); color: var(--warn); }
.rt-step.ok .rs-ic { background: var(--ok-bg); color: var(--ok); }
.rt-step .rs-nm { font-weight: 600; font-size: 13px; color: var(--ink); }
.rt-step .rs-sb { font-size: 10.5px; color: var(--ink-mute); }
.rt-step .rs-st { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 600; }
.rt-step.fail .rs-st { color: var(--warn); }
.rt-step.ok .rs-st { color: var(--ok); }
.rt-conn { width: 2px; height: 10px; margin-left: 13px; background: linear-gradient(var(--blue), var(--cyan)); border-radius: 2px; }
.rt-rate { background: var(--ice); border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; margin-bottom: 12px; }
.rt-rate .rr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.rt-rate .rr-l { font-size: 11px; color: var(--ink-mute); }
.rt-rate .rr-v { font-family: var(--display); font-weight: 700; font-size: 15px; }
.rt-rate .rr-v .up { color: var(--ok); font-size: 12px; font-family: var(--mono); margin-left: 5px; }
.rt-rate .rr-bar { height: 7px; border-radius: 5px; background: var(--ice-3); overflow: hidden; position: relative; }
.rt-rate .rr-bar i { display: block; height: 100%; border-radius: 5px; background: var(--grad); width: 0; transition: width 1.1s cubic-bezier(.16,1,.3,1); }
.prov-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prov { font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink-soft); }
.prov.on { border-color: var(--blue); color: var(--blue); background: var(--blue-50); }
.rt-cap { font-size: 11px; color: var(--ink-mute); margin-top: 11px; line-height: 1.5; }
.rt-cap b { color: var(--ink); font-weight: 600; }

/* ---------- ledger ops v2 ---------- */
.lg-bal { background: var(--navy); color: #fff; border-radius: 13px; padding: 15px 16px; margin-bottom: 13px; position: relative; overflow: hidden; }
.lg-bal::after { content:''; position: absolute; top: -36px; right: -30px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(0,200,255,.32), transparent 70%); }
.lg-bal .lb-lab { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.lg-bal .lb-amt { font-family: var(--display); font-weight: 700; font-size: 26px; margin-top: 3px; }
.lg-bal .lb-row { display: flex; gap: 16px; margin-top: 12px; position: relative; z-index: 2; flex-wrap: wrap; }
.lg-bal .lb-row .ll { font-size: 10px; color: var(--d-mute); }
.lg-bal .lb-row .lv { font-family: var(--mono); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.lg-bal .lb-row .lv.ok { color: #5fe3b0; }
.lg-actions { display: flex; gap: 7px; margin-bottom: 13px; }
.lg-btn { flex: 1; height: 36px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--white); font-size: 11.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 6px; transition: border-color .2s, color .2s; }
.lg-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.lg-btn.primary { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--sh-blue); }
.lg-auto { display: flex; flex-direction: column; gap: 6px; }
.lg-ai { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--white); font-size: 12px; color: var(--ink); font-weight: 500; }
.lg-ai .lg-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lg-ai .lg-dot.b { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.lg-ai .lg-dot.g { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.lg-ai .lg-tm { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-mute); font-weight: 400; }

/* ---------- network sheet additions ---------- */
.sheet-head .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.sheet-amt { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sheet-amt .sl { font-size: 11px; color: var(--ink-mute); }
.sheet-amt .sv { font-family: var(--display); font-weight: 700; font-size: 20px; }
.net-authorize { width: 100%; height: 42px; border-radius: 11px; border: none; background: var(--grad); color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: var(--sh-blue); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.net-authorize svg { width: 15px; height: 15px; }
.net-benefit { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); text-align: center; margin-top: 9px; line-height: 1.5; }
.net-success { position: absolute; inset: 0; z-index: 9; background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .4s; text-align: center; }
.net-success.show { opacity: 1; pointer-events: auto; }
.net-check { width: 60px; height: 60px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; box-shadow: var(--sh-blue); animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
.net-check svg { width: 30px; height: 30px; stroke: #fff; fill: none; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.net-success .ns-t { font-family: var(--display); font-weight: 700; font-size: 17px; }
.net-success .ns-d { font-size: 12px; color: var(--ink-mute); }
.net-success .ns-set { font-family: var(--mono); font-size: 10.5px; color: var(--ok); background: var(--ok-bg); padding: 5px 11px; border-radius: 999px; }
.net-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.net-flow span { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); padding: 4px 8px; border-radius: 6px; background: var(--ice-2); border: 1px solid var(--line); }
.net-flow .ar { background: none; border: none; color: var(--blue); padding: 0; }

/* ---------- AI operations dashboard ---------- */
.ai-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ai-op { background: rgba(255,255,255,.04); border: 1px solid var(--d-line-2); border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 7px; transition: border-color .3s, background .3s; }
.ai-op:hover { border-color: rgba(0,200,255,.35); background: rgba(255,255,255,.06); }
.ai-op .ao-top { display: flex; align-items: center; gap: 8px; }
.ai-op .ao-ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(0,200,255,.12); border: 1px solid rgba(0,200,255,.25); }
.ai-op .ao-ic svg { width: 15px; height: 15px; stroke: var(--cyan); fill: none; }
.ai-op .ao-t { font-family: var(--display); font-weight: 600; font-size: 12.5px; color: #fff; line-height: 1.15; }
.ai-op .ao-d { font-size: 11px; color: var(--d-mute); line-height: 1.45; }
.ai-op .ao-st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; color: #5fe3b0; margin-top: auto; }
.ai-op .ao-st::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: #5fe3b0; box-shadow: 0 0 7px #5fe3b0; }
.ai-op .ao-st.run { color: var(--cyan); }
.ai-op .ao-st.run::before { background: var(--cyan); box-shadow: 0 0 7px var(--cyan); animation: blink 1.1s infinite; }
.ai-op.wide { grid-column: span 2; flex-direction: row; align-items: center; }
.ai-op.wide .ao-body { flex: 1; }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- responsive additions ---------- */
@media (max-width: 920px) {
  /* story: reveal one step at a time on mobile */
  .cstory.stacked .s-step { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
  .cstory.stacked .s-step.in { opacity: 1; transform: none; }
  .checkout-visual { min-height: 0; padding-block: 8px; }
  .ai-ops { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ai-ops { grid-template-columns: 1fr; }
  .ai-op.wide { grid-column: span 1; }
  .lg-actions { flex-wrap: wrap; }
  .lg-btn { min-width: calc(50% - 4px); }
  .net-flow { gap: 5px; }
  .co2 { width: 100%; }
}

/* ============================================================
   v5 — payment-method realism
   ============================================================ */
/* card brand marks */
.brand-marks { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.bmark { height: 19px; min-width: 30px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line-2); background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); }
.bmark.visa { color: #1434cb; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 10.5px; letter-spacing: -.02em; }
.bmark.amex { background: #006fcf; border-color: #006fcf; color: #fff; font-family: var(--display); font-weight: 700; font-size: 7.5px; letter-spacing: .02em; }
.bmark.mc { gap: 0; padding: 0 6px; }
.bmark.mc .mc-a, .bmark.mc .mc-b { width: 12px; height: 12px; border-radius: 50%; }
.bmark.mc .mc-a { background: #eb001b; }
.bmark.mc .mc-b { background: #f79e1b; margin-left: -5px; mix-blend-mode: multiply; }
.pm[data-pm="card"] .pm-radio { margin-left: 10px; }

/* card form (revealed) */
.card-form { background: var(--ice); border: 1px solid var(--line); border-radius: 12px; padding: 13px; }
.card-form .cf-label { font-size: 10.5px; font-weight: 600; color: var(--ink-mute); margin-bottom: 5px; display: block; letter-spacing: .01em; }
.card-form .cf-field { height: 40px; border-radius: 9px; border: 1px solid var(--line-2); background: #fff; display: flex; align-items: center; padding: 0 12px; gap: 8px; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.card-form .cf-field.mono { font-family: var(--mono); letter-spacing: -.01em; }
.card-form .cf-field .cf-ph { color: var(--ink-faint); }
.card-form .cf-field .cf-brand { margin-left: auto; }
.card-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.card-form .cf-group { margin-bottom: 10px; }
.card-form .cf-group:last-child { margin-bottom: 0; }

/* branded pay buttons (bottom CTA morphs by method) */
.co2-pay.pay-apple { background: #000; color: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); font-family: -apple-system, 'Sora', sans-serif; gap: 6px; }
.co2-pay.pay-apple .ap-logo { width: 17px; height: 17px; display: inline-block; }
.co2-pay.pay-apple .ap-logo svg { width: 100%; height: 100%; fill: #fff; }
.co2-pay.pay-google { background: #000; color: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); gap: 7px; font-weight: 500; }
.co2-pay.pay-google .gp-wm { display: inline-flex; align-items: center; font-family: 'Geist', sans-serif; font-weight: 500; font-size: 15px; }
.co2-pay.pay-google .gp-g { font-weight: 500; }
.co2-pay.pay-bank { background: var(--grad); }

/* keep PayJSR pay button as the official gradient */
.co2-pay.pay-payjsr { background: var(--grad); }
.co2-pay .pj-mark { height: 16px; filter: brightness(0) invert(1); }

/* ============================================================
   v6 — consolidation: hero finale, story frames, models carousel,
   gateways, network graph, developer grid, final flow
   ============================================================ */

/* hero PayJSR finale word */
.hero h1 .pj { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; white-space: nowrap; }

/* ---------- story: Sales Page Builder frame ---------- */
.sp-preview { border: 1px solid var(--line); border-radius: 13px; padding: 18px; background: linear-gradient(160deg, var(--ice), #fff); position: relative; overflow: hidden; margin-bottom: 12px; }
.sp-preview::after { content:''; position: absolute; top: -40px; right: -30px; width: 130px; height: 130px; background: radial-gradient(circle, rgba(0,107,255,.14), transparent 70%); }
.sp-badge { display: inline-flex; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: var(--blue-50); border: 1px solid rgba(7,91,255,.2); padding: 4px 9px; border-radius: 999px; margin-bottom: 12px; }
.sp-h { font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--ink); letter-spacing: -.025em; }
.sp-sub { font-size: 12px; color: var(--ink-mute); margin-top: 3px; }
.sp-price { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--ink); margin: 12px 0 14px; letter-spacing: -.03em; }
.sp-price span { font-size: 16px; color: var(--ink-mute); font-weight: 600; }
.sp-buy { height: 42px; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-blue); }
.sp-blocks { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.sp-block { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.sp-block.on { border-color: rgba(7,91,255,.3); background: var(--blue-50); }
.sp-block .tg { width: 30px; height: 17px; border-radius: 999px; background: var(--ice-3); position: relative; flex: none; transition: background .3s; }
.sp-block .tg::after { content:''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: transform .3s; }
.sp-block .tg.on { background: var(--grad); }
.sp-block .tg.on::after { transform: translateX(13px); }

/* ---------- story: AI Commerce Assistant frame ---------- */
.ai-prompt { display: flex; gap: 10px; align-items: flex-start; background: var(--blue-50); border: 1px solid rgba(7,91,255,.18); border-radius: 12px; padding: 13px 14px; font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.45; margin-bottom: 14px; }
.ai-prompt .ai-pin { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid rgba(7,91,255,.2); }
.ai-prompt .ai-pin svg { width: 16px; height: 16px; }
.ai-run { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ai-line { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 500; color: var(--ink); }
.ai-line .al-ic { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid var(--line-2); position: relative; }
.ai-line.done .al-ic { background: var(--ok); border-color: var(--ok); }
.ai-line.done .al-ic::after { content:''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ai-line.run .al-ic { border-color: var(--blue); border-top-color: transparent; animation: spin 0.9s linear infinite; }
.ai-line .al-st { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ok); }
.ai-line .al-st.run { color: var(--blue); }
.ai-line .al-st.q { color: var(--ink-faint); }
.ai-foot { font-size: 12px; color: var(--ink-mute); }

/* ---------- operating models carousel ---------- */
.models-carousel { margin-top: clamp(28px, 3.4vw, 40px); }
.mc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.mc-tab { position: relative; text-align: left; padding: 15px 16px 17px; border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-sm); cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .25s, background .25s; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.mc-tab b { font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--ink); letter-spacing: -.02em; }
.mc-tab span { font-size: 11.5px; color: var(--ink-mute); }
.mc-tab i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--grad); transition: width .35s cubic-bezier(.16,1,.3,1); }
.mc-tab:hover { border-color: var(--line-2); transform: translateY(-2px); }
.mc-tab.on { border-color: rgba(7,91,255,.35); background: linear-gradient(180deg, var(--blue-50), #fff); box-shadow: var(--sh); }
.mc-tab.on b { color: var(--blue); }
.mc-tab.on i { width: 100%; }

.mc-stage { display: grid; }
.mc-panel { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.mc-panel.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mc-text .mtag { display: inline-flex; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); padding: 5px 11px; border-radius: 999px; background: var(--blue-50); margin-bottom: 16px; }
.mc-text h3 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 12px; letter-spacing: -.03em; }
.mc-text > p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.mc-text ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; }
.mc-text li { display: flex; gap: 11px; font-size: 14px; color: var(--ink); align-items: flex-start; line-height: 1.45; }
.mc-text li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; stroke: var(--blue); fill: none; }
.mc-note { font-size: 12.5px; color: var(--ink-mute); line-height: 1.55; padding: 12px 14px; border-radius: 11px; background: var(--ice); border: 1px solid var(--line); border-left: 3px solid var(--blue); }
.mc-visual .win, .mc-visual .fin-frame { max-width: 420px; margin-left: auto; width: 100%; }

/* connected gateways rows */
.gw { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 11px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 9px; }
.gw .gw-logo { height: 22px; display: grid; place-items: center; flex: none; min-width: 70px; max-width: 110px; }
.gw .gw-logo img { max-height: 22px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.gw .gw-logo img.sq { max-height: 26px; border-radius: 5px; }
.gw .gw-logo.adyen-tx { font-family: var(--display); font-weight: 700; font-size: 16px; color: #0abf53; letter-spacing: -.02em; justify-items: start; }
.gw .pill { margin-left: auto; }
.gw-note { font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; text-align: center; font-family: var(--mono); }

/* network graph */
.net-graph { position: relative; min-height: 230px; display: grid; place-items: center; }
.net-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ng-wire { stroke: url(#ng); stroke-width: 2; opacity: .55; stroke-dasharray: 5 7; animation: dash 1.6s linear infinite; }
.ng-node circle { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.ng-core { width: 64px; height: 64px; border-radius: 18px; background: #fff; border: 1px solid rgba(7,91,255,.25); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(255,255,255,.7), 0 16px 40px -14px rgba(7,91,255,.5); position: relative; z-index: 2; }
.ng-core img { width: 38px; }
.ng-lab { position: absolute; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); padding: 4px 8px; border-radius: 7px; box-shadow: var(--sh-sm); }

/* ---------- developer grid (focused) ---------- */
.dev-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 44px; align-items: center; }
.dev-copy .eyebrow { margin-bottom: 14px; }
.dev-copy h3 { font-size: clamp(24px, 2.8vw, 32px); color: #fff; margin-bottom: 12px; letter-spacing: -.03em; }
.dev-copy > p { color: var(--d-soft); font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; }
.dev-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.dev-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--d-ink); }
.dev-list .dv-n { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--cyan); width: 22px; height: 22px; border-radius: 6px; flex: none; display: grid; place-items: center; background: rgba(0,200,255,.1); border: 1px solid rgba(0,200,255,.25); }
.dev-panel { display: flex; flex-direction: column; }

/* final flow chips */
.final-steps { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.final-steps span { font-family: var(--mono); font-size: 11.5px; color: #fff; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--d-line-2); }
.final-steps i { color: var(--cyan); font-style: normal; }

/* ---------- responsive: carousel + dev grid ---------- */
@media (max-width: 920px) {
  .mc-tabs { grid-template-columns: repeat(3, 1fr); }
  .mc-panel { grid-template-columns: 1fr; gap: 26px; }
  .mc-visual .win, .mc-visual .fin-frame { margin: 0 auto; max-width: 420px; }
  .mc-visual { order: -1; }
  .dev-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 600px) {
  .mc-tabs { grid-template-columns: 1fr; gap: 8px; }
  .mc-tab { padding: 12px 13px 14px; }
  .mc-tab b { font-size: 13px; }
  .dev-list { grid-template-columns: 1fr; }
  .final-steps span { font-size: 10.5px; padding: 6px 10px; }
}

/* ============================================================
   v7 — centered story mocks (sales page, routing, ledger, flows)
   ============================================================ */

/* sales page builder */
.sp-body { padding: 0 !important; }
.sp-hero { display: grid; grid-template-columns: 0.82fr 1fr; gap: 0; }
.sp-cover { background: linear-gradient(160deg, #07152f, #075bff); padding: 20px 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; position: relative; overflow: hidden; }
.sp-cover::after { content:''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 18%, rgba(0,200,255,.4), transparent 60%); }
.sp-cover-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--cyan); position: relative; z-index: 2; }
.sp-cover-t { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.08; color: #fff; position: relative; z-index: 2; letter-spacing: -.02em; }
.sp-cover-by { font-size: 10.5px; color: rgba(255,255,255,.7); position: relative; z-index: 2; margin-top: 2px; }
.sp-info { padding: 18px 18px 16px; }
.sp-badge { display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: var(--blue-50); border: 1px solid rgba(7,91,255,.2); padding: 4px 9px; border-radius: 999px; margin-bottom: 10px; }
.sp-h { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 11px; }
.sp-bul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.sp-bul li { font-size: 12px; color: var(--ink-soft); padding-left: 19px; position: relative; }
.sp-bul li::before { content:''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok-bg); }
.sp-bul li::after { content:''; position: absolute; left: 4px; top: 8px; width: 3px; height: 6px; border: solid var(--ok); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.sp-price { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--ink); margin-bottom: 11px; }
.sp-price span { font-size: 15px; }
.sp-price em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--ink-faint); text-decoration: line-through; margin-left: 6px; }
.sp-buy { height: 42px; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-blue); margin-bottom: 11px; }
.sp-trust { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.sp-trust span { font-size: 10px; color: var(--ink-mute); font-family: var(--mono); }
.sp-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--ice); font-size: 11.5px; color: var(--ink-mute); }

/* routing v3 (by region) */
.rt-routes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 13px; }
.rt-route { border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: var(--white); }
.rr-geo { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 9px; }
.rr-flag { width: 26px; height: 20px; border-radius: 5px; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #fff; background: var(--grad); }
.rr-provs { display: flex; flex-wrap: wrap; gap: 6px; }

/* ledger stats row */
.lg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 13px; }
.lg-stat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: var(--white); }
.lg-stat .ls-l { font-size: 10px; color: var(--ink-mute); margin-bottom: 3px; }
.lg-stat .ls-v { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.lg-stat .ls-v.ok { color: var(--ok); }

/* commerce flow strip (operating model A) */
.cflow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cflow span { font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink-soft); }
.cflow i { color: var(--blue); font-style: normal; font-size: 11px; }

/* connected providers note */
.gw-note { font-size: 11px; color: var(--ink-mute); margin-top: 11px; line-height: 1.5; padding-top: 11px; border-top: 1px solid var(--line); }

/* checkout v3 additions */
.co2-sum { background: var(--ice); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; margin-bottom: 14px; }
.co2-amt { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.pm-ic.chip { font-family: var(--display); font-weight: 700; font-size: 14px; color: #fff; background: var(--grad); border-color: transparent; }
.pm-fields { order: 0; }
.card-form.flush { margin-top: 2px; }
.co2-foot .pj-mark-dark { height: 13px; vertical-align: -2px; margin-right: 5px; opacity: .85; }

/* final CTA flow */
.final-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 26px 0 0; position: relative; z-index: 2; }
.final-steps span { font-family: var(--mono); font-size: 12px; color: var(--d-soft); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--d-line-2); background: rgba(255,255,255,.04); }
.final-steps i { color: var(--cyan); font-style: normal; }

/* models note (ensure present) */
.mc-note { margin-top: 18px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.55; padding: 12px 14px; border-radius: 11px; background: var(--ice); border: 1px solid var(--line); }

@media (max-width: 600px) {
  .sp-hero { grid-template-columns: 1fr; }
  .sp-cover { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
  .lg-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   v8 — FULL WHITE / ICE THEME
   Converts story, final CTA, footer and accents to a premium
   light theme. Appended last so it wins on color/surface.
   ============================================================ */

/* ---- STORY: dark → light ---- */
.cstory { background: linear-gradient(180deg, #fff 0%, var(--ice) 36%, var(--ice-2) 100%); }
.cstory-intro { padding-top: clamp(20px, 3vw, 36px); }
.cstory-intro .h-sec { color: var(--ink); }
.cstory-intro .eyebrow { color: var(--blue); }
.s-step h4 { color: var(--ink); }
.s-step p { color: var(--ink-soft); }
.sn-num { color: var(--blue); }
.cs-dot { background: rgba(7,21,47,.16); }
.cs-dot.on { background: var(--grad); }
/* replace starfield with a soft enterprise grid + glow */
.cstory-sticky::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(7,91,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,91,255,.045) 1px, transparent 1px),
    radial-gradient(ellipse 52% 44% at 50% 46%, rgba(0,107,255,.10), transparent 70%);
  background-size: 60px 60px, 60px 60px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 96% 90% at 50% 48%, #000 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 96% 90% at 50% 48%, #000 52%, transparent 100%);
  opacity: 1;
}
.cstory-stage::before { background: radial-gradient(ellipse at center, rgba(0,107,255,.16), transparent 66%); }
/* slightly larger active mock on desktop, side glow fills width */
@media (min-width: 921px) {
  .cstory-stage { width: min(500px, 100%); height: clamp(470px, 58vh, 560px); }
  .pframe { width: min(500px, 100%); }
  .co2 { width: min(500px, 100%); }
}

/* ---- FINAL CTA: dark → light ---- */
.final { background: linear-gradient(180deg, var(--ice-2) 0%, var(--ice) 60%, #fff 100%); color: var(--ink); }
.final::before { background: radial-gradient(ellipse 56% 48% at 50% 36%, rgba(0,107,255,.14), transparent 70%); }
.final-core { background: var(--grad); box-shadow: 0 0 70px 0 rgba(7,91,255,.45), 0 0 0 7px rgba(7,91,255,.08); }
.final-core img { filter: brightness(0) invert(1); }
.final h2 { color: var(--ink); }
.final .sec-lead { color: var(--ink-soft); }
.final-steps span { color: var(--ink-soft); border-color: var(--line-2); background: var(--white); box-shadow: var(--sh-sm); }
.final-steps i { color: var(--blue); }
.final .sky { display: none; }

/* ---- FOOTER: dark → light ---- */
.footer { background: linear-gradient(180deg, #fff, var(--ice)); color: var(--ink-soft); border-top: 1px solid var(--line); }
.footer-brand p { color: var(--ink-mute); }
.fcol h5 { color: var(--ink-faint); }
.fcol a { color: var(--ink-soft); }
.fcol a:hover { color: var(--blue); }
.footer-legal { border-top: 1px solid var(--line); }
.legal-block { color: var(--ink-mute); }
.legal-block b { color: var(--ink-soft); }
.legal-card { color: var(--ink-mute); border: 1px solid var(--line); background: var(--white); box-shadow: var(--sh-sm); }
.legal-card b { color: var(--ink); }
.legal-meta { color: var(--ink-faint); }

/* operating models: code card stays as a dark code editor (premium, expected) */

/* ---- HERO: tightened, chips removed ---- */
.hero { padding-bottom: clamp(20px, 3vw, 40px); }
.hero .wrap { min-height: calc(100vh - 210px); }
.hero-note { margin-top: 22px; font-size: 13px; color: var(--ink-mute); line-height: 1.6; max-width: 46ch; }
.hero-h1 .pj { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cstory-intro { padding-top: 0; }

/* ---- AI Commerce Assistant: chat interface ---- */
.chat-body { padding: 16px; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.cmsg { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; }
.cmsg .cwho { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); align-self: flex-start; margin-top: 4px; }
.cmsg .cav { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--grad); box-shadow: var(--sh-blue); }
.cmsg .cav svg { width: 15px; height: 15px; }
.cmsg .cbub { padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; }
/* seller (right) */
.cmsg.seller { align-self: flex-end; flex-direction: row-reverse; }
.cmsg.seller .cbub { background: var(--grad); color: #fff; border-bottom-right-radius: 5px; }
.cmsg.seller .cwho { color: var(--blue); }
/* buyer (right, lighter) */
.cmsg.buyer { align-self: flex-end; flex-direction: row-reverse; }
.cmsg.buyer .cbub { background: var(--ice-3); color: var(--ink); border-bottom-right-radius: 5px; }
/* ai (left) */
.cmsg.ai { align-self: flex-start; }
.cmsg.ai .cbub { background: var(--white); border: 1px solid var(--line); color: var(--ink-soft); border-bottom-left-radius: 5px; box-shadow: var(--sh-sm); }
.cmsg .clink { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--blue); }
.cmsg .cbub.alert { border-color: rgba(7,91,255,.28); background: var(--blue-50); }
.cmsg .cact { display: flex; gap: 7px; margin-top: 9px; }
.cmsg .cbtn { font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 8px; background: var(--grad); color: #fff; }
.cmsg .cbtn.ghost { background: var(--white); border: 1px solid var(--line-2); color: var(--ink-soft); }

/* ---- Hosted Checkout: 2-column ---- */
.co3 { width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-lg); overflow: hidden; }
.co3-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--white); }
.co3-head .mk { display: flex; align-items: center; gap: 10px; }
.co3-head .mlogo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; background: var(--grad); }
.co3-head .mname { font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.1; }
.co3-head .msec { font-size: 11px; color: var(--ink-mute); }
.co3-secure { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); display: flex; align-items: center; gap: 6px; }
.co3-secure::before { content:''; width: 12px; height: 12px; border-radius: 3px; background: var(--ok-bg); border: 1px solid var(--ok); }
.co3-grid { display: grid; grid-template-columns: 0.82fr 1fr; }
/* left order summary */
.co3-left { background: linear-gradient(180deg, #fbfcff, var(--ice)); padding: 20px 20px 22px; border-right: 1px solid var(--line); }
.co3-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 13px; }
.co3-prod { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.co3-thumb { width: 52px; height: 64px; border-radius: 8px; flex: none; background: linear-gradient(155deg, #07152f, #075bff); display: grid; place-items: center; box-shadow: var(--sh-sm); }
.co3-thumb span { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; color: var(--cyan); }
.co3-prod .pn { font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.co3-prod .pm-meta { font-size: 11.5px; color: var(--ink-mute); }
.co3-lines { display: flex; flex-direction: column; gap: 9px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.co3-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 2px; }
.co3-total span:first-child { font-size: 13px; color: var(--ink-soft); }
.co3-amt { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--ink); }
.co3-ident { margin-top: 14px; font-size: 11px; color: var(--ink-mute); line-height: 1.5; }
.co3-ident .ci-lab { color: var(--ink-faint); }
/* right buyer + payment */
.co3-right { padding: 18px 20px 20px; }
.co3-buyer { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.co3-pay { width: 100%; height: 48px; border-radius: 12px; border: none; background: var(--grad); color: #fff; font-weight: 600; font-size: 15px; box-shadow: var(--sh-blue); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.co3-foot { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--ink-mute); margin-top: 12px; }
.co3-foot b { color: var(--ink-soft); font-weight: 600; }
.co3-foot .pj-mark-dark { height: 14px; opacity: .9; }
.co3-terms { font-size: 10px; line-height: 1.5; color: var(--ink-faint); text-align: center; margin-top: 10px; }
/* branded pay buttons for co3 */
.co3-pay.pay-apple { background: #000; gap: 6px; }
.co3-pay.pay-apple .ap-logo { width: 17px; height: 17px; display: inline-block; }
.co3-pay.pay-apple .ap-logo svg { width: 100%; height: 100%; fill: #fff; }
.co3-pay.pay-google { background: #000; gap: 7px; }
.co3-pay.pay-google .gp-wm { font-family: 'Geist', sans-serif; font-weight: 500; font-size: 15px; }

/* ---- Routing: prominent auth rate ---- */
.rt-rate .rr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rt-rate .rr-up { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ok); background: var(--ok-bg); padding: 3px 8px; border-radius: 999px; }
.rr-big { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--ink); letter-spacing: -.02em; line-height: 1; margin-bottom: 9px; }
.rr-big span { font-size: 16px; color: var(--ink-mute); margin-left: 1px; }

/* ---- Operating models: carousel bar + arrows ---- */
.mc-bar { display: flex; align-items: stretch; gap: 16px; margin-bottom: 22px; }
.mc-bar .mc-tabs { flex: 1; margin-bottom: 0; }
.mc-nav { display: flex; align-items: center; gap: 10px; flex: none; }
.mc-arrow { width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-sm); transition: background .2s, border-color .2s, transform .2s; }
.mc-arrow svg { width: 18px; height: 18px; }
.mc-arrow:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.mc-count { font-family: var(--mono); font-size: 13px; color: var(--ink-mute); min-width: 44px; text-align: center; }
.mc-count b { color: var(--ink); font-weight: 600; }
/* panel enter animation for carousel feel */
.mc-panel.active { animation: mcslide .45s cubic-bezier(.16,1,.3,1); }
@keyframes mcslide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .mc-bar { flex-direction: column; gap: 12px; }
  .mc-nav { justify-content: center; }
}

/* ============================================================
   v9 — checkout static buttons + real logos + compact fit
   ============================================================ */
.co3-order { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.co3-right { padding: 15px 17px 16px; }
.co3-buyer-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.co3-buyer-2 .cf-group { display: flex; flex-direction: column; }
.co3-buyer-2 .cf-label { font-size: 10px; font-weight: 600; color: var(--ink-mute); margin-bottom: 5px; display: block; letter-spacing: .01em; }
.cf-input { width: 100%; height: 38px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; padding: 0 12px; font-family: var(--body); font-size: 13px; color: var(--ink); box-shadow: inset 0 1px 2px rgba(7,21,47,.05); outline: none; transition: border-color .2s, box-shadow .2s; }
.cf-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,91,255,.12); }
.pm-list { display: flex; flex-direction: column; gap: 7px; }
/* static method buttons — centered content, equal height */
.mbtn { display: flex; align-items: center; justify-content: center; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--white); }
.mbtn-in { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.mbtn-ic { width: 22px; display: grid; place-items: center; flex: none; }
.mbtn-ic svg { width: 21px; height: 21px; }
.mbtn-tx { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mbtn .brand-marks { margin-left: 2px; }
.mbtn.dark { background: #000; border-color: #000; }
.mbtn.dark .mbtn-tx { color: #fff; }
.brand-lock { display: inline-flex; align-items: center; gap: 4px; }
.brand-lock svg { width: 20px; height: 20px; display: block; }
.brand-lock b { color: #fff; font-weight: 600; font-size: 14px; font-family: var(--body); letter-spacing: -.01em; }
.mbtn-logo { width: 24px; height: 24px; border-radius: 6px; overflow: hidden; flex: none; display: grid; place-items: center; box-shadow: var(--sh-sm); }
.mbtn-logo img { width: 100%; height: 100%; object-fit: cover; }
/* main pay button (static blue) */
.co3-pay { height: 46px; margin-top: 11px; }
.co3-pay.pay-payjsr, .co3-pay { background: var(--grad); }
/* secured-by line: dark, full wordmark */
.co3-foot { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; font-size: 13px; font-weight: 600; color: var(--ink); }
.co3-foot .pj-wordmark { height: 15px; width: auto; }
.co3-terms { font-size: 10px; line-height: 1.5; color: var(--ink-mute); text-align: center; margin-top: 7px; }
/* taller stage + compact meta so the full checkout fits without inner scroll */
.cstory-meta { height: 100px; }
.cstory-sticky { gap: clamp(12px, 1.8vw, 20px); padding-top: 72px; padding-bottom: 40px; }
@media (min-width: 921px) {
  .cstory-stage { height: clamp(540px, 68vh, 640px); width: min(760px, 94vw); }
  .pframe[data-i="3"] { width: min(720px, 100%); }
}
@media (min-width: 921px) and (max-height: 820px) {
  .cstory-meta { height: 84px; }
  .s-step h4 { font-size: 24px; margin-bottom: 6px; }
  .cstory-stage { height: clamp(520px, 74vh, 640px); }
}



/* ---- code card: contain typing, no page movement ---- */
.code-body { height: 188px; min-height: 0; overflow: hidden; }
.mc-visual .code { contain: layout paint; }
/* ---- API labels (POST/GET/EVT) on white section: clearer ---- */
.mc-visual .api-chip { color: var(--ink-soft); background: var(--white); border: 1px solid var(--line-2); box-shadow: var(--sh-sm); }
.mc-visual .api-chip b { color: var(--blue); font-weight: 700; }
/* ---- operating models: tighter vertical rhythm ---- */
#models .sec-head { margin-bottom: clamp(22px, 2.6vw, 32px); }
/* connect active text + mock: smaller column gap, center the visual */
.mc-panel { gap: clamp(20px, 2.4vw, 30px) !important; align-items: center; }
.mc-visual .win, .mc-visual .fin-frame, .mc-visual .code { margin-left: auto; margin-right: auto; }
@media (max-width: 920px) {
  .mc-panel { gap: 18px !important; }
  .mc-text { text-align: left; }
}
.models-carousel { margin-top: clamp(18px, 2.2vw, 26px); }


/* checkout wider than other story frames on desktop */
@media (min-width: 921px) {
  .pframe[data-i="3"] { width: min(740px, 100%); }
  .cstory-stage { width: min(740px, 94vw); }
  /* keep non-checkout mocks at a comfortable centered width */
  .pframe[data-i="0"], .pframe[data-i="1"], .pframe[data-i="2"],
  .pframe[data-i="4"], .pframe[data-i="5"], .pframe[data-i="6"], .pframe[data-i="7"] { width: min(460px, 100%); }
}
@media (max-width: 920px) {
  .co3-grid { grid-template-columns: 1fr; }
  .co3-left { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ============================================================
   v10 — Ads & Pixel Tracking mock + Ways-to-use carousel polish
   ============================================================ */
.trk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.trk-l { font-size: 12px; color: var(--ink-mute); font-weight: 500; }
.trk-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--ok); background: var(--ok-bg); padding: 4px 9px; border-radius: 999px; }
.trk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(15,157,107,.18); }
.trk-pixels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 13px; }
.trk-px { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 8px 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); text-align: center; }
.trk-px.on { border-color: rgba(7,91,255,.22); }
.trk-logo { height: 26px; display: grid; place-items: center; }
.trk-logo img { max-height: 26px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.trk-name { font-size: 10.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.trk-sync { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ok); }
.trk-sync svg { width: 9px; height: 9px; }
.trk-events { display: flex; flex-direction: column; gap: 9px; padding: 12px 13px; border-radius: 12px; background: var(--ice); border: 1px solid var(--line); margin-bottom: 12px; }
.trk-ev { display: grid; grid-template-columns: 108px 1fr 52px; align-items: center; gap: 10px; }
.trk-ev .te-n { font-size: 11.5px; color: var(--ink-soft); font-weight: 500; }
.trk-ev .te-bar { height: 7px; border-radius: 5px; background: var(--ice-3); overflow: hidden; }
.trk-ev .te-bar i { display: block; height: 100%; border-radius: 5px; background: var(--grad); width: 0; transition: width 1.1s cubic-bezier(.16,1,.3,1); }
.trk-ev .te-v { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink); text-align: right; }
.trk-attr { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; }
.trk-attr-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.trk-attr-row .ta-k { color: var(--ink-mute); }
.trk-attr-row .ta-v { font-weight: 600; color: var(--ink); }
.trk-attr-row .ta-v.mono { font-family: var(--mono); font-size: 11.5px; }
.trk-attr-row .ta-v.ok { color: var(--ok); }
.trk-cap { font-size: 10.5px; color: var(--ink-mute); line-height: 1.5; }

/* ---- Hero headline microspacing + flow ---- */
.hero h1, .hero-h1 { letter-spacing: -.02em; line-height: 1.1; word-spacing: .02em; }
.hero-h1 .pj { margin-left: .04em; }
.hero { padding-bottom: clamp(16px, 2.4vw, 32px); }
.hero .wrap { min-height: calc(100vh - 230px); }
.cstory-intro { padding-top: clamp(8px, 1.4vw, 20px); }
/* ---- Ways-to-use: quieter inactive cards (carousel feel) ---- */
.mc-tab { transition: opacity .35s, border-color .25s, background .25s, transform .25s, box-shadow .25s; }
.mc-tab:not(.on) { opacity: .6; }
.mc-tab:not(.on):hover { opacity: 1; }
.mc-tab.on { opacity: 1; transform: translateY(-2px); }

/* ============================================================
   v11 — centered hero w/ dashboard hero illustration
   ============================================================ */
.hero-centered .wrap { display: block; grid-template-columns: none; text-align: center; min-height: 0; padding-top: 8px; }
.hero-centered .hero-copy { max-width: 880px; margin: 0 auto; }
.hero-centered .hero-h1 { font-size: clamp(36px, 4.8vw, 62px); margin: 14px auto 18px; max-width: 17ch; line-height: 1.1; letter-spacing: -.022em; word-spacing: .04em; }
.hero-centered .hero-sub { margin: 0 auto; max-width: 60ch; }
.hero-centered .hero-cta { justify-content: center; margin-top: 26px; }
.hero-centered .hero-note { margin: 22px auto 0; max-width: 58ch; text-align: center; }

/* dashboard illustration as the main hero visual */
.hero-dash { position: relative; margin: clamp(30px, 4.2vw, 56px) auto 0; max-width: 1100px; z-index: 2; }
.hero-dash-frame {
  position: relative; z-index: 2; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(7,21,47,.14);
  box-shadow: 0 2px 4px rgba(7,21,47,.06), 0 40px 90px -30px rgba(7,21,47,.55), 0 0 0 1px rgba(255,255,255,.6);
  background: #04060f;
}
.hero-dash-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; background: #0a1020; border-bottom: 1px solid rgba(255,255,255,.07); }
.hd-dots { display: inline-flex; gap: 6px; }
.hd-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a3550; }
.hd-dots i:nth-child(1){ background:#ff5f57; } .hd-dots i:nth-child(2){ background:#febc2e; } .hd-dots i:nth-child(3){ background:#28c840; }
.hd-url { flex: 0 1 auto; font-family: var(--mono); font-size: 11.5px; color: #8a97b8; background: #050912; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; padding: 4px 14px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-spacer { flex: 1; }
.hero-dash-frame img { display: block; width: 100%; height: auto; }
.hero-dash-glow { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 86%; height: 78%; background: radial-gradient(ellipse at center, rgba(7,91,255,.35), transparent 66%); filter: blur(40px); z-index: 0; pointer-events: none; }

@media (max-width: 920px) {
  .hero-centered .hero-dash { margin-top: clamp(26px, 6vw, 40px); }
  .hero-dash-bar { height: 32px; }
  .hd-url { font-size: 10px; max-width: 56%; }
}
@media (max-width: 620px) {
  .hero-centered .hero-h1 { font-size: clamp(30px, 8.4vw, 40px); max-width: 14ch; }
  .hero-dash-frame { border-radius: 12px; }
  .hd-dots i { width: 8px; height: 8px; }
}

/* ============================================================
   v12 — routing failover flow + ads logos responsive
   ============================================================ */
.rt-flow { display: flex; flex-direction: column; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--ice); margin-bottom: 11px; }
.rtf-pay { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.rtf-pay b { color: var(--ink); font-weight: 700; }
.rtf-cust { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(7,91,255,.16); flex: none; }
.rtf-try { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-2); }
.rtf-try.a2 { border-color: rgba(15,157,107,.32); }
.rtf-n { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); width: 50px; flex: none; }
.rtf-prov { display: grid; place-items: center; height: 20px; min-width: 56px; }
.rtf-prov img { height: 17px; width: auto; object-fit: contain; }
.rtf-prov.adyen { font-family: var(--display); font-weight: 700; font-size: 15px; color: #0abf53; letter-spacing: -.02em; }
.rtf-line { flex: 1; height: 0; border-top: 2px dashed var(--line-2); min-width: 14px; }
.rtf-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; flex: none; }
.rtf-stat svg { width: 11px; height: 11px; }
.rtf-stat.declined { color: #e5484d; background: rgba(229,72,77,.1); }
.rtf-stat.approved { color: var(--ok); background: var(--ok-bg); }
.rtf-reroute { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--blue); padding-left: 2px; }
.rtf-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(7,91,255,.25); border-top-color: var(--blue); animation: rtspin .7s linear infinite; flex: none; }
@keyframes rtspin { to { transform: rotate(360deg); } }
.rtf-done { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ok); }
.rtf-done svg { width: 15px; height: 15px; flex: none; }
/* sequential reveal when active */
.rt-flow .rtf-try, .rt-flow .rtf-reroute, .rt-flow .rtf-done { opacity: 0; transform: translateY(6px); }
.rt-flow.play .rtf-try.a1 { animation: rtfIn .45s ease forwards .25s; }
.rt-flow.play .rtf-reroute { animation: rtfIn .45s ease forwards 1.15s; }
.rt-flow.play .rtf-try.a2 { animation: rtfIn .45s ease forwards 1.95s; }
.rt-flow.play .rtf-done { animation: rtfIn .45s ease forwards 2.75s; }
@keyframes rtfIn { to { opacity: 1; transform: none; } }
/* compact region routes */
.rt-regions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.rt-reg { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-soft); font-weight: 500; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); }
.rt-reg .rr-flag { font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--blue); background: rgba(7,91,255,.1); padding: 2px 5px; border-radius: 5px; }
/* mobile-stacked + reduced-motion: show all steps */
.cstory.stacked .rt-flow .rtf-try, .cstory.stacked .rt-flow .rtf-reroute, .cstory.stacked .rt-flow .rtf-done { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rt-flow .rtf-try, .rt-flow .rtf-reroute, .rt-flow .rtf-done { opacity: 1 !important; transform: none !important; animation: none !important; }
  .rtf-spin { animation: none; }
}
/* ads pixel tiles: 2×2 on very narrow frames */
@media (max-width: 520px) {
  .trk-pixels { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   v13 — compact objection-handling FAQ
   ============================================================ */
.faq { max-width: 820px; margin: clamp(36px, 5vw, 60px) auto 0; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--sh-sm); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.faq-item.open { border-color: rgba(7,91,255,.28); box-shadow: 0 14px 34px -18px rgba(7,91,255,.4); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: none; text-align: left; font-family: var(--display); font-weight: 600; font-size: clamp(15px, 1.5vw, 17px); color: var(--ink); letter-spacing: -.01em; cursor: pointer; }
.faq-ic { position: relative; width: 16px; height: 16px; flex: none; }
.faq-ic::before, .faq-ic::after { content: ''; position: absolute; background: var(--blue); border-radius: 2px; transition: transform .3s, opacity .3s; }
.faq-ic::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-ic::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item.open .faq-ic::after { transform: scaleY(0); opacity: 0; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > p { overflow: hidden; margin: 0; padding: 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); transition: padding .35s; }
.faq-item.open .faq-a > p { padding: 0 20px 20px; }

/* ============================================================
   v14 — hero word-in animation, mock URL pills, ads/orchestration polish
   ============================================================ */
/* one-time word-by-word headline entrance */
.hero-anim .hw { display: inline-block; -webkit-font-smoothing: antialiased; backface-visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hero-anim .hw { opacity: 0; transform: translateY(0.42em); animation: hwIn .5s cubic-bezier(.2,.7,.2,1) forwards; }
  .hero-anim .hw:nth-child(1) { animation-delay: .08s; }
  .hero-anim .hw:nth-child(2) { animation-delay: .16s; }
  .hero-anim .hw:nth-child(3) { animation-delay: .24s; }
  .hero-anim .hw:nth-child(4) { animation-delay: .32s; }
  .hero-anim .hw:nth-child(5) { animation-delay: .40s; }
  .hero-anim .hw:nth-child(6) { animation-delay: .48s; }
  .hero-anim .hw:nth-child(7) { animation-delay: .56s; }
}
@keyframes hwIn { from { opacity: 0; transform: translateY(0.42em); } to { opacity: 1; transform: translateY(0); } }

/* dashboard browser-bar lock + checkout URL pill */
.hd-url { display: inline-flex; align-items: center; gap: 6px; }
.hd-lock { width: 11px; height: 11px; color: #6f7ea3; flex: none; }
.co3-url { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); background: var(--ice); border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 11px; }
.co3-url svg { width: 11px; height: 11px; color: var(--ok); flex: none; }

/* ads: enlarge Meta logo slightly while keeping the row balanced */
.trk-px:first-child .trk-logo { height: 30px; }
.trk-px:first-child .trk-logo img { max-height: 30px; }

/* ============================================================
   v14b — Payment Orchestration "above providers" mock
   ============================================================ */
.orch { display: flex; flex-direction: column; gap: 12px; }
.orch-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 10px; padding: 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, var(--ice), var(--white)); }
.orch-prov { display: grid; place-items: center; height: 40px; padding: 4px; }
.orch-prov img { max-height: 22px; max-width: 88%; width: auto; object-fit: contain; display: block; }
.orch-prov.tx { font-family: var(--display); font-weight: 700; font-size: 18px; color: #0abf53; letter-spacing: -.02em; }
.orch-prov .sq { max-height: 26px; border-radius: 6px; }
.orch-prov img.wide { max-height: 19px; max-width: 96%; }
.orch-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); text-align: center; }
.orch-ask { font-size: 11px; color: var(--ink-mute); text-align: center; font-style: italic; margin-top: -2px; }
.orch-flow-ar { display: grid; place-items: center; color: var(--blue); margin: -2px 0; }
.orch-flow-ar svg { width: 22px; height: 22px; }
/* the PayJSR layer bar */
.orch-layer { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 15px 16px; border-radius: 14px; background: var(--grad); color: #fff; box-shadow: var(--sh-blue); position: relative; }
.orch-layer img { height: 22px; width: auto; filter: brightness(0) invert(1); flex: none; }
.orch-layer .ol-tx { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.orch-layer .ol-sub { display: inline-block; font-size: 10.5px; opacity: .9; font-weight: 500; line-height: 1.5; margin-top: 1px; }
.orch-out { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.orch-out span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); }
.orch-out span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
@media (max-width: 520px) {
  .orch-wall { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   v15 — hero copy hierarchy, COD note, clean 3-col footer
   ============================================================ */
.hero-centered .hero-sub2 { margin: 8px auto 0; max-width: 56ch; text-align: center; color: var(--ink-mute); font-size: clamp(14px, 1.3vw, 16px); font-weight: 500; }
.hero-centered .hero-approve { margin: 14px auto 0; max-width: 60ch; text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); }
/* COD approval microcopy under the payment methods */
.co3-cod { font-size: 10px; line-height: 1.45; color: var(--ink-mute); margin-top: 7px; text-align: center; }
/* footer: clean Company / Legal / Contact (brand + 3 cols) */
.footer-top { grid-template-columns: 1.7fr 1.1fr 1.2fr 1fr; }
.fc-sub { color: var(--ink-faint); font-weight: 400; font-size: 12px; }
.fcol a .fc-sub { transition: color .2s; }
@media (max-width: 1000px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: span 3; }
}
@media (max-width: 620px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}