*{margin:0;padding:0;box-sizing:border-box}
  :root{
    --green:#2fd47a; --green-600:#17b866; --green-700:#0f9d55; --green-ink:#0a6f3c;
    --teal:#085e54; --ink:#0c241f; --ink-2:#123a32;
    --muted:#57726a; --muted-2:#8696a0;
    --bg:#ffffff; --tint:#eefaf3; --bubble:#d9fdd3; --line:#e3ede8;
    --blue:#027eb5; --sonar:#2f9bff; --sonar-ink:#1467c0;
    --hero-1:#0a2b25; --hero-2:#123a32;
    --shadow:0 18px 48px rgba(12,36,31,.10);
    --radius:16px;
  }
  html{scroll-behavior:smooth}
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:'Montserrat','Inter',sans-serif;color:var(--ink);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  .skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--ink);font-weight:700;padding:10px 16px;border-radius:8px}
  .skip-link:focus{top:12px}
  main:focus{outline:none}
  #more-guides a{display:inline-block;padding:4px 0}
  .guide .toc{background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-top:28px}
  .guide .toc ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px}
  .guide .toc a{display:inline-block;padding:4px 0}
  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:13px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;font-family:inherit}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--green);color:#06231a;box-shadow:0 10px 24px rgba(47,212,122,.35)}
  .btn-primary:hover{background:var(--green-600)}
  .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}
  .btn-ghost:hover{background:rgba(255,255,255,.12)}
  .btn-outline{background:#fff;color:var(--ink-2);border-color:var(--line)}
  .btn-outline:hover{border-color:var(--green);color:var(--green-700)}
  /* Double-ring focus so one layer always contrasts: a dark outline reads on the light
     sections, the white halo reads on the dark hero/CTA/footer and on the green buttons. */
  a:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 4px #fff}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:18px;height:68px}
  .brand{display:flex;align-items:center;gap:11px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
  .brand img{width:34px;height:34px}
  .nav-links{display:flex;gap:26px;margin-left:12px}
  .nav-links a{font-size:14.5px;font-weight:500;color:var(--muted)}
  .nav-links a:hover{color:var(--ink)}
  .nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
  .nav .btn{padding:9px 18px;font-size:14px}
  .link-login{font-weight:600;color:var(--ink-2);padding:9px 6px}

  /* ---------- Hero ---------- */
  .hero{position:relative;overflow:hidden;background:radial-gradient(78% 86% at 82% 44%, rgba(47,155,255,.30), transparent 62%), radial-gradient(120% 120% at 80% -10%, #155a55 0%, var(--hero-2) 44%, var(--hero-1) 100%);color:#eafaf2}
  .hero .wrap{position:relative;z-index:2;padding:84px 24px 92px;display:grid;grid-template-columns:1fr 1.02fr;gap:52px;align-items:center}
  .hero .eyebrow{color:#9cd2ff}
  .hero .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--sonar);box-shadow:0 0 0 4px rgba(47,155,255,.28)}
  .hero h1{color:#fff;font-size:clamp(34px,5.4vw,58px);font-weight:800;margin:16px 0 18px}
  .hero h1 .hl{color:var(--green)}
  .hero p.lead{font-size:clamp(16px,1.9vw,20px);color:#b9e6d3;max-width:36ch;margin-bottom:28px}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
  .hero-note{margin-top:18px;font-size:13px;color:#8fbcab;display:flex;align-items:center;gap:8px}
  .hero-note svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2}

  /* radar / sonar rings behind hero */
  .rings{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  /* the sonar rings + ping are the clearly-blue signature (green stays the WhatsApp/action colour).
     The ping lives inside .radar and is centred on it, so it always sits at the exact centre
     of the concentric circles (which are centred in the square viewBox). */
  .radar{position:absolute;left:84%;top:16%;transform:translate(-50%,-50%);width:min(560px,46vw);aspect-ratio:1;display:block}
  .radar svg{width:100%;height:100%;display:block;opacity:.62}
  .ring-c{fill:none;stroke:var(--sonar);stroke-opacity:.28}
  .pulse{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--sonar);box-shadow:0 0 24px 4px rgba(47,155,255,.7)}
  .radar .pulse{left:50%;top:50%;transform:translate(-50%,-50%)}
  .pulse::before,.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--sonar);animation:ping 3.4s ease-out infinite}
  .pulse::after{animation-delay:1.7s}
  @keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(22);opacity:0}}

  /* hero visual: one clean, fully-visible, readable product screenshot in a browser frame.
     The screenshot is inset with its own padding + hairline so no control ever sits flush
     against the frame's hard edge. */
  .hero-visual{position:relative;z-index:2;width:100%;padding:4px 4px 8px 0}
  .shot{background:#fff;border-radius:14px;box-shadow:0 34px 70px rgba(0,0,0,.42);overflow:hidden;border:1px solid rgba(255,255,255,.10);padding:0 14px 15px}
  .shot img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
  .shot-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#eef1f4;border-bottom:1px solid #e0e5ea;margin:0 -14px 13px}
  .shot-bar i{width:11px;height:11px;border-radius:50%;background:#cfd6dc}
  .shot-bar i:nth-child(1){background:#ff5f57}.shot-bar i:nth-child(2){background:#febc2e}.shot-bar i:nth-child(3){background:#28c840}
  .shot-bar span{margin-left:8px;font-size:12px;color:#8a99a3;background:#fff;border:1px solid #e0e5ea;border-radius:6px;padding:3px 14px;flex:1;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-chip{position:absolute;right:-8px;bottom:22px;z-index:4;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0c241f;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:999px;box-shadow:0 16px 32px rgba(0,0,0,.26)}
  .hero-chip .cdot{width:8px;height:8px;border-radius:50%;background:var(--sonar);box-shadow:0 0 0 4px rgba(47,155,255,.22)}

  /* ---------- logos / stat band ---------- */
  .band{background:var(--ink-2);color:#cdeede}
  .band .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;align-items:center;padding:20px 24px;font-size:14.5px;font-weight:500}
  .band b{color:#fff;font-family:'Montserrat',sans-serif}
  .band .sep{width:5px;height:5px;border-radius:50%;background:var(--sonar);opacity:.8}
  .band a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
  /* Hero: a WhatsApp chat answered by the AI Agent */
  .shot-chat .chat{background:#efeae2;border-radius:10px;padding:16px 14px 34px;display:flex;flex-direction:column;gap:8px}
  .chat .msg{max-width:84%;padding:8px 11px 5px;border-radius:9px;font-size:14.5px;line-height:1.42;color:#111b21;box-shadow:0 1px 1px rgba(0,0,0,.08)}
  .chat .msg.in{background:#fff;align-self:flex-start}
  .chat .msg.out{background:#d9fdd3;align-self:flex-end}
  .chat .msg small{display:block;text-align:right;font-size:11px;color:#667781;margin-top:2px}
  /* Running on Sonar today */
  .block-tight{padding-top:56px;padding-bottom:16px}
  .cust-cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .cust-mark{font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:#30998F;margin:6px 0 14px}
  .cust-cards .small{display:inline-block;margin-top:10px;font-weight:600;color:var(--green-ink)}
  .switch-strip{margin-top:12px}
  .offer-strip{margin-top:12px;border-color:var(--green-600,#17b866);background:#effbf4}

  /* ---------- Section shell ---------- */
  section.block{padding:84px 0}
  .sec-head{max-width:640px;margin:0 auto 46px;text-align:center}
  .sec-head .eyebrow{color:var(--sonar-ink)}
  .sec-head h2{font-size:clamp(27px,3.6vw,40px);font-weight:800;margin:12px 0 12px}
  .sec-head p{color:var(--muted);font-size:17px}

  /* features grid */
  .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:transform .18s,box-shadow .18s,border-color .18s}
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cde7da}
  .ico{width:46px;height:46px;border-radius:12px;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .ico svg{width:23px;height:23px;stroke:var(--green-700);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .card h3{font-size:18px;font-weight:700;margin-bottom:7px}
  .card p{font-size:14.5px;color:var(--muted)}

  /* how it works */
  .how{background:var(--tint)}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;counter-reset:step}
  .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 24px}
  .step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:-16px;left:24px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:#06231a;background:var(--green);width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(47,212,122,.35)}
  .step h3{font-size:17px;font-weight:700;margin:14px 0 6px}
  .step p{font-size:14px;color:var(--muted)}

  /* split / self-service */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .split .copy h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;margin-bottom:14px}
  .split .copy p{color:var(--muted);font-size:16.5px;margin-bottom:18px}
  .checks{list-style:none;display:grid;gap:12px}
  .checks li{display:flex;gap:11px;align-items:flex-start;font-weight:500;font-size:15.5px}
  .checks .ck{flex:none;width:24px;height:24px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-top:1px}
  .checks .ck svg{width:14px;height:14px;stroke:var(--green-700);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .popia-card{background:linear-gradient(160deg,#123a32,#0a2b25);color:#dcf6ea;border-radius:22px;padding:34px 32px;box-shadow:var(--shadow)}
  .popia-card .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#06231a;background:var(--green);padding:5px 11px;border-radius:999px;margin-bottom:16px}
  .popia-card h3{color:#fff;font-size:23px;font-weight:800;margin-bottom:10px}
  .popia-card p{color:#a9dcc8;font-size:15px;margin-bottom:18px}
  .popia-card ul{list-style:none;display:grid;gap:10px}
  .popia-card li{display:flex;gap:10px;align-items:center;font-size:14.5px;color:#dcf6ea}
  .popia-card li svg{flex:none;width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:2.2}

  /* CTA */
  .cta{position:relative;overflow:hidden;background:radial-gradient(120% 140% at 15% 0%, #17564a 0%, var(--hero-2) 55%, var(--hero-1) 100%);color:#fff;text-align:center;border-radius:26px;padding:64px 28px;margin:0 auto;box-shadow:var(--shadow)}
  .cta h2{color:#fff;font-size:clamp(26px,3.6vw,40px);font-weight:800;margin-bottom:14px}
  .cta p{color:#b9e6d3;font-size:17px;max-width:52ch;margin:0 auto 26px}
  .cta .hero-cta{justify-content:center}
  .cta .pulse{left:6%;top:82%;transform:translate(-50%,-50%)}

  /* footer */
  footer{background:var(--ink);color:#a9c4bb;padding:52px 0 34px;font-size:14px}
  .foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.08)}
  .foot-brand{display:flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:18px;color:#fff}
  .foot-brand img{width:30px;height:30px}
  .foot-brand + p{margin-top:12px;max-width:34ch;color:#89a89e}
  .foot-cols{display:flex;gap:56px;flex-wrap:wrap}
  .foot-cols h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#7fa093;margin-bottom:12px;font-weight:700}
  .foot-cols a{display:block;color:#c3d8d0;margin-bottom:9px;font-weight:500}
  .foot-cols a:hover{color:var(--green)}
  .foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:20px;color:#7fa093}
  .foot-bottom a{color:#7fa093}
  .foot-bottom a:hover{color:#c3d8d0}

  /* ---------- product showcase (alternating screenshot rows) ---------- */
  .showcase{display:grid;gap:64px}
  .show-row{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
  .show-row.rev{grid-template-columns:.85fr 1.15fr}
  .show-row.rev .show-media{order:2}
  .show-copy .eyebrow{color:var(--sonar-ink)}
  .show-copy h3{font-size:clamp(23px,2.8vw,31px);font-weight:800;margin:12px 0 12px}
  .show-copy p{color:var(--muted);font-size:16px;margin-bottom:16px}
  .show-copy .checks li{font-size:15px}
  .show-media{position:relative}
  .frame{background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;padding:0 14px 15px}
  .frame .shot-bar{background:#f2f5f7}
  .frame img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
  /* A portrait screen would tower over its copy and leave a blank column beside it: show the
     top of it and fade out, so every row is about as tall as its text. */
  .frame img.tall{max-height:440px;object-fit:cover;object-position:top;-webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent);mask-image:linear-gradient(to bottom,#000 76%,transparent)}
  .show-media.pad{background:linear-gradient(150deg,#e2edff,#dff1fb);border-radius:20px;padding:24px}
  .show-media.pad .frame{box-shadow:0 20px 44px rgba(12,36,31,.16)}

  /* ---------- pricing ---------- */
  .pricing{background:var(--bg);border-top:1px solid var(--line)}
  .trust-line{max-width:1040px;margin:0 auto 16px;font-size:14px;color:#4b5563;line-height:1.5}
  .rates-note{color:var(--muted);font-size:14px;margin:0}
  /* ---------- price calculator ---------- */
  .calc{max-width:980px;margin:44px auto 0;background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:28px 24px;scroll-margin-top:90px}
  .calc h3{font-size:24px;font-weight:800;text-align:center;margin-bottom:6px}
  .calc .sub{text-align:center;color:var(--muted);font-size:15px;margin:0 auto 20px;max-width:620px}
  .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .calc-in{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;align-items:end}
  .calc-in label:first-child{grid-column:1/-1}
  .calc-in label{display:grid;gap:5px;font-size:14px;font-weight:600;color:var(--ink-2)}
  .calc-in label small{font-weight:500;color:var(--muted)}
  .calc-in input,.calc-in select{font:inherit;font-weight:500;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
  .calc-out{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px;position:sticky;top:90px}
  .calc-out dl{display:grid;grid-template-columns:1fr auto;gap:9px 14px;font-size:14px;margin:0}
  .calc-out dt{color:var(--muted)}
  .calc-out dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
  .calc-out .sum{color:var(--ink);font-weight:700}
  .calc-out .tot{font-size:18px;font-weight:800;color:var(--ink);border-top:1px solid var(--line);padding-top:12px}
  .calc-out .fx{display:block;font-size:12px;font-weight:500;color:var(--muted)}
  .calc-out .btn{justify-content:center}
  .calc .rates-note{margin-top:16px;text-align:center;font-size:13px}
  @media (max-width:760px){ .calc{padding:22px 16px} .calc-grid,.calc-in{grid-template-columns:1fr} .calc-out{position:static} }

  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr;padding:52px 24px 76px;gap:46px}
    .hero-visual{max-width:560px;margin:0 auto;padding-bottom:8px}
    .split{grid-template-columns:1fr;gap:30px}
    .show-row,.show-row.rev{grid-template-columns:1fr;gap:26px}
    .show-row.rev .show-media{order:0}
    .nav-links{display:none}
  }
  @media (max-width:560px){
    section.block{padding:60px 0}
    .nav{height:60px;gap:10px}
    .brand{min-width:0;font-size:18px}
    .nav .btn{padding:8px 14px}
    .hero-chip{right:2px;bottom:14px}
    .show-media.pad{padding:16px}
  }
  @media (prefers-reduced-motion: reduce){
    .pulse::before,.pulse::after{animation:none;display:none}
    html{scroll-behavior:auto}
  }


  /* ---------- Guide pages: /pricing and /compare/* ---------- */
  .page-head{background:linear-gradient(160deg,var(--hero-1),var(--hero-2));padding:52px 0 46px}
  .page-head .crumbs{font-size:14px;color:rgba(255,255,255,.72);margin-bottom:14px}
  .page-head .crumbs a{display:inline-block;padding:4px 0}
  .page-head .crumbs a{color:#fff;text-decoration:underline;text-underline-offset:2px}
  .page-head h1{color:#fff;font-size:clamp(30px,4.4vw,46px);font-weight:800;max-width:860px}
  .page-head .lead{color:rgba(255,255,255,.84);font-size:18px;max-width:720px;margin-top:14px}
  .page-head .stamp{color:rgba(255,255,255,.72);font-size:14px;margin-top:14px}
  .guide{max-width:880px;margin:0 auto;padding:8px 24px 72px}
  .guide>section{padding-top:44px;scroll-margin-top:80px}
  .guide h2{font-size:clamp(23px,3vw,30px);font-weight:800;margin-bottom:12px}
  .guide h3{font-size:18px;font-weight:700;margin:22px 0 8px}
  .guide p,.guide li{color:#2b4740;font-size:16.5px}
  .guide p,.guide ul.dots,.guide ol.dots{max-width:36em}  /* about 75-80 characters a line (ch is too wide in Inter) */
  .guide p+p{margin-top:12px}
  .guide a:not(.btn){color:var(--sonar-ink);text-decoration:underline;text-underline-offset:2px}
  .guide ul.dots{padding-left:20px;margin:10px 0}
  .guide ul.dots li{margin:7px 0}
  .guide .small,.guide .small li{font-size:14px;color:var(--muted)}
  .guide .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
  .guide .verdict{background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:16px 0}
  .tbl{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:12px}
  .tbl table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
  .tbl th,.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
  .tbl thead th{background:var(--tint);font-weight:600;font-size:14px}
  .tbl tbody th{font-weight:600}
  .tbl tbody tr:last-child>*{border-bottom:0}
  .tbl .num{text-align:right;white-space:nowrap}
  .tbl small{display:block;color:var(--muted);font-size:13px;font-weight:400}
  .tbl .win{color:var(--green-ink);font-weight:700}
  .tbl tr.total>*{font-weight:700;background:#fafdfb}
  .guide .calc{margin-top:28px}
  @media (max-width:560px){ .page-head{padding:38px 0 34px} .guide{padding:0 16px 56px} .guide>section{padding-top:34px} .tbl table{min-width:0;font-size:13.5px} .tbl th,.tbl td{padding:9px 6px} .tbl small{font-size:12px} .tbl .num{white-space:normal} }

  /* Guide: a mock WhatsApp invite, and CSV samples */
  .wa-mock{background:#efeae2;border-radius:14px;padding:16px;max-width:380px;margin:12px 0 16px}
  .wa-bubble{background:#fff;border-radius:10px;padding:10px 12px;font-size:14.5px;color:#111b21;box-shadow:0 1px 1px rgba(0,0,0,.08)}
  .guide .wa-bubble p{margin:4px 0 6px;color:#111b21;font-size:14.5px}
  .wa-foot{display:block;font-size:13px;color:#667781}
  .wa-btns{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
  .wa-btns span{background:#fff;border-radius:10px;text-align:center;padding:9px;color:#027eb5;font-weight:600;font-size:14px}
  .wa-reply{margin-top:10px}
  /* Industry pages: example messages side by side */
  .wa-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:12px 0 4px}
  .wa-row .wa-mock{margin:0;max-width:none}
  .wa-row figcaption{font-size:13px;font-weight:600;color:#54656f;margin:0 0 8px}
  .wa-row .wa-btns{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .guide pre.csv{background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;overflow-x:auto;margin:10px 0}

  /* ---------- pricing page: plans, calculator, comparison ---------- */
  .jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
  .jump a{font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff}
  .jump a:hover{background:rgba(255,255,255,.16)}
  .pp{padding:56px 0 8px}
  .pp-h{font-size:30px;font-weight:800;text-align:center;margin-bottom:8px}
  .pp-sub{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 24px;font-size:15.5px}
  .guide-h{text-align:left;margin:48px 0 4px}
  .calc2{background:var(--tint);border:1px solid var(--line);border-radius:20px;padding:32px 28px;scroll-margin-top:90px}
  .calc2-head{text-align:center;margin-bottom:16px}
  .calc2-head h2{font-size:28px;font-weight:800;margin-bottom:6px}
  .calc2-head .sub{color:var(--muted);max-width:640px;margin:0 auto;font-size:15px}
  .presets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 24px}
  .preset{font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer}
  .preset:hover{border-color:var(--green)}
  .preset.on{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
  .preset:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* Boxes and totals share the width evenly; the totals stay in view while you edit. */
  .calc2-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
  .calc2-in{display:grid;gap:16px}
  .calc2-hint{display:flex;gap:8px;align-items:center;margin:0;font-size:14px;font-weight:600;color:var(--green-ink)}
  .calc2-hint svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .calc2-in fieldset{border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px 18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
  .calc2-in legend{font-weight:800;font-size:15px;color:var(--ink);padding:0 6px}
  .calc2-in label{display:grid;gap:3px;font-size:14px;font-weight:600;color:var(--ink);align-content:end}
  .calc2-in label.wide{grid-column:1/-1}
  .calc2-in small{font-weight:500;color:var(--muted);font-size:12.5px;line-height:1.3;margin-bottom:3px}
  .calc2-in input,.calc2-in select{font:inherit;font-weight:600;font-size:17px;padding:11px 13px;border:1.5px solid #b7cbc2;border-radius:10px;background:#f6fbf8;color:var(--ink);width:100%;min-width:0;transition:border-color .15s,box-shadow .15s,background .15s}
  .calc2-in input:hover,.calc2-in select:hover{border-color:var(--green)}
  .calc2-in input:focus,.calc2-in select:focus{outline:none;border-color:var(--green-700);background:#fff;box-shadow:0 0 0 3px rgba(47,212,122,.28)}
  .calc2-in input.bad{border-color:#c9252d;box-shadow:0 0 0 3px rgba(201,37,45,.15)}
  .calc2-in .stepper{display:flex}
  .calc2-in .stepper input{text-align:center;border-radius:0;border-left:0;border-right:0}
  .calc2-in .stepper button{flex:none;width:44px;font:inherit;font-size:20px;font-weight:700;line-height:1;border:1.5px solid #b7cbc2;background:#fff;color:var(--ink);cursor:pointer}
  .calc2-in .stepper button:first-child{border-radius:10px 0 0 10px}
  .calc2-in .stepper button:last-child{border-radius:0 10px 10px 0}
  .calc2-in .stepper button:hover{background:var(--tint);border-color:var(--green)}
  .calc2-in .stepper button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  .calc2-err{color:#c9252d;font-size:13px;margin:0}
  .calc2-err:empty{display:none}
  .calc2-out{display:grid;gap:12px;position:sticky;top:90px;scroll-margin-top:90px}
  .calc2-out .btn{justify-self:center}
  .verdict{margin:0;background:var(--ink-2);color:#fff;border-radius:14px;padding:13px 16px;text-align:center;font-size:15px;font-weight:600;line-height:1.45}
  .verdict:empty{display:none}
  .results{display:grid;gap:10px}
  .res{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:8px}
  .res.us{border:2px solid var(--green)}
  .res.best{box-shadow:0 10px 28px rgba(47,212,122,.18)}
  .res-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
  .res h3{font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px;margin:0}
  .res .tag{background:var(--green);color:#06231a;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
  .res-tot{font-family:'Montserrat',sans-serif;font-weight:800;font-size:24px;line-height:1.1;color:var(--ink);white-space:nowrap}
  .res-tot small{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--muted)}
  .res .bar{height:8px;border-radius:999px;background:var(--tint);overflow:hidden}
  .res .bar span{display:block;height:100%;border-radius:999px;background:#9fb6ae}
  .res.us .bar span{background:var(--green)}
  .res summary{cursor:pointer;padding:4px 0;font-size:14px;font-weight:600;color:var(--green-ink);width:max-content;max-width:100%}
  .res dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13.5px;margin:8px 0 0}
  .res dt{color:var(--muted)}
  .res dd{margin:0;text-align:right;font-weight:600;color:var(--ink);white-space:nowrap}
  .res dd .na{color:var(--muted);font-weight:500}
  .res-lacks{margin:0;font-size:14px;color:var(--muted)}
  .res-none{color:var(--muted);font-size:14px;margin:0}
  .calc2-mini{display:none}
  .calc2 .rates-note{margin-top:18px;text-align:center;font-size:14px}
  .inc-tbl td.y{color:var(--green-ink);font-weight:600}
  .inc-tbl td.n{color:var(--muted)}
  .inc-tbl th[scope=row]{text-align:left;font-weight:600}
  @media (max-width:1000px){
    .calc2-grid{grid-template-columns:1fr}
    .calc2-out{position:static}
    /* Totals sit below the boxes here, so a strip pinned to the screen's bottom shows them while you type. */
    .calc2-mini{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;position:sticky;bottom:12px;z-index:5;
      background:var(--ink-2);color:#cfe0d8;border-radius:999px;padding:10px 18px;font-size:13.5px;text-decoration:none;box-shadow:0 10px 30px rgba(6,35,26,.30)}
    .calc2-mini b{color:#fff}
    .calc2-mini .low b{color:var(--green)}
    .calc2-mini i{font-style:normal;color:#fff}
  }
  @media (max-width:720px){ .calc2{padding:22px 14px} .pp-h,.calc2-head h2{font-size:24px} .calc2-mini{border-radius:14px} }
  @media (max-width:340px){ .calc2-in fieldset{grid-template-columns:1fr} }
  @media (max-width:420px){ .calc2-in fieldset{padding:14px 12px 16px;gap:14px 10px} .calc2-in .stepper button{width:36px} }
  /* /roadmap: four columns of moderated feedback (sonar/routes/feedback.py). */
  .rm-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0 20px}
  .rm-col{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 12px}
  .rm-col h2{font-size:17px;font-weight:800;margin:0 0 12px}
  .rm-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .rm-col li{font-size:15px;line-height:1.4;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--line)}
  .rm-col li:last-child{border-bottom:0}
  .rm-col li small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
  .rm-col li.rm-empty{color:var(--muted)}
  .rm-kind{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-right:4px;vertical-align:1px}
  .rm-idea{background:#dff7e9;color:var(--green-ink)}
  .rm-bug{background:#fff0e0;color:#8a4b00}
  .rm-note{color:var(--muted);font-size:14.5px;text-align:center}
  .rm-released{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px 8px;margin:0 0 24px}
  .rm-released h2{font-size:19px;font-weight:800;margin:0}
  .rm-released .rm-sub{color:var(--muted);font-size:14px;margin:4px 0 14px}
  .rm-release{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--line)}
  .rm-release h3{font-size:14px;font-weight:700;color:var(--green-ink);margin:2px 0 0}
  .rm-release ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .rm-release li{font-size:15px;line-height:1.4;color:var(--ink)}
  .rm-release li small{color:var(--muted);font-size:12.5px;margin-left:6px}
  .rm-released .rm-empty{color:var(--muted);padding:8px 0 14px}
  @media (max-width:1000px){ .rm-board{grid-template-columns:1fr 1fr} }
  @media (max-width:600px){ .rm-release{grid-template-columns:1fr;gap:6px} }
  @media (max-width:600px){ .rm-board{grid-template-columns:1fr} }
  /* Pricing page (pricing.html): compact plan cards, one-line notes, an Enterprise strip,
     what every plan includes, and the detail as questions. */
  .page-head-sm{padding:40px 0 34px}
  .pp-plans{padding:34px 0 10px}
  .pc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
  .pc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:4px}
  .pc h3{font-size:19px}
  .pc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .pc-badge{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--green-ink);white-space:nowrap}
  .pc-feat{border:2px solid var(--green)}
  .pc-who{font-size:14px;color:var(--muted)}
  .pc-amt{font-family:'Montserrat',sans-serif;font-weight:800;font-size:34px;line-height:1.1;margin-top:10px}
  .pc-amt small{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--muted);margin-left:2px}
  .pc-fx{font-size:12.5px;color:var(--muted-2)}
  .pc-list{list-style:none;margin:12px 0 18px;display:grid;gap:7px}
  .pc-list li{font-size:14.5px;padding-left:24px;position:relative}
  .pc-list li::before{content:"";position:absolute;left:3px;top:5px;width:11px;height:6px;border-left:2px solid var(--green-700);border-bottom:2px solid var(--green-700);transform:rotate(-45deg)}
  .pc .btn{margin-top:auto;justify-content:center}
  .pp-note{text-align:center;color:var(--muted);font-size:14.5px;margin:16px auto 0;max-width:820px}
  .pp-note+.pp-note{margin-top:4px}
  .pp-note a{color:var(--sonar-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .ent-strip{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:24px 0 0}
  .ent-strip strong{display:block;font-size:16px}
  .ent-strip span{font-size:14.5px;color:var(--muted)}
  .pp-incl{margin:28px 0 8px}
  .pp-incl h2{font-size:18px;margin-bottom:10px}
  .chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
  .chips li{font-size:14px;padding:6px 14px;border-radius:999px;background:#f3f6f5;color:var(--ink-2)}
  .pp-faq{padding:40px 0 10px}
  .faq-wrap{max-width:880px}
  .faq{border-top:1px solid var(--line)}
  .faq:last-of-type{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:600;font-size:16.5px;position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";position:absolute;right:6px;top:22px;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
  .faq[open] summary::after{transform:rotate(-135deg);top:26px}
  .faq summary:focus-visible{outline:2px solid var(--sonar);outline-offset:2px;border-radius:4px}
  .faq-a{padding:0 0 18px;color:#2b4740;font-size:15.5px}
  .faq-a p{max-width:40em}
  .faq-a p+p,.faq-a p+.tbl{margin-top:10px}
  .faq-a h3{font-size:16px;margin:16px 0 6px}
  .faq-a ul.dots{padding-left:20px;margin:8px 0}
  .faq-a ul.dots li{margin:6px 0}
  .faq-a .small{font-size:14px;color:var(--muted)}
  .faq-a a{color:var(--sonar-ink);text-decoration:underline;text-underline-offset:2px}
  @media (max-width:1000px){ .pc-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:640px){ .pc-grid{grid-template-columns:1fr} .ent-strip{flex-direction:column;align-items:flex-start} .ent-strip .btn{width:100%;justify-content:center} }
  .pp-trust{font-size:13.5px;margin-top:18px}
  .pp-fine{font-size:12.5px;color:var(--muted-2)}
  /* "Chat with us": Sonar's own WhatsApp number, on every public page (site.chrome). */
  .chat-float{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--green);color:#06231a;font-weight:700;font-size:15px;box-shadow:0 10px 24px rgba(12,36,31,.22)}
  .chat-float svg{width:20px;height:20px;fill:#06231a;flex:none}
  .chat-float:hover{background:var(--green-600)}
  .chat-float:focus-visible{outline:3px solid var(--sonar-ink);outline-offset:3px}
  @media (max-width:640px){ .chat-float{padding:14px} .chat-float span{display:none} }