/* MsgClub AI Voice v2 — msgclub.net/aivoice
   Layout: full-width bands with a 1200px .wrap; light brand theme (logo blue + aqua), ink for contrast bands.
   Signature elements: live call cards with transcripts, Indian-language strip, payment reminder timeline. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }

:root {
  --brand: #0197CB;
  --brand-soft: #CDEDF8;
  --action: #0177A3;
  --action-hover: #015F82;
  --link-on-tint: #016E96;
  --ink: #0B1F2A;
  --ink-2: #33434E;
  --muted: #4A5B66;
  --tint: #E5F5F5;
  --tint-2: #F3F8FA;
  --line: #D5E6EC;
  --field: #7D95A0;
  --dark-2: #13303F;
  --dark-3: #1B3B4D;
  --on-dark: #C9DCE3;
  --on-dark-accent: #A5D6EC;
  --white: #FFFFFF;
  --good: #0F7B5F;
  --good-bg: #E3F4EE;
  --warn-bg: #FCEDE6;
  --warn-fg: #9A3412;
  --amber: #B45309;
  --amber-bg: #FEF3E2;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Nirmala UI", sans-serif;
  --font-indic: "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Telugu", "Noto Sans Tamil", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati", "Noto Sans Gurmukhi", "Noto Sans Oriya", "Noto Sans", "Nirmala UI", "Mangal", "Latha", "Gautami", "Tunga", "Kartika", "Shruti", "Raavi", "Vrinda", "Kalinga", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 42, 0.06), 0 2px 8px rgba(11, 31, 42, 0.05);
  --shadow: 0 12px 32px rgba(11, 31, 42, 0.10), 0 2px 6px rgba(11, 31, 42, 0.06);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--action); }
a:hover { color: var(--action-hover); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.band--brand :focus-visible, .band--dark :focus-visible, .card--dark :focus-visible, .site-footer :focus-visible, .code-card :focus-visible, .hero--dark :focus-visible { outline-color: var(--white); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0; text-wrap: balance; color: inherit; }
h1 { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 3.3vw, 40px); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 18px; font-weight: 700; font-family: var(--font-body); line-height: 1.3; }
p { margin: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 10px 14px; z-index: 50; }
.skip-link:focus { left: 12px; top: 12px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.indic { font-family: var(--font-indic); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.band { padding-block: 88px; }
.band--tight { padding-block: 56px; }
.band--tint { background: var(--tint); }
.band--soft { background: linear-gradient(180deg, var(--tint-2), var(--white)); }
.band--dark { background: var(--ink); color: var(--white); }
.band--brand { background: var(--action); color: var(--white); }
.band--line { border-top: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.narrow { max-width: 860px; }
.measure { max-width: 720px; }
.split { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; }
.split > * { flex: 1 1 420px; min-width: 0; }
.split--top { align-items: flex-start; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lead { font-size: 18px; color: var(--ink-2); }
.band--dark .lead, .hero--dark .lead { color: var(--on-dark); }
.band--brand .lead { color: var(--white); }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.center { text-align: center; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link-on-tint); }
.band--dark .eyebrow, .hero--dark .eyebrow { color: var(--on-dark-accent); }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.h2-sm { font-size: 26px; }

/* ---------- header + mega menu ---------- */
.site-header { background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; backdrop-filter: saturate(1.4) blur(8px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 40px; width: auto; display: block; }
.brand .divider { width: 1px; height: 28px; background: var(--line); }
.brand .section-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 500; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.nav-link:hover, .nav-item:focus-within > .nav-link { background: var(--tint-2); color: var(--ink); }
.nav-link[aria-current="page"], .nav-link.is-current { color: var(--link-on-tint); font-weight: 600; }
.nav-link .ico { width: 16px; height: 16px; transition: transform .15s; }
.mega { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 20px; display: none; z-index: 40; }
.nav-item:hover > .mega, .nav-item.is-open > .mega { display: block; }
.nav-item.is-dismissed:hover > .mega { display: none; }
.nav-item:hover > .nav-link .ico, .nav-item.is-open > .nav-link .ico { transform: rotate(180deg); }
.mega--wide { width: min(920px, 92vw); }
.mega--mid { width: min(620px, 92vw); }
.mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 24px; }
.mega-col h2 { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 6px 10px; }
.mega a.mega-link { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.mega a.mega-link:hover { background: var(--tint-2); }
.mega a.mega-link .ico { flex: none; width: 20px; height: 20px; color: var(--brand); margin-top: 1px; }
.mega a.mega-link small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.mega-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.header-actions .login { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px; }
.menu-toggle { display: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--field); border-radius: 10px; background: var(--white); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.show-sm { display: none; }
@media (max-width: 1080px) {
  .js .menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .site-header .wrap { flex-wrap: wrap; }
  .js .site-nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 12px; max-height: calc(100vh - 80px); overflow-y: auto; }
  .js .site-nav.is-open { display: flex; }
  .mega { position: static; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px; width: auto !important; }
  .nav-item:hover > .mega { display: none; }
  .nav-item.is-open > .mega { display: block; }
  .nav-link { width: 100%; justify-content: space-between; }
  .header-actions { margin-left: auto; }
  .header-actions .login { display: none; }
}
@media (max-width: 480px) {
  .hide-sm { display: none; } .show-sm { display: inline; }
  .brand img { height: 30px; } .brand .divider { display: none; } .brand { gap: 8px; }
  .site-header .wrap { column-gap: 8px; }
  .menu-toggle { padding: 0 10px; } .header-actions .btn { padding: 0 12px; }
}
@media (max-width: 340px) { .header-actions .btn { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, transform .15s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; font-size: 15px; font-weight: 600; padding: 0 18px; }
.btn--primary { background: var(--action); color: var(--white); box-shadow: 0 6px 16px rgba(1, 119, 163, 0.25); }
.btn--primary:hover { background: var(--action-hover); color: var(--white); }
.btn--outline { border-color: var(--action); color: var(--action); background: var(--white); }
.btn--outline:hover { background: var(--tint-2); color: var(--action-hover); }
.btn--quiet { border-color: var(--field); color: var(--ink); background: var(--white); font-weight: 600; }
.btn--quiet:hover { background: var(--tint-2); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--dark-2); color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--tint); color: var(--ink); }
.btn--outline-light { border-color: rgba(255,255,255,0.8); color: var(--white); background: transparent; }
.btn--outline-light:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }
.btn .ico { width: 18px; height: 18px; flex: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.link-arrow .ico { width: 16px; height: 16px; transition: transform .15s; }
.link-arrow:hover .ico { transform: translateX(3px); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(900px 420px at 85% 10%, rgba(1,151,203,0.14), transparent 60%),
  radial-gradient(700px 380px at 0% 100%, rgba(165,214,236,0.35), transparent 60%),
  var(--tint); }
.hero .wrap { position: relative; padding-block: 36px 72px; }
.hero--home .wrap { padding-block: 64px 80px; }
.hero--dark { background: radial-gradient(800px 400px at 90% 0%, rgba(1,151,203,0.30), transparent 60%), var(--ink); color: var(--white); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; }
.breadcrumb a { color: var(--link-on-tint); }
.answer { background: var(--white); border-radius: var(--radius); padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; max-width: 900px; box-shadow: var(--shadow-sm); }
.answer .label { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--link-on-tint); line-height: 1.4; }
.answer p { font-size: 16.5px; color: var(--ink-2); }
.updated { font-size: 13.5px; color: var(--muted); }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--white); font-size: 13.5px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(1,151,203,0.18); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 20px; font-size: 15px; color: var(--ink-2); }
.ticks li { display: flex; align-items: flex-start; gap: 10px; }
.ticks .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--action); }
.ticks--col { display: flex; flex-direction: column; }
.band--dark .ticks, .card--dark .ticks { color: var(--tint); }
.band--dark .ticks .ico, .card--dark .ticks .ico { color: var(--on-dark-accent); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
.hero-trust strong { color: var(--ink); }

/* ---------- live call card ---------- */
.callcard { background: var(--white); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; max-width: 460px; width: 100%; margin-inline: auto; border: 1px solid rgba(213,230,236,0.8); }
.callcard__head { background: var(--ink); color: var(--white); padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.callcard__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--action); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; flex: none; }
.callcard__who { flex: 1; min-width: 0; }
.callcard__who strong { display: block; font-size: 15px; }
.callcard__who span { font-size: 12.5px; color: var(--on-dark-accent); }
.callcard__lang { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--dark-3); color: var(--white); }
.wave { display: inline-flex; gap: 3px; align-items: center; height: 20px; }
.wave i { display: block; width: 3px; height: 6px; border-radius: 2px; background: var(--on-dark-accent); animation: wave 1.2s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .1s } .wave i:nth-child(3) { animation-delay: .2s } .wave i:nth-child(4) { animation-delay: .3s } .wave i:nth-child(5) { animation-delay: .4s } .wave i:nth-child(6) { animation-delay: .5s }
@keyframes wave { 0%, 100% { height: 5px } 50% { height: 18px } }
.callcard__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--tint-2); }
.bubble { max-width: 90%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.bubble small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; opacity: .85; }
.bubble--ai { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); }
.bubble--caller { align-self: flex-end; background: var(--action); color: var(--white); border-bottom-right-radius: 4px; }
.bubble--caller small { color: var(--white); }
.callcard__result { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--white); border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--good); }
.callcard__result .ico { width: 18px; height: 18px; flex: none; }
.callcard-wrap { position: relative; }
.float-chip { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 13px; z-index: 2; }
.float-chip strong { display: block; font-size: 13.5px; color: var(--ink); }
.float-chip span { color: var(--muted); }
.float-chip .tile { width: 32px; height: 32px; }
.float-chip--tl { left: -18px; top: 76px; }
.float-chip--br { right: -18px; bottom: 54px; }
@media (max-width: 1100px) { .float-chip { display: none; } }

/* ---------- icon tile ---------- */
.tile { width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--action); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tile .ico { width: 22px; height: 22px; }
.tile--dark { background: var(--dark-3); color: var(--on-dark-accent); }
.tile--white { background: var(--white); }

/* ---------- forms ---------- */
.form-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); color: var(--ink); }
.form-card--flat { box-shadow: none; border: 1px solid var(--line); }
.form-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.25; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 600; }
.field input, .field select, .field textarea { min-height: 46px; padding: 0 12px; border: 1px solid var(--field); border-radius: 10px; font: inherit; font-size: 15px; background: var(--white); color: var(--ink); width: 100%; }
.field textarea { padding: 10px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--action); outline: 2px solid var(--action); outline-offset: 0; }
.field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.field-row .field { flex: 1 1 150px; }
@media (max-width: 420px) { .field-row .field { flex-basis: 100% !important; } }
.phone-input { display: flex; gap: 8px; }
.phone-input span { min-height: 46px; padding: 0 12px; border: 1px solid var(--field); border-radius: 10px; display: flex; align-items: center; background: var(--tint); color: var(--ink-2); }
.phone-input input { flex: 1 1 auto; min-width: 0; }
.form-note { font-size: 12.5px; color: var(--muted); }
.form-status { font-size: 14px; font-weight: 600; color: var(--link-on-tint); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--warn-fg); }

/* ---------- cards ---------- */
.card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); display: flex; flex-direction: column; gap: 10px; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.band--tint .card { border-color: transparent; }
.card--tint { background: var(--tint); border-color: transparent; }
.card--quiet { background: var(--tint-2); border-color: transparent; }
.card--highlight { background: var(--tint); border: 2px solid var(--brand); }
.card--dark { background: var(--ink); color: var(--white); border-color: transparent; }
.card--lg { padding: 32px; gap: 14px; }
.card .kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }
.card--dark .kicker { color: var(--on-dark-accent); }
.card .title { font-size: 18px; font-weight: 700; line-height: 1.3; font-family: var(--font-body); }
.card .text { font-size: 14.5px; color: var(--muted); flex: 1 1 auto; }
.card--quiet .text, .card--tint .text { color: var(--ink-2); }
.card .more { font-size: 14px; font-weight: 700; color: var(--action); display: inline-flex; align-items: center; gap: 6px; }
.card .more .ico { width: 16px; height: 16px; }
a.card { text-decoration: none; }
a.card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--ink); }
.card-head { display: flex; align-items: center; gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 3px 10px; border-radius: 999px; background: var(--tint); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tag--white { background: var(--white); border: 1px solid var(--line); }
.stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { padding: 22px; border-radius: var(--radius); background: var(--white); text-align: center; box-shadow: var(--shadow-sm); }
.stat strong { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat span { font-size: 14.5px; color: var(--ink-2); }
.figure { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); display: flex; flex-direction: column; gap: 10px; }
.band--tint .figure { border-color: transparent; }
.figure .num { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--link-on-tint); line-height: 1.1; }
.figure figcaption { display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; color: var(--ink-2); }
.figure figcaption a { font-size: 13px; color: var(--link-on-tint); }

/* ---------- bento (features) ---------- */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento > * { grid-column: span 2; }
.bento > .is-large { grid-column: span 3; }
.bento .card { padding: 26px; }
.bento .card--dark .text { color: var(--on-dark); }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento > *, .bento > .is-large { grid-column: span 1; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } }

/* ---------- language strip ---------- */
.langs { overflow: hidden; border-block: 1px solid var(--line); background: var(--white); }
.langs__track { display: flex; gap: 12px; padding-block: 18px; width: max-content; animation: marquee 40s linear infinite; }
.langs:hover .langs__track { animation-play-state: paused; }
.lang-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--tint-2); white-space: nowrap; text-decoration: none; color: var(--ink); }
.lang-chip b { font-family: var(--font-indic); font-size: 18px; font-weight: 600; }
.lang-chip span { font-size: 13px; color: var(--muted); }
a.lang-chip:hover { background: var(--tint); }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .langs__track { width: auto; padding-inline: 24px; } .langs__set { flex-wrap: wrap; justify-content: center; } .langs__set[aria-hidden] { display: none; } }
.lang-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.lang-grid a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.lang-grid a:hover { border-color: var(--brand); }
.lang-grid b { font-family: var(--font-indic); font-size: 22px; font-weight: 600; }
.lang-grid span { font-size: 14px; color: var(--muted); }

/* ---------- payment reminder timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; position: relative; }
.timeline li { position: relative; padding: 40px 18px 0 0; display: flex; flex-direction: column; gap: 8px; }
.timeline li::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 2px; background: var(--brand-soft); }
.timeline li::after { content: ""; position: absolute; top: 6px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--brand); }
.timeline li.is-due::after { background: var(--brand); box-shadow: 0 0 0 5px rgba(1,151,203,0.2); }
.timeline li.is-late::after { border-color: var(--amber); }
.timeline .when { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link-on-tint); }
.timeline li.is-late .when { color: var(--amber); }
.timeline strong { font-size: 16.5px; }
.timeline span.d { font-size: 14.5px; color: var(--muted); }
.band--dark .timeline span.d { color: var(--on-dark); }
@media (max-width: 700px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline li { padding: 0 0 22px 34px; }
  .timeline li::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .timeline li::after { top: 2px; }
}

/* ---------- chips filter ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--field); background: var(--white); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- steps & flows ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: s; }
.steps li { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 10px; background: var(--white); }
.band--tint .steps li { border-color: transparent; }
.steps .n { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.steps strong { font-size: 17px; }
.steps span.d, .steps p { font-size: 14.5px; color: var(--muted); }
.steps--rows { grid-template-columns: 1fr; gap: 10px; }
.steps--rows li { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px 20px; }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.flow > .node { flex: 1 1 190px; padding: 20px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); background: var(--white); }
.flow > .node--dark { background: var(--dark-2); border-color: transparent; color: var(--white); }
.flow > .node--light { background: var(--white); color: var(--ink); border-color: transparent; }
.flow > .node--hl { background: var(--tint); border: 2px solid var(--brand); }
.flow .node .k { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }
.flow .node--dark .k { color: var(--on-dark-accent); }
.flow .node--light .k { color: var(--link-on-tint); }
.flow .node strong { font-size: 16.5px; line-height: 1.35; }
.flow .node span.d { font-size: 14.5px; color: var(--muted); }
.flow > .arrow { flex: 0 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--link-on-tint); }
.flow > .arrow .ico { width: 22px; height: 22px; }
.flow > .arrow--labelled { flex: 0 1 110px; }
@media (max-width: 700px) { .flow > .arrow .ico { transform: rotate(90deg); } .flow > .arrow { flex-basis: 100%; } }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.band--tint .table-wrap { border-color: transparent; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
th, td { padding: 13px 18px; text-align: left; vertical-align: top; }
thead th { background: var(--tint-2); }
tbody tr { border-top: 1px solid var(--line); }
tbody th { color: var(--muted); font-weight: 600; }
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--link-on-tint); font-weight: 600; font-size: 13.5px; }
.status--bad { background: var(--warn-bg); color: var(--warn-fg); }
.status--none { background: var(--tint-2); color: var(--muted); }
.included { color: var(--link-on-tint); font-weight: 600; }

/* ---------- media ---------- */
.media { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.media img { display: block; width: 100%; height: auto; }
.media--wide { max-width: 1100px; }
.media figcaption { font-size: 13.5px; color: var(--muted); }
@media (max-width: 600px) { .media--hide-sm { display: none; } }

/* ---------- code ---------- */
.code-card { background: var(--ink); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid #22394A; }
.tab { min-height: 44px; padding: 0 16px; border: none; border-radius: 8px 8px 0 0; background: transparent; color: var(--on-dark-accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--dark-2); color: var(--white); }
.code-card pre { margin: 0; padding: 20px 22px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; color: var(--tint); }
.code-card pre:focus-visible { outline-offset: -3px; }
.code-card .caption { padding: 0 22px 18px; font-size: 13px; color: var(--on-dark-accent); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.faq summary { font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--action); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 6px; padding-bottom: 6px; font-size: 15.5px; color: var(--ink-2); max-width: 70ch; }

/* ---------- agents gallery ---------- */
.agent-card { gap: 12px; }
.agent-card .opener { font-size: 14.5px; color: var(--ink-2); background: var(--tint-2); border-radius: 12px; padding: 12px 14px; }
.agent-card .opener b { font-family: var(--font-indic); font-weight: 500; color: var(--ink); display: block; }
.agent-card .opener small { display: block; color: var(--muted); margin-top: 4px; font-size: 12.5px; }
.agent-card .captures { font-size: 13px; color: var(--muted); }
.agent-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* ---------- CTA band ---------- */
.cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.cta h2 { font-size: clamp(24px, 3vw, 34px); }
.cta-panel { border-radius: 24px; padding: 48px; background: radial-gradient(600px 300px at 100% 0%, rgba(165,214,236,0.35), transparent 60%), var(--action); color: var(--white); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cta-panel .lead { color: var(--white); }
@media (max-width: 600px) { .cta-panel { padding: 32px 24px; } .band { padding-block: 60px; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark); }
.site-footer .wrap { padding-block: 64px 28px; display: flex; flex-direction: column; gap: 40px; }
.footer-cols { display: grid; gap: 32px; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } }
.footer-about { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.footer-about .name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--white); }
.footer-about .name span { color: var(--on-dark-accent); }
.footer-about a { color: var(--white); font-weight: 600; text-decoration: none; }
.footer-cols nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; min-width: 0; }
.footer-heading { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.footer-cols nav a { color: var(--on-dark); text-decoration: none; }
.footer-cols nav a:hover { color: var(--white); text-decoration: underline; }
.footer-base { border-top: 1px solid #22394A; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; }
.jump { display: none; }
@media (max-width: 700px) { .jump { display: inline-flex; align-self: flex-start; } }

/* ---------- v2 additions: nav headings, hover bridge, footer industries ---------- */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mega-h { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 6px 10px; }
.mega-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .mega-cols--4 { grid-template-columns: 1fr; } }
.footer-industries { border-top: 1px solid #22394A; padding-top: 24px; }
.footer-industries div { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; margin-top: 8px; }
.footer-industries a { color: var(--on-dark); text-decoration: none; }
.footer-industries a:hover { color: var(--white); text-decoration: underline; }
.footer-base a { color: var(--on-dark); }
.steps--5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
a.tag:hover { border-color: var(--brand); color: var(--ink); }
.callcard-wrap .callcard { position: relative; z-index: 1; }
.agent-card h3 { font-size: 17px; }
.grid--5 { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
.float-chip--tl { left: -44px; top: 168px; }
.float-chip--br { right: -36px; bottom: 70px; }
@media (max-width: 480px) {
  .callcard__head .wave { display: none; }
  .grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid--tiles .card { flex-direction: column !important; align-items: flex-start !important; padding: 12px !important; }
  .grid--tiles .tile { width: 36px; height: 36px; }
}

/* ---------- review fixes ---------- */
.langs__set { display: flex; gap: 12px; }
.langs:focus-within .langs__track { animation-play-state: paused; }
.langs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
@media (prefers-reduced-motion: reduce) { .langs { -webkit-mask-image: none; mask-image: none; } }
.band--dark .timeline .when { color: var(--on-dark-accent); }
.band--dark .timeline li.is-late .when { color: #FDBA74; }
.band--dark .timeline li.is-late::after { border-color: #FDBA74; }
.band--dark .timeline li::after { background: var(--ink); }
.band--dark .timeline li.is-due::after { background: var(--brand); }
.band--dark .timeline li::before { background: #2A4A5C; }
.band--tint a:not(.btn):not(.card):not(.tag) { color: var(--link-on-tint); }
.callcard { margin: 0 auto; }
.bubble .indic, .agent-card .opener b { font-size: 15.5px; line-height: 1.7; }
.agent-card .link-arrow { min-height: 44px; }
.agent-card .opener { margin-top: auto; }
.hero-trust span { white-space: nowrap; }
@media (max-width: 700px) { .footer-cols nav a, .footer-industries a { padding-block: 8px; display: inline-block; } }

/* =====================================================================
   MAIN SITE ADDITIONS (msgclub.net) — shared by all service sections
   ===================================================================== */
:root { --c-sms: #0177A3; --c-wa: #128C5B; --c-rcs: #5B4BD6; --c-voice: #B45309; --c-ivr: #C2414B; --c-ai: #0B1F2A; --c-missed: #9A5B0F; --c-api: #33434E; }
.brand .brand-home img { height: 40px; }

/* section sub-navigation (multi-page services) */
.subnav { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 66px; z-index: 20; }
.subnav .wrap { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; min-height: 52px; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav__name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; padding-right: 14px; margin-right: 6px; border-right: 1px solid var(--line); white-space: nowrap; }
.subnav__name .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent, var(--brand)); }
.subnav a.subnav__link { white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: 8px; min-height: 40px; display: inline-flex; align-items: center; }
.subnav a.subnav__link:hover { background: var(--tint-2); color: var(--ink); }
.subnav a.subnav__link[aria-current="page"] { color: var(--link-on-tint); background: var(--tint); font-weight: 600; }
@media (max-width: 1080px) { .subnav { top: 0; position: relative; } }

/* channel accents */
.ch-sms { --accent: var(--c-sms); } .ch-whatsapp { --accent: var(--c-wa); } .ch-rcs { --accent: var(--c-rcs); }
.ch-voice-broadcast { --accent: var(--c-voice); } .ch-ivr { --accent: var(--c-ivr); } .ch-aivoice { --accent: var(--c-ai); }
.ch-missed-call { --accent: var(--c-missed); } .ch-api { --accent: var(--c-api); }
.card.ch { border-top: 4px solid var(--accent); }
.card.ch .tile { background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); }
.badge-new { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); font-size: 12px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.mega-link .badge-new { margin-left: 6px; }
.dotc { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent, var(--brand)); margin-right: 8px; vertical-align: 1px; }

/* channel strip on home hero */
.chan-strip { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chan-strip a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.chan-strip a:hover { border-color: var(--accent, var(--brand)); }
.chan-strip .dotc { margin: 0; }

/* hero image */
.hero-media { margin: 0; }
.hero-media img { display: block; width: 100%; height: auto; border-radius: 0; filter: drop-shadow(0 18px 40px rgba(11,31,42,0.14)); }
.media--frame img { border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); }

/* key facts (AEO) */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; margin: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts dt { color: var(--muted); font-weight: 600; font-size: 14px; }
.facts dd { margin: 0; color: var(--ink); }

/* inline code and JSON payload panels */
:not(pre) > code { font-family: var(--font-mono); font-size: .9em; background: var(--tint-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
.code-card pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.k-key { color: #8FD0EE; } .k-str { color: #B8E6C9; } .k-num { color: #F9C78B; } .k-com { color: #7C98A6; }

/* =====================================================================
   MOCKUP KIT — used inside visuals/scenes/*.html (rendered to webp)
   and sparingly inline on pages.
   ===================================================================== */
.mk-phone { width: 340px; background: #0B1F2A; border-radius: 46px; padding: 12px; box-shadow: 0 30px 70px rgba(11,31,42,.28), 0 4px 12px rgba(11,31,42,.12); position: relative; }
.mk-phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; border-radius: 14px; background: #0B1F2A; z-index: 3; }
.mk-screen { background: #fff; border-radius: 36px; overflow: hidden; min-height: 640px; display: flex; flex-direction: column; font-family: var(--font-body); }
.mk-status { height: 46px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.mk-appbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; border-bottom: 1px solid #E6EEF2; }
.mk-appbar .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; background: var(--accent, var(--action)); flex: none; }
.mk-appbar b { display: block; font-size: 15px; line-height: 1.2; color: var(--ink); }
.mk-appbar small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.mk-appbar .verified { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); display: inline-grid; place-items: center; color: #fff; font-size: 9px; }
.mk-thread { flex: 1; padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 10px; background: #F4F7F9; font-size: 14px; line-height: 1.45; color: var(--ink); }
.mk-day { align-self: center; font-size: 11.5px; color: var(--muted); background: #fff; padding: 3px 10px; border-radius: 8px; }
.mk-msg { max-width: 84%; padding: 9px 12px 7px; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(11,31,42,.06); align-self: flex-start; border-bottom-left-radius: 5px; }
.mk-msg time { display: block; text-align: right; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.mk-msg.me { align-self: flex-end; background: var(--action); color: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
.mk-msg.me time { color: rgba(255,255,255,.8); }
.mk-msg .otp { display: block; font: 700 22px/1.2 var(--font-mono); letter-spacing: .18em; margin: 4px 0; }
.mk-msg a { color: var(--action); font-weight: 600; }
.mk-sender { font-size: 11.5px; color: var(--muted); align-self: flex-start; margin: 2px 0 -6px 4px; }
/* WhatsApp skin */
.mk-wa .mk-appbar { background: #0F6E4C; border: 0; } .mk-wa .mk-appbar b, .mk-wa .mk-appbar small { color: #fff; } .mk-wa .mk-status { background: #0F6E4C; color: #fff; }
.mk-wa .mk-appbar .av { background: #fff; color: #0F6E4C; } .mk-wa .mk-appbar .verified { background: #25D366; }
.mk-wa .mk-thread { background: #EFE7DD; }
.mk-wa .mk-msg.me { background: #D9FDD3; color: var(--ink); } .mk-wa .mk-msg.me time { color: var(--muted); }
.mk-btns { display: grid; gap: 1px; margin: 8px -12px -7px; border-top: 1px solid #E3E8EB; }
.mk-btns span { text-align: center; padding: 9px; color: #027EB5; font-weight: 600; font-size: 13.5px; border-bottom: 1px solid #E3E8EB; }
.mk-btns span:last-child { border-bottom: 0; }
.mk-wa .mk-btns span { color: #00897B; }
.mk-media { height: 132px; margin: -5px -8px 8px; border-radius: 12px; background: linear-gradient(135deg, var(--accent, var(--action)), #7FD3F0); position: relative; overflow: hidden; }
.mk-media::after { content: ""; position: absolute; inset: auto 18px 18px 18px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.28); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mk-chips span { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #CFE1E8; color: var(--action); font-size: 12.5px; font-weight: 600; }
.mk-wa .mk-chips span { color: #00897B; border-color: #BFE3D6; }
/* RCS skin */
.mk-rcs .mk-appbar .av { background: var(--c-rcs); } .mk-rcs .mk-appbar .verified { background: #1A73E8; }
.mk-rcs .mk-thread { background: #fff; }
.mk-rcs .mk-msg { background: #F1EFFE; box-shadow: none; }
.mk-rcs .mk-chips span { color: var(--c-rcs); border-color: #D9D3FB; }
.mk-carousel { display: flex; gap: 10px; overflow: hidden; margin-right: -12px; }
.mk-rich { flex: 0 0 210px; background: #fff; border: 1px solid #E3E8EB; border-radius: 16px; overflow: hidden; }
.mk-rich .mk-media { margin: 0; border-radius: 0; height: 110px; }
.mk-rich .body { padding: 10px 12px; } .mk-rich b { display: block; font-size: 14px; } .mk-rich p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.mk-rich .mk-btns { margin: 0; } .mk-rcs .mk-btns span { color: var(--c-rcs); }
.mk-compose { display: flex; align-items: center; gap: 8px; padding: 10px 12px 18px; background: #fff; border-top: 1px solid #E6EEF2; }
.mk-compose span { flex: 1; height: 38px; border-radius: 19px; background: #F1F5F7; }
.mk-compose i { width: 38px; height: 38px; border-radius: 50%; background: var(--accent, var(--action)); }
/* dashboard / panel */
.mk-panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(11,31,42,.14); overflow: hidden; font-family: var(--font-body); color: var(--ink); }
.mk-panel__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--tint-2); font-size: 13px; font-weight: 600; }
.mk-panel__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5E6EC; }
.mk-panel__bar b { margin-left: 8px; }
.mk-panel__body { padding: 18px; display: grid; gap: 14px; }
.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mk-kpi { background: var(--tint-2); border-radius: 12px; padding: 12px; } .mk-kpi small { display: block; font-size: 11.5px; color: var(--muted); } .mk-kpi b { font: 700 22px/1.2 var(--font-display); }
.mk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 0; }
.mk-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: none; padding: 6px 8px; }
.mk-table td { padding: 8px; border-top: 1px solid var(--line); }
.mk-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--good-bg); color: var(--good); }
.mk-pill--b { background: var(--tint); color: var(--link-on-tint); } .mk-pill--w { background: var(--amber-bg); color: var(--amber); } .mk-pill--r { background: var(--warn-bg); color: var(--warn-fg); }
.mk-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; } .mk-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(var(--brand), #7FD3F0); }
.mk-json { background: var(--ink); color: var(--tint); border-radius: 16px; padding: 16px 18px; font: 12.5px/1.65 var(--font-mono); white-space: pre; box-shadow: 0 24px 60px rgba(11,31,42,.2); }
.mk-json .h { display: block; color: var(--on-dark-accent); font-family: var(--font-body); font-weight: 700; font-size: 12px; margin-bottom: 8px; letter-spacing: .04em; text-transform: uppercase; }
/* IVR */
.mk-ivr { width: 360px; background: var(--ink); color: var(--on-dark); border-radius: 22px; padding: 22px; box-shadow: 0 24px 60px rgba(11,31,42,.25); font-family: var(--font-body); }
.mk-ivr .say { color: #fff; font: 600 16px/1.5 var(--font-display); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #22394A; }
.mk-ivr ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-ivr li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 14.5px; }
.mk-ivr li.on { background: rgba(1,151,203,.35); color: #fff; }
.mk-ivr kbd { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--ink); font: 700 15px var(--font-mono); box-shadow: 0 2px 0 #8FA9B5; flex: none; }
/* scene canvas helpers (visuals only) */
.scene { position: relative; padding: 40px; display: inline-block; }
.scene .float-chip { position: absolute; display: flex; }
.scene-row { display: flex; align-items: center; gap: 28px; }

/* product cards with sub-links (home, hubs) */
.card h3.title a { color: inherit; text-decoration: none; }
.card h3.title a::after { content: " →"; color: var(--accent, var(--action)); }
.card h3.title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card--dark h3.title a::after { color: var(--on-dark-accent); }
.card--dark .text { color: var(--on-dark); }
.sublinks { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.sublinks a { display: inline-flex; min-height: 32px; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--tint-2); color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.sublinks a:hover { background: var(--tint); color: var(--ink); }
.card--dark .sublinks { border-top-color: #22394A; }
.card--dark .sublinks a { background: var(--dark-3); color: var(--white); }
.card--dark .sublinks a:hover { background: var(--dark-2); }
.band--tint .card.ch { border-color: transparent; border-top: 4px solid var(--accent); }
td .dotc, th .dotc { margin-right: 8px; }
.bento h3 { font-size: 18px; }
.band--tint .card--dark h3.title a, .band--tint .card--dark .sublinks a { color: var(--white); }

/* review fixes: contrast on dark bands, roomier facts grid */
.band--dark :not(pre) > code, .card--dark :not(pre) > code, .hero--dark :not(pre) > code { background: var(--dark-3); border-color: #2A4A5C; color: var(--white); }
.flow .node--dark span.d { color: var(--on-dark); }
.facts { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.facts > div { grid-template-columns: 140px 1fr; }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } .facts > div { grid-template-columns: 110px 1fr; } }
.facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.steps--6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* UX review ============================================================ */
/* 1. Mega menu: centre the panel under the header instead of under its button,
      so the wide Products panel is never cut off at the left edge (it was at 1366px). */
@media (min-width: 1081px) {
  .site-header .wrap { position: relative; }
  .site-nav .nav-item { position: static; }
  .site-nav .mega { top: calc(100% - 4px); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); }
  .site-nav .mega--mid { left: auto; right: 24px; transform: none; }
}

/* 2. Dark cards on tinted bands: the tint-band link colour was overriding white text
      (AI Voice card on the home page: teal on ink ~2:1, sub-link pills nearly invisible). */
.band--tint .card--dark a:not(.btn):not(.tag), .band--soft .card--dark a:not(.btn):not(.tag) { color: var(--white); }
.band--tint .card--dark .sublinks a, .band--soft .card--dark .sublinks a { background: var(--dark-3); color: var(--white); }
.band--tint .card--dark .sublinks a:hover { background: #24485C; }
.card--dark a:not(.btn) { color: var(--white); }
.card--dark .more { color: var(--on-dark-accent); }

/* 3. Hero images: give the visual a little more room and trim the transparent canvas
      margin baked into each scene, so text inside mockups reads larger at 1x. */
@media (min-width: 1081px) {
  .hero .split > div:has(> .hero-media) { flex-grow: 1.18; }
  .hero-media img { width: 108%; max-width: none; margin-left: -4%; }
}
/* On phones, let the hero visual bleed to the screen edges (+15% size) */
@media (max-width: 600px) {
  .hero-media { margin-inline: -24px; overflow: hidden; }
  .hero-media img { width: 106%; max-width: none; margin-left: -3%; filter: drop-shadow(0 10px 24px rgba(11,31,42,0.12)); }
  .media img { width: calc(100% + 24px); max-width: none; margin-left: -12px; }
}

/* 4. Wide tables on small screens: show that the table scrolls sideways */
.table-wrap {
  background:
    linear-gradient(90deg, var(--white) 30%, rgba(255,255,255,0)) left / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--white) 30%, rgba(255,255,255,0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11,31,42,.16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11,31,42,.16), transparent) right / 12px 100% no-repeat scroll,
    var(--white);
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline-offset: 2px; }
@media (max-width: 600px) {
  table { font-size: 14.5px; }
  th, td { padding: 12px 14px; }
  tbody th { min-width: 110px; }
}

/* 5. Tap targets (44px where it matters on touch screens) */
.subnav a.subnav__link { min-height: 44px; }
.subnav__name { min-height: 44px; }
.sublinks a { min-height: 36px; }
@media (max-width: 700px) {
  .footer-about a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-base a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; }
  .sublinks a { min-height: 40px; }
}

/* 6. Section sub-nav on phones: fade the right edge so it is obvious the row scrolls */
@media (max-width: 1080px) {
  .subnav .wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 40px; }
}

/* 7. Open mobile menu: separate it from the page underneath */
@media (max-width: 1080px) {
  .js .site-nav.is-open { border-top: 1px solid var(--line); padding-top: 8px; }
  .site-header:has(.site-nav.is-open) { box-shadow: 0 16px 32px rgba(11,31,42,.16); }
}

/* 8. Section rhythm: two plain white bands in a row read as one oversized gap (176px).
      Pull the second one up; tinted/dark/soft bands keep their full padding. */
.band:not(.band--tint):not(.band--soft):not(.band--dark):not(.band--brand) + .band:not(.band--tint):not(.band--soft):not(.band--dark):not(.band--brand):not(.band--line) { padding-top: 24px; }

/* 9. Text on dark bands/cards: keep secondary text at AA (>= 7:1 on ink) */
.band--dark .muted, .card--dark .muted, .band--dark .small, .band--dark figcaption { color: var(--on-dark); }
.band--dark .card:not(.card--dark) { color: var(--ink); }

/* 10. Focus: visible ring on cards and pills, not only on default links */
a.card:focus-visible, .sublinks a:focus-visible, .chan-strip a:focus-visible, .subnav a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.band--dark a.card:focus-visible, .card--dark .sublinks a:focus-visible { outline-color: var(--white); }

/* 11. FAQ: whole row is the target, with a hover state */
.faq summary { min-height: 44px; align-items: center; }
.faq summary:hover { color: var(--action-hover); }

/* 12. Forms: mark required fields visually (labels are already associated) */
.field:has(:is(input, select, textarea)[required]) > label::after { content: " *"; color: var(--warn-fg); }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--warn-fg); }

/* 13. Hero images must never push the page wider than the screen */
.hero { overflow-x: clip; }

/* 14. Scene canvases (visuals/scenes only — #scene never appears on site pages):
       room for soft shadows so they are not cut into hard edges, and a gentle fade
       where a phone is deliberately cropped at the bottom. */
.scene { padding-bottom: 60px; }
#scene.sc { box-sizing: content-box !important; border: 36px solid transparent; border-bottom-width: 60px; }
#scene.fade-b .mk-phone { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent calc(100% - 8px)); mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent calc(100% - 8px)); }

/* industry & use-case pages */
.tpl__text { margin: 0; padding: 14px 16px; background: var(--tint-2); border-radius: 12px; font: 13.5px/1.6 var(--font-mono); color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.card.tpl { gap: 12px; }
.h3-group { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mega--ind { width: min(1040px, 94vw); }
.mega--ind .mega-link { padding: 6px 10px; font-size: 14px; }
ul.text { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.card .title a { color: inherit; }
.mk-rcs .mk-msg.me { background: var(--c-rcs); color: #fff; }
.mk-rcs .mk-msg.me time { color: rgba(255,255,255,.8); }

/* UX review 2 ========================================================== */
/* a. Link rows at the end of sections: pills instead of tiny underlined links (44px tap targets on phones) */
.linkrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.linkrow a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.linkrow a:hover { border-color: var(--action); color: var(--action); }
.band--tint .linkrow a, .band--soft .linkrow a { border-color: transparent; box-shadow: var(--shadow-sm); }

/* b. Tag clouds that are links: look clickable, bigger targets */
.tags--links { gap: 8px; }
.tags--links a.tag { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; font-size: 13.5px; text-decoration: none; color: var(--link-on-tint, var(--action)); }
.tags--links a.tag:hover { background: var(--action); color: var(--white); border-color: var(--action); }
.tags--links a.tag:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.card .tags--links a.tag { background: var(--tint-2); border: 1px solid var(--line); }

/* c. "Where does X fit best?" cards: colour the verdict (strong / good / weak) */
.card.fit { border-top: 4px solid var(--line); }
.card.fit--1 { border-top-color: var(--good); }
.card.fit--2 { border-top-color: var(--action); }
.card.fit--3 { border-top-color: #9AAAB4; }

/* d. Industry hubs: jump chips to each group, and room under the sticky header */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--tint-2); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.jump a:hover { background: var(--tint); border-color: var(--action); }
.jump .n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--white); color: var(--muted); font-size: 12px; display: inline-grid; place-items: center; }
.group-block, [id$="-title"] { scroll-margin-top: 140px; }
@media (max-width: 700px) {
  .jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: -24px; padding: 0 24px 6px; scrollbar-width: none; align-self: stretch; width: auto; max-width: 100vw; min-width: 0; }
  .jump::-webkit-scrollbar { display: none; }
  .jump a { flex: none; }
}

/* e. Template cards: copy button, and a label row that never wraps awkwardly */
.card.tpl .card-head { justify-content: space-between; }
.tpl__copy { appearance: none; border: 1px solid var(--line); background: var(--white); color: var(--action); font: 700 13px var(--font-body); min-height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer; }
.tpl__copy:hover { border-color: var(--action); background: var(--tint-2); }
.tpl__copy:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.card.tpl .title { font-size: 16.5px; }
.tpl__text { flex: 1 1 auto; }

/* f. Hero "who it is for" tags: quiet labels, not buttons */
.hero .tags[aria-label] .tag { background: transparent; border: 0; padding: 2px 0; margin-right: 10px; color: var(--ink-2); font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.hero .tags[aria-label] .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--brand)); flex: none; }

/* g. Card grids of "see also" links (other channels, related industries): compact rows on phones */
@media (max-width: 700px) {
  .grid--compact { gap: 10px; }
  .grid--compact > a.card { display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 4px 14px; padding: 14px 16px; min-height: 64px; }
  .grid--compact > a.card .card-head { grid-row: 1 / span 2; }
  .grid--compact > a.card .tile { width: 40px; height: 40px; }
  .grid--compact > a.card .title { font-size: 16px; grid-column: 2; }
  .grid--compact > a.card .text { display: none; }
  .grid--compact > a.card .more { grid-column: 3; grid-row: 1 / span 2; font-size: 0; gap: 0; }
  .grid--compact > a.card .more .ico { width: 20px; height: 20px; }
  .grid--compact > a.card.ch { border-top-width: 1px; border-left: 4px solid var(--accent); }
  .band--tint .grid--compact > a.card.ch { border-top: 0; border-left: 4px solid var(--accent); }
}

/* h. Industries mega menu: fits 768px-tall laptops (scrolls inside if not), tighter rows */
@media (min-width: 1081px) {
  .mega--ind { max-height: calc(100vh - 84px); overflow-y: auto; padding: 16px 20px; }
  .mega--ind .mega-cols--4 { gap: 2px 20px; }
  .mega--ind .mega-link { padding: 5px 10px; line-height: 1.3; }
  .mega--ind .mega-h { margin-top: 10px; }
  .mega--ind .mega-foot { position: sticky; bottom: -16px; background: var(--white); padding-bottom: 4px; }
  .mega--ind .mega-foot a { font-weight: 700; }
}
/* On phones: "All industries" first, so nobody scrolls past 31 links to find it */
@media (max-width: 1080px) {
  .mega--ind { display: none; flex-direction: column; }
  .nav-item.is-open > .mega--ind { display: flex; }
  .mega--ind .mega-foot { order: -1; margin: 4px 0 6px; padding: 0 0 10px; border-top: 0; border-bottom: 1px solid var(--line); }
  .mega--ind .mega-foot a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; padding-left: 10px; }
  .mega--ind .mega-foot .muted { display: none; }
  .mega--ind .mega-link { min-height: 44px; align-items: center; }
}

/* i. Footer industry row on phones: two columns instead of 31 stacked lines */
@media (max-width: 700px) {
  .footer-industries div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; font-size: 13px; }
  .footer-industries a { padding-block: 9px; line-height: 1.3; }
}

/* j. Mobile hero: product image after the copy gets breathing room; answer box full width */
@media (max-width: 600px) {
  .hero .hero-media { margin-top: -36px; margin-bottom: -20px; }
  .hero .tags[aria-label] { gap: 2px 0; }
}

/* k. Channel main pages, "by industry" tag cloud: links read as chips, not underlined text */
section[aria-labelledby="ind-hub-title"] .tags { gap: 8px; }
section[aria-labelledby="ind-hub-title"] .tags a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; text-decoration: none; font-size: 13.5px; color: var(--ink-2); }
section[aria-labelledby="ind-hub-title"] .tags a:hover { border-color: var(--action); color: var(--action); }
@media (max-width: 700px) { section[aria-labelledby="ind-hub-title"] .tags a { min-height: 40px; } }

/* l. Industry hubs on phones: icon beside the title and a 3-line summary, so 31 cards are not 9,000px of scrolling */
@media (max-width: 700px) {
  .group-block .grid { gap: 10px; }
  .group-block .grid > a.card { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 16px; }
  .group-block .grid > a.card .card-head { grid-row: 1 / span 3; align-self: start; }
  .group-block .grid > a.card .tile { width: 40px; height: 40px; }
  .group-block .grid > a.card .title { font-size: 16.5px; }
  .group-block .grid > a.card .text { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .group-block .grid > a.card .more { font-size: 13.5px; }
  .jump { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
}

/* m. 3-column card grids with 5 (or 8) cards: the last two share the row instead of leaving a hole */
@media (min-width: 1081px) {
  .grid--fill { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid--fill > * { grid-column: span 2; }
  .grid--fill > :nth-child(3n+1):nth-last-child(2), .grid--fill > :nth-child(3n+2):last-child { grid-column: span 3; }
}