/* /_css/modern.css — scoped to the new layout
   UPDATED: no borders/boxes; zebra (grey every other) for How page
*/

/* ========== Theme tokens ========== */
:root{
    --max-w: 1200px;
    --gutter: 1rem;
    --gutter-lg: 2rem;
    --radius: 16px;
  
    /* palette */
    --brand: #635bff;
  
    --text: #111;
    --muted:#666;
    --bg:#fff;
    --bg-alt:#f6f8ff;  /* soft page band */
  
    /* previously-used decoration tokens are neutralized */
    --border: transparent;
    --shadow: none;
  }
  
  /* Helpers */
  .hidden{ display:none !important; }
  #edgt-public, #edgt-public *{ box-sizing:border-box; }
  #edgt-public img{ max-width:100%; height:auto; display:block; }
  
  /* Page backdrop */
  #edgt-public{
    background: linear-gradient(180deg, var(--bg-alt) 0, var(--bg) 420px);
  }
  
  /* Containers */
  #edgt-public .container{ width:100%; max-width:var(--max-w); margin-inline:auto; padding-inline:var(--gutter); }
  #edgt-public .container-lg{ max-width: calc(var(--max-w) + 2*var(--gutter-lg)); padding-inline:var(--gutter-lg); }
  
  /* Break legacy fixed widths inside the modern shell */
  #edgt-public .mainBody,
  #edgt-public #content,
  #edgt-public .primaryContent{ width:auto !important; max-width:none !important; }
  html, body { width:100%; }
  body > div#edgt-public { width:100% !important; max-width:none !important; margin:0 !important; float:none !important; clear:both !important; }
  #edgt-public #mainBody,
  #edgt-public main,
  #edgt-public .primaryContent,
  #edgt-public .mainBody,
  #edgt-public #content { width:auto !important; max-width:none !important; float:none !important; }
  
  /* New, conflict-free containers (used by hero + layout) */
  #edgt-public .edgtc { width:100%; max-width:1200px; margin:0 auto; padding-inline:16px; }
  #edgt-public .edgtc-lg { max-width:1280px; padding-inline:24px; }
  @media (min-width:1280px){
    #edgt-public .edgtc, #edgt-public .edgtc-lg { max-width:1280px; }
  }
  
  /* Typography */
  #edgt-public .prose h1{ font-size:clamp(1.8rem,3vw,2.25rem); line-height:1.2; margin:.2em 0 .6em; }
  #edgt-public .prose h2{
    font-size:clamp(1.35rem,2.2vw,1.75rem);
    line-height:1.25; margin:.4em 0 .5em;
  }
  #edgt-public .prose p{ margin:.6em 0; color:var(--text); }
  #edgt-public .muted{ color:var(--muted); }
  
  /* Surfaces (cards + panels) — STRIPPED (no borders/boxes) */
  #edgt-public .card,
  #edgt-public .panel,
  #edgt-public .panel--alt{
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0; /* keep content unboxed; add spacing in-page where needed */
  }
  
  /* Responsive grid */
  #edgt-public .grid{ display:grid; gap:1.25rem; }
  #edgt-public .grid-2{ grid-template-columns:1fr; }
  @media (min-width: 992px){
    #edgt-public .grid-2{ grid-template-columns:1fr 1fr; align-items:start; }
  }
  
  /* Buttons — softer, no border box look */
  #edgt-public .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.6rem 1rem; border-radius:12px; text-decoration:none;
    border: none;                 /* no border edge */
    box-shadow: none;             /* no glow */
    background:#f6f7ff; color:var(--text);
    transition: filter .15s ease, background .15s ease;
  }
  #edgt-public .btn:hover{ background:#eef0ff; filter:brightness(1.02); }
  #edgt-public .btn-primary{ background:var(--brand); color:#fff; }
  #edgt-public .btn-primary:hover{ filter:brightness(1.06); }
  #edgt-public .btn-outline{ background:#fff; }
  #edgt-public .btn-outline:hover{ background:#fbfbff; }
  
  /* Media aspect */
  #edgt-public .aspect-video{ position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; }
  #edgt-public .aspect-video > iframe,
  #edgt-public .aspect-video > img{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
  
  /* Give containers room on very large screens */
  #edgt-public .container, #edgt-public .container-lg{ max-width: 1200px; }
  @media (min-width:1280px){
    #edgt-public .container, #edgt-public .container-lg{ max-width: 1280px; }
  }
  
  /* Footer (modern) */
  #edgt-footer{
    margin-top:48px; padding:48px 0 28px;
    color:#e5edf9; background:#0c1524;
    border-top:1px solid rgba(255,255,255,.06);
  }
  #edgt-footer a{ color:#c6d4f5; text-decoration:none; }
  #edgt-footer a:hover{ text-decoration:underline; }
  #edgt-footer .f-grid{ display:grid; gap:28px; grid-template-columns:1fr; }
  #edgt-footer .f-col h4{ margin:0 0 .6rem; font-weight:700; color:#fff; }
  #edgt-footer .f-col ul{ list-style:none; padding:0; margin:0; }
  #edgt-footer .f-col li{ margin:.35rem 0; }
  #edgt-footer .f-brand h3{ margin:0 0 .4rem; font-size:1.25rem; color:#fff; }
  #edgt-footer .f-brand p{ margin:.25rem 0; color:#c6d4f5; }
  #edgt-footer .f-bottom{
    display:flex; gap:16px; align-items:center; justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.08); margin-top:28px; padding-top:18px;
    color:#adc2ea;
  }
  #edgt-public .footer-link{ color:#cbd5e1; text-decoration:none; }
  #edgt-public .footer-link:hover{ color:#fff; text-decoration:underline; }
  @media (min-width:900px){
    #edgt-footer .f-grid{ grid-template-columns: 2fr 1fr 1fr 1fr; }
  }
  
  /* Topbar */
  #edgt-public #edgt-topbar{
    background:#f2f5f9; color:#475569; font-size:14px; border-bottom:1px solid rgba(0,0,0,.06);
  }
  #edgt-public .topbar-wrap{
    display:flex; align-items:center; justify-content:space-between; height:38px;
  }
  #edgt-public #edgt-topbar a{ color:#475569; text-decoration:none; }
  #edgt-public #edgt-topbar a:hover{ text-decoration:underline; }
  #edgt-public .tb-sep{ margin:0 .5rem; color:#94a3b8; }
  
  /* Header / nav */
  .edgt-header{ background:#fff; border-bottom:1px solid rgba(0,0,0,.06); }
  .edgt-topbar{ background:#f3f7fb; font-size:.95rem; padding:.35rem .75rem; text-align:center; }
  .edgt-topbar a{ margin:0 .35rem; text-decoration:none; }
  .edgt-topbar .edgt-top-contact{ float:right; margin-right:.25rem; }
  .edgt-navwrap{ width:min(92vw,1140px); margin:0 auto; display:flex; align-items:center; gap:1rem; padding:.6rem 0; }
  .edgt-brand img{ height:28px; width:auto; display:block; }
  .sr-only{ position:absolute; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden; }
  
  .edgt-nav ul{ list-style:none; display:flex; gap:1.4rem; margin:0; padding:0; align-items:center; }
  .edgt-nav a{ text-decoration:none; padding:.3rem .2rem; border-radius:8px; }
  .edgt-nav li.pill a{ padding:.45rem .8rem; border:1px solid var(--brand); border-radius:999px; }
  .edgt-nav a[aria-current="page"]{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }
  
  /* Mobile nav behavior */
  #edgt-header-modern .nav-shell{ position:relative; z-index:1000; }
  #edgt-header-modern.collapse .navtoggle{ display:inline-block; }
  #edgt-header-modern.collapse .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-top:1px solid rgba(0,0,0,.06); padding:.6rem 0; z-index:1000;
  }
  #edgt-header-modern.collapse .nav.open{ display:block; }
  
  /* Desktop default */
  #edgt-header-modern .navtoggle{ display:none !important; }
  #edgt-header-modern .nav{ display:block !important; position:static !important; }
  
  /* Mobile only */
  @media (max-width:870px){
    #edgt-header-modern .navtoggle{ display:inline-flex !important; }
    #edgt-header-modern .nav{
      display:none !important; position:absolute; left:0; right:0; top:100%;
      background:#fff; border-top:1px solid rgba(0,0,0,.06); padding:.6rem 0; z-index:1000;
    }
    #edgt-header-modern .nav.open{ display:block !important; }
  }
  
  /* Page hero */
  #edgt-public #page-hero{
    background:#eff2f6;
    padding: 22px 4px 10px;
    border-top:1px solid rgba(0,0,0,.04);
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  #edgt-public #page-hero .edgtc{ padding-block:18px; }
  #edgt-public #page-hero h1{
    margin:0; font-weight:700; color:#5c46a6;
    font-size:clamp(20px, 2.6vw, 28px);
  }
  #page-hero .sub{ margin:4px 0 0; color:#6b7280; }
  
  /* Login layout helper */
  #edgt-login{ display:grid; place-items:center; min-height:60vh; padding:clamp(24px,4vw,60px) 12px; }
  
  /* ===== How page extras (scoped) ===== */
  #edgt-public .icon-circle{
    width:40px; height:40px; border-radius:999px; display:inline-flex;
    align-items:center; justify-content:center; font-weight:700;
    background:#eef2ff; color:#2b1dd3; margin-bottom:.25rem;
  }
  #edgt-public .btn-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
  #edgt-public .video-drawer{ display:none; margin-top:1rem; }
  #edgt-public .drawer-head{ text-align:right; margin-bottom:.5rem; }
  
  /* FAQs — remove borders/boxes; keep light zebra inside FAQ list */
  #edgt-public .faq details{
    border:0; border-radius:0; padding:.5rem 0; margin:.4rem 0; background:transparent;
  }
  #edgt-public .faq details:nth-of-type(even){ background:#fafafe; }
  #edgt-public .faq summary{ cursor:pointer; font-weight:600; }
  
  /* Footer links */
  #edgt-public .footer-link{ color:#cbd5e1; text-decoration:none; }
  #edgt-public .footer-link:hover{ color:#fff; text-decoration:underline; }
  
  /* ===== EDGT Video Modal (unchanged) ===== */
  .edgt-modal[hidden]{ display:none; }
  .edgt-modal{ position: fixed; inset: 0; z-index: 99999; display:grid; place-items:center; }
  .edgt-modal_backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px); }
  .edgt-modal_dialog{
    position: relative; width: min(92vw, 1000px); background:#fff; border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.25); padding: clamp(10px, 2vw, 16px);
    transform: translateY(8px); opacity:0; transition: opacity .18s ease, transform .18s ease;
  }
  .edgt-modal.open .edgt-modal_dialog{ opacity:1; transform: translateY(0); }
  .edgt-modal_aspect{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; }
  .edgt-modal_aspect iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0 !important; display:block !important; }
  .edgt-modal_close{
    position:absolute; inset:8px 8px auto auto; width:38px; height:38px; border-radius:999px;
    border:1px solid rgba(0,0,0,.15); background:#fff; font-size:22px; line-height:34px; cursor:pointer;
  }
  .edgt-modal_caption{ margin:.6rem 0 0; text-align:center; opacity:.8; font-size:.95rem; }
  
  /* ===== How page layout ===== */
  #howedgtworks{
    --max: 1140px;
    --padY: clamp(34px, 4.6vw, 64px);
    --gap: clamp(20px, 3vw, 44px);
    overflow:visible;
    word-wrap: break-word; overflow-wrap: anywhere;
  }
  
  /* kill any height clamps from legacy */
  #howedgtworks, #howedgtworks *{
    max-height:none !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
  }
  
  /* Default (odd) sections are white */
  #howedgtworks .section{
    position: relative;
    padding-block: var(--padY);
    background:#fff;
  }
  
  /* Even sections: full-bleed grey band (NO boxes) */
  #howedgtworks .section:nth-of-type(even){
    background: transparent; /* band via ::before */
  }
  #howedgtworks .section:nth-of-type(even)::before{
    content:"";
    position:absolute; left:50%; transform:translateX(-50%); width:100vw;
    top:0; bottom:0;
    background:#e7eaf1; /* darker grey */
    z-index:0;
    box-shadow:
      inset 0 1px 0 rgba(0,0,0,.06),
      inset 0 -1px 0 rgba(0,0,0,.05);
  }
  #howedgtworks .section > .wrap{ position:relative; z-index:1; }
  
  /* hide old separators */
  #howedgtworks .band{ display:none; }
  
  /* content width */
  #howedgtworks .wrap{ width:min(92vw, var(--max,1140px)); margin-inline:auto; }
  
  /* text */
  #howedgtworks h2{ margin:0 0 .6rem; line-height:1.25; }
  #howedgtworks p{ margin:.65rem 0; line-height:1.7; }
  
  /* two columns (image + text) — keep your floats/flex behavior */
  #howedgtworks .row{
    display:flex; flex-wrap:wrap; align-items:flex-start;
    gap: var(--gap); clear: both;
    /* NO card chrome here */
    background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0;
  }
  #howedgtworks .row .col{ flex:1 1 520px; min-width:280px; }
  #howedgtworks .row .art{ flex:0 1 440px; text-align:center; }
  #howedgtworks .art img{ max-width:440px; width:100%; height:auto; margin-inline:auto; border-radius:0; }
  #howedgtworks .art img.stacked{ margin-top:12px; }
  #howedgtworks .btn-row{ display:inline-flex; flex-wrap:wrap; gap:.6rem .9rem; margin-top:1rem; }
  #howedgtworks .btn{ padding:.55rem .9rem; border-radius:8px; border:none; text-decoration:none; }
  #howedgtworks .btn.ghost{ background:transparent; }
  #howedgtworks .row.reverse{ flex-direction:row-reverse; }
  @media (max-width:860px){
    #howedgtworks .row .col, #howedgtworks .row .art{ flex-basis:100%; }
    #howedgtworks .btn-row{ justify-content:center; }
  }
  
  /* Step header chips (kept; still helpful) */
  #howedgtworks .step-title{ display:flex; align-items:center; gap:.65rem; margin:0 0 .6rem; line-height:1.2; }
  #howedgtworks .step-title .chip{
    padding:.35rem .65rem; border-radius:999px; font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
    background:#eaf4ff; color:#1756a9; border:0;
  }
  #howedgtworks .step-title .title{ font-size:clamp(1.25rem, 2vw, 1.6rem); font-weight:700; }
  
  /* Video drawer (unstyled container; no box) */
  #howedgtworks .video-panel{
    display:none; margin:20px 0 40px; background:transparent; border:0; border-radius:0; box-shadow:none;
  }
  #howedgtworks .video-panel[hidden]{ display:none; }
  #howedgtworks .video-panel.open{ display:block; }
  #howedgtworks .vp-wrap{ width:min(92vw, var(--max,1140px)); margin-inline:auto; position:relative; padding:0; }
  #howedgtworks .vp-aspect{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; }
  #howedgtworks .vp-aspect iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0 !important; display:block !important; }
  
  /* keep inline elements inline in legacy prose */
  #howedgtworks b, #howedgtworks strong, #howedgtworks em, #howedgtworks i, #howedgtworks a, #howedgtworks span{ display:inline !important; }
  
  /* === Global typography for modern pages === */
  #edgt-public,
  #edgt-public body {
    font-family: "Work Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI,
                 Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* Headings use Averia Serif Libre */
  #edgt-public h1,
  #edgt-public h2,
  #edgt-public h3,
  #edgt-public .h1,
  #edgt-public .h2,
  #edgt-public .h3,
  #edgt-public .page-hero h1,
  #edgt-public .step-title .title,
  #edgt-header-modern .brand span {
    font-family: "Averia Serif Libre", Georgia, "Times New Roman", serif;
    font-weight: 700;
  }
  /* Optional: slightly lighter default h2 weight */
  #edgt-public h2,
  #edgt-public .h2 { font-weight: 600; }
  
  /* Ensure form controls inherit font */
  #edgt-public button,
  #edgt-public input,
  #edgt-public select,
  #edgt-public textarea { font-family: inherit; }
  
  /* ===== How page hero (darker grey version) ===== */
  #edgt-public #page-hero.how-hero{
    padding: 40px 0 28px;
    background: linear-gradient(180deg, #eef2f7 0%, #eef2f7 55%, #e7eaf1 100%);
    border-top:1px solid rgba(0,0,0,.04);
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  

  
  /* ========= Page section rhythm ========= */
.section       { padding: 56px 0; background:#fff; }
.section-alt   { padding: 56px 0; background:#f6f8fb; }

/* Centered readable line length inside your edgtc container */
.section .content,
.section-alt .content { max-width: 68ch; }

/* ========= Typography ========= */
.h1 { font-size: clamp(28px, 3.2vw, 36px); font-weight: 700; letter-spacing:-0.01em; }
.h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; }
.h3 { font-size: clamp(18px, 2.0vw, 22px); font-weight: 700; }

.lead { font-size: 1.125rem; color:#475569; }
.muted{ color:#64748b; }

p + p { margin-top: .75rem; }

/* ========= Buttons ========= */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius: .75rem; padding:.65rem 1rem;
  font-weight:600; text-decoration:none; line-height:1;
  transition: all .15s ease;
}
.btn-primary { background:#5b5bd6; color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05); }
.btn-primary:hover { transform: translateY(-1px); background:#4f4fd0; }
.btn-light { background:#eef1f7; color:#27324a; }
.btn-light:hover { background:#e7ebf3; }

/* ========= Cards / callouts ========= */
.card {
  border:1px solid rgba(2,6,23,.06);
  background:#fff; border-radius:1rem; padding:1.25rem 1.25rem;
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}
.card + .card { margin-top:1rem; }

/* ========= Grids ========= */
.grid-2 { display:grid; gap: 2rem; }
@media (min-width: 900px){ .grid-2{ grid-template-columns: 1fr 1fr; } }

/* ========= Lists ========= */
.list-slim li { margin:.45rem 0; }
.list-check {
  list-style:none; padding-left:0;
}
.list-check li{
  position:relative; padding-left:1.75rem; margin:.5rem 0;
}
.list-check li::before{
  content:""; position:absolute; left:0; top:.15rem;
  width:1rem; height:1rem; border-radius:.3rem;
  background:#e9f6ef; border:1px solid #3fb37f;
  box-shadow: inset 0 0 0 2px #e9f6ef;
}
.list-check li::after{
  content:""; position:absolute; left:.25rem; top:.43rem;
  width:.55rem; height:.35rem; border:2px solid #27a36a;
  border-top:none; border-right:none; transform: rotate(-45deg);
}

/* ========= Columns for subject list ========= */
.columns-2 { columns: 2; column-gap: 2rem; }
@media (max-width: 800px){ .columns-2 { columns: 1; } }

/* ========= Spacing helpers ========= */
.mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem}
.space-y > * + * { margin-top: 1rem; }

/* ========= Hero (already added earlier) slight contrast ========= */
#edgt-public #page-hero{ background:#f3f5f9; }



  


/* ============= Base / Container ============= */
.edgtc{ padding-left:16px; padding-right:16px; margin:0 auto; }
.edgtc-lg{ max-width:1200px; }

/* ============= Straps / Breadcrumb ============= */
.strap{ background:#f4f6fb; border-bottom:1px solid #e8ebf3; }
.strap-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; }
.crumbs{ display:flex; gap:.5rem; color:#6b7280; font-size:.88rem; }
.crumbs a{ color:#475569; text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.link-muted{ color:#6b7280; text-decoration:none; }
.link-muted:hover{ color:#4b5563; text-decoration:underline; }
.dot{ opacity:.6; margin:0 .45rem; }

/* ============= Sections / Layout ============= */
.section{ padding:64px 0; background:#fff; }
.section-alt{ padding:64px 0; background:#f7f9fc; }
.prose-max{ max-width:900px; }
.two-col{ display:grid; gap:2rem; grid-template-columns:1.25fr .75fr; }
@media (max-width: 960px){ .two-col{ grid-template-columns:1fr; } }

/* Header band */
.headband{ padding-top:42px; }
.head-grid{ display:grid; grid-template-columns: 1fr 290px; gap:2rem; align-items:start; }
@media (max-width: 1100px){ .head-grid{ grid-template-columns:1fr; } }

/* Sticky TOC */
.toc{ position:sticky; top:14px; align-self:start; border:1px solid #e9edf5; border-radius:14px; padding:14px; background:#fff; }
.toc-title{ font-size:.9rem; font-weight:800; color:#334155; margin:0 0 8px 0; }
.toc a{ display:block; padding:8px 10px; border-radius:10px; color:#3b4a69; text-decoration:none; font-weight:600; }
.toc a:hover{ background:#f0f3fb; }
.toc a.active{ background:#e7eaff; color:#3f3fbd; }

/* Typography */
.h-hero{ font-size:clamp(32px, 4.2vw, 44px); font-weight:800; letter-spacing:-.015em; margin:0; }
.eyebrow{ margin-top:8px; color:#6b7280; }
.h2{ font-size:clamp(22px, 2.6vw, 28px); font-weight:750; margin:0; }
.h3{ font-size:clamp(18px, 2.2vw, 22px); font-weight:700; margin:0; }
.lead{ font-size:1.125rem; color:#475569; }
.muted{ color:#667085; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:.9rem; padding:.78rem 1.1rem;
      font-weight:700; text-decoration:none; line-height:1; transition:all .18s ease; border:1px solid transparent; }
.btn-primary{ background:#5b5bd6; color:#fff; box-shadow:0 8px 20px rgba(91,91,214,.25); }
.btn-primary:hover{ background:#4f4fd0; transform:translateY(-1px); }
.btn-light{ background:#eef1f7; color:#25324a; }
.btn-light:hover{ background:#e7ebf3; }
.btn-contrast{ background:#fff; color:#3f3fbd; }
.btn-contrast:hover{ background:#f3f4ff; }
.btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }

/* Grids */
.grid-cta{ display:grid; gap:1rem; grid-template-columns:2fr auto; align-items:center; }
@media (max-width: 860px){ .grid-cta{ grid-template-columns:1fr; } }

.grid-features{ display:grid; gap:1.4rem; grid-template-columns: 1fr; }
@media (min-width: 920px){ .grid-features{ grid-template-columns: repeat(3, 1fr); } }
.grid-2{ display:grid; grid-template-columns: 1fr; gap:2rem; }
@media (min-width: 900px){ .grid-2{ grid-template-columns: 1fr 1fr; } }

/* Feature cards */
.card{ border:1px solid rgba(2,6,23,.06); background:#fff; border-radius:16px; padding:22px 20px; box-shadow:0 14px 30px rgba(2,6,23,.06); }
.feature.lg{ padding:26px 22px; }
.feat-icon{ font-size:30px; width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:#eef0ff; color:#4f4fd0; margin-bottom:.5rem; }

/* Bullets & checks */
.list-bullets{ margin:0; padding-left:1.15rem; color:#25324a; }
.list-bullets li{ margin:.4rem 0; }
.list-check{ list-style:none; padding-left:0; }
.list-check li{ position:relative; padding-left:1.9rem; margin:.6rem 0; color:#25324a; }
.list-check li::before{ content:""; position:absolute; left:0; top:.2rem; width:1.15rem; height:1.15rem; border-radius:.35rem; background:#e8f7ef; border:1px solid #2daf77; }
.list-check li::after{ content:""; position:absolute; left:.35rem; top:.60rem; width:.55rem; height:.35rem; border:2px solid #239662; border-top:none; border-right:none; transform:rotate(-45deg); }

/* Chips */
.chip-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.chip{ display:inline-block; padding:.60rem .85rem; background:#fff; border:1px solid #e7eaf3; border-radius:12px; box-shadow:0 6px 16px rgba(2,6,23,.04); color:#303b5a; font-weight:600; }

/* Accordion */
.acc{ border:1px solid #e8ebf5; border-radius:14px; background:#fff; }
.acc+.acc{ margin-top:12px; }
.acc-head{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:14px 16px; }
.acc-title{ font-weight:800; color:#334155; }
.acc-ind{ width:18px; height:18px; border-radius:50%; background:#eef0ff; position:relative; }
.acc-ind::before, .acc-ind::after{ content:""; position:absolute; background:#4f4fd0; }
.acc-ind::before{ width:10px; height:2px; top:8px; left:4px; }
.acc-ind::after{ width:2px; height:10px; top:4px; left:8px; transition:transform .18s ease; }
.acc[open] .acc-ind::after{ transform:scaleY(0); }
.acc-body{ padding:14px 16px 18px; }

/* Timeline */
.timeline{ list-style:none; margin:0; padding:0; border-left:3px solid #e8ebf5; }
.timeline li{ position:relative; padding:0 0 22px 24px; }
.tl-dot{ position:absolute; left:-8px; top:2px; width:14px; height:14px; border-radius:50%; background:#5b5bd6; box-shadow:0 0 0 4px #eef0ff; }
.tl-card{ background:#fff; border:1px solid #e9edf5; border-radius:12px; padding:14px 16px; }

/* CTA band */
.cta-band{ background:linear-gradient(90deg, #5b5bd6, #8347db); padding:60px 0; color:#fff; text-align:center; }
.text-white{ color:#fff; } .text-indigo-100{ color:#e0e7ff; }
.flex{ display:flex; } .flex-col-center{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gap-3{ gap:.75rem; } .flex-wrap{ flex-wrap:wrap; } .justify-center{ justify-content:center; }

/* Spacing utils */
.mb-2{ margin-bottom:.5rem; } .mb-3{ margin-bottom:.75rem; } .mb-6{ margin-bottom:1.5rem; }
.mt-3{ margin-top:.75rem; } .mt-6{ margin-top:1.5rem; }

/* hero illustration */
.hero-illus { margin: 0 0 14px; }
.hero-svg { width: 100%; height: auto; display: block; }

/* small feature art */
.feat-figure { width: 52px; height: 52px; border-radius: 12px; background: #eef0ff; display: grid; place-items: center; margin-bottom: .5rem; }
.feat-svg { width: 28px; height: 28px; }