/* =====================================================================
   Marshanam — global design system
   Derived from the finalized homepage redesign.
   Sections:
     1. Tokens & base
     2. Buttons, eyebrow, ticks
     3. Header / navigation / mobile panel
     4. Hero + chat mock (homepage)
     5. Generic sections & section heads
     6. Cards, bento, channels, use cases, testimonials
     7. Steps / rail (process)
     8. Benefits band, CTA band
     9. Pricing
    10. FAQ / accordion
    11. Tables, forms, notes, badges
    12. Footer
    13. Utilities & responsive
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ============ 1. TOKENS & BASE ============ */
:root{
  --teal-900:#05241F;
  --teal-800:#093F36;
  --teal-700:#0D6355;
  --teal-600:#14907B;
  --teal-500:#1ABCA1;
  --teal-100:#E0FBF6;
  --teal-50:#EFFDFB;
  --gold-500:#2261B4;
  --gold-600:#12335E;
  --brand-blue:#2261B4;
  --brand-blue-light:#6FA8E0;
  --brand-green:#1ABCA1;
  --brand-green-light:#6FE3CC;
  --dark-navy:#0A1526;
  --ink-900:#0A1526;
  --ink-700:#3E4C5E;
  --ink-500:#6B7A8C;
  --paper-0:#FFFFFF;
  --paper-50:#F7FBFC;
  --paper-100:#EAF6FA;
  --line:#DCE8ED;

  /* legacy aliases so existing page markup keeps working */
  --ink:var(--ink-900);
  --muted:var(--ink-700);
  --faint:var(--ink-500);
  --bg:var(--paper-50);
  --surface:var(--paper-0);
  --border:var(--line);
  --primary:var(--teal-600);
  --primary-dark:var(--teal-700);
  --primary-tint:var(--teal-100);
  --accent:var(--brand-blue);
  --accent-tint:#E4EFFA;
  --danger:#B3432E;

  --shadow-sm: 0 1px 2px rgba(10,21,38,0.06), 0 1px 1px rgba(10,21,38,0.04);
  --shadow-md: 0 8px 24px rgba(10,21,38,0.10);
  --shadow-lg: 0 20px 50px rgba(10,21,38,0.16);
  --shadow: var(--shadow-sm);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --font-display:'Plus Jakarta Sans', Inter, sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-50);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,h5{font-family:var(--font-display);margin:0 0 .5em;color:var(--ink-900);line-height:1.15;letter-spacing:-.02em;font-weight:800;}
h1{font-size:clamp(34px,4.6vw,54px);}
h2{font-size:clamp(28px,3.4vw,38px);}
h3{font-size:21px;font-weight:700;}
h4{font-size:16.5px;font-weight:700;letter-spacing:-.01em;}
p{margin:0 0 1em;}
ul{margin:0;padding-left:1.2em;}
.lede{font-size:16.5px;line-height:1.65;color:var(--ink-700);}
:focus-visible{outline:2px solid var(--teal-600);outline-offset:3px;}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

.container,.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px;}

/* ============ 2. BUTTONS / EYEBROW / TICKS ============ */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal-700);
  background:var(--teal-100);border:1px solid rgba(23,99,83,0.18);
  padding:6px 14px;border-radius:999px;margin-bottom:14px;
}
.eyebrow.amber{color:var(--gold-600);background:var(--accent-tint);border-color:rgba(34,97,180,.18);}
.eyebrow.on-dark{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);color:#fff;}
.tick{display:inline-flex;width:16px;height:16px;flex:none;}
.tick svg{width:100%;height:100%;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  padding:14px 26px;border-radius:12px;border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;cursor:pointer;
}
.btn-primary{background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));color:#fff;box-shadow:var(--shadow-md);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#fff;}
.btn-gold{background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));color:#fff;box-shadow:0 10px 24px rgba(34,97,180,0.35);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(34,97,180,0.42);}
.btn-outline,.btn-ghost{background:#fff;color:var(--teal-700);border-color:var(--line);}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--teal-600);color:var(--teal-800);transform:translateY(-2px);}
.btn-sm{padding:10px 18px;font-size:14px;border-radius:10px;}
.btn-lg{padding:16px 30px;font-size:16px;}
.btn-block{width:100%;}

/* on dark surfaces the ghost button inverts */
.cta-band .btn-ghost,.final-cta .btn-ghost,.benefits-wrap .btn-ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,0.35);
}
.cta-band .btn-ghost:hover,.final-cta .btn-ghost:hover,.benefits-wrap .btn-ghost:hover{
  background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.6);color:#fff;
}

/* ============ 3. HEADER / NAV ============ */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(248,250,250,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px;}
.brand,.logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1;}
.brand-logo{height:36px;width:auto;display:block;}
.brand-by{
  font-family:var(--font-body);font-weight:500;font-size:10.5px;letter-spacing:.02em;
  color:var(--ink-500);text-transform:none;padding-left:2px;
}

/* footer + mobile-panel lockup: single logo, no tagline */
#mobileNav .brand-logo{height:34px;}
.footer-brand .brand-logo{
  height:38px;background:#fff;padding:9px 14px;border-radius:12px;
}

nav.primary{display:flex;align-items:center;gap:6px;}
nav.primary > .navitem{position:relative;}
nav.primary a.toplink{
  display:block;padding:10px 12px;border-radius:10px;
  font-weight:600;font-size:14.5px;color:var(--ink-700);transition:color .15s ease, background .15s ease;
}
nav.primary a.toplink:hover,nav.primary a.toplink[aria-current="page"]{background:var(--teal-100);color:var(--teal-700);}
.dropdown{
  display:none;position:absolute;top:100%;left:0;background:var(--paper-0);
  border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:10px;min-width:280px;max-height: 450px;
  overflow: auto;scrollbar-width: none;
}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{display:block;}
.dropdown a{display:block;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-900);}
.dropdown a:hover{background:var(--teal-50);color:var(--teal-700);}
.dropdown a .desc{display:block;font-size:12.5px;color:var(--ink-500);font-weight:400;margin-top:2px;line-height:1.45;}

.nav-actions{display:flex;align-items:center;gap:12px;}
.nav-actions .login{font-weight:700;font-size:14.5px;color:var(--ink-700);padding:10px 6px;}
.nav-actions .login:hover{color:var(--teal-700);}
.hamburger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px;line-height:0;}
.hamburger svg{width:20px;height:20px;display:block;}

/* mobile slide-over nav */
#mobileNav{display:none;position:fixed;inset:0;background:var(--paper-50);z-index:200;padding:20px 24px 40px;overflow-y:auto;}
#mobileNav.open{display:block;}
#mobileNav .mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
#mobileNav a{display:block;padding:13px 2px;font-size:15.5px;font-weight:600;color:var(--ink-700);border-bottom:1px solid var(--paper-100);}
#mobileNav a:hover{color:var(--teal-700);}
#mobileNav .mgroup-title{
  font-family:var(--font-display);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-500);margin:20px 0 2px;font-weight:800;
}

/* ============ 4. HERO ============ */
.hero{
  background:radial-gradient(1100px 600px at 78% -10%, rgba(34,97,180,0.14), transparent 60%),
             linear-gradient(180deg, var(--paper-50) 0%, var(--paper-100) 100%);
  padding:76px 0 60px;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.chip{
  display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  padding:7px 13px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink-700);box-shadow:var(--shadow-sm);
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--teal-500);}
.chip.gold .dot{background:var(--gold-500);}
h1.hero-title{font-size:clamp(34px,4.6vw,54px);font-weight:800;letter-spacing:-0.02em;margin-bottom:20px;}
h1.hero-title em{font-style:normal;color:var(--teal-700);}
.hero-sub{font-size:18px;line-height:1.6;color:var(--ink-700);max-width:520px;margin-bottom:30px;}
.hero-actions,.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.hero-microcopy{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-500);font-weight:600;flex-wrap:wrap;}
.hero-microcopy .tick{width:15px;height:15px;}
.hero-proof{margin-top:8px;display:flex;gap:22px;flex-wrap:wrap;color:var(--ink-500);font-size:13.5px;font-weight:600;}
.hero-proof strong{color:var(--ink-900);}

/* hero chat mock */
.hero-visual{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
.stage{position:relative;width:100%;max-width:420px;}
.phone-card{
  background:linear-gradient(160deg,#ffffff,#F3FAF8);
  border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);
  overflow:hidden;position:relative;
}
.phone-head{display:flex;align-items:center;gap:10px;padding:16px 18px;background:linear-gradient(120deg,var(--brand-green),var(--brand-blue));color:#fff;}
.phone-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none;}
.phone-head .who b{display:block;font-size:14px;font-weight:700;}
.phone-head .who small{font-size:11.5px;opacity:.8;}
.phone-head .status{margin-left:auto;width:9px;height:9px;border-radius:50%;background:#34D8A8;box-shadow:0 0 0 3px rgba(52,216,168,0.25);}
.phone-body{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:300px;background:radial-gradient(600px 200px at 100% 0%, rgba(40,169,141,0.05), transparent);}
.bubble{max-width:82%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;box-shadow:var(--shadow-sm);opacity:0;transform:translateY(10px);animation:pop .5s ease forwards;}
.bubble.in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink-900);}
.bubble.out{align-self:flex-end;background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));color:#fff;border-bottom-right-radius:4px;}
.bubble .meta{display:flex;align-items:center;gap:5px;font-size:10.5px;margin-top:5px;color:var(--ink-500);}
.bubble.out .meta{color:rgba(255,255,255,0.85);}
@keyframes pop{to{opacity:1;transform:translateY(0);}}
.phone-body .bubble:nth-child(1){animation-delay:.1s;}
.phone-body .bubble:nth-child(2){animation-delay:.5s;}
.phone-body .bubble:nth-child(3){animation-delay:1s;}
.phone-body .bubble:nth-child(4){animation-delay:1.5s;}
.typing-row{display:flex;gap:4px;align-self:flex-start;background:#fff;border:1px solid var(--line);padding:11px 14px;border-radius:14px;border-bottom-left-radius:4px;opacity:0;animation:pop .5s ease forwards;animation-delay:1.9s;}
.typing-row span{width:6px;height:6px;border-radius:50%;background:var(--teal-500);animation:blink 1.2s infinite;}
.typing-row span:nth-child(2){animation-delay:.2s;}
.typing-row span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}
.phone-input{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:#fff;}
.phone-input .field{flex:1;height:34px;border-radius:999px;background:var(--paper-100);margin:0;}
.phone-input .send{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));flex:none;display:flex;align-items:center;justify-content:center;}
.phone-input .send svg{width:15px;height:15px;fill:#fff;}
.float-card{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
}
.float-1{top:-8%;left:-14%;animation:float 5s ease-in-out infinite;}
.float-2{bottom:6%;right:-16%;animation:float 5s ease-in-out infinite 1.2s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.float-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;}
.float-ico.wa{background:#E2F8F3;}
.float-ico.web{background:#DFF2FB;}
.float-ico svg{width:16px;height:16px;}
.float-card small{display:block;font-weight:500;color:var(--ink-500);font-size:11px;margin-top:1px;}

/* legacy chat mock (interior pages) restyled to match */
.thread{background:linear-gradient(160deg,#ffffff,#F3FAF8);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);padding:20px;}
.thread-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);}
.thread-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);}
.thread-name{font-weight:700;font-size:14px;}
.thread-sub{font-size:11.5px;color:var(--ink-500);}
.bubble-row{display:flex;margin-bottom:10px;}
.bubble-row.mine{justify-content:flex-end;}
.bubble-row .bubble{opacity:1;transform:none;animation:none;max-width:82%;}
.bubble.them{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink-900);}
.bubble.mine,.bubble.ai{background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));color:#fff;border-bottom-right-radius:4px;}
.bubble .tag{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-bottom:3px;font-weight:700;}
.thread-time{font-size:10.5px;color:var(--ink-500);text-align:right;margin-top:2px;}
.thread-input{margin-top:14px;display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:11px 16px;color:var(--ink-500);font-size:13.5px;background:#fff;}

/* ============ 5. SECTIONS ============ */
section{padding:96px 0;position:relative;}
section.tight{padding:56px 0;}
section.alt{background:var(--paper-100);}
section.tint{background:var(--teal-50);}
.trust-strip{padding:34px 0;background:var(--paper-0);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.trust-strip .container{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:space-between;}
.trust-label{font-size:13px;font-weight:700;color:var(--ink-500);white-space:nowrap;}
.trust-logos{display:flex;gap:28px;flex-wrap:wrap;align-items:center;opacity:.85;}
.trust-logos span{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink-500);letter-spacing:-0.02em;}

.sec-head,.section-head{max-width:640px;margin-bottom:52px;}
.sec-head.center,.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-title{font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-0.02em;margin:0 0 12px;}
.sec-desc{font-size:16.5px;line-height:1.65;color:var(--ink-700);margin:0;}
.section-head h2{margin-bottom:12px;}

/* page hero for interior pages */
.page-hero{
  padding:64px 0 52px;
  background:radial-gradient(900px 420px at 82% -20%, rgba(34,97,180,0.12), transparent 60%),
             linear-gradient(180deg, var(--paper-50) 0%, var(--paper-100) 100%);
  border-bottom:1px solid var(--line);
}
.page-hero h1{margin-bottom:.35em;}
.breadcrumb{font-size:13px;color:var(--ink-500);margin-bottom:16px;font-weight:600;}
.breadcrumb a{color:var(--teal-700);}
.breadcrumb a:hover{color:var(--teal-800);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* ============ 6. CARDS ============ */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:26px 24px;
  box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(23,99,83,0.3);}
.card h3{font-size:18px;margin-bottom:8px;}
.card p{font-size:14.5px;color:var(--ink-700);line-height:1.6;margin-bottom:0;}
.card .icon{
  width:44px;height:44px;border-radius:12px;background:var(--teal-100);color:var(--teal-700);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;
}
.card a.more{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--teal-700);}
.card a.more:hover{color:var(--teal-800);}
.card ul{padding-left:0;list-style:none;}
.card ul li{display:flex;gap:9px;font-size:14px;color:var(--ink-700);align-items:flex-start;padding:6px 0;}
.card ul li::before{content:"";width:16px;height:16px;flex:none;margin-top:3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.6 9 17.5 20 6.5' stroke='%2314907B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;}

/* channel cards */
.channels{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.channel-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px;box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease;
  position:relative;overflow:hidden;
}
.channel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.channel-card::after{content:"";position:absolute;inset:auto -40% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(40,169,141,0.10), transparent 70%);}
.channel-card.gold::after{background:radial-gradient(circle, rgba(23,134,186,0.14), transparent 70%);}
.channel-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));}
.channel-icon svg{width:26px;height:26px;fill:#fff;}
.channel-card h3{font-size:21px;margin-bottom:10px;}
.channel-card p{color:var(--ink-700);line-height:1.65;font-size:15px;margin-bottom:18px;}
.channel-list{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;}
.channel-list li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-900);font-weight:600;}
.connector{display:flex;align-items:center;justify-content:center;gap:14px;margin:36px auto 0;max-width:520px;font-size:13.5px;font-weight:700;color:var(--teal-700);text-align:center;}
.connector .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);}

/* bento feature grid */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.feat-card{display:block;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:26px 24px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(23,99,83,0.3);}
.feat-ico{width:42px;height:42px;border-radius:11px;background:var(--teal-100);display:flex;align-items:center;justify-content:center;}.feat-ico svg{width:21px;height:21px;fill:var(--teal-700);}
.feat-card h4{font-size:16.5px;margin-bottom:8px;}
.feat-card p{font-size:14px;color:var(--ink-700);line-height:1.6;margin:0;}
a.feat-card:hover h4{color:var(--teal-700);}
#features .bento{
  grid-template-columns: repeat(2, 1fr);
}
.feat-card{
  display:flex;
  flex-direction:column;   /* stack feat-head and p vertically */
  align-items:flex-start;
}
.feat-head{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.feat-head h4{
  margin:0;
}
.feat-ico{
  flex-shrink:0;
}
/* use cases */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;}
.tab-btn{padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;color:var(--ink-700);transition:all .15s ease;}
.tab-btn.active,.tab-btn:hover{background:var(--teal-700);color:#fff;border-color:var(--teal-700);}
.usecase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.usecase-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;transition:transform .18s ease, box-shadow .18s ease;}
.usecase-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.usecase-emoji{width:44px;height:44px;border-radius:12px;background:var(--teal-50);border:1px solid var(--teal-100);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;}
.usecase-card h4{font-size:15.5px;margin-bottom:8px;}
.usecase-card p{font-size:13.5px;color:var(--ink-700);line-height:1.6;margin:0;}
.footer-by {
    display: flex !important;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    gap: 8px;
    
    padding: 7px 12px;
    margin-top: 20px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);

    text-decoration: none;
    white-space: nowrap;
}

.footer-by > span:first-child {
    display: inline-block;
    flex: 0 0 auto;
    color: #9daabd;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

.footer-by-logo {
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.footer-by-name {
    display: inline-block;
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.footer-by:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}
/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.testi-card,.quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;box-shadow:var(--shadow-sm);}
.testi-card p,.quote-card p.q{font-size:14.5px;line-height:1.65;color:var(--ink-900);margin-bottom:20px;font-family:var(--font-body);font-weight:500;}
.testi-person,.quote-who{display:flex;align-items:center;gap:12px;}
.testi-avatar,
.quote-who .av {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
    background: #fff;
}

.testi-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}
.testi-person b,.quote-who .name{display:block;font-size:13.5px;font-weight:700;}
.testi-person span,.quote-who .role{font-size:12.5px;color:var(--ink-500);}
.stars{display:inline-flex;gap:3px;margin-bottom:14px;color:var(--gold-500);letter-spacing:2px;font-size:14px;}
.stars svg{width:15px;height:15px;fill:var(--gold-500);}

/* ============ 7. STEPS / RAIL ============ */
.steps{position:relative;margin-top:20px;}
.steps-line{position:absolute;top:26px;left:5%;right:5%;height:2px;background:var(--line);z-index:0;}
.steps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;z-index:1;}
.step{display:flex;flex-direction:column;gap:14px;}
.step-num{
  width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--teal-600);color:var(--teal-700);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:18px;
  box-shadow:0 0 0 6px var(--paper-50);
}
.step-num.done{background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));color:#fff;border-color:transparent;}
.step h4{font-size:15.5px;margin-bottom:6px;}
.step p{font-size:13.5px;color:var(--ink-700);line-height:1.6;margin:0;}

/* legacy vertical rail */
.rail{position:relative;padding-left:52px;}
.rail::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:var(--line);}
.rail-step{position:relative;margin-bottom:32px;}
.rail-step:last-child{margin-bottom:0;}
.rail-step h4,.rail-step h3{font-size:16.5px;margin-bottom:6px;}
.rail-step::before{
  content:attr(data-n);position:absolute;left:-52px;top:-4px;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));color:#fff;
  font-family:var(--font-display);font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 5px var(--paper-50);
}
section.alt .rail-step::before,section.alt .step-num{box-shadow:0 0 0 5px var(--paper-100);}

/* ============ 8. BENEFITS / CTA BANDS ============ */
.benefits-wrap{background:linear-gradient(135deg,var(--dark-navy) 0%, var(--teal-700) 100%);border-radius:28px;padding:64px 48px;color:#fff;position:relative;overflow:hidden;}
.benefits-wrap::before{content:"";position:absolute;top:-30%;right:-10%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle, rgba(34,97,180,0.22), transparent 70%);}
.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;position:relative;z-index:1;align-items:start;}
.benefits-wrap h2,.benefits-wrap .sec-title{color:#fff;}
.benefits-wrap .sec-desc,.benefits-wrap p{color:rgba(255,255,255,0.78);}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.benefits-wrap .stat{border-left:2px solid rgba(255,255,255,0.25);padding-left:16px;}
.benefits-wrap .stat b{display:block;font-family:var(--font-display);font-size:32px;font-weight:800;color:var(--brand-green-light);}
.benefits-wrap .stat span{font-size:13.5px;color:rgba(255,255,255,0.75);}
.benefit-list{display:flex;flex-direction:column;gap:16px;margin-top:26px;list-style:none;padding:0;}
.benefit-list li{display:flex;gap:12px;font-size:14.5px;color:rgba(255,255,255,0.9);align-items:flex-start;}
.benefit-list .tick{margin-top:3px;}

/* stat row (light background) */
.stat-row{display:flex;gap:36px;flex-wrap:wrap;margin-top:12px;}
.stat b{display:block;font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--teal-700);line-height:1.2;}
.stat span{font-size:13px;color:var(--ink-500);}

.final-cta,.cta-band{
  background:linear-gradient(120deg,var(--teal-700) 0%,var(--dark-navy) 100%);
  border-radius:28px;padding:64px 40px;text-align:center;color:#fff;position:relative;overflow:hidden;
}
.final-cta::before,.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% 0%, rgba(34,97,180,0.18), transparent 70%);}
.final-cta h2,.cta-band h2,.final-cta .sec-title{color:#fff;position:relative;z-index:1;}
.final-cta p,.cta-band p,.cta-band .lede{position:relative;z-index:1;color:rgba(255,255,255,0.8);max-width:560px;margin:14px auto 30px;font-size:16px;}
.final-cta .hero-actions,.cta-band .hero-cta-row,.cta-band .hero-actions{justify-content:center;position:relative;z-index:1;margin-bottom:0;}
.final-cta .hero-microcopy,.cta-band .hero-microcopy{justify-content:center;color:rgba(255,255,255,0.7);margin-top:18px;position:relative;z-index:1;}
.cta-band .eyebrow,.final-cta .eyebrow{position:relative;z-index:1;background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);color:#fff;}
.cta-band .btn-primary{background:#fff;color:var(--teal-800);box-shadow:var(--shadow-md);}
.cta-band .btn-primary:hover{background:var(--teal-50);color:var(--teal-800);}

/* ============ 9. PRICING ============ */
.pricing-grid,.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.price-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative;
}
.price-card.popular{border:2px solid var(--teal-600);box-shadow:var(--shadow-lg);}
.popular-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(120deg,var(--brand-blue),var(--brand-green));color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.04em;padding:5px 14px;border-radius:999px;text-transform:uppercase;white-space:nowrap;
}
/* pages that don't carry an explicit .popular-tag element get one generated */
.price-card.popular:not(:has(.popular-tag))::before{
  content:"Most Popular";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(120deg,var(--brand-blue),var(--brand-green));color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.04em;padding:5px 14px;border-radius:999px;text-transform:uppercase;white-space:nowrap;
}
.price-card h3{font-size:19px;margin-bottom:6px;}
.price-card .price-tag,.price-amount{font-family:var(--font-display);font-weight:800;font-size:32px;color:var(--teal-800);margin:10px 0 4px;line-height:1.1;}
.price-card .price-tag small{font-size:14px;font-weight:600;color:var(--ink-500);}
.price-period{font-size:13.5px;color:var(--ink-500);}
.price-note{font-size:13px;color:var(--ink-500);margin-bottom:22px;}
.price-list{display:flex;flex-direction:column;gap:11px;margin:14px 0 26px;flex:1;list-style:none;padding:0;}
.price-list li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-700);align-items:flex-start;line-height:1.5;}
.price-list li::before{content:"";width:16px;height:16px;flex:none;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.6 9 17.5 20 6.5' stroke='%2314907B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;}
.price-list li .tick{display:none;}
.price-list .tick{margin-top:2px;}

/* ============ 10. FAQ ============ */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-list .faq-item{margin-bottom:0;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:12px;}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  background:none;border:none;padding:19px 22px;text-align:left;font-family:var(--font-display);
  font-weight:700;font-size:15px;color:var(--ink-900);
}
.faq-q .plus{width:20px;height:20px;flex:none;position:relative;font-size:0;color:transparent;}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--teal-700);top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .2s ease, opacity .2s ease;}
.faq-q .plus::before{width:14px;height:2px;}
.faq-q .plus::after{width:2px;height:14px;}
.faq-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.faq-a p{padding:0 22px 20px;font-size:14px;color:var(--ink-700);line-height:1.65;margin:0;}
.faq-item.open .faq-a{max-height:640px;}

/* ============ 11. TABLES / FORMS / NOTES / BADGES ============ */
table.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;}
table.cmp th{background:var(--teal-100);color:var(--teal-700);font-family:var(--font-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;}
table.cmp tr:last-child td{border-bottom:none;}

form.card-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm);}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--ink-900);}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font-body);font-size:14.5px;background:#fff;color:var(--ink-900);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal-600);box-shadow:0 0 0 3px var(--teal-100);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.form-error{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--danger);}
.form-success{margin-top:16px;background:var(--teal-50);border:1px solid var(--teal-100);border-radius:10px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--teal-800);}

.note-box{background:var(--teal-50);border:1px solid var(--teal-100);border-radius:var(--radius-md);padding:18px 20px;font-size:14px;color:var(--teal-800);}
.note-box strong{color:var(--teal-800);}
.badge{display:inline-block;font-family:var(--font-display);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:999px;font-weight:800;}
.badge.must{background:var(--teal-100);color:var(--teal-700);}
.badge.should{background:var(--accent-tint);color:var(--gold-600);}
.badge.future{background:#EEF3F6;color:var(--ink-500);}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.pill{border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-700);}
blockquote.pull{border-left:3px solid var(--teal-600);padding-left:20px;font-family:var(--font-display);font-size:20px;font-weight:700;margin:24px 0;color:var(--ink-900);line-height:1.4;}

/* ============ 12. FOOTER ============ */
footer.site{background:var(--dark-navy);color:rgba(255,255,255,0.75);padding:64px 0 26px;margin-top:0;}
.footer-grid,.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px;}
.footer-grid h4,.foot-col h5{font-family:var(--font-display);color:#fff;font-size:14px;margin-bottom:18px;letter-spacing:.02em;font-weight:800;}
.footer-grid a,.foot-col a{display:block;font-size:14px;color:rgba(255,255,255,0.65);transition:color .15s ease;padding:6px 0;}
.footer-grid a:hover,.foot-col a:hover{color:#fff;}
.foot-col ul{display:flex;flex-direction:column;gap:4px;list-style:none;padding:0;}
.footer-brand p,.foot-brand p{margin-top:14px;font-size:14px;line-height:1.65;max-width:300px;color:rgba(255,255,255,0.6);}
.footer-by{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);padding:9px 15px;border-radius:10px;font-size:13px;margin-top:16px;color:rgba(255,255,255,0.75);
}
.footer-by strong{color:#fff;}
.foot-social{display:flex;gap:10px;margin-top:18px;}
.foot-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;transition:background .15s ease;padding:0;}
.foot-social a:hover{background:var(--teal-600);}
.foot-social svg{width:16px;height:16px;fill:#fff;}
.footer-bottom,.foot-bottom{
  border-top:1px solid rgba(255,255,255,0.12);padding-top:24px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,0.55);
}
.footer-bottom a,.foot-bottom a{color:rgba(255,255,255,0.55);display:inline;}
.footer-bottom a:hover,.foot-bottom a:hover{color:#fff;}

/* ============ 13. UTILITIES ============ */
.mt-0{margin-top:0;}
.small{font-size:13.5px;color:var(--ink-500);}
.muted{color:var(--ink-700);}
.center{text-align:center;}
.center-copy{max-width:680px;margin:0 auto;text-align:center;color:var(--ink-700);}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:30px;}
}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1;margin-bottom:10px;}
  .stage{max-width:360px;}
  .bento{grid-template-columns:repeat(2,1fr);}
  .steps-row{grid-template-columns:repeat(3,1fr);row-gap:34px;}
  .steps-line{display:none;}
  .benefits-grid{grid-template-columns:1fr;gap:32px;}
  .usecase-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .pricing-grid,.price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
  .price-card.popular{transform:none;}
  .two-col{grid-template-columns:1fr;gap:32px;}
  .float-1{left:-6%;}
  .float-2{right:-6%;}
}
@media (max-width:980px){
  nav.primary,.nav-actions .login{display:none;}
  .hamburger{display:inline-flex;}
}
@media (max-width:760px){
  .brand-logo{height:32px;}
  .brand-by{display:none;}
  section{padding:64px 0;}
  section.tight{padding:44px 0;}
  .channels{grid-template-columns:1fr;}
  .bento{grid-template-columns:1fr;}
  .steps-row{grid-template-columns:1fr 1fr;}
  .usecase-grid{grid-template-columns:1fr;}
  .testi-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .benefits-wrap{padding:40px 24px;border-radius:20px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .final-cta,.cta-band{padding:48px 22px;border-radius:20px;}
  .footer-grid,.foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .trust-strip .container{justify-content:center;text-align:center;}
  .hero{padding:44px 0 40px;}
  .page-hero{padding:44px 0 36px;}
  .float-card{display:none;}
  .field-row{grid-template-columns:1fr;}
  table.cmp{display:block;overflow-x:auto;}
}
@media (max-width:480px){
  .footer-grid,.foot-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  .hero-actions,.hero-cta-row{flex-direction:column;align-items:stretch;}
  .hero-actions .btn,.hero-cta-row .btn{width:100%;}
}

/* =====================================================================
   14. FEATURE PAGES — archive tiles, detail layout, mock panels
   ===================================================================== */

/* ---- archive: large feature tiles ---- */
.feature-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.feature-tile{
  display:block;position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:38px 36px 32px;box-shadow:var(--shadow-sm);color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;overflow:hidden;
}
.feature-tile::after{
  content:"";position:absolute;inset:auto -35% -55% auto;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, rgba(40,169,141,0.09), transparent 70%);pointer-events:none;
}
.feature-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(23,99,83,0.32);}
.tile-index{
  position:absolute;top:26px;right:30px;font-family:var(--font-display);font-weight:800;
  font-size:34px;line-height:1;color:var(--paper-100);letter-spacing:-.03em;
}
.feature-tile:hover .tile-index{color:var(--teal-100);}
.tile-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;position:relative;z-index:1;}
.tile-ico{
  width:60px;height:60px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-green),var(--brand-blue));box-shadow:0 8px 20px rgba(34,97,180,0.24);
}
.tile-ico svg{width:28px;height:28px;fill:#fff;}
.feature-tile h3{font-size:22px;margin:0;letter-spacing:-.02em;}
.feature-tile > p{font-size:15.5px;line-height:1.7;color:var(--ink-700);margin:0 0 20px;position:relative;z-index:1;}
.tile-list{display:flex;flex-direction:column;gap:11px;list-style:none;padding:0;margin:0 0 24px;position:relative;z-index:1;}
.tile-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--ink-900);}
.tile-list .tick{margin-top:2px;}
.tile-more{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:14.5px;color:var(--teal-700);padding-top:18px;border-top:1px solid var(--line);width:100%;
  position:relative;z-index:1;
}
.tile-more .arrow{transition:transform .18s ease;display:inline-block;}
.feature-tile:hover .tile-more{color:var(--teal-800);}
.feature-tile:hover .tile-more .arrow{transform:translateX(4px);}

/* ---- archive: how it fits together ---- */
.feature-summary{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:40px;display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:center;box-shadow:var(--shadow-sm);
}
.feature-summary .sec-title{margin-bottom:14px;}
.feature-summary strong{color:var(--teal-700);font-weight:700;}
.summary-flow{display:flex;flex-direction:column;gap:10px;}
.summary-flow span{
  position:relative;background:var(--paper-50);border:1px solid var(--line);border-radius:12px;
  padding:13px 18px;font-size:14px;font-weight:700;color:var(--ink-700);
}
.summary-flow span:not(:last-child)::after{
  content:"";position:absolute;left:26px;bottom:-11px;width:2px;height:10px;background:var(--line);
}
.summary-flow span:first-child{background:var(--teal-50);border-color:var(--teal-100);color:var(--teal-700);}
.summary-flow span:last-child{background:var(--teal-50);border-color:var(--teal-100);color:var(--teal-700);}

/* ---- detail page hero ---- */
.feature-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
.feature-hero-visual{display:flex;justify-content:center;}
.feature-hero-visual > *{width:100%;max-width:420px;}
.feature-hero .hero-microcopy{margin-top:20px;}

/* four-across capability grid on detail pages */
.bento-4{grid-template-columns:repeat(4,1fr);}
.usecase-grid-3{grid-template-columns:repeat(3,1fr);}

/* checklist inside a plain card */
.check-list{display:flex;flex-direction:column;gap:13px;list-style:none;padding:0;margin:18px 0 0;}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-700);line-height:1.55;}
.check-list .tick{margin-top:3px;}
.card .check-list li::before{display:none;content:none;}

/* ---- mock panels used as feature visuals ---- */
.mock-panel{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.mock-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;
  background:linear-gradient(120deg,var(--brand-green),var(--brand-blue));color:#fff;
}
.mock-head b{font-family:var(--font-display);font-size:14.5px;font-weight:800;}
.mock-head span{font-size:12px;opacity:.85;font-weight:600;}
.mock-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--paper-100);
}
.mock-row b{display:block;font-size:14px;font-weight:700;color:var(--ink-900);}
.mock-row small{display:block;font-size:12px;color:var(--ink-500);margin-top:2px;}
.pill-status{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.pill-status.new{background:var(--accent-tint);color:var(--gold-600);}
.pill-status.open{background:var(--teal-100);color:var(--teal-700);}
.pill-status.won{background:#DFF7EE;color:#0B6B4C;}
.mock-metric{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 20px;border-bottom:1px solid var(--paper-100);
}
.mock-metric span{font-size:13.5px;color:var(--ink-700);font-weight:600;}
.mock-metric b{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--teal-800);}
.mock-bars{display:flex;align-items:flex-end;gap:8px;height:96px;padding:20px 20px 0;}
.mock-bars span{
  flex:1;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--brand-green),var(--brand-blue));opacity:.85;
}
.mock-code{
  margin:0;padding:18px 20px;background:var(--dark-navy);color:#B8E8DC;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.65;
  overflow-x:auto;white-space:pre;
}
.mock-foot{padding:14px 20px;font-size:12.5px;color:var(--ink-500);background:var(--paper-50);font-weight:600;}

/* handoff marker inside the chat mock */
.handoff-note{
  text-align:center;font-size:11.5px;font-weight:700;color:var(--teal-700);
  background:var(--teal-50);border:1px solid var(--teal-100);border-radius:999px;
  padding:6px 12px;margin:6px auto 12px;width:fit-content;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--teal-500);display:inline-block;margin-right:8px;
  animation:blink 1.4s infinite;
}

/* ---- feature-page responsive ---- */
@media (max-width:1100px){
  .bento-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1024px){
  .feature-tiles{grid-template-columns:1fr;}
  .feature-hero{grid-template-columns:1fr;gap:36px;}
  .feature-hero-visual{order:-1;}
  .feature-summary{grid-template-columns:1fr;gap:30px;padding:32px;}
  .usecase-grid-3{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .feature-tile{padding:30px 24px 26px;}
  .tile-index{font-size:28px;top:20px;right:22px;}
  .tile-ico{width:52px;height:52px;border-radius:14px;}
  .tile-ico svg{width:24px;height:24px;}
  .feature-tile h3{font-size:19px;}
  .bento-4{grid-template-columns:1fr;}
  .feature-summary{padding:26px 22px;}
}