/* Shared by /pricing and /es/pricing, same reason as site.css: one look, one file. */
:root {
    --ink:#0f172a; --muted:#5a6577; --line:#e2e8f0; --bg:#f8fafc; --card:#fff;
    --blue:#2563eb; --blue-hi:#1d4ed8; --blue-soft:#eff4ff; --green:#15803d; --green-soft:#ecfdf3;
  }
  * { box-sizing:border-box; }
  body {
    margin:0; background:var(--bg); color:var(--ink); line-height:1.6;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap { max-width:1000px; margin:0 auto; padding:0 20px; }
  a { color:var(--blue); }

  header { display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:16px; flex-wrap:wrap; }
  .brand { font-weight:800; font-size:26px; letter-spacing:-.025em; line-height:1; }
  .brand span { color:var(--blue); }
  .nav { display:flex; gap:8px; align-items:center; }
  .nav .lnk { color:var(--ink); text-decoration:none; font-weight:620; font-size:15px;
              padding:10px 14px; border-radius:10px; }
  .nav .lnk:hover { background:var(--bg); }
  .langs { flex:none; display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; margin:0 4px; }
  .langs a { padding:9px 11px; font-size:13.5px; font-weight:700; color:var(--muted);
             text-decoration:none; letter-spacing:.03em; }
  .langs a + a { border-left:1px solid var(--line); }
  .langs a:hover { background:var(--bg); color:var(--ink); }
  .langs a[aria-current] { background:var(--blue-soft); color:var(--blue); }
  .btn {
    display:inline-block; background:var(--blue); color:#fff; text-decoration:none;
    padding:11px 18px; border-radius:10px; font-weight:650; border:none; cursor:pointer;
    font-size:15px; font-family:inherit;
  }
  .btn:hover { background:var(--blue-hi); }
  .btn.ghost { background:#fff; color:var(--blue); border:1px solid var(--line); }
  .btn[disabled] { background:#9aa3b2; cursor:default; }

  .hero { padding:52px 0 36px; max-width:640px; }
  h1 { font-size:clamp(32px,5.6vw,44px); line-height:1.08; margin:0 0 14px; letter-spacing:-.03em; }
  .lede { font-size:19px; color:var(--muted); margin:0; }

  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; padding-bottom:12px; }
  .plan {
    background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 24px 24px;
    display:flex; flex-direction:column; gap:14px; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.05);
  }
  .plan.best { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), 0 12px 30px rgba(29,78,216,.14); }
  .tag {
    align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
    background:var(--blue-soft); color:var(--blue); border-radius:999px; padding:4px 11px;
  }
  .plan h2 { margin:0; font-size:21px; font-weight:750; letter-spacing:-.01em; }
  .price { display:flex; align-items:baseline; gap:5px; }
  .price .amt { font-size:42px; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
  .price .per { color:var(--muted); font-size:15px; }
  .next { color:var(--muted); font-size:13px; margin:-4px 0 12px; }
  .taxnote { color:var(--muted); font-size:13px; margin:-4px 0 12px; }
  /* The hero's version of the same note. .taxnote sits inside the plan card and carries a
     negative top margin to tuck under the price, which is wrong out here. */
  /* .lede has margin:0, so ANY negative top margin here lands on its last line --
     which is exactly what -14px did. */
  .taxline { color:var(--muted); font-size:14.5px; margin:10px 0 0; line-height:1.5; }
  ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; font-size:15px; }
  li::marker { color:var(--blue); }
  .plan form { display:flex; flex-direction:column; gap:9px; margin-top:auto; }
  input[type=email] {
    width:100%; padding:11px 13px; font-size:15px; font-family:inherit;
    border:1px solid #cbd5e1; border-radius:10px;
  }
  input[type=email]:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,78,216,.15); }
  .err { color:#dc2626; font-size:13.5px; }

  .needs {
    margin:34px 0 0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 24px;
  }
  .needs h3 { margin:0 0 10px; font-size:16px; }
  .needs ul { font-size:15px; color:var(--muted); }
  .needs strong { color:var(--ink); }

  .faq { padding:34px 0 70px; display:flex; flex-direction:column; gap:0; }
  .faq h3 { margin:0 0 6px; font-size:13px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); padding-bottom:12px; border-bottom:1px solid var(--line); }
  .qa { padding:16px 0; border-bottom:1px solid var(--line); }
  .qa dt { font-weight:700; margin-bottom:4px; }
  .qa dd { margin:0; color:var(--muted); font-size:15.5px; }

  footer { padding:26px 0 50px; color:var(--muted); font-size:14.5px; border-top:1px solid var(--line); }

  /* --- the hire framing (2026-08-28) --- */
  .jd { margin:30px 0 0; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .jd .hd { background:var(--ink); color:#fff; padding:16px 22px; }
  .jd .hd .t { font-size:18px; font-weight:800; letter-spacing:-.02em; }
  .jd .hd .s { font-size:13px; opacity:.75; margin-top:3px; }
  .jd .bd { padding:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; align-items:start; }
  /* The middle column used to list what the job is. The demo above now performs all of it,
     so the list was the page describing something the reader had just watched. Gone; the
     hours it covers get to be a number instead of four bullets. */
  .jd .hours { font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--ink);
               font-variant-numeric:tabular-nums; }
  .jd .hours span { font-size:19px; font-weight:750; letter-spacing:-.02em; }
  .jd .when { margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--muted); }
  .jd .when b { color:var(--ink); font-weight:650; }
  .jd .also { margin:0; padding:16px 22px 20px; border-top:1px solid var(--line); font-size:14.5px;
              line-height:1.55; color:var(--muted); }
  .jd .also b { color:var(--ink); }
  .jd h4 { margin:0 0 9px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .jd ul { margin:0; padding-left:18px; }
  .jd li { margin:0 0 6px; font-size:14.5px; line-height:1.45; }
  .payroll { margin:26px 0 0; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); }
  .payroll table { border-collapse:collapse; width:100%; font-size:14.5px; min-width:460px; }
  .payroll th { text-align:left; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
                padding:12px 18px; border-bottom:1px solid var(--line); }
  .payroll td { padding:13px 18px; border-bottom:1px solid var(--line); }
  .payroll tr:last-child td { border-bottom:0; }
  .payroll .amt { font-weight:800; white-space:nowrap; }
  .payroll .win td { background:var(--green-soft); }
  .payroll .win .amt { color:var(--green); }
  .be { margin:22px 0 0; padding:22px 24px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
  .be label { display:block; font-size:15.5px; font-weight:650; color:var(--ink); margin:0 0 12px; max-width:52ch; }
  .be-row { display:flex; align-items:center; max-width:220px;
            border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
  .be-cur { padding:0 4px 0 13px; font-size:19px; font-weight:700; color:var(--muted); }
  .be input { flex:1; min-width:0; border:none; outline:none; padding:12px 13px 12px 4px;
              font:700 19px/1 inherit; color:var(--ink); background:transparent;
              font-variant-numeric:tabular-nums; }
  .be-out { margin:14px 0 0; font-size:16.5px; line-height:1.55; color:var(--ink); min-height:1.6em; }
  .be-out b { font-variant-numeric:tabular-nums; }
  .be-fine { margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); max-width:62ch; }
  .tblnote { margin:14px 0 0; font-size:14.5px; line-height:1.55; color:var(--muted); max-width:66ch; }
  .math { margin:26px 0 0; padding:24px; background:var(--ink); color:#fff; border-radius:12px; }
  .math .big { font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.25; }
  .math .big em { font-style:normal; color:#fde68a; }
  .math p { margin:12px 0 0; font-size:14.5px; line-height:1.6; opacity:.82; }
  .honest { margin:26px 0 0; padding:20px 22px; border:1px solid var(--line); border-left:4px solid var(--muted);
            border-radius:0 12px 12px 0; background:var(--card); }
  .honest h3 { margin:0 0 9px; font-size:16px; }
  .honest p { margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); }

  .refund-note { margin:18px auto 0; font-size:14.5px; color:var(--muted); text-align:center;
                 max-width:66ch; line-height:1.55; }
  .tryit { margin:36px 0 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
           gap:32px; align-items:center; }
  .tryit h3 { margin:0 0 8px; font-size:20px; letter-spacing:-.02em; }
  .tryit p { margin:0 0 16px; font-size:15.5px; line-height:1.6; color:var(--muted); }
  .tryit .acts { margin:0; display:flex; gap:10px; flex-wrap:wrap; }
  .mini { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
  .mini-hd { font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
             color:var(--blue); margin-bottom:14px; }
  .mini-ln { max-width:90%; padding:10px 14px; border-radius:13px; font-size:14.5px;
             line-height:1.45; margin-bottom:9px; }
  .mini-ln.them { background:#f1f5f9; border:1px solid var(--line); color:var(--ink); border-top-left-radius:4px; }
  .mini-ln.us { background:var(--blue); color:#fff; border-top-right-radius:4px; margin-left:auto; }
  .mini-ft { font-size:12.5px; color:var(--muted); margin-top:13px; }
  @media (max-width:800px){ .tryit { grid-template-columns:1fr; gap:24px; } }

/* The static fallback card's contact line. Only ever visible when JS is off or /api/plans
   fails — which is exactly the moment a visitor needs a way to reach a person. */
.plan .fallback-note{ font-size:14.5px; color:var(--muted); margin:16px 0 0; line-height:1.55; }
.plan .fallback-note a{ color:var(--blue); font-weight:600; }

/* Head-count picker. Five taps, not a dropdown: a dropdown on a phone hides the choice behind
   a sheet, and the whole point is that the dealer sees his own team size and the price move. */
.plan .seatq{ font-size:15.5px; color:var(--muted); margin:14px 0 8px; }
.plan .seats{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:18px; }
/* Grid, not flex-wrap: wrapping put the fifth button alone on a second row stretched full
   width, which reads as the recommended option rather than the one that did not fit. */
.plan .seat{ flex:1 1 0; padding:13px 0; font:700 18px/1 inherit; cursor:pointer;
             border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:11px; }
.plan .seat:hover{ border-color:var(--blue); }
.plan .seat[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; }
.plan .seat:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }