/* ============================================================================
   Bootstrapped Studios — project estimator
   Loaded only by estimate.html. Everything here inherits the V2.1 monochrome
   system from bs.css: no hue, depth from luminance and hairlines.

   The layout is deliberately two column on desktop with the result pinned. A
   range that scrolls out of sight while you are still answering questions is
   not a live range. On narrow screens the panel unpins and sits inline after
   the questions, which is the reading order anyway.
   ========================================================================= */

/* An author `display` on a class outranks the UA sheet's [hidden] rule, which
   is how the result CTAs leaked into the empty state. Guard it once here. */
[hidden]{display:none !important}

.est-page{position:relative;z-index:4;max-width:var(--max,1420px);margin:0 auto;padding:0 var(--gut)}

/* ------------------------------------------------------------------ hero -- */
.est-hero{padding:clamp(54px,11vh,132px) 0 clamp(30px,5vh,58px);max-width:52ch}
.est-eyebrow{
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 clamp(16px,2.6vh,26px);
}
.est-h{
  font-family:var(--font-d);font-weight:250;text-transform:uppercase;
  font-size:clamp(2.7rem,9.5vw,7.2rem);line-height:.88;letter-spacing:.01em;
  margin:0;color:var(--ink);
}
.est-h2{color:var(--ink-mute)}
.est-sub{
  margin:clamp(18px,3vh,30px) 0 0;max-width:46ch;
  font-size:1rem;line-height:1.65;color:var(--ink-mute);
}

/* ------------------------------------------------------------------ grid -- */
.est-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);
  gap:clamp(28px,4.4vw,72px);align-items:stretch;
  padding-bottom:clamp(48px,8vh,110px);
}
@media (max-width:920px){ .est-grid{grid-template-columns:1fr} }

/* ----------------------------------------------------------------- steps -- */
.est-step{border:0;padding:0;margin:0 0 clamp(34px,5vh,58px)}
.est-step legend{
  display:flex;align-items:baseline;gap:14px;padding:0;margin:0 0 clamp(14px,2.2vh,20px);
  font-family:var(--font-d);font-weight:300;text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.45rem);letter-spacing:.045em;color:var(--ink);
}
.est-n{
  font-family:var(--font-m);font-size:.58rem;letter-spacing:.2em;color:var(--ink-faint);
  flex:none;
}
.est-hint{
  margin:-6px 0 clamp(14px,2.2vh,20px);font-family:var(--font-m);
  font-size:.62rem;line-height:1.7;letter-spacing:.02em;color:var(--ink-faint);max-width:70ch;
}

/* pick: the radio itself is the control, the box is only its skin */
.picks{display:flex;flex-direction:column;gap:9px}
.pick,.tick{position:relative;display:block;cursor:pointer}
/* visually hidden but still a real, focusable, clickable input. Not
   width:0 (browsers scroll oddly to a zero box on focus) and not
   pointer-events:none (that blocks programmatic and assistive clicks). */
.pick input,.tick input,.chip input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;
  top:50%;left:12px;
}
.pick-b{
  display:block;padding:15px 18px;border:1px solid var(--hair-soft);border-radius:3px;
  background:rgba(255,255,255,.014);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.pick-b b{
  display:block;font-family:var(--font-d);font-weight:400;font-size:1rem;
  letter-spacing:.005em;color:var(--ink-mute);transition:color .25s var(--ease);
}
.pick-b i{
  display:block;font-style:normal;margin-top:5px;font-size:.83rem;line-height:1.55;
  color:var(--ink-faint);
}
.pick:hover .pick-b{border-color:var(--hair);background:rgba(255,255,255,.03)}
.pick input:checked + .pick-b{
  border-color:var(--ink);background:rgba(255,255,255,.06);
  box-shadow:inset 2px 0 0 var(--ink);
}
.pick input:checked + .pick-b b{color:var(--ink)}
.pick input:focus-visible + .pick-b{outline:2px solid var(--ink);outline-offset:3px}

/* tick */
.ticks{display:flex;flex-direction:column;gap:2px}
.tick-b{
  display:block;position:relative;padding:11px 4px 11px 30px;
  font-size:.92rem;line-height:1.5;color:var(--ink-faint);
  transition:color .22s var(--ease);
}
.tick-b::before{
  content:"";position:absolute;left:2px;top:13px;width:16px;height:16px;border-radius:2px;
  border:1px solid var(--hair);background:rgba(0,0,0,.4);
  transition:all .22s var(--ease);
}
.tick:hover .tick-b{color:var(--ink-mute)}
.tick input:checked + .tick-b{color:var(--ink)}
.tick input:checked + .tick-b::before{
  background:var(--ink);border-color:var(--ink);
  /* the check is drawn, not an emoji or a webfont glyph */
  background-image:linear-gradient(45deg,transparent 42%,#000 42%,#000 52%,transparent 52%),
                   linear-gradient(-45deg,transparent 55%,#000 55%,#000 65%,transparent 65%);
  background-size:100% 100%;
}
.tick input:focus-visible + .tick-b::before{outline:2px solid var(--ink);outline-offset:2px}
.tick-b i{display:block;font-style:normal;margin-top:4px;font-size:.78rem;color:var(--ink-faint);line-height:1.55}
.est-pri{margin-top:clamp(16px,2.6vh,24px);padding-top:clamp(16px,2.6vh,24px);border-top:1px solid var(--hair-soft)}

/* integrations */
.est-int{margin-top:clamp(18px,3vh,28px)}
.est-il{
  display:block;font-family:var(--font-m);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;
}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{position:relative;cursor:pointer}
.chip span{
  display:block;padding:8px 16px;border-radius:999px;border:1px solid var(--hair-soft);
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);transition:all .22s var(--ease);
}
.chip:hover span{color:var(--ink-mute);border-color:var(--hair)}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#000}
.chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}

/* ----------------------------------------------------------------- panel -- */
.est-panel{position:relative}
.est-sticky{
  position:sticky;top:calc(var(--nav-h,64px) + 22px);
  border:1px solid var(--hair);border-radius:4px;padding:clamp(20px,2.6vw,30px);
  background:rgba(4,4,5,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
@media (max-width:920px){ .est-sticky{position:static} }
.est-plabel{
  margin:0 0 12px;font-family:var(--font-m);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);
}
.est-empty{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-faint)}
.est-range{
  margin:0 0 16px;font-family:var(--font-d);font-weight:250;
  font-size:clamp(1.55rem,3.4vw,2.5rem);line-height:1.05;letter-spacing:-.005em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.est-caveat{margin:0;font-size:.85rem;line-height:1.6;color:var(--ink-mute)}
.est-notes{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.est-notes:empty{display:none}
.est-notes li{
  position:relative;padding-left:15px;font-size:.8rem;line-height:1.55;color:var(--ink-mute);
}
.est-notes li::before{
  content:"";position:absolute;left:0;top:.6em;width:6px;height:1px;background:var(--ink-faint);
}
.est-fine{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hair-soft);
  font-size:.72rem;line-height:1.6;color:var(--ink-faint);
}
.est-actions{margin-top:clamp(18px,2.6vh,26px);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.est-actions .btn{width:100%;justify-content:center}

/* ----------------------------------------------------------------- close -- */
.est-close{
  padding:clamp(44px,7vh,96px) 0 clamp(60px,10vh,130px);
  border-top:1px solid var(--hair-soft);max-width:64ch;
}
.est-ch{
  font-family:var(--font-d);font-weight:250;text-transform:uppercase;
  font-size:clamp(1.7rem,4.6vw,3.2rem);line-height:.95;letter-spacing:.02em;margin:0;
}
.est-csub{margin:clamp(14px,2.2vh,20px) 0 clamp(26px,4vh,40px);font-size:.98rem;line-height:1.65;color:var(--ink-mute)}

@media (prefers-reduced-motion:reduce){
  .pick-b,.tick-b,.tick-b::before,.chip span{transition:none}
}