@charset "UTF-8";
/* ==========================================================================
   ImSim Opportunity Builder
   A layer on top of imsim.css. Nothing here redefines the design system:
   it only adds the components a step-by-step tool needs that the landing
   page does not have — route cards, the progress rail, option picks, the
   running summary panel and the step navigation.

   01 Shell · 02 Progress · 03 Steps · 04 Picks · 05 Summary · 06 Nav
   07 Result · 08 Routes · 09 Mobile
   ========================================================================== */

/* 01 Shell ---------------------------------------------------------------- */
.stage{padding-block:calc(var(--top-h,var(--header-h)) + 88px) 120px}
@media (min-width:1200px){.stage{padding-block:calc(var(--top-h,var(--header-h)) + 112px) 152px}}

.bld{display:grid;gap:var(--s12)}
@media (min-width:1000px){
  .bld{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s16);align-items:start}
}
@media (min-width:1280px){.bld{gap:96px}}

/* 02 Progress ------------------------------------------------------------- */
.prog{display:flex;align-items:center;gap:var(--s6);margin-bottom:var(--s16)}
@media (min-width:1200px){.prog{margin-bottom:80px}}
.prog__t{font-family:"Geist Mono",ui-monospace,monospace;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg2);white-space:nowrap}
.prog__b{flex:1;height:2px;background:var(--rule);min-width:60px}
.prog__f{display:block;height:100%;width:0;background:var(--fg);
  transition:width .34s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.prog__f{transition:none}}

/* 03 Steps ---------------------------------------------------------------- */
.stp{display:none}
.stp[data-on="true"]{display:block}
.js .stp[data-on="true"]{animation:stp .38s cubic-bezier(.2,.7,.3,1) both}
@keyframes stp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .stp[data-on="true"]{animation:none}}

.q{font-size:clamp(1.75rem,3.6vw,2.875rem);font-weight:700;line-height:1.08;
  letter-spacing:-0.022em;max-width:17ch;margin:0;text-wrap:balance}
.q__u{font-size:1.0625rem;line-height:1.55;color:var(--fg2);max-width:46ch;margin:20px 0 0}

/* A group of controls inside one step */
.grp{margin-top:var(--s16)}
.grp+.grp{margin-top:var(--s16)}
/* the preview belongs to the choice above it, so it sits closer */
.grp--tight{margin-top:var(--s12)!important}
@media (min-width:1200px){.grp{margin-top:72px}.grp+.grp{margin-top:72px}}
.grp__l{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg2);margin:0 0 var(--s6);font-family:"Geist Mono",ui-monospace,monospace}

/* Inside a step the venue chips have room to wrap: nothing is hidden
   off the right edge the way a scrolling row would hide it. */
.stp .vt,.entry .vt{flex-wrap:wrap;overflow:visible;padding-bottom:0}

/* 04 Picks ---------------------------------------------------------------- */
.picks{display:grid;gap:var(--s3)}
@media (min-width:640px){.picks--2{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pick{display:block;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--steel-500);border-radius:var(--radius);
  padding:var(--s4) var(--s6);min-height:64px;cursor:pointer;color:inherit;font:inherit;
  transition:border-color .14s,background-color .14s,box-shadow .14s}
.pick:hover{border-color:var(--ink)}
.pick:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pick[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pick__t{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-0.008em;line-height:1.35}
.pick__n{display:block;font-size:.875rem;line-height:1.5;color:var(--fg2);margin-top:6px}
.pick[aria-pressed="true"] .pick__n{color:var(--steel-700)}
/* .pick sets its own display, so hiding one needs to win over it */
.pick[hidden]{display:none}

/* A pick that carries a figure on the right: budget bands, capacity bands */
.pick--fig{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s6)}
.pick--fig .pick__f{font-family:"Geist Mono",ui-monospace,monospace;font-size:.9375rem;
  color:var(--fg2);white-space:nowrap;flex:none}

/* A big readout beneath a slider: capacity, investment window */
.read{border-top:2px solid var(--fg);padding-top:var(--s4);margin-top:var(--s8)}
.read b{display:block;font-size:clamp(2rem,4.4vw,3.25rem);font-weight:700;line-height:1;
  letter-spacing:-0.032em}
.read b .u{display:inline;font-size:.4em;font-weight:400;letter-spacing:0;margin-left:.14em}
.read>span{display:block;font-size:.875rem;color:var(--fg2);margin-top:var(--s3);max-width:44ch;line-height:1.5}

/* The machine behind the current choice, shown while the choice is made */
.mprev{display:grid;gap:var(--s6);margin:0;align-items:center}
@media (min-width:640px){.mprev{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s8)}}
.mprev__i{border-radius:var(--radius);overflow:hidden;background:var(--ink-surface)}
.mprev__i img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.js .mprev__i img{animation:mfade .32s ease both}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.js .mprev__i img{animation:none}}
.mprev__c b{display:block;font-size:1.375rem;font-weight:700;letter-spacing:-0.018em;line-height:1.15}
.mprev__c span{display:block;font-size:.9375rem;line-height:1.5;color:var(--fg2);
  margin-top:12px;max-width:40ch}

/* The running summary panel lives in imsim.css: both pages use it. */

/* 06 Nav ------------------------------------------------------------------ */
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);
  margin-top:var(--s16);padding-top:var(--s8);border-top:1px solid var(--rule)}
@media (min-width:1200px){.nav{margin-top:80px}}
.back{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0;
  background:none;border:0;cursor:pointer;color:var(--fg2);font:inherit;font-size:.9375rem;
  font-weight:600;transition:color .14s}
.back:hover,.back:focus-visible{color:var(--fg)}
.back svg{transition:transform .16s}
.back:hover svg{transform:translateX(-3px)}
.nav .btn{min-width:200px}

/* 07 Result --------------------------------------------------------------- */
.rslt__big{display:block;font-size:clamp(3rem,8vw,6rem);font-weight:700;line-height:.94;
  letter-spacing:-0.038em;margin:var(--s6) 0 0}
.rslt__big .cur{font-size:.34em;font-weight:400;margin-right:.1em;letter-spacing:0}
.rslt__row{display:grid;gap:var(--s6) var(--s8);grid-template-columns:repeat(2,minmax(0,1fr));
  margin:var(--s16) 0 0;padding-top:var(--s8);border-top:1px solid var(--rule)}
@media (min-width:900px){.rslt__row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rslt__row dt{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg2)}
.rslt__row dd{margin:var(--s2) 0 0;font-size:1.125rem;font-weight:600;letter-spacing:-0.01em}

/* Going back to the answers is a real button, not a footnote */
.btn--ghost svg{flex:none;transition:transform .16s}
.btn--ghost:hover svg,.btn--ghost:focus-visible svg{transform:translateX(-3px)}

/* A case study reduced to its proof: no card, no shadow */
.proof{padding-top:22px;border-top:2px solid var(--fg)}
.proof h3{font-size:1.125rem;font-weight:600;letter-spacing:-0.008em;margin:0}
.proof .m{font-family:"Geist Mono",ui-monospace,monospace;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg2);margin:0 0 12px;display:block}
.proof p{font-size:.9375rem;line-height:1.5;color:var(--fg2);margin:12px 0 0}

/* 08 Routes --------------------------------------------------------------- */
/* Three doors, side by side. Choosing one dims the others and opens the
   conditional question underneath. */
.routes{display:grid;gap:var(--s8);margin-top:72px}
@media (min-width:760px){.routes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12)}}
@media (min-width:1000px){.routes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8)}}
@media (min-width:1280px){.routes{gap:var(--s12)}}

.route{display:flex;flex-direction:column;text-align:left;background:none;border:0;padding:0;
  cursor:pointer;color:inherit;font:inherit;border-radius:var(--radius);
  transition:opacity .24s}
.route:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.routes[data-picked="true"] .route[aria-expanded="false"]{opacity:.4}
.routes[data-picked="true"] .route[aria-expanded="false"]:hover{opacity:.7}
.route__i{overflow:hidden;border-radius:var(--radius);background:var(--ink-surface);position:relative}
.route__i img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.route:hover .route__i img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.route__i img,.route:hover .route__i img{transition:none;transform:none}}
.route__h{font-size:1.3125rem;font-weight:600;letter-spacing:-0.012em;margin:24px 0 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-top:18px;border-top:2px solid currentColor}
.route[aria-expanded="true"] .route__h{border-top-color:var(--accent-red)}
.route__h svg{flex:none;transition:transform .16s;align-self:center}
.route:hover .route__h svg{transform:translateX(4px)}
.route[aria-expanded="true"] .route__h svg{transform:rotate(90deg)}
.route__p{font-size:.9375rem;line-height:1.5;color:var(--fg2);margin:12px 0 0;max-width:34ch}

/* The conditional question that opens beneath the three doors */
.entry{margin-top:var(--s16);padding-top:var(--s12);border-top:1px solid var(--rule)}
@media (min-width:1200px){.entry{margin-top:80px}}
.js .entry:not([hidden]){animation:stp .38s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){.js .entry:not([hidden]){animation:none}}
.entry__other{max-width:44ch;margin-top:var(--s8)}

/* Chips and one-line fields have to survive on the ink surface too */
.s-ink .vt label{background:transparent;color:var(--white);border-color:rgba(255,255,255,.38)}
.s-ink .vt label:hover{border-color:var(--white)}
.s-ink .vt input:checked+label{background:var(--white);border-color:var(--white);color:var(--ink)}
.s-ink .vt input:focus-visible+label{outline:2px solid var(--white);outline-offset:2px}
.s-ink .f{border-bottom-color:rgba(255,255,255,.38)}
.s-ink .f:focus-within{border-bottom-color:var(--white);box-shadow:0 1px 0 0 var(--white)}
.s-ink .f input{color:var(--white)}
.s-ink .f input::placeholder{color:var(--steel-300)}

/* Audience is the one multi-select on the page: chips, filled when chosen */
.chips .chip{min-height:44px;cursor:pointer;background:var(--surface);color:inherit;
  font:inherit;font-size:.875rem;font-weight:500;text-transform:none;letter-spacing:0;
  border-color:var(--steel-500);transition:background-color .14s,border-color .14s,color .14s}
.chips .chip:hover{border-color:var(--ink)}
.chips .chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.chips .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* 09 Mobile --------------------------------------------------------------- */
@media (max-width:999px){
  /* The summary leads on small screens: the number is the reason to continue */
  .bld{gap:var(--s8)}
  .sum{order:-1;padding:var(--s6);gap:var(--s4);
    position:sticky;top:calc(var(--top-h,var(--header-h)) + var(--s2));z-index:5}
  .sum__hd{border-bottom:0;padding-bottom:0}
  .sum__rows,.sum__note{display:none}
  .nav .btn{width:100%}
  .nav{flex-direction:column-reverse;align-items:stretch}
  .back{align-self:flex-start}
}

/* Print ------------------------------------------------------------------- */
@media print{
  .prog,.nav,.hdr,.menu,.skip{display:none!important}
  .stp{display:block!important}
}

/* Two figures at the top of a business result: what year one earns, and what
   three years leave once the stated budget is taken out. */
.figs{display:grid;gap:var(--s8);margin-top:var(--s6)}
@media (min-width:760px){.figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12)}}
.fig .rslt__big{font-size:clamp(2.5rem,6vw,4.25rem);margin:0}
.fig--2 .rslt__big{color:var(--fg2)}
.fig__l{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg2);margin:20px 0 0}
.fig__s{font-size:.9375rem;line-height:1.5;color:var(--fg2);margin:8px 0 0;max-width:36ch}

/* Filter row over the case studies: same chips as the audience question */
.filt{margin:var(--s12) 0 var(--s16)}
@media (min-width:1200px){.filt{margin:56px 0 72px}}
.chip__n{font-family:"Geist Mono",ui-monospace,monospace;font-size:.75rem;margin-left:10px;
  opacity:.55}

/* A step that cannot be completed yet says so, on the label and on the button */
.grp__hint{font-family:Geist,sans-serif;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--fn-error);margin-left:10px}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn:disabled:hover{--bb:var(--deep-red);--bd:var(--deep-red)}