:root{
    --ink:#13212B;
    --pipe:#0E3B5C;
    --fog:#EEF3F6;
    --water:#1E8FA8;
    --leak:#F2C230;
    --white:#FFFFFF;
    --muted:#4A5C68;
    --line:#C9D6DE;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--fog);color:var(--ink);font:400 18px/1.6 "Public Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  :focus-visible{outline:3px solid var(--leak);outline-offset:3px;border-radius:2px}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:"Archivo",sans-serif;font-stretch:112%;line-height:1.08;letter-spacing:-.01em}
  h1{font-weight:800;font-stretch:125%;font-size:clamp(2.3rem,5vw,3.9rem);max-width:15ch}
  h2{font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:20ch}
  h3{font-weight:600;font-size:1.2rem}
  p{max-width:62ch}

  /* header */
  header{padding:22px 0}
  header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
  .logo{font:800 1.15rem "Archivo",sans-serif;font-stretch:125%;text-decoration:none;color:var(--pipe);display:flex;align-items:center;gap:10px}
  .logo svg{flex:none}
  .btn{display:inline-block;background:var(--pipe);color:var(--white);text-decoration:none;font-weight:600;padding:14px 22px;border-radius:6px;border:2px solid var(--pipe)}
  .btn:hover{background:var(--ink);border-color:var(--ink)}
  .btn.small{padding:9px 16px;font-size:.95rem}
  .btn.light{background:var(--leak);color:var(--ink);border-color:var(--leak)}
  .btn.light:hover{background:var(--white);border-color:var(--white)}

  /* hero */
  .hero{padding:48px 0 72px}
  .hero .wrap{display:grid;grid-template-columns:1fr;gap:40px}
  .hero p.lead{font-size:1.25rem;color:var(--muted);margin:22px 0 30px;max-width:46ch}
  .hero .note{font-size:.95rem;color:var(--muted);margin-top:14px}
  .pipe-figure{background:var(--white);border:2px solid var(--line);border-radius:10px;padding:24px 18px 16px}
  .pipe-figure figcaption{font-size:.92rem;color:var(--muted);margin-top:10px;padding:0 6px}
  .drop{animation:drip 2.6s ease-in infinite}
  .d2{animation-delay:.6s}.d3{animation-delay:1.2s}.d4{animation-delay:1.8s}
  @keyframes drip{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(46px);opacity:0}}
  @media (prefers-reduced-motion:reduce){.drop{animation:none;opacity:1}}

  /* leaks */
  section{padding:76px 0}
  .leaks{background:var(--white);border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
  .leaks h2{margin-bottom:12px}
  .leaks > .wrap > p{color:var(--muted);margin-bottom:40px}
  .leak-list{list-style:none;display:grid;gap:0;border-top:2px solid var(--ink)}
  .leak-list li{display:grid;grid-template-columns:3.2rem 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
  .leak-list .n{font:800 1.5rem "Archivo",sans-serif;color:var(--water)}
  .leak-list h3{margin-bottom:4px}
  .leak-list p{color:var(--muted);font-size:1rem}

  /* steps */
  .steps ol{list-style:none;display:grid;gap:28px;margin-top:36px;counter-reset:s}
  .steps li{counter-increment:s;padding-left:64px;position:relative}
  .steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:44px;height:44px;border-radius:50%;background:var(--leak);font:800 1.2rem/44px "Archivo",sans-serif;text-align:center;color:var(--ink)}
  .steps p{color:var(--muted);font-size:1rem;margin-top:4px}

  /* pricing */
  .pricing{background:var(--pipe);color:var(--white)}
  .pricing > .wrap > p{color:#C6D6E2;margin-top:12px}
  .plans{margin-top:40px;border-top:2px solid var(--leak)}
  .plan{display:grid;grid-template-columns:1fr;gap:6px 32px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.18)}
  .plan h3{font-size:1.35rem}
  .plan .price{font:800 1.5rem "Archivo",sans-serif;font-stretch:112%;color:var(--leak)}
  .plan .price span{font:500 1rem "Public Sans",sans-serif;color:#C6D6E2}
  .plan p{color:#D6E2EA;font-size:1rem}

  /* about */
  .about .wrap{display:grid;gap:36px}
  .about p{margin-top:16px}
  .proof{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--ink);border-radius:8px;background:var(--white);align-self:start}
  .proof div{padding:22px}
  .proof div + div{border-left:2px solid var(--ink)}
  .proof strong{display:block;font:800 2.2rem "Archivo",sans-serif;font-stretch:112%;color:var(--pipe)}
  .proof span{font-size:.95rem;color:var(--muted)}

  /* final */
  .final{text-align:left}
  .final .box{background:var(--leak);border-radius:12px;padding:44px 32px}
  .final p{margin:14px 0 26px}

  footer{padding:36px 0 48px;font-size:.92rem;color:var(--muted)}
  footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

  @media (min-width:880px){
    .hero .wrap{grid-template-columns:1.05fr 1fr;align-items:center}
    .leak-list{grid-template-columns:1fr 1fr;column-gap:56px}
    .leak-list li:nth-child(5){grid-column:1 / -1}
    .steps ol{grid-template-columns:repeat(3,1fr)}
    .steps li{padding-left:0;padding-top:64px}
    .plan{grid-template-columns:1.1fr .7fr 1.6fr;align-items:baseline}
    .about .wrap{grid-template-columns:1.3fr 1fr;align-items:center}
  }
  @media (max-width:420px){
    .proof{grid-template-columns:1fr}
    .proof div + div{border-left:0;border-top:2px solid var(--ink)}
    header .btn.small{display:none}
  }

  /* shared additions */
  nav.top{display:flex;align-items:center;gap:22px}
  nav.top a.link{text-decoration:none;font-weight:500;font-size:.98rem;color:var(--ink)}
  nav.top a.link:hover{color:var(--water)}
  .logo-mark{flex:none;display:block}
  .page{padding:40px 0 80px}
  .page h1{font-size:clamp(2rem,4vw,3rem);max-width:none;margin-bottom:10px}
  .page .updated{color:var(--muted);font-size:.95rem;margin-bottom:32px}
  .page h2{font-size:1.35rem;margin:34px 0 10px;max-width:none}
  .page p,.page li{margin-bottom:10px;max-width:70ch}
  .page ul{padding-left:22px}
  .contact-grid{display:grid;gap:40px;margin-top:26px}
  form.contact{background:var(--white);border:2px solid var(--line);border-radius:10px;padding:26px;display:grid;gap:16px}
  form.contact label{font-weight:600;font-size:.95rem;display:grid;gap:6px}
  form.contact input,form.contact textarea{font:inherit;font-size:1rem;padding:12px 14px;border:2px solid var(--line);border-radius:6px;background:var(--fog);color:var(--ink)}
  form.contact input:focus,form.contact textarea:focus{border-color:var(--water);outline:none;background:var(--white)}
  form.contact textarea{min-height:130px;resize:vertical}
  form.contact .hp{position:absolute;left:-9999px}
  form.contact button{font:inherit;cursor:pointer;justify-self:start}
  .small-note{font-size:.9rem;color:var(--muted)}
  .msg{padding:16px 18px;border-radius:8px;margin-bottom:20px;font-weight:500}
  .msg.ok{background:#E3F4EC;border:2px solid #3E9B6E}
  .msg.err{background:#FBEAEA;border:2px solid #B94A48}
  .person{display:flex;gap:18px;align-items:center;margin-top:22px}
  .person img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--ink)}
  footer nav{display:flex;gap:18px;flex-wrap:wrap}
  footer a{text-decoration:none}
  footer a:hover{text-decoration:underline}
  @media (min-width:880px){.contact-grid{grid-template-columns:1fr 1.2fr}}
  @media (max-width:640px){nav.top a.link{display:none}}

  .faqs h3{margin-top:24px}
  .faqs .page p{margin-top:4px}