/* ============================================================
   TRANXACT — site design system  (light / brand edition)
   Display: Instrument Serif · Body: Manrope · Figures: IBM Plex Mono
   Palette derived from the TRANXACT logo: navy + red on white.
   Single committed light theme — every surface explicitly painted.
   ============================================================ */
:root {
  /* brand navy (primary) */
  --brand: #1c1e8f;
  --brand-deep: #14166b;
  --brand-bright: #3a40d8;
  --brand-soft: #edeefb;
  --brand-soft-2: #e3e4f7;

  /* brand red (accent) */
  --red: #e0263a;
  --red-deep: #c11d2f;
  --red-soft: #fdecee;

  /* neutrals — cool with a faint navy bias */
  --paper: #ffffff;
  --paper-alt: #f6f7fc;
  --paper-alt-2: #eef0f8;
  --ink: #14163a;          /* darkest heading ink (navy-black) */
  --text: #1b1e30;
  --muted: #59617d;
  --faint: #8b93ab;
  --line: #e6e9f3;
  --line-strong: #d3d8e8;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(20,22,58,.05), 0 4px 14px rgba(20,22,58,.05);
  --shadow: 0 2px 6px rgba(20,22,58,.07), 0 22px 50px rgba(20,22,58,.10);
  --shadow-lg: 0 10px 30px rgba(20,22,58,.14), 0 40px 90px rgba(20,22,58,.16);
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- type scale ----
     Display steps follow a 1.25 major third (19·24·30·37·46·58·72) so each
     heading is a fixed ratio from the next instead of an ad-hoc pixel value.
     Every fluid step interpolates over the SAME 390px→1280px viewport range,
     which is what keeps headings in proportion to one another at every width
     (mixed vw slopes are why they drifted apart mid-viewport before). */
  --fs-6xs: 10px;
  --fs-4xs: 11px;
  --fs-3xs: 12px;
  --fs-2xs: 13px;
  --fs-xs:  14px;
  --fs-sm:  15px;
  --fs-md:  16px;
  --fs-base: 17px;
  --fs-lg:  19px;
  --fs-xl:  21px;
  --fs-d5:  clamp(21px, 0.34vw + 19.7px, 24px);
  --fs-d4:  clamp(24px, 0.67vw + 21.4px, 30px);
  --fs-d3:  clamp(27px, 1.12vw + 22.6px, 37px);
  --fs-d2:  clamp(31px, 1.69vw + 24.4px, 46px);
  --fs-d1s: clamp(34px, 2.70vw + 23.5px, 58px);
  --fs-d1:  clamp(40px, 3.60vw + 26.0px, 72px);

  /* Leading tightens as type grows — one value for every heading was the
     other half of the proportion problem (1.06 is right at 72px, cramped at 24px). */
  --lh-d1: 1.02;
  --lh-d2: 1.08;
  --lh-d3: 1.16;
  --lh-d4: 1.22;
  --lh-body: 1.6;

  /* Optical tracking: large serif display needs negative, small caps positive. */
  --tr-d1: -.021em;
  --tr-d2: -.014em;
  --tr-d3: -.007em;
  --tr-caps: .14em;
  --maxw: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-base); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* The skip link is hidden by clipping, not by being parked off-canvas.
   `left: -999px` puts it 999px outside the left edge — harmless in a
   left-to-right page, where browsers ignore overflow on the inline-start side,
   but in Arabic and Urdu the inline start is the right, so those 999px became
   real scrollable width: drag the page sideways and you got a blank strip
   almost a screen wide. Clipping keeps the element exactly where it is. */
.skip { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; }
.skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; }
:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; border-radius: 4px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: var(--fs-d1); line-height: var(--lh-d1); letter-spacing: var(--tr-d1); }
h1 em { font-style: italic; color: var(--red); }
h2 { font-size: var(--fs-d2); line-height: var(--lh-d2); letter-spacing: var(--tr-d2); }
h2 em { font-style: italic; color: var(--red); }
h3 { font-size: var(--fs-d4); line-height: var(--lh-d4); letter-spacing: var(--tr-d3); }
.eyebrow { font-family: var(--sans); font-size: var(--fs-3xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--brand); margin: 0 0 18px; }
.eyebrow.gold { color: var(--red); }  /* legacy hook — now brand red */  /* legacy hook — now brand red */

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-md); padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; }
.btn-sm { padding: 10px 18px; font-size: var(--fs-xs); }
.btn-lg { padding: 17px 34px; font-size: var(--fs-base); }
.btn-primary { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; box-shadow: 0 6px 18px rgba(28,30,143,.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(28,30,143,.38); }
.btn-ghost { background: transparent; color: var(--brand-deep); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.btn-ghost.dark { color: var(--brand-deep); }
.btn-red { background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%); color: #fff; box-shadow: 0 6px 18px rgba(224,38,58,.24); }
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(224,38,58,.34); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- brand logo ----------
   The artwork is a transparent PNG (no baked-in white plate), so it sits on
   any surface. `flex: 0 0 auto` + `max-width: none` stop the nav's flex row
   from squeezing the mark to nothing on narrow screens — that squeeze is what
   made the logo look absent on phones. */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand picture { display: block; line-height: 0; }
.brand img { height: 34px; width: auto; max-width: none; flex: none; display: block; }
.brand.small img { height: 30px; }
@media (max-width: 820px) { .brand img { height: 31px; } .brand.small img { height: 28px; } }
@media (max-width: 560px) { .brand img, .brand.small img { height: 30px; } }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s ease, box-shadow .3s ease, border-color .3s; border-bottom: 1px solid transparent; background: rgba(255,255,255,.72); backdrop-filter: saturate(1.3) blur(8px); }
.nav.scrolled { background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.nav-links a:hover { color: var(--brand); }
.nav .btn-primary { margin-left: 4px; }
.lang-switch { margin-left: 12px; font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 600; color: var(--brand-deep); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 8px 12px; cursor: pointer; max-width: 140px; transition: border-color .15s; }
.lang-switch:hover { border-color: var(--brand); }
[dir=rtl] .lang-switch { margin-left: 0; margin-right: 12px; }
[dir=rtl] .nav-links { margin-left: 0; margin-right: auto; }
@media (max-width: 820px) { .nav-links { display: none; } .nav .btn-primary { margin-left: auto; } .lang-switch { max-width: 108px; } }
@media (max-width: 560px) {
  .nav-inner { padding: 10px 16px; gap: 10px; }
  .nav .btn-primary, .nav .btn-ghost { padding: 10px 14px; font-size: var(--fs-xs); }
  .lang-switch { max-width: 78px; min-width: 0; padding: 8px 9px; margin-left: 8px; }
  [dir=rtl] .lang-switch { margin-left: 0; margin-right: 8px; }
}

/* ---------- hero (light) ---------- */
.hero { position: relative; background: linear-gradient(180deg, #fbfcff 0%, #f4f6fd 100%); color: var(--text); overflow: hidden; padding: 124px 0 68px; border-bottom: 1px solid var(--line); }
.hero-glow { position: absolute; inset: 0; background: radial-gradient(44% 42% at 82% 4%, rgba(58,64,216,.12), transparent 70%), radial-gradient(38% 40% at 8% 108%, rgba(224,38,58,.07), transparent 70%); pointer-events: none; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(28,30,143,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(28,30,143,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(72% 62% at 50% 26%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(72% 62% at 50% 26%, #000 40%, transparent 100%); pointer-events: none; }
.hero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.hero h1 { max-width: 15ch; color: var(--brand-deep); }
.hero-lede { max-width: 60ch; margin: 18px 0 0; font-size: var(--fs-lg); color: var(--muted); line-height: 1.62; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dt { font-family: var(--serif); font-size: var(--fs-d2); line-height: 1; color: var(--brand); }
.hero-stats dd { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--muted); letter-spacing: .01em; }

/* ---------- band (light tint) ---------- */
.band { background: var(--brand-deep); color: #dfe1fb; }
.band-inner { padding: 20px 24px; display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
.band-label { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; color: #ff8a97; white-space: nowrap; }
.band-text { margin: 0; font-size: var(--fs-md); color: #c6c8f0; max-width: 80ch; }

/* ---------- sections ---------- */
.section { padding: 62px 0; }
.section-alt { background: var(--paper-alt); }
.section-head { max-width: 62ch; margin-bottom: 30px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-sub { font-size: var(--fs-lg); color: var(--muted); margin: 12px 0 0; }
.on-dark { color: var(--ink); }          /* legacy hook — now dark ink on light */
.on-dark-sub { color: var(--muted); }

/* ---------- modules grid ---------- */
.grid.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid.modules { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid.modules { grid-template-columns: 1fr; } }
.module { font-family: inherit; text-align: start; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease, border-color .2s; cursor: pointer; display: flex; flex-direction: column; }
.module:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-soft-2); }
.module:hover .mod-more { color: var(--red); gap: 10px; }
.mod-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-size: 22px; margin-bottom: 14px; }
.module h3 { color: var(--ink); margin-bottom: 8px; }
.module p { margin: 0; font-size: var(--fs-md); color: var(--muted); line-height: 1.55; }
.mod-more { margin-top: 12px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .02em; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; transition: color .18s, gap .18s; }

/* ---------- module detail modal ---------- */
.mod-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: flex-start; justify-content: center; padding: 5vh 20px; overflow-y: auto; }
.mod-modal.open { display: flex; }
.mod-backdrop { position: fixed; inset: 0; background: rgba(20,22,58,.5); backdrop-filter: blur(3px); animation: fade .2s ease; }
.mod-dialog { position: relative; z-index: 1; width: 100%; max-width: 760px; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .22s cubic-bezier(.2,.8,.3,1); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .mod-backdrop, .mod-dialog { animation: none; } }
.md-head { position: relative; padding: 28px 36px 22px; background: linear-gradient(135deg, var(--brand-soft) 0%, #f4f5fd 100%); border-bottom: 1px solid var(--line); }
.md-mark { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: var(--brand); color: #fff; font-size: 25px; margin-bottom: 16px; }
.md-head h2 { font-size: var(--fs-d3); line-height: var(--lh-d3); color: var(--brand-deep); }
.md-tag { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-md); max-width: 56ch; }
.md-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.7); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s; }
.md-close:hover { background: var(--red-soft); color: var(--red-deep); border-color: var(--red); }
.md-body { padding: 24px 36px 30px; }
@media (max-width: 560px) { .md-head { padding: 28px 22px 22px; } .md-body { padding: 24px 22px 30px; } }
.md-body h4 { font-family: var(--sans); font-weight: 800; font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 20px 0 10px; }
.md-body h4:first-child { margin-top: 0; }
.md-body p { color: var(--muted); font-size: var(--fs-md); line-height: 1.62; margin: 0 0 12px; }
.md-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
@media (max-width: 560px) { .md-feats { grid-template-columns: 1fr; } }
.md-feats li { position: relative; padding-left: 26px; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.md-feats li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; display: grid; place-items: center; }
.md-flow { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.md-flow li { position: relative; padding-left: 40px; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.md-flow li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 999px; background: var(--red-soft); color: var(--red-deep); font-family: var(--mono); font-size: 13px; font-weight: 500; display: grid; place-items: center; }
.md-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 0; }
.md-stat { flex: 1 1 140px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.md-stat dt { font-family: var(--serif); font-size: var(--fs-d4); color: var(--brand); line-height: 1; }
.md-stat dd { margin: 6px 0 0; font-size: var(--fs-2xs); color: var(--muted); }
.md-note { margin-top: 20px; padding: 16px 18px; background: var(--brand-soft); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--brand-deep); }
.md-cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- split feature ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.split.reverse .split-copy { order: 2; }
@media (max-width: 860px) { .split, .split.reverse { grid-template-columns: 1fr; gap: 36px; } .split.reverse .split-copy { order: 0; } }
.split-copy p { color: var(--muted); font-size: var(--fs-base); }
.split-copy h2 { margin-bottom: 18px; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--text); font-weight: 500; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; display: grid; place-items: center; }
.muted-note { font-size: var(--fs-sm) !important; color: var(--faint) !important; }

/* ledger card (light) */
.ledger-card { background: var(--paper); color: var(--text); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.lc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 9px 2px; font-size: var(--fs-xs); }
.lc-row span:nth-child(2), .lc-row span:nth-child(3) { min-width: 74px; text-align: right; }
.lc-head { color: var(--brand); font-family: var(--mono); font-size: var(--fs-4xs); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.lc-muted { color: var(--faint); font-family: var(--mono); font-size: var(--fs-3xs); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lc-bar { height: 1px; background: var(--line-strong); margin: 4px 0; }
.lc-total { font-weight: 700; color: var(--ink); }
.lc-total .mono { color: var(--brand); }

/* attention card (home 'it tells you what needs attention') */
.attn-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.attn-role { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.attn-item { font-size: var(--fs-sm); line-height: 1.4; padding: 13px 15px; border-radius: 10px; margin-bottom: 10px; border-left: 3px solid; }
.attn-item:last-child { margin-bottom: 0; }
.attn-item.red { background: var(--red-soft); border-color: var(--red); color: #7a1420; }
.attn-item.amber { background: #fdf4e3; border-color: #e0a83a; color: #7a5410; }
.attn-item.brand { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }

/* chat */
.chat { display: flex; flex-direction: column; gap: 14px; }
.chat-msg { padding: 16px 18px; border-radius: 16px; font-size: var(--fs-md); line-height: 1.5; max-width: 92%; }
.chat-msg.you { align-self: flex-end; background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; border-bottom-right-radius: 5px; }
.chat-msg.ai { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); }
.chat-tag { display: inline-block; font-family: var(--mono); font-size: var(--fs-4xs); letter-spacing: .1em; color: var(--red); margin-right: 8px; vertical-align: 1px; }

/* deploy section (soft brand tint, light) */
.section-dark { background: radial-gradient(90% 120% at 50% -10%, var(--brand-soft) 0%, var(--paper-alt) 60%); color: var(--text); border-block: 1px solid var(--line); }
.clouds { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 8px; }
.cloud-chip { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .02em; color: var(--brand-deep); border: 1px solid var(--line-strong); padding: 12px 22px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-sm); }
.deploy-cta { text-align: center; margin-top: 26px; }

/* final cta */
.cta-final { background: var(--brand-deep); padding: 62px 0; text-align: center; color: #fff; }
.cta-inner { max-width: 60ch; }
.cta-final h2 { margin-bottom: 16px; color: #fff; }
.cta-final h2 em { color: #ff9aa6; }
.cta-final p { color: #c6c8f0; font-size: var(--fs-lg); margin: 0 auto 24px; max-width: 54ch; }

/* footer (light) */
.foot { background: var(--paper-alt); color: var(--muted); padding: 36px 0; border-top: 1px solid var(--line); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.foot-tag { margin: 10px 0 0; font-size: var(--fs-2xs); color: var(--faint); font-family: var(--mono); letter-spacing: .04em; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.foot-links a:hover { color: var(--brand); }
.foot-legal { width: 100%; margin: 8px 0 0; font-size: var(--fs-2xs); color: var(--faint); }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   ASK assistant widget
   ============================================================ */
.ask-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 800; font-size: var(--fs-sm); color: #fff; background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%); border: none; border-radius: 999px; padding: 13px 22px; cursor: pointer; box-shadow: 0 8px 22px rgba(28,30,143,.34); transition: transform .15s ease, box-shadow .2s ease, opacity .15s; }
.ask-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(28,30,143,.42); }
.ask-launcher .ask-spark { color: var(--gold-bright, #e6c469); }
.ask-launcher.hidden { opacity: 0; pointer-events: none; }

.ask-panel { position: fixed; right: 22px; bottom: 22px; z-index: 81; width: 370px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 44px); background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden; }
.ask-panel.open { display: flex; animation: askpop .22s cubic-bezier(.2,.8,.3,1); }
@keyframes askpop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ask-panel.open { animation: none; } }
.ask-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; }
.ask-title { font-family: var(--sans); font-weight: 800; font-size: var(--fs-base); letter-spacing: .02em; }
.ask-sub { font-size: var(--fs-2xs); color: rgba(255,255,255,.8); margin-left: 8px; }
.ask-close { background: rgba(255,255,255,.14); border: none; color: #fff; width: 30px; height: 30px; border-radius: 999px; font-size: 20px; line-height: 1; cursor: pointer; }
.ask-close:hover { background: rgba(255,255,255,.26); }
.ask-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--paper-alt); }
.ask-b { align-self: flex-start; max-width: 90%; background: var(--paper); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 11px 14px; box-shadow: var(--shadow-sm); }
.ask-b p { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text); }
.ask-b .ask-link { display: inline-block; margin-top: 8px; font-weight: 700; font-size: var(--fs-xs); color: var(--brand); }
.ask-b .ask-link:hover { color: var(--red); }
.ask-u { align-self: flex-end; max-width: 90%; background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: var(--fs-xs); line-height: 1.45; }
.ask-composer { border-top: 1px solid var(--line); padding: 12px; background: var(--paper); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.ask-chip { font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); color: var(--brand-deep); background: var(--brand-soft); border: 1px solid var(--brand-soft-2); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.ask-chip:hover { background: #fff; border-color: var(--brand); }
.ask-input { display: flex; gap: 8px; }
.ask-input input { flex: 1; font-family: var(--sans); font-size: var(--fs-xs); padding: 10px 13px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--paper); }
.ask-input input:focus { border-color: var(--brand); outline: none; }
.ask-input button { flex: 0 0 auto; width: 40px; border: none; border-radius: 999px; background: var(--brand); color: #fff; font-size: 17px; cursor: pointer; }
.ask-input button:hover { background: var(--brand-deep); }
.ask-form { display: flex; flex-direction: column; gap: 6px; }
.ask-fl { font-weight: 700; font-size: var(--fs-2xs); color: var(--ink); margin-top: 4px; }
.ask-fl .ask-note { font-weight: 500; font-size: var(--fs-3xs); color: var(--faint); margin-left: 6px; }
.ask-form input { font-family: var(--sans); font-size: var(--fs-xs); padding: 9px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); }
.ask-form input:focus { border-color: var(--brand); outline: none; }
.ask-frow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ask-back { background: none; border: none; color: var(--muted); font-weight: 700; font-size: var(--fs-2xs); cursor: pointer; }
.ask-back:hover { color: var(--brand); }
.ask-err { font-size: var(--fs-2xs); font-weight: 600; color: transparent; }
.ask-err.bad { color: var(--red-deep); }
@media (max-width: 480px) { .ask-panel { right: 10px; bottom: 10px; height: calc(100vh - 20px); } .ask-launcher { right: 14px; bottom: 14px; } }

/* "Know more" — progressive disclosure via native <details> */
.km { margin-top: 20px; }
.km > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs); color: var(--brand); padding: 9px 17px; border: 1.5px solid var(--line-strong); border-radius: 999px; transition: border-color .15s, color .15s, background .15s; }
.km > summary::-webkit-details-marker { display: none; }
.km > summary::after { content: "⌄"; font-size: 15px; line-height: 1; transition: transform .2s ease; }
.km[open] > summary::after { transform: rotate(180deg); }
.km > summary:hover { border-color: var(--brand); background: var(--brand-soft); }
.km[open] > summary { color: var(--brand-deep); }
.km-body { margin-top: 16px; animation: kmfade .25s ease; }
.km-body > :first-child { margin-top: 0; }
.km-body p { color: var(--muted); }
@keyframes kmfade { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .km-body { animation: none; } }
.km-center { max-width: 62ch; margin: 18px auto 0; text-align: center; }
.km-center .km-body { text-align: left; }

/* ============================================================
   Insights / blog
   ============================================================ */
.insights-teaser { background: var(--paper-alt); }
.teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
@media (max-width: 900px) { .teaser-grid { grid-template-columns: 1fr; } }
.blog-hero { background: linear-gradient(180deg, #fbfcff 0%, #f4f6fd 100%); padding: 112px 0 36px; border-bottom: 1px solid var(--line); }
.blog-hero h1 { font-size: var(--fs-d1s); line-height: var(--lh-d2); color: var(--brand-deep); max-width: 16ch; }
.blog-hero p { color: var(--muted); max-width: 60ch; margin: 14px 0 0; font-size: var(--fs-lg); }
.blog-list { padding: 34px 0 62px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; text-align: left; cursor: pointer; font-family: inherit; transition: transform .18s ease, box-shadow .2s ease, border-color .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-soft-2); }
.post-thumb { height: 128px; position: relative; overflow: hidden; }
.post-thumb canvas { display: block; width: 100%; height: 100%; }
.post-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-kicker { font-family: var(--mono); font-size: var(--fs-4xs); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.post-kicker .dotsep { color: var(--line-strong); }
.post-card h3 { font-size: var(--fs-d5); color: var(--ink); line-height: var(--lh-d4); margin-bottom: 8px; }
.post-card .excerpt { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin: 0; }
.post-meta { margin-top: 16px; font-size: var(--fs-2xs); color: var(--faint); display: flex; gap: 10px; align-items: center; }
.post-read { margin-top: 14px; font-weight: 700; font-size: var(--fs-xs); color: var(--brand); display: inline-flex; gap: 6px; align-items: center; transition: color .18s, gap .18s; }
.post-card:hover .post-read { color: var(--red); gap: 10px; }

/* whitepapers */
.wp-list { padding: 34px 0 62px; }
.wp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .wp-grid { grid-template-columns: 1fr; } }
.wp-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px 26px 24px; }
.wp-kicker { font-family: var(--mono); font-size: var(--fs-4xs); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin: 0 0 10px; }
.wp-card h3 { font-size: var(--fs-d4); color: var(--ink); line-height: var(--lh-d4); margin-bottom: 6px; }
.wp-sub { font-size: var(--fs-sm); color: var(--brand-deep); font-weight: 600; margin: 0 0 12px; }
.wp-abstract { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
.wp-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.wp-topic { font-size: var(--fs-3xs); font-weight: 600; color: var(--brand-deep); background: var(--brand-soft); border-radius: 999px; padding: 4px 11px; }
.wp-form { margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; }
.wp-gate { font-size: var(--fs-2xs); color: var(--muted); margin: 0 0 12px; }
.wp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wp-fields .wp-company { grid-column: 1 / -1; }
@media (max-width: 460px) { .wp-fields { grid-template-columns: 1fr; } }
.wp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.wp-dl { font-weight: 700; font-size: var(--fs-xs); color: var(--brand); }
.wp-dl:hover { color: var(--red); }
.wp-msg { font-size: var(--fs-2xs); font-weight: 600; }
.wp-msg.err { color: var(--red-deep); }
.wp-msg.ok { color: var(--brand); }

/* article view */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 108px 24px 62px; }
.article-back { font-weight: 700; font-size: var(--fs-xs); color: var(--brand); display: inline-flex; gap: 7px; align-items: center; margin-bottom: 26px; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.article-back:hover { color: var(--red); }
.article-kicker { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.article-wrap h1 { font-size: var(--fs-d1s); line-height: var(--lh-d2); color: var(--brand-deep); margin: 14px 0 16px; }
.article-meta { color: var(--faint); font-size: var(--fs-xs); border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.article-lede { font-size: var(--fs-xl); line-height: 1.5; color: var(--text); margin: 26px 0 8px; font-weight: 500; }
.article-body h2 { font-family: var(--serif); font-size: var(--fs-d3); line-height: var(--lh-d3); color: var(--ink); margin: 30px 0 10px; }
.article-body h3 { font-family: var(--sans); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--brand); margin: 30px 0 10px; }
.article-body p { color: var(--text); font-size: var(--fs-base); line-height: 1.72; margin: 0 0 18px; }
.article-body ul, .article-body ol { color: var(--text); font-size: var(--fs-base); line-height: 1.7; padding-left: 22px; margin: 0 0 18px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { margin: 24px 0; padding: 16px 24px; border-left: 3px solid var(--red); background: var(--paper-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--serif); font-size: var(--fs-d5); line-height: 1.4; color: var(--brand-deep); }
.article-body .callout { margin: 26px 0; padding: 20px 24px; background: var(--brand-soft); border-radius: var(--radius-sm); }
.article-body .callout strong { color: var(--brand-deep); }
.article-body code { font-family: var(--mono); font-size: .88em; background: var(--paper-alt-2); padding: 2px 6px; border-radius: 5px; color: var(--brand-deep); }
.article-foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.article-foot p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* ============================================================
   Configurator page
   ============================================================ */
.cfg-hero { background: linear-gradient(180deg, #fbfcff 0%, #f0f2fb 100%); color: var(--text); padding: 106px 0 34px; border-bottom: 1px solid var(--line); }
.cfg-hero h1 { font-size: var(--fs-d1s); line-height: var(--lh-d2); color: var(--brand-deep); }
.cfg-hero p { color: var(--muted); max-width: 60ch; margin: 14px 0 0; font-size: var(--fs-lg); }

.cfg-layout { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: start; padding: 30px 0 62px; }
@media (max-width: 960px) { .cfg-layout { grid-template-columns: 1fr; } }
/* Estimate + second column appear only when Advanced configuration is open */
.cfg-layout:not(.adv-open) { grid-template-columns: 1fr; }
.cfg-layout:not(.adv-open) > aside { display: none; }

/* Advanced configuration disclosure */
.adv-config { margin: 0 0 24px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.adv-config > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 3px; padding: 18px 22px; transition: background .15s; }
.adv-config > summary::-webkit-details-marker { display: none; }
.adv-config > summary:hover { background: var(--paper-alt); }
.adv-config .adv-title { font-family: var(--sans); font-weight: 800; font-size: var(--fs-md); color: var(--brand-deep); display: flex; align-items: center; gap: 8px; }
.adv-config .adv-title::before { content: "⚙"; color: var(--brand); }
.adv-config .adv-title::after { content: "⌄"; margin-left: auto; font-size: 16px; color: var(--faint); transition: transform .2s ease; }
.adv-config[open] .adv-title::after { transform: rotate(180deg); }
.adv-config .adv-note { font-size: var(--fs-2xs); color: var(--muted); }
.adv-config .adv-panel { margin: 0; border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 22px 24px; margin-bottom: 18px; }
.panel > h2 { font-family: var(--serif); font-size: var(--fs-d4); line-height: var(--lh-d4); color: var(--ink); margin-bottom: 4px; }
.panel > .p-sub { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 16px; }
.step-tag { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); font-weight: 500; }

/* provider choice */
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 520px) { .choice-row { grid-template-columns: 1fr; } }
.choice { position: relative; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 16px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s, box-shadow .15s; background: var(--paper); }
.choice:hover { border-color: var(--brand); }
.choice input { position: absolute; opacity: 0; }
.choice.sel { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.choice .c-name { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.choice .c-note { font-size: var(--fs-2xs); color: var(--muted); margin-top: 3px; }

/* size grid */
.field { margin-top: 18px; }
.field > label.flabel { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 10px; color: var(--ink); }
.size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 680px) { .size-grid { grid-template-columns: repeat(2, 1fr); } }
.size { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 13px 12px; cursor: pointer; transition: border-color .15s, background .15s; background: var(--paper); }
.size:hover { border-color: var(--brand); }
.size.sel { border-color: var(--brand); background: var(--brand-soft); }
.size .s-label { font-weight: 700; font-size: var(--fs-xs); color: var(--ink); }
.size .s-spec { font-size: var(--fs-3xs); color: var(--muted); margin-top: 2px; }
.size .s-price { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--brand); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* range */
.range-wrap { display: flex; align-items: center; gap: 16px; }
.range-wrap input[type=range] { flex: 1; accent-color: var(--brand); }
.range-val { font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--ink); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }

select, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password] {
  width: 100%; font-family: var(--sans); font-size: var(--fs-sm); color: var(--text);
  padding: 11px 13px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); transition: border-color .15s;
}
select:focus, input:focus { border-color: var(--brand); outline: none; }

/* questionnaire */
.q-section { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
.q-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.q-section h3 { font-family: var(--serif); font-size: var(--fs-xl); color: var(--ink); margin-bottom: 4px; }
.q-section .q-count { font-family: var(--mono); font-size: var(--fs-4xs); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.q-item { margin-top: 13px; }
.q-item .q-label { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 7px; color: var(--text); }
.pri { font-size: var(--fs-4xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.pri.ess { background: var(--brand); color: #fff; }
.pri.ref { background: transparent; color: var(--faint); border: 1px solid var(--line-strong); }
.pri.cond { background: var(--red-soft); color: var(--red-deep); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: var(--fs-xs); user-select: none; transition: border-color .15s, background .15s; }
.check input { accent-color: var(--brand); }
.check.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.other-fill { margin-top: 10px; }

/* "Will fill later" / "Does not apply" quick-marks */
.q-mark { display: flex; gap: 7px; margin-top: 9px; }
.q-mark button { font-family: var(--sans); font-size: var(--fs-3xs); font-weight: 600; color: var(--muted); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.q-mark button:hover { border-color: var(--brand); color: var(--brand); }
.q-mark button.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }
.q-item.marked .checks, .q-item.marked > input[data-qid], .q-item.marked > select[data-qid], .q-item.marked .other-fill { opacity: .4; pointer-events: none; }
.q-item.q-missing > .q-label { color: var(--red-deep); }
.q-item.q-missing > input[data-qid], .q-item.q-missing > select[data-qid] { border-color: var(--red); }
.q-item.q-missing .checks .check { border-color: var(--red); }

/* sticky estimate (light) */
.estimate { position: sticky; top: 92px; background: var(--paper); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; border: 1px solid var(--line); }
.estimate h3 { font-family: var(--sans); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); font-weight: 800; }
.est-num { font-family: var(--serif); font-size: var(--fs-d2); line-height: 1; margin: 12px 0 2px; color: var(--brand-deep); }
.est-num small { font-family: var(--sans); font-size: var(--fs-md); color: var(--muted); font-weight: 600; }
.est-annual { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--muted); }
.est-lines { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.est-lines li { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }
.est-lines li span.v { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.est-config { margin: 16px 0 0; font-size: var(--fs-2xs); color: var(--muted); line-height: 1.5; }
.est-note { margin-top: 16px; font-size: var(--fs-3xs); color: var(--faint); border-top: 1px solid var(--line); padding-top: 12px; }

/* contact + submit */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-grid .full { grid-column: 1 / -1; }
.field-inline label { display: block; font-weight: 600; font-size: var(--fs-xs); margin-bottom: 6px; color: var(--text); }
.submit-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.form-msg { font-size: var(--fs-xs); font-weight: 600; }
.form-msg.err { color: var(--red-deep); }
.form-msg.ok { color: var(--brand); }

/* success */
.success { background: var(--paper); border: 1px solid var(--brand); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); text-align: center; }
.success .ref { font-family: var(--mono); font-size: var(--fs-d4); color: var(--brand-deep); background: var(--brand-soft); display: inline-block; padding: 8px 18px; border-radius: 10px; margin: 12px 0 20px; letter-spacing: .04em; }
.success h2 { font-family: var(--serif); font-size: var(--fs-d3); line-height: var(--lh-d3); color: var(--ink); }
.success p { color: var(--muted); max-width: 52ch; margin: 8px auto 0; }
.success .success-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.hidden { display: none !important; }

/* ============================================================
   Front-page promo for the operations game (/game)
   ============================================================ */
.game-promo { padding: 56px 0; }
.gp-card { display: grid; grid-template-columns: 1.08fr .92fr; gap: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--paper); }
@media (max-width: 900px) { .gp-card { grid-template-columns: 1fr; } }
.gp-copy { padding: 32px 34px 34px; }
@media (max-width: 560px) { .gp-copy { padding: 30px 24px 32px; } }
.gp-copy h2 { color: var(--brand-deep); }
.gp-lede { margin: 14px 0 0; font-family: var(--serif); font-size: var(--fs-d5); line-height: var(--lh-d4); color: var(--red-deep); }
.gp-body { margin: 14px 0 0; font-size: var(--fs-md); color: var(--muted); line-height: 1.62; max-width: 54ch; }
.gp-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.gp-nosign { font-size: var(--fs-2xs); color: var(--faint); }

.gp-board { padding: 32px 32px 34px; background: linear-gradient(165deg, var(--brand-deep) 0%, #101253 100%); color: #fff; }
@media (max-width: 560px) { .gp-board { padding: 30px 24px 32px; } }
.gp-boardtitle { margin: 0 0 22px; font-family: var(--mono); font-size: var(--fs-6xs); letter-spacing: .14em; text-transform: uppercase; color: #9aa0e8; }
.gp-row { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; }
.gp-lbl { font-size: var(--fs-2xs); color: #c6c8f0; }
.gp-bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,.13); overflow: hidden; }
.gp-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff6b7d, var(--red)); }
.gp-row.good .gp-bar i { background: linear-gradient(90deg, #7ee0a4, #35c47a); }
.gp-val { font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.gp-notes { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 11px; }
.gp-notes li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-2xs); color: #c6c8f0; line-height: 1.5; }
.gp-tick { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 999px; background: rgba(126,224,164,.18); color: #7ee0a4; font-size: var(--fs-6xs); display: grid; place-items: center; margin-top: 1px; }
.gp-fine { margin: 20px 0 0; font-size: var(--fs-6xs); color: #7f86cf; font-style: italic; }

/* ============================================================
   Cookie consent banner
   ============================================================ */
.ck-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: 14px; display: flex; justify-content: center; pointer-events: none; }
.ck { pointer-events: auto; width: min(880px, 100%); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 18px 26px; align-items: start; animation: ckin .22s ease; }
@keyframes ckin { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .ck { animation: none; } }
@media (max-width: 780px) { .ck { grid-template-columns: 1fr; padding: 18px; } }

.ck-title { margin: 0 0 6px; font-family: var(--serif); font-size: var(--fs-d5); line-height: var(--lh-d4); color: var(--ink); }
.ck-body { margin: 0; font-size: var(--fs-2xs); color: var(--muted); line-height: 1.55; max-width: 68ch; }

.ck-prefs { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.ck-prefs.hidden { display: none; }
.ck-row { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.ck-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand); flex: 0 0 auto; }
.ck-row input:disabled { opacity: .55; cursor: not-allowed; }
.ck-row b { display: block; font-size: var(--fs-2xs); color: var(--ink); }
.ck-desc { display: block; margin-top: 2px; font-size: var(--fs-6xs); color: var(--muted); line-height: 1.5; }

.ck-acts { display: flex; flex-direction: column; gap: 9px; align-items: stretch; min-width: 190px; }
@media (max-width: 780px) { .ck-acts { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.ck-acts .btn { justify-content: center; }
.ck-link { background: none; border: none; padding: 4px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-6xs); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: center; }
.ck-link:hover { color: var(--brand); }

/* ============================================================
   Mobile navigation
   Below 820px the links were hidden with no way to reach them. The burger
   exposes them; it is labelled "Menu" rather than being a bare glyph, because
   an unlabelled hamburger is exactly the kind of thing people miss.
   ============================================================ */
.nav-burger { display: none; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-2xs); color: var(--brand-deep); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; margin-left: auto; cursor: pointer; transition: border-color .15s, color .15s; }
.nav-burger:hover { border-color: var(--brand); color: var(--brand); }
.nav-bars { display: inline-grid; gap: 3px; width: 14px; }
.nav-bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-open .nav-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-bars i:nth-child(2) { opacity: 0; }
.nav-open .nav-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-bars i { transition: none; } }

.nav-panel { display: none; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); padding: 10px 16px 16px; }
.nav-panel-links { display: flex; flex-direction: column; }
.nav-panel-links a { padding: 13px 4px; font-size: var(--fs-md); font-weight: 700; color: var(--brand-deep); border-bottom: 1px solid var(--line); }
.nav-panel-links a:last-child { border-bottom: none; }
.nav-panel-links a:hover { color: var(--red); }
.nav-panel-links a[aria-current] { color: var(--red); }
.nav-panel-lang { margin-top: 12px; }
.nav-panel-lang .lang-switch { max-width: none; width: 100%; }

@media (max-width: 820px) {
  .nav-burger { display: inline-flex; }
  .nav .btn-primary { margin-left: 10px; }
  .nav-panel:not([hidden]) { display: block; }
}
/* the wordmark stays on phones — see the logo note below */
@media (max-width: 430px) {
  .nav-burger-t { display: none; }
  .nav-burger { padding: 9px 11px; }
}

/* ---------- logo on small screens ----------
   The nav used to swap the full lockup for the bare hexagon under 560px, which
   left phones with no "TRANXACT" anywhere on the page. The wordmark now stays;
   these steps buy back the width it needs from the surrounding controls. */
@media (max-width: 560px) {
  .brand img, .brand.small img { height: 27px; }
  .nav-inner { gap: 8px; }
  .nav .btn-primary { padding: 9px 12px; font-size: var(--fs-2xs); }
}
@media (max-width: 430px) {
  .brand img, .brand.small img { height: 25px; }
  .nav-inner { padding: 9px 12px; gap: 6px; }
  .nav .btn-primary { padding: 8px 11px; font-size: var(--fs-3xs); }
}
@media (max-width: 360px) {
  .brand img, .brand.small img { height: 23px; }
  .nav .btn-primary { padding: 7px 9px; }
}

/* ============================================================
   Revenue-linked pricing note (configurator)
   ============================================================ */
.rev-note { margin-top: 18px; background: linear-gradient(150deg, var(--brand-soft) 0%, #f6f7fd 100%); border: 1px solid var(--brand-soft-2); border-radius: var(--radius); padding: 22px 24px; }
.rev-kicker { margin: 0 0 6px; font-family: var(--mono); font-size: var(--fs-6xs); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.rev-note h3 { font-family: var(--serif); font-size: var(--fs-d5); line-height: var(--lh-d4); color: var(--brand-deep); margin: 0 0 10px; }
.rev-note p { margin: 0 0 10px; font-size: var(--fs-2xs); color: var(--muted); line-height: 1.6; max-width: 72ch; }
.rev-note p:last-child { margin-bottom: 0; }
.rev-note b { color: var(--brand-deep); }
.rev-fine { font-size: var(--fs-6xs) !important; color: var(--faint) !important; }

/* ============================================================
   "We grow together" pricing band (home)
   ============================================================ */
.pricing-band { background: var(--brand-deep); color: #fff; padding: 58px 0; }
.pb-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items: center; }
@media (max-width: 900px) { .pb-inner { grid-template-columns: 1fr; gap: 34px; } }
.pricing-band .eyebrow { color: #ff9aa6; }
.pricing-band h2 { color: #fff; }
.pricing-band h2 em { color: #ff9aa6; }
.pb-lede { margin: 18px 0 0; font-size: var(--fs-lg); color: #c6c8f0; line-height: 1.6; max-width: 54ch; }
.pb-body { margin: 14px 0 0; font-size: var(--fs-2xs); color: #9aa0e8; line-height: 1.65; max-width: 58ch; }
.pb-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pb-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.34); }
.pb-cta .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }

.pb-chart { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 24px 26px; }
.pb-chart h3 { font-family: var(--mono); font-weight: 400; font-size: var(--fs-6xs); letter-spacing: .12em; text-transform: uppercase; color: #9aa0e8; margin: 0 0 18px; }
.pb-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.pb-row .yr { font-family: var(--mono); font-size: var(--fs-6xs); color: #c6c8f0; }
.pb-pair { display: flex; flex-direction: column; gap: 5px; }
.pb-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.pb-track i { display: block; height: 100%; border-radius: 999px; }
.pb-track.rev i { background: linear-gradient(90deg, #7ee0a4, #35c47a); }
.pb-track.fee i { background: linear-gradient(90deg, #8f95f0, #5c63e0); }
.pb-key { display: flex; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: var(--fs-6xs); color: #9aa0e8; }
.pb-key span { display: inline-flex; align-items: center; gap: 6px; }
.pb-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pb-note { margin: 16px 0 0; font-size: var(--fs-6xs); color: #7f86cf; font-style: italic; line-height: 1.5; }

/* ============================================================
   Density pass — tighten vertical rhythm further on smaller screens.
   The desktop values above were reduced roughly 30%; below the tablet
   breakpoint the same sections were still spending most of the screen on
   empty space, so they step down again.
   ============================================================ */
@media (max-width: 860px) {
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 22px; }
  .hero { padding: 104px 0 48px; }
  .hero-stats { gap: 26px; margin-top: 26px; padding-top: 18px; }
  .cta-final { padding: 46px 0; }
  .pricing-band { padding: 44px 0; }
  .game-promo { padding: 40px 0; }
  .blog-hero, .feat-hero, .cfg-hero { padding-top: 96px; padding-bottom: 26px; }
  .blog-list, .wp-list { padding: 26px 0 44px; }
  .cfg-layout { padding: 22px 0 44px; }
  .foot { padding: 28px 0; }
}

/* ============================================================
   Bi-directional layout (Arabic, Urdu)
   ------------------------------------------------------------
   Two separate problems were showing up as "extra white space" in Arabic:

   1. Physical offsets. Tick markers, quote rules and close buttons were
      pinned with `left:` / `border-left:` while their text flowed from the
      right, which parked the marker on the far side of the box and left a
      wide empty gutter beside every list item.
   2. Horizontal overflow. Any element overhanging the inline edge grew the
      scroll area, so dragging the page sideways revealed a blank strip.
      `overflow-x: clip` bounds the page without creating a scroll container
      (unlike `hidden`), so `position: sticky` keeps working. It is scoped to
      RTL on purpose — the LTR pages do not have the overhang, and there is no
      reason to put their sticky elements anywhere near an overflow change.
   ============================================================ */
html[dir=rtl], html[dir=rtl] body { overflow-x: clip; }

/* markers and rules follow the writing direction */
.ticks li, .md-feats li, .md-flow li { padding-left: 0; }
.ticks li { padding-inline-start: 30px; }
.md-feats li { padding-inline-start: 26px; }
.md-flow li { padding-inline-start: 40px; }
.ticks li::before, .md-feats li::before, .md-flow li::before { left: auto; inset-inline-start: 0; }
.attn-item { border-left: none; border-inline-start: 3px solid; }
.article-body blockquote { border-left: none; border-inline-start: 3px solid var(--red); border-radius: 0; border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.article-body ul, .article-body ol { padding-left: 0; padding-inline-start: 22px; }
.md-close { right: auto; inset-inline-end: 18px; }
.lc-row span:nth-child(2), .lc-row span:nth-child(3) { text-align: end; }
.range-val { text-align: end; }
.post-card { text-align: start; }
.km-center .km-body { text-align: start; }
.chat-tag { margin-right: 0; margin-inline-end: 8px; }
.ask-sub { margin-left: 0; margin-inline-start: 8px; }
.ask-fl .ask-note { margin-left: 0; margin-inline-start: 6px; }
.nav .btn-primary { margin-left: 0; margin-inline-start: 4px; }
.nav-burger { margin-left: 0; margin-inline-start: auto; }
.adv-config .adv-title::after { margin-left: 0; margin-inline-start: auto; }

/* the assistant dock belongs on the leading edge in RTL */
[dir=rtl] .ask-launcher, [dir=rtl] .ask-panel { right: auto; left: 22px; }
@media (max-width: 480px) {
  [dir=rtl] .ask-panel { left: 10px; right: auto; }
  [dir=rtl] .ask-launcher { left: 14px; right: auto; }
}
[dir=rtl] .ask-b { border-radius: 14px 14px 4px 14px; }
[dir=rtl] .ask-u { border-radius: 14px 14px 14px 4px; }
[dir=rtl] .chat-msg.you { border-bottom-right-radius: 16px; border-bottom-left-radius: 5px; }
[dir=rtl] .chat-msg.ai { border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
[dir=rtl] .gp-bar i, [dir=rtl] .pb-track i, [dir=rtl] .bud .track .fill, [dir=rtl] .gauge .g { transform-origin: right; }

/* mirrored arrow glyphs — "→" points the wrong way in a right-to-left line */
[dir=rtl] .mod-more span[aria-hidden], [dir=rtl] .post-read span[aria-hidden] { display: inline-block; transform: scaleX(-1); }

/* ============================================================
   Scripts other than Latin
   ------------------------------------------------------------
   Instrument Serif has no Devanagari/Bengali/Tamil/Kannada/Arabic coverage, so
   those languages fell back to a system face whose ascenders and descenders are
   much taller — at the display leading of 1.02 the matras of one line landed on
   the line below. Indic and Arabic text gets its own stack, looser leading and
   no negative tracking (which was also pulling conjuncts into each other).
   ============================================================ */
html[lang=hi], html[lang=mr], html[lang=bn], html[lang=ta], html[lang=kn],
html[lang=ar], html[lang=ur], html[lang=ja], html[lang=ko], html[lang=zh] {
  --lh-d1: 1.34;
  --lh-d2: 1.34;
  --lh-d3: 1.36;
  --lh-d4: 1.4;
  --lh-body: 1.75;
  --tr-d1: 0;
  --tr-d2: 0;
  --tr-d3: 0;
  --tr-caps: .04em;
}
html[lang=hi] body, html[lang=mr] body, html[lang=bn] body,
html[lang=ta] body, html[lang=kn] body, html[lang=ur] body, html[lang=ar] body {
  --serif: "Noto Serif Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Kannada", "Noto Naskh Arabic", "Segoe UI", system-ui, serif;
  --sans: "Noto Sans Devanagari", "Nirmala UI", "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Kannada", "Noto Naskh Arabic", "Segoe UI", Manrope, system-ui, sans-serif;
}

/* Anything set solid (line-height: 1) clips these scripts outright. */
html[lang=hi] .hero-stats dt, html[lang=mr] .hero-stats dt, html[lang=bn] .hero-stats dt,
html[lang=ta] .hero-stats dt, html[lang=kn] .hero-stats dt, html[lang=ur] .hero-stats dt, html[lang=ar] .hero-stats dt,
html[lang=hi] .md-stat dt, html[lang=mr] .md-stat dt, html[lang=bn] .md-stat dt,
html[lang=ta] .md-stat dt, html[lang=kn] .md-stat dt, html[lang=ur] .md-stat dt, html[lang=ar] .md-stat dt,
html[lang=hi] .est-num, html[lang=mr] .est-num, html[lang=bn] .est-num,
html[lang=ta] .est-num, html[lang=kn] .est-num, html[lang=ur] .est-num, html[lang=ar] .est-num,
html[lang=hi] .kpi .kv, html[lang=mr] .kpi .kv, html[lang=bn] .kpi .kv,
html[lang=ta] .kpi .kv, html[lang=kn] .kpi .kv, html[lang=ur] .kpi .kv, html[lang=ar] .kpi .kv {
  line-height: 1.45;
}

/* Headings are the worst case: display sizes, tight leading, balanced wrapping.
   `text-wrap: balance` also mis-measures these scripts, so it is dropped. */
html[lang=hi] h1, html[lang=mr] h1, html[lang=bn] h1, html[lang=ta] h1, html[lang=kn] h1, html[lang=ur] h1, html[lang=ar] h1,
html[lang=hi] h2, html[lang=mr] h2, html[lang=bn] h2, html[lang=ta] h2, html[lang=kn] h2, html[lang=ur] h2, html[lang=ar] h2,
html[lang=hi] h3, html[lang=mr] h3, html[lang=bn] h3, html[lang=ta] h3, html[lang=kn] h3, html[lang=ur] h3, html[lang=ar] h3 {
  text-wrap: pretty;
  overflow-wrap: break-word;
  padding-bottom: .08em;      /* room for the descenders on the last line */
}

/* Fixed-height demo and card frames need slack once the text is longer. */
html[lang=hi] .demo-body, html[lang=mr] .demo-body, html[lang=bn] .demo-body,
html[lang=ta] .demo-body, html[lang=kn] .demo-body, html[lang=ur] .demo-body, html[lang=ar] .demo-body,
html[lang=ru] .demo-body, html[lang=de] .demo-body { min-height: 0; }
html[lang=hi] .radar-stage, html[lang=mr] .radar-stage, html[lang=bn] .radar-stage,
html[lang=ta] .radar-stage, html[lang=kn] .radar-stage, html[lang=ur] .radar-stage, html[lang=ar] .radar-stage,
html[lang=ru] .radar-stage, html[lang=de] .radar-stage { height: 200px; }
html[lang=hi] .i18n, html[lang=mr] .i18n, html[lang=bn] .i18n,
html[lang=ta] .i18n, html[lang=kn] .i18n, html[lang=ur] .i18n, html[lang=ar] .i18n { height: 210px; }

/* The nav is a single flex row; longer translated labels pushed it wider than
   the bar. Letting the link row wrap keeps it inside. */
html:not([lang=en]) .nav-links { flex-wrap: wrap; row-gap: 4px; column-gap: 18px; }
html:not([lang=en]) .nav-links a { white-space: nowrap; }

/* ============================================================
   Module icons + "you are here" in the menu
   ============================================================ */
.mod-mark svg { width: 24px; height: 24px; display: block; }
.md-mark svg { width: 27px; height: 27px; display: block; }
.module:hover .mod-mark { background: var(--brand); color: #fff; }
.mod-mark { transition: background .18s ease, color .18s ease; }

/* The current page was only marked on /game before; nav.js now derives it, so
   the state needs to exist in the stylesheet for every page. */
.nav-links a[aria-current="page"], .foot-links a[aria-current="page"] { color: var(--brand-deep); font-weight: 700; }
.nav-links a[aria-current="page"] { position: relative; }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--red); }

/* fixed header + in-page anchors: stop targets landing under the bar */
:target, [id^="mod"], section[id], .feat-item[id], .feat-group[id] { scroll-margin-top: 84px; }

/* ============================================================
   Context-aware questionnaire
   Questions whose `when` clause does not match the current answers are taken
   out of the flow entirely rather than greyed out — a disabled field still
   reads as work you have to do.
   ============================================================ */
.q-hidden { display: none !important; }

.q-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 11px 14px; background: var(--brand-soft); border: 1px solid var(--brand-soft-2); border-radius: var(--radius-sm); }
.q-scope p { margin: 0; flex: 1 1 260px; font-size: var(--fs-2xs); color: var(--brand-deep); line-height: 1.5; }
.q-scope strong { font-weight: 800; }
.q-scope button { flex: 0 0 auto; font-family: var(--sans); font-size: var(--fs-3xs); font-weight: 700; color: var(--brand); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.q-scope button:hover { border-color: var(--brand); color: var(--brand-deep); }