@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/HankenGrotesk-Latin.woff2') format('woff2')}
:root{font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;color:#26342f;background:#f5f0e7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}.topbar{height:86px;padding:0 max(34px,calc((100vw - 1480px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ded8ce;background:#fbf8f2}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#f3a28d;color:#26342f;font-family:Georgia,serif;font-size:27px;font-weight:700;transform:rotate(-7deg)}.brand-mark span{font-size:12px;align-self:start;margin-left:-8px;margin-top:6px}.brand strong{display:block;font-family:Georgia,serif;font-size:21px;letter-spacing:-.8px}.brand small{display:block;color:#78817b;font-size:11px;margin-top:2px}.topbar-note{color:#8d948e;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.workspace{max-width:1480px;margin:auto;padding:44px 34px 70px;display:grid;grid-template-columns:minmax(420px,590px) minmax(440px,1fr);gap:clamp(36px,5vw,88px);align-items:start}.intro{padding-bottom:26px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:#db876d}.intro h1{font:750 clamp(46px,4.2vw,64px)/.99 'Fraunces',Georgia,serif;letter-spacing:-.055em;margin:13px 0 19px}.intro h1 em{color:#df9079;font-style:normal}.intro p{font-size:15px;line-height:1.55;color:#66716a;margin:0;max-width:405px}.section-title{display:flex;align-items:center;gap:11px;margin:29px 0 17px}.section-title span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#d8e8d8;font-size:11px;font-weight:700;color:#3e6a4c}.section-title h2{font:700 24px 'Fraunces',Georgia,serif;letter-spacing:-.025em;margin:0}.parking-heading{margin-bottom:4px}.section-help{font-size:13px;line-height:1.5;color:#718078;margin:0 0 14px 39px}.field{margin-bottom:14px;min-width:0}.field label{display:block;font-size:12px;font-weight:700;color:#56655c;margin-bottom:7px}.field label small{font-weight:400;color:#96a099}.field input,.field textarea,.field select{width:100%;appearance:none;border:1px solid #dedbd3;background:#fffdfa;border-radius:12px;padding:13px 14px;color:#283830;outline:none;transition:border-color .2s,box-shadow .2s}.field input:focus,.field textarea:focus,.field select:focus{border-color:#df9c86;box-shadow:0 0 0 3px #f5ded6}.field input::placeholder,.field textarea::placeholder{color:#aeb5af}.field select{padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%23758178' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}.field textarea{resize:vertical;min-height:76px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.spot{border:1px solid #e4dfd5;border-radius:17px;background:#fbf9f4;padding:14px 16px 3px;margin:0 0 12px;min-width:0}.spot legend{padding:0 7px;margin-left:2px;display:flex;align-items:center;gap:8px;color:#3d4f43;font-size:13px;font-weight:700}.spot-number{width:25px;height:25px;border-radius:50%;display:inline-grid;place-items:center;background:#f3a28d;color:#23352d}.spot:nth-child(2) .spot-number{background:#cfe2c8}.spot:nth-child(3) .spot-number{background:#e4d5e8}.preview-column{position:sticky;top:24px;display:flex;flex-direction:column;align-items:center}.preview-head{width:100%;display:flex;justify-content:space-between;align-items:end;margin:3px 0 20px}.preview-head h2{font:700 25px 'Fraunces',Georgia,serif;margin:5px 0 0}.preview-hint{font-size:12px;color:#909b92}.canvas-shell{width:min(100%,530px);padding:9px;border-radius:23px;background:#fffdfa;box-shadow:0 22px 55px #455b4621,0 2px 9px #455b4610}canvas{display:block;width:100%;height:auto;border-radius:15px}.actions{width:min(100%,530px);display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.actions button{border-radius:13px;border:1px solid #273b31;padding:16px 17px;font-weight:700;display:flex;justify-content:space-between;align-items:center}.primary{background:#273b31;color:#fff}.secondary{background:transparent;color:#273b31}.actions span{font-size:20px;line-height:12px}.text-action{border:0;background:transparent;color:#435f4b;text-decoration:underline;text-underline-offset:3px;font-size:13px;margin-top:16px}.privacy-note{color:#87918a;font-size:11px;text-align:center;line-height:1.5;max-width:350px;margin:14px 0 0}#status{font-size:13px;color:#386b4a;min-height:24px;margin-top:10px}@media(max-width:1000px){.workspace{grid-template-columns:1fr;max-width:680px}.preview-column{position:static;grid-row:1}.intro{padding-top:15px}.topbar{padding:0 22px}}@media(max-width:600px){.topbar{height:70px}.topbar-note,.preview-hint{display:none}.workspace{padding:26px 16px 50px;gap:20px}.intro h1{font-size:48px}.preview-head{margin-top:0}.canvas-shell{width:100%}.actions button{padding:14px 12px;font-size:12px}.field-row{gap:8px}.field input,.field textarea,.field select{font-size:14px;padding:11px}.section-title{margin-top:22px}}
.map-tools{display:flex;align-items:center;gap:8px;min-height:43px}.map-tools span{flex:1;font-size:12px;font-weight:700;color:#415f4b}.map-tools button{border:1px solid #d6dcd0;background:#fffdfa;color:#415f4b;border-radius:9px;padding:7px 10px;font-size:12px;font-weight:700}#parking-map{height:340px;border-radius:16px;border:1px solid #d9ded4;z-index:0;background:#dce7d8}.map-credit{font-size:11px;color:#87918a;margin:7px 0 20px}.map-pin{width:36px;height:36px;border-radius:12px;border:3px solid #fff;background:#ef9d86;color:#26382f;display:grid;place-items:center;font:700 19px Georgia,serif;box-shadow:0 3px 10px #26382f55}.map-pin.destination{background:#26382f;color:#fff}.spot-placement{margin:2px 0 12px;font-size:12px;font-weight:700;color:#a67a68}.spot.placed .spot-placement{color:#4e8061}.preview-only .editor,.preview-only .topbar,.preview-only .preview-head,.preview-only .privacy-note,.preview-only .text-action{display:none}.preview-only .workspace{display:block;max-width:620px;padding:25px 18px}.preview-only .preview-column{position:static}.preview-only .actions{max-width:530px}
.spot{padding:0;margin-bottom:9px}.spot summary{display:flex;align-items:center;gap:9px;list-style:none;padding:12px 15px;cursor:pointer;font-size:12px;font-weight:700}.spot summary::-webkit-details-marker{display:none}.spot .spot-placement{margin:0 0 0 auto;color:#a67a68;font-size:11px;text-align:right}.spot.placed .spot-placement{color:#4e8061}.spot-fields{padding:4px 15px 2px;border-top:1px solid #eae5dd}.parking-heading{margin-top:18px}.section-help{margin-left:0}#parking-map{height:420px}@media(max-width:600px){#parking-map{height:370px}.spot .spot-placement{max-width:140px}}
.map-search{display:flex;gap:7px;margin:15px 0 8px}.map-search input{flex:1;min-width:0;background:#fffdfa;border:1px solid #dedbd3;border-radius:10px;padding:11px 12px;outline:none}.map-search button{background:#273b31;color:#fff;border:0;border-radius:10px;padding:0 16px;font-weight:700}.map-search input:focus{border-color:#df9c86;box-shadow:0 0 0 3px #f5ded6}
@media(max-width:1000px){.preview-column{grid-row:2}}
.retry-pin{border:0;background:transparent;color:#435f4b;text-decoration:underline;text-underline-offset:3px;font-size:12px;font-weight:700;padding:4px 0 15px}
.side-review{display:grid;gap:8px;min-width:220px;color:#283830;font:13px/1.4 'DM Sans',sans-serif}.side-review strong{font:700 15px Georgia,serif}.side-review-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}.side-review-actions button{border:1px solid #d6dcd0;background:#f8f6ef;color:#34513d;border-radius:8px;padding:7px 9px;font-size:12px;font-weight:700}.side-review-actions button:first-child{background:#273b31;color:#fff}
.preview-style{display:none}.preview-only .preview-style{width:min(100%,530px);display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.preview-style label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#536258}.preview-style select{width:100%;border:1px solid #dedbd3;background:#fffdfa;color:#283830;border-radius:11px;padding:10px;font-size:13px}
:root{color-scheme:light}button,input,textarea,select{color:#26342f}.eyebrow{color:#93412f}.field label small{color:#536258}.field input::placeholder,.field textarea::placeholder,.map-search input::placeholder{color:#5e6c63}.section-help,.map-credit,.preview-hint,.privacy-note{color:#4d5d52}.spot .spot-placement{color:#774b39}.field input,.field select,.field textarea{font-size:16px;line-height:1.35;min-height:48px;flex-shrink:0;border-color:#9caa9e}.map-search input{color:#26342f;font-size:16px;line-height:1.35;min-height:48px;border-color:#9caa9e}.map-tools button{min-height:42px;background:#fff;color:#263b31;border-color:#526958}.actions .secondary{background:#fffdfa}.preview-style select{font-size:16px;min-height:46px;border-color:#9caa9e}.field input:focus,.field textarea:focus,.field select:focus,.map-search input:focus,.preview-style select:focus{outline:2px solid #8d4938;outline-offset:1px}
@media(max-width:600px){.field input,.field textarea,.field select{font-size:16px;padding:12px 13px;min-height:48px}.preview-style select{font-size:16px;min-height:46px}}

/* Forest direction from the redesign package. */
:root {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: #243b31;
  background: #f8faf7;
}
body { background: #f8faf7; }
.brand-icon { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex: none; }
button, input, textarea, select { font-family: inherit; }
.topbar {
  height: 76px;
  background: #fff;
  border-bottom: 1px solid #dce6dd;
}
.brand-mark {
  background: #456f55;
  color: #fff;
  border-radius: 14px;
  transform: rotate(-5deg);
}
.brand strong, .brand small { font-family: inherit; color: #243b31; }
.brand strong { font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.brand small { color: #5c6e61; font-size: 12px; }
.topbar-note { color: #456f55; font-weight: 700; letter-spacing: .04em; }
.workspace {
  max-width: 1440px;
  grid-template-columns: minmax(460px, 1.1fr) minmax(390px, .9fr);
  gap: clamp(26px, 4vw, 68px);
  padding-top: 38px;
}
.intro { padding: 4px 0 18px; }
.eyebrow { color: #456f55; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.intro h1 {
  font: 800 clamp(42px, 4vw, 60px)/1.02 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: -.05em;
  margin: 14px 0 16px;
}
.intro h1 em { color: #456f55; }
.intro p { color: #52675a; font-size: 16px; max-width: 540px; }
.section-title { margin-top: 28px; }
.section-title span { background: #e3f0e6; color: #315c40; }
.section-title h2, .preview-head h2 {
  color: #243b31;
  font: 700 23px/1.1 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: -.025em;
}
.section-help, .map-credit, .preview-hint, .privacy-note { color: #53675a; }
.map-search { margin-top: 17px; }
.map-search input, .field input, .field textarea, .field select, .preview-style select {
  background-color: #fff;
  border: 1px solid #a5b8a9;
  border-radius: 13px;
  color: #243b31;
}
.map-search input { min-height: 54px; border-radius: 16px; padding-left: 17px; }
.map-search input::placeholder, .field input::placeholder, .field textarea::placeholder { color: #607568; }
.map-search button {
  padding: 0 20px;
  border-radius: 15px;
  background: #456f55;
  color: #fff;
}
.map-search button:hover, .actions .primary:hover { background: #315c40; }
.map-search input:focus, .field input:focus, .field textarea:focus,
.field select:focus, .preview-style select:focus {
  border-color: #456f55;
  outline: 2px solid #456f55;
  outline-offset: 2px;
  box-shadow: none;
}
.map-tools { margin-bottom: 7px; }
.map-tools span { color: #315c40; }
.map-tools button {
  color: #315c40;
  background: #fff;
  border: 1px solid #97af9d;
  border-radius: 10px;
}
#parking-map { height: 440px; border: 1px solid #bfd2c3; border-radius: 20px; background: #dce8dd; }
.map-pin, .map-pin.choice-1, .map-pin.choice-2, .map-pin.choice-3 {
  background: #456f55;
  color: #fff;
  border-radius: 50%;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  box-shadow: 0 5px 13px #243b3155;
}
.map-pin.choice-2 { background: #537a72; }
.map-pin.choice-3 { background: #52665a; }
.map-pin.destination { background: #243b31; }
.spot { background: #fff; border: 1px solid #d8e5da; border-radius: 18px; }
.spot summary { font-size: 14px; color: #243b31; padding: 14px 16px; }
.spot-number, .spot:nth-child(2) .spot-number, .spot:nth-child(3) .spot-number {
  background: #456f55;
  color: #fff;
}
.spot:nth-child(2) .spot-number { background: #537a72; }
.spot:nth-child(3) .spot-number { background: #52665a; }
.spot.placed .spot-placement, .retry-pin { color: #315c40; }
.spot-fields { border-top-color: #e4ece5; }
.field label, .field label small { color: #4c6153; }
.preview-column { top: 18px; }
.preview-head h2 { font-size: 23px; }
.canvas-shell { background: #fff; border: 1px solid #dce6dd; box-shadow: 0 18px 42px #243b3118; }
.actions button { border-color: #456f55; }
.actions .primary { background: #456f55; color: #fff; }
.actions .secondary { background: #fff; color: #315c40; }
.text-action { color: #315c40; font-weight: 700; }
.side-review { font-family: 'Hanken Grotesk', system-ui, sans-serif; }
.side-review strong { font: 700 16px 'Hanken Grotesk', system-ui, sans-serif; }
.side-review-actions button:first-child { background: #456f55; }
@media (max-width: 1000px) {
  .workspace { grid-template-columns: 1fr; max-width: 720px; }
  .preview-column { position: static; grid-row: 2; }
}
@media (max-width: 600px) {
  .topbar { height: 72px; }
  .workspace { padding: 24px 16px 50px; gap: 22px; }
  .intro h1 { font-size: 44px; }
  .intro p { font-size: 15px; }
  #parking-map { height: 390px; }
  .map-search button { padding: 0 15px; }
  .spot summary { font-size: 13px; }
}

/* Pending search result: clearly provisional until the entrance is tapped. */
.map-pin.destination.pending {
  background: #fff;
  color: #243b31;
  border: 3px dashed #456f55;
  box-shadow: 0 0 0 5px #456f5526, 0 5px 13px #243b3140;
  animation: pending-pulse 1.8s ease-in-out infinite;
}
@keyframes pending-pulse {
  50% { box-shadow: 0 0 0 9px #456f5512, 0 5px 13px #243b3140; }
}
.map-tools span { line-height: 1.35; }
.map-tools button:hover { background: #edf4ee; }
.spot summary:hover { background: #f6faf6; border-radius: 18px; }
.actions button { transition: background-color .16s ease, transform .16s ease; }
.actions button:active, .map-search button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .map-pin.destination.pending { animation: none; }
}

/* Address first, parking choices second, guest preview last. */
.workspace {
  max-width: 1480px;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(28px, 4vw, 64px);
  padding-top: clamp(28px, 4vw, 54px);
}
.intro { padding: 12px 0 22px; }
.intro h1 { max-width: 620px; font-size: clamp(48px, 5vw, 68px); }
.intro p { max-width: 570px; font-size: 17px; line-height: 1.55; }
.flow-steps {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
  color: #63776a;
  font-size: 12px;
  font-weight: 700;
}
.flow-steps li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.flow-steps li span {
  display: grid; place-items: center; width: 27px; height: 27px;
  border: 1px solid #bfd1c2; border-radius: 50%; background: #fff; color: #456f55;
  font-size: 11px;
}
.flow-steps li.current span { border-color: #456f55; background: #456f55; color: #fff; }
.parking-heading { margin-top: 20px; }
#parking-map { box-shadow: 0 10px 30px #243b310d; }
.map-search { margin-bottom: 9px; }
.map-search button { min-width: 84px; }
.spot { overflow: hidden; }
.spot summary { min-height: 54px; }
.spot-number { width: 28px; height: 28px; flex: none; }
.spot-caption { letter-spacing: .04em; }
.preview-column { padding: 18px; border: 1px solid #dce6dd; border-radius: 26px; background: #f1f6f1; }
.preview-head { margin: 0 0 18px; align-items: center; }
.preview-head h2 { font-size: 25px; }
.preview-hint { max-width: 165px; line-height: 1.4; text-align: right; }
.canvas-shell { padding: 8px; }
.actions { margin-top: 15px; }
.actions .primary { min-height: 54px; }
.actions .secondary { min-height: 54px; }
.text-action { margin-top: 12px; }
.privacy-note { margin-top: 8px; }
@media (max-width: 1000px) {
  .workspace { max-width: 760px; grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .preview-column { grid-row: 2; padding: 14px; }
  .intro { padding: 4px 0 8px; }
  .intro h1 { font-size: clamp(44px, 8vw, 60px); }
}
@media (max-width: 600px) {
  .workspace { padding: 20px 16px 42px; gap: 20px; }
  .intro h1 { margin-top: 10px; font-size: 46px; }
  .intro p { font-size: 15px; }
  .flow-steps { justify-content: space-between; gap: 6px; margin-top: 20px; font-size: 10px; }
  .flow-steps li { gap: 5px; }
  .flow-steps li span { width: 23px; height: 23px; }
  .section-title h2 { font-size: 21px; }
  .preview-column { border-radius: 20px; }
  .preview-head { gap: 12px; }
  .preview-head h2 { font-size: 21px; }
  .preview-hint { max-width: 125px; font-size: 10px; }
}

.map-pin.meter { background: #547b91; color: #fff; font-size: 15px; }
.meter-status { margin: -9px 0 18px; color: #315c40; font-size: 12px; font-weight: 700; }
.meter-detail { display: grid; gap: 7px; min-width: 205px; color: #243b31; font: 13px/1.4 'Hanken Grotesk', system-ui, sans-serif; }
.meter-detail strong { font-size: 15px; }
.meter-detail button { padding: 9px 11px; border: 0; border-radius: 9px; background: #456f55; color: #fff; font-weight: 700; }
.meter-detail a { color: #315c40; font-weight: 700; }
.curb-detail { display: grid; gap: 6px; min-width: 210px; color: #243b31; font: 13px/1.4 'Hanken Grotesk', system-ui, sans-serif; }
.curb-detail strong { font-size: 14px; }

/* The empty state demonstrates the exported map without creating a fake guide. */
.canvas-shell canvas[hidden], .preview-placeholder[hidden] { display: none; }
.preview-placeholder {
  display: flex; flex-direction: column; width: 100%; aspect-ratio: 4 / 5;
  padding: clamp(20px, 3vw, 30px); border-radius: 15px; background: #f8faf7;
  color: #243b31; font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
.example-kicker { color: #456f55; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.preview-placeholder h3 { margin: 15px 0 3px; font-size: clamp(28px, 3vw, 39px); line-height: 1.05; letter-spacing: -.05em; }
.preview-placeholder p { margin: 0 0 16px; color: #607264; font-size: 14px; }
.preview-placeholder img { display: block; width: 100%; border: 1px solid #d4dfd1; border-radius: 16px; }
.preview-placeholder ol { display: grid; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; }
.preview-placeholder li { display: flex; align-items: center; gap: 9px; }
.preview-placeholder li b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #456f55; color: #fff; font-size: 12px; }
.preview-placeholder li:nth-child(2) b { background: #537a72; }
.preview-placeholder li:nth-child(3) b { background: #52665a; }
.example-footnote { margin-top: auto; color: #607264; font-size: 11px; line-height: 1.4; }
@media (max-width: 600px) {
  .preview-placeholder { padding: 20px; }
}

/* Ads can be inserted after the guide. Empty placements do not interrupt creation. */
.ad-placement:empty { display: none; }
.ad-placement:not(:empty) {
  display: grid; place-items: center; max-width: min(1020px, calc(100% - 40px));
  min-height: 120px; margin: 18px auto 64px; padding: 16px;
  border: 1px solid #dce6dd; border-radius: 20px; background: #f1f6f1;
}
.ad-placement:not(:empty)::before {
  content: 'Advertisement'; display: block; margin-bottom: 8px;
  color: #6b7c70; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.ad-placement:not(:empty) > * { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ad-placement:not(:empty) { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.preview-only .ad-placement { display: none; }
@media (max-width: 600px) {
  .ad-placement:not(:empty) { max-width: calc(100% - 32px); margin: 18px auto 42px; padding: 12px; }
}

/* Keep the working map visible beside its controls on wide screens. */
.workspace {
  max-width: 1640px; grid-template-columns: minmax(0, 1fr) minmax(310px, 350px);
  gap: 22px; padding: 24px 22px 64px;
}
.editor { min-width: 0; }
#guide-form {
  display: grid; grid-template-columns: minmax(265px, 310px) minmax(0, 1fr);
  column-gap: 18px; align-items: start;
}
.address-panel { grid-column: 1; grid-row: 1; min-width: 0; }
.spots-panel { grid-column: 1; grid-row: 2; min-width: 0; }
.map-stage {
  grid-column: 2; grid-row: 1 / span 2; min-width: 0; position: sticky; top: 20px;
  padding: 14px; border: 1px solid #dce6dd; border-radius: 24px; background: #f1f6f1;
}
.map-stage-heading { display: flex; flex-direction: column; gap: 3px; margin: 1px 3px 11px; }
.map-stage-heading span { color: #456f55; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.map-stage-heading strong { color: #243b31; font-size: 16px; }
.map-stage .map-tools { margin-bottom: 8px; }
.map-stage .map-credit { margin: 9px 3px 0; }
.map-stage .meter-status { margin: 8px 3px 0; }
#parking-map { height: min(68vh, 660px); min-height: 530px; }
.intro { padding: 0 0 9px; }
.intro h1 { margin: 10px 0 13px; font-size: clamp(37px, 3.2vw, 48px); line-height: 1.02; }
.intro p { font-size: 14px; line-height: 1.45; }
.flow-steps { flex-wrap: wrap; gap: 8px; margin-top: 13px; font-size: 10px; }
.flow-steps li { gap: 4px; }
.flow-steps li span { width: 22px; height: 22px; }
.address-panel .parking-heading { margin: 13px 0 7px; }
.spots-panel .spot-heading { margin: 20px 0 7px; }
.address-panel .section-help, .spots-panel .section-help { margin: 0 0 11px; font-size: 12px; }
.address-panel .map-search { margin: 0 0 4px; }
.address-panel .map-search button { min-width: 62px; }
.address-panel .section-title h2, .spots-panel .section-title h2 { font-size: 20px; }
.spots-panel .spot summary { padding: 11px 12px; }
.preview-column { top: 20px; padding: 14px; }
.preview-head h2 { font-size: 22px; }
.preview-hint { max-width: 120px; font-size: 10px; }
.preview-column .actions { grid-template-columns: 1fr; }
.preview-column .actions button { white-space: nowrap; }

@media (max-width: 1100px) {
  .workspace { max-width: 900px; grid-template-columns: 1fr; gap: 24px; }
  .preview-column { grid-row: 2; position: static; width: min(100%, 700px); margin: 0 auto; }
  .preview-column .actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .workspace { padding: 20px 16px 44px; }
  #guide-form { grid-template-columns: 1fr; gap: 14px; }
  .address-panel { grid-column: 1; grid-row: 1; }
  .map-stage { grid-column: 1; grid-row: 2; position: static; padding: 0; border: 0; background: transparent; }
  .spots-panel { grid-column: 1; grid-row: 3; }
  #parking-map { height: 390px; min-height: 0; }
  .intro h1 { font-size: clamp(43px, 9vw, 58px); }
  .intro p { font-size: 15px; }
  .flow-steps { justify-content: space-between; font-size: 10px; }
  .map-stage-heading { margin-top: 0; }
  .spots-panel .spot-heading { margin-top: 8px; }
  .preview-column .actions { grid-template-columns: 1fr; }
}