/* ═══════════════════════════════════════════════════════════════
   TETRA AI — vertical (industry) page additions
   Loaded AFTER site.css; shares its tokens and components.
   ═══════════════════════════════════════════════════════════════ */

/* ── hero: copy left, live transcript card right ── */
.vhero{
  position:relative; overflow:clip; color:var(--white);
  background:
    radial-gradient(56% 44% at 84% 6%, rgba(55,138,221,.16), transparent 66%),
    radial-gradient(50% 42% at 8% 92%, rgba(55,138,221,.09), transparent 62%),
    linear-gradient(178deg, var(--navy) 0%, #032546 55%, var(--abyss) 100%);
  padding:clamp(130px,15vh,170px) 0 clamp(70px,9vh,100px);
}
.vpain__photo{             /* the industry's own moment, as content */
  margin:0 0 18px; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 26px 52px -28px rgba(4,44,83,.4);
}
.vpain__photo img{
  width:100%; aspect-ratio:16/11; object-fit:cover; display:block;
  filter:saturate(.85) contrast(1.03);
}
.vhero__grid{
  display:grid; grid-template-columns:7fr 5fr; gap:clamp(36px,5vw,72px);
  align-items:center;
}
.vhero__kicker{
  display:flex; align-items:center; gap:10px;
  color:var(--sky); font-weight:600; font-size:14.5px; margin-bottom:18px;
}
.vhero__kicker svg{ width:22px; height:22px; color:var(--electric) }
.vhero h1{
  font-size:clamp(36px,5.6vw,58px); letter-spacing:-.025em; line-height:1.04;
}
.vhero__sub{
  color:var(--dark-mute); margin:20px 0 30px; max-width:34em;
  font-size:clamp(16px,2vw,18px); line-height:1.7;
}
.vhero__cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.vhero__tel{
  color:var(--dark-mute); font-size:14px; text-decoration:none;
  font-feature-settings:"tnum";
}
.vhero__tel:hover{ color:var(--sky) }
.vhero__note{ color:rgba(169,200,232,.6); font-size:12.5px; margin-top:14px }

/* the typing transcript card */
.convo{
  background:linear-gradient(160deg, rgba(230,241,251,.08), rgba(230,241,251,.03));
  border:1px solid var(--hairline-d); border-radius:20px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55), inset 0 1px 0 rgba(230,241,251,.09);
  padding:22px 24px 18px; min-height:340px;
  display:flex; flex-direction:column;
}
.convo__head{
  display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; color:var(--dark-mute);
  padding-bottom:14px; border-bottom:1px solid var(--hairline-d); margin-bottom:16px;
}
.convo__head .live-dot{ width:8px; height:8px }
.convo__lines{ display:flex; flex-direction:column; gap:12px; font-size:14.5px; line-height:1.55 }
.convo .tr-line{ opacity:1; transform:none }
.convo .tr-line p{ min-height:1.2em }
.convo__caret{
  display:inline-block; width:2px; height:1.05em; vertical-align:-0.18em;
  background:var(--sky); margin-left:2px;
  animation:caretblink 1s steps(1) infinite;
}
@keyframes caretblink{ 50%{ opacity:0 } }
.convo__foot{
  margin-top:auto; padding-top:14px; font-size:12px; color:rgba(169,200,232,.55);
}

/* ── pain section ── */
.vpain{ background:var(--white); padding:clamp(76px,10vh,120px) 0 }
.vpain h2{ font-size:clamp(28px,4.2vw,42px); color:var(--navy); max-width:20em }
.vpain__grid{
  display:grid; grid-template-columns:3fr 2fr; gap:clamp(32px,5vw,72px);
  margin-top:clamp(28px,4vh,40px); align-items:start;
}
.vpain__copy p{ color:var(--ink-mute); font-size:clamp(16px,1.9vw,17.5px); line-height:1.75 }
.vpain__copy p+p{ margin-top:18px }
.vpain__copy strong{ color:var(--navy); font-weight:600 }
.vpain__aside{
  background:var(--ice); border-radius:var(--radius);
  padding:26px 28px;
}
.vpain__aside h3{
  font-family:var(--font-body); font-weight:700; font-size:15px;
  color:var(--navy); margin-bottom:14px;
}
.vpain__aside ul{ list-style:none; display:flex; flex-direction:column; gap:11px }
.vpain__aside li{
  color:var(--ink-mute); font-size:14.5px; line-height:1.55;
  padding-left:22px; position:relative;
}
.vpain__aside li::before{
  content:""; position:absolute; left:0; top:.44em; width:12px; height:10px;
  background:
    linear-gradient(var(--electric),var(--electric)) 0 50%/2px 4px,
    linear-gradient(var(--electric),var(--electric)) 4.5px 50%/2px 10px,
    linear-gradient(var(--electric),var(--electric)) 9px 50%/2px 6px;
  background-repeat:no-repeat;
}

/* ── what the agent handles ── */
.vhandles{ background:var(--ice); padding:clamp(76px,10vh,120px) 0 }
.vhandles h2{ font-size:clamp(28px,4.2vw,42px); color:var(--navy) }
.vhandles__sub{ color:var(--ink-mute); margin-top:12px; max-width:600px }
.vhandles__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:clamp(30px,4vh,44px);
}
.vhandle{
  background:var(--white); border:1px solid var(--hairline-l); border-radius:var(--radius);
  padding:22px 24px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.vhandle:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(4,44,83,.25) }
.vhandle h3{
  font-family:var(--font-body); font-weight:700; font-size:16px;
  color:var(--navy); margin-bottom:7px; letter-spacing:-.01em;
}
.vhandle p{ color:var(--ink-mute); font-size:14px; line-height:1.6 }

/* ── mini calculator band (dark) ── */
.vcalc{
  background:
    radial-gradient(50% 60% at 90% 0%, rgba(55,138,221,.13), transparent 65%),
    linear-gradient(180deg, var(--abyss) 0%, var(--abyss-2) 100%);
  color:var(--white); padding:clamp(70px,9vh,110px) 0; position:relative;
}
.vcalc__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px);
  align-items:center;
}
.vcalc h2{ font-size:clamp(26px,3.8vw,38px) }
.vcalc__copy p{ color:var(--dark-mute); margin-top:14px; line-height:1.7 }
.vcalc__panel{
  background:linear-gradient(165deg, rgba(230,241,251,.07), rgba(230,241,251,.025));
  border:1px solid var(--hairline-d); border-radius:20px;
  padding:clamp(24px,3.4vw,36px);
}
.vcalc__panel label{
  display:block; font-size:13.5px; font-weight:600; letter-spacing:.04em;
  color:var(--sky); margin-bottom:10px;
}
.vcalc__panel output{ color:var(--white); font-feature-settings:"tnum" }
.vcalc__figure{
  font-family:var(--font-head); font-weight:800; text-align:center;
  font-size:clamp(30px,4.6vw,44px); letter-spacing:-.02em;
  font-feature-settings:"tnum"; margin:20px 0 8px;
}
.vcalc__math{ color:rgba(169,200,232,.62); font-size:12.5px; text-align:center }
.vcalc__anchor{ text-align:center; margin-top:14px; font-weight:600; color:var(--sky); font-size:14.5px }
.vcalc__anchor a{ color:var(--electric) }

/* ── pricing strip ── */
.vpricing{ background:var(--ice); padding:clamp(70px,9vh,110px) 0 }
.vpricing h2{ font-size:clamp(26px,3.8vw,38px); color:var(--navy); margin-bottom:8px }
.vpricing__sub{ color:var(--ink-mute); margin-bottom:30px }
.vpricing__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.vprice{
  background:var(--white); border:1px solid var(--hairline-l); border-radius:16px;
  padding:22px 24px; display:flex; flex-direction:column; gap:4px;
}
.vprice--popular{ background:var(--navy); color:var(--white) }
.vprice h3{ font-family:var(--font-body); font-weight:700; font-size:15px; color:inherit }
.vprice__amt{
  font-family:var(--font-head); font-weight:800; font-size:30px;
  letter-spacing:-.02em; font-feature-settings:"tnum";
}
.vprice__amt span{ font-size:14px; font-weight:500 }
.vprice p{ font-size:13px; color:var(--ink-mute) }
.vprice--popular p{ color:var(--dark-mute) }
.vpricing__all{ margin-top:22px; font-size:14.5px }
.vpricing__all a{ color:var(--electric); font-weight:600 }

/* ── vertical FAQ ── */
.vfaq{ background:var(--white); padding:clamp(70px,9vh,110px) 0 }
.vfaq h2{ font-size:clamp(26px,3.8vw,38px); color:var(--navy); margin-bottom:20px }

/* ── closing CTA band ── */
.vcta{
  background:
    radial-gradient(50% 50% at 85% 10%, rgba(55,138,221,.15), transparent 62%),
    linear-gradient(184deg, var(--navy), var(--abyss) 92%);
  color:var(--white); text-align:center; position:relative; overflow:clip;
  padding:clamp(80px,11vh,130px) 0;
}
.vcta h2{ font-size:clamp(30px,4.6vw,46px) }
.vcta p{ color:var(--dark-mute); margin:16px auto 30px; max-width:36em }
.vcta__row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap }

/* ── responsive ── */
@media (max-width: 1020px){
  .vhero__grid{ grid-template-columns:1fr; gap:40px }
  .convo{ max-width:560px }
  .vpain__grid{ grid-template-columns:1fr }
  .vhandles__grid{ grid-template-columns:1fr 1fr }
  .vcalc__grid{ grid-template-columns:1fr; gap:34px }
}
@media (max-width: 780px){
  .vhandles__grid{ grid-template-columns:1fr }
  .vpricing__row{ grid-template-columns:1fr }
  .convo{ min-height:0 }
}