/* =========================================================
   WBIZ — style.css
   tokens → reset → base → layout → components → sections
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* brand */
  --color-brand: #1BAE63;
  --color-brand-dark: #0F7E45;
  --color-brand-mid: #12874C;
  --color-brand-light: #24BC6E;
  --gradient-brand: linear-gradient(135deg, #24BC6E 0%, #0F7E45 100%);

  /* ink + surface */
  --color-ink: #0B1710;
  --color-body: #4B5750;
  --color-muted: #7F8A82;
  --color-faint: #A6AFA7;
  --color-surface: #FFFFFF;
  --color-surface-2: #FBFCFA;
  --color-surface-3: #F4F6F1;
  --color-surface-accent: #E9F6EE;
  --color-surface-accent-2: #F4FAF6;
  --color-border: #E4E8E0;
  --color-border-soft: #EEF1EB;
  --color-border-accent: #D5EBDE;
  --color-warn-bg: #FDF0DC;
  --color-warn-ink: #8A5A11;

  --gradient-hero: radial-gradient(70% 78% at 10% -6%, #F6F9D6 0%, rgba(246,249,214,0) 58%),
                   radial-gradient(62% 74% at 90% -2%, #D3EFE0 0%, rgba(211,239,224,0) 60%),
                   linear-gradient(180deg, #F4FAF3 0%, #FBFDF9 62%, #FFFFFF 100%);

  /* type */
  --font-sans: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-display: clamp(42px, 6vw, 80px);
  --fs-h2: clamp(32px, 4.2vw, 48px);
  --fs-h3: clamp(24px, 2.6vw, 32px);
  --fs-lead: 19px;
  --fs-body: 18px;
  --fs-small: 17px;
  --fs-ui: 16px;
  --fs-label: 15px;
  --fs-micro: 14px;
  --lh-tight: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.62;

  /* spacing — 4px base */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 112px;

  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-pill: 0 10px 24px -18px rgba(11,23,16,.35);
  --shadow-btn: 0 14px 26px -14px rgba(18,135,76,.75);
  --shadow-btn-lg: 0 20px 36px -18px rgba(18,135,76,.8);
  --shadow-card: 0 24px 46px -30px rgba(11,23,16,.42);
  --shadow-app: 0 2px 4px rgba(11,23,16,.04), 0 70px 120px -60px rgba(11,23,16,.45);

  /* layout */
  --container: 1320px;
  --container-narrow: 1240px;
  --gutter: clamp(20px, 3.4vw, 48px);
  --header-height: 104px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .2s;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: var(--color-brand-mid); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-brand-mid); outline-offset: 3px; border-radius: var(--radius-sm); }
.icon { flex: none; }
.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 100;
  padding: 12px 18px; border-radius: var(--radius-pill);
  background: var(--color-ink); color: #FFFFFF; font-size: var(--fs-ui); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #FFFFFF; }

/* ---------- 3. LAYOUT ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-fluid { max-width: none; }

/* ---------- 4. COMPONENTS ---------- */

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--radius-pill);
  font-size: var(--fs-ui); font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--gradient-brand); color: #FFFFFF; box-shadow: var(--shadow-btn); }
.btn-primary:hover { color: #FFFFFF; filter: brightness(1.06); }
.btn-outline { background: var(--color-surface); border-color: #D6DED4; color: var(--color-ink); }
.btn-outline:hover { color: var(--color-ink); border-color: var(--color-brand-mid); }
.btn-large { padding: 17px 32px; font-size: var(--fs-small); box-shadow: var(--shadow-btn-lg); }
.btn-small { padding: 8px 14px; font-size: var(--fs-micro); box-shadow: none; }

/* eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 9px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.82); border: 1px solid #DEE8DA;
  box-shadow: 0 10px 20px -16px rgba(11,23,16,.35);
  font-size: var(--fs-ui); font-weight: 500; color: #33403A;
}
.eyebrow .eyebrow-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: #E7F5EC; color: var(--color-brand-mid);
  display: flex; align-items: center; justify-content: center;
}

/* badges, chips, pills */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.badge-soft { background: #DCEFE3; color: var(--color-brand-mid); }
.badge-warn { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.badge-count { background: var(--color-brand); color: #FFFFFF; border-radius: var(--radius-pill); padding: 2px 9px; }
.badge-line { border: 1px solid #1A231E; color: inherit; padding: 6px 12px; font-size: var(--fs-label); font-weight: 400; }
.chip { padding: 6px 14px; border-radius: var(--radius-pill); background: #F2F4EF; color: #5A655D; font-size: 13px; font-weight: 500; }
.chip-active { background: var(--gradient-brand); color: #FFFFFF; font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 600; }
.pill-live { background: var(--color-surface-accent); color: var(--color-brand-mid); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand); animation: pulse 2.2s ease-in-out infinite; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #DCEFE3; color: var(--color-brand-mid); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.avatar-soft { width: 34px; height: 34px; background: #E7F5EC; }
.icon-btn { width: 36px; height: 36px; border-radius: 11px; border: 1px solid #E7EBE4; color: var(--color-muted); display: flex; align-items: center; justify-content: center; }
.meter { display: block; height: 6px; border-radius: var(--radius-pill); background: #EFF2EC; overflow: hidden; }
.meter-fill { display: block; height: 100%; width: var(--meter, 50%); background: linear-gradient(90deg, var(--color-brand-light), var(--color-brand-dark)); }

/* header + navigation (one nav for every breakpoint) */
.site-header { position: sticky; top: 0; z-index: 80; background: transparent; transition: background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.site-header.is-scrolled { background: rgba(239,248,242,.68); border-bottom: 1px solid rgba(225,234,227,.72); box-shadow: 0 12px 30px -24px rgba(11,23,16,.4); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.site-header.is-scrolled .main-nav > ul { background: transparent; border-color: transparent; box-shadow: none; }
.site-header.is-scrolled .header-inner { padding-block: 14px 12px; }
.site-header .header-inner { display: flex; align-items: center; gap: var(--space-5); padding-block: clamp(26px, 2.8vw, 40px) clamp(16px, 1.6vw, 22px); }
.site-header .brand { flex: none; }
.site-header .brand img { height: 44px; width: auto; }
.site-header .main-nav { margin-inline: auto; }
.site-header .main-nav > ul {
  display: flex; align-items: center; gap: 2px; padding: 6px;
  border-radius: var(--radius-pill); background: rgba(255,255,255,.8);
  border: 1px solid #E7ECE4; box-shadow: var(--shadow-pill);
}
.site-header .main-nav > ul > li > a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 19px; border-radius: var(--radius-pill);
  color: #3B453D; font-size: var(--fs-ui); font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-header .main-nav > ul > li > a:hover { background: #F1F4EE; color: var(--color-ink); }
.site-header .main-nav .caret { color: #8B958D; }
.site-header .main-nav .current-menu-item > a { background: var(--gradient-brand); color: #FFFFFF; font-weight: 600; }
.site-header .main-nav .current-menu-item > a .caret { color: rgba(255,255,255,.7); }
.site-header .main-nav [data-mega].current-menu-item > .mega-trigger { background: var(--gradient-brand); color: #FFFFFF; font-weight: 600; }
.site-header .main-nav [data-mega].current-menu-item > .mega-trigger .caret { color: rgba(255,255,255,.7); }
.site-header .header-actions { flex: none; display: flex; align-items: center; gap: 10px; }
.site-header .header-login { padding: 11px 16px; border-radius: var(--radius-pill); color: #3B453D; font-size: var(--fs-ui); font-weight: 500; }
.site-header .header-login:hover { background: #F1F4EE; color: var(--color-ink); }
.nav-toggle {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 1px solid #DDE2D9; background: var(--color-surface); cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 1.8px; border-radius: 2px; background: var(--color-ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* hero */
.hero { position: relative; padding-bottom: clamp(56px, 7vw, 96px); }
.hero::before {
  content: ""; position: absolute; inset: calc(var(--header-height) * -1) 0 auto;
  height: clamp(720px, 78vw, 1020px); background: var(--gradient-hero); pointer-events: none; z-index: -1;
}
.hero-content { text-align: center; padding-top: clamp(34px, 4.4vw, 60px); }
.hero-title {
  margin: clamp(22px, 2.8vw, 32px) auto 0; max-width: 960px;
  font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.034em; font-weight: 600;
}
.hero-title em { font-style: normal; font-weight: 600; color: var(--color-brand-mid); }
.hero-lead { margin: clamp(20px, 2.4vw, 28px) auto 0; max-width: 640px; font-size: var(--fs-lead); color: var(--color-body); }
.hero-actions { margin-top: clamp(28px, 3.2vw, 38px); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); line-height: 1; }
.hero-note { margin-top: var(--space-6); font-size: var(--fs-ui); color: #75807A; }
.hero-visual { margin-top: clamp(38px, 4.6vw, 64px); }

/* app mockup */
.app-mockup { margin: 0; }
.app-window {
  display: grid; grid-template-columns: 238px 1fr;
  border-radius: var(--radius-xl); background: var(--color-surface);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-app); overflow: hidden;
}
.app-sidebar { border-right: 1px solid var(--color-border-soft); background: #FAFCF8; padding: var(--space-5) 14px; display: flex; flex-direction: column; gap: var(--space-6); min-height: 560px; }
.app-brand { display: flex; align-items: center; gap: 10px; padding-inline: 6px; font-size: var(--fs-small); font-weight: 700; letter-spacing: -.01em; }
.app-brand .app-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--gradient-brand); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: var(--fs-micro); font-weight: 700; }
.app-brand .badge { margin-left: auto; }
.app-search { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 11px; background: var(--color-surface); border: 1px solid #E7EBE4; color: #98A29A; font-size: var(--fs-label); }
.app-search .app-kbd { margin-left: auto; font-size: 12px; color: #B9C1B9; }
.app-nav-label { padding: 0 8px 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--color-faint); }
.app-nav ul { display: flex; flex-direction: column; gap: 3px; }
.app-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; color: var(--color-body); font-size: var(--fs-label); font-weight: 500; }
.app-nav a .icon { color: var(--color-muted); }
.app-nav a:hover { background: #F1F4EE; color: var(--color-ink); }
.app-nav .is-active a { background: var(--color-surface-accent); color: var(--color-ink); font-weight: 600; }
.app-nav .is-active a .icon { color: var(--color-brand-mid); }
.app-nav .badge-count { margin-left: auto; }
.app-balance { margin-top: auto; padding: 14px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid #E7EBE4; }
.app-balance-head { display: flex; justify-content: space-between; font-size: 13px; color: #75807A; }
.app-balance-head span { color: var(--color-brand-mid); font-weight: 600; }
.app-balance-value { margin-top: 5px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.app-balance .meter { margin-top: 10px; }
.app-main { display: flex; flex-direction: column; }
.app-topbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border-soft); }
.app-greeting-title { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.app-greeting-meta { font-size: var(--fs-micro); color: var(--color-muted); }
.app-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border-soft); }
.kpi { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); border: 1px solid #E9ECE5; }
.kpi-accent { background: linear-gradient(160deg, #EDF8F1 0%, #F7FCF9 100%); border-color: var(--color-border-accent); }
.kpi-label { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-micro); color: #6C776F; }
.kpi-accent .kpi-label { color: #3F6B53; }
.kpi-label .icon { color: var(--color-muted); }
.kpi-accent .kpi-label .icon { color: var(--color-brand-mid); }
.kpi-value { margin-top: var(--space-2); font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.kpi-delta { margin-top: 2px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--color-brand-mid); font-weight: 600; }
.kpi-note { margin-top: 2px; font-size: 13px; color: var(--color-muted); }
.app-workspace { display: grid; grid-template-columns: minmax(240px, 280px) 1fr; flex: 1; }
.chat-list { border-right: 1px solid var(--color-border-soft); }
.chat-filters { display: flex; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--color-border-soft); }
.chat-item { padding: 14px 18px; border-top: 1px solid #F2F4EF; }
.chat-item:first-of-type { border-top: 0; }
.chat-item.is-selected { background: var(--color-surface-accent-2); border-left: 3px solid var(--color-brand); }
.chat-item-head { display: flex; justify-content: space-between; align-items: center; }
.chat-item-name { font-size: var(--fs-label); font-weight: 500; }
.chat-item.is-selected .chat-item-name { font-weight: 600; }
.chat-item-time { font-size: 13px; color: var(--color-muted); }
.chat-item-preview { margin-top: 3px; font-size: var(--fs-micro); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.is-selected .chat-item-preview { color: #5A655D; }
.chat-item-tags { margin-top: 9px; display: flex; gap: 6px; }
.chat-thread { display: flex; flex-direction: column; background: var(--color-surface-2); }
.chat-thread-head { display: flex; align-items: center; gap: 11px; padding: 13px var(--space-5); border-bottom: 1px solid var(--color-border-soft); background: var(--color-surface); }
.chat-thread-who { flex: 1; }
.chat-thread-name { font-size: var(--fs-label); font-weight: 600; }
.chat-thread-meta { font-size: 13px; color: var(--color-muted); }
.chat-messages { flex: 1; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.chat-day { align-self: center; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--color-faint); }
.bubble { max-width: 78%; padding: 12px 15px; font-size: var(--fs-label); }
.bubble-in { border-radius: 18px 18px 18px 6px; background: var(--color-surface); border: 1px solid #EAEDE6; }
.bubble-out { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: #DCF3E5; }
.bubble-meta { display: block; margin-top: 4px; font-size: 12px; color: #497B5E; text-align: right; font-weight: 600; }
.bubble-typing { align-self: flex-end; display: inline-flex; gap: 6px; padding: 12px 15px; border-radius: 18px 18px 6px 18px; background: #EFF3EC; }
.bubble-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-faint); animation: pulse 1.2s ease-in-out infinite; }
.bubble-typing span:nth-child(2) { animation-delay: .2s; }
.bubble-typing span:nth-child(3) { animation-delay: .4s; }
.chat-system { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius-pill); background: #F1F4EE; border: 1px solid #E6EAE2; font-size: 13px; color: #5A655D; }
.chat-system .icon { color: var(--color-brand-mid); }
.chat-composer { display: flex; align-items: center; gap: 10px; padding: 13px var(--space-5); border-top: 1px solid var(--color-border-soft); background: var(--color-surface); }
.chat-input { flex: 1; padding: 11px 16px; border-radius: var(--radius-pill); background: var(--color-surface-3); color: var(--color-faint); font-size: var(--fs-label); }
.send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient-brand); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }

/* footer */
.site-footer { background: #0A110E; color: #A5B0A8; margin-top: var(--space-12); }
.site-footer a { color: #A5B0A8; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer .footer-inner { display: grid; grid-template-columns: 1.4fr 3fr; gap: var(--space-9); padding-block: clamp(56px, 7vw, 92px) var(--space-8); }
.site-footer .footer-brand img { height: 40px; width: auto; }
.site-footer .footer-brand p { margin-top: var(--space-4); font-size: var(--fs-ui); max-width: 250px; }
.site-footer .footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.site-footer .footer-nav-title { font-size: var(--fs-ui); font-weight: 600; color: #FFFFFF; }
.site-footer .footer-nav ul { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 11px; font-size: var(--fs-ui); }
.site-footer .footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding-block: var(--space-6) var(--space-9); border-top: 1px solid #1A231E; font-size: var(--fs-ui); }
.site-footer .footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-left: auto; }
.site-footer .footer-badges { display: flex; flex-wrap: wrap; gap: 10px; }

/* back to top */
.back-to-top {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 40;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gradient-brand); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-btn); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { color: #FFFFFF; transform: translateY(-2px); }

/* content area — CMS-rendered bodies */
.content-area h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -.026em; margin-top: var(--space-9); }
.content-area h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); margin-top: var(--space-7); }
.content-area p, .content-area ul, .content-area ol, .content-area blockquote, .content-area figure, .content-area table { margin-top: var(--space-5); }
.content-area p { max-width: 70ch; color: var(--color-body); }
.content-area ul { list-style: disc; padding-left: 1.2em; }
.content-area ol { list-style: decimal; padding-left: 1.2em; }
.content-area li { margin-top: var(--space-2); color: var(--color-body); }
.content-area blockquote { padding-left: var(--space-5); border-left: 3px solid var(--color-brand); font-size: var(--fs-lead); }
.content-area img { border-radius: var(--radius-lg); }
.content-area table { width: 100%; border-collapse: collapse; }
.content-area th, .content-area td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; }


/* ---------- 5. SECTIONS ---------- */
.section { padding-block: clamp(64px, 7.5vw, 108px); }
.section-alt { background: #F5FAF7; }
.section-head { text-align: center; }
.section-title {
  margin: var(--space-6) auto 0; max-width: 800px;
  font-size: clamp(32px, 4.3vw, 54px); line-height: 1.06; letter-spacing: -.03em; font-weight: 600;
}
.section-title em { font-style: normal; font-weight: 600; color: var(--color-brand-mid); }
.section-lead { margin: var(--space-5) auto 0; max-width: 620px; font-size: var(--fs-body); color: var(--color-body); }
.eyebrow-soft {
  background: #F1FAF4; border-color: #DEEDE4; box-shadow: none;
  padding: 6px 16px 6px 8px; color: var(--color-brand-mid);
  font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow-soft .eyebrow-icon { width: 24px; height: 24px; background: var(--color-surface); }

/* bento grid */
.bento { margin-top: clamp(36px, 4.4vw, 60px); display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento-card {
  grid-column: span 2; min-width: 0; padding: var(--space-6);
  border-radius: var(--radius-xl); background: var(--color-surface);
  border: 1px solid #E7EBE4; box-shadow: 0 24px 50px -40px rgba(11,23,16,.4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -38px rgba(11,23,16,.45); }
.bento-wide {
  grid-column: span 4; padding: 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 26px; align-items: center;
}
.bento-dark { background: var(--color-ink); color: #E9EFEA; border-color: var(--color-ink); box-shadow: 0 34px 70px -44px rgba(11,23,16,.75); }
.bento-dark .bento-title { color: #FFFFFF; }
.bento-dark .bento-text { color: #B7D3C3; }
.bento-dark .feature-icon { background: #16241C; color: #6ACF9B; }
.feature-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--color-surface-accent); color: var(--color-brand-mid); display: flex; align-items: center; justify-content: center; }
.bento-title { margin-top: var(--space-4); font-size: 21px; font-weight: 600; letter-spacing: -.016em; }
.bento-wide .bento-title { font-size: 23px; letter-spacing: -.018em; }
.bento-text { margin-top: 9px; font-size: var(--fs-small); color: var(--color-body); }

/* bento sub-panels */
.mini-panel { border-radius: var(--radius-lg); background: var(--color-surface-2); border: 1px solid #EDF0EA; overflow: hidden; }
.mini-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid #EDF0EA; font-size: 13px; font-weight: 600; color: #33403A; }
.mini-panel-head span { font-size: 12px; font-weight: 400; color: var(--color-muted); }
.mini-row { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid #F2F4EF; }
.mini-row:last-child { border-bottom: 0; }
.mini-row-name { flex: 1; font-size: 13px; font-weight: 500; }
.avatar-mini { width: 26px; height: 26px; border-radius: 50%; background: #DCEFE3; color: var(--color-brand-mid); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.avatar-mini-lime { background: #E6EFDC; color: #4C6B2B; }
.avatar-mini-blue { background: #DEEAF0; color: #2C5A72; }
.avatar-mini-dark { width: 32px; height: 32px; font-size: 12px; background: #1B2A22; color: #6ACF9B; }
.badge-mute { background: #EFF2EC; color: #5A655D; }
.quote-panel { margin-top: var(--space-4); padding: 13px 14px; border-radius: 14px; background: var(--color-surface-accent-2); border: 1px solid #E1EFE7; }
.quote-panel p { font-size: 13px; color: #33403A; line-height: 1.5; }
.quote-panel-meta { margin-top: 9px; display: flex; justify-content: space-between; font-size: 12px; color: var(--color-muted); }
.quote-panel-meta span { color: var(--color-brand-mid); font-weight: 600; }
.call-panel { margin-top: var(--space-4); display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--color-ink); }
.call-panel-who { flex: 1; min-width: 0; }
.call-panel-name { display: block; font-size: 13px; font-weight: 600; color: #FFFFFF; }
.call-panel-meta { display: block; font-size: 12px; color: #93A29A; }
.call-answer { width: 30px; height: 30px; border-radius: 50%; background: var(--gradient-brand); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.flow-panel { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 7px; }
.flow-step { padding: 9px 12px; border-radius: 11px; background: var(--color-surface-2); border: 1px solid #EDF0EA; font-size: 12px; font-weight: 500; color: #33403A; }
.flow-step + .flow-step { margin-left: 16px; }
.flow-step + .flow-step + .flow-step { margin-left: 32px; }
.flow-step-accent { background: var(--color-surface-accent-2); border-color: #E1EFE7; color: var(--color-brand-mid); }
.funnel { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 9px; }
.funnel-row { display: flex; align-items: center; gap: 10px; }
.funnel-label { width: 62px; font-size: 12px; color: var(--color-muted); }
.funnel-value { font-size: 12px; font-weight: 600; }
.funnel .meter { flex: 1; height: 8px; }
.meter-fill-2 { background: #4EC286; }
.meter-fill-3 { background: #8FDCB3; }
.tag-cloud { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 7px; }
.tag { padding: 5px 11px; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid #EDF0EA; font-size: 12px; font-weight: 500; color: var(--color-body); }
.tag-accent { background: var(--color-surface-accent-2); border-color: #E1EFE7; color: var(--color-brand-mid); }
.code-panel { border-radius: var(--radius-lg); background: rgba(4,22,14,.55); border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.code-panel-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #DCEFE4; }
.code-panel-body { padding: 14px; font-size: 13px; line-height: 1.85; color: #DCEFE4; }
.code-dim { color: #83A692; }
.code-indent { padding-left: 16px; }
.code-status { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.badge-method { background: rgba(106,207,155,.18); color: #A8E9C6; }
.badge-ok { background: rgba(106,207,155,.22); color: #A8E9C6; }


/* ---------- bento depth treatment ---------- */
.bento-card {
  --card-grad: linear-gradient(158deg, #F4FBF6 0%, #EAF7F0 55%, #DFF2E7 100%);
  background: var(--card-grad);
  border-radius: 26px; border-color: transparent;
  box-shadow: 0 2px 3px rgba(11,23,16,.04), 0 26px 48px -34px rgba(11,23,16,.42);
  overflow: hidden; position: relative;
}
.bento-card:hover { transform: translateY(-6px); box-shadow: 0 40px 66px -34px rgba(11,23,16,.5); }
.bento-inbox { --card-grad: linear-gradient(158deg, #F1FAF4 0%, #E6F5EC 46%, #D8EFE2 100%); padding-bottom: 0; align-items: end; }
.bento-mint { --card-grad: linear-gradient(158deg, #F4FBF6 0%, #E9F6EE 60%, #DCF0E5 100%); }
.bento-inbox .bento-copy { padding-bottom: 28px; }
.bento-dark { --card-grad: linear-gradient(152deg, #14563A 0%, #0C3A27 58%, #082A1D 100%); border-color: transparent; }
.bento-dark:hover { box-shadow: 0 44px 70px -36px rgba(11,23,16,.72); }
.feature-icon { background: var(--color-surface); border: 1px solid #E2EEE7; box-shadow: 0 6px 14px -8px rgba(11,23,16,.35); width: 46px; height: 46px; border-radius: 15px; }
.bento-dark .feature-icon { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #A8E9C6; }
.bento-title { font-size: 22px; }
.tag-glass { background: rgba(255,255,255,.85); border-color: #DDEAE2; padding: 6px 12px; font-size: 13px; color: #33403A; }

/* phone mockup that bleeds off the card */
.device-stage { position: relative; min-height: 300px; }
.device-phone {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 268px; padding: 9px 9px 0; border-radius: 38px 38px 0 0;
  background: linear-gradient(160deg, #22312A 0%, #0B1710 100%);
  box-shadow: 0 30px 60px -26px rgba(11,23,16,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.device-screen { border-radius: 30px 30px 0 0; background: #F2F6F1; overflow: hidden; }
.device-chat-head { padding: 9px 14px 10px; background: var(--gradient-brand); color: #FFFFFF; display: flex; align-items: center; gap: 9px; }
.device-chat-who { flex: 1; }
.device-chat-name { display: block; font-size: 13px; font-weight: 600; }
.device-chat-status { display: block; font-size: 12px; color: rgba(255,255,255,.75); }
.avatar-mini-glass { background: rgba(255,255,255,.22); color: #FFFFFF; }
.device-chat-body { padding: 14px 12px 22px; display: flex; flex-direction: column; gap: 8px; }
.device-bubble { max-width: 84%; padding: 9px 12px; font-size: 13px; box-shadow: 0 2px 5px rgba(11,23,16,.07); }
.device-bubble-in { align-self: flex-start; border-radius: 14px 14px 14px 4px; background: #FFFFFF; }
.device-bubble-out { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #DCF3E5; }
.device-bubble-meta { display: block; margin-top: 3px; font-size: 12px; color: #497B5E; text-align: right; font-weight: 600; }
.device-owner-row { padding: 9px 12px; display: flex; align-items: center; gap: 8px; background: var(--color-surface); border-bottom: 1px solid #EAEFE9; }
.device-owner-row .avatar-mini { width: 22px; height: 22px; }
.device-owner-name { flex: 1; font-size: 12px; color: #5A655D; font-weight: 500; }

/* stacked quote panel */
.stack-panel { position: relative; margin-top: 22px; min-height: 132px; }
.stack-panel-ghost { position: absolute; inset: 12px 8px auto 0; height: 96px; border-radius: var(--radius-lg); background: rgba(255,255,255,.7); border: 1px solid #E6EFE9; transform: rotate(-2deg); }
.stack-panel-front { position: relative; padding: 14px 15px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid #E2EEE7; box-shadow: 0 18px 34px -22px rgba(11,23,16,.4); }
.stack-panel-front p { font-size: var(--fs-micro); color: #33403A; line-height: 1.5; }
.stack-panel-meta { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--color-muted); }

/* stat card + sparkline */
.stat-card { margin-top: var(--space-5); padding: var(--space-4); border-radius: 18px; background: var(--color-surface); border: 1px solid #E4EBE3; box-shadow: 0 16px 30px -22px rgba(11,23,16,.35); }
.stat-card-head { display: flex; align-items: baseline; justify-content: space-between; }
.stat-card-value { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.stat-card-note { margin-top: 2px; font-size: 13px; color: var(--color-muted); }
.spark { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: var(--space-3); }
.spark-bar { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: #DCEFE3; }
.spark-bar-mid { background: #6ACF9B; }
.spark-bar-peak { background: linear-gradient(180deg, #24BC6E, #0F7E45); }

/* flow steps with depth */
.flow-panel { margin-top: var(--space-5); gap: 8px; }
.flow-step { padding: 11px 14px; border-radius: 14px; background: var(--color-surface); border: 1px solid #E4EBE3; box-shadow: 0 8px 16px -12px rgba(11,23,16,.3); font-size: 13px; }
.flow-step-accent { background: linear-gradient(135deg, #EAF7F0 0%, #FFFFFF 100%); border-color: #D7EBE1; box-shadow: 0 8px 16px -12px rgba(18,135,76,.4); font-weight: 600; }
.flow-step + .flow-step { margin-left: 18px; }
.flow-step + .flow-step + .flow-step { margin-left: 36px; }

/* call card + waveform */
.call-card { margin-top: 22px; padding: var(--space-4); border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.call-card-who { flex: 1 1 150px; min-width: 150px; }
.call-card-name { display: block; font-size: var(--fs-micro); font-weight: 600; color: #FFFFFF; }
.call-card-meta { display: block; font-size: 13px; color: #9FC3AE; }
.avatar-mini-dark { width: 40px; height: 40px; background: rgba(255,255,255,.16); color: #A8E9C6; font-size: 13px; }
.call-answer-lg { width: 38px; height: 38px; box-shadow: 0 10px 20px -8px rgba(36,188,110,.7); }
.waveform { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: var(--space-3); }
.waveform span { flex: 1; height: var(--h); border-radius: 2px; background: rgba(168,233,198,.5); }
.waveform span.is-peak { background: #A8E9C6; }

/* brand tile */
.bento-brand {
  --card-grad: linear-gradient(150deg, #2FC77A 0%, #12874C 58%, #0B6238 100%);
  border-color: transparent; min-height: 250px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.bento-brand:hover { box-shadow: 0 44px 70px -34px rgba(15,126,69,.65); }
.bento-brand-glow { position: absolute; inset: -40% -30% auto auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
.bento-brand-mark { display: flex; align-items: center; justify-content: center; }
.bento-brand-mark img { width: 176px; height: auto; filter: brightness(0) invert(1); }
.bento-brand-title { margin-top: var(--space-5); font-size: 21px; font-weight: 600; letter-spacing: -.016em; color: #FFFFFF; }
.bento-brand-note { margin-top: var(--space-2); font-size: var(--fs-label); color: rgba(255,255,255,.82); }

/* code panel window */
.code-panel { border-radius: 18px; background: rgba(4,22,14,.55); box-shadow: 0 26px 46px -28px rgba(0,0,0,.55); }
.win-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.code-panel-head { gap: 8px; }


/* ---------- feature rows ---------- */
.feature-rows { padding-top: clamp(24px, 3vw, 40px); }
.feature-rows-inner { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 116px); }
.feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(32px, 4.4vw, 64px); align-items: center; }
.feature-copy { max-width: 520px; }
.row-eyebrow { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-surface-accent); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand-mid); }
.row-title { margin-top: var(--space-4); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.026em; font-weight: 600; }
.row-text { margin-top: var(--space-4); font-size: var(--fs-body); color: var(--color-body); }
.row-list { margin-top: 22px; display: flex; flex-direction: column; gap: var(--space-3); }
.row-list li { display: flex; gap: var(--space-3); font-size: var(--fs-small); color: #33403A; }
.row-list .icon { margin-top: 4px; }
.row-link { display: inline-flex; align-items: center; gap: 9px; margin-top: var(--space-6); font-size: var(--fs-small); font-weight: 600; transition: gap var(--dur) var(--ease); }
.row-link:hover { gap: 14px; }

.feature-panel { min-width: 0; padding: var(--space-5); border-radius: 26px; box-shadow: 0 30px 60px -40px rgba(11,23,16,.45); }
.panel-mint { background: linear-gradient(158deg, #F1FAF4 0%, #E6F5EC 46%, #D8EFE2 100%); }
.panel-light { background: linear-gradient(158deg, #F4FBF6 0%, #EAF7F0 55%, #DFF2E7 100%); }
.panel-dark { background: linear-gradient(152deg, #14563A 0%, #0C3A27 58%, #082A1D 100%); }
.feature-panel-inner { border-radius: 18px; background: var(--color-surface); box-shadow: 0 16px 34px -24px rgba(11,23,16,.35); overflow: hidden; min-height: 460px; display: flex; flex-direction: column; }
.feature-panel-inner > .split-panel, .feature-panel-inner > .canvas, .feature-panel-inner > .call-stack { flex: 1; }
.panel-dark .feature-panel-inner { background: rgba(4,22,14,.45); }

.panel-head { display: flex; align-items: center; gap: var(--space-3); padding: 15px 18px; border-bottom: 1px solid var(--color-border-soft); }
.panel-title { font-size: var(--fs-ui); font-weight: 600; display: block; }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; }
.panel-sub { display: block; font-size: 13px; color: var(--color-muted); }
.panel-meta { margin-left: auto; font-size: var(--fs-micro); color: var(--color-muted); }
.panel-filter { padding: 5px 11px; border-radius: var(--radius-pill); background: var(--color-surface-3); font-size: 13px; font-weight: 500; color: #5A655D; }
.panel-filter:first-of-type { margin-left: auto; }
.panel-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding: 15px 18px; background: #FAFCF9; font-size: var(--fs-micro); color: #5A655D; }
.panel-foot strong { color: var(--color-ink); }
.ghost-btn { margin-left: auto; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: 0 6px 14px -10px rgba(11,23,16,.3); font-size: var(--fs-micro); font-weight: 600; color: var(--color-ink); }
.badge-lg { padding: 5px 12px; border-radius: var(--radius-pill); font-size: 13px; }

/* data table */
.table-head, .table-row { display: grid; align-items: center; }
.table-queue .table-head, .table-queue .table-row { grid-template-columns: 1.4fr 1fr .7fr .8fr; }
.table-head { padding: 12px 18px; background: #FAFCF9; border-bottom: 1px solid var(--color-border-soft); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.table-row { padding: 14px 18px; border-bottom: 1px solid #F4F6F1; font-size: var(--fs-label); color: #33403A; }
.table-row:last-child { border-bottom: 0; }
.cell-title { display: block; font-weight: 600; }
.cell-sub { display: block; font-size: 13px; color: var(--color-muted); }
.cell-dim { color: var(--color-faint); }

/* split panel (AI agent) */
.split-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.split-panel-side { padding: 18px; border-right: 1px solid var(--color-border-soft); }
.split-panel-main { padding: 18px; background: #FBFDFA; }
.toggle-row { margin-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: var(--radius-md); background: var(--color-surface-accent-2); font-size: var(--fs-label); }
.switch { width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--gradient-brand); padding: 3px; display: flex; justify-content: flex-end; }
.switch-knob { width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; }
.setting-row { margin-top: var(--space-2); display: flex; justify-content: space-between; padding: 10px 13px; border-radius: var(--radius-md); background: #FAFCF9; font-size: var(--fs-micro); }
.setting-value { color: var(--color-brand-mid); font-weight: 600; }
.setting-dim { color: #5A655D; }
.chat-messages-compact { padding: 0; margin-top: var(--space-4); gap: 9px; }
.chat-messages-compact .bubble { max-width: 88%; padding: 10px 13px; font-size: var(--fs-micro); }
.chat-messages-compact .bubble-in { box-shadow: 0 2px 6px rgba(11,23,16,.06); border: 0; }
.chat-note { align-self: center; font-size: 13px; color: var(--color-muted); }

/* flow canvas */
.canvas { padding: 22px 20px; background: radial-gradient(#E7EDE6 1px, transparent 1px) 0 0 / 18px 18px, #FBFDFA; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.node { padding: 12px 15px; border-radius: 14px; background: var(--color-surface); box-shadow: 0 10px 20px -14px rgba(11,23,16,.35); min-width: 210px; }
.node-accent { background: linear-gradient(135deg, #EAF7F0, #FFFFFF); box-shadow: 0 10px 20px -14px rgba(18,135,76,.4); min-width: 240px; }
.node-indent { margin-left: 40px; }
.node-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--color-muted); }
.node-label-accent { color: var(--color-brand-mid); }
.node-title { display: block; font-size: var(--fs-label); font-weight: 500; }
.node-note { display: block; margin-top: 4px; font-size: 13px; color: var(--color-muted); }
.node-chips { display: flex; gap: 6px; margin-top: var(--space-2); }
.node-chips .chip { padding: 3px 9px; border-radius: 7px; font-size: 12px; }
.node-stem { width: 2px; height: 16px; background: #D6DED4; margin-left: 26px; }
.node-stem-deep { margin-left: 66px; }
.node-branch { margin-left: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; width: calc(100% - 40px); }
.api-node { margin-left: 40px; margin-top: 4px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-ink); font-size: 13px; color: #DCEFE4; }
.dot-static { animation: none; background: #6ACF9B; }

/* metrics */
.metric-row { padding: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-3); border-bottom: 1px solid var(--color-border-soft); }
.metric-label { display: block; font-size: 13px; color: var(--color-muted); }
.metric-value { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.metric-value-accent { color: var(--color-brand-mid); }
.funnel-lg { padding: 18px; gap: 11px; margin-top: 0; border-bottom: 1px solid var(--color-border-soft); }
.funnel-lg .funnel-label { width: 86px; font-size: var(--fs-micro); }
.funnel-lg .meter { height: 10px; }
.funnel-lg .funnel-value { width: 50px; text-align: right; font-size: var(--fs-micro); }
.meter-fill-4 { background: #C9A46B; }

.call-stack .call-card { margin-top: 0; }

/* call log */
.call-stack { padding: 18px; }
.log { margin-top: var(--space-4); border-radius: var(--radius-lg); background: rgba(4,22,14,.4); overflow: hidden; }
.log-head { display: flex; justify-content: space-between; padding: 13px 16px; font-size: var(--fs-label); font-weight: 600; color: #DCEFE4; border-bottom: 1px solid rgba(255,255,255,.1); }
.log-row { display: flex; align-items: center; gap: var(--space-3); padding: 13px 16px; font-size: var(--fs-micro); color: #DCEFE4; border-bottom: 1px solid rgba(255,255,255,.07); }
.log-row:last-child { border-bottom: 0; }
.log-icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.log-icon-in { background: rgba(106,207,155,.2); color: #A8E9C6; }
.log-icon-miss { background: rgba(201,164,107,.22); color: #E8CF9F; }
.log-text { flex: 1; }
.log-dur { color: #9FC3AE; }
.call-btn { padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(255,255,255,.1); color: #DCEFE4; font-size: var(--fs-micro); font-weight: 500; }
.call-btn-accept { background: var(--gradient-brand); color: #FFFFFF; font-weight: 600; }


/* ---------- how it works ---------- */
.step-grid { margin-top: clamp(36px, 4.4vw, 60px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: stretch; }
.step-card {
  padding: var(--space-6); border-radius: 26px; border: 1px solid transparent;
  box-shadow: 0 26px 48px -34px rgba(11,23,16,.42);
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.step-card:hover { transform: translateY(-6px); box-shadow: 0 40px 66px -34px rgba(11,23,16,.5); }
.step-mint { background: linear-gradient(158deg, #F1FAF4 0%, #E6F5EC 46%, #D8EFE2 100%); }
.step-light { background: linear-gradient(158deg, #F4FBF6 0%, #EAF7F0 55%, #DFF2E7 100%); }
.step-dark { background: linear-gradient(152deg, #14563A 0%, #0C3A27 58%, #082A1D 100%); }
.step-num { width: 46px; height: 46px; border-radius: 15px; background: var(--color-surface); color: var(--color-brand-mid); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-ui); font-weight: 700; box-shadow: 0 6px 14px -8px rgba(11,23,16,.35); }
.step-dark .step-num { background: rgba(255,255,255,.12); color: #A8E9C6; }
.step-title { margin-top: var(--space-4); font-size: 22px; font-weight: 600; letter-spacing: -.018em; }
.step-dark .step-title { color: #FFFFFF; }
.step-text { margin-top: 9px; font-size: var(--fs-small); color: var(--color-body); }
.step-dark .step-text { color: #B7D3C3; }
.step-list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 9px; }
.step-card .step-list { margin-bottom: 0; }
.step-list li { position: relative; padding-left: var(--space-4); font-size: var(--fs-label); color: #33403A; }
.step-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); }
.step-dark .step-list li { color: #DCEFE4; }
.step-dark .step-list li::before { background: #6ACF9B; }
.step-panel { margin: 20px 0 22px; }
.step-panel-inner { border-radius: 18px; background: var(--color-surface); box-shadow: 0 16px 34px -24px rgba(11,23,16,.35); overflow: hidden; min-height: 270px; }
.step-dark .step-panel-inner { background: rgba(4,22,14,.45); }
.step-badge-sm { width: 34px; height: 34px; border-radius: 11px; background: var(--color-surface-accent); color: var(--color-brand-mid); display: flex; align-items: center; justify-content: center; font-size: var(--fs-micro); font-weight: 700; }
.check-list, .team-list { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--radius-md); background: #FAFCF9; font-size: var(--fs-micro); color: #5A655D; }
.check-row.is-done { background: var(--color-surface-accent-2); color: var(--color-ink); }
.check-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--color-brand); color: #FFFFFF; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.check-dot-idle { background: #E4EAE2; }
.team-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-micro); }
.team-name { flex: 1; }
.step-dark .panel-title, .step-dark .panel-meta { color: #DCEFE4; }
.metric-row-flush { border-bottom: 0; }
.spark-wrap { padding: 0 18px 18px; }
.spark-lg { height: 74px; padding: 14px; border-radius: 14px; background: #FAFCF9; }
.step-dark .spark-lg { background: rgba(255,255,255,.06); }
.step-dark .metric-label { color: #9FC3AE; }
.step-dark .metric-value { color: #FFFFFF; }
.step-dark .metric-value-accent { color: #A8E9C6; }
.step-dark .panel-head { border-bottom-color: rgba(255,255,255,.1); }


/* ---------- comparison ---------- */
.compare-shell { margin-top: clamp(36px, 4.4vw, 56px); padding: var(--space-5); border-radius: 26px; background: linear-gradient(158deg, #F1FAF4 0%, #E6F5EC 46%, #D8EFE2 100%); box-shadow: 0 30px 60px -40px rgba(11,23,16,.45); }
.compare-table { border-radius: 18px; background: var(--color-surface); box-shadow: 0 16px 34px -24px rgba(11,23,16,.35); overflow: hidden; }
.compare-head, .compare-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; align-items: center; padding: 18px 22px; }
.compare-head { background: #FAFCF9; border-bottom: 1px solid var(--color-border-soft); }
.compare-head-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }
.compare-head-brand img { height: 22px; width: auto; }
.compare-head-other { font-size: var(--fs-label); font-weight: 600; color: var(--color-muted); }
.compare-row { border-bottom: 1px solid #F0F3EE; font-size: var(--fs-ui); }
.compare-row:last-child { border-bottom: 0; }
.compare-label { font-weight: 500; }
.compare-yes { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--color-ink); }
.compare-no { display: flex; align-items: center; gap: 10px; color: #6C776F; }



/* ---------- teams + industries (v2) ---------- */
.section-head-sub { margin-top: clamp(64px, 7vw, 104px); }
.section-title-sm { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.028em; }
.team-grid { margin-top: clamp(30px, 3.4vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.team-card { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; overflow: hidden; background: linear-gradient(158deg, #F4FBF6 0%, #EAF7F0 52%, #DDF1E5 100%); box-shadow: 0 16px 34px -26px rgba(11,23,16,.34); transition: transform .26s var(--ease), box-shadow .26s ease; }
.team-media { position: relative; display: block; margin: -28px -28px 22px; aspect-ratio: 16 / 9; overflow: hidden; background: #E8EFE9; }
.team-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.team-card:hover .team-media img { transform: scale(1.04); }
.team-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,23,16,.05) 40%, rgba(11,23,16,.5) 100%); }
.team-tag-on-media { position: absolute; left: 18px; bottom: 14px; background: rgba(255,255,255,.94); }
.team-card:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -28px rgba(11,23,16,.4); }
.team-tag { align-self: flex-start; padding: 5px 13px; border-radius: 999px; background: var(--color-surface); box-shadow: 0 6px 14px -10px rgba(11,23,16,.35); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand-mid); }
.team-card .team-title { margin-top: 18px; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.team-card .team-text { margin-top: 10px; font-size: var(--fs-ui); color: var(--color-body); }
.team-list { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(11,23,16,.09); display: flex; flex-direction: column; gap: 11px; }
.team-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-label); color: #37453C; }
.team-list .icon { flex: none; margin-top: 3px; }
.industry-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 18px; }
.industry-card { display: flex; flex-direction: column; padding: 26px; border-radius: 22px; background: var(--color-surface); box-shadow: 0 20px 42px -32px rgba(11,23,16,.42); transition: transform .24s var(--ease), box-shadow .24s ease; }
.industry-card:hover { transform: translateY(-5px); box-shadow: 0 32px 56px -32px rgba(11,23,16,.46); }
.industry-icon { width: 44px; height: 44px; border-radius: 14px; background: #F0F9F4; color: var(--color-brand-mid); display: flex; align-items: center; justify-content: center; }
.industry-card .industry-title { margin-top: 18px; font-size: 20px; letter-spacing: -.018em; font-weight: 600; }
.industry-card .industry-text { margin-top: 9px; font-size: var(--fs-ui); color: var(--color-body); }
.industry-outcome { margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 9px; font-size: var(--fs-label); font-weight: 600; color: var(--color-brand-mid); }
.industry-outcome .icon { flex: none; }
.industry-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 600; }
.industry-link:hover { color: var(--color-ink); gap: 13px; }
.industry-cta { margin-top: 34px; padding: 26px 30px; border-radius: 22px; background: linear-gradient(158deg, #F1FAF4 0%, #E6F5EC 50%, #D8EFE2 100%); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.industry-cta p { font-size: var(--fs-body); color: #37453C; max-width: 520px; }
.industry-cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.btn-dark { padding: 13px 24px; border-radius: 999px; background: var(--color-ink); color: #FFFFFF; font-size: var(--fs-ui); font-weight: 600; transition: transform .2s ease; }
.btn-dark:hover { color: #FFFFFF; transform: translateY(-2px); }
.btn-white { padding: 13px 24px; border-radius: 999px; background: var(--color-surface); color: var(--color-ink); font-size: var(--fs-ui); font-weight: 600; box-shadow: 0 10px 22px -16px rgba(11,23,16,.5); transition: transform .2s ease; }
.btn-white:hover { color: var(--color-ink); transform: translateY(-2px); }


/* ---------- industries (image rail) ---------- */
.industries { background: #FFFFFF; }
.ind-pin { padding: clamp(64px, 7.5vw, 108px) 0; }
.ind-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-6); }
.ind-head > div { max-width: 620px; }
.ind-head .section-title { margin-top: var(--space-5); font-size: clamp(30px, 3.8vw, 48px); }
.ind-head-note { max-width: 340px; font-size: var(--fs-body); color: var(--color-body); }
.ind-viewport { margin-top: clamp(30px, 3.6vw, 48px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: clamp(20px, 3.4vw, 48px); scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.ind-viewport::-webkit-scrollbar { display: none; }
.ind-nav { margin-top: 18px; display: flex; gap: 10px; }
.ind-arrow { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #F1F5F0; color: var(--color-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.ind-arrow:hover { background: #E2EBE4; transform: translateY(-2px); }
.ind-arrow-dark { background: var(--color-ink); color: #FFFFFF; }
.ind-arrow-dark:hover { background: var(--color-ink); transform: translateY(-2px); }
.ind-track { display: flex; gap: var(--space-5); padding: 6px clamp(20px, 3.4vw, 48px) 26px; }
.ind-card { scroll-snap-align: start; flex: none; width: clamp(280px, 30vw, 380px); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--color-surface); box-shadow: 0 14px 30px -22px rgba(11,23,16,.28); }
.ind-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #E8EFE9; }
.ind-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.ind-card:hover .ind-card-media img { transform: scale(1.05); }
.ind-card:hover { box-shadow: 0 22px 42px -26px rgba(11,23,16,.36); }
.ind-card-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,23,16,0) 42%, rgba(11,23,16,.62) 100%); }
.ind-card-num { position: absolute; left: 16px; top: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-brand-mid); }
.ind-card-name { position: absolute; left: 18px; bottom: 14px; font-size: 22px; font-weight: 600; letter-spacing: -.018em; color: #FFFFFF; }
.ind-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; }
.ind-card-text { font-size: var(--fs-ui); color: var(--color-body); }
.ind-card-out { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 9px; font-size: var(--fs-label); font-weight: 600; color: var(--color-brand-mid); }
.ind-card-out .icon { flex: none; }
.ind-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.ind-foot p { font-size: var(--fs-ui); color: #6C776F; max-width: 520px; }
.btn-soft { padding: 13px 24px; border-radius: 999px; background: #F1F5F0; color: var(--color-ink); font-size: var(--fs-ui); font-weight: 600; transition: transform .2s ease; }
.btn-soft:hover { color: var(--color-ink); transform: translateY(-2px); }

/* ---------- pricing ---------- */
.billing-toggle { margin-top: 30px; display: inline-flex; align-items: center; gap: var(--space-4); padding: 8px 10px 8px 18px; border-radius: 999px; background: #F4F7F2; }
.billing-label { font-size: var(--fs-ui); font-weight: 500; color: #6C776F; transition: color .2s ease; }
.billing-label.is-active { font-weight: 700; color: var(--color-ink); }
.billing-switch { width: 58px; height: 32px; border-radius: 999px; border: 0; background: var(--color-brand); padding: 4px; display: flex; align-items: center; cursor: pointer; }
.billing-knob { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 3px 8px -2px rgba(11,23,16,.4); transform: translateX(28px); transition: transform .26s var(--ease); }
.billing-switch[aria-pressed="false"] .billing-knob { transform: translateX(0); }
.billing-note { padding: 5px 12px; border-radius: 999px; background: var(--color-surface); box-shadow: 0 6px 14px -10px rgba(11,23,16,.4); font-size: 14px; font-weight: 600; color: var(--color-brand-mid); }
.plan-grid { margin-top: clamp(34px, 4vw, 52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: stretch; }
.plan-grid-home { max-width: 1040px; margin-left: auto; margin-right: auto; }
.pricing-intervals { margin: 28px auto 0; display: flex; width: max-content; gap: 4px; padding: 6px; border-radius: 999px; background: #EAF7F0; }
.pricing-intervals[hidden] { display: none; }
.billing-opt { border: 0; background: transparent; color: #607168; padding: 10px 20px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.billing-opt.is-active { background: #FFFFFF; color: var(--color-brand-mid); box-shadow: var(--shadow-pill); }
.price-discount { display: block; margin-top: 8px; color: var(--color-brand-mid) !important; font-size: 13px !important; font-weight: 600; }
.plan-check { color: var(--color-brand-mid); font-weight: 700; flex: none; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 26px; }
.plan-free { background: #F7FAF6; box-shadow: 0 22px 46px -36px rgba(11,23,16,.4); }
.plan-dark { padding: 32px; background: linear-gradient(158deg, #0F2A1C 0%, #0B1710 62%); color: #E9F2EC; box-shadow: 0 34px 64px -34px rgba(11,23,16,.7); }
.plan-scale { background: linear-gradient(158deg, #F4FBF6 0%, #EAF7F0 55%, #DDF1E5 100%); box-shadow: 0 26px 50px -36px rgba(11,23,16,.42); }
.plan-badge { position: absolute; top: 24px; right: 24px; padding: 6px 13px; border-radius: 999px; background: var(--color-brand); color: #FFFFFF; font-size: 14px; font-weight: 600; }
.plan-tag { align-self: flex-start; padding: 5px 13px; border-radius: 999px; background: var(--color-surface); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand-mid); }
.plan-tag-dark { background: rgba(255,255,255,.1); color: #7BD9A6; }
.plan-price { margin-top: var(--space-5); display: flex; align-items: baseline; gap: 8px; }
.plan-price strong { font-size: clamp(38px, 4vw, 46px); font-weight: 600; letter-spacing: -.032em; }
.plan-dark .plan-price strong { color: #FFFFFF; }
.plan-price span { font-size: var(--fs-ui); color: #6C776F; }
.plan-dark .plan-price span { color: #9DAFA4; }
.plan-text { margin-top: var(--space-3); font-size: var(--fs-ui); color: var(--color-body); }
.plan-dark .plan-text { color: #A9BBB0; }
.plan-cta { margin-top: var(--space-5); text-align: center; }
.btn-brand { padding: 14px 20px; border-radius: 999px; background: var(--color-brand); color: #FFFFFF; font-size: var(--fs-ui); font-weight: 600; box-shadow: 0 14px 28px -16px rgba(27,174,99,.9); transition: transform .2s ease, background .2s ease; }
.btn-brand:hover { background: #37C57F; color: #FFFFFF; transform: translateY(-2px); }
.plan-list { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(11,23,16,.09); display: flex; flex-direction: column; gap: var(--space-3); }
.plan-dark .plan-list { border-top-color: rgba(255,255,255,.12); }
.plan-list li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-ui); color: #37453C; }
.plan-dark .plan-list li { color: #D3E2D9; }
.plan-list .icon { flex: none; margin-top: 3px; }
@media (max-width: 680px) { .pricing-intervals { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 20px; } .billing-opt { padding: 10px 6px; } }
@media (min-width: 681px) and (max-width: 980px) { .plan-grid-home { max-width: 760px; } }
.cost-strip { margin-top: var(--space-5); padding: var(--space-6); border-radius: 24px; background: #F7FAF6; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 22px; align-items: center; }
.cost-label { display: block; font-size: var(--fs-label); color: #6C776F; }
.cost-value { display: block; margin-top: 4px; font-size: 24px; font-weight: 600; letter-spacing: -.022em; }
.cost-value em { font-size: var(--fs-label); font-weight: 400; font-style: normal; color: #6C776F; }
.cost-zero { color: var(--color-brand-mid); }
.note-center { margin-top: var(--space-3); font-size: var(--fs-label); color: var(--color-muted); text-align: center; }


/* ---------- faq ---------- */
.faq { background: #FFFFFF; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(32px, 4vw, 72px); align-items: start; }
.faq-intro { max-width: 420px; }
.faq-intro .section-title { margin-top: var(--space-5); font-size: clamp(30px, 3.8vw, 48px); }
.faq-card { margin-top: var(--space-6); padding: 22px; border-radius: 20px; background: var(--color-surface); box-shadow: 0 20px 42px -34px rgba(11,23,16,.45); }
.faq-card p { font-size: var(--fs-ui); color: #37453C; }
.faq-card .btn { margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 9px; }
.faq-item { border-top: 1px solid rgba(11,23,16,.09); transition: background .26s ease, box-shadow .26s ease, border-radius .26s ease; }
.faq-item:first-child { border-top: 0; }
.faq-item.is-open { background: var(--color-surface); border-radius: 18px; box-shadow: 0 22px 44px -34px rgba(11,23,16,.45); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 18px; padding: 22px 20px; background: none; border: 0; text-align: left; cursor: pointer; }
.faq-num { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: #9AA79E; }
.faq-text { flex: 1; font-size: var(--fs-body); font-weight: 600; letter-spacing: -.014em; color: var(--color-ink); }
.faq-sign { flex: none; width: 30px; height: 30px; border-radius: 10px; background: #EEF2EC; color: #37453C; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; transition: background .22s ease, color .22s ease, transform .26s var(--ease); }
.faq-item.is-open .faq-sign { background: var(--color-brand); color: #FFFFFF; transform: rotate(180deg); }
.faq-a { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s var(--ease), opacity .3s ease; }
.faq-item.is-open .faq-a { max-height: 260px; opacity: 1; }
.faq-a p { padding: 0 66px 24px 58px; font-size: var(--fs-ui); color: var(--color-body); }


/* ---------- final cta ---------- */
.cta { background: #EAF7F0; padding: 0 clamp(20px, 3.4vw, 48px) clamp(20px, 3vw, 40px); }
.cta-panel { position: relative; max-width: 1320px; margin: 0 auto; padding: clamp(56px, 7vw, 100px) clamp(24px, 4vw, 72px); border-radius: 32px; overflow: hidden; background: linear-gradient(155deg, #0F2A1C 0%, #0B1710 58%); box-shadow: 0 44px 80px -44px rgba(11,23,16,.75); }
.cta-glow { position: absolute; inset: 0; background: radial-gradient(62% 90% at 50% -10%, rgba(27,174,99,.34) 0%, rgba(27,174,99,0) 68%); pointer-events: none; }
.cta-inner { position: relative; max-width: 780px; margin: 0 auto; text-align: center; }
.cta-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 9px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: var(--fs-label); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #9FE0BD; }
.cta-dot { width: 9px; height: 9px; border-radius: 50%; background: #37C57F; animation: wbizPulse 2.4s ease-in-out infinite; }
.cta-title { margin-top: var(--space-6); font-size: clamp(34px, 5vw, 62px); line-height: 1.03; letter-spacing: -.034em; font-weight: 600; color: #FFFFFF; }
.cta-title em { font-style: normal; font-weight: 600; color: #7BD9A6; }
.cta-lead { margin: var(--space-5) auto 0; max-width: 560px; font-size: var(--fs-body); color: #A9BBB0; }
.cta-actions { margin-top: 32px; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
.cta-actions .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; font-size: var(--fs-body); }
.btn-ghost-dark { border-radius: 999px; background: rgba(255,255,255,.08); color: #E9F2EC; font-weight: 600; transition: background .2s ease, transform .2s ease; }
.btn-ghost-dark:hover { background: rgba(255,255,255,.16); color: #FFFFFF; transform: translateY(-2px); }
.cta-proof { margin-top: 34px; padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-6); }
.cta-proof-item { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-label); color: #9DAFA4; }

/* ---------- footer ---------- */
.footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #0B1710 0%, #0A140E 100%); color: #BCCDC2; }
.foot-glow { position: absolute; inset: 0; background: radial-gradient(58% 70% at 8% 0%, rgba(27,174,99,.2) 0%, rgba(27,174,99,0) 62%); pointer-events: none; }
.foot-wrap { position: relative; padding-top: clamp(48px, 6vw, 84px); }
.foot-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 4vw, 64px); align-items: end; padding-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid rgba(255,255,255,.1); }
.foot-headline { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.028em; font-weight: 600; color: #FFFFFF; }
.foot-headline em { font-style: normal; font-weight: 600; color: #7BD9A6; }
.foot-sub { margin-top: var(--space-4); max-width: 420px; font-size: var(--fs-ui); color: #92A69A; }
.foot-form { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px; border-radius: 999px; background: rgba(255,255,255,.06); }
.foot-input { flex: 1; min-width: 180px; padding: 12px 18px; border: 0; border-radius: 999px; background: rgba(255,255,255,.04); font: inherit; font-size: var(--fs-ui); color: #E9F2EC; }
.foot-input::placeholder { color: #7E9288; }
.foot-input:focus { outline: 2px solid rgba(123,217,166,.5); outline-offset: 0; }
.foot-form .btn { padding: 12px 24px; }
.foot-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.foot-actions .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; font-size: var(--fs-body); }
.foot-status { margin-top: var(--space-3); display: flex; align-items: center; gap: 9px; font-size: var(--fs-label); color: #7E9288; }
.foot-dot { width: 8px; height: 8px; border-radius: 50%; background: #37C57F; animation: wbizPulse 2.4s ease-in-out infinite; }
.foot-grid { padding: clamp(36px, 4vw, 56px) 0; display: grid; grid-template-columns: minmax(220px, 1fr) repeat(auto-fit, minmax(140px, 1fr)); gap: 34px; }
.foot-brand { max-width: 280px; }
.foot-logo { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.07); }
.foot-logo img { height: 26px; width: auto; }
.foot-brand p { margin-top: var(--space-4); font-size: var(--fs-ui); color: #8FA398; }
.foot-social { display: flex; gap: 10px; margin-top: var(--space-4); }
.foot-social a { width: 40px; height: 40px; border-radius: 13px; background: rgba(255,255,255,.07); color: #7BD9A6; display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; }
.foot-social a:hover { background: rgba(255,255,255,.14); color: #FFFFFF; transform: translateY(-2px); }
.foot-title { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6F8479; }
.foot-title { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; font-family: inherit; }
.foot-list { margin-top: 18px; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-ui); }
.foot-list a { color: #BCCDC2; }
.foot-list a:hover { color: #FFFFFF; }
.foot-bar { padding: 24px 0 30px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 22px; font-size: var(--fs-label); color: #7E9288; }
.foot-meta, .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot-credit { display: inline-flex; align-items: center; gap: 7px; color: #9FE0BD; font-weight: 600; }
.foot-credit:hover { color: #D8F5E4; }
.foot-legal { display: inline-flex; gap: 22px; flex-wrap: wrap; }
.foot-legal a { color: #7E9288; }
.foot-legal a:hover { color: #FFFFFF; }
.foot-wordmark { position: relative; margin-top: 4px; padding: 10px clamp(20px, 3.4vw, 48px) clamp(18px, 2vw, 28px); overflow: hidden; line-height: .8; }
.foot-wordmark span { display: block; font-family: inherit; max-width: 1320px; margin: 0 auto; font-size: clamp(68px, 14vw, 220px); font-weight: 700; letter-spacing: -.05em; color: transparent; background: linear-gradient(180deg, rgba(123,217,166,.16) 0%, rgba(123,217,166,0) 82%); -webkit-background-clip: text; background-clip: text; user-select: none; text-align: center; }

/* ---------- mega menu ---------- */
.main-nav > ul { display: flex; align-items: center; gap: 2px; }
.mega-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 10px 19px; border: 0; border-radius: var(--radius-pill); background: transparent; color: #3B453D; font: inherit; font-size: var(--fs-ui); font-weight: 500; cursor: pointer; transition: background .2s ease, color .2s ease; }
.mega-trigger:hover, [data-mega].is-open .mega-trigger { background: #F1F4EE; color: var(--color-ink); }
[data-mega] { position: static; }
[data-mega] .caret { transition: transform .24s var(--ease); }
[data-mega].is-open .caret { transform: rotate(180deg); }
.mega-panel { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -8px); width: min(1180px, calc(100vw - 40px)); margin-top: 14px; padding: 26px; border-radius: 26px; background: var(--color-surface); border: 1px solid #E7ECE4; box-shadow: 0 34px 64px -36px rgba(11,23,16,.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .26s var(--ease), visibility .22s; z-index: 60; }
[data-mega].is-open .mega-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 24px; }
.mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; }
.mega-col-title { font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #8B958D; }
.mega-col ul { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.mega-col a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px; color: #2D3832; font-size: var(--fs-ui); font-weight: 500; transition: background .18s ease, color .18s ease; }
.mega-ico { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: #F3F7F1; color: var(--color-brand-mid); box-sizing: border-box; transition: background .18s ease; }
.mega-col a:hover .mega-ico { background: #FFFFFF; }
.mega-col a:hover { background: #F3F7F1; color: var(--color-brand-mid); }
.mega-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid #EDF0EA; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-label); color: #75807A; }
.mega-featured { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: var(--radius-pill); background: #F1FAF4; color: var(--color-brand-mid); font-size: var(--fs-label); font-weight: 600; transition: background .2s ease; }
.mega-featured:hover { background: #E4F3EA; color: #0F7E45; }
.site-header { position: sticky; top: 0; z-index: 80; }
.header-inner { position: relative; }
.foot-copy { color: #7E9288; }
.foot-badges { display: inline-flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.foot-badges span { padding: 6px 13px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); font-size: 14px; color: #9FE0BD; }
.foot-legal { margin-left: 0; }


/* ---------- inner pages ---------- */
.page-hero { position: relative; padding: clamp(30px, 4vw, 56px) 0 clamp(40px, 5vw, 64px); }
.page-hero::before { content: ""; position: absolute; inset: calc(var(--header-height) * -1) 0 auto; height: clamp(520px, 56vw, 720px); background: var(--gradient-hero); pointer-events: none; z-index: -1; }
.page-hero-inner { text-align: center; }
.page-title { margin: clamp(20px, 2.6vw, 30px) auto 0; max-width: 900px; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.03; letter-spacing: -.034em; font-weight: 600; }
.page-title em { font-style: normal; font-weight: 600; color: var(--color-brand-mid); }
.page-lead { margin: clamp(18px, 2.2vw, 26px) auto 0; max-width: 680px; font-size: var(--fs-lead); color: var(--color-body); }
.page-actions { margin-top: 30px; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
.page-actions .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; font-size: var(--fs-body); }
.proof-chips { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
.proof-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid #E2E9DE; font-size: var(--fs-label); font-weight: 500; color: #37453C; }
.section-tight { padding-block: clamp(40px, 5vw, 72px); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 18px; }
.stat-card { padding: var(--space-6); border-radius: 22px; background: linear-gradient(158deg, #F4FBF6 0%, #EAF7F0 55%, #DFF2E7 100%); box-shadow: 0 16px 34px -26px rgba(11,23,16,.34); }
.stat-value { font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.03em; }
.stat-label { margin-top: 6px; font-size: var(--fs-ui); color: var(--color-body); }
.pcard-grid { margin-top: clamp(34px, 4vw, 52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.section .pcard-grid:first-child { margin-top: 0; }
.pcard { display: flex; flex-direction: column; padding: var(--space-6); border-radius: 22px; background: #F7FAF6; box-shadow: 0 16px 34px -28px rgba(11,23,16,.32); transition: transform .24s var(--ease), box-shadow .24s ease; }
.section-alt .pcard { background: var(--color-surface); }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -28px rgba(11,23,16,.4); }
.pcard-num, .pcard-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--color-surface); color: var(--color-brand-mid); display: flex; align-items: center; justify-content: center; font-size: var(--fs-ui); font-weight: 600; box-shadow: 0 6px 14px -10px rgba(11,23,16,.35); }
.section-alt .pcard-num, .section-alt .pcard-icon { background: #F1FAF4; box-shadow: none; }
.pcard-title { margin-top: var(--space-4); font-size: 20px; font-weight: 600; letter-spacing: -.016em; }
.pcard-text { margin-top: 9px; font-size: var(--fs-ui); color: var(--color-body); }
.pcard-meta { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 9px; font-size: var(--fs-label); font-weight: 600; color: var(--color-brand-mid); }
.pcard-meta .icon, .pcard-list .icon, .split-list .icon { flex: none; }
.pcard-list { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(11,23,16,.09); display: flex; flex-direction: column; gap: 10px; }
.pcard-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-label); color: #37453C; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-flip .split-copy { order: 2; }
.split-copy { max-width: 520px; }
.kicker { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand-mid); }
.split-title { margin-top: var(--space-4); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.026em; font-weight: 600; }
.split-text { margin-top: var(--space-4); font-size: var(--fs-body); color: var(--color-body); }
.split-list { margin-top: var(--space-6); display: flex; flex-direction: column; gap: 13px; }
.split-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-body); color: #37453C; }
.split-visual { min-width: 0; }
.mini-panel { padding: var(--space-5); border-radius: 26px; background: var(--color-surface); box-shadow: 0 30px 60px -40px rgba(11,23,16,.45); }
.section-alt .mini-panel { background: var(--color-surface); }
.mini-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 6px 16px; font-size: var(--fs-ui); font-weight: 600; }
.mini-tag { padding: 5px 12px; border-radius: var(--radius-pill); background: #E6F5EC; color: var(--color-brand-mid); font-size: 14px; font-weight: 600; }
.mini-table { border-radius: 18px; overflow: hidden; background: #FBFCFA; }
.mini-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; padding: 15px 18px; border-top: 1px solid #EEF1EB; font-size: var(--fs-ui); align-items: center; }
.mini-row:first-child { border-top: 0; }
.mini-row-head { background: #F3F7F1; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }
.mini-strong { font-weight: 600; color: var(--color-ink); }
.mini-mute { color: #6C776F; }
.mini-foot { margin-top: var(--space-3); padding: 16px 18px; border-radius: 16px; background: #F1FAF4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: var(--fs-label); color: #37453C; }
.mini-foot strong { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--color-brand-mid); }
.ptable-shell { margin-top: clamp(30px, 3.6vw, 48px); border-radius: 22px; overflow: hidden; background: var(--color-surface); box-shadow: 0 20px 42px -32px rgba(11,23,16,.4); }
.ptable-head, .ptable-row { display: grid; align-items: center; padding: 16px 22px; font-size: var(--fs-ui); }
.ptable-head { background: #F3F7F1; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }
.ptable-row { border-top: 1px solid #F2F4EF; color: var(--color-body); }
.ptable-key { font-weight: 600; color: var(--color-ink); }
.mod-list { margin-top: clamp(30px, 3.6vw, 48px); }
.mod-row { display: grid; grid-template-columns: 46px minmax(150px, 1fr) minmax(0, 2.2fr) 26px; align-items: center; gap: var(--space-5); padding: 22px 8px; border-top: 1px solid rgba(11,23,16,.09); }
.mod-num { font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; color: #9AA79E; }
.mod-name { font-size: 19px; font-weight: 600; letter-spacing: -.016em; }
.mod-text { font-size: var(--fs-ui); color: var(--color-body); }
.mod-arrow { display: flex; justify-content: flex-end; color: var(--color-brand-mid); }
.faq-actions { margin-top: 18px; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.page-cta { padding: clamp(30px, 4vw, 52px); border-radius: 28px; background: linear-gradient(155deg, #0F2A1C 0%, #0B1710 58%); color: #E9F2EC; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; align-items: center; }
.page-cta h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.028em; font-weight: 600; color: #FFFFFF; }
.page-cta p { margin-top: var(--space-3); max-width: 460px; font-size: var(--fs-body); color: #A9BBB0; }
.page-cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }

/* contact form */
.form-card { padding: clamp(22px, 3vw, 32px); border-radius: 26px; background: var(--color-surface); box-shadow: 0 30px 60px -40px rgba(11,23,16,.45); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); }
.field { display: block; }
.field > span { display: block; font-size: 14px; font-weight: 600; color: #37453C; }
.field input, .field select, .field textarea { margin-top: 7px; width: 100%; padding: 13px 15px; border-radius: 13px; border: 1px solid #E2E7DF; background: #FBFCFA; font: inherit; font-size: var(--fs-ui); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid rgba(27,174,99,.4); border-color: var(--color-brand); }
.chip-row { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.topic-chip { padding: 9px 16px; border-radius: var(--radius-pill); border: 0; background: #F1F4EE; color: #37453C; font: inherit; font-size: var(--fs-label); font-weight: 600; cursor: pointer; }
.topic-chip.is-active { background: var(--color-ink); color: #FFFFFF; }
.form-foot { margin-top: var(--space-5); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.form-note { font-size: 14px; color: var(--color-muted); max-width: 300px; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.form-status-success { color: var(--color-brand-mid); }
.form-status-error { color: #A6382E; }

/* dark mini panels */
.dark-panel { border-radius: 26px; overflow: hidden; background: linear-gradient(158deg, #0F2A1C 0%, #0B1710 62%); box-shadow: 0 34px 64px -36px rgba(11,23,16,.7); }
.dark-panel-head { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 10px; font-size: var(--fs-label); color: #9DAFA4; }
.dark-tag { padding: 4px 11px; border-radius: 8px; background: rgba(255,255,255,.08); color: #7BD9A6; font-size: 14px; font-weight: 600; }
.dark-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.scope-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: var(--fs-label); color: #CFE3D7; }
.scope-row span:first-child { flex: 1; }
.scope-pill { padding: 4px 11px; border-radius: 8px; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.06); color: #9DAFA4; }
.scope-pill.is-on { background: rgba(27,174,99,.18); color: #7BD9A6; }
.dark-note { padding: 14px 16px; border-radius: 14px; background: rgba(27,174,99,.14); font-size: var(--fs-label); color: #9FE0BD; }
.state-pill { padding: 4px 11px; border-radius: 8px; font-size: 14px; font-weight: 600; background: #EFF2EC; color: #58635A; }
.state-pill.ok { background: #D9EFE2; color: var(--color-brand-mid); }
.state-pill.warn { background: #FBEDE1; color: #8A5A11; }


/* ---------- comparison tables ---------- */
.ptable-cat { display: grid; padding: 14px 22px; background: #F0F5EE; border-top: 1px solid #E3E9DE; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-brand-mid); }
.cmp-own { background: #F5FBF7; font-weight: 600; color: var(--color-ink); }
.ptable-head .cmp-own, .ptable-head span:nth-child(2) { color: var(--color-brand-mid); }
.cmp-yes { display: inline-flex; }
.cmp-no { color: #6C776F; }
.cmp-sticky { position: sticky; top: 0; z-index: 2; }
.ptable-row > span, .ptable-head > span { padding-right: 10px; }


/* ---------- free tools ---------- */
.tool-card { padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--color-surface); box-shadow: 0 30px 60px -40px rgba(11,23,16,.45); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
.tool-out { margin-top: var(--space-5); padding: var(--space-5); border-radius: 20px; background: #F7FAF6; }
.tool-out-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-5); align-items: start; }
.tool-out-label { display: block; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }
.tool-code { display: block; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: var(--color-surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; color: var(--color-ink); word-break: break-all; }
.tool-code-area { width: 100%; border: 0; resize: vertical; line-height: 1.6; }
.tool-actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.tool-note { margin-top: var(--space-3); font-size: var(--fs-label); color: var(--color-muted); }
.qr-box { margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--color-surface); max-width: 260px; }
.qr-box[data-error]::after { content: attr(data-error); display: block; font-size: var(--fs-label); color: #8A5A11; }
.calc-rows { display: flex; flex-direction: column; }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 13px 0; border-bottom: 1px solid #E7ECE3; font-size: var(--fs-ui); color: var(--color-body); }
.calc-row strong { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.calc-row:last-child { border-bottom: 0; }
.calc-row-total { padding: 16px 0; font-size: var(--fs-body); }
.calc-row-total strong { font-size: 24px; letter-spacing: -.02em; }
.tool-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.tp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.tp-card { display: flex; flex-direction: column; padding: var(--space-5); border-radius: 20px; background: #F7FAF6; }
.tp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-cat { padding: 4px 11px; border-radius: var(--radius-pill); background: var(--color-surface); font-size: 13px; font-weight: 600; color: var(--color-brand-mid); }
.tp-title { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.014em; }
.tp-body { margin-top: var(--space-3); flex: 1; padding: 14px 16px; border-radius: 14px; background: var(--color-surface); font-size: var(--fs-ui); color: var(--color-body); }
.tp-copy { margin-top: var(--space-4); align-self: flex-start; padding: 10px 18px; font-size: var(--fs-label); }
.gt-quiz { display: flex; flex-direction: column; }
.gt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 15px 0; border-bottom: 1px solid #EEF1EB; }
.gt-row:last-child { border-bottom: 0; }
.gt-q { font-size: var(--fs-ui); color: #37453C; }
.gt-opts { display: flex; gap: 8px; flex: none; }
.gt-result { margin-top: 10px; padding: 16px 18px; border-radius: 16px; background: var(--color-surface); font-size: var(--fs-ui); color: var(--color-ink); }


/* ---------- tools hub previews ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-5); }
.tool-card { display: flex; flex-direction: column; padding: var(--space-5); border-radius: 24px; background: var(--color-surface); box-shadow: 0 22px 46px -34px rgba(11,23,16,.42); transition: transform .26s var(--ease), box-shadow .26s var(--ease); }
.tool-card:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(11,23,16,.46); }
.tool-preview { display: block; height: 184px; padding: 14px; border-radius: 18px; background: linear-gradient(158deg, #F1FAF4 0%, #E4F4EB 100%); overflow: hidden; }
.tool-preview-inner { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px; border-radius: 13px; background: #fff; box-shadow: 0 10px 22px -18px rgba(11,23,16,.5); font-size: 12px; color: var(--color-body); }
.tool-card .pcard-title { margin-top: var(--space-4); font-size: 19px; font-weight: 600; letter-spacing: -.014em; }
.tool-card .pcard-text { margin-top: 6px; font-size: var(--fs-label); color: var(--color-body); }
.tool-card .industry-link { margin-top: auto; padding-top: var(--space-4); }

.tp-field { display: flex; flex-direction: column; gap: 3px; }
.tp-lab { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); }
.tp-inp { padding: 6px 9px; border-radius: 7px; background: #F5F8F4; color: var(--color-ink); }
.tp-out { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 7px 9px; border-radius: 7px; background: #ECF7F0; color: var(--color-brand-mid); font-weight: 600; overflow: hidden; white-space: nowrap; }
.tp-copy { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 6px; background: var(--color-brand); color: #fff; font-size: 10px; font-weight: 600; }
.tp-qr-wrap { display: flex; align-items: center; gap: 12px; height: 100%; }
.tp-qr { flex: none; width: 84px; height: 84px; border-radius: 6px; background-color: #0B1710; background-image: repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 12px), repeating-linear-gradient(0deg, #fff 0 6px, transparent 6px 12px); background-size: 24px 24px, 24px 24px; box-shadow: inset 0 0 0 6px #fff; }
.tp-qr-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tp-chip { padding: 3px 9px; border-radius: 999px; background: #ECF7F0; color: var(--color-brand-mid); font-size: 10px; font-weight: 600; }
.tp-note { color: var(--color-muted); font-size: 11px; }
.tp-btn { padding: 5px 11px; border-radius: 7px; background: var(--color-brand); color: #fff; font-size: 11px; font-weight: 600; }
.tp-browser { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid #EEF1EB; }
.tp-dots { display: flex; gap: 3px; }
.tp-dots i { width: 5px; height: 5px; border-radius: 50%; background: #DDE3DC; }
.tp-url { font-size: 10px; color: var(--color-muted); }
.tp-stage { position: relative; flex: 1; }
.tp-skel { display: block; height: 8px; border-radius: 4px; background: #F1F4EF; }
.tp-skel-2 { width: 62%; margin-top: 6px; }
.tp-fab { position: absolute; right: 0; bottom: 0; padding: 6px 11px; border-radius: 999px; background: var(--color-brand); color: #fff; font-size: 10px; font-weight: 600; box-shadow: 0 8px 16px -8px rgba(20,136,79,.9); }
.tp-row { display: flex; justify-content: space-between; gap: 10px; }
.tp-num { font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.tp-row-total { margin-top: auto; padding-top: 7px; border-top: 1px solid #EEF1EB; font-weight: 600; color: var(--color-brand-mid); }
.tp-row-total .tp-num { color: var(--color-brand-mid); }
.tp-tabs { display: flex; gap: 4px; }
.tp-tab { padding: 3px 8px; border-radius: 6px; background: #F3F6F2; font-size: 10px; color: var(--color-muted); }
.tp-tab.is-on { background: var(--color-ink); color: #fff; }
.tp-tpl { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; background: #F7FAF6; }
.tp-tpl-t { flex: 1; }
.tp-code { margin-top: auto; padding: 8px 9px; border-radius: 7px; background: #0B1710; color: #9FE3BC; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.5; }
.tp-q { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 7px; background: #F7FAF6; }
.tp-yes { padding: 2px 8px; border-radius: 999px; background: #DCEFE3; color: var(--color-brand-mid); font-size: 10px; font-weight: 600; }
.tp-no { padding: 2px 8px; border-radius: 999px; background: #F0F2EE; color: #6C776F; font-size: 10px; font-weight: 600; }
.tp-score { display: flex; align-items: center; gap: 9px; margin-top: auto; }
.tp-score-bar { flex: 1; height: 7px; border-radius: 999px; background: #EEF1EB; overflow: hidden; }
.tp-score-bar i { display: block; height: 100%; background: var(--color-brand); }
.tp-score-n { font-size: 16px; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.tp-score-n small { font-size: 10px; color: var(--color-muted); }
.tp-count { display: flex; justify-content: space-between; gap: 10px; }
.tp-bar { height: 7px; border-radius: 999px; background: #EEF1EB; overflow: hidden; }
.tp-bar i { display: block; height: 100%; background: var(--color-brand); }
.tp-bar-warn i { background: #C98A2E; }
.tp-warn { color: #A5691B; }

/* keyframes */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   PHASE 1 — GLOBAL DESIGN REFRESH
   header spacing · section rhythm · odd/even · footer · grids · cards · eyebrows
   Site-wide overrides. Folds into the main cascade once signed off.
   ========================================================= */

/* 1. Remove the empty band above the header (was 26–40px on top) */
.site-header .header-inner { padding-block: clamp(14px, 1.5vw, 20px) clamp(12px, 1.3vw, 18px); }

/* 2. Section rhythm — equal top and bottom on every section */
.feature-rows { padding-top: clamp(56px, 6.4vw, 96px); }

/* 3. Odd / even section colour — a calm, visible rhythm */
.section-alt { background: #ECF5EF; }

/* 4. Section eyebrows — redesigned (kept for the keywords they carry).
      A short gradient rule + an uppercase brand label; the boxed icon is dropped.
      The hero trust badge is untouched (it is .eyebrow with no modifier). */
.eyebrow-soft,
.eyebrow-white,
.kicker,
.row-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: var(--space-4);
  padding: 0; background: none; border: 0; box-shadow: none;
  color: var(--color-brand-mid);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
}
.eyebrow-soft::before,
.eyebrow-white::before,
.kicker::before,
.row-eyebrow::before {
  content: ""; flex: none; width: 30px; height: 3px;
  border-radius: 3px; background: var(--gradient-brand);
}
.eyebrow-soft .eyebrow-icon,
.eyebrow-white .eyebrow-icon { display: none; }

/* 5. Footer — remove the logo/social brand block, even 6-column grid */
.foot-brand { display: none; }
.foot-grid {
  padding: clamp(36px, 4vw, 56px) 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 34px);
}

/* 6. Card grids — lock the feature grids to a clean 3-up.
      Inner pages carry 3 / 6 / 3 cards, so 3 columns balances every row. */
.pcard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 7. Cards — less plain: real border, calmer surface, clearer hover */
.pcard { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 10px 30px -26px rgba(11,23,16,.30); }
.section-alt .pcard { background: var(--color-surface); border-color: var(--color-border-soft); }
.pcard:hover { transform: translateY(-4px); border-color: var(--color-border-accent); box-shadow: 0 26px 46px -28px rgba(11,23,16,.34); }

/* 8. FAQ answers — do not clip longer, keyword-rich copy */
.faq-item .faq-a { transition: max-height .45s var(--ease), opacity .3s ease; }
.faq-item.is-open .faq-a { max-height: 900px; }

/* =========================================================
   PHASE 1.1 — SYSTEM CONSISTENCY (round 2 feedback)
   heading scale · true odd/even · FAQ layout · carousel align
   ========================================================= */

/* 9. One section-heading size everywhere (was 42–54px across 5 rules) */
.section-title,
.split-title,
.section-title-sm,
.ind-head .section-title,
.faq-intro .section-title {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.028em;
  font-weight: 600;
}
/* one card-title size everywhere */
.pcard-title,
.bento-title,
.bento-wide .bento-title,
.team-title,
.tool-card .pcard-title { font-size: 20px; letter-spacing: -.016em; }

/* 10. True odd/even rhythm — no two adjacent sections share a colour.
       Overrides every explicit section background; hero keeps its gradient. */
main > section:not(.hero):not(.page-hero):nth-of-type(even) { background: var(--color-surface); }
main > section:not(.hero):not(.page-hero):nth-of-type(odd)  { background: #ECF5EF; }

/* 11. FAQ — balanced columns, sticky intro so the left column is never a void */
.faq-grid { grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.faq-intro { position: sticky; top: 104px; }

/* 12. Industry rail — first card lines up with the container's left edge */
.ind-track { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.ind-viewport { scroll-padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }

/* ---- Section catalog page (sections.html) labels only ---- */
.sg-mark {
  max-width: var(--container); margin-inline: auto;
  padding: 30px var(--gutter) 12px;
  display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap;
  border-top: 2px dashed var(--color-border-accent);
}
.sg-num { font-size: 14px; font-weight: 700; color: var(--color-brand-mid); font-variant-numeric: tabular-nums; }
.sg-name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--color-ink); }
.sg-desc { font-size: var(--fs-ui); color: var(--color-muted); }
.page-sections .sg-intro { text-align: center; }
.page-sections .sg-intro .eyebrow-soft { justify-content: center; }
.sg-sub { max-width: var(--container); margin: 26px auto 0; padding-inline: var(--gutter); font-size: var(--fs-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }

/* ---- Proof row — FINAL: editorial divider row (Option A).
        Restyles .proof-chip site-wide; the old checkmark SVG is hidden and
        replaced with a brand dot, hairline dividers sit between items. ---- */
.proof-chips { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; }
.proof-chip {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 4px clamp(16px, 2vw, 26px);
  background: none; border: 0; border-radius: 0;
  font-size: var(--fs-ui); font-weight: 600; color: var(--color-ink);
}
.proof-chip svg { display: none; }
.proof-chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-brand); }
.proof-chip:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--color-border);
}

/* =========================================================
   PHASE 1.2 — feature-card icon box + full-width CTA band
   ========================================================= */

/* Feature cards — light-brand icon tile + a warmer box */
.pcard { padding: clamp(22px, 2.3vw, 30px); border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 12px 32px -28px rgba(11,23,16,.30); }
.section-alt .pcard { background: var(--color-surface); border-color: var(--color-border-soft); }
.pcard:hover { transform: translateY(-5px); border-color: var(--color-border-accent); box-shadow: 0 28px 50px -30px rgba(11,23,16,.34); }
.pcard-icon, .pcard-num {
  width: 52px; height: 52px; border-radius: 15px; margin-bottom: var(--space-5);
  background: linear-gradient(150deg, #EAF7EF 0%, #D6EFDF 100%);
  color: var(--color-brand-mid); font-size: 18px; font-weight: 700;
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--color-border-accent);
}
.section-alt .pcard-icon, .section-alt .pcard-num { background: linear-gradient(150deg, #EAF7EF 0%, #D6EFDF 100%); box-shadow: inset 0 0 0 1px var(--color-border-accent); }
.pcard-icon svg { width: 24px; height: 24px; }

/* Full-width CTA band — breaks out of the container, content stays aligned */
.page-cta {
  margin-inline: calc(50% - 50vw);
  margin-block: calc(clamp(40px, 5vw, 72px) * -1);
  padding: clamp(56px, 8vw, 104px) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  border-radius: 0;
  background:
    radial-gradient(58% 120% at 82% 8%, rgba(36,188,110,.30) 0%, rgba(36,188,110,0) 55%),
    radial-gradient(46% 110% at 6% 100%, rgba(15,126,69,.40) 0%, rgba(15,126,69,0) 60%),
    linear-gradient(135deg, #0F2A1C 0%, #0A140E 62%, #08110C 100%);
  position: relative; overflow: hidden;
}
.page-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .6;
  -webkit-mask-image: radial-gradient(80% 100% at 80% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(80% 100% at 80% 0%, #000 0%, transparent 70%);
}
.page-cta > * { position: relative; z-index: 1; }
.page-cta h2 { font-size: clamp(30px, 4vw, 52px); }
.page-cta p { max-width: 520px; font-size: var(--fs-lead); }

/* =========================================================
   PHASE 1.3 — round 4: buttons, comparison cells, white
   boxes everywhere, steps section, FAQ open state
   ========================================================= */

/* --- Buttons: one consistent size across the whole site --- */
.btn { padding: 14px 28px; min-height: 48px; font-size: var(--fs-ui); }
.btn-dark, .btn-white, .btn-soft, .btn-brand { padding: 14px 28px; min-height: 48px; font-size: var(--fs-ui); }
.btn-large { padding: 14px 28px; min-height: 48px; font-size: var(--fs-ui); box-shadow: var(--shadow-btn); }
.hero-actions .btn, .page-actions .btn, .cta-actions .btn, .page-cta-actions .btn,
.foot-actions .btn, .faq-actions .btn, .faq-card .btn { padding: 14px 28px; min-height: 48px; font-size: var(--fs-ui); }
.site-header .btn { padding: 11px 22px; min-height: 42px; }          /* header stays compact */
.btn-small { padding: 9px 16px; min-height: 0; font-size: var(--fs-label); } /* utility only */

/* --- Comparison / platform table: WBIZ column is a clean green tick,
       no filled highlight bar (the bar sat mostly empty beside the tick) --- */
.cmp-own { background: transparent; }
.ptable-head .cmp-own { background: transparent; }

/* --- Every content card is a clean WHITE box (the feature-card language) --- */
.team-card, .industry-card, .step-card, .step-mint, .step-light, .step-dark {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 32px -28px rgba(11,23,16,.30);
}
.team-card:hover, .industry-card:hover, .step-card:hover {
  transform: translateY(-5px); border-color: var(--color-border-accent);
  box-shadow: 0 28px 50px -30px rgba(11,23,16,.34);
}
/* steps: revert the dark card to the light treatment, unify the number as an icon tile */
.step-dark .step-title { color: var(--color-ink); }
.step-dark .step-text { color: var(--color-body); }
.step-dark .step-list li { color: #33403A; }
.step-dark .step-list li::before { background: var(--color-brand); }
.step-num, .step-dark .step-num {
  width: 52px; height: 52px; border-radius: 15px;
  background: linear-gradient(150deg, #EAF7EF 0%, #D6EFDF 100%);
  color: var(--color-brand-mid); box-shadow: inset 0 0 0 1px var(--color-border-accent);
}
/* the inner mockup panel: a soft tint + border so it reads on the white card */
.step-panel-inner { background: var(--color-surface-2); border: 1px solid var(--color-border-soft); box-shadow: none; }
/* card 3's dashboard mockup was built for a dark panel — keep it dark so its text stays visible */
.step-dark .step-panel-inner { background: linear-gradient(155deg, #10402B 0%, #0A1C13 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: none; }

/* --- FAQ: a clean card list with a calm open state (no heavy floating box) --- */
.faq-item { border: 1px solid var(--color-border); border-radius: 16px; margin-bottom: 12px; background: var(--color-surface); box-shadow: 0 8px 24px -22px rgba(11,23,16,.20); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item.is-open { border-color: var(--color-border-accent); box-shadow: 0 16px 36px -30px rgba(11,23,16,.26); }
.faq-q { padding: 20px 22px; }
.faq-a p { padding: 0 22px 22px 22px; }

/* --- CTA emphasis: the sidebar 'still deciding' card + its button --- */
.faq-card { border: 1px solid var(--color-border-accent); }
.faq-card .btn { width: 100%; justify-content: center; }

/* --- Industries: clean icon-card grid (replaced the slider), 3-up with a CTA tile --- */
.indg-grid { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.indg-card { display: flex; flex-direction: column; padding: clamp(22px, 2.3vw, 28px); border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 12px 32px -28px rgba(11,23,16,.30); transition: transform .24s var(--ease), box-shadow .24s ease, border-color .24s ease; }
.indg-card:hover { transform: translateY(-5px); border-color: var(--color-border-accent); box-shadow: 0 28px 50px -30px rgba(11,23,16,.34); }
.indg-icon { width: 52px; height: 52px; border-radius: 15px; margin-bottom: var(--space-4); background: linear-gradient(150deg, #EAF7EF 0%, #D6EFDF 100%); color: var(--color-brand-mid); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--color-border-accent); }
.indg-icon svg { width: 24px; height: 24px; }
.indg-title { font-size: 20px; font-weight: 600; letter-spacing: -.016em; color: var(--color-ink); transition: color .2s ease; }
.indg-card:hover .indg-title { color: var(--color-brand-mid); }
.indg-text { margin-top: 9px; font-size: var(--fs-ui); color: var(--color-body); }
.indg-out { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 9px; font-size: var(--fs-label); font-weight: 600; color: var(--color-brand-mid); }
.indg-out svg { flex: none; width: 16px; height: 16px; }
/* the 9th tile — a dark 'book a call' CTA that completes the 3x3 grid */
.indg-cta { background: radial-gradient(70% 120% at 85% 0%, rgba(36,188,110,.28) 0%, rgba(36,188,110,0) 55%), linear-gradient(155deg, #0F2A1C 0%, #0A140E 62%, #08110C 100%); border-color: transparent; }
.indg-cta .indg-title { color: #FFFFFF; }
.indg-cta:hover .indg-title { color: #FFFFFF; }
.indg-cta .indg-text { color: #A9BBB0; }
.indg-cta .indg-icon { background: rgba(255,255,255,.10); color: #6ACF9B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.indg-cta .indg-out { color: #6ACF9B; }
.indg-cta .indg-out svg { width: 13px; height: 13px; }

/* --- Lucide sizing inside icon containers --- */
.pcard-icon, .pcard-num, .indg-icon { width: 54px; height: 54px; }
.pcard-icon .lucide-icon, .indg-icon .lucide-icon, .feature-icon .lucide-icon { width: 25px; height: 25px; stroke-width: 1.8; }
.mega-ico.lucide-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 6px; stroke-width: 1.8; }

/* --- Remove the redundant CTA panel on real pages: it doubled up with the
       footer's dark 'One number, one team' CTA and the two dark bands clashed.
       Kept visible in the section catalog (body.page-sections). --- */
body:not(.page-sections) main > section.section:has(.page-cta) { display: none; }

/* =========================================================
   PHASE 2 — Legal pages + Developer Docs
   ========================================================= */

/* shared two-column: sticky side nav + article body */
.legal-grid { display: grid; grid-template-columns: 264px 1fr; gap: 60px; align-items: start; }
.legal-toc { position: sticky; top: 116px; }
.legal-toc .kicker { margin-bottom: 14px; }
.legal-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.legal-toc a { display: block; padding: 9px 14px; border-radius: 12px; color: var(--color-muted); font-size: 15px; line-height: 1.4; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.legal-toc a:hover { background: var(--color-surface-accent); color: var(--color-brand-mid); }
.legal-meta { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-pill); }
.legal-meta strong { display: block; color: var(--color-ink); font-size: 15px; margin-bottom: 3px; }
.legal-meta span { display: block; color: var(--color-muted); font-size: 14px; line-height: 1.5; }

.legal-body { max-width: 780px; }
.legal-section { padding: 30px 0; border-bottom: 1px solid var(--color-border-soft); scroll-margin-top: 108px; }
.legal-section:first-child { padding-top: 0; }
.legal-section:last-child { border-bottom: 0; }
.legal-section h2 { color: var(--color-ink); font-size: clamp(22px, 2.1vw, 27px); line-height: 1.25; margin: 0 0 14px; letter-spacing: -.01em; }
.legal-section h3 { color: var(--color-ink); font-size: 18px; margin: 22px 0 8px; }
.legal-section p { color: var(--color-body); line-height: 1.75; margin: 0 0 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 10px 0 16px; padding-left: 2px; list-style: none; }
.legal-section li { position: relative; padding-left: 26px; color: var(--color-body); line-height: 1.7; margin-bottom: 10px; }
.legal-section li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 8px; height: 8px; border-radius: 3px; background: var(--color-brand); }
.legal-section a { color: var(--color-brand-mid); text-decoration: underline; text-underline-offset: 2px; }
.legal-section a:hover { color: var(--color-brand-dark); }
.legal-callout { margin: 18px 0 6px; padding: 18px 20px; border: 1px solid var(--color-border-accent); border-radius: var(--radius-lg); background: var(--color-surface-accent); }
.legal-callout p { color: var(--color-brand-dark); margin: 0; }
.legal-callout strong { color: var(--color-brand-dark); }

/* developer docs */
.doc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 8px; }
.doc-fact { padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.doc-fact .doc-fact-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }
.doc-fact code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--color-ink); word-break: break-all; }

.doc-cat { padding: 6px 0 32px; border-bottom: 1px solid var(--color-border-soft); scroll-margin-top: 108px; }
.doc-cat:last-child { border-bottom: 0; }
.doc-cat-head { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; }
.doc-cat-head .doc-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--color-surface-accent); color: var(--color-brand-mid); font-size: 19px; flex: none; }
.doc-cat-head h2 { color: var(--color-ink); font-size: 22px; margin: 0; }
.doc-scope { display: inline-block; margin: 0 0 14px 60px; padding: 3px 11px; border-radius: var(--radius-pill); background: var(--color-surface-accent); color: var(--color-brand-mid); font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.doc-ep { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--color-border-soft); }
.doc-ep:first-of-type { border-top: 0; }
.doc-method { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: center; padding: 5px 0; border-radius: 7px; text-transform: uppercase; }
.doc-method.get { background: #E4F3EA; color: #12874C; }
.doc-method.post { background: #E3EEFF; color: #1E5FBF; }
.doc-method.patch { background: #FDF0DC; color: #8A5A11; }
.doc-method.delete { background: #FCE7E7; color: #B23B3B; }
.doc-ep-main .doc-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; color: var(--color-ink); font-weight: 600; word-break: break-word; }
.doc-ep-main p { margin: 4px 0 0; color: var(--color-muted); font-size: 14.5px; line-height: 1.6; }

.code-card { margin: 16px 0 6px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(11,23,16,.16); background: #0B1710; }
.code-card-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: rgba(255,255,255,.045); border-bottom: 1px solid rgba(255,255,255,.08); }
.code-card-head span { color: #9FB2A6; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-card-head .code-tag { color: #7FE0A6; font-weight: 600; }
.code-card pre { margin: 0; padding: 16px 18px; overflow-x: auto; }
.code-card code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.75; color: #D7E3DB; white-space: pre; }

/* contact page email links */
.pcard-mail { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 17px; font-weight: 600; color: var(--color-brand-mid); text-decoration: none; word-break: break-all; }
.pcard-mail:hover { color: var(--color-brand-dark); text-decoration: underline; }
.pcard-mail i { font-size: 14px; color: var(--color-brand); }

/* =========================================================
   PHASE 3 — Resource pages (blog, case studies, guides, help, glossary, changelog)
   ========================================================= */
.res-card { display: flex; flex-direction: column; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.res-badge { align-self: flex-start; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-surface-accent); color: var(--color-brand-mid); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; margin-bottom: 14px; }
.res-card h3 { color: var(--color-ink); font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
.res-card p { color: var(--color-body); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.res-meta { margin-top: auto; color: var(--color-muted); font-size: 13.5px; }
.blog-filter { margin: 30px auto 0; display: flex; width: max-content; max-width: 100%; gap: 5px; padding: 6px; overflow-x: auto; border-radius: 999px; background: #EAF7F0; scrollbar-width: none; }
.blog-filter::-webkit-scrollbar { display: none; }
.blog-filter-btn { flex: none; border: 0; padding: 10px 16px; border-radius: 999px; background: transparent; color: #607168; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.blog-filter-btn.is-active { background: #FFFFFF; color: var(--color-brand-mid); box-shadow: var(--shadow-pill); }
.blog-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-grid .res-card { min-width: 0; }
.blog-grid .res-card[hidden] { display: none; }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .blog-filter { width: 100%; justify-content: flex-start; border-radius: 18px; } .blog-filter-btn { padding-inline: 13px; } .blog-grid { grid-template-columns: 1fr; } }
a.res-card { text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
a.res-card:hover { transform: translateY(-3px); box-shadow: 0 30px 52px -30px rgba(11,23,16,.5); }
.res-soon { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--color-muted); font-size: 13px; font-weight: 600; }
.res-soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand); }

/* help center category cards as links */
a.pcard { text-decoration: none; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
a.pcard:hover { transform: translateY(-3px); box-shadow: 0 30px 52px -30px rgba(11,23,16,.5); }

/* glossary */
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.glossary-item { padding: 20px 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin: 0; }
.glossary-item dt { color: var(--color-ink); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.glossary-item dd { color: var(--color-body); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* changelog timeline */
.changelog { max-width: 780px; margin: 0 auto; }
.changelog-item { position: relative; padding: 0 0 30px 28px; border-left: 2px solid var(--color-border); }
.changelog-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.changelog-item::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-brand); border: 3px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); }
.changelog-ver { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.changelog-ver strong { color: var(--color-ink); font-size: 18px; }
.changelog-ver .cl-tag { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--color-surface-accent); color: var(--color-brand-mid); }
.changelog-ver time { color: var(--color-muted); font-size: 14px; }
.changelog-item ul { margin: 0; padding-left: 2px; list-style: none; }
.changelog-item li { position: relative; padding-left: 22px; color: var(--color-body); line-height: 1.6; margin-bottom: 7px; }
.changelog-item li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 6px; height: 6px; border-radius: 2px; background: var(--color-brand); }
.cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* =========================================================
   PHASE 4 — Blog posts
   ========================================================= */
.post-hero { text-align: center; }
.post-badge { display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill); background: var(--color-surface-accent); color: var(--color-brand-mid); font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-bottom: 18px; }
.post-meta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; color: var(--color-muted); font-size: 15px; margin-top: 22px; }
.post-meta span { display: inline-flex; align-items: center; gap: 7px; }
.post-meta i { color: var(--color-brand); font-size: 14px; }

.post-body { max-width: 760px; }
.post-body > *:first-child { margin-top: 0; }
.post-body .post-lead { font-size: 19px; line-height: 1.7; color: var(--color-ink); margin: 0 0 24px; }
.post-body h2 { color: var(--color-ink); font-size: clamp(23px, 2.3vw, 29px); line-height: 1.25; margin: 40px 0 14px; letter-spacing: -.01em; scroll-margin-top: 100px; }
.post-body h3 { color: var(--color-ink); font-size: 20px; margin: 28px 0 10px; }
.post-body p { color: var(--color-body); font-size: 17px; line-height: 1.8; margin: 0 0 18px; }
.post-body a { color: var(--color-brand-mid); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--color-brand-dark); }
.post-body strong { color: var(--color-ink); font-weight: 600; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding: 0; }
.post-body li { color: var(--color-body); font-size: 17px; line-height: 1.75; margin-bottom: 10px; padding-left: 28px; position: relative; list-style: none; }
.post-body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 3px; background: var(--color-brand); }
.post-body ol { counter-reset: postnum; }
.post-body ol li { padding-left: 36px; }
.post-body ol li::before { counter-increment: postnum; content: counter(postnum); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 8px; background: var(--color-surface-accent); color: var(--color-brand-mid); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.post-body blockquote { margin: 22px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--color-brand); }
.post-body blockquote p { font-family: var(--font-sans); font-size: 21px; font-style: italic; line-height: 1.5; margin: 0; color: var(--color-ink); }
.post-tablewrap { overflow-x: auto; margin: 22px 0; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.post-body th, .post-body td { border: 1px solid var(--color-border); padding: 11px 14px; text-align: left; vertical-align: top; }
.post-body th { background: var(--color-surface-accent); color: var(--color-ink); font-weight: 600; }
.post-body td { color: var(--color-body); }
.post-callout { margin: 22px 0; padding: 18px 22px; border: 1px solid var(--color-border-accent); border-radius: var(--radius-lg); background: var(--color-surface-accent); }
.post-callout p { margin: 0; color: var(--color-brand-dark); font-size: 16px; line-height: 1.65; }
.post-callout strong { color: var(--color-brand-dark); }
.post-refs { margin-top: 36px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.post-refs h2 { font-size: 16px; margin: 0 0 14px; color: var(--color-ink); text-transform: uppercase; letter-spacing: .04em; }
.post-refs ol { margin: 0; padding-left: 20px; }
.post-refs li { font-size: 14px; line-height: 1.6; margin-bottom: 9px; color: var(--color-muted); padding-left: 6px; list-style: decimal; position: static; }
.post-refs li::before { display: none; }
.post-refs a { color: var(--color-brand-mid); word-break: break-word; }

/* =========================================================
   PHASE 5 — Breadcrumbs (inner page banners)
   ========================================================= */
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px 9px; margin-bottom: 20px; font-size: 13.5px; line-height: 1.4; }
.crumbs a { color: var(--color-muted); text-decoration: none; transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--color-brand-mid); }
.crumbs .crumb-sep { color: var(--color-faint); }
.crumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* =========================================================
   PHASE 6 — WBIZ portal mockup (ditto of the live app UI)
   A self-contained reproduction of the real WBIZ portal
  dashboard: dark command sidebar, emerald palette, DM Sans,
   rounded-2xl cards. Everything is scoped under .pmk so none
   of the portal look leaks into the marketing site.
   ========================================================= */
.pmk {
  --e50:#ECFDF5; --e100:#D1FAE5; --e300:#6EE7B7; --e400:#34D399; --e500:#10B981; --e600:#059669; --e700:#047857;
  --wa:#25D366;
  --s950:#020617; --s900:#0F172A; --s800:#1E293B; --s700:#334155; --s500:#64748B; --s400:#94A3B8; --s300:#CBD5E1; --s100:#F1F5F9; --s50:#F8FAFC;
  --ink:#111A22; --mut:#5B6670; --bd:#E6E9ED; --card:#FFFFFF; --canvas:#F8FAFC;
  --blue50:#EFF6FF; --blue500:#3B82F6; --blue700:#1D4ED8;
  --vio50:#F5F3FF; --vio500:#8B5CF6; --vio700:#6D28D9;
  --red50:#FEF2F2; --red500:#EF4444; --red700:#B91C1C;
  --amb50:#FFFBEB; --amb700:#B45309;
  --pink50:#FDF2F8; --pink700:#BE185D;
  --pm-sh:0 1px 2px rgba(15,23,42,.05);
  font-family:var(--font-sans);
  margin:0; color:var(--ink); font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased;
  border-radius:18px; overflow:hidden; border:1px solid var(--bd);
  box-shadow:0 32px 64px -22px rgba(2,6,23,.30), 0 12px 26px -14px rgba(2,6,23,.16);
}
.pmk * { box-sizing:border-box; }
.pmk svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; display:block; }
.pmk-app { display:flex; align-items:stretch; background:var(--canvas); }

/* ---- dark command sidebar ---- */
.pmk-side { width:216px; flex:none; background:var(--s950); color:var(--s300); display:flex; flex-direction:column; padding:0 10px 16px; }
.pmk-brand { display:flex; align-items:center; gap:9px; height:53px; margin:0 -10px 10px; padding:0 15px; border-bottom:1px solid var(--s800); }
.pmk-logo { width:30px; height:30px; border-radius:8px; background:var(--wa); color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; flex:none; }
.pmk-brand-tx { display:flex; flex-direction:column; line-height:1.12; min-width:0; }
.pmk-brand-tx b { font-size:15px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.pmk-brand-tx small { font-size:10px; color:var(--s500); letter-spacing:.02em; }
.pmk-nav { display:flex; flex-direction:column; gap:1px; }
.pmk-nav-grp { margin:13px 0 4px; padding:0 9px; font-size:9.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--s500); }
.pmk-nav-a { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--s300); position:relative; }
.pmk-nav-a svg { width:15px; height:15px; color:var(--s400); }
.pmk-nav-a.is-active { background:rgba(16,185,129,.10); color:var(--e300); }
.pmk-nav-a.is-active svg { color:var(--e300); }
.pmk-nav-a.is-active::before { content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--e400); }
.pmk-pill { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--e500); color:#fff; font-size:10px; font-weight:600; display:grid; place-items:center; }

/* ---- main column ---- */
.pmk-main { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--canvas); }
.pmk-top { display:flex; align-items:center; gap:12px; height:53px; flex:none; padding:0 16px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--bd); }
.pmk-page-title { font-size:14px; font-weight:600; color:var(--ink); }
.pmk-search { margin-left:auto; display:flex; align-items:center; gap:8px; height:32px; min-width:232px; padding:0 10px; border:1px solid var(--bd); border-radius:8px; background:var(--card); color:var(--mut); font-size:12.5px; }
.pmk-search svg { width:15px; height:15px; }
.pmk-search .pmk-sq { flex:1; }
.pmk-search kbd { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--bd); border-radius:5px; padding:1px 5px; font:inherit; font-size:10px; font-weight:600; color:var(--mut); background:var(--s50); }
.pmk-bell { position:relative; width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--mut); }
.pmk-bell .pmk-dot { position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--red500); border:2px solid var(--card); }
.pmk-user { display:flex; align-items:center; gap:8px; height:34px; padding:0 4px 0 5px; border-radius:8px; }
.pmk-av { width:28px; height:28px; border-radius:50%; background:var(--e100); color:var(--e700); display:grid; place-items:center; font-size:11px; font-weight:600; }
.pmk-user-tx { display:flex; flex-direction:column; line-height:1.15; }
.pmk-user-tx b { font-size:12px; font-weight:600; color:var(--ink); }
.pmk-user-tx small { font-size:9.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; }
.pmk-user > svg { width:13px; height:13px; color:var(--mut); }
.pmk-body { padding:18px; display:flex; flex-direction:column; gap:15px; }

/* ---- greeting header ---- */
.pmk-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pmk-head h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.pmk-head .pmk-date { margin:4px 0 0; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--mut); }
.pmk-head .pmk-date svg { width:13px; height:13px; }
.pmk-head-actions { display:flex; align-items:center; gap:8px; }
.pmk-tabs { display:inline-flex; border:1px solid var(--bd); background:var(--card); border-radius:8px; padding:2px; }
.pmk-tabs span { padding:5px 11px; border-radius:6px; font-size:11.5px; font-weight:500; color:var(--mut); }
.pmk-tabs span.on { background:var(--e600); color:#fff; box-shadow:var(--pm-sh); }
.pmk-btn-outline { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--bd); border-radius:8px; background:var(--card); font-size:12px; font-weight:500; color:var(--ink); }
.pmk-btn-outline svg { width:13px; height:13px; color:var(--mut); }

/* ---- shared card + panel header ---- */
.pmk-card { background:var(--card); border:1px solid var(--bd); border-radius:16px; box-shadow:var(--pm-sh); }
.pmk-ph { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px solid rgba(230,233,237,.65); }
.pmk-ph h3 { margin:0; font-size:13.5px; font-weight:600; color:var(--ink); }
.pmk-ph .pmk-sub { margin:2px 0 0; font-size:11px; color:var(--mut); }
.pmk-viewall { display:inline-flex; align-items:center; gap:1px; font-size:11px; font-weight:600; color:var(--e700); }
.pmk-viewall svg { width:13px; height:13px; }
.pmk-legend { display:flex; gap:12px; font-size:11px; color:var(--mut); }
.pmk-legend span { display:inline-flex; align-items:center; gap:5px; }
.pmk-legend i { width:8px; height:8px; border-radius:50%; }

/* ---- KPI tiles ---- */
.pmk-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.pmk-kpi { display:flex; align-items:flex-start; gap:10px; padding:13px; background:var(--card); border:1px solid var(--bd); border-radius:16px; box-shadow:var(--pm-sh); }
.pmk-kpi-ic { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; flex:none; }
.pmk-kpi-ic svg { width:16px; height:16px; }
.pmk-kpi-tx { display:flex; flex-direction:column; min-width:0; }
.pmk-kpi-val { font-size:20px; font-weight:600; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.pmk-kpi-lb { margin:6px 0 0; font-size:11px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmk-kpi-cap { margin:2px 0 0; font-size:10.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmk-t-emerald { background:var(--e50); color:var(--e700); }
.pmk-t-blue { background:var(--blue50); color:var(--blue700); }
.pmk-t-violet { background:var(--vio50); color:var(--vio700); }
.pmk-t-red { background:var(--red50); color:var(--red700); }
.pmk-t-amber { background:var(--amb50); color:var(--amb700); }
.pmk-t-pink { background:var(--pink50); color:var(--pink700); }

/* ---- charts row ---- */
.pmk-charts { display:grid; grid-template-columns:2fr 1fr; gap:12px; align-items:start; }
.pmk-chart { padding:16px; display:flex; align-items:flex-end; gap:9px; height:184px; }
.pmk-bar-grp { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%; }
.pmk-bar-grp i { width:9px; border-radius:3px 3px 0 0; }
.pmk-bar-out { background:var(--e500); }
.pmk-bar-in { background:var(--blue500); }
.pmk-donut-body { padding:16px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.pmk-donut { width:148px; height:148px; border-radius:50%; position:relative; display:grid; place-items:center;
  background:conic-gradient(var(--e500) 0 72%, var(--vio500) 72% 92%, var(--red500) 92% 94%, #CBD5E1 94% 100%); }
.pmk-donut::after { content:""; position:absolute; width:96px; height:96px; border-radius:50%; background:var(--card); }
.pmk-donut-c { position:relative; z-index:1; text-align:center; }
.pmk-donut-c b { display:block; font-size:20px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.pmk-donut-c small { font-size:10px; color:var(--mut); }
.pmk-donut-legend { width:100%; display:flex; flex-direction:column; gap:8px; }
.pmk-donut-legend li { display:flex; align-items:center; gap:8px; list-style:none; font-size:11.5px; }
.pmk-donut-legend i { width:8px; height:8px; border-radius:50%; flex:none; }
.pmk-donut-legend .nm { color:var(--mut); flex:1; }
.pmk-donut-legend .vl { font-weight:600; font-variant-numeric:tabular-nums; }
.pmk-donut-legend .pc { width:40px; text-align:right; color:var(--mut); font-variant-numeric:tabular-nums; }

/* ---- lower row: recent / quick / health ---- */
.pmk-lower { display:grid; grid-template-columns:5fr 3fr 4fr; gap:12px; align-items:start; }
.pmk-recent-list { padding:6px 16px 12px; }
.pmk-conv { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(230,233,237,.7); }
.pmk-conv:first-child { border-top:none; }
.pmk-conv-av { width:34px; height:34px; border-radius:50%; background:var(--e100); color:var(--e700); display:grid; place-items:center; font-size:11.5px; font-weight:600; flex:none; }
.pmk-conv-tx { display:flex; flex-direction:column; min-width:0; flex:1; }
.pmk-conv-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.pmk-conv-nm { font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmk-conv-tm { font-size:10.5px; color:var(--mut); flex:none; }
.pmk-conv-pv { margin:1px 0 0; font-size:11.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmk-conv-unread { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--e600); color:#fff; font-size:10px; font-weight:600; display:grid; place-items:center; flex:none; }
.pmk-quick-grid { padding:14px 16px 16px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pmk-qa { display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 8px; border:1px solid var(--bd); border-radius:10px; background:var(--card); text-align:center; }
.pmk-qa-ic { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; }
.pmk-qa-ic svg { width:15px; height:15px; }
.pmk-qa-lb { font-size:11px; font-weight:500; color:var(--ink); }
.pmk-health { padding:13px 16px 15px; display:flex; flex-direction:column; gap:11px; }
.pmk-hrow { display:flex; align-items:center; justify-content:space-between; }
.pmk-hrow-l { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:500; color:var(--ink); }
.pmk-hrow-ic { width:26px; height:26px; border-radius:7px; border:1px solid var(--bd); display:grid; place-items:center; color:var(--mut); }
.pmk-hrow-ic svg { width:14px; height:14px; }
.pmk-hstat { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:var(--e700); }
.pmk-hstat i { width:7px; height:7px; border-radius:50%; background:var(--e500); }
.pmk-hstat.warn { color:var(--amb700); }
.pmk-hstat.warn i { background:#F59E0B; }
.pmk-health-foot { margin-top:2px; padding-top:11px; border-top:1px solid rgba(230,233,237,.7); display:flex; justify-content:space-between; font-size:11px; }
.pmk-health-foot .k { color:var(--mut); }
.pmk-health-foot .v { font-weight:600; color:var(--ink); }

/* ---- responsive ---- */
@media (max-width:1080px) {
  .pmk-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pmk-lower { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .pmk-side { display:none; }
}
@media (max-width:640px) {
  .pmk-charts { grid-template-columns:1fr; }
  .pmk-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pmk-search { display:none; }
  .pmk-donut-body .pmk-donut { width:130px; height:130px; }
}