/* Pricing page: "Dial in your build". Questions on the left, the dial and what fits on the right.
   Uses the tokens from site.css, nothing new. */
.est [hidden] { display: none !important; }
.est { padding: 64px 0 104px; min-height: calc(100svh - var(--nav-h)); }
.est .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
.est-head h1 { font-size: clamp(2rem, 4.2vw, 3.6rem); text-transform: uppercase; line-height: 1.02; margin-top: 20px; }
.est-head h1 span { color: var(--deep); }
.est-head .lead { margin-top: 20px; }

.est-card { margin-top: 40px; padding: 32px; background: var(--panel); border: var(--line); border-radius: var(--r-frame); }
.est-noscript-links a { color: var(--sky); font-weight: 600; }

/* Progress: four steps on a small scale */
.est-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.est-step-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.est-step-label b { color: var(--ink); }
.est-track { position: relative; flex: 1; height: 10px;
  background: linear-gradient(var(--steel), var(--steel)) left bottom / 100% 1px no-repeat,
              repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 25%) left bottom / 100% 10px no-repeat; }
.est-track i { position: absolute; left: 0; bottom: 0; height: 3px; width: 25%; background: var(--sky); border-radius: 2px; transition: width .4s ease; }

/* Questions: one screen per step, each question its own fieldset */
.est-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.est-step h2 { font-size: clamp(1.15rem, 2vw, 1.5rem); text-transform: uppercase; line-height: 1.15; }
.est-hint { margin-top: 8px; font-size: 14px; color: var(--muted); }
.q { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; }
.q legend, .field label { display: block; padding: 0; font-weight: 600; font-size: 16px; line-height: 1.4; }
.opt-tag { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.opts-wide { grid-template-columns: 1fr; }
.opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt span b { font-family: var(--display); font-size: 14px; text-transform: uppercase; margin-right: 4px; }

/* Typed answers */
.field input, .field textarea { display: block; width: 100%; margin-top: 10px; padding: 14px 16px; font: 16px/1.5 var(--body); color: var(--ink);
  background: var(--ground); border: var(--line); border-radius: var(--r-btn); transition: border-color .2s; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--sky); outline-offset: 2px; border-color: var(--sky); }
.field input[aria-invalid="true"] { border-color: #FF9B9B; }
.err { margin-top: 8px; font-size: 14px; color: #FF9B9B; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Follow ups grouped by service */
.svc-group { margin-top: 30px; padding-top: 24px; border-top: var(--line); }
.svc-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 18px; }
.svc-tag { font-size: 12px; color: var(--deep); }
.svc-group .q:first-of-type { margin-top: 12px; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; font-size: 16px; line-height: 1.35;
  background: var(--ground); border: var(--line); border-radius: var(--r-btn); cursor: pointer; transition: border-color .2s, background-color .2s; }
.opt span::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--steel); transition: background-color .2s; }
.opt:hover span { border-color: var(--muted); }
.opt input:checked + span { background: var(--fill); border-color: var(--sky); box-shadow: inset 0 0 0 1px var(--sky); }
.opt input:checked + span::before { background: var(--sky); }
.opt input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }

.est-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.est-nav #est-next { margin-left: auto; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.est .btn-ghost { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); background: none; border: 0; cursor: pointer; }
.est .btn-ghost:hover { background: var(--ink); color: var(--navy); }
.est .btn-sky { border: 0; cursor: pointer; }

/* Result */
.est-total { margin-top: 14px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; color: var(--sky); outline: none; }
.est-total-words { font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); text-transform: uppercase; }
.est-monthly { margin-top: 10px; color: var(--muted); }
.est-lines { list-style: none; margin-top: 24px; border-top: var(--line); }
.est-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: var(--line); }
.est-lines b { color: var(--ink); white-space: nowrap; }
.est-fine { margin-top: 20px; font-size: 14px; color: var(--muted); }
.est-next { margin-top: 18px; font-size: 15px; color: var(--ink); }
.est-next a { color: var(--sky); font-weight: 600; text-decoration: none; }

/* The dial */
.dial-side { position: sticky; top: 32px; padding-top: 8px; }
.dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.dial .tick { stroke: var(--steel); stroke-width: 2; stroke-linecap: round; }
.dial .tick.major { stroke: var(--ink); stroke-width: 3; }
.needle { transform-origin: 200px 212px; transform: rotate(-82deg); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.needle rect, .needle circle { fill: var(--sky); }
.dial-ends { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--muted); }

.fits { margin-top: 36px; padding: 24px; background: var(--panel); border: var(--line); border-radius: var(--r-frame); }
.fits-title { font-size: 12px; color: var(--deep); }
.fits ul { list-style: none; margin-top: 12px; }
.fits li { padding: 12px 0; border-bottom: var(--line); }
.fits li:last-child { border-bottom: 0; padding-bottom: 0; }
.fits li b { display: block; font-family: var(--display); font-size: 16px; text-transform: uppercase; }
.fits li span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.fits .fits-empty { font-size: 14px; color: var(--muted); border: 0; }

@media (max-width: 900px) {
  .est { padding: 40px 0 72px; }
  .est .wrap { grid-template-columns: 1fr; gap: 28px; }
  .dial-side { position: static; order: -1; display: none; }
  .est-card { padding: 22px 16px; margin-top: 28px; }
  .opts { grid-template-columns: 1fr 1fr; }
  .opts-wide { grid-template-columns: 1fr; }
  .opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opts-3 .opt span { padding: 12px 10px; justify-content: center; }
  .opts-3 .opt span::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .needle, .est-track i { transition: none; }
}