/* ═══════════════════════════════════════════════════════════════
   inner-pages.css — MINTBRIDGE BANK
   Shared styles for all inner pages (non-home).
   Evergreen Mint theme · loaded after base.css.

   Sections:
     1.  Shared utilities        8.  Diversity & Inclusion
     2.  Inner hero              9.  Product pages
     3.  Legal pages           10.  Careers
     4.  FAQ page              11.  Auth pages
     5.  Support / help        12.  Shared re-exports
     6.  Learning & blog       13.  Responsive
     7.  About page
═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1. SHARED UTILITIES
─────────────────────────────────────────────────────────────── */
.alert-success,
.alert-error {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: 8px;
  font-size: 14px; font-family: var(--sans); font-weight: 400; line-height: 1.5; margin-bottom: 0;
}
.alert-success { background: rgba(15,110,86,.1);  border: 1px solid rgba(15,110,86,.3);  color: #0F6E56; }
.alert-error   { background: rgba(210,80,60,.08); border: 1px solid rgba(210,80,60,.28); color: #B5432C; }

/* Related links grid */
.lr-title { font-family: var(--serif); font-size: clamp(20px,2.2vw,26px); font-weight: 400; color: var(--ink); margin-bottom: 28px; }
.lr-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,22px); }
.lr-card  {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border: 1px solid var(--mist); border-radius: 12px;
  padding: clamp(22px,3vw,32px); text-decoration: none; cursor: none;
  transition: all .3s cubic-bezier(.23,1,.32,1);
}
.lr-card:hover { transform: translateY(-4px); border-color: rgba(110,231,183,.5); box-shadow: 0 16px 48px rgba(11,92,74,.1); background: var(--mint-pale); }
.lr-icon { font-size: 28px; margin-bottom: 4px; color: var(--emerald-2); }
.lr-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.lr-desc { font-size: 13px; color: var(--text); font-weight: 400; line-height: 1.55; }

/* Shared CTA section (inner pages don't load index.css) */
.cta-sec { background: var(--forest); padding: clamp(80px,10vw,140px) 0; text-align: center; position: relative; overflow: hidden; }
.cta-sec::before { content:''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(90% 120% at 50% 0%, rgba(11,92,74,.6), transparent 60%); }
.cta-in { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.cta-t  { font-family: var(--serif); font-size: clamp(36px,5vw,68px); font-weight: 300; color: #fff; line-height: 1.09; margin-bottom: 16px; letter-spacing: -.01em; }
.cta-t em { color: var(--mint); font-style: italic; }
.cta-s  { font-size: clamp(14px,1.4vw,15.5px); color: rgba(255,255,255,.5); font-weight: 400; line-height: 1.72; margin-bottom: 44px; }
.cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-re { display: flex; justify-content: center; gap: clamp(16px,3vw,28px); margin-top: 36px; flex-wrap: wrap; }
.ctar   { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.5); }
.ctar::before { content:'✓'; color: var(--mint); font-size: 11px; }


/* ───────────────────────────────────────────────────────────────
   2. INNER HERO
─────────────────────────────────────────────────────────────── */
.inner-hero { background: var(--cloud); padding: calc(74px + clamp(48px,7vh,96px)) var(--gutter) clamp(56px,7vw,96px); position: relative; overflow: hidden; }
.inner-hero--dark { background: var(--forest); }
.inner-hero--dark::before { content:''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(110,231,183,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(110,231,183,.045) 1px, transparent 1px);
  background-size: 60px 60px; mask-image: linear-gradient(180deg, #000, transparent); }
.inner-hero .section-wrap { position: relative; z-index: 1; }

.ih-eyebrow { font-size: 11px; font-weight: 500; color: var(--emerald-2); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; }
.inner-hero--dark .ih-eyebrow { color: var(--mint); }
.ih-eyebrow::before { content:''; display: block; width: 24px; height: 1px; background: var(--gold); }
.ih-eyebrow a { color: inherit; text-decoration: none; }

.ih-title { font-family: var(--serif); font-size: clamp(36px,5vw,72px); font-weight: 300; color: var(--ink); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 20px; max-width: 760px; }
.ih-title em { font-style: italic; color: var(--emerald-2); }
.ih-title--light { color: #fff; }
.ih-title--light em { color: var(--mint); }

.ih-sub { font-size: clamp(14px,1.5vw,17px); color: var(--text); font-weight: 400; line-height: 1.75; max-width: 620px; margin-bottom: 0; }
.ih-sub--light { color: rgba(255,255,255,.6); }

.ih-meta, .blog-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); margin-top: 20px; font-weight: 400; }
.ih-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }


/* ───────────────────────────────────────────────────────────────
   3. LEGAL PAGES
─────────────────────────────────────────────────────────────── */
.legal-body { background: var(--cloud); padding: clamp(48px,6vw,80px) 0; }
.legal-related { background: var(--white); padding: clamp(48px,6vw,80px) 0; border-top: 1px solid var(--mist); }
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
.legal-toc { position: sticky; top: 96px; background: var(--white); border: 1px solid var(--mist); border-radius: 12px; padding: 24px; }
.toc-title { font-size: 10.5px; font-weight: 500; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.legal-toc ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.legal-toc ul a { display: block; font-size: 13px; color: var(--text); text-decoration: none; padding: 7px 10px; border-radius: 6px; font-weight: 400; transition: all .2s; line-height: 1.4; }
.legal-toc ul a:hover { background: var(--mint-pale); color: var(--emerald); }
.legal-content { min-width: 0; }
.legal-alert { display: flex; align-items: flex-start; gap: 12px; background: var(--mint-pale); border: 1px solid rgba(15,110,86,.28); border-radius: 10px; padding: 16px 20px; font-size: 13.5px; color: var(--ink); line-height: 1.6; margin-bottom: 40px; font-weight: 400; }
.legal-alert svg { flex-shrink: 0; margin-top: 2px; color: var(--emerald-2); }
.legal-section { margin-bottom: clamp(36px,5vw,56px); padding-bottom: clamp(36px,5vw,56px); border-bottom: 1px solid var(--mist); }
.legal-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-section h2 { font-family: var(--serif); font-size: clamp(20px,2.2vw,28px); font-weight: 400; color: var(--ink); margin-bottom: 16px; line-height: 1.2; }
.legal-section h3 { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 22px 0 10px; }
.legal-section p { font-size: clamp(13.5px,1.3vw,15px); color: var(--text); line-height: 1.8; font-weight: 400; margin-bottom: 16px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.legal-section ul li { font-size: clamp(13.5px,1.3vw,15px); color: var(--text); line-height: 1.7; font-weight: 400; }
.legal-section ul li strong { color: var(--ink); font-weight: 600; }
.legal-section a { color: var(--emerald-2); text-decoration: none; border-bottom: 1px solid rgba(15,110,86,.35); transition: border-color .2s; }
.legal-section a:hover { border-color: var(--emerald-2); }

.cookie-table { border: 1px solid var(--mist); border-radius: 10px; overflow: hidden; margin: 20px 0; }
.ct-row { display: grid; grid-template-columns: 140px 1fr 110px; gap: 0; }
.ct-row > div { padding: 13px 16px; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--mist); border-right: 1px solid var(--mist); font-weight: 400; line-height: 1.5; }
.ct-row > div:last-child { border-right: none; }
.ct-row:last-child > div { border-bottom: none; }
.ct-header { background: var(--mist); }
.ct-header > div { font-size: 11px; font-weight: 600; color: var(--ink); letter-spacing: .08em; text-transform: uppercase; }
.legal-contact-card { background: var(--mist); border-radius: 10px; padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text); margin-top: 16px; font-weight: 400; line-height: 1.6; }
.legal-contact-card strong { color: var(--ink); }
.legal-contact-card a { color: var(--emerald-2); text-decoration: none; }


/* ───────────────────────────────────────────────────────────────
   4. FAQ PAGE
─────────────────────────────────────────────────────────────── */
.faq-search { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--mist); border-radius: 8px; padding: 12px 18px; max-width: 480px; margin-top: 32px; transition: border-color .25s; }
.faq-search:focus-within { border-color: var(--emerald-2); box-shadow: 0 0 0 3px rgba(15,110,86,.12); }
.faq-search svg { flex-shrink: 0; color: var(--muted); }
.faq-search input { border: none; outline: none; font-family: var(--sans); font-size: 14px; color: var(--ink); width: 100%; background: transparent; font-weight: 400; }
.faq-search input::placeholder { color: var(--muted); }
.faq-body { background: var(--cloud); padding: clamp(48px,6vw,80px) 0; }
.faq-layout { display: grid; grid-template-columns: 210px 1fr; gap: clamp(28px,4vw,56px); align-items: start; }
.faq-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.faq-cat { font-size: 13.5px; color: var(--text); font-weight: 400; padding: 10px 14px; border-radius: 7px; cursor: none; transition: all .2s; border: 1px solid transparent; user-select: none; }
.faq-cat:hover { background: var(--mint-pale); color: var(--emerald); border-color: rgba(110,231,183,.3); }
.faq-cat.active { background: var(--emerald); color: #fff; border-color: var(--emerald); font-weight: 500; }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-group { margin-bottom: 40px; }
.faq-group-label { font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--emerald-2); margin-bottom: 14px; padding-left: 2px; }
.faq-item { background: var(--white); border: 1px solid var(--mist); border-radius: 10px; margin-bottom: 8px; overflow: hidden; transition: box-shadow .25s; }
.faq-item:hover { box-shadow: 0 6px 24px rgba(11,92,74,.06); }
.faq-item.open { border-color: rgba(110,231,183,.5); box-shadow: 0 8px 32px rgba(11,92,74,.08); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px,2vw,20px) clamp(18px,2.5vw,24px); font-family: var(--sans); font-size: clamp(13.5px,1.3vw,15px); font-weight: 500; color: var(--ink); background: transparent; border: none; cursor: none; text-align: left; line-height: 1.5; transition: color .2s; }
.faq-q:hover, .faq-item.open .faq-q { color: var(--emerald-2); }
.faq-icon { font-size: 20px; font-weight: 300; color: var(--emerald-2); flex-shrink: 0; transition: transform .3s cubic-bezier(.23,1,.32,1); line-height: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.23,1,.32,1); }
.faq-item.open .faq-a { max-height: 600px; }
.faq-a p { padding: 0 clamp(18px,2.5vw,24px) clamp(16px,2vw,20px); font-size: clamp(13px,1.2vw,14.5px); color: var(--text); line-height: 1.75; font-weight: 400; }
.faq-a p a { color: var(--emerald-2); text-decoration: none; border-bottom: 1px solid rgba(15,110,86,.3); }
.faq-cta { background: var(--forest); padding: clamp(56px,7vw,96px) 0; text-align: center; }
.faq-cta-inner { max-width: 520px; margin: 0 auto; }
.faq-cta-icon { font-size: 44px; margin-bottom: 20px; color: var(--mint); }
.faq-cta-title { font-family: var(--serif); font-size: clamp(28px,3.5vw,42px); font-weight: 300; color: #fff; margin-bottom: 12px; }
.faq-cta-sub { font-size: 15px; color: rgba(255,255,255,.5); font-weight: 400; line-height: 1.7; margin-bottom: 32px; }


/* ───────────────────────────────────────────────────────────────
   5. SUPPORT / HELP PAGE
─────────────────────────────────────────────────────────────── */
.support-quick-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.sql-card { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 10px 18px; font-size: 13px; color: rgba(255,255,255,.78); text-decoration: none; cursor: none; transition: all .25s; backdrop-filter: blur(10px); }
.sql-card:hover { background: rgba(110,231,183,.14); border-color: rgba(110,231,183,.35); color: var(--mint-light); }
.sql-card span { font-size: 16px; }
.support-channels { background: var(--cloud); padding: clamp(48px,6vw,80px) 0; }
.support-channels-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,2vw,22px); }
.sc-card { background: var(--white); border: 1px solid var(--mist); border-radius: 14px; padding: clamp(24px,3vw,36px) clamp(18px,2.5vw,28px); display: flex; flex-direction: column; gap: 10px; transition: all .3s; cursor: none; }
.sc-card:hover { transform: translateY(-4px); box-shadow: 0 20px 56px rgba(11,92,74,.08); border-color: rgba(110,231,183,.4); }
.scc-icon { font-size: 34px; margin-bottom: 4px; color: var(--emerald-2); }
.scc-title { font-family: var(--serif); font-size: clamp(18px,2vw,22px); font-weight: 400; color: var(--ink); }
.scc-desc { font-size: 13.5px; color: var(--text); font-weight: 400; line-height: 1.6; flex: 1; }
.scc-detail { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.scc-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: var(--mint-pale); color: var(--emerald-2); border: 1px solid rgba(15,110,86,.25); padding: 4px 10px; border-radius: 20px; width: fit-content; }
.support-form-section { background: var(--white); padding: clamp(56px,7vw,96px) 0; }
.support-form-wrap { background: var(--cloud); border-radius: 20px; padding: clamp(32px,4vw,56px); max-width: 860px; margin: 0 auto; border: 1px solid var(--mist); }
.sf-header { margin-bottom: 40px; }
.support-form { display: flex; flex-direction: column; gap: 20px; }
.support-related { background: var(--cloud); padding: clamp(48px,6vw,80px) 0; }
.sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sf-group { display: flex; flex-direction: column; gap: 6px; }
.sf-label { font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: .03em; }
.sf-label-link { float: right; font-size: 12px; font-weight: 400; color: var(--emerald-2); text-decoration: none; }
.sf-label-link:hover { text-decoration: underline; }
.sf-req { color: var(--gold-deep); margin-left: 2px; }
.sf-input { font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--mist); border-radius: 8px; padding: 12px 16px; outline: none; transition: border-color .25s, box-shadow .25s; width: 100%; }
.sf-input::placeholder { color: var(--muted); }
.sf-input:focus { border-color: var(--emerald-2); box-shadow: 0 0 0 3px rgba(15,110,86,.12); }
.sf-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230F6E56' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: none; }
.sf-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.sf-input-wrap { position: relative; }
.sf-input-wrap .sf-input { padding-right: 44px; }
.sf-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: none; color: var(--muted); opacity: .6; padding: 4px; transition: opacity .2s; }
.sf-eye:hover { opacity: 1; }
.sf-check label { cursor: none !important; }
.sf-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 8px; }
.sf-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.5; max-width: 360px; }
.sf-note svg { flex-shrink: 0; color: var(--emerald-2); margin-top: 1px; }
.sf-submit { white-space: nowrap; }


/* ───────────────────────────────────────────────────────────────
   6. LEARNING CENTRE & BLOG
─────────────────────────────────────────────────────────────── */
.learn-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.lc-pill { font-size: 12.5px; font-weight: 500; padding: 8px 18px; border-radius: 20px; border: 1px solid var(--mist); background: var(--white); color: var(--text); text-decoration: none; cursor: none; transition: all .25s; }
.lc-pill:hover, .lc-pill.active { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.learn-featured { background: var(--white); padding: clamp(48px,6vw,80px) 0; }
.lf-card { background: linear-gradient(135deg, var(--forest) 0%, var(--emerald) 100%); border-radius: 20px; padding: clamp(36px,5vw,64px); position: relative; overflow: hidden; border: 1px solid rgba(110,231,183,.18); }
.lf-card::before { content:''; position: absolute; top: -60px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(110,231,183,.1) 0%, transparent 70%); pointer-events: none; }
.lf-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; background: rgba(110,231,183,.15); color: var(--mint-light); border: 1px solid rgba(110,231,183,.25); padding: 4px 12px; border-radius: 20px; margin-bottom: 20px; }
.lf-title { font-family: var(--serif); font-size: clamp(26px,3.5vw,46px); font-weight: 300; color: #fff; line-height: 1.15; margin-bottom: 16px; }
.lf-title em { font-style: italic; color: var(--mint); }
.lf-desc { font-size: clamp(14px,1.4vw,16px); color: rgba(255,255,255,.6); font-weight: 400; line-height: 1.75; max-width: 640px; margin-bottom: 4px; }
.lf-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.35); flex-wrap: wrap; }
.lf-meta span { display: flex; align-items: center; gap: 4px; }
.learn-topics { background: var(--cloud); padding: clamp(56px,7vw,96px) 0; }
.learn-section { margin-bottom: clamp(56px,7vw,96px); }
.learn-section:last-child { margin-bottom: 0; }
.ls-header { margin-bottom: 40px; }
.learn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
.learn-card { background: var(--white); border-radius: 14px; overflow: hidden; border: 1px solid var(--mist); transition: all .3s; cursor: none; display: flex; flex-direction: column; }
.learn-card:hover { transform: translateY(-4px); box-shadow: 0 20px 56px rgba(11,92,74,.09); }
.lc-img { height: clamp(120px,14vw,180px); display: flex; align-items: center; justify-content: center; position: relative; }
.lc-img-icon { font-size: 44px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); }
.lc-body { padding: clamp(18px,2.5vw,28px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lc-tag { font-size: 11px; color: var(--emerald-2); font-weight: 500; letter-spacing: .08em; }
.lc-title { font-family: var(--serif); font-size: clamp(17px,1.8vw,21px); font-weight: 400; color: var(--ink); line-height: 1.3; }
.lc-excerpt { font-size: 13px; color: var(--text); font-weight: 400; line-height: 1.65; flex: 1; }
.lc-link { font-size: 13px; font-weight: 500; color: var(--emerald-2); text-decoration: none; margin-top: auto; }
.lc-link:hover { text-decoration: underline; }

/* Blog article */
.blog-body { background: var(--cloud); padding: clamp(48px,6vw,80px) 0; }
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: clamp(32px,5vw,64px); align-items: start; }
.blog-content { min-width: 0; }
.blog-lead { font-family: var(--serif); font-size: clamp(18px,2vw,24px); font-weight: 300; color: var(--ink); line-height: 1.65; margin-bottom: 40px; padding-left: 20px; border-left: 3px solid var(--gold); }
.blog-content h2 { font-family: var(--serif); font-size: clamp(22px,2.5vw,30px); font-weight: 400; color: var(--ink); margin: 36px 0 16px; line-height: 1.2; }
.blog-content p { font-size: clamp(14px,1.3vw,15.5px); color: var(--text); line-height: 1.82; font-weight: 400; margin-bottom: 18px; }
.blog-content ul { padding-left: 22px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.blog-content ul li { font-size: clamp(14px,1.3vw,15.5px); color: var(--text); line-height: 1.7; font-weight: 400; }
.blog-content ul li strong { color: var(--ink); font-weight: 600; }
.blog-content em { color: var(--emerald-2); font-style: italic; }
.blog-callout { display: flex; gap: 16px; align-items: flex-start; background: var(--mint-pale); border: 1px solid rgba(15,110,86,.3); border-radius: 10px; padding: 20px 24px; margin: 24px 0; font-size: 14.5px; color: var(--ink); line-height: 1.65; }
.bc-icon { font-size: 26px; flex-shrink: 0; margin-top: 2px; color: var(--emerald-2); }
.blog-steps { display: flex; flex-direction: column; gap: 0; margin: 24px 0; }
.bs-step { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--mist); }
.bs-step:last-child { border-bottom: none; }
.bs-num { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--emerald-2); flex-shrink: 0; width: 44px; line-height: 1.2; }
.bs-step > div:last-child { font-size: 14.5px; color: var(--text); font-weight: 400; line-height: 1.7; }
.bs-step > div:last-child strong { color: var(--ink); font-weight: 600; }
.blog-cta-box { background: linear-gradient(135deg, var(--forest), var(--emerald)); border-radius: 16px; padding: clamp(28px,4vw,44px); margin-top: 48px; border: 1px solid rgba(110,231,183,.2); }
.blog-cta-box h3 { font-family: var(--serif); font-size: clamp(22px,2.5vw,28px); font-weight: 300; color: #fff; margin-bottom: 10px; }
.blog-cta-box p { font-size: 14px; color: rgba(255,255,255,.55); font-weight: 400; line-height: 1.7; margin-bottom: 22px; }
.blog-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.bs-widget { background: var(--white); border: 1px solid var(--mist); border-radius: 12px; padding: 22px; }
.bs-widget--cta { background: var(--mint-pale); border-color: rgba(15,110,86,.3); }
.bs-widget-title { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.bs-widget ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.bs-widget ul a { display: block; font-size: 13px; color: var(--text); text-decoration: none; padding: 6px 8px; border-radius: 6px; font-weight: 400; transition: all .2s; line-height: 1.45; }
.bs-widget ul a:hover { background: var(--mist); color: var(--emerald); }
.bs-widget p { font-size: 13px; color: var(--text); font-weight: 400; line-height: 1.6; }


/* ───────────────────────────────────────────────────────────────
   7. ABOUT PAGE
─────────────────────────────────────────────────────────────── */
.about-mission { background: var(--cloud); padding: clamp(56px,7vw,96px) 0; }
.about-mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px); align-items: center; }
.about-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 40px; }
.about-stat { background: var(--white); border: 1px solid var(--mist); border-radius: 12px; padding: 24px; transition: all .3s; cursor: none; }
.about-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(11,92,74,.07); border-color: rgba(110,231,183,.4); }
.as-num { font-family: var(--serif); font-size: clamp(28px,3.5vw,40px); font-weight: 300; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.as-label { font-size: 12px; color: var(--text); font-weight: 400; }
.amv-card { background: linear-gradient(135deg, var(--forest), var(--emerald)); border-radius: 20px; padding: clamp(32px,4vw,52px); border: 1px solid rgba(110,231,183,.18); text-align: center; }
.amv-number { font-family: var(--serif); font-size: clamp(64px,8vw,96px); font-weight: 300; color: var(--mint); line-height: 1; }
.amv-label { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.4); letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; margin-bottom: 28px; }
.amv-line { width: 48px; height: 1px; background: rgba(110,231,183,.4); margin: 0 auto 28px; }
.amv-quote { font-family: var(--serif); font-size: clamp(16px,1.8vw,20px); font-style: italic; font-weight: 300; color: rgba(255,255,255,.75); line-height: 1.65; margin-bottom: 16px; }
.amv-founder { font-size: 12.5px; color: var(--mint); font-weight: 400; }

.about-values { background: var(--white); padding: clamp(56px,7vw,96px) 0; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
.value-card { background: var(--cloud); border: 1px solid var(--mist); border-radius: 14px; padding: clamp(24px,3vw,36px); transition: all .3s; cursor: none; }
.value-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(11,92,74,.08); border-color: rgba(110,231,183,.4); background: var(--mint-pale); }
.vc-icon { font-size: 30px; margin-bottom: 16px; color: var(--emerald-2); }
.vc-title { font-family: var(--serif); font-size: clamp(19px,2vw,24px); font-weight: 400; color: var(--ink); margin-bottom: 10px; }
.vc-desc { font-size: 13.5px; color: var(--text); font-weight: 400; line-height: 1.7; }

.about-leadership { background: var(--cloud); padding: clamp(56px,7vw,96px) 0; }
.leadership-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,2vw,22px); }
.leader-card { background: var(--white); border-radius: 14px; padding: clamp(22px,2.5vw,32px); border: 1px solid var(--mist); display: flex; flex-direction: column; gap: 10px; transition: all .3s; cursor: none; }
.leader-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(11,92,74,.08); border-color: rgba(110,231,183,.4); }
.lc-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--emerald), var(--emerald-2)); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--mint-light); flex-shrink: 0; }
.lc-name { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 0; }
.lc-role { font-size: 12px; color: var(--emerald-2); font-weight: 500; }
.lc-bio { font-size: 13px; color: var(--text); font-weight: 400; line-height: 1.65; margin-top: 4px; }

.about-timeline { background: var(--forest); padding: clamp(56px,7vw,96px) 0; }
.timeline { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; position: relative; }
.timeline::before { content:''; position: absolute; left: 68px; top: 0; bottom: 0; width: 1px; background: rgba(110,231,183,.2); }
.tl-item { display: flex; gap: 32px; align-items: flex-start; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.05); position: relative; }
.tl-item:last-child { border-bottom: none; }
.tl-year { font-family: var(--serif); font-size: clamp(22px,3vw,32px); font-weight: 300; color: var(--mint); flex-shrink: 0; width: 68px; line-height: 1; padding-top: 2px; }
.tl-title { font-size: clamp(14px,1.5vw,17px); font-weight: 600; color: #fff; margin-bottom: 6px; }
.tl-desc { font-size: clamp(13px,1.2vw,14.5px); color: rgba(255,255,255,.45); font-weight: 400; line-height: 1.65; }

.about-press { background: var(--cloud); padding: clamp(56px,7vw,96px) 0; }
.press-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
.press-card { background: var(--white); border: 1px solid var(--mist); border-radius: 14px; padding: clamp(24px,3vw,36px); display: flex; flex-direction: column; gap: 14px; transition: all .3s; cursor: none; }
.press-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(11,92,74,.08); border-color: rgba(110,231,183,.4); }
.press-logo { font-family: var(--serif); font-size: clamp(20px,2.5vw,28px); font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.press-quote { font-family: var(--serif); font-size: clamp(15px,1.5vw,18px); font-style: italic; font-weight: 300; color: var(--text); line-height: 1.65; flex: 1; }
.press-date { font-size: 11.5px; font-weight: 500; color: var(--emerald-2); letter-spacing: .06em; text-transform: uppercase; }

.about-investors { background: var(--forest); padding: clamp(56px,7vw,96px) 0; }
.investor-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(12px,2vw,20px); }
.iv-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: clamp(24px,3vw,36px); text-align: center; transition: all .3s; cursor: none; }
.iv-card:hover { background: rgba(110,231,183,.07); border-color: rgba(110,231,183,.28); transform: translateY(-3px); }
.iv-label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 10px; }
.iv-value { font-family: var(--serif); font-size: clamp(28px,4vw,44px); font-weight: 300; color: #fff; line-height: 1; margin-bottom: 6px; }
.iv-sub { font-size: 12px; color: var(--mint); font-weight: 400; }


/* ───────────────────────────────────────────────────────────────
   8. DIVERSITY & INCLUSION
─────────────────────────────────────────────────────────────── */
.dei-commitment { background: var(--cloud); padding: clamp(56px,7vw,96px) 0; }
.dei-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px); align-items: start; }
.dei-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 36px; }
.ds { background: var(--white); border: 1px solid var(--mist); border-radius: 12px; padding: clamp(18px,2.5vw,26px); transition: all .3s; cursor: none; }
.ds:hover { border-color: rgba(110,231,183,.4); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11,92,74,.07); }
.ds-num { font-family: var(--serif); font-size: clamp(28px,3.5vw,38px); font-weight: 300; color: var(--emerald-2); line-height: 1; margin-bottom: 6px; }
.ds-label { font-size: 12.5px; color: var(--text); font-weight: 400; line-height: 1.4; }
.dei-pillar { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--white); border: 1px solid var(--mist); border-radius: 12px; transition: all .3s; cursor: none; }
.dei-pillar:hover { border-color: rgba(110,231,183,.4); background: var(--mint-pale); }
.dp-icon { font-size: 26px; flex-shrink: 0; color: var(--emerald-2); }
.dp-title { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.dp-desc { font-size: 13px; color: var(--text); font-weight: 400; line-height: 1.6; }


/* ───────────────────────────────────────────────────────────────
   9. PRODUCT PAGES
─────────────────────────────────────────────────────────────── */
.products-section { background: var(--cloud); padding: clamp(56px,7vw,96px) 0; }
.products-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
.product-card { background: var(--white); border: 1px solid var(--mist); border-radius: 16px; padding: clamp(24px,3vw,38px); display: flex; flex-direction: column; gap: 14px; transition: all .35s cubic-bezier(.23,1,.32,1); cursor: none; position: relative; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 24px 64px rgba(11,92,74,.1); border-color: rgba(110,231,183,.5); }
.product-card--featured { background: var(--emerald-deep); border-color: rgba(110,231,183,.3); box-shadow: 0 20px 56px rgba(5,42,34,.25); }
.product-card--featured:hover { border-color: var(--mint); box-shadow: 0 32px 80px rgba(5,42,34,.35); }
.product-card--featured .pc-title { color: #fff; }
.product-card--featured .pc-icon { color: var(--mint); }
.product-card--featured .pc-highlight { color: var(--mint-light); }
.product-card--featured .pc-features li { color: rgba(255,255,255,.65); }
.product-card--featured .pc-features li::marker { color: var(--mint); }
.pc-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--forest); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 14px; border-radius: 20px; white-space: nowrap; }
.pc-icon { font-size: 34px; color: var(--emerald-2); }
.pc-title { font-family: var(--serif); font-size: clamp(20px,2.2vw,26px); font-weight: 400; color: var(--ink); line-height: 1.2; }
.pc-highlight { font-size: 13px; color: var(--emerald-2); font-weight: 500; line-height: 1.5; }
.pc-features { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pc-features li { font-size: 13.5px; color: var(--text); font-weight: 400; line-height: 1.5; }
.pc-features li::marker { color: var(--gold); }
.pc-btn { align-self: flex-start; margin-top: auto; }


/* ───────────────────────────────────────────────────────────────
   10. CAREERS
─────────────────────────────────────────────────────────────── */
.careers-why { background: var(--white); padding: clamp(56px,7vw,96px) 0; }
.careers-roles { background: var(--cloud); padding: clamp(56px,7vw,96px) 0; }
.roles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,20px); }
.role-card { background: var(--white); border: 1px solid var(--mist); border-radius: 14px; padding: clamp(22px,2.5vw,32px); display: flex; flex-direction: column; gap: 8px; transition: all .3s; cursor: none; }
.role-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(11,92,74,.09); border-color: rgba(110,231,183,.4); }
.rc-dept { font-size: 10.5px; font-weight: 500; color: var(--emerald-2); letter-spacing: .12em; text-transform: uppercase; }
.rc-title { font-family: var(--serif); font-size: clamp(17px,1.9vw,22px); font-weight: 400; color: var(--ink); line-height: 1.3; flex: 1; }
.rc-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); font-weight: 400; flex-wrap: wrap; }
.rc-link { font-size: 13px; font-weight: 500; color: var(--emerald-2); text-decoration: none; margin-top: 4px; transition: opacity .2s; }
.rc-link:hover { opacity: .75; text-decoration: underline; }


/* ───────────────────────────────────────────────────────────────
   11. AUTH PAGES
─────────────────────────────────────────────────────────────── */
.auth-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(74px + 40px) var(--gutter) 48px; position: relative; background: var(--cloud); overflow: hidden; }
.auth-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.auth-bg-grid { position: absolute; inset: -60px; background-image: linear-gradient(rgba(15,110,86,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,110,86,.04) 1px, transparent 1px); background-size: 52px 52px; }
.auth-wrap { position: relative; z-index: 1; width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 28px; }
.auth-wrap--wide { max-width: 540px; }
.auth-brand { display: flex; justify-content: center; }
.auth-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.auth-logo-text { font-family: var(--serif); font-size: clamp(17px,2.5vw,22px); font-weight: 500; color: var(--ink); letter-spacing: .02em; }
.auth-logo-text span { color: var(--emerald-2); font-style: italic; }
.auth-card { background: var(--white); border: 1px solid var(--mist); border-radius: 20px; padding: clamp(28px,4vw,48px); box-shadow: 0 24px 80px rgba(11,92,74,.08); }
.auth-title { font-family: var(--serif); font-size: clamp(24px,3vw,34px); font-weight: 300; color: var(--ink); margin-bottom: 6px; line-height: 1.1; }
.auth-sub { font-size: 14px; color: var(--text); font-weight: 400; margin-bottom: 28px; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content:''; flex: 1; height: 1px; background: var(--mist); }
.auth-footer { text-align: center; font-size: 13.5px; color: var(--text); font-weight: 400; }
.auth-footer a { color: var(--emerald-2); text-decoration: none; font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }
.auth-legal { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.7; }
.auth-legal a { color: var(--text); text-decoration: none; }
.auth-legal a:hover { text-decoration: underline; }
.pw-strength { margin-top: 4px; }
.reg-steps { display: flex; align-items: center; gap: 0; margin-bottom: 32px; }
.rs-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.rs-num { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--mist); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--white); transition: all .3s; }
.rs-label { font-size: 10.5px; color: var(--muted); font-weight: 400; letter-spacing: .05em; transition: color .3s; }
.rs-step.active .rs-num { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.rs-step.active .rs-label { color: var(--emerald); font-weight: 500; }
.rs-line { flex: 1; height: 1px; background: var(--mist); margin-bottom: 18px; }
.reg-step-form { display: flex; flex-direction: column; gap: 18px; }


/* ───────────────────────────────────────────────────────────────
   12. SHARED RE-EXPORTS
─────────────────────────────────────────────────────────────── */
.hero-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }


/* ───────────────────────────────────────────────────────────────
   13. RESPONSIVE
─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .legal-layout       { grid-template-columns: 1fr; }
  .legal-toc          { position: static; }
  .faq-layout         { grid-template-columns: 1fr; }
  .faq-sidebar        { position: static; flex-direction: row; flex-wrap: wrap; }
  .blog-layout        { grid-template-columns: 1fr; }
  .blog-sidebar       { position: static; }
  .about-mission-grid { grid-template-columns: 1fr; }
  .dei-grid           { grid-template-columns: 1fr; }
  .leadership-grid    { grid-template-columns: repeat(2,1fr); }
  .investor-cards     { grid-template-columns: repeat(2,1fr); }
  .products-grid      { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .lr-grid               { grid-template-columns: 1fr 1fr; }
  .learn-grid            { grid-template-columns: 1fr 1fr; }
  .values-grid           { grid-template-columns: repeat(2,1fr); }
  .press-grid            { grid-template-columns: 1fr; }
  .support-channels-grid { grid-template-columns: repeat(2,1fr); }
  .roles-grid            { grid-template-columns: repeat(2,1fr); }
  .about-stats           { grid-template-columns: repeat(2,1fr); }
  .dei-stats             { grid-template-columns: repeat(2,1fr); }
  .investor-cards        { grid-template-columns: repeat(2,1fr); }
  .ct-row                { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lr-grid, .learn-grid, .values-grid, .leadership-grid,
  .products-grid, .roles-grid, .support-channels-grid { grid-template-columns: 1fr; }
  .investor-cards, .about-stats, .dei-stats { grid-template-columns: 1fr 1fr; }
  .sf-row   { grid-template-columns: 1fr; }
  .sf-footer{ flex-direction: column; align-items: flex-start; }
  .sf-submit{ width: 100%; text-align: center; }
  .timeline::before { left: 54px; }
  .tl-year { width: 54px; font-size: clamp(18px,5vw,26px); }
  .rs-label { display: none; }
  .blog-lead { padding-left: 14px; }
  .auth-card { padding: 24px 20px; }
  .lf-card { padding: 24px; }
  .legal-toc, .faq-sidebar { display: none; }
  .support-quick-links { gap: 8px; }
  .sql-card { font-size: 12px; padding: 8px 14px; }
}