/* ============================================================
   HelloSubs pricing calculator — shared styles
   Used by every ad landing page (pricing-ece.html, future pages).
   Edit calculator look-and-feel here once; every page updates.

   Load this in <head> BEFORE the page's own inline <style>.
   The :root below only declares the ~14 tokens the calculator
   uses, as FALLBACKS — a page that defines its own :root later
   (same specificity, later in source) overrides these, so this
   file never fights the host page yet works standalone.
   ============================================================ */
:root{
  --blue:#1A73E8;
  --blue-dark:#1565C0;
  --ink:#26353F;
  --ink-strong:#10181D;
  --ink-soft:#5C6B74;
  --ink-faint:#9AA6AD;
  --navy:#26353F;
  --gold:#E9BC01;
  --card-line-cool:#E3E7EA;
  --serif:'Fraunces','Tiempos',Georgia,'Times New Roman',serif;
  --sans:'Work Sans','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --r-card:24px;
  --r-pill:999px;
  --sh-float:0 24px 64px rgba(38,53,63,.18);
}

/* ===== calculator card shell ===== */
.calc-card{background:#fff;color:var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-float);padding:28px;position:relative;z-index:3;scroll-margin-top:90px}
.calc-card.flash{animation:calcFlash 1.1s ease-out}
@keyframes calcFlash{0%,100%{box-shadow:var(--sh-float)}25%{box-shadow:0 0 0 5px rgba(26,115,232,.55),var(--sh-float)}}
.calc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.calc-head h3{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em}
.calc-badge{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:rgba(26,115,232,.1);padding:6px 12px;border-radius:var(--r-pill)}
.calc-sub{font-size:14px;color:var(--ink-soft);margin-bottom:22px}

/* ===== live calculator ===== */
.hsc-field{margin-top:16px}
.hsc-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.hsc-row2 .hsc-field{margin-top:0}
.hsc-row2 .hsc-field-top{flex-direction:column;align-items:stretch;gap:9px}
.hsc-row2 .hsc-num{width:100%;justify-content:space-between;padding:0 14px}
/* width:auto gives a number input the browser's default width (~150px) as an unshrinkable
   min-content floor, which pushed the card 3px past a 320px viewport. min-width:0 lets it
   shrink; below 360px the pair stacks so each gets the full width. */
.hsc-row2 .hsc-num input{flex:1 1 auto;width:auto!important;text-align:left;min-width:0}
.hsc-num{min-width:0}
@media(max-width:360px){.hsc-row2{grid-template-columns:1fr}}
.hsc-field-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hsc-field label{font-size:16px;font-weight:600;color:var(--ink-strong);letter-spacing:-.01em}
.hsc-states{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.hsc-states button{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);background:#F4F6F8;border:1.5px solid var(--card-line-cool);border-radius:10px;padding:12px 10px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.hsc-states button:hover{border-color:var(--blue);color:var(--blue)}
.hsc-states button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.hsc-states button[data-st="OTHER"]{grid-column:1/-1}
.hsc-reveal{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.hsc-reveal.open{max-height:1500px;opacity:1}
.hsc-select,.hsc-text{width:100%;background:#F4F6F8;border:1px solid var(--card-line-cool);border-radius:10px;padding:0 14px;height:40px;font-size:14.5px;font-family:var(--sans);color:var(--ink);outline:none}
.hsc-select{margin-top:8px;cursor:pointer}
.hsc-select:focus-visible,.hsc-text:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.hsc-text::placeholder{color:#A2ACB4}
.hsc-num{display:inline-flex;align-items:center;gap:3px;background:#F4F6F8;border:1px solid var(--card-line-cool);border-radius:6px;padding:0 12px;height:40px}
.hsc-num span{color:var(--ink-soft);font-size:16px;font-weight:600}
.hsc-num input{width:46px;border:0;background:transparent;font-size:20px;font-weight:700;color:var(--ink);text-align:right;outline:none;font-variant-numeric:tabular-nums}
#hscWage{width:72px}
@keyframes hscPulse{0%{box-shadow:0 0 0 0 rgba(26,115,232,.55)}70%{box-shadow:0 0 0 14px rgba(26,115,232,0)}100%{box-shadow:0 0 0 0 rgba(26,115,232,0)}}
.hsc-select.pulse{border-color:var(--blue);border-width:2px;animation:hscPulse 1.35s ease-out infinite}
.hsc-pickhint{font-size:13.5px;font-weight:700;color:var(--blue);margin-top:11px;display:flex;align-items:center;gap:9px;animation:hscBlink 1.3s ease-in-out infinite}
.hsc-pickhint .pa{display:inline-block;font-size:24px;line-height:1;animation:hscBob .85s ease-in-out infinite}
.hsc-pickhint[hidden],.hsc-svc[hidden]{display:none!important}
@keyframes hscBlink{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes hscBob{0%,100%{transform:translateY(-3px) scale(1)}50%{transform:translateY(5px) scale(1.18)}}
.hsc-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;margin-top:14px;background:linear-gradient(var(--blue),var(--blue)) no-repeat;background-size:var(--fill,40%) 100%;background-color:var(--card-line-cool);cursor:pointer}
.hsc-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.hsc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.hsc-range:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.hsc-range-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-faint);margin-top:6px}
.hsc-hint{font-size:12px;color:var(--blue);font-weight:600;text-align:center;margin-top:9px;display:flex;align-items:center;justify-content:center;gap:8px}
.hsc-hint .ar:first-child{display:inline-block;animation:hsArL 1.2s ease-in-out infinite}
.hsc-hint .ar:last-child{display:inline-block;animation:hsArR 1.2s ease-in-out infinite}
@keyframes hsArL{0%,100%{transform:translateX(2px);opacity:.45}50%{transform:translateX(-3px);opacity:1}}
@keyframes hsArR{0%,100%{transform:translateX(-2px);opacity:.45}50%{transform:translateX(3px);opacity:1}}
.hsc-svc{margin-top:10px;font-size:13px;display:flex;align-items:center;gap:7px;line-height:1.4}
.hsc-svc.ok{color:var(--blue)} .hsc-svc.wait{color:#9A6B1F}
.hsc-receipt{margin-top:22px;border-top:1px dashed var(--card-line-cool);padding-top:16px}
.hsc-line{display:flex;align-items:baseline;gap:10px;margin:10px 0}
.hsc-line .lab{font-size:15px;color:var(--ink)} .hsc-line .lab small{font-size:13px;color:var(--ink-faint)}
.hsc-line .ldr{flex:1;border-bottom:1px dotted var(--card-line-cool);transform:translateY(-3px)}
.hsc-line .ln-dot{width:11px;height:11px;border-radius:3px;flex:none;margin-right:10px;align-self:center}
.hsc-line .val{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.hsc-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:18px 0 8px;background:#F4F6F8}
.hsc-bar i{display:block;height:100%;transition:width .35s cubic-bezier(.4,0,.2,1)}
#hscBarW{background:var(--blue)} #hscBarB{background:#9DB2C6} #hscBarF{background:var(--gold)}
.hsc-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft)}
.hsc-legend b{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink)}
.hsc-legend .chip{width:10px;height:10px;border-radius:3px}
.hsc-modelnote{font-size:13px;color:var(--ink-soft);margin-top:10px;font-style:italic}
.hsc-total{margin-top:16px;background:linear-gradient(135deg,#26353F,#2C3E4A);border-radius:14px;padding:16px 18px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px}
.hsc-total .t-lab{font-size:12.5px;font-weight:600;letter-spacing:.04em;opacity:.85}
.hsc-total .t-lab small{display:block;font-weight:400;opacity:.7;letter-spacing:0;font-size:11px;margin-top:2px}
.hsc-total .t-val{font-family:var(--serif);font-size:clamp(28px,5vw,38px);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.hsc-compare{display:flex;gap:12px;margin-top:26px}
/* The two comparison columns hold large currency figures ($240.40 at 27px), so their
   min-content (~138px each) put a ~335px floor on the whole card. Because the card shares
   the hero's grid column, that floor stretched the hero and caused horizontal scroll at
   320px. Let the columns shrink, and stack them on very narrow phones. */
.hsc-col{min-width:0}
@media(max-width:360px){
  .hsc-compare{flex-direction:column}
  .hsc-col .cv{font-size:24px}
  .hsc-save{position:static;transform:none;display:inline-block;margin-bottom:8px}
}
.hsc-col{flex:1;border:1px solid var(--card-line-cool);border-radius:14px;padding:16px 14px;text-align:center}
.hsc-col.them{background:#fff}
.hsc-col.us{background:linear-gradient(135deg,#26353F,#2C3E4A);border-color:#26353F;color:#fff;position:relative}
.hsc-col .cl{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.hsc-col.us .cl{color:rgba(255,255,255,.6)}
.hsc-col .cv{font-family:var(--serif);font-weight:600;font-size:27px;font-variant-numeric:tabular-nums;line-height:1}
.hsc-col.them .cv{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:#E24B4A;text-decoration-thickness:2px}
.hsc-col .sm{font-size:13px;color:var(--ink-soft);margin-top:6px}
.hsc-col.us .sm{color:rgba(255,255,255,.7)}
.hsc-col.us .sm{color:rgba(255,255,255,.55)}
.hsc-save{position:absolute;top:-19px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--navy);font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(233,188,1,.4)}
.hsc-cta{margin-top:20px}
.hsc-cta>h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 4px;color:var(--ink-strong)}
.hsc-cta>p{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px}
.hsc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Inputs carry an intrinsic min-content width, so a 2-up grid sets a ~279px floor on the
   whole card. That floor stretched the hero's grid column past a 320px viewport and caused
   horizontal scroll. Let them shrink, and stack the pair on very narrow phones. */
.hsc-select,.hsc-text{min-width:0}
@media(max-width:360px){.hsc-inputs{grid-template-columns:1fr}}
.hsc-inputs .full{grid-column:1/-1}
.hsc-err{border-color:#C0563B!important}
.hsc-errmsg{font-size:12.5px;color:#A8442C;margin-top:8px}
.hsc-btn{margin-top:14px;width:100%;border:0;cursor:pointer;background:var(--blue);color:#fff;font-family:var(--sans);font-weight:600;font-size:16px;padding:15px;border-radius:12px;transition:background .2s,transform .12s;box-shadow:0 8px 22px rgba(26,115,232,.30)}
.hsc-btn:hover{background:var(--blue-dark);transform:translateY(-1px)}
.hsc-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.hsc-fine{font-size:11.5px;color:var(--ink-faint);text-align:center;margin-top:18px;line-height:1.5}
.hsc-done{text-align:center;padding:12px 4px}
.hsc-done .mk{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:24px;color:#fff}
.hsc-done .mk.ok{background:var(--blue)} .hsc-done .mk.wait{background:var(--gold);color:var(--navy)}
.hsc-done h3{font-family:var(--serif);font-size:20px;margin:0 0 8px;color:var(--ink-strong)}
.hsc-done p{color:var(--ink-soft);font-size:14px;margin:0 auto 16px;max-width:36ch;line-height:1.5}
.hsc-link{display:inline-block;text-decoration:none;background:var(--blue);color:#fff;font-weight:600;font-size:15px;padding:13px 22px;border-radius:11px}
.hsc-link:hover{background:var(--blue-dark)}

/* A label beside a wide value box (e.g. "$150 /day" = ~147px) leaves too little room on a
   phone and the label wraps to 3 lines. Add `stack` to the field to put the label above a
   full-width value box on narrow screens. Same treatment .hsc-row2 already uses. */
@media(max-width:600px){
  .hsc-field.stack .hsc-field-top{flex-direction:column;align-items:stretch;gap:9px}
  .hsc-field.stack .hsc-num{width:100%;justify-content:space-between;padding:0 14px}
  .hsc-field.stack .hsc-num input{flex:1 1 auto;width:auto!important;text-align:left}
}

/* ===== volume pricing callout (K-12): shown when the campus count hits the group tier ===== */
.hsc-groupnote{margin-top:12px;display:flex;align-items:flex-start;gap:10px;background:rgba(233,188,1,.13);border:1px solid rgba(233,188,1,.45);border-radius:12px;padding:12px 14px;font-size:13px;color:#7A5A0F;line-height:1.45}
.hsc-groupnote[hidden]{display:none!important}
.hsc-groupnote b{color:#5E4409;font-weight:700}
.hsc-volhint{font-size:12.5px;color:var(--ink-faint);margin-top:7px;line-height:1.45}

/* ===== gated mode: flat-fee teaser shown before the lead unlocks the all-in total ===== */
.hsc-teaser{text-align:center;padding:8px 0 4px}
.hsc-teaser-fee{margin-bottom:12px}
.hsc-teaser-fee .ht-lab{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.hsc-teaser-fee .ht-val{font-family:var(--serif);font-size:clamp(40px,8vw,52px);font-weight:600;color:var(--ink-strong);line-height:1;font-variant-numeric:tabular-nums}
.hsc-teaser-fee .ht-unit{font-size:15px;font-weight:600;color:var(--ink-soft);margin-left:5px}
.hsc-teaser-note{font-size:14px;color:var(--ink-soft);max-width:42ch;margin:0 auto 16px;line-height:1.5}
.hsc-teaser-locked{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink-faint);background:#F4F6F8;border:1px dashed var(--card-line-cool);border-radius:12px;padding:13px 20px}

/* ===== calculator responsive overrides (extracted from the page media blocks) ===== */
@media(max-width:940px){
  .calc-card{max-width:480px;margin:0 auto;text-align:left}
}
@media(max-width:600px){
  .calc-card{margin-bottom:8px;scroll-margin-bottom:84px}
}
