/* Northern Moose — Retro Premium Agency (no external deps) */
:root{
  --ink:#111;
  --maxw: 1200px;
  --pad: clamp(18px, 3.3vw, 38px);
  --radius: 26px;
  --shadow: 0 18px 42px rgba(0,0,0,.18);
  --shadow2: 0 10px 24px rgba(0,0,0,.14);
  --title: clamp(52px, 8.4vw, 112px);
  --h2: clamp(28px, 4.2vw, 52px);
  --p: clamp(18px, 1.8vw, 22px);
  --texOpacity: 0.03;
  --bgFilterSat: 1;
  --bgFilterBright: 1;
  --bgFilterContrast: 1;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--ink);
  overflow-y:auto;
  overscroll-behavior:none;
  background: transparent;
}
.bg{
  position: fixed; inset: 0; z-index: -5; will-change: transform;
  filter: saturate(var(--bgFilterSat)) brightness(var(--bgFilterBright)) contrast(var(--bgFilterContrast));
  transition: filter 220ms ease;
}
.bgA{ background: #f1e8d8; }
.bgB{ background: #e7efe8; transform: translateX(100%); }
.grain{
  position:fixed; inset:0;
  pointer-events:none;
  opacity: var(--texOpacity);
  mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
}
.nav{
  position:fixed; top:18px; left:50%;
  transform:translateX(-50%);
  width:min(var(--maxw), calc(100% - 28px));
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  z-index:50;
  isolation:isolate;
  overflow:hidden;
  border-radius: 16px;
}
.nav-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.nav-decor .bar{
  position:absolute;
  top:-8px;
  bottom:-8px;
  width:26px;
  transform: skewX(-12deg);
  border-radius: 10px;
  opacity:.18;
}
.bar1 { left: 10%; background: rgba(197, 71, 71, 0.22); }
.bar2 { left: 24%; background: rgba(62, 158, 100, 0.18); }
.bar3 { left: 38%; background: rgba(84, 128, 204, 0.20); }
.bar4 { left: 53%; background: rgba(201, 164, 69, 0.18); }
.bar5 { left: 69%; background: rgba(170, 93, 170, 0.18); }
.bar6 { left: 84%; background: rgba(53, 137, 162, 0.18); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:950; letter-spacing:.2px; }
.dot{ width:14px; height:14px; border-radius:50%; background:#111; }
.navlinks{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.brand,.navlinks{ position:relative; z-index:1; }
.navText{
  border:none;
  background: rgba(255,255,255,.40); color:var(--ink);
  font: inherit; font-weight:950; cursor:pointer;
  padding: 6px 12px;
  border-radius: 999px;
  opacity:.92;
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.navText[data-jump="0"]{ background: rgba(241,232,216,.86); }
.navText[data-jump="1"]{ background: rgba(231,239,232,.86); }
.navText[data-jump="2"]{ background: rgba(233,232,245,.86); }
.navText[data-jump="3"]{ background: rgba(243,239,207,.86); }
.navText[data-jump="4"]{ background: rgba(228,236,251,.86); }
.navText[data-jump="5"]{ background: rgba(243,219,231,.86); }
.navText:hover{ opacity:1; transform: translateY(-1px); }
.navText:active{ transform: translateY(0); }
.navText.isActive{
  box-shadow: none;
  opacity: 1;
}
@media (max-width: 980px){
  .nav-decor .bar { opacity: .12; width: 20px; }
}
@media (max-width: 700px){
  .bar2, .bar4, .bar6 { display: none; }
  .nav-decor .bar { opacity: .10; width: 16px; }
}

.hint{position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 0; background: transparent; border: none; box-shadow: none; font-weight: 950; user-select:none; opacity:.85;}
.hint small{ font-weight:900; opacity:.8; }

.scrollSpace{ height: calc(6 * 100vh); }
.stage{ position: sticky; top: 0; height: 100vh; overflow:hidden; }
.layer{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding: calc(var(--pad) + 70px) var(--pad) var(--pad);
  opacity:0; pointer-events:none;
  will-change: transform, opacity;
}
.wrap{
  width:min(var(--maxw), 100%);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:center;
}
@media (max-width: 980px){ .wrap{ grid-template-columns: 1fr; } }
.altL .media{ order: 0; } .altL .content{padding:0; background:transparent; border:none; box-shadow:none; position:relative;}
.altR .media{ order: 1; } .altR .content{ order: 0; }
@media (max-width: 980px){
  .altL .media, .altR .media{ order: 0; }
  .altL .content, .altR .content{ order: 1; }
}
.posterPlaceholder{min-height:440px; position:relative; border:none; background:transparent; box-shadow:none; overflow:visible;}
.phBox{display:none;}
.phTag{position:absolute; left:0; bottom:0; padding: 0; background: transparent; border: none; border-radius: 0; font-weight: 950; opacity:.55; box-shadow:none;}
.posterPlaceholder.hasImage{
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.posterImg{
  display:block;
  width: auto;
  max-width: min(100%, 720px);
  max-height: 720px;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: none;
}
.layer[data-section="Services"] .posterImg{
  max-width: 720px;
  max-height: 720px;
  background: transparent;
  mix-blend-mode: normal;
  opacity: 1;
  filter: none;
}
.layer[data-section="Contact"] .posterImg{
  max-width: 720px;
  max-height: 720px;
  background: transparent;
  mix-blend-mode: normal;
  opacity: 1;
  filter: none;
}
.layer[data-section="Secure"] .posterImg{
  max-width: 400px;
  max-height: 460px;
}
.content{
  background: rgba(242,231,214,.72);
  border: 2px solid rgba(17,17,17,.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 34px);
  position:relative;
}
.content:before{content:""; display:none;}

/* Remove text box only in Services and Work sections */
.layer[data-section="Services"] .content,
.layer[data-section="Work"] .content,
.layer[data-section="Contact"] .content{
  background: transparent;
  border: none;
  box-shadow: none;
}
.label{display:none;}
.w{display:inline-block; white-space:pre; will-change:transform,filter,opacity;}
.h1{ font-size: var(--title); line-height:.92; margin: 6px 0 10px; letter-spacing:-1px; font-weight: 950; }
.h2{ font-size: var(--h2); margin: 6px 0 12px; letter-spacing:-.6px; font-weight: 950; }
.p{ font-size: var(--p); line-height:1.42; margin:0; opacity:.95; font-weight: 750; }
.tagline{ margin-top: 2px; font-weight: 850; letter-spacing: .2px; opacity: .85; }
.rowBtns{ margin-top:18px; display:flex; gap:14px; flex-wrap:wrap; }
.linkBtn{
  border: 2px solid rgba(17,17,17,.22);
  background: rgba(255,255,255,.30);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 950;
  cursor:pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.linkBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.42); }
.linkBtn:active{ transform: translateY(0); }
.linkBtn.ghost{ background: transparent; }
.chips{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 14px; }
.chip{padding:0; border:none; background:transparent; font-weight:900; opacity:.92;}
.workGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 980px){ .workGrid{ grid-template-columns: 1fr; } }
.workItem{
  padding: 14px 14px 12px;
  border: 2px solid rgba(17,17,17,.18);
  border-radius: 16px;
  background: rgba(242,231,214,.70);
  box-shadow: var(--shadow);
  min-height: 136px;
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:space-between;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
  cursor: pointer;
}
.workItem:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.62);
  border-color: rgba(17,17,17,.28);
}
.workItem h3{ margin: 0 0 6px; font-size: 18px; letter-spacing: -.2px; }
.workItem p{ margin: 0; font-size: 15px; opacity:.92; line-height:1.35; font-weight: 700; }
.workSoon{
  margin-top: 6px;
  width: fit-content;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.55);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1px;
  opacity:.85;
}
.micro{ opacity:.82; font-size: 13px; line-height:1.35; margin-top: 12px; }
.micro.tiny{ margin-top: 10px; font-size: 12px; opacity: .78; }
.ctaRow{ margin-top: 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ctaArrow{
  display:flex; align-items:center; gap:12px;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.22);
  background: rgba(255,255,255,.35);
  box-shadow: var(--shadow2);
  padding: 12px 18px;
  cursor:pointer;
  font-weight: 950;
}
.ctaArrow:hover{ transform: translateY(-1px); }
.ctaArrow .arrow{ font-size: 24px; }
.loading{
  position: fixed; inset:0; z-index: 100;
  display:grid; place-items:center;
  background: rgba(242,231,214,.92);
  transition: opacity 520ms ease, transform 520ms ease;
}
.loading.hide{ opacity:0; transform: translateY(10px); pointer-events:none; }
.loadCard{
  width: min(760px, calc(100% - 28px));
  background: rgba(255,255,255,.35);
  border: 2px solid rgba(17,17,17,.18);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 22px;
}
.loadRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brandMini{ display:flex; align-items:center; gap:10px; }
.loadTitle{ font-weight:950; font-size: 28px; letter-spacing:-.4px; margin-top:12px; }
.loadSub{ opacity:.85; margin-top:4px; font-weight: 750; }
.bar{
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.35);
  overflow:hidden;
  margin-top: 16px;
}
.bar > i{
  display:block; height: 100%; width: 28%;
  background: rgba(17,17,17,.18);
  border-radius: 999px;
  animation: load 1.1s ease infinite;
}
@keyframes load{ 0%{ transform: translateX(-50%); } 100%{ transform: translateX(300%); } }
.modal{ position: fixed; inset:0; z-index: 90; display:none; overflow-y:auto; }
.modal.show{ display:block; }
.modalBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.35); }
.modalCard{
  position: relative;
  width: min(1280px, calc(100% - 28px));
  margin: 86px auto 24px;
  max-height: 84vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(242,231,214,.96);
  border: 2px solid rgba(17,17,17,.18);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  padding: 18px;
}
.modalCard.wideOn{
  width: min(1660px, calc(100% - 14px));
  max-height: 88vh;
}
.modalCard.wideOn .modalGrid{ gap: 10px; padding: 10px 4px 4px; }
.modalCard.small{ width: min(760px, calc(100% - 28px)); }
.modalTop{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding: 10px 10px 16px;
  border-bottom: 2px solid rgba(17,17,17,.12);
}
.modalTitle{ font-weight:950; font-size: 24px; letter-spacing:-.2px; }
.modalSub{ opacity:.85; font-weight: 750; margin-top: 4px; }
.topBtns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.pill{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.28);
  font-size: 12px;
  font-weight: 950;
  margin-left: 8px;
  vertical-align: middle;
}
.modalGrid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "box1 box2"
    "box3 box4"
    "box5 box5"
    "box6 box7";
  gap: 12px;
  padding: 12px 6px 6px;
  align-items:start;
}
.modalCard.wideOn .modalGrid{
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "box1 box6 box7"
    "box2 box6 box7"
    "box3 box6 box7"
    "box4 box6 box7"
    "box5 box6 box7";
  gap: 10px;
}
#builderStep1{
  grid-area: box1;
  min-width: 0;
  min-height: 260px;
}
#builderStep2{ grid-area: box2; min-width: 0; }
#builderStep2{
  min-height: 260px;
}
#builderStepUx{ grid-area: box3; min-width: 0; }
#builderStepTech{ grid-area: box4; min-width: 0; }
#builderStepFeatures{ grid-area: box5; min-width: 0; }
#builderStep3{ grid-area: box6; min-width: 0; }
#printArea{ grid-area: box7; min-width: 0; }
#builderStep1{
  border-color: rgba(63,111,203,.42);
  box-shadow: inset 0 0 0 1px rgba(63,111,203,.16);
  background: linear-gradient(0deg, rgba(63,111,203,.08), rgba(63,111,203,.08)), rgba(255,255,255,.34);
}
#builderStep2{
  border-color: rgba(43,139,99,.42);
  box-shadow: inset 0 0 0 1px rgba(43,139,99,.16);
  background: linear-gradient(0deg, rgba(43,139,99,.08), rgba(43,139,99,.08)), rgba(255,255,255,.34);
}
#builderStepUx{
  border-color: rgba(138,74,168,.42);
  box-shadow: inset 0 0 0 1px rgba(138,74,168,.16);
  background: linear-gradient(0deg, rgba(138,74,168,.08), rgba(138,74,168,.08)), rgba(255,255,255,.34);
}
#builderStepTech{
  border-color: rgba(180,77,61,.42);
  box-shadow: inset 0 0 0 1px rgba(180,77,61,.16);
  background: linear-gradient(0deg, rgba(180,77,61,.08), rgba(180,77,61,.08)), rgba(255,255,255,.34);
}
#builderStepFeatures{
  border-color: rgba(45,127,145,.42);
  box-shadow: inset 0 0 0 1px rgba(45,127,145,.16);
  background: linear-gradient(0deg, rgba(45,127,145,.08), rgba(45,127,145,.08)), rgba(255,255,255,.34);
}
#builderStep1 .stepH{ color:#2f5ead; }
#builderStep2 .stepH{ color:#1f7a52; }
#builderStepUx .stepH{ color:#7a3e9a; }
#builderStepTech .stepH{ color:#a34235; }
#builderStepFeatures .stepH{ color:#236f80; }
@media (max-width: 1100px){
  .modalGrid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "box1"
      "box2"
      "box3"
      "box4"
      "box5"
      "box6"
      "box7";
    gap: 12px;
    padding: 12px 6px 6px;
  }
  .modalCard.wideOn .modalGrid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "box1"
      "box2"
      "box3"
      "box4"
      "box5"
      "box6"
      "box7";
    gap: 12px;
  }
  #builderStep1,
  #builderStep2,
  #builderStepUx,
  #builderStepTech,
  #builderStepFeatures,
  #builderStep3,
  #printArea{
    grid-column:auto;
    grid-row:auto;
  }
}
.stepCard, .resultCard{
  border-radius: 22px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.30);
  padding: 14px;
}
.stepH{ font-weight:950; font-size: 18px; margin-bottom: 10px; }
.needSelector{
  position: relative;
  margin-top: 4px;
  margin-bottom: 10px;
}
.needSelectTrigger{
  width: 100%;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 16px;
  border: 2px solid rgba(17,17,17,.20);
  background: rgba(255,255,255,.42);
  padding: 12px 14px;
  font: inherit;
  cursor: pointer;
}
.needSelectLead{
  font-weight: 900;
  opacity:.72;
}
.needSelectValue{
  margin-left: auto;
  font-weight: 950;
}
.needSelectArrow{
  font-size: 12px;
  opacity:.82;
  transition: transform 180ms ease;
}
.needSelector.open .needSelectArrow{ transform: rotate(180deg); }
.needPanel{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 70;
  display: none;
  border-radius: 18px;
  border: 2px solid rgba(17,17,17,.20);
  background: rgba(242,231,214,.98);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  padding: 8px;
  max-height: min(56vh, 420px);
  overflow-y: auto;
}
.needPanel.open{ display:block; }
.step2Selector{
  position: relative;
  margin-top: 4px;
  margin-bottom: 10px;
}
.step2SelectTrigger{
  width: 100%;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 16px;
  border: 2px solid rgba(17,17,17,.20);
  background: rgba(255,255,255,.42);
  padding: 12px 14px;
  font: inherit;
  cursor: pointer;
}
.step2SelectLead{
  font-weight: 900;
  opacity:.72;
}
.step2SelectValue{
  margin-left: auto;
  font-weight: 900;
  font-size: 13px;
  opacity:.92;
  text-align:right;
}
.step2SelectArrow{
  font-size: 12px;
  opacity:.82;
  transition: transform 180ms ease;
}
.step2Selector.open .step2SelectArrow{ transform: rotate(180deg); }
.step2Panel{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 68;
  display: none;
  border-radius: 18px;
  border: 2px solid rgba(17,17,17,.20);
  background: rgba(242,231,214,.98);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  padding: 8px 10px 10px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
}
.step2Panel.open{ display:block; }
#builderStep2 .step2SelectTrigger{
  display: none;
}
#builderStep2 .step2Panel{
  position: static;
  display: block;
  top: auto;
  left: auto;
  right: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-height: none;
  overflow: visible;
}
.step2Panel > .qBlock{
  margin-top: 10px;
  border-radius: 14px;
  border: 2px solid rgba(17,17,17,.14);
  border-left: 6px solid var(--qColor);
  background: rgba(255,255,255,.42);
  padding: 10px 12px;
}
.step2Panel > .qBlock:first-child{ margin-top: 0; }
.step2Panel > .qBlock.qFeatures{
  padding: 10px;
}
.step2Panel .qBlock{
  padding-left: 12px;
}
.step2Panel .seg{
  margin-top: 6px;
}
.step2Panel .segBtn{
  border-radius: 12px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.58);
}
.step2Panel .check{
  border: 2px solid rgba(17,17,17,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.52);
  padding: 8px 10px;
}
.choiceGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.choice{
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.25);
  border-radius: 18px;
  padding: 12px;
  font-weight: 950;
  cursor:pointer;
  text-align:left;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
}
.choice.active{ background: rgba(17,17,17,.10); }
.choice[aria-checked="true"]{
  border-color: rgba(17,17,17,.45);
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.20);
}
.needPanel .choice{
  border-radius: 14px;
  border: 2px solid rgba(17,17,17,.16);
  background: rgba(255,255,255,.55);
  padding: 10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.needPanel .choice + .choice{ margin-top: 8px; }
.needRowTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.needCheck{
  opacity:0;
  font-weight: 950;
  font-size: 13px;
}
.needPanel .choice.active .needCheck,
.needPanel .choice[aria-checked="true"] .needCheck{ opacity: 1; }
.needPanel .choiceTitle,
.needPanel .choiceMeta{
  order: unset;
  margin: 0;
}
.needPanel .choiceMeta{ flex-basis:auto; }
.choiceTitle{ font-weight: 950; font-size: 16px; }
.choiceTitle{ order: 1; }
.choiceMeta{
  order: 3;
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 800;
  opacity:.86;
  line-height: 1.35;
}
.scopeBadge{
  order: 2;
  margin-left: auto;
  display:inline-flex;
  width: fit-content;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.18);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 950;
}
.scopeBadge.low{ background: rgba(87,130,88,.16); }
.scopeBadge.mid{ background: rgba(181,147,77,.18); }
.scopeBadge.high{ background: rgba(155,74,62,.18); }
.scopeCompare{
  margin-top: 10px;
  border-radius: 14px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(242,231,214,.72);
  padding: 10px 12px;
  font-weight: 850;
  font-size: 13px;
  line-height: 1.35;
}
.previewBox{
  margin-top: 12px;
  border-radius: 18px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(242,231,214,.72);
  padding: 12px;
  font-weight: 750;
  opacity:.92;
}
.opt{ margin-top: 12px; }
.optLabel{ display:block; font-weight: 950; margin-bottom: 8px; }
.optRow{ display:flex; align-items:center; gap:10px; }
.range{ width: 100%; }
.optValue{
  min-width: 46px; text-align:center;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.25);
  padding: 8px 10px;
  font-weight: 950;
}
.seg{ display:flex; gap:8px; flex-direction:column; }
.segBtn{
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.25);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 950;
  cursor:pointer;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.segBtn.active{ background: rgba(17,17,17,.10); }
#designSeg,
#uxSeg,
#techSeg{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#designSeg{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#designSeg .segBtn,
#uxSeg .segBtn,
#techSeg .segBtn{
  min-height: 46px;
  justify-content: center;
  text-align: center;
  padding: 8px 10px;
}
.checkGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}
.check{ display:flex; gap:10px; align-items:flex-start; font-weight: 900; opacity:.92; }
.check input{ transform: translateY(2px); }
.checkCopy{ display:flex; flex-direction:column; gap:4px; }
.techIndicator{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom: 10px;
}
.techPill{
  display:inline-flex;
  width: fit-content;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.30);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 950;
  cursor:help;
}
.techPill.active{ background: rgba(17,17,17,.12); }
.incBlock{
  margin-top: 12px;
  border-radius: 16px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(242,231,214,.70);
  padding: 10px 12px;
}
.incTitle{ font-weight: 950; margin-bottom: 6px; }
.incList{ margin:0; padding-left: 0; }
.incList li{
  margin: 5px 0;
  font-weight: 820;
  opacity:.94;
  line-height: 1.32;
}
.qNeed{ --qColor: #3f6fcb; --qBg: rgba(63,111,203,.16); }
.qPages{ --qColor: #ad7a27; --qBg: rgba(173,122,39,.16); }
.qDesign{ --qColor: #2b8b63; --qBg: rgba(43,139,99,.16); }
.qUx{ --qColor: #8a4aa8; --qBg: rgba(138,74,168,.16); }
.qTech{ --qColor: #b44d3d; --qBg: rgba(180,77,61,.16); }
.qFeatures{ --qColor: #2d7f91; --qBg: rgba(45,127,145,.16); }
.qV2{ --qColor: #6b5a42; --qBg: rgba(107,90,66,.14); }
.qBlock{
  border-left: 4px solid var(--qColor);
  padding-left: 10px;
}
.qNeed .choice.active,
.qNeed .choice[aria-checked="true"]{
  border-color: var(--qColor);
  background: var(--qBg);
}
.qPages .range{ accent-color: var(--qColor); }
.qDesign .segBtn.active,
.qUx .segBtn.active,
.qTech .segBtn.active{
  border-color: var(--qColor);
  background: var(--qBg);
}
.qTech .techPill.active{
  border-color: var(--qColor);
  background: var(--qBg);
}
.qFeatures .check input{ accent-color: var(--qColor); }
.qFeatures .check input:checked + .checkCopy{
  border-left: 4px solid var(--qColor);
  padding-left: 8px;
}
.v2Panel{
  margin-top: 12px;
  border-radius: 14px;
  border: 2px solid rgba(17,17,17,.16);
  background: rgba(255,255,255,.42);
  padding: 10px 12px;
}
.v2Grid{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.v2Field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight: 850;
}
.v2Field select{
  border-radius: 12px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.64);
  padding: 8px 10px;
  font: inherit;
}
.v2Usage{
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 2px dashed rgba(17,17,17,.20);
  background: rgba(255,255,255,.52);
  padding: 8px 10px;
}
.v2UsageTitle{
  font-weight: 950;
  margin-bottom: 4px;
}
.v2UsageList{
  margin: 0;
  padding-left: 18px;
}
.v2UsageList li{
  margin: 4px 0;
  font-size: 12px;
  line-height: 1.35;
}
.incItem{
  list-style: none;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 2px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.35);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.incFrom{
  display:inline-flex;
  width: fit-content;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.16);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1px;
}
.incText{ font-weight: 830; line-height: 1.32; }
.incItem.group-need{ border-left: 4px solid #3f6fcb; }
.incItem.group-pages{ border-left: 4px solid #ad7a27; }
.incItem.group-design{ border-left: 4px solid #2b8b63; }
.incItem.group-ux{ border-left: 4px solid #8a4aa8; }
.incItem.group-tech{ border-left: 4px solid #b44d3d; }
.incItem.group-features{ border-left: 4px solid #2d7f91; }
.incItem.group-v2{ border-left: 4px solid #6b5a42; }
.incItem.group-need{
  border-color: rgba(63,111,203,.38);
  background: linear-gradient(0deg, rgba(63,111,203,.11), rgba(63,111,203,.11)), rgba(255,255,255,.48);
}
.incItem.group-pages{
  border-color: rgba(173,122,39,.38);
  background: linear-gradient(0deg, rgba(173,122,39,.11), rgba(173,122,39,.11)), rgba(255,255,255,.48);
}
.incItem.group-design{
  border-color: rgba(43,139,99,.38);
  background: linear-gradient(0deg, rgba(43,139,99,.11), rgba(43,139,99,.11)), rgba(255,255,255,.48);
}
.incItem.group-ux{
  border-color: rgba(138,74,168,.38);
  background: linear-gradient(0deg, rgba(138,74,168,.11), rgba(138,74,168,.11)), rgba(255,255,255,.48);
}
.incItem.group-tech{
  border-color: rgba(180,77,61,.38);
  background: linear-gradient(0deg, rgba(180,77,61,.11), rgba(180,77,61,.11)), rgba(255,255,255,.48);
}
.incItem.group-features{
  border-color: rgba(45,127,145,.38);
  background: linear-gradient(0deg, rgba(45,127,145,.11), rgba(45,127,145,.11)), rgba(255,255,255,.48);
}
.incItem.group-v2{
  border-color: rgba(107,90,66,.38);
  background: linear-gradient(0deg, rgba(107,90,66,.11), rgba(107,90,66,.11)), rgba(255,255,255,.48);
}
.incFrom.group-need{
  background: rgba(63,111,203,.24);
  border-color: rgba(63,111,203,.44);
}
.incFrom.group-pages{
  background: rgba(173,122,39,.24);
  border-color: rgba(173,122,39,.44);
}
.incFrom.group-design{
  background: rgba(43,139,99,.24);
  border-color: rgba(43,139,99,.44);
}
.incFrom.group-ux{
  background: rgba(138,74,168,.24);
  border-color: rgba(138,74,168,.44);
}
.incFrom.group-tech{
  background: rgba(180,77,61,.24);
  border-color: rgba(180,77,61,.44);
}
.incFrom.group-features{
  background: rgba(45,127,145,.24);
  border-color: rgba(45,127,145,.44);
}
.incFrom.group-v2{
  background: rgba(107,90,66,.24);
  border-color: rgba(107,90,66,.44);
}
.incItem.isChanged{
  box-shadow: 0 0 0 2px rgba(17,17,17,.18) inset;
  transform: translateY(-1px);
}
.lockHint{
  margin-bottom: 10px;
  border-radius: 12px;
  border: 2px dashed rgba(17,17,17,.22);
  background: rgba(255,255,255,.38);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
}
.lockable:not(.isLocked) .lockHint{ display:none; }
.lockable.isLocked .opt,
.lockable.isLocked .seg,
.lockable.isLocked .checkGrid,
.lockable.isLocked .incBlock,
.lockable.isLocked .receipt,
.lockable.isLocked .levelCard,
.lockable.isLocked .exBox{
  opacity: .55;
}
.debugLine{
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.advMore{
  display:none;
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 760;
  opacity:.86;
  line-height: 1.35;
}
#pricingModal .advOnly{ display:none; }
#pricingModal .v2Only{ display:none; }
#pricingModal.advanced-on .advMore{ display:block; }
#pricingModal.advanced-on .advOnly{ display:block; }
#pricingModal.advanced-v2-on .v2Only{ display:block; }
#toggleAdvanced.isOn{ background: rgba(17,17,17,.12); }
#toggleWide.isOn{ background: rgba(17,17,17,.12); }
#toggleAdvancedV2.isOn{ background: rgba(17,17,17,.12); }
.receipt{
  border-radius: 18px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(242,231,214,.70);
  padding: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}
.receipt .rLine{ display:flex; justify-content:space-between; gap:10px; padding: 6px 0; border-bottom: 1px solid rgba(17,17,17,.10); }
.receipt .rLine:last-child{ border-bottom:none; }
.receipt .k{ opacity:.80; }
.receipt .v{ font-weight: 950; }
.levelCard{
  border-radius: 22px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.28);
  padding: 12px;
}
.levelTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.levelTitle{ font-weight: 950; opacity: .84; }
.levelNum{ font-weight: 950; font-size: 56px; letter-spacing: -1px; margin-top: 4px; }
.stamp{
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(242,231,214,.72);
  padding: 8px 12px;
  font-weight: 950;
}
.levelDesc{ font-weight: 850; opacity:.90; margin-top: 6px; }
.meters{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }
.mRow{ display:grid; grid-template-columns: 140px 1fr; gap:10px; align-items:center; }
.mLabel{ font-weight: 950; opacity:.84; }
.mBar{
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.30);
  overflow:hidden;
}
.mBar i{ display:block; height:100%; width:0%; background: rgba(17,17,17,.20); transition: width 260ms ease; }
.rangeLine{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top: 12px; }
.rangeLabel{ font-weight: 950; opacity:.84; }
.rangeValue{ font-weight: 950; font-size: 30px; letter-spacing: -.5px; }
.exBox{
  margin-top: 12px;
  border-radius: 18px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(242,231,214,.70);
  padding: 12px;
}
.exTitle{ font-weight: 950; margin-bottom: 8px; }
.exList{ margin:0; padding-left: 18px; }
.exList li{ margin: 6px 0; font-weight: 850; opacity:.92; }
.sendBody{ padding: 14px 10px 10px; }
.ta{
  width: 100%;
  border-radius: 18px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.28);
  padding: 12px;
  font: inherit;
  font-weight: 850;
}
.sendBtns{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.drawer{
  position: fixed;
  top: 0; right: -420px;
  width: 420px;
  height: 100%;
  z-index: 80;
  background: rgba(242,231,214,.96);
  border-left: 2px solid rgba(17,17,17,.18);
  box-shadow: -20px 0 60px rgba(0,0,0,.22);
  transition: transform 420ms ease;
  transform: translateX(0);
}
.drawer.show{ transform: translateX(-420px); }
@media (max-width: 520px){
  .drawer{ width: 100%; right: -100%; }
  .drawer.show{ transform: translateX(-100%); }
}
.drawerTop{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding: 18px;
  border-bottom: 2px solid rgba(17,17,17,.12);
}
.drawerTitle{ font-weight: 950; font-size: 22px; }
.drawerSub{ opacity:.84; font-weight: 850; margin-top: 4px; }
.drawerBtns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.drawerBody{ padding: 16px 18px 28px; overflow:auto; height: calc(100% - 84px); }
.block{ margin-top: 14px; }
.blockH{ font-weight: 950; margin-bottom: 10px; }
.presetRow{ display:flex; gap:10px; flex-wrap:wrap; }
.preset{
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.24);
  padding: 10px 12px;
  font-weight: 950;
  cursor:pointer;
}
.preset.active{ background: rgba(17,17,17,.10); }
.ctrl{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
}
.ctrl label{ font-weight: 900; opacity:.92; }
.ctrl label{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.infoTip{
  width:18px; height:18px;
  border-radius:50%;
  border:1px solid rgba(17,17,17,.35);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:950; line-height:1;
  background: rgba(255,255,255,.45);
  cursor:help;
}
.infoTip:hover, .infoTip:focus-visible{
  background: rgba(17,17,17,.10);
  outline: none;
}
.ctrl select, .ctrl input[type="range"]{
  width: 100%;
  border-radius: 14px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.24);
  padding: 10px;
  font: inherit;
  font-weight: 900;
}
.stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat{
  border-radius: 18px;
  border: 2px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.24);
  padding: 12px;
}
.stat .k{ font-weight: 900; opacity:.82; font-size: 12px; }
.stat .v{ font-weight: 950; font-size: 20px; margin-top: 6px; }

body.theme-light{
  --bgFilterSat: 1;
  --bgFilterBright: 1;
  --bgFilterContrast: 1;
}
body.theme-vibrant{
  --bgFilterSat: 1.28;
  --bgFilterBright: 1.04;
  --bgFilterContrast: 1.05;
}
body.theme-darker{
  --bgFilterSat: .9;
  --bgFilterBright: .86;
  --bgFilterContrast: 1.06;
}
@media print{
  body{ background:#fff !important; }
  .nav, .hint, .drawer, .modalBackdrop, #sendModal, #loading{ display:none !important; }
  #pricingModal{ display:block !important; position: static !important; }
  #pricingModal .modalCard{ box-shadow:none !important; border:none !important; margin:0 !important; width: 100% !important; }
  #pricingModal .modalGrid{ grid-template-columns: 1fr !important; }
  #pricingModal .stepCard{ display:none !important; }
  #printArea{ display:block !important; border: none !important; }
}