:root{
    --purple: #5B3B82;
    --purple-deep: #402A5C;
    --purple-tint: #F2EBFA;
    --ivory: #FBF7F0;
    --aqua: #EEF7F5;
     --ink: #213A52;
  /* deep blue-slate text */
  --ink-soft: rgba(33, 58, 82, .68);
  --indigo: #3A3480;
  /* brand accent retained */
  --violet: #6C63C7;
  --violet-soft: #EDEBFA;
  --lav: #C9C3EE;
  --bronze: #A18355;
  --paper: #FCFBF9;
  --mist: #F3F6FA;
  --sky: #EAF4FB;
  /* replaces deep/dark section bg */
  --sky-2: #D9EBF6;
  --sky-3: #C4DFF0;
  --ocean: #2E6E93;
 
  --porcelain: #F7F4EE;
  --porcelain-2: #F2EEE6;
  --mist: #E8F1F8;
  --mist-2: #D9E8F4;
  --deep: #1B1740;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  a{color:inherit;}

  /* ================= BANNER ================= */
  /* ================= BANNER ================= */




  /* ================= LAYOUT ================= */
  .layout{
    max-width: 1180px; margin:0 auto;
    display:grid; grid-template-columns: 270px 1fr; gap: 56px;
    padding: 56px 24px 140px;
    align-items:start;
  }

  /* ---- left nav (desktop) ---- */
  .toc{
    position: sticky; top: 32px;
    align-self:start;
    padding: 8px 4px 8px 0;
  }
  .toc-group{ margin-bottom: 26px; }
  .toc-num{
    font-family:var(--serif); font-size: 12px; font-weight:600;
    color: var(--purple); letter-spacing:0.08em;
  }
  .toc-title{
    display:block; font-size: 14.5px; font-weight:700; color:var(--ink);
    margin: 2px 0 10px; text-decoration:none;
  }
  .toc-title:hover{ color: var(--purple); }
  .toc-sub{ list-style:none; margin:0; padding:0 0 0 2px; border-left: 1px solid var(--divider); }
  .toc-sub li{ margin:0; }
  .toc-sub a{
    display:block; font-size: 13.5px; color: var(--muted);
    text-decoration:none; padding: 6px 0 6px 16px;
    border-left: 2px solid transparent; margin-left:-1px;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .toc-sub a:hover{ color: var(--purple-deep); }
  .toc-sub a.active{
    color: var(--purple-deep); font-weight:600;
    border-left-color: var(--purple);
  }

  /* ---- mobile toc ---- */
  .toc-mobile{ display:none; }
  .toc-mobile-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:#fff; border:1px solid var(--divider); border-radius: 12px;
    padding: 14px 18px; font-weight:700; font-size:14.5px; color: var(--purple-deep);
    cursor:pointer;
  }
  .toc-mobile-toggle svg{ transition: transform 0.2s ease; }
  .toc-mobile-toggle.open svg{ transform: rotate(180deg); }
  .toc-mobile-panel{
    display:none; background:#fff; border:1px solid var(--divider); border-top:none;
    border-radius: 0 0 12px 12px; padding: 6px 10px 14px;
  }
  .toc-mobile-panel.open{ display:block; }
  .toc-mobile-panel .toc-num{ display:block; margin-top:12px; }
  .toc-mobile-panel a{
    display:block; font-size:14px; color:var(--muted); text-decoration:none;
    padding: 7px 4px 7px 10px;
  }
  .toc-mobile-panel a.top{ font-weight:700; color:var(--ink); padding-left:0; }

  /* ================= CONTENT ================= */
  .content{ min-width:0; }
  .content > section{ scroll-margin-top: 28px; }

  .section-head{
    display:flex; align-items:baseline; gap:12px; margin: 0 0 6px;
  }
  .section-head .num{
    font-family:var(--serif); font-size:15px; font-weight:600; color:#fff;
    background: var(--indigo); width:30px; height:30px; border-radius:9px;
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  h2.h-main{
    font-family:var(--serif); font-weight:500; font-size: 27px; margin:0; color:var(--ink);
  }
  .section-lede{ font-size: 15px; margin: 12px 0 30px 42px; max-width:600px;color: #3C3242;  }

  h3.h-sub{
     font-weight:500; font-size: 19px;
    color: var(--ink); margin: 0 0 10px 42px;
  }
  .clause-card{
    background:#fff; border:1px solid var(--divider); border-radius: var(--radius);
    padding: 24px 28px; margin: 0 0 20px 42px;
  }
  .clause-card p{ margin:0 0 12px; font-size:15.5px; color:#3C3242; }
  .clause-card p:last-child{ margin-bottom:0; }

  .clause-card.icon-card{ display:flex; gap:16px; align-items:flex-start; }
  .clause-icon{
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
     color: var(--indigo); font-size:18px; font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }
  .clause-icon.aqua-icon{ background: var( --purple-tint); color:var(--indigo); }
  .clause-body h4{
    font-weight:500; font-size:16.5px; margin:0 0 8px; color:var(--ink);
  }
  .clause-body p{ margin:0; font-size:15.5px; color:#3C3242; }

  .clause-card.pets{ background: var(--purple-tint); }

  hr.rule{ border:none; border-top:1px solid var(--divider); }

  a.link{
    color: var(--purple-deep); font-weight:600; text-decoration:underline;
    text-decoration-color: var(--divider); text-underline-offset:3px;
  }
  a.link:hover{ text-decoration-color: var(--purple); }

  /* .ph-chip, .num-chip{
    display:inline-flex; align-items:baseline; background: var(--purple); color:#fff;
    font-weight:700; padding:2px 10px; border-radius:999px; font-size:14.5px;
    font-family:var(--serif);
  } */
  /* .placeholder{
    font-family:'Inter', monospace; font-weight:600; font-size:14px;
    background:#FFF7E6; color:#8A6A16; border:1px dashed #E3C778;
    padding: 1px 7px; border-radius:6px;
  } */

  .final-bar{
    margin: 8px 0 0 42px;
text-align:left;
  }
  .final-bar p{
    margin:0; font-size: 17px; font-weight:600; color: var(--purple-deep);
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width: 980px){
    .layout{ grid-template-columns: 1fr; gap: 22px; padding-top: 32px; }
    .toc{ display:none; }
    .toc-mobile{ display:block; }
    .section-lede, h3.h-sub, .clause-card, hr.rule, .final-bar{ margin-left:0; }
  }
  @media (max-width: 560px){
    .banner{ padding: 64px 18px 0px; }
    .clause-card{ padding: 20px 20px; }
    .clause-card.icon-card{ flex-direction:column; }
    .banner.contact-hydron .banner-inner {
    position: relative;
    z-index: 2;
    padding: 4rem 0 !important;
}
  }

/* ===== Banner — match "Book a Free Demo" (water canvas hero) ===== */
.banner.contact-hydron{
  min-height: 52svh;
  display: flex;
  align-items: center;
}
.banner.contact-hydron .banner-inner{
  position: relative;
  z-index: 2;
  padding: 9rem 0;
}
.banner.contact-hydron h1{
  font-family: var(--serif);
  color: var(--ink);
font-size: clamp(32px, 5vw, 70px);
  margin: 0;
  letter-spacing: -0.01em;
}
.banner.contact-hydron h1 em{
  font-style: italic;
  color: var(--ocean);
}
.banner.contact-hydron .eyebrow{
  color: var(--ocean);
}