.wizard-head { padding-top: clamp(2rem, 4.5vw, 4.3rem); padding-bottom: 0; }
.wizard-head h1 { font-size: clamp(2.5rem, 6.3vw, 5.2rem); line-height: .99; margin: .45rem 0 1rem; }
.wizard-head .lede { max-width: 59ch; margin-bottom: 1.6rem; }
.wizard-progress {
  --step-color: #254338;
  --step-track: #d7ded4;
  --step-size: 1.65rem;
  margin: 1.25rem 0 0; padding: .65rem clamp(.48rem, 2vw, 1.2rem) .4rem;
  border: 1px solid #d5dbd1; border-radius: 15px; background: #fcfbf7;
}
.wizard-progress-heading {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .25rem .65rem; margin: 0 .25rem .4rem;
}
.wizard-step-count {
  padding: .18rem .55rem; border-radius: 999px; background: #e9eee6;
  color: var(--step-color); font-size: .69rem; font-weight: 800; white-space: nowrap;
}
.wizard-progress-heading strong { color: var(--ink); font-size: .9rem; line-height: 1.25; }
.wizard-progress-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  list-style: none; margin: 0; padding: 0;
}
.wizard-progress-list > li { position: relative; }
.wizard-progress-list > li:not(:last-child)::after {
  position: absolute; inset: calc(var(--step-size) / 2 + .2rem) auto auto 50%;
  width: 100%; height: 2px; transform: translateY(-50%);
  background: var(--step-track); content: ''; pointer-events: none;
}
.wizard-progress-list > li:has(~ li [aria-current="step"])::after {
  background: #799483;
}
.wizard-step {
  display: grid; justify-items: center; align-content: start; gap: .3rem;
  min-height: 44px; height: 100%; padding: .2rem .1rem .25rem; border-radius: 8px;
  color: var(--muted); text-align: center; text-decoration: none; font-weight: 650; font-size: .75rem;
}
.wizard-step-number {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: var(--step-size); height: var(--step-size); border: 1px solid #bdcbbd;
  border-radius: 50%; background: #fcfbf7; color: var(--step-color);
  font-size: .69rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.wizard-step:hover .wizard-step-number { background: #e8eee5; border-color: #799483; }
.wizard-step:hover .wizard-step-label { text-decoration: underline; text-underline-offset: .2em; }
.wizard-step:focus-visible { outline: 2px solid var(--step-color); outline-offset: -1px; }
.wizard-step[aria-current="step"] { color: var(--step-color); font-weight: 800; }
.wizard-step[aria-current="step"] .wizard-step-number {
  border-color: var(--step-color); background: var(--step-color); color: #fcfbf7;
  box-shadow: 0 0 0 2px #fcfbf7, 0 0 0 3px #95a995;
}
.wizard-step-label { line-height: 1.2; }
@media (max-width: 625px) {
  .wizard-step-label { display: none; }
  .wizard-step { align-content: center; padding-block: 0; }
  .wizard-progress-list > li:not(:last-child)::after { top: 50%; }
}
.wizard-launch { padding-top: .5rem; padding-bottom: clamp(3rem, 8vw, 6rem); }
.wizard-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.wizard-path { display: block; color: inherit; text-decoration: none; border: 1px solid #cdd1c5; }
.wizard-path img { display: block; width: 100%; height: auto; }
.wizard-path > div { display: flex; align-items: center; justify-content: space-between; gap: .9rem; padding: 1rem 1.15rem; }
.wizard-path h2 { font-size: clamp(1.15rem, 2.9vw, 2.3rem); margin: 0; }
.wizard-path span, .wizard-shortcuts span { color: #476756; }
.wizard-shortcuts {
  margin-top: 1.35rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem;
}
.wizard-shortcuts a {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .85rem 1rem;
  border: 1px solid #cdd1c5; font-weight: 650; text-decoration: none;
}
.wizard-path:hover, .wizard-shortcuts a:hover { border-color: #527265; }
.wizard-info { max-width: 49rem; padding-bottom: 4rem; }
.wizard-grid {
  display: grid; grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr); align-items: start;
  gap: clamp(1.5rem, 3.5vw, 3.5rem); padding-top: clamp(1.4rem, 3.2vw, 2.65rem);
}
.wizard-grid .builder-sticky {
  position: sticky; top: 1.5rem; min-width: 0; display: grid;
  gap: 1.1rem; padding: clamp(1rem, 2vw, 1.45rem);
  border: 1px solid #d7ddd3; border-radius: 22px; background: #fcfbf7;
}
.builder-drawing { margin: 0; min-width: 0; }
.builder-drawing img { display: block; width: 100%; height: auto; border-radius: inherit; }
.builder-drawing figcaption { margin: .8rem 0 0; color: var(--muted); font-size: .79rem; line-height: 1.5; }
.builder-drawing figcaption a { display: inline-block; margin-top: .35rem; color: var(--ink); text-underline-offset: .2em; }
.builder-summary { display: grid; gap: .75rem; align-content: start; }
.builder-summary > a { justify-self: start; font-size: .85rem; font-weight: 750; text-underline-offset: .2em; }
.builder-status { padding: .9rem 1rem; border-radius: 13px; background: #eaf0e7; }
.builder-status span, .builder-status strong { display: block; }
.builder-status span { color: #3f584b; font-size: .8rem; font-weight: 750; }
.builder-status strong { margin-block: .25rem .35rem; color: #254338; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.12; }
.builder-status p { margin: 0; color: #3f584b; font-size: .8rem; }
.wizard-form {
  min-width: 0; padding: clamp(1rem, 2.5vw, 1.8rem);
  border: 1px solid #d7ddd3; border-radius: 22px; background: #fcfbf7;
}
.wizard-form [data-step-panel], .wizard-contact { scroll-margin-top: 1.5rem; }
.wizard-form fieldset { margin-bottom: 1.5rem; }
.wizard-form legend { margin-bottom: .65rem; }
.wizard-form .options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.wizard-form .choice-card {
  position: relative; min-height: 0; height: 100%; overflow: hidden; padding: 0 0 .56rem;
  display: flex; flex-direction: column; gap: .35rem; align-items: stretch; border-radius: .25rem;
}
.wizard-form .choice-card img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 420; object-fit: contain; background: #eeeae0; }
.wizard-form .choice-card span, .wizard-form .choice-card small { display: block; padding-inline: .6rem; white-space: normal; overflow-wrap: anywhere; }
.wizard-form .choice-card span { font-size: .85rem; line-height: 1.35; }
.wizard-form .choice-card small { margin: auto 0 0; font-size: .73rem; }
.wizard-form .choice-card input {
  position: absolute; inset: .35rem .35rem auto auto; margin: 0; z-index: 1;
  accent-color: #294539; width: 1rem; height: 1rem;
}
.wizard-form .choice-card:has(input:checked) { border-color: #294539; box-shadow: inset 0 0 0 1px #294539; }
.wizard-form .choice-card:has(input:disabled) {
  opacity: 1; cursor: not-allowed; color: #586055; border-color: #d7d7cc; background: #f0eee6;
}
.wizard-form .choice-card .option-condition { margin: 0; color: #5b665a; }
.wizard-form .choice-card:focus-within { outline: 2px solid #294539; outline-offset: 2px; }
.wizard-contact { margin: 1.8rem 0; }
.wizard-contact .kicker { margin-bottom: .45rem; }
.wizard-js { display: none; }
.wizard-enhanced .wizard-js { display: inline-flex; }
[data-step-panel][hidden] { display: none; }
@media (max-width: 850px) {
  .wizard-grid { grid-template-columns: 1fr; }
  .wizard-grid .builder-sticky {
    position: static; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start; gap: clamp(1rem, 3vw, 1.75rem);
  }
}
@media (max-width: 590px) {
  .wizard-grid .builder-sticky { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 525px) {
  .wizard-form .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-paths { gap: .65rem; }
  .wizard-path > div { padding: .7rem .6rem; }
  .wizard-path h2 { font-size: 1.1rem; }
  .wizard-shortcuts { grid-template-columns: 1fr; gap: .5rem; }
}
.wizard-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.2rem}.choice-card small:empty{display:none}
.drawing-preview { position: relative; border-radius: 12px; }
.drawing-expand {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  border: 0; border-radius: inherit; background: transparent; color: var(--ink);
}
.drawing-expand-tag {
  position: absolute; inset: .75rem .75rem auto auto;
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .55rem;
  background: #f7f5ec; border: 1px solid #9aa49a; border-radius: .35rem;
  font-size: .72rem; font-weight: 750;
}
.drawing-expand:hover .drawing-expand-tag { background: #fff; }
.drawing-dialog {
  width: min(64rem, calc(100% - 1.5rem), max(18rem, calc(152dvh - 7rem)));
  max-width: none; max-height: calc(100dvh - 1.5rem); padding: 0;
  border: 1px solid #d7ddd3; border-radius: 16px;
  background: #fcfbf7; color: var(--ink); box-shadow: 0 16px 56px #0e17144d;
}
.drawing-dialog::backdrop { background: rgba(14, 23, 20, .7); }
html:has(.drawing-dialog[open]) { overflow: hidden; }
.drawing-dialog-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .7rem; font-size: .88rem; line-height: 1.25;
}
.drawing-dialog-close {
  display: inline-flex; flex: none; align-items: center; gap: .4rem;
  min-height: 44px; padding: .35rem .65rem; font-weight: 750;
  border: 1px solid #d5dbd1; border-radius: 8px; background: #eaf0e7;
}
.drawing-dialog-close:hover { background: #dfe9dc; }
.drawing-dialog-close:focus-visible { outline-offset: 1px; }
.drawing-dialog-image { padding: 0 .7rem .7rem; }
.drawing-dialog-image img {
  display: block; width: 100%; height: auto; max-height: calc(100dvh - 7rem);
  object-fit: contain; border-radius: 10px; background: #eeeae0;
}
.choice-card img { border: 1px solid #d9ded5; border-radius: .38rem; background: #eeeae0; }
.choice-card:has(input:checked) img { border-color: #456759; }
@media (max-width: 640px) {
  .drawing-expand-tag > span { display: none; }
  .drawing-expand-tag { inset: .35rem .35rem auto auto; min-width: 2rem; min-height: 2rem; justify-content: center; padding: .22rem; }
  .drawing-dialog { width: calc(100% - .75rem); }
  .drawing-dialog-image { padding: 0 .35rem .35rem; }
}
