/* Zhevio homepage v5. Colourway A, "Trust blue, paid green".
   One family (Figtree), a 12-column grid, a 4px spacing scale, flat colour.
   Emerald appears only where money arrived or something is done. */

/* ---------- Fallback metrics so the font swap does not move the page ---------- */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* colour: brand */
  --navy: #0B1F4D;
  --navy-2: #12285C;
  --navy-line: #253A70;
  --blue: #2563EB;
  --blue-press: #1D4ED8;
  --blue-tint: #EEF3FE;
  --blue-tint-2: #DCE6FD;
  --blue-on-navy: #8FB0F8;
  --emerald: #0F9F6E;      /* fills, icons, large figures only (3.4:1 on white) */
  --emerald-ink: #087A55;  /* emerald text at any size (5.3:1 on white) */
  --emerald-tint: #E7F6EF;

  /* colour: neutrals, cool and tinted toward navy */
  --white: #FFFFFF;
  --paper: #F7F8FA;
  --g-50: #F2F4F7;
  --g-100: #E9ECF1;
  --line: #E1E5EC;
  --line-strong: #CDD3DE;
  --g-400: #98A1B5;        /* decoration only */
  --muted: #5F6A85;        /* 5.1:1 on paper */
  --body: #3A4763;         /* 9.3:1 on white */
  --ink: var(--navy);
  --on-navy: #FFFFFF;
  --on-navy-2: #B6C2DC;    /* 8.9:1 on navy */
  --on-navy-3: #8E9BBB;    /* 5.7:1 on navy */

  /* type */
  --font: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-12: 12px; --t-13: 13px; --t-15: 15px; --t-17: 17px; --t-20: 20px; --t-24: 24px;

  /* space: 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* layout */
  --wrap: 1200px;
  --gp: 32px;              /* page gutter */
  --gap: 24px;             /* column gutter */
  --sec: var(--s-10);      /* section padding */

  /* shape: windows 14, inner blocks 10, controls 8, status pills round */
  --r-win: 14px; --r-md: 10px; --r-sm: 8px; --r-xs: 6px;

  /* elevation: one for product windows, nothing else */
  --e-win: 0 1px 2px rgba(11, 31, 77, .05), 0 18px 44px -20px rgba(11, 31, 77, .20);

  /* motion */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --d-1: 140ms; --d-2: 220ms; --d-3: 360ms;
}
@media (max-width: 1024px) { :root { --sec: var(--s-9); } }
@media (max-width: 768px)  { :root { --gp: 24px; --gap: 16px; } }
@media (max-width: 560px)  { :root { --gp: 16px; --sec: 72px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--white); color: var(--body);
  font: 400 var(--t-17)/1.6 var(--font);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
b, strong { font-weight: 600; color: var(--ink); }
small { font-size: inherit; }
time { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.deva { font-family: "Noto Sans Devanagari", var(--font); font-size: .96em; }
.arab { font-family: "Noto Sans Arabic", var(--font); font-size: .96em; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.sec-navy :focus-visible, .cta :focus-visible, .foot :focus-visible { outline-color: var(--blue-on-navy); }

.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 30; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; font-size: var(--t-15); }
.skip:focus { top: var(--s-3); }

/* Icons: one line set; stroke steps keep the drawn line near 1.4px at every size */
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gp)); margin-inline: auto; padding-inline: var(--gp); }
.sec { padding-block: var(--sec); }
.sec-paper { background: var(--paper); }
.sec-navy { background: var(--navy); color: var(--on-navy-2); }
.sec-head { max-width: 720px; margin-bottom: var(--s-8); }
.sec-head .t-lead { margin-top: var(--s-4); }
.note { margin-top: var(--s-4); font-size: var(--t-13); color: var(--muted); }
.sec-navy .note { color: var(--on-navy-3); }

/* ---------- Type scale ---------- */
.t-display { font-size: clamp(44px, 4.6vw + 10px, 76px); font-weight: 600; line-height: 1; letter-spacing: -.042em; color: var(--ink); text-wrap: balance; }
.t-display-2 { font-size: clamp(38px, 3.6vw + 12px, 64px); font-weight: 600; line-height: 1.03; letter-spacing: -.038em; color: var(--ink); text-wrap: balance; }
.t-h2 { font-size: clamp(32px, 2.6vw + 12px, 48px); font-weight: 600; line-height: 1.07; letter-spacing: -.032em; color: var(--ink); text-wrap: balance; }
.t-h3 { font-size: clamp(24px, 1vw + 16px, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.022em; color: var(--ink); }
.t-h4 { font-size: var(--t-17); font-weight: 600; line-height: 1.35; color: var(--ink); }
.t-lead { font-size: clamp(var(--t-17), .4vw + 14px, var(--t-20)); line-height: 1.5; color: var(--body); max-width: 58ch; text-wrap: pretty; }
.sec-navy .t-h2, .cta .t-display-2 { color: var(--on-navy); }
.sec-navy .t-lead, .cta .t-lead { color: var(--on-navy-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 44px; padding: 0 20px; border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--t-15); font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  transition: background-color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: var(--r-sm); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-quiet, .btn-line { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--blue-press); }
  .btn-quiet:hover, .btn-line:hover { border-color: var(--g-400); background: var(--g-50); }
  .btn-ghost:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid transparent; transition: border-color var(--d-2) var(--ease); }
.nav.is-stuck { border-bottom-color: var(--line); }
.nav-in { height: 68px; display: flex; align-items: center; gap: var(--s-6); }
.nav-logo { display: flex; align-items: center; height: 40px; flex: none; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; gap: var(--s-1); margin-left: var(--s-4); }
.nav-links a, .nav-signin { padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--t-15); font-weight: 500; color: var(--body); transition: color var(--d-1) var(--ease), background-color var(--d-1) var(--ease); }
@media (hover: hover) { .nav-links a:hover, .nav-signin:hover { color: var(--ink); background: var(--g-50); } }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.nav-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--ink); }
.nav-burger .ic { width: 22px; height: 22px; stroke-width: 1.75; }
.menu { border-top: 1px solid var(--line); background: var(--white); }
.menu nav { display: flex; flex-direction: column; padding-block: var(--s-2) var(--s-5); }
.menu a { padding: 14px 0; font-size: var(--t-20); font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--g-100); }
@media (max-width: 920px) {
  .nav-links, .nav-signin { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (min-width: 921px) { .menu { display: none !important; } }

/* ================================================================
   Shared product UI: the Zhevio app, drawn flat at real density
   ================================================================ */
.win {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-win); box-shadow: var(--e-win); overflow: hidden;
  font-size: var(--t-13); line-height: 1.45; color: var(--ink);
  text-align: left; font-variant-numeric: tabular-nums;
}
.win b { font-weight: 600; }
.win small { color: var(--muted); }
.win .ic { width: 15px; height: 15px; stroke-width: 2; }
.thumb { width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); background: var(--g-50); padding: 2px; }

.av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-tint); color: var(--navy); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.av-g { background: var(--g-100); color: var(--body); }
.av-lg { width: 44px; height: 44px; font-size: 14px; }
.av-xs { width: 18px; height: 18px; font-size: 9.5px; }

.th-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.th-who b { font-size: 14px; }
.th-who small { font-size: 12px; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-vio { background: var(--blue-tint); color: var(--navy); }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--g-50); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag .ic { width: 13px; height: 13px; stroke-width: 2.5; }
.tag-done { background: var(--emerald-tint); color: var(--emerald-ink); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags i { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--body); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }

.ui-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--white); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ui-btn-pri { background: var(--blue); border-color: var(--blue); color: #fff; }
.ui-select { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 6px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.ui-select .ic { width: 13px; height: 13px; color: var(--muted); }
.ui-search { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-sm); background: var(--g-50); color: var(--muted); font-size: 12.5px; }

/* chat */
.m { position: relative; max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.m time { float: right; margin: 4px 0 0 10px; font-size: 10.5px; color: var(--muted); }
.m-in { align-self: flex-start; background: var(--g-50); border-top-left-radius: 4px; }
.m-vio { align-self: flex-end; background: var(--blue-tint); border-top-right-radius: 4px; max-width: 84%; }
.m-team { align-self: flex-end; background: var(--white); border: 1px solid var(--line); border-top-right-radius: 4px; }
.m-by { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-size: 11px; font-weight: 600; color: var(--blue-press); }
.m-team .m-by { color: var(--muted); }
.m-tr { display: flex; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.m-tr .ic { width: 13px; height: 13px; margin-top: 2px; }
.m-att { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; height: 26px; padding: 0 9px; border-radius: var(--r-xs); background: var(--white); border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--body); }
.m-note { align-self: stretch; margin: 2px 0; padding: 9px 12px; border-radius: var(--r-md); background: var(--paper); border: 1px dashed var(--line-strong); font-size: 13px; color: var(--body); }
.m-note-h { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.m-note-h .ic { width: 12px; height: 12px; }
.m-note b { color: var(--blue-press); }
.m-sys { align-self: center; font-size: 11.5px; color: var(--muted); text-align: center; }

.pcard { display: flex; align-items: center; gap: 10px; margin-top: 7px; padding: 7px 10px 7px 7px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--blue-tint-2); }
.pc-t { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.pc-t b { font-size: 13px; }
.pc-t small { font-size: 11.5px; }
.pcard em, .prow em { font-style: normal; font-weight: 600; font-size: 13px; }

.ord { display: flex; flex-direction: column; gap: 3px; min-width: 220px; }
.ol { display: flex; justify-content: space-between; gap: 16px; }
.ol-dim { color: var(--muted); font-size: 12.5px; }
.ol-dim b { color: var(--muted); font-weight: 500; }
.paybtn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; height: 34px; padding: 0 12px; border-radius: var(--r-sm); background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; }
.paybtn .ic { width: 14px; height: 14px; }

.paid { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--emerald-tint); color: var(--emerald-ink); font-size: 13px; }
.paid b { color: var(--emerald-ink); }
.paid small { color: var(--emerald-ink); font-weight: 500; font-size: 11.5px; }
.paid-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--emerald); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.paid-ic .ic { width: 13px; height: 13px; stroke-width: 3; }

/* side panel (customer, activity, order) */
.op-cust { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; }
.op-cust .av { grid-row: 1 / span 2; }
.op-cust b { font-size: 14px; align-self: end; }
.op-cust small { font-size: 12px; align-self: start; }
.op-cust .tags { grid-column: 1 / -1; margin-top: 10px; }
.op-sec { margin-top: 22px; }
.op-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.op-act { position: relative; display: flex; flex-direction: column; gap: 9px; }
.op-act li { position: relative; display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--body); }
.op-act li time { font-size: 11px; color: var(--muted); }
.op-act .dot { width: 7px; height: 7px; border-radius: 50%; background: #B4BDD0; transform: translateY(-1px); }
.op-act .is-money { color: var(--emerald-ink); font-weight: 600; }
.op-act .is-money .dot { background: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-tint); }
.op-act .is-blue .dot { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.op-act .is-blue { color: var(--ink); font-weight: 600; }

.st { margin-left: auto; display: inline-grid; }
.st > span { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: opacity var(--d-2) var(--ease); }
.st .ic { width: 12px; height: 12px; stroke-width: 3; }
.st-wait { background: var(--g-50); color: var(--muted); opacity: 0; }
.st-paid { background: var(--emerald-tint); color: var(--emerald-ink); }

.key-mark.pin { position: absolute; z-index: 2; box-shadow: 0 0 0 3px var(--white); }
.key-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; font-style: normal; }

/* ================================================================
   1. Hero
   ================================================================ */
.hero { padding-block: var(--s-8) var(--s-9); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.hero-copy { grid-column: 1 / span 5; padding-bottom: var(--s-6); }
.hero-sub { margin-top: var(--s-5); max-width: 30em; }
.hero-copy .cta-row { margin-top: var(--s-6); }
.hero-vis { grid-column: 6 / -1; margin-right: calc(-1 * max(var(--gp), (100vw - var(--wrap)) / 2)); min-width: 0; }

.win-hero { display: grid; grid-template-columns: 468px minmax(240px, 1fr); height: 572px; border-right: 0; border-radius: var(--r-win) 0 0 var(--r-win); }
.th { display: flex; flex-direction: column; min-width: 0; }
.th-head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line); flex: none; }
.th-head .chip { margin-left: auto; }
.th-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; overflow: hidden; }
.th-day { align-self: center; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.th-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.slot { position: relative; display: flex; flex-direction: column; }
.typing { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px 0 10px; border-radius: 14px 4px 14px 14px; background: var(--blue-tint); opacity: 0; transition: opacity var(--d-2) var(--ease); pointer-events: none; }
.typing img { margin-right: 4px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .35; }
.op { padding: 20px 24px; background: var(--paper); border-left: 1px solid var(--line); min-width: 0; }
.op > * { max-width: 272px; }
.op-order { padding: 12px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); }
.op-order .op-h { color: var(--ink); font-size: 12.5px; }
.op-line { display: flex; align-items: center; gap: 10px; }
.op-line span { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.op-line em, .iord em { font-style: normal; font-weight: 600; }
.op-tot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.vis-note { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); font-size: var(--t-13); color: var(--muted); }
.replay { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--t-13); font-weight: 600; color: var(--ink); border: 1px solid var(--line); transition: background-color var(--d-1) var(--ease); }
.replay .ic { width: 14px; height: 14px; }
@media (hover: hover) { .replay:hover { background: var(--g-50); } }
.no-js .replay, .final .replay { display: none; }

/* Demo choreography. The start states exist only under html.motion, which the head
   script sets before first paint (and removes again if the demo script never runs). */
.motion .demo [data-step] { opacity: 0; transform: translateY(6px); transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease); }
.motion .demo .op-act li { transform: none; }
.motion .demo.s1 [data-step="1"], .motion .demo.s2 [data-step="2"], .motion .demo.s3 [data-step="3"],
.motion .demo.s4 [data-step="4"], .motion .demo.s5 [data-step="5"] { opacity: 1; transform: none; }
.motion .demo.t2 [data-slot="2"] .typing, .motion .demo.t4 [data-slot="4"] .typing { opacity: 1; }
.motion .demo.t2 [data-slot="2"] .typing i, .motion .demo.t4 [data-slot="4"] .typing i { animation: blink 1s infinite var(--ease); }
.motion .demo .typing i:nth-child(3) { animation-delay: .15s !important; }
.motion .demo .typing i:nth-child(4) { animation-delay: .3s !important; }
@keyframes blink { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
.motion .demo:not(.s5) .st-wait { opacity: 1; }
.motion .demo:not(.s5) .st-paid { opacity: 0; }
.motion .demo.s5 .paid { animation: land 520ms var(--ease) both; }
@keyframes land { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: none; } }

/* ================================================================
   2. Facts
   ================================================================ */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.facts-list li { display: flex; flex-direction: column; gap: 6px; padding: var(--s-6) var(--s-5) var(--s-6) 0; font-size: var(--t-15); line-height: 1.5; color: var(--muted); }
.facts-list li + li { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.facts-list .ic { width: 22px; height: 22px; stroke-width: 1.6; color: var(--blue); margin-bottom: 8px; }
.facts-list b { font-size: var(--t-17); line-height: 1.3; letter-spacing: -.01em; }

/* ================================================================
   3. Inbox
   ================================================================ */
.win-inbox { display: grid; grid-template-columns: 60px 300px minmax(0, 1fr) 290px; height: 600px; }
.rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0; background: var(--paper); border-right: 1px solid var(--line); }
.rail-logo { width: 22px; height: 22px; margin-bottom: 14px; }
.rail-i { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--muted); }
.rail-i .ic { width: 18px; height: 18px; stroke-width: 1.75; }
.rail-i.is-on { background: var(--white); color: var(--blue); box-shadow: inset 0 0 0 1px var(--line); }
.rail-end { margin-top: auto; }

.ilist { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; }
.ilist-top { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.ilist-top b { font-size: 15px; }
.ilist-tabs { display: flex; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ilist-tabs span { padding: 11px 0 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ilist-tabs .is-on { color: var(--ink); border-bottom-color: var(--blue); }
.ilist-tabs i { font-style: normal; margin-left: 3px; color: var(--muted); }
.ilist-ch { position: relative; display: flex; align-items: center; gap: 5px; padding: 10px 16px; flex-wrap: nowrap; }
.ilist-ch .pin { left: -10px; top: 50%; margin-top: -9px; }
.m-note { position: relative; }
.m-note .pin { left: -10px; top: -10px; }
.iprof .op-h { position: relative; }
.iprof .op-h .pin { left: -30px; top: 50%; margin-top: -9px; box-shadow: 0 0 0 3px var(--paper); }
.ilist-ch span:not(.key-mark) { height: 26px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; color: var(--body); white-space: nowrap; }
.ilist-ch .is-on { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.irow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 16px; border-left: 2px solid transparent; }
.irow.is-on { background: var(--blue-tint); border-left-color: var(--blue); }
.irow-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.irow-t b { font-size: 13px; }
.irow-t small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.irow-t em { font-style: normal; font-weight: 500; color: var(--body); margin-right: 6px; }
.irow-t .is-money { color: var(--emerald-ink); font-weight: 600; }
.irow-m { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--muted); }
.irow-m i { font-style: normal; min-width: 20px; height: 17px; padding: 0 6px; border-radius: 6px; background: var(--blue-tint-2); color: var(--blue-press); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.ith { display: flex; flex-direction: column; min-width: 0; }
.ith-head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.ith-head .ui-select { margin-left: auto; }
.ith-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px; overflow: hidden; }
.ith-body .m { max-width: 78%; }
.ith-comp { flex: none; margin: 0 14px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.comp-tabs { display: flex; gap: 2px; padding: 6px 6px 0; }
.comp-tabs span { padding: 4px 10px; border-radius: var(--r-xs); font-size: 12px; font-weight: 600; color: var(--muted); }
.comp-tabs .is-on { background: var(--g-50); color: var(--ink); }
.comp-box { padding: 8px 12px 6px; font-size: 13px; color: var(--muted); }
.comp-tools { display: flex; align-items: center; gap: 12px; padding: 6px 8px 8px 12px; color: var(--muted); }
.comp-tools .ui-btn { margin-left: auto; height: 28px; }

.iprof { padding: 20px 20px; background: var(--paper); border-left: 1px solid var(--line); min-width: 0; }
.iord { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--line); }
.iord + .iord { margin-top: 6px; }
.iord span { display: flex; flex-direction: column; line-height: 1.3; }
.iord small { font-size: 11.5px; }

.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--s-7); }
.keys li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; font-size: var(--t-15); color: var(--muted); line-height: 1.5; }
.keys .key-mark { grid-row: 1 / span 2; margin-top: 2px; }
.keys b { font-size: var(--t-17); }

/* ================================================================
   4. Vio (navy)
   ================================================================ */
.vio-label { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-5); font-size: var(--t-15); font-weight: 600; color: var(--on-navy); }
.vio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.vio-side { grid-column: 1 / span 4; display: flex; flex-direction: column; min-height: 100%; }
.vio-panels { grid-column: 5 / -1; min-width: 0; }
.vio-tabs { display: flex; flex-direction: column; border-left: 1px solid var(--navy-line); }
.vtab { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 0 18px 24px; text-align: left; color: var(--on-navy-3); transition: color var(--d-2) var(--ease); }
.vtab::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px; background: var(--blue-on-navy); border-radius: 2px; transform: scaleY(0); transition: transform var(--d-2) var(--ease); }
.vtab b { font-size: var(--t-20); font-weight: 600; letter-spacing: -.015em; color: var(--on-navy-2); transition: color var(--d-2) var(--ease); }
.vtab span { font-size: var(--t-15); line-height: 1.5; max-width: 32ch; }
.vtab[aria-selected="true"] b { color: var(--on-navy); }
.vtab[aria-selected="true"] span { color: var(--on-navy-2); }
.vtab[aria-selected="true"]::before { transform: none; }
@media (hover: hover) { .vtab:hover b { color: var(--on-navy); } }
.vtab:focus-visible { outline-offset: -2px; }
.vio-keys { margin-top: auto; padding-top: var(--s-6); font-size: var(--t-15); line-height: 1.5; color: var(--on-navy-3); max-width: 34ch; }
.vpanel:focus-visible { outline-offset: 4px; border-radius: var(--r-win); }
.vpanel.is-in .win { animation: swap var(--d-2) var(--ease) both; }
@keyframes swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.win-vio { display: grid; grid-template-columns: minmax(0, 1fr) 248px; height: 540px; border-color: transparent; box-shadow: none; }
.vth { display: flex; flex-direction: column; min-width: 0; }
.vth-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px; overflow: hidden; }
.plist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--blue-tint-2); }
.prow .thumb { width: 32px; height: 32px; }
.prow > span { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.prow small { font-size: 11.5px; }
.slots { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.slots i { font-style: normal; height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--blue-tint-2); font-size: 12.5px; font-weight: 600; }
.slots .is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.vlog { padding: 18px; background: var(--paper); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.vlog-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.vlog ol { display: flex; flex-direction: column; gap: 12px; }
.vlog li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.35; font-weight: 500; }
.vlog li .ic { width: 15px; height: 15px; color: var(--blue); stroke-width: 2.4; margin-top: 1px; }
.vlog li small { display: block; font-weight: 400; font-size: 11.5px; margin-top: 1px; }
.vlog li.is-wait .ic { color: var(--muted); stroke-width: 2; }
.vlog li.is-wait { color: var(--body); }
.vlog-src, .vlog-rule { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.vlog-rule b { display: block; color: var(--ink); font-size: 12px; margin-bottom: 2px; }

/* ================================================================
   5. Campaigns
   ================================================================ */
.camp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.camp-vis { grid-column: 1 / span 7; min-width: 0; }
.camp-copy { grid-column: 8 / -1; }
.camp-vis .win, .camp-vis .note { max-width: 652px; }
.camp-copy .t-lead { margin-top: var(--s-4); }
.seg { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: var(--s-4); border-radius: var(--r-md); background: var(--g-50); border: 1px solid var(--line); }
.seg-b { height: 34px; padding: 0 14px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--muted); border: 1px solid transparent; transition: color var(--d-1) var(--ease), background-color var(--d-1) var(--ease); }
.seg-b[aria-selected="true"] { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(11, 31, 77, .06); }
@media (hover: hover) { .seg-b:hover { color: var(--ink); } }
.cpanel.is-in .win { animation: swap var(--d-2) var(--ease) both; }

.win-camp { display: flex; flex-direction: column; height: 520px; }
.cw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cw-head > span:first-child { display: flex; flex-direction: column; line-height: 1.3; }
.cw-head small { font-size: 12px; }
.cw-head b { font-size: 15px; }
.cw-rows { flex: 1; }
.cw-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cw-k { display: flex; align-items: center; gap: 8px; align-self: start; font-weight: 600; color: var(--ink); height: 22px; }
.cw-k .ic { color: var(--muted); }
.cw-v { display: flex; flex-direction: column; line-height: 1.35; }
.cw-v b { font-size: 20px; letter-spacing: -.01em; }
.cw-v small { font-size: 12.5px; }
.cw-v-sm b { font-size: 14px; letter-spacing: 0; }
.gl { display: flex; flex-direction: column; gap: 7px; }
.gl li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; color: var(--body); }
.gl .ic { color: var(--emerald); stroke-width: 2.5; }
.gl .gl-no .ic { color: var(--muted); stroke-width: 2; }
.gl li b { font-weight: 600; }
.cw-meter { grid-template-rows: auto auto auto; }
.cw-meter .cw-v, .cw-meter .budget, .cw-meter .budget-k { grid-column: 2; }
.budget { position: relative; display: block; height: 8px; margin-top: 12px; border-radius: 4px; background: var(--g-100); overflow: hidden; }
.budget i { position: absolute; top: 0; bottom: 0; }
.b-spent { left: 0; width: var(--w); background: #A9B4CC; }
.b-this { left: 41.2%; width: var(--w); background: var(--blue); }
.budget-k { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.budget-k span { display: inline-flex; align-items: center; gap: 6px; }
.budget-k span:last-child { margin-left: auto; }
.budget-k i { width: 8px; height: 8px; border-radius: 2px; }
.k-spent { background: #A9B4CC; }
.k-this { background: var(--blue); }
.cw-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--paper); border-top: 1px solid var(--line); margin-top: auto; color: var(--muted); }
.cw-act { display: flex; gap: 8px; }
.cw-foot-split > span { display: inline-flex; align-items: center; gap: 8px; }
.cw-foot-split .ui-btn { margin-left: 4px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.kpis span { display: flex; flex-direction: column; padding: 18px 20px; line-height: 1.25; }
.kpis span + span { border-left: 1px solid var(--line); }
.kpis small { font-size: 12px; }
.kpis b { font-size: 24px; letter-spacing: -.02em; margin-top: 4px; }
.kpis .is-money b { color: var(--emerald-ink); }
.ab { padding: 18px 20px 8px; }
.hours { padding: 4px 20px 16px; margin-top: auto; }
.hours-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 56px; padding-bottom: 1px; border-bottom: 1px solid var(--line); }
.hours-bars i { display: block; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--blue-tint-2); }
.hours-bars i:first-child { background: var(--blue); }
.hours-k { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); }
.ab-h { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.ab-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 64px 76px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.ab-row > span:not(:first-child) { text-align: right; }
.ab-head { font-size: 11.5px; color: var(--muted); font-weight: 600; border-top: 0; padding-top: 4px; }
.ab-row > span:first-child { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; }
.ab-k { font-style: normal; width: 22px; height: 22px; border-radius: var(--r-xs); background: var(--g-50); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--body); }
.ab-row em { grid-column: 2; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--blue-press); }
.ab-row.is-win .ab-k { background: var(--blue); color: #fff; }
.ab-row.is-win > span:not(:first-child) { font-weight: 600; color: var(--ink); }

.feat { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.feat dt { font-size: var(--t-17); font-weight: 600; color: var(--ink); line-height: 1.35; }
.feat dd { font-size: var(--t-15); color: var(--muted); line-height: 1.5; margin-top: 2px; }

/* ================================================================
   6. Checkout and Recover
   ================================================================ */
.ticks { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: calc(-1 * var(--s-6)) 0 var(--s-7); font-size: var(--t-15); font-weight: 500; color: var(--ink); }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }
.ticks .ic { width: 16px; height: 16px; color: var(--blue); stroke-width: 2.5; }
.ticks-col { flex-direction: column; margin: var(--s-6) 0 0; gap: var(--s-3); }
.ticks-col li { align-items: flex-start; }
.ticks-col .ic { margin-top: 5px; }

.pay-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
.phone { grid-column: 1 / span 4; justify-self: center; width: 316px; height: 640px; padding: 10px; border-radius: 46px; background: var(--white); border: 1px solid var(--line-strong); box-shadow: var(--e-win); }
.phone-in { height: 100%; border-radius: 37px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
.ph-status { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 4px 26px 0; font-size: 12.5px; font-weight: 600; }
.ph-bat { width: 22px; height: 11px; border: 1.5px solid var(--ink); border-radius: 3px; padding: 1px; opacity: .8; }
.ph-bat i { display: block; width: 70%; height: 100%; background: var(--ink); border-radius: 1px; }
.ph-head { display: flex; align-items: center; gap: 8px; padding: 6px 14px 10px 8px; background: var(--white); border-bottom: 1px solid var(--line); }
.ph-head > .ic { width: 20px; height: 20px; color: var(--blue); }
.ph-head .av { width: 30px; height: 30px; font-size: 10.5px; }
.ph-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; overflow: hidden; min-height: 0; }
.ph-body > * { flex: none; }
.pm { max-width: 88%; padding: 10px 12px; border-radius: 14px; }
.pm-biz { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-top-left-radius: 4px; display: flex; flex-direction: column; }
.pm-me { align-self: flex-end; background: var(--blue-tint-2); border-top-right-radius: 4px; }
.pm-h { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.pm-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.pm-line .thumb { width: 30px; height: 30px; }
.pm-line > span { flex: 1; line-height: 1.25; }
.pm-line small { display: block; font-size: 11.5px; color: var(--muted); }
.pm-tot { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.paybtn-block { width: 100%; }
.pm-rcpt { align-items: center; text-align: center; padding: 16px 14px 12px; width: 88%; }
.rc-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--emerald); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.rc-ic .ic { width: 24px; height: 24px; stroke-width: 2.6; }
.rc-amt { margin-top: 10px; font-size: 22px; letter-spacing: -.02em; }
.rc-sub { margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.rc-ord { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; text-align: left; }
.rc-fine { margin-top: 8px; font-size: 10.5px; color: var(--muted); align-self: flex-start; }
.ph-comp { display: flex; align-items: center; justify-content: space-between; margin: 8px 10px 14px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--muted); }
.ph-comp .ic { color: var(--muted); }

.win-pay { grid-column: 5 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 272px; height: 600px; align-self: center; }
.pw-list { display: flex; flex-direction: column; min-width: 0; }
.pw-head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.pw-head > b { font-size: 15px; }
.pw-sum { margin-left: auto; color: var(--muted); }
.pw-sum b { color: var(--emerald-ink); font-size: 14px; margin-left: 4px; }
.pw-row { display: grid; grid-template-columns: minmax(0, 1fr) 128px 72px; gap: 12px; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--line); }
.pw-row > span:first-child { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pw-row small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-row > b { text-align: right; }
.pw-cols { padding-block: 9px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--paper); }
.pw-cols span:last-child { text-align: right; }
.pill { justify-self: start; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--g-50); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pill-paid { background: var(--emerald-tint); color: var(--emerald-ink); }
.pill-blue { background: var(--blue-tint); color: var(--blue-press); }
.pw-rec { padding: 18px 18px; background: var(--paper); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pw-rec-h { display: flex; align-items: center; justify-content: space-between; height: 24px; }
.pw-rec-h b { font-size: 15px; }
.pw-rec-h span { font-size: 12px; color: var(--muted); }
.rec { padding: 12px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); }
.rec-t { font-weight: 600; margin-bottom: 10px; }
.pw-rec-f { margin-top: auto; font-size: 11.5px; color: var(--muted); }
.pw-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--paper); border-top: 1px solid var(--line); color: var(--muted); }
.rec-sum { display: grid; grid-template-columns: 1fr auto; row-gap: 2px; align-items: baseline; }
.rec-sum span { font-weight: 600; }
.rec-sum b { font-size: 18px; color: var(--emerald-ink); letter-spacing: -.01em; }
.rec-sum small { grid-column: 1 / -1; font-size: 11.5px; }

/* ================================================================
   7. Flow builder and integrations
   ================================================================ */
.flows { overflow-x: clip; }
.flows-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.flows-copy { grid-column: 1 / span 5; padding-right: var(--s-5); }
.flows-copy .t-lead { margin-top: var(--s-4); }
.flows-vis { grid-column: 6 / -1; margin-right: calc(-1 * max(var(--gp), (100vw - var(--wrap)) / 2)); min-width: 0; }
.flows-vis .note { padding-left: 2px; }
.win-flow { height: 480px; display: flex; flex-direction: column; border-right: 0; border-radius: var(--r-win) 0 0 var(--r-win); }
.fw-bar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--line); flex: none; }
.fw-crumb { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.fw-crumb .ic { width: 13px; height: 13px; transform: rotate(-90deg); }
.fw-crumb b { color: var(--ink); font-size: 14px; }
.fw-act { margin-left: auto; display: flex; gap: 8px; margin-right: 8px; }
.fw-main { flex: 1; display: grid; grid-template-columns: 160px minmax(0, 1fr); min-height: 0; }
.fw-pal { padding: 16px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; background: var(--white); }
.fw-pal p { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 8px 8px; }
.fw-pal span { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 500; color: var(--body); }
.fw-pal span .ic { color: var(--muted); width: 14px; height: 14px; }
.fw-pal span:first-of-type { background: var(--g-50); }
.fw-pal small { padding: 8px 8px 0; font-size: 11.5px; color: var(--muted); }
.fw-canvas { position: relative; overflow: hidden; background-color: var(--paper); background-image: radial-gradient(circle, #D3D9E3 1px, transparent 1.3px); background-size: 20px 20px; background-position: 10px 10px; }
.fw-canvas > * { --ox: 20px; --oy: 44px; }
.fw-wires { position: absolute; left: var(--ox); top: var(--oy); width: 590px; height: 340px; fill: none; stroke: #9DA7BB; stroke-width: 1.5; stroke-linecap: round; }
.fw-wires .w-yes { stroke: var(--blue); }
.node { position: absolute; left: calc(var(--ox) + var(--x)); top: calc(var(--oy) + var(--y)); width: 172px; height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 10px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 1px 2px rgba(11, 31, 77, .05); }
.node > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.node small { font-size: 11px; }
.node b { font-size: 13px; white-space: nowrap; }
.node-ic { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); background: var(--g-50); color: var(--body); display: inline-flex; align-items: center; justify-content: center; }
.n-trig .node-ic { background: var(--navy); color: #fff; }
.n-vio { border-color: var(--blue); }
.n-vio .node-ic, .n-pay .node-ic { background: var(--blue-tint); color: var(--blue); }
.fw-lbl { position: absolute; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--muted); }
.fw-yes { left: calc(var(--ox) + 502px); top: calc(var(--oy) + 108px); color: var(--blue-press); border-color: var(--blue-tint-2); }
.fw-no { left: calc(var(--ox) + 352px); top: calc(var(--oy) + 102px); }

.intg { margin-top: var(--s-10); }
.intg::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: var(--s-8); }
.intg-sub { margin-top: var(--s-2); color: var(--muted); font-size: var(--t-17); }
.intg-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--s-7); }
.intg-cols > div { padding-left: var(--s-4); border-left: 1px solid var(--line); }
.intg-cols h4 { font-size: var(--t-15); font-weight: 600; color: var(--ink); margin-bottom: var(--s-3); }
.intg-cols li { font-size: var(--t-15); line-height: 2; color: var(--body); }

/* ================================================================
   8. Industries
   ================================================================ */
.ind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-8); }
.ind-group { padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.ind-group h3 { font-size: var(--t-15); font-weight: 600; color: var(--blue-press); letter-spacing: 0; margin-bottom: var(--s-5); }
.ind-group dl { display: flex; flex-direction: column; gap: var(--s-5); }
.ind-group dl > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--s-5); }
.ind-group dt { font-size: var(--t-17); font-weight: 600; color: var(--ink); line-height: 1.4; }
.ind-group dd { font-size: var(--t-15); color: var(--muted); line-height: 1.55; padding-top: 1px; }

/* ================================================================
   9. 0% markup and the founder's note
   ================================================================ */
.fair-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.fair-copy { grid-column: 1 / span 5; }
.fair-copy .t-lead { margin-top: var(--s-4); }
.fair-side { grid-column: 6 / -1; padding-left: var(--s-6); }
.flowof { margin-top: var(--s-7); display: flex; flex-direction: column; }
.flowof li { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4) 0 var(--s-4) var(--s-5); border-left: 2px solid var(--line); }
.flowof li:last-child { border-left-color: var(--blue); }
.flowof b { font-size: var(--t-17); }
.flowof span { font-size: var(--t-15); color: var(--muted); line-height: 1.5; }

.cmp { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--t-15); line-height: 1.4; }
.cmp th, .cmp td { padding: 15px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { padding-top: 0; font-size: var(--t-13); font-weight: 600; color: var(--muted); vertical-align: bottom; }
.cmp thead th.cmp-z { color: var(--ink); font-size: var(--t-15); }
.cmp thead th:first-child { width: 37%; }
.cmp thead th.cmp-z { width: 29%; }
.cmp tbody th { font-weight: 500; color: var(--body); padding-left: 0; }
.cmp td { color: var(--muted); }
.cmp td.cmp-z { color: var(--ink); font-weight: 600; background: var(--blue-tint); }
.cmp thead th.cmp-z { background: var(--blue-tint); border-radius: var(--r-md) var(--r-md) 0 0; padding-top: 14px; }
.cmp tbody tr:last-child td.cmp-z { border-radius: 0 0 var(--r-md) var(--r-md); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.sum { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-win); border: 1px solid var(--line); background: var(--white); font-variant-numeric: tabular-nums; }
.sum-h { font-size: var(--t-13); font-weight: 600; color: var(--muted); margin-bottom: var(--s-3); }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: 10px 0; border-top: 1px solid var(--g-100); font-size: var(--t-15); }
.sum-row b { font-size: var(--t-20); letter-spacing: -.01em; }
.sum-row small { font-size: var(--t-13); font-weight: 400; color: var(--muted); }
.sum-save b { color: var(--emerald-ink); font-size: 28px; letter-spacing: -.02em; }
.sum-f { margin-top: var(--s-3); font-size: var(--t-13); color: var(--muted); }

.founder { margin-top: var(--s-9); display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s-6); align-items: center; padding: var(--s-6); border: 1px dashed var(--line-strong); border-radius: var(--r-win); }
.founder-photo { width: 148px; height: 148px; border-radius: var(--r-md); background: var(--g-50); display: flex; align-items: center; justify-content: center; color: var(--g-400); }
.founder-photo .ic { width: 40px; height: 40px; stroke-width: 1.2; }
.ph-tag { display: inline-flex; height: 24px; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--g-400); font-size: var(--t-12); font-weight: 600; color: var(--muted); }
.founder blockquote { margin-top: var(--s-4); }
.founder blockquote p { font-size: clamp(20px, 1vw + 14px, 26px); line-height: 1.35; letter-spacing: -.015em; font-weight: 500; color: var(--ink); max-width: 40ch; }
.founder figcaption { margin-top: var(--s-3); font-size: var(--t-15); color: var(--muted); }

/* ================================================================
   10. Pricing
   ================================================================ */
.plans { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(6, 56px) auto; column-gap: var(--s-3); }
.plans-labels, .plan { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.plans-labels span { display: flex; align-items: center; border-top: 1px solid var(--line); font-size: var(--t-15); color: var(--body); }
.plans-labels .pl-top, .plans-labels .pl-cta { border-top: 0; }
.plans-labels span:nth-child(8) { border-top: 1px solid var(--line); }
.plan { padding: 0 var(--s-5); border-radius: var(--r-win); border: 1px solid transparent; }
.plan-rec { background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.plan-top { padding: var(--s-5) 0 var(--s-5); }
.plan h3 { display: flex; align-items: center; gap: 10px; font-size: var(--t-24); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.plan h3 .rec { font-size: var(--t-12); font-weight: 600; letter-spacing: 0; color: var(--blue-press); background: var(--blue-tint); padding: 3px 8px; border-radius: 999px; }
.plan-top > p:not(.plan-price) { margin-top: 2px; font-size: var(--t-15); color: var(--muted); }
.plan-price { margin-top: var(--s-5); display: flex; flex-direction: column; gap: 2px; }
.plan-lbl { font-size: var(--t-12); font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.plan-price b { font-size: 40px; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: var(--t-13); color: var(--muted); }
.plan > span { display: flex; align-items: center; border-top: 1px solid var(--line); font-size: var(--t-17); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan > span i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan .btn { align-self: start; margin: var(--s-5) 0 var(--s-5); width: 100%; }
.plan > span:nth-of-type(6) + .btn { border-top: 0; }
.plan > .btn { position: relative; }
.plan > span:last-of-type { border-bottom: 1px solid var(--line); }

.incl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--line-strong); }
.incl > div:first-child { grid-column: 1 / span 7; }
.incl > div:last-child { grid-column: 9 / -1; font-size: var(--t-15); color: var(--body); line-height: 1.55; }
.incl > div:last-child p + p { margin-top: var(--s-4); }
.incl-list { columns: 2; column-gap: var(--gap); margin-top: var(--s-4); }
.incl-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: var(--t-15); color: var(--ink); break-inside: avoid; }
.incl-list .ic { color: var(--blue); stroke-width: 2.5; }
.incl-f { margin-top: var(--s-4); font-size: var(--t-15); color: var(--muted); }
.incl .t-h4 { margin-bottom: var(--s-3); }

/* ================================================================
   11. FAQ
   ================================================================ */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.faq-head { grid-column: 1 / span 4; position: sticky; top: 104px; }
.faq-head .t-lead { margin-top: var(--s-4); }
.faq-list { grid-column: 6 / -1; border-bottom: 1px solid var(--line); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: 22px 0; list-style: none; cursor: pointer; font-size: var(--t-17); font-weight: 600; color: var(--ink); line-height: 1.4; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .ic { width: 20px; height: 20px; stroke-width: 1.75; color: var(--muted); transition: transform var(--d-2) var(--ease), color var(--d-1) var(--ease); }
.faq-list details[open] summary .ic { transform: rotate(45deg); color: var(--ink); }
@media (hover: hover) { .faq-list summary:hover .ic { color: var(--ink); } }
.faq-list summary:focus-visible { outline-offset: 2px; }
.faq-a { padding: 0 var(--s-8) 24px 0; }
.faq-a p { font-size: var(--t-17); line-height: 1.6; color: var(--body); max-width: 62ch; }

/* ================================================================
   12. Final CTA and footer (navy)
   ================================================================ */
.cta { background: var(--navy); padding-block: var(--s-10) var(--s-9); }
.cta-in { max-width: calc(var(--wrap) + 2 * var(--gp)); }
.cta .t-display-2 { max-width: 14em; }
.cta .t-lead { margin-top: var(--s-5); }
.cta .cta-row { margin-top: var(--s-6); }
.foot { background: var(--navy); color: var(--on-navy-3); font-size: var(--t-15); }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-block: var(--s-8); border-top: 1px solid var(--navy-line); }
.foot-brand { grid-column: 1 / span 4; }
.foot-brand img { height: 28px; width: auto; }
.foot-brand p { margin-top: var(--s-4); line-height: 1.55; max-width: 34ch; color: var(--on-navy-2); }
.foot-cols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.foot-cols h3 { font-size: var(--t-13); font-weight: 600; color: var(--on-navy-3); margin-bottom: var(--s-3); }
.foot-cols a { display: block; padding: 5px 0; color: var(--on-navy-2); transition: color var(--d-1) var(--ease); }
.foot-cols a span { display: block; font-size: var(--t-13); color: var(--on-navy-3); margin-top: -1px; }
@media (hover: hover) { .foot-cols a:hover { color: #fff; } }
.foot-slot { display: block; margin-top: var(--s-3); padding: 10px 12px; border: 1px dashed var(--navy-line); border-radius: var(--r-sm); font-size: var(--t-13); line-height: 1.45; }
.foot-bot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-block: var(--s-6) var(--s-7); border-top: 1px solid var(--navy-line); font-size: var(--t-13); line-height: 1.55; }
.foot-bot p:first-child { grid-column: 1 / span 4; }
.foot-bot p:last-child { grid-column: 6 / -1; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1420px) and (min-width: 1101px) {
  .fw-main { grid-template-columns: minmax(0, 1fr); }
  .fw-pal { display: none; }
}
@media (max-width: 1240px) {
  .win-inbox { grid-template-columns: 56px 280px minmax(0, 1fr); }
  .iprof { display: none; }
  .keys li:nth-child(3) { opacity: 1; }
}
@media (max-width: 1100px) {
  .win-hero { grid-template-columns: minmax(0, 1fr) 300px; }
  .feat { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-5); }
  .hero-copy { grid-column: 1 / -1; padding-bottom: var(--s-7); }
  .hero-sub { max-width: 36em; }
  .hero-vis { grid-column: 1 / -1; }
  .vio-side { grid-column: 1 / -1; }
  .vio-tabs { flex-direction: row; border-left: 0; border-bottom: 1px solid var(--navy-line); margin-bottom: var(--s-5); }
  .vtab { flex: 1; padding: 0 var(--s-4) var(--s-4) 0; }
  .vtab::before { left: 0; right: var(--s-4); top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
  .vtab[aria-selected="true"]::before { transform: none; }
  .vio-keys { display: none; }
  .vio-panels { grid-column: 1 / -1; }
  .camp-vis { grid-column: 1 / -1; order: 2; }
  .camp-copy { grid-column: 1 / -1; padding-top: 0; margin-bottom: var(--s-7); }
  .flows-copy { grid-column: 1 / -1; margin-bottom: var(--s-7); }
  .flows-vis { grid-column: 1 / -1; }
  .fair-copy, .fair-side { grid-column: 1 / -1; }
  .fair-side { margin-top: var(--s-7); padding-left: 0; }
  .faq-head { grid-column: 1 / -1; position: static; margin-bottom: var(--s-6); }
  .faq-list { grid-column: 1 / -1; }
  .incl > div:first-child, .incl > div:last-child { grid-column: 1 / -1; }
  .incl > div:last-child { margin-top: var(--s-6); }
  .foot-brand { grid-column: 1 / -1; margin-bottom: var(--s-7); }
  .foot-cols { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .phone { grid-column: 1 / -1; margin-bottom: var(--s-6); }
  .win-pay { grid-column: 1 / -1; height: auto; min-height: 520px; }
  .intg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
  .ind-grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 900px) {
  .fw-main { grid-template-columns: minmax(0, 1fr); }
  .fw-pal { display: none; }
  .facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts-list li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .win-inbox { grid-template-columns: 52px 284px minmax(0, 1fr); }
  .ilist-ch { gap: 4px; }
  .ilist-ch span:not(.key-mark) { padding: 0 7px; }
  .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keys { grid-template-columns: 1fr; gap: var(--s-4); }
  .plans { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--s-4); }
  .plans-labels { display: none; }
  .plan { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); padding: 0 var(--s-5); }
  .plan-rec { border-color: var(--blue); }
  .plan > span { justify-content: space-between; min-height: 48px; font-size: var(--t-15); }
  .plan > span i { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-style: normal; font-weight: 400; color: var(--body); }
  .plan > span:last-of-type { border-bottom: 0; }
  .plan .btn { margin-top: var(--s-4); }
  .foot-bot p:first-child, .foot-bot p:last-child { grid-column: 1 / -1; }
  .foot-bot p:first-child { margin-bottom: var(--s-3); }
}
@media (max-width: 760px) {
  .win-hero { grid-template-columns: minmax(0, 1fr) 280px; }
  .win-flow { height: auto; border-right: 1px solid var(--line); border-radius: var(--r-win); }
  .flows-vis { margin-right: 0; }
  .fw-main { grid-template-columns: 1fr; }
  .fw-pal { display: none; }
  .fw-act .ui-btn:first-child { display: none; }
  .fw-canvas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; padding: 20px 16px 24px; }
  .fw-wires, .fw-lbl { display: none; }
  .node { position: relative; left: auto; top: auto; width: auto; grid-column: 1 / -1; }
  .node::before { content: ""; position: absolute; left: 50%; top: -29px; height: 28px; border-left: 1.5px solid #9DA7BB; }
  .node:first-of-type::before { display: none; }
  .fw-canvas .node:nth-of-type(4), .fw-canvas .node:nth-of-type(5) { grid-column: auto; }
  .fw-canvas .node:nth-of-type(4) { order: 2; }
  .fw-canvas .node:nth-of-type(4)::after, .fw-canvas .node:nth-of-type(5)::after { position: absolute; top: -22px; left: calc(50% + 8px); font-size: 11px; font-weight: 600; color: var(--muted); }
  .fw-canvas .node:nth-of-type(4)::after { content: "Yes"; color: var(--blue-press); }
  .fw-canvas .node:nth-of-type(5)::after { content: "No"; }
  .fw-canvas .node:nth-of-type(5) { order: 1; }
  .fw-canvas .node:nth-of-type(1) { order: -3; }
  .fw-canvas .node:nth-of-type(2) { order: -2; }
  .fw-canvas .node:nth-of-type(3) { order: -1; }
  .fw-canvas .node:nth-of-type(6) { order: 3; }
  .fw-canvas .node:nth-of-type(7) { order: 4; }
  .fw-canvas .node:nth-of-type(8) { order: 5; }
  .fw-canvas .node:nth-of-type(4) b, .fw-canvas .node:nth-of-type(5) b { white-space: normal; }
  .win-vio { grid-template-columns: 1fr; height: auto; }
  .vth-body { overflow: visible; }
  .vlog { border-left: 0; border-top: 1px solid var(--line); }
  .win-pay { grid-template-columns: 1fr; }
  .pw-rec { border-left: 0; border-top: 1px solid var(--line); }
  .win-camp { height: auto; }
  .cw-row { grid-template-columns: 1fr; row-gap: 10px; }
  .cw-meter .cw-v, .cw-meter .budget, .cw-meter .budget-k { grid-column: 1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis span:nth-child(3) { border-left: 0; }
  .kpis span:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ind-group dl > div { grid-template-columns: 1fr; row-gap: 2px; }
  .founder { grid-template-columns: 1fr; }
  .founder-photo { width: 96px; height: 96px; }
}
@media (max-width: 640px) {
  .hero { padding-top: var(--s-6); }
  .hero-vis { margin-right: 0; }
  .win-hero { grid-template-columns: 1fr; height: auto; border-right: 1px solid var(--line); border-radius: var(--r-win); }
  .hide-sm { display: none; }
  .key-mark { display: none; }
  .keys li { grid-template-columns: 1fr; }
  .win-inbox { height: auto; }
  .pw-row:nth-child(9) { display: none; }
  .fw-act, .fw-crumb > span, .fw-crumb > .ic { display: none; }
  .win-hero .op { display: none; }
  .th-head, .th-body, .th-foot { padding-inline: 14px; }
  .th-foot > span:first-child { font-size: 11.5px; }
  .m-vio { max-width: 90%; }
  .ord { min-width: 0; }
  .win-inbox { grid-template-columns: 1fr; }
  .rail, .ith { display: none; }
  .ilist { border-right: 0; }
  .ilist-ch { overflow-x: auto; scrollbar-width: none; }
  .facts-list { grid-template-columns: 1fr; }
  .facts-list li, .facts-list li + li { padding: var(--s-5) 0; border-left: 0; }
  .facts-list li + li { border-top: 1px solid var(--line); }
  .feat { grid-template-columns: 1fr; }
  .cw-head .tag { display: none; }
  .cw-foot { flex-wrap: wrap; }
  .cw-foot-split { flex-direction: column; align-items: flex-start; }
  .ab-row { grid-template-columns: minmax(0, 1fr) 44px 56px; }
  .ab-row > span:nth-child(3) { display: none; }
  .phone { width: 100%; max-width: 316px; height: 600px; }
  .pw-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .pw-row .pill { grid-row: 2; }
  .pw-row > b { grid-row: 1; grid-column: 2; }
  .pw-cols { display: none; }
  .pw-head .ui-select { display: none; }
  .ticks { flex-direction: column; margin-top: calc(-1 * var(--s-5)); }
  .intg-cols { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .intg-cols > div { padding-left: var(--s-3); }
  .intg-cols li { font-size: 14px; line-height: 1.85; }
  .cmp th, .cmp td { padding: 12px 10px; font-size: 14px; }
  .cmp tbody th { width: 36%; }
  .faq-a { padding-right: 0; }
  .vtab b { font-size: var(--t-17); }
  .vtab span { display: none; }
  .vtab { padding-bottom: var(--s-3); }
  .vio-tabs { gap: var(--s-2); }
  .cta .cta-row .btn, .hero .cta-row .btn { flex: 1 1 auto; }
}

/* ---------- Reduced motion: final states, opacity only ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .btn:active { transform: none; }
}