:root{
    --blue:#3066BE;
    --cyan:#29C7AC;
    --bg:#F8F9FB;
    --text:#111318;
    --muted:#6A7181;
    --card:#ffffff;
    --shadow: 0 10px 25px rgba(0,0,0,.06);
    --radius: 18px;
  }
  .nav-cta:visited{
    color:#fff !important;
    -webkit-text-fill-color:#fff;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
  body{min-height:100vh;display:flex;flex-direction:column;}
  main{flex:1 0 auto;}
  a{color:inherit;text-decoration:none}
  .container{width:min(1120px,92%);margin-inline:auto}
  
  /* === CTA Buttons (Fixed contrast, no flash) === */
  .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--cyan);
    color: #062822; /* darker readable text on bright cyan */
    font-weight: 800;
    box-shadow: var(--shadow);
    border: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    will-change: transform, box-shadow;
  }
  /* lighter mint variant */
  .cta.secondary {
    background: #e7faf6;
    color: #0a3a33;
  }
  /* Hover: slightly darken background, keep contrast */
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.15);
  }
  .cta.secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    background: #d3f2ec; /* mint shade darkened */
    color: #08332c;
  }
  .newsletter-form{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
  }
  .newsletter-input{
    flex:1 1 260px;
    padding:12px 16px;
    border:1px solid #ccd3e0;
    border-radius:999px;
    font-size:16px;
    background:#fff;
    appearance:none;
    -webkit-appearance:none;
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .newsletter-input:focus{
    outline:none;
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(41,199,172,.18);
  }
  .newsletter-note{
    color:var(--muted);
    font-size:14px;
    margin-top:12px;
  }

  .cta-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 24px;
    height:48px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--blue), var(--cyan));
    color:#fff;
    font-weight:800;
    font-size:16px;
    border:none;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(0,0,0,.14);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .cta-pill:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(0,0,0,.18);
  }
  
  /* Nav CTA (the floating pill one on the right) */
  .nav-cta {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 42px;
    line-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .nav-cta:hover {
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 16px 36px rgba(0,0,0,.18);
    filter: brightness(1.05);
    -webkit-text-fill-color:#fff;
  }
  
  /* Hero */
  .hero{padding:96px 0 32px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
  .headline{font-family:Manrope,Inter,sans-serif;font-size:clamp(36px,5vw,56px);line-height:1.02;margin:0 0 14px}
  .sub{font-size:18px;color:var(--muted);max-width:56ch}
  .hero-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
  
  /* Mock formula box */
  .mock{background:var(--card);border:1px solid #e7eaf0;border-radius:22px;box-shadow:var(--shadow);padding:18px;}
  .mock .title{display:flex;align-items:center;gap:10px;color:#3b4453;font-weight:700}
  .chip{display:inline-flex;align-items:center;gap:8px;background:#eef5ff;color:#184288;padding:8px 12px;border-radius:999px;font-weight:700;font-size:14px}
  .formula-card{margin-top:14px;border:1px solid #edf0f5;border-radius:16px;padding:16px;background:#fff}
  .formula{font-family:"JetBrains Mono",monospace;font-size:24px}
  .vars{margin-top:10px;color:#5e6676;font-size:14px}
  
  /* Sections */
  section{padding:56px 0}
  .section-title{font-family:Manrope,Inter,sans-serif;font-size:28px;margin:0 0 18px}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .preview-hero{
    padding:90px 0 52px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:40px;
    align-items:center;
  }
  .preview-main{
    padding:10px 0 80px;
  }
  .preview-split{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:24px;
    align-items:start;
  }
  .getstarted-hero{
    padding:80px 0 48px;
    display:grid;
    gap:32px;
    grid-template-columns:minmax(0,1fr) minmax(0,0.9fr);
    align-items:center;
  }
  .getstarted-hero > div:first-child{
    max-width:520px;
  }
  .getstarted-hero .newsletter-form{
    max-width:440px;
  }
  .getstarted-hero .card{
    padding:22px;
  }
  
  /* Cards */
  .card{
    background:var(--card);
    border:1px solid #e7eaf0;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
  }
  /* Only feature/other cards hover; NOT pricing cards */
  .card:not(.price-card):hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    border-color: var(--cyan);
  }
  
  /* ===== Pricing grid ===== */
  .pricing{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    align-items:stretch;
    perspective:1000px; /* enables subtle tilt if JS is added */
  }
  .price-shell{
    position:relative;
    isolation:isolate; /* keep glow behind its card */
  }
  .price-shell.popular::after{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius:calc(var(--radius) + 18px);
    background:radial-gradient(110% 220% at 50% -10%,
                rgba(41,199,172,.28), transparent 60%);
    filter:blur(18px);
    opacity:.9;
    pointer-events:none;
    z-index:-1;
  }
  
  /* ===== Cards baseline (composed transforms) ===== */
  .price-card{
    --lift: 0px;
    --revealY: 0px;
    --revealX: 0px;
    --revealScale: 1;
    --tiltX: 0deg;
    --tiltY: 0deg;
  
    position: relative;
    z-index: 1;
    padding:22px;
    border-radius:var(--radius);
    background:var(--card);
    border:1px solid #e7eaf0;
    box-shadow:0 10px 22px rgba(0,0,0,.06);
  
    transform:
      translateX(var(--revealX))
      translateY(calc(var(--lift) + var(--revealY)))
      scale(var(--revealScale))
      rotateX(var(--tiltX))
      rotateY(var(--tiltY));
  
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      opacity .22s ease;
  }
  
  
  /* Hover lift for all pricing cards */
  .price-card:hover{
    --lift:-8px;
    box-shadow:0 16px 38px rgba(0,0,0,.12);
    border-color:rgba(41,199,172,.28);
  }
  
  /* ===== Bolder, larger price ===== */
  .price{
    margin:.25rem 0 1rem;
    line-height:1;
  }
  .price > span{                   /* the numeric amount */
    font-size:44px;                /* bigger */
    font-weight:900;               /* bolder */
    letter-spacing:-.02em;
  }
  .price small{
    margin-left:8px;
    vertical-align:top;
    font-weight:600;
    color:var(--muted);
  }
  
  /* ===== Pro: higher by default + cyan glow ===== */
  .price-card.popular{
    --lift:-12px;                                    /* sits higher */
    border:2px solid var(--cyan);
    box-shadow:
      0 22px 54px rgba(41,199,172,.22),             /* colored outer shadow */
      0 12px 26px rgba(0,0,0,.10);
  }
  .price-card.popular:hover{ --lift:-16px; }
  
  
  /* Badge */
  .popular-badge{
    position:absolute; top:-12px; left:18px;
    padding:6px 10px; font-size:12px; font-weight:800;
    border-radius:999px; color:#0b2e29;
    background:#e9fbf6; border:1px solid #b9efe4;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
  }
  
  /* Mobile stack */
  @media (max-width:960px){
    .pricing{ grid-template-columns:1fr; }
    .price-card, .price-card.popular{ --lift:0; }    /* calmer on small screens */
  }
  
  /* ===== FAQ ===== */
  .faq-hero { text-align:center; padding:12px 0 8px; }
  .faq-grid {
    margin-top:22px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
    align-items:start;
  }
  .qa {
    background: var(--card);
    border:1px solid #e7eaf0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .qa:hover {
    border-color: var(--cyan);
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    transform: translateY(-2px);
  }
  .qa > summary {
    list-style:none;
    cursor:pointer;
    font-weight:700;
    color:#2a2f3b;
    position:relative;
    padding-right:26px;
  }
  .qa > summary::-webkit-details-marker { display:none; }
  .qa > summary::after {
    content:"+";
    position:absolute; right:0; top:0;
    font-weight:800; color: var(--cyan);
  }
  .qa[open] > summary::after { content:"–"; }
  .qa .a { margin-top:10px; color: var(--muted); line-height:1.6; }
  
  .faq-cta { text-align:center; margin-top:100px; margin-bottom:30px; }
  
  @media (max-width: 960px){
    .faq-grid { grid-template-columns:1fr; }
  }
  @media (min-width: 1200px){
    .faq-grid { grid-template-columns: repeat(3, 1fr); }
  }
  #faq { padding-bottom: 20px; }
  
  /* ===== Testimonials ===== */
  .testimonials { padding:80px 0; text-align:center; }
  .testimonials-hero { margin-bottom:36px; }
  .testimonials-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-bottom:40px;
  }
  .testimonial-card {
    background:var(--card);
    border:1px solid #e7eaf0;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:5px 20px 20px;
    text-align:left;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .testimonial-card:hover {
    transform:translateY(-6px);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    border-color:var(--cyan);
  }
  .quote { font-style:italic; color:#2a2f3b; line-height:1.6; margin-bottom:18px; }
  .student { display:flex; align-items:center; gap:12px; }
  .student img { width:48px; height:48px; border-radius:50%; }
  .student strong { color:#111318; font-weight:700; }
  .student span { color:var(--muted); font-size:14px; }
  .testimonials-cta { margin-top:28px; }
  .testimonials-cta .cta { font-size:18px; padding:14px 24px; }
  
  @media (max-width:960px){
    .testimonials-grid { grid-template-columns:1fr; }
  }
  
  /* ---- Scroll reveal (variable-based, composable) ---- */
  .reveal {
    opacity: 0;
    --revealY: 18px;
    --revealX: 0px;
    --revealScale: .98;
    transition: opacity .6s ease, transform .6s ease, transition-delay .6s;
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
  }
  .reveal.visible {
    opacity: 1;
    --revealY: 0px;
    --revealX: 0px;
    --revealScale: 1;
  }
  /* Optional directions */
  .reveal[data-reveal="left"]  { --revealX: -24px; }
  .reveal[data-reveal="right"] { --revealX:  24px; }
  /* Respect reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.visible { opacity: 1; --revealY:0; --revealX:0; --revealScale:1; transition:none; }
  }
  
  /* ===== Floating, glassy top bar ===== */
  .floating-nav { position: sticky; top: 14px; z-index: 60; }
  .nav-shell {
    display:flex; align-items:center; justify-content:space-between;
    width:100%;
    border-radius: 999px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .50);
    border: 1px solid rgba(140, 150, 170, .25);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .nav-shell.scrolled {
    background: rgba(255,255,255,.75);
    border-color: rgba(140,150,170,.35);
    box-shadow: 0 14px 38px rgba(0,0,0,.12);
  }
  .floating-nav .brand { display:flex; gap:10px; align-items:center; font-weight:800 }

  /* ===== Mobile nav scaffolding ===== */
  .nav-mobile{
    display:none;
    width:100%;
    align-items:center;
    justify-content:space-between;
    pointer-events:auto;
  }
  .nav-mobile-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:8px 14px 8px 18px;
    border-radius:999px;
    background:rgba(255,255,255,0.5);
    border:1px solid rgba(140,150,170,0.28);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    backdrop-filter:saturate(160%) blur(16px);
    -webkit-backdrop-filter:saturate(160%) blur(16px);
    pointer-events:auto;
    width:100%;
    position:relative;
    z-index:280;
  }
  .nav-mobile-pill .nav-brand{
    flex:1 1 auto;
  }
  .nav-brand{
    font-weight:800;
    font-size:20px;
    color:#1f2a3a;
    text-decoration:none;
  }
  .nav-mobile-actions{
    display:flex;
    align-items:center;
    gap:12px;
  }
.nav-mobile-cta{
    display:none;
    padding:0 18px;
    height:42px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--blue), var(--cyan));
    color:#fff !important;
    font-weight:800;
    font-size:15px;
    box-shadow:0 12px 28px rgba(0,0,0,.14);
    white-space:nowrap;
    -webkit-text-fill-color:#fff;
    transition:filter .18s ease, box-shadow .18s ease;
  }
.nav-mobile-cta:visited{color:#fff !important;-webkit-text-fill-color:#fff;}
.nav-mobile-cta:hover{filter:brightness(1.05);box-shadow:0 14px 30px rgba(0,0,0,.18);}
  .nav-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    position:relative;
    z-index:260;
  }
  .nav-toggle span{
    display:block;
    width:24px;
    height:2px;
    background:#1f2a3a;
    border-radius:999px;
    transition:transform .36s cubic-bezier(.45,.05,.17,1.4), opacity .24s ease, background .24s ease, width .3s ease;
    transform-origin:center;
  }
  .nav-toggle span:nth-child(2){
    width:20px;
  }
  .nav-toggle span:nth-child(1),
  .nav-toggle span:nth-child(3){
    width:26px;
  }
  .nav-toggle[aria-expanded="true"] span{ background:#1f2a3a; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg) scaleX(1.05);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
    transform:scaleX(0.2);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) scaleX(1.05);
  }
  body.drawer-open .nav-mobile-pill{
    background:rgba(255,255,255,0.92);
    border-color:rgba(140,150,170,0.32);
    box-shadow:0 16px 36px rgba(0,0,0,.18);
  }
  body.drawer-open .nav-mobile-pill .nav-brand{
    color:#1f2a3a;
  }
  body.drawer-open .nav-toggle span{
    background:#1f2a3a;
  }
  .mobile-menu{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
    padding:110px 16px 26px;
    background:rgba(255,255,255,0.78);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    opacity:0;
    pointer-events:none;
    transition:opacity .24s ease;
    z-index:240;
    overflow-y:auto;
  }
  .mobile-menu-card{
    width:min(280px, calc(100% - 56px));
    border-radius:24px;
    padding:24px 22px 28px;
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(140,150,170,0.26);
    box-shadow:0 18px 42px rgba(30,42,66,0.18);
    color:#1f2a3a;
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    transform:translateY(-10px) scale(.97);
    opacity:0;
    transition:opacity .24s ease, transform .24s ease;
  }
  .mobile-menu nav{
    display:flex;
    flex-direction:column;
    gap:16px;
    text-align:left;
  }
  .mobile-menu a{
    color:inherit;
    text-decoration:none;
    font-size:20px;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .mobile-menu-links a::after{
    content:"";
    display:block;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.16),rgba(255,255,255,0));
    opacity:0;
    transform:scaleX(0.6);
    transform-origin:center;
    transition:opacity .22s ease, transform .22s ease;
    margin-top:8px;
  }
  .mobile-menu-links a:hover::after,
  .mobile-menu-links a:focus-visible::after{
    opacity:1;
    transform:scaleX(1);
  }
  .mobile-menu-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:48px;
    border-radius:999px;
    background:linear-gradient(120deg, var(--blue), var(--cyan));
    border:none;
    color:#ffffff;
    font-weight:800;
    box-shadow:0 18px 44px rgba(0,0,0,.32);
    width:100%;
    margin-top:22px;
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  }
  .mobile-menu-cta:hover,
  .mobile-menu-cta:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 22px 52px rgba(0,0,0,.34);
    filter:brightness(1.05);
  }
  .mobile-menu.open{
    opacity:1;
    pointer-events:auto;
  }
  .mobile-menu.open .mobile-menu-card{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  html.drawer-open,
  html.drawer-open body{
    overflow:hidden;
    height:100%;
    overscroll-behavior:contain;
  }
  
  /* ===== Floating liquid-glass pill nav (center) + separate CTA (right) ===== */
  .nav-pod-wrap{
    position: sticky;
    top: 12px;
    z-index: 110;
    pointer-events: none;
  }
  .nav-line{
    position: relative;
    height: 64px;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  /* center pill */
  .nav-pod{
    pointer-events: auto;
    position: relative;
    display: flex; align-items: center; gap: 6px;
    height: 48px; padding: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(140,150,170,0.28);
    box-shadow: 0 14px 36px rgba(0,0,0,.12);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .nav-pod:hover{ transform: translateY(-2px); }
  /* links inside pill */
  .pod-link{
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 14px;
    border-radius: 999px;
    font-weight: 700; color: #1f2a3a;
    white-space: nowrap;
    z-index: 1;
    transition: color .16s ease;
  }
  /* moving glass highlight under hovered link */
  .pod-hover{
    position: absolute; top: 6px; left: 6px;
    height: 36px; width: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.40);
    border: 1px solid rgba(140,150,170,0.36);
    box-shadow: 0 10px 26px rgba(0,0,0,.14);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    transition: left .26s cubic-bezier(.22,.61,.36,1),
                width .26s cubic-bezier(.22,.61,.36,1),
                opacity .15s ease;
    pointer-events: none;
    opacity: 0; /* hidden until hover */
  }
  /* slightly darker text while pill is under it */
  .nav-pod[data-hovering="1"] .pod-link.is-hovered{ color:#0e1a2b; }
  
  /* separate CTA on the right (outside the pill) */
  .nav-cta{
    pointer-events: auto;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    height: 42px; line-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    color: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  .nav-cta:hover{
    transform: translateY(-52%);
    box-shadow: 0 16px 36px rgba(0,0,0,.18);
    filter: saturate(1.05);
  }
  
  /* responsive nav */
  @media (max-width: 960px){
    .pod-link.hide-sm{ display:none; }
    .nav-cta{ right: 8px; }
  }
  
/* --- Mini brand card (uses existing <div class="pill">...) --- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  
    /* size: small */
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .01em;
  
    color: #0b2e29;                 /* text color */
    background: #e9fbf6;            /* soft mint */
    border: 1px solid #b9efe4;      /* thin outline */
    border-radius: 999px;           /* pill shape */
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
    padding: 6px 12px;
  
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  
  .pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    background: #dff9f2;            /* slightly darker mint on hover */
  }
  
  /* Optional: extra-small variant */
  .pill.xs { font-size: 12px; padding: 4px 10px; }
  
  /* Optional: blue colorway */
  .pill.blue {
    background: #edf3ff;
    border-color: #c8dafc;
    color: #1a2f70;
  }

  /* ===== Math formatting helpers ===== */
  .math-display{
    font-size:28px;
    text-align:center;
    margin:18px 0;
  }
  .math-inline{
    font-size:1em;
  }
  
  /* ===== Roadmap timeline ===== */
  .timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:42px;
  }
  .timeline::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:6px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(48,102,190,0.18), rgba(41,199,172,0.35));
  }
  .timeline-item{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }
  .timeline-marker{
    padding:8px 14px;
    border-radius:999px;
    background:#1f2a3a;
    color:#fff;
    font-weight:700;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
  }
  .timeline-card{
    padding:26px;
    width:min(680px, 100%);
  }
  .timeline-card h2{
    margin:0 0 8px;
    font-size:24px;
  }
  .timeline-card .sub{
    margin-bottom:16px;
  }
  .timeline-card .ul{
    margin:0;
  }
@media (max-width:720px){
  .timeline{
    gap:32px;
  }
  .timeline::before{
    left:24px;
  }
  .timeline-item{
    align-items:flex-start;
    padding-left:60px;
  }
  .timeline-marker{
    margin-left:-60px;
  }
}

@media (max-width:420px){
  .getstarted-hero{
    padding:32px 0 24px;
  }
  .getstarted-hero > div:first-child{
    padding:0 16px;
  }
  .getstarted-hero h1{
    font-size:22px;
  }
  .getstarted-hero .newsletter-form{
    padding:0 16px;
    max-width:340px;
  }
  .getstarted-hero .newsletter-input{
    font-size:14px;
    padding:10px 12px;
    border-radius:24px;
  }
  .getstarted-hero .cta-pill{
    height:42px;
    font-size:13px;
  }
  .getstarted-hero .card{
    padding:16px;
    margin-top:18px;
    max-width:94%;
  }
  .getstarted-hero .card .card{
    padding:14px;
    margin-top:14px;
  }
}
  
  /* ===== Footer ===== */
  footer{
    padding:72px 0 60px;
  }
  .footer-box{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:center;
    justify-content:space-between;
    background:var(--card);
    border:1px solid #e7eaf0;
    border-radius:calc(var(--radius) + 6px);
    box-shadow:var(--shadow);
    padding:28px 32px;
  }
  .footer-links{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }
  .footer-brand{
    font-weight:600;
    color:#252b38;
  }
  @media (max-width:640px){
    .footer-box{
      flex-direction:column;
      align-items:flex-start;
      gap:12px;
    }
  }
  
@media (max-width:720px){
    body{
      padding-top:86px;
    }
    .nav-pod-wrap{pointer-events:auto;}
    .nav-line{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      height:auto;
      pointer-events:auto;
      padding:0;
    }
    .nav-pod-wrap{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:280;
      pointer-events:auto;
    }
    .nav-line{
      background:rgba(255,255,255,0.0001);
      border:1px solid rgba(255,255,255,0.0001);
      box-shadow:none;
      padding:8px 16px;
      margin:12px auto;
      width:min(480px,92%);
    }
    .nav-pod{display:none;}
    .nav-cta{display:none;}
    .nav-mobile{display:flex;padding:10px 0;justify-content:center;}
    .nav-mobile-cta{display:inline-flex;-webkit-text-fill-color:#fff;color:#fff !important;}
    .nav-toggle{display:flex;}
    .nav-mobile-pill{
      max-width:360px;
      width:100%;
      margin:0 auto;
      background:rgba(255,255,255,0.72);
      border-color:rgba(140,150,170,0.32);
    }
    .hero{
      grid-template-columns:1fr;
      display:block;
      text-align:center;
    }
    .hero > div:first-child{
      display:flex;
      flex-direction:column;
      align-items:center;
    }
    .hero-cta{
      justify-content:center;
    }
    .mock{
      margin:28px auto 0;
      width:100%;
    }
    .grid-3{
      grid-template-columns:1fr;
    }
    .preview-hero{
      display:block;
      padding:70px 0 28px;
      text-align:center;
    }
    .preview-hero > div:last-child{
      margin-top:26px;
    }
    .preview-hero .cta-pill,
    .preview-hero .cta.secondary{
      justify-content:center;
      width:100%;
    }
    .preview-hero > div:first-child > div{
      justify-content:center;
    }
    .preview-main{
      padding:20px 0 60px;
    }
    .preview-split{
      display:block;
    }
    .preview-split > .card + .card{margin-top:24px;}
    .getstarted-hero{
      display:block;
      text-align:center;
      gap:20px;
      padding:40px 0 28px;
    }
    .getstarted-hero > div:first-child{
      margin:0 auto;
      max-width:420px;
      padding:0 18px;
    }
    .getstarted-hero h1{
      font-size:clamp(24px,6vw,30px);
      line-height:1.12;
      margin-bottom:10px;
    }
    .getstarted-hero .sub{
      margin-inline:auto;
      font-size:15px;
    }
    .getstarted-hero .newsletter-form{
      flex-direction:column;
      align-items:stretch;
      width:100%;
      max-width:420px;
      margin:18px auto 0;
      gap:12px;
      padding:0;
    }
    .getstarted-hero .newsletter-input{
      width:100%;
      font-size:15px;
      padding:12px 18px;
      border-radius:28px;
    }
    .getstarted-hero .newsletter-input::placeholder{
      font-size:14px;
    }
    .getstarted-hero .cta-pill{
      width:100%;
      height:46px;
      font-size:14px;
      border-radius:999px;
    }
    .getstarted-hero .card{
      order:2;
      margin:20px auto 0;
      padding:18px;
      max-width:92%;
      text-align:left;
    }
    .getstarted-hero .card .card{
      margin-top:16px;
      padding:16px;
      text-align:left;
    }
    .pricing{
      gap:24px;
    }
    .hero .pill{margin-inline:auto;}
    section{
      padding:48px 0;
    }
  }