/* AI chat costs page: the wait meter and the estimator. Sits on top of site.css; nothing here changes the other pages. */

/* ---- the wait meter ---- */
.meter{padding:30px 30px 26px}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-bottom:18px}
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.seg button{font:500 14.5px/1 var(--sans);padding:11px 17px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--text);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.seg button:hover{border-color:var(--blue)}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.lane{margin-bottom:22px}
.lane .lab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px;font-size:15.5px;color:var(--muted)}
.lane .lab b{color:var(--ink);font-weight:600}
.lane .time{font-family:var(--mono);font-size:24px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.track{height:18px;border-radius:999px;background:var(--tint);position:relative;overflow:hidden}
.fill{position:absolute;left:0;top:0;bottom:0;width:100%;min-width:6px;border-radius:999px;background:linear-gradient(90deg,#9DB0CB,#6F88AE)}
.lane.new .fill{background:linear-gradient(90deg,var(--blue),var(--blue-ink))}
.verdict{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-top:8px;padding-top:20px;border-top:1px solid var(--line)}
.verdict b{font-size:clamp(36px,4.2vw,56px);font-weight:300;letter-spacing:-.025em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.verdict span{font-size:16px;color:var(--muted)}
.again{margin-left:auto;font:500 14.5px/1 var(--sans);padding:11px 16px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer}
.again:hover{border-color:var(--blue)}
.meter-note{font-size:13.5px;line-height:1.5;color:var(--faint);margin-top:16px}

/* ---- the estimator ---- */
.est{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;margin-top:8px}
.est-in,.est-out{padding:34px}
.fld{display:grid;gap:7px;margin-bottom:20px;font-size:15px;color:var(--muted)}
.fld:last-child{margin-bottom:0}
.fld input,.fld select{width:100%;font:500 17px/1.2 var(--sans);color:var(--ink);padding:14px 15px;border-radius:14px;border:1px solid var(--line-2);background:#fff;appearance:none;-webkit-appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%230F1E3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
.fld input:focus,.fld select:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.fld small{font-size:13px;color:var(--faint)}
.res{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--line)}
.res:first-child{padding-top:0}
.res .what{font-size:16px;color:var(--text);max-width:260px;line-height:1.35}
.res .what small{display:block;margin-top:4px;font-size:13.5px;color:var(--faint)}
.res .n{font-family:var(--mono);font-size:clamp(24px,2.6vw,34px);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.res.save{border:0;margin-top:18px;padding:20px 22px;border-radius:20px;background:var(--blue-soft)}
.res.save .n{color:var(--blue-ink);font-size:clamp(28px,3.2vw,42px)}
.est-msg{display:none;margin-top:14px;font-size:15px;line-height:1.5;color:var(--muted)}
.est-msg.on{display:block}
.est-note{margin-top:22px;font-size:13.5px;line-height:1.55;color:var(--faint)}
.est-note li{position:relative;padding-left:16px;margin-top:6px}
.est-note li:before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--line-2)}

@media (max-width:900px){
  .est{grid-template-columns:1fr}
  .est-in,.est-out{padding:26px}
}
@media (max-width:560px){
  .meter{padding:22px 18px 20px}
  .lane .lab{flex-direction:column;gap:2px}
  .again{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.seg button{transition:none}}

/* ---- home page: the wide fifth offer card (also loaded by index.html) ---- */
.js .offer4 .reveal:nth-child(5){transition-delay:.32s}
.scard.wide{grid-column:1/-1;min-height:0;padding:30px 30px 30px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:56px;align-items:center}
.scard.wide>*{grid-column:1}
.scard.wide .checks{grid-column:2;grid-row:1/span 4;margin:0 64px 0 0}
.scard.wide p{max-width:560px}
@media (max-width:1100px){
  .scard.wide{grid-template-columns:1fr;padding:26px 26px 92px}
  .scard.wide .checks{grid-column:1;grid-row:auto;margin:14px 0 6px}
}