/* ==========================================================================
   operations.css — the long-form page about where your data lives.

   Not the landing page. Someone who reaches this has already decided the
   missed-call problem is real and is now asking the harder question: what am
   I signing up to, and can I leave. So it reads denser and argues more.

   Everything here reuses the tokens in styles.css. No new colours.
   ========================================================================== */

.opspage{padding-block:clamp(30px,5vw,60px) clamp(50px,8vw,90px)}
.opspage .wrap{max-width:900px}

/* A wider band for the comparison table, which needs the room. */
.opspage .wrap--wide{max-width:1120px}

.ops__lede{
  font-size:clamp(16px,1.9vw,18.5px);
  line-height:1.62;
  color:var(--soft);
  max-width:62ch;
}

.ops h2{
  font-size:clamp(23px,3.1vw,33px);
  line-height:1.18;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:clamp(46px,6vw,76px) 0 14px;
}
.ops h3{
  font-size:clamp(17px,2vw,20px);
  line-height:1.3;
  color:var(--ink);
  margin:28px 0 8px;
}
.ops p{margin:0 0 14px;max-width:66ch}
.ops p + h3{margin-top:30px}

/* The one-line claim that carries a section. */
.ops__claim{
  margin:22px 0;
  padding:18px 22px;
  border-left:3px solid var(--accent);
  background:var(--tint);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:clamp(16px,1.9vw,19px);
  line-height:1.42;
  font-weight:700;
  color:var(--ink);
  max-width:none;
}

/* ------------------------------------------------------------ the leak --- */

.leak{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:26px 0 8px;
}
.leak__step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:16px 16px 18px;
  position:relative;
}
.leak__step b{display:block;font-size:14px;color:var(--ink);margin-bottom:5px}
.leak__step span{font-size:13px;line-height:1.5;color:var(--muted)}
.leak__step--gap{
  border-color:var(--accent);
  background:var(--tint);
  box-shadow:var(--shadow);
}
.leak__step--gap b{color:var(--accent-deep)}
@media (max-width:760px){.leak{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.leak{grid-template-columns:1fr}}

/* ------------------------------------------------------- comparison ------ */

.compare{width:100%;border-collapse:collapse;margin:26px 0 10px;font-size:14px}
.compare th,.compare td{
  padding:13px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.compare thead th{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
  border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
.compare tbody th{font-weight:700;color:var(--ink);width:30%}
.compare td{color:var(--soft);line-height:1.5}

/* The column being argued for. Tinted rather than bolded, so the table still
   reads as a table and not as a sales sheet. */
.compare .col--ours{background:var(--tint)}
.compare thead .col--ours{color:var(--accent-deep)}

.compare .yes{color:var(--accent-deep);font-weight:700}
.compare .no{color:#B42318}

.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:720px){
  .compare{font-size:13px;min-width:640px}
}

/* ------------------------------------------------------------- lock-in --- */

.versus{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,26px);
  margin:26px 0 8px;
}
@media (max-width:760px){.versus{grid-template-columns:1fr}}

.versus__card{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px 22px 24px;
  background:var(--surface);
}
.versus__card--theirs{background:#FBFCFD}
.versus__card--ours{border-color:var(--accent);background:var(--tint)}
.versus__card h3{margin:0 0 4px;font-size:17px}
.versus__card .versus__sub{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;color:var(--muted);margin:0 0 14px;
}
.versus__card--ours .versus__sub{color:var(--accent-deep)}
.versus__card ul{margin:0;padding:0;list-style:none}
.versus__card li{
  position:relative;padding-left:22px;margin-bottom:10px;
  font-size:14px;line-height:1.55;color:var(--soft);
}
.versus__card li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:2px;
  background:var(--line-strong);
}
.versus__card--ours li::before{background:var(--accent)}

/* --------------------------------------------------------------- where --- */

.where{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 8px}
@media (max-width:760px){.where{grid-template-columns:1fr}}
.where__card{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:18px 18px 20px;
}
.where__card b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px}
.where__card span{font-size:13.5px;line-height:1.55;color:var(--muted)}
.where__card em{
  display:block;margin-top:10px;font-style:normal;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:800;color:var(--accent-deep);
}

/* ----------------------------------------------------------------- cta --- */

.ops__cta{
  margin-top:clamp(46px,6vw,72px);
  padding:clamp(26px,3.4vw,38px);
  border-radius:var(--r-xl);
  background:var(--ink);
  color:#fff;
}
.ops__cta h2{color:#fff;margin:0 0 10px}
.ops__cta p{color:var(--on-dark);max-width:60ch;margin-bottom:20px}
.ops__cta .btn{margin-right:10px}

.ops__foot{
  margin-top:34px;font-size:12.5px;line-height:1.6;color:var(--muted);
  max-width:70ch;
}