/* ============================================================
   50 AI CALLER PRACTICE — product page
   All rules scoped under .aicp so this drops into any theme.
   Light theme: white/paper backgrounds, dark text throughout.
   Orange/teal remain the brand accent colors.
   ============================================================ */

.aicp *,.aicp *::before,.aicp *::after{box-sizing:border-box}

.aicp{
  /* palette */
  --navy:#0D1526;
  --navy-2:#131E33;
  --navy-3:#1C2A45;
  --ink:#0D1216;
  --orange:#EF5B03;
  --orange-2:#E8650A;
  --teal:#1B8FA8;
  --slate:#353C46;
  --paper:#F4F6F8;
  --paper-2:#E6EAEF;
  --paper-3:#DEE4EB;
  --white:#FFFFFF;
  --mute:#5A6B80;
  --muted-body:#54637A;

  /* type */
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --body:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1180px;
  --gut:clamp(20px,5vw,48px);

  font-family:var(--body);
  color:#22303F;
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:17px;
  overflow-x:hidden;
}

/* Full-bleed: each section spans the viewport even when placed inside a
   boxed WPBakery row/column. If your page template is already full-width
   and you ever see a horizontal scrollbar, delete this one rule. */
.aicp{
  width:100vw;
  max-width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

.aicp img,.aicp video{max-width:100%;display:block}
.aicp a{color:var(--orange);text-decoration:none}
.aicp a:hover{text-decoration:underline}
.aicp p{margin:0 0 1.1em}
.aicp p:last-child{margin-bottom:0}

.aicp .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.aicp .band{padding:clamp(56px,8vw,104px) 0}
.aicp .band--light{background:var(--paper)}
.aicp .band--slate{background:var(--paper-2)}
.aicp .band--ink{background:var(--paper-3)}

.aicp .eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange-2);margin:0 0 14px
}

.aicp h2.sec{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,5.2vw,52px);line-height:.98;letter-spacing:.01em;
  margin:0 0 18px;color:var(--ink)
}
.aicp h3.sub{
  font-family:var(--body);font-weight:600;font-size:19px;line-height:1.35;
  margin:0 0 8px;color:var(--ink);letter-spacing:-.01em
}
.aicp .lede{font-size:clamp(17px,2vw,20px);color:#48566A;max-width:62ch}

/* ---------- EKG divider ---------- */
.aicp .ekg{display:block;width:100%;height:34px;overflow:visible}
.aicp .ekg path{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.aicp .ekg--trace path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:aicp-trace 3.4s ease-out forwards}
@keyframes aicp-trace{to{stroke-dashoffset:0}}

/* ---------- HERO ---------- */
.aicp .hero{
  position:relative;padding:clamp(40px,7vw,76px) 0 clamp(48px,7vw,84px);
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(27,143,168,.10), transparent 62%),
    radial-gradient(800px 460px at 8% 104%, rgba(239,91,3,.08), transparent 60%),
    var(--white);
  overflow:hidden
}
.aicp .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.aicp .hero-banner{width:min(340px,100%);margin:0 0 26px}
.aicp h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(38px,7.4vw,80px);line-height:.92;letter-spacing:.005em;
  margin:0 0 20px;color:var(--ink)
}
.aicp h1 .hl{color:var(--orange);display:block}
.aicp .hero p.lede{font-size:clamp(17px,2.1vw,21px)}

.aicp .btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.aicp .btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:15px 26px;border-radius:3px;border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease;
  text-decoration:none
}
.aicp .btn:hover{text-decoration:none;transform:translateY(-2px)}
.aicp .btn--primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.aicp .btn--primary:hover{background:#ff6a12;border-color:#ff6a12}
.aicp .btn--ghost{background:transparent;color:var(--ink);border-color:rgba(13,18,22,.28)}
.aicp .btn--ghost:hover{border-color:var(--teal);color:var(--teal)}

/* live call card in hero */
.aicp .callcard{
  background:#fff;
  border:1px solid var(--paper-2);border-radius:6px;padding:24px;
  box-shadow:0 24px 54px -30px rgba(20,34,54,.18)
}
.aicp .callcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--paper-2)}
.aicp .livedot{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-2)}
.aicp .livedot i{width:8px;height:8px;border-radius:50%;background:#FF3B1F;box-shadow:0 0 0 0 rgba(255,59,31,.7);
  animation:aicp-pulse 1.8s infinite}
@keyframes aicp-pulse{70%{box-shadow:0 0 0 11px rgba(255,59,31,0)}100%{box-shadow:0 0 0 0 rgba(255,59,31,0)}}
.aicp .callcard-id{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute)}
.aicp .callcard-q{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3.4vw,34px);
  line-height:1;color:var(--ink);margin:0 0 10px}
.aicp .callcard-note{font-size:14.5px;color:var(--muted-body);margin:0}
.aicp .callcard-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.aicp .chip{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-radius:2px;background:rgba(27,143,168,.10);color:var(--teal);border:1px solid rgba(27,143,168,.35)}

/* ---------- ticker strip ---------- */
.aicp .ticker{background:var(--orange);color:#fff}
.aicp .ticker .wrap{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;
  padding-top:18px;padding-bottom:18px}
.aicp .ticker span{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}

/* ---------- generic grid ---------- */
.aicp .grid{display:grid;gap:22px}
.aicp .g2{grid-template-columns:repeat(2,1fr)}
.aicp .g3{grid-template-columns:repeat(3,1fr)}
.aicp .g4{grid-template-columns:repeat(4,1fr)}

.aicp .card{background:#fff;border:1px solid var(--paper-2);border-radius:5px;padding:26px}
.aicp .card p{font-size:15.5px;color:var(--muted-body);margin:0}

/* ---------- video ---------- */
.aicp .videoframe{border:1px solid var(--paper-2);border-radius:6px;overflow:hidden;background:#000;
  box-shadow:0 30px 70px -34px rgba(20,34,54,.35)}
.aicp .videoframe video{width:100%;height:auto}
.aicp .videocap{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-top:12px}

/* ---------- CALL BOARD (signature) ---------- */
.aicp .boardhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.aicp .boardctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.aicp .filt{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 13px;border-radius:2px;cursor:pointer;
  background:transparent;color:var(--mute);border:1px solid var(--paper-2);
  transition:color .15s ease,border-color .15s ease,background-color .15s ease
}
.aicp .filt:hover{color:var(--ink);border-color:#C7D0DB}
.aicp .filt[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.aicp .filt.view[aria-pressed="true"]{background:var(--teal);border-color:var(--teal)}

.aicp .board{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;
  background:var(--paper);border:1px solid var(--paper-2);border-radius:6px;padding:12px
}
.aicp .tile{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:96px;padding:11px 12px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--paper-2);border-left:3px solid #C7D0DB;border-radius:3px;
  color:var(--ink);font-family:var(--body);
  transition:border-left-color .15s ease,background-color .15s ease,transform .15s ease
}
.aicp .tile:hover,.aicp .tile:focus-visible{background:var(--paper);transform:translateY(-2px)}
.aicp .tile:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.aicp .tile[data-d="police"]{border-left-color:#2E6FD4}
.aicp .tile[data-d="fire"]{border-left-color:var(--orange)}
.aicp .tile[data-d="ems"]{border-left-color:#12B981}
.aicp .tile[data-d="multi"]{border-left-color:var(--teal)}
.aicp .tile .num{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--mute)}
.aicp .tile .type{display:block;font-size:13.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.aicp .tile .desc{display:block;font-size:11.5px;line-height:1.35;color:var(--mute);margin-top:4px;font-weight:300}
.aicp .tile .hidden-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#8B98A8;margin-top:8px;text-transform:uppercase}
.aicp .tile .reveal{display:none;margin-top:8px}
.aicp .board.trainer .tile .reveal{display:block}
.aicp .board.trainer .tile .hidden-label{display:none}
.aicp .tile:hover .reveal,.aicp .tile:focus-visible .reveal{display:block}
.aicp .tile:hover .hidden-label,.aicp .tile:focus-visible .hidden-label{display:none}
.aicp .tile.dim{opacity:.16;pointer-events:none}
/* student view gives nothing away, not even the discipline stripe */
.aicp .board:not(.trainer) .tile{border-left-color:#C7D0DB}
.aicp .board:not(.trainer) .tile[data-d="police"]:hover,.aicp .board:not(.trainer) .tile[data-d="police"]:focus-visible{border-left-color:#2E6FD4}
.aicp .board:not(.trainer) .tile[data-d="fire"]:hover,.aicp .board:not(.trainer) .tile[data-d="fire"]:focus-visible{border-left-color:var(--orange)}
.aicp .board:not(.trainer) .tile[data-d="ems"]:hover,.aicp .board:not(.trainer) .tile[data-d="ems"]:focus-visible{border-left-color:#12B981}
.aicp .board:not(.trainer) .tile[data-d="multi"]:hover,.aicp .board:not(.trainer) .tile[data-d="multi"]:focus-visible{border-left-color:var(--teal)}
.aicp .boardnote{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-top:14px}
.aicp .legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.aicp .legend span{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.aicp .legend i{width:12px;height:3px;border-radius:2px;display:inline-block}

/* ---------- steps ---------- */
.aicp .step{position:relative;padding-top:22px;border-top:2px solid var(--paper-2)}
.aicp .step .n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--orange);
  display:block;margin-bottom:10px}
.aicp .step p{font-size:15px;color:var(--muted-body);margin:0}

/* ---------- skills ---------- */
.aicp .skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;
  background:var(--paper-2);border:1px solid var(--paper-2);border-radius:4px;overflow:hidden}
.aicp .skill{background:#fff;padding:22px 20px}
.aicp .skill b{display:block;font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.aicp .skill span{display:block;font-size:13px;color:var(--muted-body);margin-top:5px;font-weight:300;line-height:1.45}

/* ---------- pricing ---------- */
.aicp .plan{background:#fff;border:1px solid var(--paper-2);border-radius:5px;padding:28px;display:flex;flex-direction:column}
.aicp .plan.feature{border:2px solid var(--orange);box-shadow:0 20px 44px -26px rgba(239,91,3,.5)}
.aicp .plan .tag{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-2);margin-bottom:12px}
.aicp .plan .price{font-family:var(--display);font-size:46px;line-height:1;color:var(--ink);margin:0 0 4px}
.aicp .plan .price small{font-family:var(--body);font-size:13px;font-weight:400;color:#7A8798;letter-spacing:0;margin-left:6px}
.aicp .plan ul{list-style:none;margin:16px 0 22px;padding:0}
.aicp .plan li{position:relative;padding-left:22px;font-size:14.5px;color:#54637A;margin-bottom:9px;line-height:1.45}
.aicp .plan li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--orange)}
.aicp .plan .btn{margin-top:auto;justify-content:center}

/* ---------- reference guide ---------- */
.aicp .refgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,56px);align-items:center}
.aicp .refimg{border:1px solid var(--paper-2);border-radius:5px;overflow:hidden;background:var(--paper)}

/* ---------- FAQ ---------- */
.aicp details{border-bottom:1px solid var(--paper-2);padding:18px 0}
.aicp summary{cursor:pointer;list-style:none;font-weight:600;font-size:16.5px;color:var(--ink);
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.aicp summary::-webkit-details-marker{display:none}
.aicp summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--orange);line-height:1;flex:none}
.aicp details[open] summary::after{content:"–"}
.aicp details p{margin-top:12px;font-size:15px;color:var(--muted-body);max-width:78ch}

/* ---------- final CTA + footer ---------- */
.aicp .cta{background:linear-gradient(135deg,#EAF4F6 0%,#FFFFFF 55%,#FDEFE6 100%);text-align:center}
.aicp .cta h2.sec{max-width:20ch;margin-left:auto;margin-right:auto}
.aicp .cta .btnrow{justify-content:center}
.aicp .foot{background:var(--paper-3);padding:34px 0;border-top:1px solid var(--paper-2)}
.aicp .foot .wrap{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:center}
.aicp .foot p{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .aicp .hero-grid,.aicp .refgrid{grid-template-columns:1fr}
  .aicp .g4{grid-template-columns:repeat(2,1fr)}
  .aicp .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .aicp{font-size:16px}
  .aicp .g2,.aicp .g3,.aicp .g4{grid-template-columns:1fr}
  .aicp .board{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;padding:8px}
  .aicp .tile{min-height:84px}
  .aicp .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .aicp *,.aicp *::before,.aicp *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .aicp .ekg--trace path{stroke-dashoffset:0}
}