/* Guided Builder skin
   - Uses the main site theme (../styles.css)
   - This file only adds builder-specific layout/styles (does NOT override site header/footer)
*/

.gb{
  /* Builder-only tokens (scoped to the builder so header/footer stay identical) */
  --gb-stroke: rgba(255,255,255,.14);
  --gb-soft: rgba(255,255,255,.06);
  --gb-accent: rgba(47,123,255,.92);
  --shadow2: 0 14px 36px rgba(0,0,0,.45);
  position:relative;
  /* Prevent tiny layout overflows (long strings) from forcing the whole page wider
     than the viewport on mobile ("pinch to zoom out" symptom). */
  overflow-x:hidden;
  min-height: calc(100vh - var(--navH));
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(47,123,255,.14), transparent 60%),
    radial-gradient(900px 520px at 92% 8%, rgba(111,120,255,.10), transparent 55%);
}

.gb a{color:inherit}

/* Active nav hint for this page */
.navLink.is-active{background:rgba(47,123,255,.14); border-color:rgba(47,123,255,.28)}

/* Give the builder page its own vertical rhythm without touching footer containers */
.gb .container{padding-top:26px;padding-bottom:80px}
.hero{padding:22px 0 10px}
.hero h1{margin:0 0 8px;font-size:34px;letter-spacing:-.02em}
.hero p{margin:0;color:var(--muted);max-width:78ch;line-height:1.55}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
  /* Prevent single pills from forcing horizontal scroll on small screens */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pill strong{color:var(--text)}

.hr{height:1px;background:rgba(255,255,255,.10);margin:22px 0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

.card{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:16px;padding:14px;text-align:left;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.card:hover{transform:translateY(-1px); box-shadow:0 16px 40px rgba(0,0,0,.35); border-color:rgba(255,255,255,.18)}
.card.selected{border-color:rgba(47,123,255,.65); box-shadow:0 0 0 2px rgba(47,123,255,.14) inset}
.cardTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;min-width:0}
/* Prevent long part names (CPU/GPU) from forcing horizontal overflow on mobile.
   Flex items default to min-width:auto, which can cause the whole page to
   become wider than the viewport on some phones ("pinch to zoom" symptom). */
.cardTop > *{min-width:0}
.cardTitle{font-weight:720;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}
.cardPrice{color:var(--muted);font-size:13px;white-space:nowrap;flex:0 0 auto}
.cardDesc{margin-top:8px;color:var(--muted);line-height:1.45;font-size:13px}

/* Optional: show the estimated price impact of an option vs your current selection */
.cardImpact{
  margin-top:8px;
  font-size:12px;
  color: rgba(241,245,249,.68);
  display:flex;
  align-items:center;
  gap:8px;
}
.cardImpact .delta{font-weight:750; color: rgba(34,211,238,.92)}
.cardImpact .delta.neg{color: rgba(34,211,238,.92)}
.cardImpact .delta.pos{color: rgba(111,120,255,.92)}
.cardImpact .delta.zero{color: rgba(241,245,249,.58)}

/* Extra-small phones: allow the price to drop below the title if needed */
@media(max-width:420px){
  .cardTop{flex-wrap:wrap}
  .cardPrice{width:100%; text-align:right}
}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{font-size:11px;padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--muted);background:rgba(255,255,255,.03)}
.badge.reco{border-color:rgba(47,123,255,.35);color:rgba(214,226,255,.92)}
.badge.upg{border-color:rgba(255,255,255,.18);}

.context{position:sticky;top:var(--navH);z-index:95;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.contextInner{max-width:var(--max);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ctxLeft{display:flex;gap:14px;flex-wrap:wrap}
.ctxItem{color:var(--muted);font-size:13px}
.ctxItem span{color:var(--text);font-weight:650}
/* Buttons use the main site's .btn styles (no overrides here). */

/* Builder pages can sit on deeper dark panels — ensure ghost buttons stay readable */
.btn.ghost{
  color: rgba(241,245,249,.92) !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.04) !important;
}
.btn.ghost:hover{ background: rgba(255,255,255,.07) !important; }
.hidden{display:none!important}

.layout{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;margin-top:18px}
@media(max-width:980px){.layout{grid-template-columns:1fr}}

.gb .panel h2{margin:0 0 6px;font-size:18px}
.gb .panel .hint{color:var(--muted);font-size:13px;line-height:1.45}
.section{margin-top:16px}
.sectionHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.sectionHeader h3{margin:0;font-size:16px}
.sectionHeader .sub{color:var(--muted);font-size:13px;line-height:1.45}

details.learn{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);border-radius:14px;padding:10px 12px;margin-top:10px}
details.learn summary{cursor:pointer;color:var(--muted);user-select:none}
details.learn summary:hover{color:var(--text)}
.learnBody p{margin:10px 0;color:var(--muted);line-height:1.45}

.overview{position:sticky;top:calc(var(--navH) + 66px);align-self:start;max-height:calc(100vh - (var(--navH) + 86px));overflow:auto;padding-right:6px}
@media(max-width:980px){
  /* Mobile/tablet: the Overview is available via the bottom drawer.
     Hide the sidebar version to reduce visual clutter and duplicate content. */
  .overview{position:static; display:none;}
}

/* Extra-small phones: keep the bottom bar readable without forcing zoom */
@media(max-width:420px){
  .drawerBar > div{
    flex: 1 1 100%;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 10px;
  }
  .drawerBar #openDrawer,
  .drawerBar #mobileSubmit{
    flex: 1 1 calc(50% - 6px);
    justify-content:center;
  }
}
.priceBig{font-size:24px;font-weight:850;letter-spacing:-.02em;margin-top:6px}
.sumList{margin-top:14px;display:grid;gap:10px}
.sumRow{display:flex;justify-content:space-between;gap:10px;padding:10px 10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)}
.sumKey{color:var(--muted);font-size:12px}
.sumVal{font-size:12.5px;color:var(--text);text-align:right;max-width:58%}
.note{margin-top:12px;color:var(--muted);font-size:12.5px;line-height:1.45}
.input, textarea{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);outline:none}
textarea{min-height:90px;resize:vertical}
.footerActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.drawerBar{display:none}
.drawer{display:none}
@media(max-width:980px){
  .drawerBar{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    background:rgba(7,10,18,.88);
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.1);
    padding:12px 14px;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    /* Prevent horizontal overflow on small phones */
    flex-wrap:wrap;
  }
  .drawerBar .price{font-weight:800}
  .drawer{display:block;position:fixed;left:0;right:0;bottom:-100%;z-index:80;background:rgba(11,16,34,.98);border-top:1px solid rgba(255,255,255,.10);transition:bottom .18s ease;max-height:85vh;overflow:auto}
  .drawer.open{bottom:0}
  .drawerInner{padding:16px}
}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; color:var(--muted)}
.adminBox{border:1px dashed rgba(255,255,255,.2);padding:10px;border-radius:12px;margin-top:12px;background:rgba(255,255,255,.02)}


/* Card title color fix (ensures button text inherits dark theme) */
.card{color:var(--text);}
.card .cardTitle{color:var(--text);}
.card .cardPrice{color:var(--muted);}



/* =========================
   Phase 3 — Cinematic Studio Skin
   Cinematic, restrained, engineered.
   ========================= */

/* Hero becomes a studio moment */
.hero{
  position:relative;
  overflow:hidden;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.hero:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(800px 480px at 25% 10%, rgba(111,120,255,.35), transparent 55%),
    radial-gradient(700px 520px at 80% 20%, rgba(34,211,238,.16), transparent 55%),
    linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  opacity:.9;
  filter: blur(0px);
  pointer-events:none;
}
.hero:after{
  content:"";
  position:absolute; inset:-120px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.03), transparent 45%);
  opacity:.35;
  transform: rotate(6deg);
  animation: studioFloat 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes studioFloat{
  0%,100%{transform: translate3d(0,0,0) rotate(6deg)}
  50%{transform: translate3d(0,-14px,0) rotate(6deg)}
}
.hero h1{font-size:40px;letter-spacing:-.03em; margin-bottom:10px}
.hero p{color:rgba(241,245,249,.78)}
.pills .pill{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.10)}

/* Journey rail */
.journeyWrap{
  margin-top:16px;
  padding:14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.journeyTitle{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(241,245,249,.65);
  margin-bottom:10px;
}
.journey{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.journeyLine{
  flex:1;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  min-width:28px;
}
.journeyStep{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(241,245,249,.70);
  font-size:13px;
}
.journeyStep .dot{
  width:10px;height:10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 0 rgba(111,120,255,0);
}
.journeyStep.active{color:rgba(241,245,249,.92)}
.journeyStep.active .dot{
  border-color: rgba(111,120,255,.70);
  background: rgba(111,120,255,.22);
  box-shadow: 0 0 0 6px rgba(111,120,255,.10);
}
.journeyStep.done .dot{
  border-color: rgba(34,211,238,.65);
  background: rgba(34,211,238,.14);
}
.journeyHint{
  margin-top:10px;
  color: rgba(241,245,249,.72);
  font-size:13px;
}

/* Panels */
.panel{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.012));
  box-shadow: var(--shadow2);
}
.hr{background: rgba(255,255,255,.10)}

/* Cards — tactile, cinematic */
.card{
  position:relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.card:before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 20px;
  background:
    linear-gradient(130deg, rgba(111,120,255,.25), rgba(34,211,238,.10), rgba(255,255,255,0));
  opacity:0;
  pointer-events:none;
  transition: opacity .16s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
}
.card:hover:before{opacity:.9}
.card.selected{
  border-color: rgba(111,120,255,.55);
  box-shadow: 0 0 0 2px rgba(111,120,255,.18) inset, 0 22px 55px rgba(0,0,0,.60);
  transform: translateY(-2px);
}
.cardTitle{font-weight:760; letter-spacing:-.01em; color: rgba(241,245,249,.95)}
.cardPrice{color: rgba(241,245,249,.62)}
.cardDesc{color: rgba(241,245,249,.72)}

/* Badges — calmer */
.badge.reco{
  border-color: rgba(111,120,255,.45);
  background: rgba(111,120,255,.12);
  color: rgba(224,231,255,.95);
}
.badge.upg{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(241,245,249,.75);
}

/* Overview command center */
.panel.overview{
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.priceBig{
  font-size:26px;
  letter-spacing:.2px;
}
.insight{
  margin-top:12px;
  padding:12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(111,120,255,.22);
  background: linear-gradient(180deg, rgba(111,120,255,.10), rgba(255,255,255,.02));
  color: rgba(241,245,249,.78);
  line-height:1.5;
}
.insight strong{color: rgba(241,245,249,.95)}
.reviewMoment{
  margin-top:14px;
  padding:14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(34,211,238,.18);
  background: linear-gradient(180deg, rgba(34,211,238,.08), rgba(255,255,255,.02));
  color: rgba(241,245,249,.78);
  line-height:1.5;
}
.reviewMoment strong{color: rgba(241,245,249,.95)}

/* Quoted add-ons callout */
.quoteAddons{
  margin-top:10px;
  padding:12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(245,158,11,.22);
  background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(255,255,255,.02));
  color: rgba(241,245,249,.80);
  line-height:1.5;
}
.quoteAddons .qaTitle{font-weight:760; color: rgba(255,245,221,.95); letter-spacing:-.01em;}
.quoteAddons .qaList{margin-top:4px; color: rgba(241,245,249,.78)}
.quoteAddons .qaHint{margin-top:6px; color: rgba(241,245,249,.70)}

/* Custom loop preferences (shown only when loop is selected) */
.loopPrefs{
  margin-top:10px;
  padding:12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(34,211,238,.22);
  background: linear-gradient(180deg, rgba(34,211,238,.10), rgba(255,255,255,.02));
  color: rgba(241,245,249,.82);
  line-height:1.5;
}
.loopTop{display:flex; align-items:center; justify-content:space-between; gap:12px}
.loopTitle{font-weight:760; color: rgba(224,242,254,.95); letter-spacing:-.01em;}
.loopPill{
  padding:4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,.26);
  background: rgba(34,211,238,.10);
  color: rgba(224,242,254,.92);
  font-size:12px;
}
.loopSub{margin-top:6px; color: rgba(241,245,249,.70); font-size:12.5px; line-height:1.45}
.loopBlock{margin-top:12px}
.loopBlock .input{margin-top:6px}
.loopBtns .prefBtn{padding:8px 10px; font-size:12.8px}


/* Subtle step transitions */
.panel{animation: fadeInUp .24s ease both}
@keyframes fadeInUp{
  from{opacity:0; transform: translateY(6px)}
  to{opacity:1; transform: translateY(0)}
}


/* Overview (desktop) internal scroll support */
@media(min-width:981px){
  .overview::-webkit-scrollbar{width:10px}
  .overview::-webkit-scrollbar-thumb{border-radius:999px;border:3px solid transparent;background-clip:content-box;background:rgba(0,0,0,.18)}
}


/* Patch v20260204 (refined)
   Estimate acknowledgement — make it feel deliberate + premium */
.ackRow{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(79,124,255,.10), rgba(255,255,255,.02));
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
  cursor:pointer;
}
.ackRow:hover{ border-color: rgba(79,124,255,.28); }
.ackRow span{ min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.ackRow input{ margin-top: 2px; }
a.btn.disabled{opacity:.55;pointer-events:auto}
a.btn.disabled:hover{border-color:rgba(255,255,255,.10)}



/* =========================
   Guided Builder Additions (v20260210)
   ========================= */

/* Resume banner (prevents “where is the quiz?” confusion) */
.resumeBanner{
  margin-top:14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.resumeActions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* Budget meter */
.budgetMeter{
  margin-top:14px;
  padding:12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.budgetTop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.budgetChip{
  padding:8px 10px;
  border-radius: 999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  color: rgba(241,245,249,.85);
  background: rgba(255,255,255,.03);
  white-space:nowrap;
}
.budgetChip.ok{
  border-color: rgba(47,123,255,.35);
  background: rgba(47,123,255,.10);
}
.budgetChip.warn{
  border-color: rgba(245,158,11,.45);
  background: rgba(245,158,11,.12);
}
.budgetChip.over{
  border-color: rgba(244,63,94,.45);
  background: rgba(244,63,94,.10);
}
.meter{
  margin-top:10px;
  height:10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.meterFill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,211,238,.55), rgba(111,120,255,.55));
}

/* Budget controls */
.budgetControls{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.btn.mini{padding:8px 10px; border-radius:12px; font-size:12px}

.hintInline{color:rgba(241,245,249,.55); font-weight:600; font-size:12px}

/* Tier target segmented control */
.tierTarget{
  margin-top:10px;
  padding:10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.tierTargetRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.tierTargetLabel{color:rgba(241,245,249,.88); font-size:12.5px}
.seg{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.segBtn{
  border:0;
  cursor:pointer;
  padding:7px 12px;
  border-radius: 999px;
  background: transparent;
  color: rgba(241,245,249,.85);
  font-weight:700;
  font-size:12px;
  letter-spacing: .01em;
}
.segBtn:hover{background: rgba(255,255,255,.06)}
.segBtn.active{
  background: rgba(34,211,238,.12);
  color: rgba(241,245,249,.95);
  box-shadow: 0 0 0 1px rgba(34,211,238,.22) inset, 0 10px 26px rgba(34,211,238,.10);
}

/* Toggle switch */
.toggle{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.toggle input{position:absolute; opacity:0; pointer-events:none}
.toggleUI{
  width:44px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  position:relative;
  transition: border-color .12s ease, background .12s ease;
}
.toggleUI:after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:999px;
  background: rgba(241,245,249,.85);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  transition: transform .12s ease, background .12s ease;
}
.toggle input:checked + .toggleUI{
  border-color: rgba(34,211,238,.35);
  background: rgba(34,211,238,.12);
}
.toggle input:checked + .toggleUI:after{
  transform: translateX(20px);
  background: linear-gradient(180deg, rgba(34,211,238,.95), rgba(111,120,255,.95));
}
.toggleText{color:rgba(241,245,249,.88); font-size:12.5px}

/* Budget coach box */
.budgetCoach{
  margin-top:12px;
  padding:12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(111,120,255,.07), rgba(255,255,255,.015));
}
.budgetCoach h3{margin:0; font-size:14px}
.budgetCoach .coachHint{margin-top:6px; color:rgba(241,245,249,.68); font-size:12.5px; line-height:1.45}
.coachRows{margin-top:10px; display:grid; gap:10px}
.coachRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.coachLeft{display:grid; gap:4px}
.coachTitle{font-weight:750; font-size:12.5px; color:rgba(241,245,249,.92)}
.coachMeta{font-size:12px; color:rgba(241,245,249,.62)}
.coachSave{font-size:12px; color:rgba(34,211,238,.85)}
.coachActions{display:flex; gap:10px; flex-wrap:wrap}
.coachLink{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.coachLink .linkBtn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  padding:8px 10px;
  border-radius: 12px;
  font-size:12px;
  cursor:pointer;
}
.coachLink .linkBtn:hover{border-color:rgba(255,255,255,.22)}

/* Premium: quick savings banner (shows before you're actually over budget) */
.budgetQuick{
  margin-top:12px;
  padding:12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(34,211,238,.08), rgba(255,255,255,.015));
}
.bqTop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.bqTitle{margin:0; font-size:13.5px; font-weight:800; letter-spacing:-.01em}
.bqSub{margin-top:6px; color:rgba(241,245,249,.68); font-size:12.5px; line-height:1.45}
.bqRows{margin-top:10px; display:grid; gap:10px}
.bqRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.bqLeft{display:grid; gap:4px; min-width:0}
.bqLabel{font-weight:760; font-size:12.5px; color:rgba(241,245,249,.92)}
.bqMeta{font-size:12px; color:rgba(241,245,249,.62)}
.bqRight{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.bqSave{font-size:12px; color:rgba(34,211,238,.88)}
.bqActions{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.bqHide{
  border:none;
  background:transparent;
  color:rgba(241,245,249,.62);
  font-size:12px;
  padding:6px 8px;
  cursor:pointer;
  border-radius: 10px;
}
.bqHide:hover{background:rgba(255,255,255,.04); color:rgba(241,245,249,.82)}


/* Extra badge colors */
.badge.pro{border-color:rgba(34,211,238,.28); color:rgba(224,255,255,.90)}
.badge.val{border-color:rgba(111,120,255,.35); color:rgba(232,233,255,.92)}
.badge.warn{border-color:rgba(245,158,11,.45); color:rgba(255,245,221,.92); background:rgba(245,158,11,.10)}



/* =========================
   Guided Builder Enhancements
   (Quiz back buttons, tooltips, curated toggles, personality card)
   ========================= */

.panelTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.panelTop h2{margin:0}

.btn.mini{
  padding:8px 10px;
  border-radius: 12px;
  font-size:12px;
}

.showMoreRow{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
}

.compatCallout{
  margin-top:14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(111,120,255,.16), transparent 60%),
    radial-gradient(520px 260px at 80% 40%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:12px 12px;
}
.compatTitle{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(241,245,249,.70);
}
.compatText{
  margin-top:6px;
  color:rgba(241,245,249,.80);
  font-size:13px;
  line-height:1.45;
  max-width: 74ch;
}

.h3Row{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Tooltip pill */
.tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:rgba(241,245,249,.72);
  font-size:12px;
  cursor:help;
  user-select:none;
}
.tip:hover{border-color:rgba(255,255,255,.22); color:rgba(241,245,249,.92)}
.tip::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  bottom:115%;
  transform:translateX(-50%) translateY(-8px);
  width:min(340px, 78vw);
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(11,19,43,.98);
  color:rgba(241,245,249,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.60);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  font-size:12px;
  line-height:1.45;
}
.tip:hover::after{opacity:1; transform:translateX(-50%) translateY(0)}

/* Build personality card */
.personality{
  margin-top:14px;
  padding:14px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow: var(--shadow2);
}
.personaTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.personaKicker{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(241,245,249,.62);
}
.personaTitle{
  font-weight:850;
  letter-spacing:-.02em;
  margin-top:2px;
}
.personaBadge{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(34,211,238,.25);
  background:rgba(34,211,238,.08);
  color:rgba(224,255,255,.90);
}
.personaRow{
  display:grid;
  grid-template-columns:110px 1fr 88px;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.personaLabel{
  font-size:12px;
  color:rgba(241,245,249,.72);
}
.personaBar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.personaBar > div{
  height:100%;
  width:0;
  background:linear-gradient(90deg, rgba(111,120,255,.85), rgba(34,211,238,.70));
  border-radius:999px;
}
.personaNote{
  font-size:12px;
  color:rgba(241,245,249,.78);
  text-align:right;
}
.personaTuned{
  margin-top:12px;
  font-size:12.5px;
  color:rgba(241,245,249,.72);
  line-height:1.45;
}
.personaTuned strong{color:rgba(241,245,249,.92)}

@media(max-width:520px){
  .personaRow{grid-template-columns:92px 1fr 70px;}
}




/* ---------- Guided Builder additions (submission + quick start) ---------- */
.quickStart{
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(47,123,255,.10), rgba(255,255,255,.02));
  padding:14px;
  border-radius:16px;
  margin:14px 0 18px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}
.quickCopy{min-width:0}
.quickTitle{font-weight:800;letter-spacing:.01em}
.quickSub{color:var(--muted);margin-top:6px;line-height:1.45}
.quickBtns{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:720px){
  .quickStart{flex-direction:column;align-items:stretch}
  .quickBtns{width:100%}
  .quickBtns .btn{flex:1;justify-content:center}
}

/* Sample builds (fast-start presets) */
.sampleBuilds{
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(34,211,238,.08), rgba(255,255,255,.02));
}
.sampleHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.sampleKicker{
  font-size:12px;
  color: rgba(241,245,249,.65);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.sampleTitle{font-weight:900;letter-spacing:-.02em;font-size:16px;margin-top:6px}
.sampleSub{color: rgba(241,245,249,.72);font-size:13px;line-height:1.45;margin-top:6px;max-width:72ch}
.sampleRight{display:flex;align-items:flex-start;justify-content:flex-end}
.sampleMini{border:1px dashed rgba(255,255,255,.18);padding:8px 10px;border-radius:999px;color:rgba(241,245,249,.68);font-size:12px;white-space:nowrap}

.sampleGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:720px){.sampleGrid{grid-template-columns:1fr}.sampleMini{display:none}}

.sampleCard{
  position:relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  padding: 12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.sampleCard:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.28);
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
}
.sampleTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sampleTitleRow{display:flex;align-items:center;gap:10px;min-width:0}
.sampleIcon{
  width:30px;height:30px;
  border-radius: 11px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(111,120,255,.22), rgba(34,211,238,.10));
}
.sampleName{font-weight:860;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sampleTag{font-size:12px;color:rgba(241,245,249,.70)}
.sampleDesc{margin-top:8px;color:rgba(241,245,249,.74);font-size:13px;line-height:1.45}
.sampleMeta{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sampleChip{
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(241,245,249,.85);
}
.sampleChip.ok{border-color: rgba(34,197,94,.40)}
.sampleChip.warn{border-color: rgba(251,191,36,.45)}
.sampleChip.over{border-color: rgba(248,113,113,.45)}
.sampleEst{font-size:12px;color:rgba(241,245,249,.70)}

.sampleBullets{margin-top:10px;display:grid;gap:6px}
.sampleBullets div{color:rgba(241,245,249,.72);font-size:12.5px}

.sampleActions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.sampleActions .btn{flex:1;justify-content:center}
.sampleHint{margin-top:10px;color:rgba(241,245,249,.64);font-size:12px;line-height:1.45}

/* Subtle highlight when a preset jumps you to submit */
.submitCard.flash{animation:presetFlash 1.1s ease-out 1}
@keyframes presetFlash{
  0%{box-shadow: 0 0 0 0 rgba(34,211,238,0)}
  35%{box-shadow: 0 0 0 7px rgba(34,211,238,.18)}
  100%{box-shadow: 0 0 0 0 rgba(34,211,238,0)}
}

.submitCard{
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(96,165,250,.08), rgba(255,255,255,.02));
  padding:14px;
  border-radius:16px;
}
.submitTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.submitKicker{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.submitTitle{margin:6px 0 0;font-size:18px}
.submitPill{
  border:1px dashed rgba(255,255,255,.18);
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  white-space:nowrap;
}
.contactGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
@media(max-width:980px){
  .contactGrid{grid-template-columns:1fr}
  .submitPill{display:none}
}
.field .hint{margin:0 0 6px}
.hintInline{opacity:.85}
.subFine{
  margin-top:8px;
  font-size:12.5px;
  line-height:1.45;
  color:rgba(241,245,249,.70);
  max-width: 64ch;
}

.trustStrip{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.trustLink{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(241,245,249,.82);
  text-decoration:none;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.trustLink:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.35);
  background: rgba(34,211,238,.08);
  color: rgba(241,245,249,.95);
}
.submitMore{margin-top:12px}
.submitActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.submitActions .btn{flex:1;justify-content:center}
.submitStatus{margin-top:10px}
.submitStatus.ok{color:rgba(34,197,94,.95)}
.submitStatus.err{color:rgba(248,113,113,.95)}

.formError{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(248,113,113,.35);
  background:rgba(248,113,113,.08);
  color:rgba(248,113,113,.95);
}
.formError.hidden{display:none}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:rgba(12,17,33,.92);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  padding:10px 12px;
  border-radius:999px;
  color:var(--text);
  z-index:1000;
  max-width:calc(100% - 24px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.toast.hidden{display:none}


/* ---------- FINAL POLISH (guided builder UI upgrades) ---------- */

/* View controls (Recommended-only toggle) */
.viewControls{
  margin: 14px 0 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.viewControls .toggle{ margin: 0; }
.viewHint{ font-size: 12.5px; color: rgba(241,245,249,.72); max-width: 520px; }


/* Jump navigation (quickly hop between sections) */
.jumpNav{
  margin: 18px 0 14px;
  padding: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: calc(var(--navH) + 60px);
  z-index: 6;
}
.jumpBtn{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(241,245,249,.80);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
  letter-spacing:.2px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.jumpBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
.jumpBtn.active{
  border-color: rgba(34,211,238,.40);
  background: linear-gradient(180deg, rgba(34,211,238,.14), rgba(111,120,255,.08));
  color: rgba(241,245,249,.95);
}

/* Quick capture */
.quickCapture{
  margin: 12px 0 16px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(111,120,255,.09), rgba(255,255,255,.02));
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}
.quickCapTitle{font-weight:760; letter-spacing:-.01em; color: rgba(241,245,249,.95)}
.quickCapSub{
  margin-top:4px;
  color: rgba(241,245,249,.72);
  font-size:13px;
  line-height:1.45;
  max-width: 62ch;
}
.quickCapField{min-width:260px; flex:0 0 280px}
@media(max-width:720px){
  .quickCapture{flex-direction:column; align-items:stretch}
  .quickCapField{min-width:0; flex:1 1 auto}
}

/* Included mini (next to price) */
.includedMini{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.includedTitle{
  font-size:13px;
  color: rgba(241,245,249,.78);
  font-weight:760;
  letter-spacing:.2px;
}
.includedGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.incItem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: rgba(241,245,249,.80);
  font-size:12.5px;
  line-height:1.35;
}
.incItem:before{
  content:"✓";
  color: rgba(34,211,238,.95);
  margin-top:1px;
  flex:0 0 auto;
}
@media(max-width:980px){
  .includedGrid{grid-template-columns:1fr}
}

/* Confidence / ready check */
.confidence{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(34,211,238,.16);
  background: linear-gradient(180deg, rgba(34,211,238,.07), rgba(255,255,255,.02));
}
.confTop{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.confTitle{font-weight:760; letter-spacing:-.01em; color: rgba(241,245,249,.95); font-size:14px}
.confNote{color: rgba(241,245,249,.70); font-size:12.5px}
.confList{margin-top:10px; display:grid; gap:8px}
.confItem{display:flex; gap:10px; align-items:center; color: rgba(241,245,249,.72); font-size:12.5px}
.confItem.done{color: rgba(241,245,249,.95)}
.confDot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 4px rgba(255,255,255,.02);
}
.confItem.done .confDot{
  border-color: rgba(34,211,238,.55);
  background: rgba(34,211,238,.18);
  box-shadow: 0 0 0 4px rgba(34,211,238,.08);
}
.confItem.kind-over{color: rgba(251,113,133,.95)}
.confItem.kind-over .confDot{
  border-color: rgba(251,113,133,.55);
  background: rgba(251,113,133,.12);
  box-shadow: 0 0 0 4px rgba(251,113,133,.06);
}
.confItem.kind-warn{color: rgba(251,191,36,.95)}
.confItem.kind-warn .confDot{
  border-color: rgba(251,191,36,.50);
  background: rgba(251,191,36,.10);
  box-shadow: 0 0 0 4px rgba(251,191,36,.05);
}

/* Card meta (best for / why) */
.cardMeta{
  margin-top:10px;
  padding:10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: rgba(241,245,249,.80);
  font-size:12.5px;
  line-height:1.35;
}
.metaLine + .metaLine{margin-top:6px}
.metaK{color: rgba(241,245,249,.92); font-weight:760}

/* Selected badge */
.badge.sel{
  border-color: rgba(34,211,238,.45);
  background: rgba(34,211,238,.10);
  color: rgba(224,242,254,.96);
}

/* Preferred contact method */
.prefRow{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.prefBtns{display:flex; gap:8px; flex-wrap:wrap}
.prefBtn{
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(241,245,249,.78);
  cursor:pointer;
  font-size:13px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.prefBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}
.prefBtn.active{
  border-color: rgba(111,120,255,.55);
  background: linear-gradient(180deg, rgba(111,120,255,.14), rgba(34,211,238,.08));
  color: rgba(241,245,249,.95);
}

/* "What happens next" timeline */
.nextSteps{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.nextTitle{
  font-weight:760;
  color: rgba(241,245,249,.95);
  margin-bottom:8px;
}
.nextList{
  margin:0;
  padding-left:18px;
  color: rgba(241,245,249,.75);
  font-size:12.8px;
  line-height:1.45;
}
.nextList li{margin:6px 0}
.nextNote{margin-top:8px; color: rgba(241,245,249,.70); font-size:12.5px}

/* Review summary (finish line) */
.reviewMoment{margin-top: 14px}
.reviewMoment details.learn{
  margin-top: 0;
  border-color: rgba(34,211,238,.18);
  background: rgba(0,0,0,.10);
}
.reviewMoment details.learn summary{color: rgba(241,245,249,.85)}
.summaryPre{
  margin:10px 0 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.30);
  color: rgba(241,245,249,.75);
  font-size:12px;
  line-height:1.4;
  white-space:pre-wrap;
  /* Long URLs (share links) should never overflow the page */
  overflow-wrap:anywhere;
  word-break:break-word;
}
.summaryActions{margin-top:10px; display:flex; justify-content:flex-end}

/* No obligation line */
.noObligation{
  margin-top: 10px;
  color: rgba(241,245,249,.68);
  font-size:12.5px;
  line-height:1.45;
}



/* --- Custom loop notice + acknowledgement --- */
.loopNotice{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  border-radius:14px;
  padding:12px;
  margin-top:12px;
}
.loopNoticeTitle{
  font-weight:950;
  letter-spacing:.2px;
  margin-bottom:6px;
}
.loopNoticeText{
  color:rgba(255,255,255,.78);
  font-size:12.5px;
  line-height:1.65;
}
.loopNoticeLinks{
  margin-top:8px;
}
.loopNoticeLinks a{
  color:rgba(110,231,255,.95);
  text-decoration:underline;
}
.loopAck{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  cursor:pointer;
}
.loopAck input{
  margin-top:2px;
}
.loopAck span{
  color:rgba(255,255,255,.82);
  font-size:12.5px;
  line-height:1.5;
}


/* =========================
   Feb 2026 polish — declutter + readability + review step
   ========================= */

/* Make option cards easier to read (more contrast) */
.card{ background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); }
.cardDesc{ color: rgba(241,245,249,.82); }
.cardPrice{ color: rgba(241,245,249,.70); }

/* Hero split layout (less bland, more structured) */
.gbHero{ padding: 18px 18px 14px; }
.gbHeroGrid{ position:relative; z-index:2; display:grid; grid-template-columns: 1.35fr .95fr; gap:18px; align-items:stretch; }
@media(max-width:980px){ .gbHeroGrid{ grid-template-columns:1fr; } }
.heroCard{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.heroCardTitle{ font-weight: 950; letter-spacing:-.01em; margin-bottom: 8px; }
.heroSteps{ margin: 0; padding-left: 18px; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.7; }
.heroSteps li{ margin: 6px 0; }

/* More breathing room */
.layout{ gap: 22px; }
@media(min-width:1100px){ .layout{ grid-template-columns: 1.6fr 1fr; } }

/* Jump nav visibility (was too dark) */
.jumpNav{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.jumpBtn{ background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.12); }
.jumpBtn:hover{ background: rgba(0,0,0,.28); }

/* Extras fold (group the optional stuff) */
.extrasFold{ margin-top: 16px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: 18px; overflow:hidden; }
.extrasSummary{ cursor:pointer; padding: 12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; list-style:none; font-weight: 950; }
.extrasSummary::-webkit-details-marker{ display:none; }
.extrasSummary::after{ content:"▾"; opacity:.8; }
.extrasFold[open] .extrasSummary::after{ transform: rotate(180deg); }
.extrasBody{ padding: 0 14px 14px; }

/* Review section (builder page) */
.reviewBox{ border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(111,120,255,.10), rgba(255,255,255,.02)); border-radius: 18px; padding: 14px; }
.reviewActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.reviewActions .btn{ flex:1; min-width: 180px; justify-content:center; }

/* Wizard-style review card (mobile-first) */
.wizReviewCard{ margin-top: 12px; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.wizReviewTop{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.wizKicker{ font-size: 12px; color: rgba(255,255,255,.72); font-weight: 900; }
.wizPrice{ font-size: 30px; font-weight: 950; letter-spacing:-.02em; line-height: 1.05; margin-top: 4px; }
.wizRange{ font-size: 12px; color: rgba(255,255,255,.72); margin-top: 6px; }
.wizBadge{ align-self:flex-start; padding: 7px 10px; border-radius: 999px; font-weight: 950; font-size: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.90); white-space: nowrap; }
.wizBadge.ok{ border-color: rgba(90,255,180,.25); background: rgba(90,255,180,.08); }
.wizBadge.warn{ border-color: rgba(255,214,91,.25); background: rgba(255,214,91,.08); }
.wizBadge.over{ border-color: rgba(255,90,120,.28); background: rgba(255,90,120,.10); }

.wizKeyGrid{ margin-top: 12px; display:grid; grid-template-columns: 1fr; gap: 8px; }
.wizKeyRow{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); }
.wizKeyRow span{ color: rgba(255,255,255,.72); font-weight: 900; font-size: 12px; }
.wizKeyRow strong{ color: rgba(255,255,255,.92); font-weight: 950; font-size: 12px; text-align:right; }

.wizChecks{ margin-top: 12px; display:grid; gap: 8px; }
.wizCheck{ padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: rgba(255,255,255,.86); font-size: 12px; }

.wizReviewBtns{ margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wizReviewBtns .btn{ justify-content:center; }
.wizReviewBtns .btn.primary{ grid-column: 1 / -1; }
.wizReviewBtns #scrollTop{ grid-column: 1 / -1; }

@media(min-width: 980px){
  .wizKeyGrid{ grid-template-columns: 1fr 1fr; }
  .wizReviewBtns{ grid-template-columns: 1fr 1fr 1fr; }
  .wizReviewBtns .btn.primary{ grid-column: auto; }
  .wizReviewBtns #scrollTop{ grid-column: auto; }
}

/* Overview tools */
.overviewTools{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }
.overviewTools .btn.mini{ flex:1; min-width: 120px; justify-content:center; }

/* Compact “review” CTA in overview */
.reviewMini{ margin-top: 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px; border-radius: 18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); }
.reviewMiniTitle{ font-weight: 950; margin-bottom: 2px; }

/* Review page: give the form more room */
.reviewLayout{ grid-template-columns: 1.1fr 1.25fr; }
@media(max-width:980px){ .reviewLayout{ grid-template-columns:1fr; } }

/* Checkbox alignment polish
   Keep multi-line copy aligned cleanly on both desktop + mobile. */
.ackRow, .loopAck{ align-items:flex-start; }
.ackRow input, .loopAck input{ margin-top: 2px; }



/* Start/Customize tabs (reduces visual crowding) */
.modeSwitch{ margin-top: 14px; display:flex; gap:10px; padding:6px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); }
.modeBtn{ flex:1; border:1px solid transparent; background: transparent; color: rgba(255,255,255,.78); padding: 10px 12px; border-radius: 999px; cursor:pointer; font-weight: 950; letter-spacing:-.01em; }
.modeBtn:hover{ color: rgba(255,255,255,.92); }
.modeBtn.active{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.modePanel.hidden{ display:none; }


/* Auto-build explanation (so users aren’t confused) */
.autoWhy{ margin-top: 12px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); border-radius: 16px; padding: 12px; }
.autoWhyTitle{ font-weight: 950; margin-bottom: 6px; }
.autoWhyList{ margin:0; padding-left: 18px; color: rgba(255,255,255,.78); font-size: 12px; line-height:1.7; }
.autoWhyList li{ margin: 5px 0; }


/* Panel breathing room (builder is dense by nature) */
.gb .panel{ padding: 18px; }
@media(min-width:1100px){ .gb .panel{ padding: 20px; } }


/* =========================
   CLEAN BUILDER LAYOUT PATCH (v20260214)
   - Less crowded
   - Accordion sections
   - Better button contrast
   ========================= */

/* Give the builder more breathing room on desktop */
@media(min-width: 981px){
  .layout{
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 22px;
  }
}

/* Bigger cards, fewer columns inside Customize (reduces overwhelm) */
#modeParts .grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media(max-width: 720px){
  #modeParts .grid{ grid-template-columns: 1fr; }
}

/* Accordion sections (clean, guided feel) */
.partFold{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.partSummary{
  cursor: pointer;
  padding: 14px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  list-style: none;
}
.partSumLeft{min-width:0}
.partSumRight{flex:0 0 auto}
.partSummary::-webkit-details-marker{ display:none; }
.partSummary::after{
  content:"▾";
  opacity:.75;
  line-height:1;
  margin-top: 4px;
}
.partFold[open] .partSummary::after{ transform: rotate(180deg); }

.partSumTitle{
  font-weight: 950;
  letter-spacing: -.01em;
}
.partSumSelected{
  margin-top: 4px;
  color: rgba(241,245,249,.72);
  font-size: 12.5px;
  line-height:1.35;
  max-width: 62ch;
  overflow-wrap:anywhere;
}
.partSumHint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(241,245,249,.78);
  font-size: 12px;
  white-space: nowrap;
}

@media(max-width:420px){
  /* Avoid any horizontal overflow in the accordion headers on very small phones */
  .partSummary{flex-wrap:wrap}
  .partSumRight{width:100%; display:flex; justify-content:flex-end}
}
.partBody{ padding: 0 14px 14px; }
.partBody .sub{
  color: rgba(241,245,249,.74);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.partNextRow{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}

/* Extras: “mini panels” so optional stuff doesn’t feel like a wall */
.foldGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.miniPanel{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  padding: 12px;
}
.miniTitle{
  font-weight: 900;
  letter-spacing:-.01em;
}
.miniSub{
  margin-top: 4px;
  color: rgba(241,245,249,.70);
  font-size: 12.5px;
  line-height:1.45;
}
.miniPanel .grid{ margin-top: 10px; }

/* Overview folds (keeps the right panel clean) */
.overviewFold{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
.overviewSummary{
  cursor:pointer;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  list-style:none;
  font-weight: 950;
  color: rgba(241,245,249,.88);
}
.overviewSummary::-webkit-details-marker{ display:none; }
.overviewSummary::after{ content:"▾"; opacity:.75; }
.overviewFold[open] .overviewSummary::after{ transform: rotate(180deg); }
.overviewFold .includedMini{ border:none; background: transparent; box-shadow:none; padding: 0 12px 12px; }
.overviewFold .overviewTools{ padding: 0 12px 12px; margin-top: 10px; }




/* Filter chips (CPU/GPU brand) */
.filterBar{ margin: 10px 0 12px; display:flex; flex-direction:column; gap:8px; }
.filterChips{ display:flex; gap:8px; flex-wrap:wrap; }
.filterChip{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.filterChip:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.filterChip:focus-visible{ outline: 3px solid rgba(47,123,255,.45); outline-offset: 2px; }
.filterChip.active{
  background: linear-gradient(135deg, rgba(47,123,255,.35), rgba(153,238,255,.14));
  border-color: rgba(47,123,255,.65);
  box-shadow: 0 12px 26px rgba(47,123,255,.14);
}
.filterHint{ font-size: 12px; color: rgba(255,255,255,.72); }
.filterHint a{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); }
.filterNote{ font-size: 12px; color: rgba(255,255,255,.72); margin-top:-2px; }



/* Empty grid state (filters) */
.emptyGrid{
  grid-column: 1 / -1;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 14px;
}
.emptyTitle{ font-weight: 800; margin-bottom: 4px; }
.emptySub{ font-size: 13px; color: rgba(255,255,255,.78); }


/* =========================
   Mobile declutter (publish polish)
   Goal: reduce "everything is shoved in" feeling on phones.
   - fewer always-on rails
   - more breathing room
   - keep the experience guided + readable
   ========================= */

@media (max-width: 720px){
  /* Top context bar: keep only what matters */
  .contextInner{ padding: 10px 14px; gap: 10px; }
  .ctxLeft{ gap: 10px; }
  .ctxLeft .ctxItem{ display:none; }
  /* Tier is the 3rd item */
  .ctxLeft .ctxItem:nth-child(3){ display:block; }
  #resetJourney{ display:none; }

  /* Journey rail is useful, but it eats space on small screens */
  .journeyWrap{ display:none; }

  /* Hero: remove secondary pills row and tighten typography */
  .gbHero .pills{ display:none; }
  .hero h1{ font-size: 30px; }

  /* Reduce helper "walls of text" */
  .compatCallout{ display:none; }
  .viewHint{ display:none; }

  /* Jump nav: horizontal scroll with stronger contrast */
  .jumpNav{
    position: sticky;
    top: calc(var(--navH) + 6px);
    z-index: 60;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .jumpNav::-webkit-scrollbar{ display:none; }
  .jumpBtn{ flex: 0 0 auto; }

  /* Filter hints are helpful, but on mobile they create noise */
  .filterHint{ display:none; }

  /* Drawer bar: respect safe areas */
  .drawerBar{ padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 980px){
  /* Ensure the main flow has room for the bottom drawer bar */
  .gb .container{ padding-bottom: 120px; }
}

/* Keep the "Top" button clear of the mobile drawer bar */
@media (max-width: 980px){
  #toTop{ bottom: calc(96px + env(safe-area-inset-bottom)); }
}




/* =========================
   Premium mobile stepper (big-builder feel)
   - One section at a time
   - Sticky step header
   - Cleaner navigation on phones
   ========================= */

.mStepper{ display:none; }

@media (max-width: 720px){
  .gbMobileStepper .mStepper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    position: sticky;
    top: calc(var(--navH) + 6px);
    z-index: 80;

    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 44px rgba(0,0,0,.45);
  }
  .mStepMid{ min-width: 0; flex: 1; }
  .mStepKicker{
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .78;
    margin-bottom: 3px;
  }
  .mStepTitle{
    font-size: 14px;
    font-weight: 950;
    letter-spacing: -.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mStepSub{
    font-size: 12px;
    color: rgba(255,255,255,.72);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .autoAdv{
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;

    color: rgba(255,255,255,.92);
    cursor: pointer;
  }
  .autoAdv[aria-pressed="false"]{
    background: rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.78);
  }

  /* Soft confirm pill (used by the mobile wizard auto-advance)
     Makes the step change feel intentional (not sudden). */
  .mStepConfirm{
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(56,227,179,.10);

    font-size: 11px;
    font-weight: 950;
    letter-spacing: .02em;
    color: rgba(255,255,255,.92);

    opacity: 0;
    transform: translateY(-6px) scale(.985);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .mStepConfirm.show{
    animation: mStepConfirmPop .48s ease both;
  }
  @keyframes mStepConfirmPop{
    0%{ opacity: 0; transform: translateY(-6px) scale(.985); }
    18%{ opacity: 1; transform: translateY(0) scale(1); }
    78%{ opacity: 1; transform: translateY(0) scale(1); }
    100%{ opacity: 0; transform: translateY(-4px) scale(.992); }
  }

  .mStepper .btn.mini{
    padding: 10px 12px;
    font-size: 12px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Hide the dense jump pills on mobile stepper (we use the step header instead) */
  .gbMobileStepper #modeParts .jumpNav{ display:none !important; }

  /* Show one section at a time for a calm, guided feel */
  .gbMobileStepper #modeParts .partFold,
  .gbMobileStepper #modeParts .reviewSection{
    display:none;
  }
  .gbMobileStepper #modeParts .partFold.isActive,
  .gbMobileStepper #modeParts .reviewSection.isActive{
    display:block;
  }

  /* Reduce duplicated navigation noise */
  .gbMobileStepper #modeParts .partNextRow{ display:none; }

  /* Keep the builder readable: tighter summary area + larger touch targets */
  .gbMobileStepper #modeParts .partBody{ padding-bottom: 16px; }
  .gbMobileStepper #modeParts .card{
    padding: 14px;
    border-radius: 18px;
  }
  .gbMobileStepper #modeParts .cardTitle{ font-size: 14px; }
  .gbMobileStepper #modeParts .cardDesc{ font-size: 12.5px; line-height: 1.55; }
  .gbMobileStepper #modeParts .cardPrice{ font-size: 12px; }

  /* Hide the duplicated sidebar overview on phones (use the bottom drawer instead) */
  #overviewPanel{ display:none !important; }

  /* Keep the bottom bar from feeling cramped */
  .drawerBar{ gap: 10px; }
  .drawerBar .btn{ padding: 12px 12px; font-size: 13px; }

  /* Recommended-only control: compact presentation on mobile */
  .viewControls{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 18px;
  }
  .toggleText .hintInline{ display:none; }
}



/* Mobile dock on the Review page (keeps “Send request” always reachable) */
.reviewDock{ display:none; }
@media (max-width: 720px){
  .reviewDock{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1000;

    display:flex;
    gap: 10px;
    padding: 10px;

    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.60);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 54px rgba(0,0,0,.50);
  }
  .reviewDock .btn{
    flex: 1;
    justify-content:center;
    padding: 12px 14px;
    font-size: 13px;
  }

  /* Reserve space so the dock doesn’t cover the last inputs/buttons */
  body.hasReviewDock{ padding-bottom: 92px; }
  body.hasReviewDock #toTop{ bottom: 102px; }
}


@media (max-width: 720px){
  /* Keep the first screen clean on mobile */
  .gbHeroRight{ display:none !important; }
  .gbHeroGrid{ gap: 12px; }
  .gbHero{ padding: 16px 16px 10px; }
}


/* Builder anchor offsets: account for sticky nav + context bar */
.gb :target{ scroll-margin-top: calc(var(--navH) + 66px + 16px); }