/* Metomic shared design system - extracted from brand tokens in site-analysis/ANALYSIS.md */
  :root{
    --black:#1a1a1a;
    --cream-light:#f7f7f7;
    --cream-dark:#f0f0f0;
    --grey-light:#e5e3dd;
    --grey-mid:#8a8a8e;
    --grey-dark:#5c5c5c;
    --purple:#614ab3;
    --purple-lightest:#f7f5ff;
    --purple-tint:#efeafa;
    --lavender:#e2d7ff;
    --lilac:#c6b0ff;
    --electric:#551dff;
    --midnight:#181718;
    --deep-purple:#4b2883;
    --mid-purple:#352155;
    --orange:#ff7e47;
    --orange-hover:#d5691b;
    --coral:#ff5e4e;
    --radius:8px;
    --radius-sm:4px;
    --font-heading:'Clash Grotesk','ClashGrotesk',sans-serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'JetBrains Mono',monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{font-size:16px;}
  @media (min-width:1919px){html{font-size:18px;}}
  @media (max-width:991px){html{font-size:15px;}}
  body{
    font-family:var(--font-body);
    font-weight:400;
    color:var(--black);
    background:var(--cream-light);
    line-height:1.2;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }
  .container{max-width:75rem;margin:0 auto;padding:0 3%;}

  /* ── Nav and footer ───────────────────── */
  /* Moved to public/css/site-chrome.css, which every page on the site
   * loads -- including the 102 Webflow-export pages. Keeping a second copy
   * here would put the two definitions on a collision course, which is the
   * drift this consolidation existed to remove. This file still owns the
   * page bodies of /, /platform/ and /book-a-demo/, and loads alongside
   * site-chrome.css on those three. */


  /* ── Hero ────────────────────────────── */
  .hero{padding:5.5rem 0 0;text-align:center;position:relative;overflow:hidden;}
  .hero-glow{
    position:absolute;inset:auto 0 -20rem 0;height:44rem;pointer-events:none;
    background:radial-gradient(50% 55% at 50% 100%, rgba(97,74,179,.16) 0%, rgba(226,215,255,.10) 45%, transparent 75%);
  }
  .hero .container{position:relative;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:.6rem;
    background:var(--purple-tint);border:1px solid var(--lavender);
    color:var(--purple);border-radius:100px;
    font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:.5rem 1.1rem;margin-bottom:2rem;
  }
  .eyebrow .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--electric);}
  h1{
    font-family:var(--font-heading);font-weight:500;
    font-size:clamp(2.75rem, 5.9vw, 4.5rem);line-height:1.08;letter-spacing:-.015em;
    max-width:70rem;margin:0 auto 1.75rem;
  }
  .sub-short{display:none;}
  @media (max-width:767px){
    h1 br{display:none;}
    .hero{padding-top:3.25rem;}
    .eyebrow{font-size:.6875rem;padding:.4rem .85rem;margin-bottom:1.5rem;}
    h2.subhero{font-size:1.0625rem;line-height:1.6;margin-bottom:2rem;}
    .sub-full{display:none;}
    .sub-short{display:inline;}
    .hero-ctas{flex-direction:column;align-items:center;gap:.75rem;}
    .hero-ctas .btn{width:100%;max-width:22rem;}
    .hero-note{margin-bottom:3rem;font-size:.8125rem;}
    .proof-logos{gap:1.25rem 1.75rem;}
    .proof-logos span{font-size:1.05rem;}
    .proof-badges{flex-direction:column;gap:.75rem;}
    .proof-badges .sep{display:none;}
  }
  h1 .accent{color:var(--purple);}
  h2.subhero{
    font-family:var(--font-body);font-size:1.25rem;font-weight:400;line-height:1.55;color:var(--grey-dark);
    max-width:46rem;margin:0 auto 2.75rem;
  }
  .subhero strong{color:var(--black);font-weight:600;}
  .hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.25rem;}
  .hero-note{font-size:.875rem;color:var(--grey-mid);margin-bottom:4.5rem;}

  /* ── Gateway visual ──────────────────── */
  .visual{
    position:relative;max-width:66rem;margin:0 auto;
    background:linear-gradient(160deg,var(--midnight) 0%,#241a38 55%,var(--deep-purple) 130%);
    border-radius:16px 16px 0 0;
    padding:2.75rem 3rem 3rem;
    box-shadow:0 -1px 0 rgba(198,176,255,.25) inset,0 30px 80px -30px rgba(24,23,24,.5);
    text-align:left;
  }
  .visual-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.25rem;}
  .visual-title{font-family:var(--font-mono);font-size:.8125rem;color:var(--lilac);letter-spacing:.06em;}
  .visual-live{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.75rem;color:#9be2b0;}
  .visual-live .pulse{width:.5rem;height:.5rem;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18);}
  .flow{display:grid;grid-template-columns:1fr auto 1.4fr auto 1fr;gap:0;align-items:center;}
  .flow > *{min-width:0;}
  .flow-col{display:flex;flex-direction:column;gap:.75rem;}
  .flow-label{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-mid);margin-bottom:.25rem;}
  .chip{
    display:flex;align-items:center;gap:.6rem;
    background:rgba(255,255,255,.05);border:1px solid rgba(226,215,255,.15);
    border-radius:var(--radius);padding:.7rem .9rem;
    font-size:.875rem;font-weight:500;color:#e9e6f2;
  }
  .chip .ico{width:1.4rem;height:1.4rem;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0;}
  .chip.shadow{border-style:dashed;border-color:rgba(255,126,71,.5);}
  .chip .tag{margin-left:auto;font-family:var(--font-mono);font-size:.625rem;padding:.15rem .45rem;border-radius:4px;}
  .tag-shadow{background:rgba(255,126,71,.15);color:var(--orange);}
  .tag-ok{background:rgba(74,222,128,.12);color:#9be2b0;}
  .pipe{width:3.5rem;height:2px;position:relative;
    background:repeating-linear-gradient(90deg,rgba(198,176,255,.55) 0 6px,transparent 6px 12px);}
  .pipe::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);
    border-left:6px solid rgba(198,176,255,.8);border-top:4px solid transparent;border-bottom:4px solid transparent;}
  .gateway{
    background:rgba(97,74,179,.16);
    border:1px solid rgba(198,176,255,.4);
    border-radius:12px;padding:1.4rem 1.5rem;
    box-shadow:0 0 50px -8px rgba(97,74,179,.55);
  }
  .gateway-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;}
  .gateway-mark{width:2rem;height:2rem;color:#fff;flex-shrink:0;}
  .gateway-name{font-family:var(--font-heading);font-weight:500;font-size:1.05rem;color:#fff;}
  .gateway-sub{font-family:var(--font-mono);font-size:.65rem;color:var(--lilac);letter-spacing:.08em;}
  .payload{
    background:rgba(24,23,24,.65);border:1px solid rgba(226,215,255,.12);
    border-radius:var(--radius);padding:.85rem 1rem;
    font-family:var(--font-mono);font-size:.72rem;line-height:1.7;color:#b9b3c9;
    white-space:pre-wrap;word-break:break-word;overflow-x:hidden;max-width:100%;
  }
  .payload .k{color:var(--lilac);}
  .payload .redact{background:rgba(255,94,78,.18);color:var(--coral);border-radius:3px;padding:0 .3em;text-decoration:line-through;}
  .payload .safe{background:rgba(74,222,128,.14);color:#9be2b0;border-radius:3px;padding:0 .3em;}
  .chip-mcp{border-bottom-left-radius:0;border-bottom-right-radius:0;}
  .mcp-logos{
    display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
    margin-top:calc(-.75rem - 1px);padding:.65rem .9rem;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(226,215,255,.15);border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
  }
  .mcp-logo{
    width:1.15rem;height:1.15rem;flex:none;
    display:flex;align-items:center;justify-content:center;
    color:var(--lavender);opacity:.85;transition:opacity .15s ease,color .15s ease;
  }
  .mcp-logo:hover{opacity:1;color:#fff;}
  .mcp-logo svg{width:100%;height:100%;display:block;}
  .gateway-actions{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap;}
  .gaction{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.05em;color:var(--lavender);
    border:1px solid rgba(198,176,255,.3);border-radius:100px;padding:.3rem .7rem;}
  @media (max-width:991px){
    .flow{grid-template-columns:1fr;gap:1.25rem;}
    .pipe{width:2px;height:2rem;margin:0 auto;
      background:repeating-linear-gradient(180deg,rgba(198,176,255,.55) 0 6px,transparent 6px 12px);}
    .pipe::after{right:auto;top:auto;bottom:-1px;left:50%;transform:translateX(-50%);
      border-top:6px solid rgba(198,176,255,.8);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:none;}
    .visual{padding:2rem 1.5rem;}
  }

  /* ── Social proof ────────────────────── */
  .proof{background:#fff;border-top:1px solid var(--grey-light);padding:2.75rem 0 3rem;}
  .proof-inner{display:flex;flex-direction:column;gap:1.6rem;align-items:center;}
  .proof-label{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-mid);}
  .proof-logos{display:flex;gap:3rem;flex-wrap:wrap;justify-content:center;align-items:center;}
  .proof-logos span{
    font-family:var(--font-heading);font-weight:500;font-size:1.25rem;color:var(--grey-mid);
    opacity:.85;letter-spacing:.01em;
  }
  .proof-badges{display:flex;gap:2rem;align-items:center;color:var(--grey-dark);font-size:.8125rem;font-weight:500;}
  .proof-badges .sep{width:1px;height:1.1rem;background:var(--grey-light);}
  .stars{color:var(--coral);letter-spacing:.1em;}

  /* ── Section scaffolding ─────────────── */
  .section{padding:6rem 0;}
  .section-head{max-width:42rem;margin:0 auto 3.5rem;text-align:center;}
  .section-head.left{margin-left:0;text-align:left;}
  .sec-eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--purple);margin-bottom:1rem;
  }
  .sec-eyebrow::before{content:"";width:1.5rem;height:1px;background:var(--lilac);}
  h2.sec-title{
    font-family:var(--font-heading);font-weight:500;
    font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.12;letter-spacing:-.015em;color:var(--black);
  }
  .sec-lead{font-size:1.1875rem;line-height:1.6;color:var(--grey-dark);margin-top:1.25rem;}
  .sec-lead strong{color:var(--black);font-weight:600;}

  /* ── Platform / feature cards ────────── */
  .platform{background:var(--cream-light);}
  .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
  .feature-card{
    background:#fff;border:1px solid var(--grey-light);border-radius:16px;
    padding:2rem 1.75rem;display:flex;flex-direction:column;gap:1rem;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
  }
  .feature-card:hover{border-color:var(--lavender);box-shadow:0 18px 50px -30px rgba(85,29,255,.35);transform:translateY(-3px);}
  .feature-ico{
    width:2.75rem;height:2.75rem;border-radius:12px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--purple-tint);color:var(--purple);
  }
  .feature-ico svg{width:1.4rem;height:1.4rem;display:block;}
  .feature-card h3{font-family:var(--font-heading);font-weight:500;font-size:1.3rem;line-height:1.25;color:var(--black);}
  .feature-card p{font-size:.9875rem;line-height:1.6;color:var(--grey-dark);}

  /* ── Shadow AI problem band ──────────── */
  .shadow-band{background:#fff;border-top:1px solid var(--grey-light);border-bottom:1px solid var(--grey-light);}
  .shadow-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:4rem;align-items:center;}
  .shadow-copy .govern{
    display:inline-block;margin-top:1.5rem;font-family:var(--font-heading);font-weight:500;
    font-size:1.15rem;color:var(--purple);
  }
  .risk-list{display:flex;flex-direction:column;gap:.9rem;}
  .risk-item{
    display:flex;gap:.9rem;align-items:flex-start;
    background:var(--cream-light);border:1px solid var(--grey-light);border-radius:12px;padding:1.1rem 1.25rem;
  }
  .risk-item .risk-ico{
    width:1.75rem;height:1.75rem;flex:none;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,94,78,.12);color:var(--coral);
  }
  .risk-item .risk-ico svg{width:1rem;height:1rem;}
  .risk-item h4{font-family:var(--font-body);font-weight:600;font-size:.975rem;color:var(--black);margin-bottom:.2rem;}
  .risk-item p{font-size:.875rem;line-height:1.5;color:var(--grey-dark);}

  /* ── See / Control / Prove (dark) ────── */
  .pillars{
    background:linear-gradient(160deg,var(--midnight) 0%,#241a38 60%,var(--deep-purple) 135%);
    color:#e9e6f2;position:relative;overflow:hidden;
  }
  .pillars .sec-eyebrow{color:var(--lilac);}
  .pillars .sec-eyebrow::before{background:rgba(198,176,255,.5);}
  .pillars h2.sec-title{color:#fff;}
  .pillars .sec-lead{color:var(--lavender);}
  .pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
  .pillar{
    background:rgba(255,255,255,.04);border:1px solid rgba(198,176,255,.18);
    border-radius:16px;padding:2rem 1.75rem;
  }
  .pillar-step{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac);margin-bottom:.9rem;}
  .pillar h3{font-family:var(--font-heading);font-weight:500;font-size:1.5rem;color:#fff;margin-bottom:.75rem;}
  .pillar p{font-size:.9375rem;line-height:1.65;color:#b9b3c9;}
  .pillar h3 .accent-dot{color:#4ade80;}

  /* ── Integrations ────────────────────── */
  .integrations{background:var(--cream-light);}
  .integ-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:.5rem;}
  .integ-cell{
    display:flex;align-items:center;gap:.6rem;
    background:#fff;border:1px solid var(--grey-light);border-radius:12px;
    padding:1rem 1.1rem;font-size:.9375rem;font-weight:500;color:var(--grey-dark);
    transition:border-color .2s ease,color .2s ease;
  }
  .integ-cell:hover{border-color:var(--lavender);color:var(--black);}
  .integ-cell svg{width:1.3rem;height:1.3rem;flex:none;color:var(--purple);}
  .integ-note{
    text-align:center;margin-top:2rem;font-size:.875rem;color:var(--grey-mid);
  }
  .integ-note a{color:var(--purple);font-weight:600;text-decoration:none;}
  .integ-note a:hover{text-decoration:underline;}

  /* ── Final CTA band ──────────────────── */
  .cta-band{
    background:linear-gradient(150deg,var(--deep-purple) 0%,var(--mid-purple) 55%,var(--midnight) 130%);
    color:#fff;text-align:center;position:relative;overflow:hidden;
  }
  .cta-band .cta-glow{
    position:absolute;inset:-30% 0 auto 0;height:30rem;pointer-events:none;
    background:radial-gradient(50% 60% at 50% 0%,rgba(198,176,255,.28) 0%,transparent 70%);
  }
  .cta-band .container{position:relative;}
  .cta-band h2{
    font-family:var(--font-heading);font-weight:500;
    font-size:clamp(2rem,4vw,3.1rem);line-height:1.12;letter-spacing:-.015em;
    max-width:36rem;margin:0 auto 1.25rem;
  }
  .cta-band p{font-size:1.1875rem;line-height:1.6;color:var(--lavender);max-width:40rem;margin:0 auto 2.25rem;}
  .cta-band .hero-ctas{margin-bottom:0;}
  .cta-band .btn-secondary{color:#fff;border-color:rgba(255,255,255,.5);}
  .cta-band .btn-secondary:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08);}

  @media (max-width:991px){
    .feature-grid,.pillar-grid{grid-template-columns:1fr;}
    .shadow-grid{grid-template-columns:1fr;gap:2.5rem;}
    .integ-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:767px){
    .section{padding:4rem 0;}
    .section-head{margin-bottom:2.5rem;}
    .sec-lead{font-size:1.0625rem;}
    .integ-grid{grid-template-columns:repeat(2,1fr);}
    .cta-band .hero-ctas .btn{width:100%;max-width:22rem;}
  }



  /* ── Platform map (capability tiles inside .visual) ── */
  .cap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;}
  .cap{
    display:block;background:rgba(255,255,255,.04);
    border:1px solid rgba(198,176,255,.18);border-radius:12px;
    padding:1.1rem 1rem;text-decoration:none;
    transition:border-color .2s ease,background .2s ease;
  }
  .cap:hover{border-color:rgba(198,176,255,.5);background:rgba(255,255,255,.07);}
  .cap-k{display:block;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac);margin-bottom:.5rem;}
  .cap-n{display:block;font-family:var(--font-heading);font-weight:500;font-size:1.05rem;color:#fff;margin-bottom:.35rem;}
  .cap-d{display:block;font-size:.8125rem;line-height:1.45;color:#b9b3c9;}

  /* ── Statement band ──────────────────── */
  .truth-band{background:#fff;border-top:1px solid var(--grey-light);border-bottom:1px solid var(--grey-light);padding:4.5rem 0;text-align:center;}
  .truth-band blockquote{
    font-family:var(--font-heading);font-weight:500;
    font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;letter-spacing:-.01em;
    color:var(--black);max-width:44rem;margin:0 auto 1rem;
  }
  .truth-band blockquote .accent{color:var(--purple);}
  .truth-band p{font-size:1.0625rem;line-height:1.6;color:var(--grey-dark);max-width:40rem;margin:0 auto;}

  /* ── Module rows (platform deep dive) ── */
  .mod-row{
    display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
    padding:4rem 0;border-top:1px solid var(--grey-light);
    scroll-margin-top:5.5rem;
  }
  .mod-row:first-of-type{border-top:none;padding-top:.5rem;}
  .mod-row.flip .mod-media{order:-1;}
  .mod-kicker{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:1rem;}
  .mod-copy h3{
    font-family:var(--font-heading);font-weight:500;
    font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.18;letter-spacing:-.01em;
    color:var(--black);margin-bottom:1rem;
  }
  .mod-copy > p{font-size:1.0625rem;line-height:1.65;color:var(--grey-dark);margin-bottom:1.4rem;}
  .mod-list{list-style:none;display:flex;flex-direction:column;gap:.65rem;}
  .mod-list li{position:relative;padding-left:1.6rem;font-size:.9375rem;line-height:1.5;color:var(--grey-dark);}
  .mod-list li::before{
    content:"";position:absolute;left:0;top:.28rem;width:.85rem;height:.85rem;
    border-radius:50%;background:var(--purple-tint);border:1px solid var(--lavender);
  }
  .mod-list li::after{
    content:"";position:absolute;left:.26rem;top:.52rem;width:.36rem;height:.2rem;
    border-left:1.5px solid var(--purple);border-bottom:1.5px solid var(--purple);
    transform:rotate(-45deg);
  }
  .mod-media{
    background:linear-gradient(160deg,var(--midnight) 0%,#241a38 60%,var(--deep-purple) 140%);
    border-radius:16px;padding:1.6rem 1.5rem;
    box-shadow:0 24px 60px -30px rgba(24,23,24,.45);
  }
  .mini-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;}
  .mini-title{font-family:var(--font-mono);font-size:.75rem;color:var(--lilac);letter-spacing:.06em;}
  .chip-stack{display:flex;flex-direction:column;gap:.6rem;}
  .mini-foot{margin-top:1rem;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.05em;color:var(--grey-mid);}
  .log{
    background:rgba(24,23,24,.65);border:1px solid rgba(226,215,255,.12);
    border-radius:var(--radius);padding:.85rem 1rem;
    font-family:var(--font-mono);font-size:.72rem;line-height:1.9;color:#b9b3c9;
    white-space:pre-wrap;word-break:break-word;overflow-x:hidden;max-width:100%;
  }
  .lg-allow{color:#9be2b0;}
  .lg-redact{color:var(--lilac);}
  .lg-hold{color:var(--orange);}
  .lg-block{color:var(--coral);}

  /* ── Deployment steps ────────────────── */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
  .step{background:#fff;border:1px solid var(--grey-light);border-radius:16px;padding:2rem 1.75rem;}
  .step-num{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:.9rem;}
  .step h3{font-family:var(--font-heading);font-weight:500;font-size:1.3rem;line-height:1.25;color:var(--black);margin-bottom:.6rem;}
  .step p{font-size:.9375rem;line-height:1.6;color:var(--grey-dark);}

  /* ── FAQ accordion ───────────────────── */
  .faq-band{background:#fff;border-top:1px solid var(--grey-light);}
  .faq{max-width:46rem;margin:0 auto;}
  .faq details{border-bottom:1px solid var(--grey-light);}
  .faq summary{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.35rem 0;cursor:pointer;list-style:none;
    font-family:var(--font-heading);font-weight:500;font-size:1.125rem;color:var(--black);
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:"+";font-family:var(--font-body);font-weight:400;font-size:1.5rem;line-height:1;
    color:var(--purple);flex:none;transition:transform .15s ease;
  }
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq details p{padding:0 0 1.5rem;font-size:.975rem;line-height:1.65;color:var(--grey-dark);max-width:42rem;}

  @media (max-width:991px){
    .cap-grid{grid-template-columns:repeat(2,1fr);}
    .mod-row{grid-template-columns:1fr;gap:2rem;padding:3rem 0;}
    .mod-row.flip .mod-media{order:0;}
    .steps{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    .cap-grid{grid-template-columns:1fr;}
    .truth-band{padding:3.5rem 0;}
  }

  /* ── Book a demo: hero + form ────────── */
  .demo-hero{padding:3.5rem 0 5rem;position:relative;overflow:hidden;}
  .demo-hero .hero-glow{inset:auto 0 -22rem 0;}
  .demo-grid{
    display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:start;
    position:relative;
  }
  .demo-lead{padding-top:.5rem;}
  .demo-lead .eyebrow{margin-bottom:1.5rem;}
  .demo-lead h1{
    text-align:left;margin:0 0 1.25rem;max-width:none;
    font-size:clamp(2.25rem,3.9vw,3.4rem);
  }
  .demo-lead .subhero{text-align:left;margin:0 0 2rem;max-width:34rem;font-size:1.1875rem;}
  .demo-benefits{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-bottom:2.25rem;}
  .demo-benefits li{position:relative;padding-left:2rem;font-size:1rem;line-height:1.5;color:var(--grey-dark);}
  .demo-benefits li strong{color:var(--black);font-weight:600;}
  .demo-benefits li::before{
    content:"";position:absolute;left:0;top:.05rem;width:1.25rem;height:1.25rem;border-radius:50%;
    background:var(--purple-tint);border:1px solid var(--lavender);
  }
  .demo-benefits li::after{
    content:"";position:absolute;left:.4rem;top:.4rem;width:.42rem;height:.24rem;
    border-left:1.6px solid var(--purple);border-bottom:1.6px solid var(--purple);transform:rotate(-45deg);
  }
  .demo-trust{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--grey-light);padding-top:1.75rem;}
  .demo-trust .proof-label{color:var(--grey-mid);}
  .demo-trust-logos{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;}
  .demo-trust-logos span{font-family:var(--font-heading);font-weight:500;font-size:1.05rem;color:var(--grey-mid);opacity:.85;}
  .demo-badges{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;color:var(--grey-dark);}
  .demo-badges .sep{width:1px;height:1.1rem;background:var(--grey-light);}
  .demo-badges .stars{color:var(--coral);letter-spacing:.1em;}

  /* Form card */
  .demo-form-card{
    background:#fff;border:1px solid var(--grey-light);border-radius:18px;
    padding:2.25rem 2rem;position:sticky;top:5.5rem;
    box-shadow:0 30px 70px -40px rgba(24,23,24,.4),0 2px 6px rgba(24,23,24,.04);
  }
  .demo-form-card h2{
    font-family:var(--font-heading);font-weight:500;font-size:1.5rem;line-height:1.2;
    color:var(--black);margin-bottom:.4rem;
  }
  .demo-form-card .form-sub{font-size:.9375rem;line-height:1.5;color:var(--grey-dark);margin-bottom:1.6rem;}
  .demo-form{display:flex;flex-direction:column;gap:1rem;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
  .field{display:flex;flex-direction:column;gap:.4rem;}
  .field label{font-size:.8125rem;font-weight:600;color:var(--black);}
  .field label .req{color:var(--coral);}
  .field input,.field select{
    font-family:var(--font-body);font-size:.9375rem;color:var(--black);
    padding:.75rem .85rem;border:1.5px solid var(--grey-light);border-radius:var(--radius);
    background:var(--cream-light);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
    width:100%;
  }
  .field input::placeholder{color:var(--grey-mid);}
  .field input:focus,.field select:focus{
    outline:none;border-color:var(--purple);background:#fff;
    box-shadow:0 0 0 3px rgba(97,74,179,.12);
  }
  .demo-form .btn{width:100%;margin-top:.35rem;}
  .form-fine{font-size:.75rem;line-height:1.5;color:var(--grey-mid);margin-top:.15rem;}
  .form-fine a{color:var(--purple);text-decoration:none;}
  .form-fine a:hover{text-decoration:underline;}
  .form-assure{
    display:flex;align-items:center;gap:.5rem;margin-top:1.25rem;padding-top:1.25rem;
    border-top:1px solid var(--grey-light);font-size:.8125rem;color:var(--grey-dark);
  }
  .form-assure svg{width:1rem;height:1rem;color:var(--purple);flex:none;}
  .hs-form-loading{font-size:.9375rem;color:var(--grey-mid);padding:1rem 0;}

  /* HubSpot embed theming (scoped to the demo form card).
     Also scoped to .form--hubspot: the same demo-request form (formId
     bd97123a-e739-49c3-b2cf-a92e269973b2) is embedded on dozens of pages via
     that older Webflow-export wrapper, which has no field-level styling of
     its own -- only .demo-form-card ever did. Extending the selectors here
     is a CSS-only fix that reaches every one of those pages without editing
     each one's markup; container/box styling (background, shadow, sticky
     position) stays on .demo-form-card only, since that is specific to the
     book-a-demo split layout and would be wrong glued onto an arbitrary
     surrounding card elsewhere. */
  .demo-form-card .hs-form,
  .demo-form-card form.hs-form,
  .form--hubspot .hs-form,
  .form--hubspot form.hs-form{display:flex;flex-direction:column;gap:1rem;}
  .demo-form-card .hs-form-field,
  .form--hubspot .hs-form-field{margin:0;}
  .demo-form-card .hs-form-field > label,
  .form--hubspot .hs-form-field > label{
    display:block;font-size:.8125rem;font-weight:600;color:var(--black);margin-bottom:.4rem;
  }
  .demo-form-card .hs-form-field > label .hs-form-required,
  .form--hubspot .hs-form-field > label .hs-form-required{color:var(--coral);margin-left:.15rem;}
  .demo-form-card .hs-field-desc,
  .form--hubspot .hs-field-desc{font-size:.75rem;color:var(--grey-mid);margin:.15rem 0 .35rem;}
  .demo-form-card .hs-input:not([type=checkbox]):not([type=radio]),
  .demo-form-card .hs-input select,
  .demo-form-card select.hs-input,
  .demo-form-card textarea.hs-input,
  .form--hubspot .hs-input:not([type=checkbox]):not([type=radio]),
  .form--hubspot .hs-input select,
  .form--hubspot select.hs-input,
  .form--hubspot textarea.hs-input{
    width:100%!important;box-sizing:border-box;
    font-family:var(--font-body);font-size:.9375rem;color:var(--black);
    padding:.75rem .85rem;border:1.5px solid var(--grey-light);border-radius:var(--radius);
    background:var(--cream-light);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
  }
  .demo-form-card select.hs-input,
  .form--hubspot select.hs-input{
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235c5c5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem;
  }
  .demo-form-card .hs-input::placeholder,
  .form--hubspot .hs-input::placeholder{color:var(--grey-mid);}
  .demo-form-card .hs-input:focus,
  .form--hubspot .hs-input:focus{
    outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(97,74,179,.12);
  }
  .demo-form-card .hs-input.invalid.error,.demo-form-card .hs-input.error,
  .form--hubspot .hs-input.invalid.error,.form--hubspot .hs-input.error{border-color:var(--coral);}
  .demo-form-card .hs-error-msgs,
  .form--hubspot .hs-error-msgs{list-style:none;margin:.35rem 0 0;padding:0;}
  .demo-form-card .hs-error-msg,.demo-form-card .hs-error-msgs label,
  .form--hubspot .hs-error-msg,.form--hubspot .hs-error-msgs label{color:var(--coral);font-size:.8125rem;}
  .demo-form-card .inputs-list,
  .form--hubspot .inputs-list{list-style:none;margin:0;padding:0;}
  .demo-form-card .hs-form-booleancheckbox-display,
  .demo-form-card .hs-form-checkbox-display,
  .form--hubspot .hs-form-booleancheckbox-display,
  .form--hubspot .hs-form-checkbox-display{display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;color:var(--grey-dark);line-height:1.5;}
  .demo-form-card .legal-consent-container,
  .form--hubspot .legal-consent-container{font-size:.75rem;line-height:1.5;color:var(--grey-mid);}
  .demo-form-card .legal-consent-container p,
  .form--hubspot .legal-consent-container p{margin-bottom:.5rem;}
  .demo-form-card .hs-submit,
  .form--hubspot .hs-submit{margin-top:.35rem;}
  .demo-form-card .hs-button,
  .demo-form-card input[type=submit].hs-button,
  .form--hubspot .hs-button,
  .form--hubspot input[type=submit].hs-button{
    display:inline-flex;align-items:center;justify-content:center;width:100%;
    font-family:var(--font-body);font-size:1rem;font-weight:600;
    padding:.875rem 1.75rem;border-radius:var(--radius);border:none;cursor:pointer;
    background:var(--orange);color:var(--black);
    transition:background .15s ease,color .15s ease;
  }
  .demo-form-card .hs-button:hover,
  .demo-form-card input[type=submit].hs-button:hover,
  .form--hubspot .hs-button:hover,
  .form--hubspot input[type=submit].hs-button:hover{background:var(--orange-hover);color:#fff;}
  /* HubSpot two-column rows (e.g. first/last name) fall back to single column for reliability */
  .demo-form-card .hs-form fieldset,
  .form--hubspot .hs-form fieldset{max-width:none!important;}
  .demo-form-card .hs-form fieldset .hs-form-field,
  .form--hubspot .hs-form fieldset .hs-form-field{width:100%!important;float:none!important;padding:0!important;}

  /* What you'll see steps for demo reuse .feature-grid; add numbered timeline */
  .demo-expect{background:#fff;border-top:1px solid var(--grey-light);}
  .demo-cta-band .container{position:relative;}

  @media (max-width:991px){
    .demo-grid{grid-template-columns:1fr;gap:2.5rem;}
    .demo-form-card{position:static;order:2;}
    .demo-lead{order:1;}
    .demo-lead h1{font-size:clamp(2rem,7vw,2.75rem);}
    .demo-lead .subhero,.demo-lead h1{max-width:none;}
  }
  @media (max-width:600px){
    .demo-hero{padding:2.5rem 0 3.5rem;}
    .demo-form-card{padding:1.75rem 1.35rem;}
    .form-row{grid-template-columns:1fr;}
  }