/* ==========================================================
   /build-before-you-buy/intake: the page layer only.

   WHAT THIS FILE OWNS
   The intake bar, the header, the two-column layout (step rail and the
   working card), every field control the renderer draws (text, option
   cards, the screenshot drop zone), the review summary, the confirmation,
   and their responsive and reduced-motion restatements.

   WHAT IT DEPENDS ON
   /folio.css, loaded first: tokens, reset, .wrap, .eyebrow, .display, .lead,
   .fine, .num, .btn. This file adds the page layer and never restates the
   system. Signal Blue is reserved for focus, the selected state and links;
   Archive Amber appears once, on the price.
   ========================================================== */

.bi-page{min-height:100svh}
.bi-page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 78% -6%,rgba(76,141,255,.10),transparent 44%)}

/* ---------------- bar ---------------- */
.bi-bar{position:sticky;top:0;z-index:40;background:rgba(11,15,20,.86);border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.bi-bar-in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.bi-logo img{width:132px;height:auto}
.bi-back{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-family:var(--mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;transition:color .18s;min-height:44px}
.bi-back:hover{color:var(--text)}
.bi-back span{color:var(--blue);font-size:15px}

/* ---------------- header ---------------- */
.bi-main{max-width:1160px;padding-top:64px;padding-bottom:120px}
.bi-loading,.bi-noscript p{color:var(--muted)}
.bi-noscript{padding:40px var(--pad)}
.bi-head{max-width:760px}
.bi-head h1{margin-top:20px}
.bi-head .lead{margin-top:18px;max-width:58ch}
.bi-facts{display:flex;flex-wrap:wrap;margin:30px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bi-facts li{flex:1 1 140px;padding:14px 18px 14px 0;margin-right:18px;border-right:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.bi-facts li:last-child{border-right:0;margin-right:0}
.bi-facts b{display:block;margin-bottom:3px;font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text)}
.bi-facts b.price{color:var(--amber)}

/* ---------------- layout ---------------- */
.bi-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start;margin-top:44px}
.bi-rail{position:sticky;top:calc(var(--nav-h) + 24px);min-width:0}
.bi-steps{display:flex;flex-direction:column;gap:2px}
.bi-steps button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:9px;text-align:left;
  color:var(--dim);font-size:14px;line-height:1.3;cursor:default;transition:background .16s,color .16s}
.bi-steps button.is-reach{cursor:pointer}
.bi-steps button.is-reach:hover{background:rgba(244,241,234,.04);color:var(--text)}
.bi-steps button.is-done{color:var(--muted)}
.bi-steps button[aria-current="step"]{background:rgba(76,141,255,.09);color:var(--text)}
.bi-steps .k{flex:none;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--dim)}
.bi-steps .is-done .k{border-color:rgba(111,185,143,.45);color:#7BC79E}
.bi-steps [aria-current="step"] .k{border-color:rgba(76,141,255,.62);color:var(--text);background:rgba(76,141,255,.12)}
.bi-rail-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;line-height:1.6;max-width:26ch}
.bi-rail-note a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(76,141,255,.55);text-underline-offset:3px}

/* ---------------- the card ---------------- */
.bi-form{position:relative;min-width:0;border:1px solid var(--line-2);border-radius:18px;overflow:clip;
  background:linear-gradient(160deg,var(--surface-2),#0D1218 72%);box-shadow:var(--shadow),0 1px 0 rgba(244,241,234,.05) inset}
.bi-progress{position:sticky;top:var(--nav-h);z-index:5;display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;
  padding:15px 34px 14px;border-bottom:1px solid var(--line);background:rgba(21,27,35,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.bi-progress-where{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--text)}
.bi-progress-where span{color:var(--dim);letter-spacing:0}
.bi-progress-left{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:right}
.bi-bar-track{grid-column:1 / -1;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.bi-bar-fill{display:block;height:100%;width:0;background:var(--blue);box-shadow:0 0 14px rgba(76,141,255,.6);transition:width .35s var(--ease-out)}

.bi-step{padding:30px 34px 10px}
.bi-step .num{color:rgba(76,141,255,.7)}
.bi-step h2{margin:14px 0 8px;font-family:var(--sans);font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.bi-help{max-width:62ch;color:var(--dim);font-size:14px;line-height:1.6}
.bi-alert{margin:18px 0 0;padding:12px 14px;border:1px solid rgba(215,168,79,.5);border-left-width:3px;border-radius:9px;
  background:rgba(215,168,79,.07);color:var(--text);font-size:13.5px;line-height:1.5}
.bi-alert b{font-weight:500}
.bi-resume{margin:16px 0 -6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#7BC79E}

/* ---------------- fields ---------------- */
.bi-contact > .bi-hint{margin-top:18px}
.bi-field{padding:24px 0;border-bottom:1px solid var(--line);margin:0;border-left:0;border-right:0;border-top:0;min-width:0}
.bi-step .bi-field:first-of-type{margin-top:8px}
.bi-field:last-child{border-bottom:0}
.bi-field[hidden]{display:none}
.bi-q{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;color:var(--text);font-size:15.5px;font-weight:500;line-height:1.4;padding:0}
legend.bi-q{float:left;width:100%;margin-bottom:0}
legend.bi-q + *{clear:both}
.bi-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  padding:3px 7px;border:1px solid var(--line-2);border-radius:4px;white-space:nowrap}
.bi-tag.is-need{color:var(--blue);border-color:rgba(76,141,255,.35)}
.bi-hint{margin-top:6px;color:var(--dim);font-size:13px;line-height:1.55;max-width:64ch}
.bi-error{display:none;margin-top:10px;color:var(--amber);font-family:var(--mono);font-size:11px;letter-spacing:.02em;line-height:1.5}
.bi-field.is-invalid .bi-error{display:block}
.bi-field.is-invalid .bi-opt,.bi-field.is-invalid input,.bi-field.is-invalid textarea,.bi-field.is-invalid .bi-drop{border-color:rgba(215,168,79,.65)}

.bi-field input[type="text"],.bi-field input[type="email"],.bi-field input[type="url"],.bi-field textarea{width:100%;margin-top:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--ink);color:var(--text);font:inherit;font-size:15px;line-height:1.5;caret-color:var(--blue);
  transition:border-color .16s,box-shadow .16s}
.bi-field textarea{resize:vertical;min-height:112px}
.bi-field textarea.is-tree{font-family:var(--mono);font-size:13px;line-height:1.6;min-height:168px;white-space:pre;overflow-x:auto;tab-size:2}
.bi-field input:hover,.bi-field textarea:hover{border-color:rgba(244,241,234,.26)}
.bi-field input:focus,.bi-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(76,141,255,.12)}
.bi-field input::placeholder,.bi-field textarea::placeholder{color:rgba(125,136,150,.55)}
.bi-count{margin-top:6px;text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--dim)}

.bi-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.bi-opts.is-one{grid-template-columns:1fr}
.bi-opt{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 14px;min-height:46px;border:1px solid var(--line-2);border-radius:10px;
  background:rgba(244,241,234,.02);color:var(--muted);font-size:14px;line-height:1.4;cursor:pointer;
  transition:border-color .16s,background .16s,color .16s}
.bi-opt:hover{border-color:rgba(244,241,234,.26);background:rgba(244,241,234,.045);color:var(--text)}
.bi-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.bi-opt i{flex:none;width:18px;height:18px;margin-top:1px;border:1px solid var(--line-2);border-radius:50%;background:var(--ink);position:relative;transition:border-color .16s,background .16s}
.bi-opt.is-multi i{border-radius:5px}
.bi-opt i::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}
.bi-opt.is-on{border-color:rgba(76,141,255,.62);background:rgba(76,141,255,.09);color:var(--text);box-shadow:inset 0 0 0 1px rgba(76,141,255,.14)}
.bi-opt.is-on i{border-color:var(--blue);background:var(--blue)}
.bi-opt.is-on i::after{opacity:1}
.bi-opt:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.bi-opt.is-off{opacity:.45;cursor:not-allowed}

/* ---------------- screenshots ---------------- */
.bi-drop{margin-top:14px;padding:26px 22px;border:1px dashed var(--line-2);border-radius:12px;background:rgba(244,241,234,.015);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer;transition:border-color .16s,background .16s}
.bi-drop:hover,.bi-drop.is-over{border-color:rgba(76,141,255,.6);background:rgba(76,141,255,.06)}
.bi-drop:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.bi-drop input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bi-drop svg{width:26px;height:26px;color:var(--muted)}
.bi-drop b{font-weight:500;color:var(--text);font-size:14.5px}
.bi-drop b u{color:var(--blue);text-decoration:none}
.bi-drop small{color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.bi-drop.is-full{opacity:.5;cursor:default}
.bi-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.bi-thumb{position:relative;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--ink)}
.bi-thumb img{width:100%;height:96px;object-fit:cover;object-position:top left;display:block}
.bi-thumb figcaption{padding:8px 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-thumb button{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(11,15,20,.82);border:1px solid var(--line-2);
  color:var(--text);font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center}
.bi-thumb button:hover{border-color:var(--text)}
.bi-drop-note{margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--dim);line-height:1.5}

/* ---------------- review ---------------- */
.bi-review{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.bi-review-sec{border:1px solid var(--line);border-radius:12px;padding:18px 20px 6px;background:rgba(244,241,234,.012)}
.bi-review-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}
.bi-review-head h3{font-size:15px}
.bi-review-head .num{display:inline-block;margin-right:10px}
.bi-review-head button{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);cursor:pointer;min-height:32px;padding:0 4px}
.bi-review-head button:hover{color:var(--text)}
.bi-review dl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 20px}
.bi-review dt,.bi-review dd{padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5}
.bi-review dt{color:var(--dim)}
.bi-review dd{color:var(--text);white-space:pre-wrap;word-break:break-word}
.bi-review dd.is-skip{color:var(--dim);font-style:italic}
.bi-review dd.is-tree{font-family:var(--mono);font-size:12px;white-space:pre;overflow-x:auto}
.bi-review dd .bi-thumbs{margin-top:4px}
.bi-send{margin-top:26px;padding:18px 20px;border:1px solid rgba(76,141,255,.3);border-radius:12px;background:rgba(76,141,255,.06);color:var(--muted);font-size:13.5px;line-height:1.55}
.bi-send b{color:var(--text);font-weight:500}
.bi-send .price{font-weight:500}

/* ---------------- nav ---------------- */
.bi-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:22px 34px 26px;border-top:1px solid var(--line)}
.bi-nav .btn{min-height:46px;padding:0 20px}
.bi-nav-hint{flex:1;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.bi-nav-hint .bi-tag{margin-right:4px}
.bi-status{padding:0 34px 24px;color:var(--muted);font-size:13.5px;line-height:1.5;min-height:0}
.bi-status:empty{display:none}
.bi-status.is-error{color:var(--amber)}
.bi-status a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ---------------- gate and confirmation ---------------- */
.bi-gate{max-width:640px;padding:54px 0 0}
.bi-gate h1{margin-top:18px}
.bi-gate .lead{margin-top:16px}
.bi-gate .btn{margin-top:28px}

.bi-done{position:relative;max-width:880px;margin-top:10px;padding:54px 56px 48px;overflow:hidden;border:1px solid var(--line-2);border-radius:18px;
  background:linear-gradient(145deg,rgba(26,33,41,.96),rgba(13,18,24,.98) 68%);box-shadow:var(--shadow),0 1px 0 rgba(244,241,234,.06) inset}
.bi-done::after{content:"";position:absolute;right:-130px;top:-190px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(76,141,255,.16),transparent 66%);pointer-events:none}
.bi-done>*{position:relative;z-index:1}
.bi-done-mark{display:grid;place-items:center;width:46px;height:46px;margin-bottom:26px;border:1px solid rgba(111,185,143,.48);border-radius:50%;
  background:rgba(111,185,143,.08);color:#7BC79E;font-size:20px;box-shadow:0 0 42px -18px rgba(111,185,143,.85)}
.bi-done h1{margin-top:16px}
.bi-done .lead{margin-top:18px;max-width:60ch}
.bi-done-steps{display:grid;grid-template-columns:repeat(3,1fr);margin:40px 0 30px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.bi-done-step{padding:19px 20px;border-right:1px solid var(--line)}
.bi-done-step:last-child{border-right:0}
.bi-done-step span,.bi-done-step small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.bi-done-step strong{display:block;margin:7px 0 3px;color:var(--muted);font-size:14px;font-weight:500}
.bi-done-step.is-done strong,.bi-done-step.is-done small{color:#7BC79E}
.bi-done-step.is-current{background:rgba(76,141,255,.07);box-shadow:inset 0 -2px 0 var(--blue)}
.bi-done-step.is-current span{color:var(--blue)}
.bi-done-step.is-current strong{color:var(--text)}
.bi-done-note{max-width:640px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-family:var(--mono);font-size:11px;line-height:1.7}
.bi-done .btn{margin-top:26px}

/* ---------------- responsive ---------------- */
@media(max-width:960px){
  .bi-layout{grid-template-columns:1fr;gap:26px;margin-top:34px}
  .bi-rail{position:static}
  .bi-steps{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .bi-steps::-webkit-scrollbar{display:none}
  .bi-steps button{width:auto;padding:8px 12px 8px 8px;white-space:nowrap;font-size:13px}
  .bi-steps button .t{display:none}
  .bi-steps button[aria-current="step"] .t{display:inline}
  .bi-rail-note{display:none}
}
@media(max-width:760px){
  .bi-main{padding-top:40px;padding-bottom:80px}
  .bi-logo img{width:112px}
  .bi-back{font-size:0;gap:0}
  .bi-back span{font-size:16px}
  .bi-facts li{flex:1 1 40%;padding:11px 10px 11px 0;margin-right:10px}
  .bi-facts li:nth-child(2n){border-right:0;margin-right:0}
  .bi-facts li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .bi-progress{padding:12px 20px 11px}
  .bi-step{padding:22px 20px 6px}
  .bi-opts{grid-template-columns:1fr}
  .bi-nav{padding:18px 20px 20px}
  .bi-nav-hint{display:none}
  .bi-nav .btn{flex:1;justify-content:center}
  .bi-status{padding:0 20px 20px}
  .bi-review dl{grid-template-columns:1fr;gap:0}
  .bi-review dt{padding-bottom:2px}
  .bi-review dd{border-top:0;padding-top:0}
  .bi-done{padding:38px 24px 32px}
  .bi-done-steps{grid-template-columns:1fr;margin:30px 0 26px}
  .bi-done-step{border-right:0;border-bottom:1px solid var(--line)}
  .bi-done-step:last-child{border-bottom:0}
  .bi-done .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .bi-bar-fill,.bi-opt,.bi-drop,.bi-steps button{transition:none}
}