/* Website Planner — all component styles stay inside this module. */
.planner-app {
  --plan-text: #f0edf9;
  --plan-muted: #a19aaf;
  --plan-dim: #7e778d;
  --plan-line: #454053;
  --plan-accent: #baabff;
  --plan-surface: #191722;
  min-width: 0;
  color: var(--plan-text);
  container: planner / inline-size;
}
.planner-app *, .planner-app *::before, .planner-app *::after { box-sizing: border-box; }
.planner-app [hidden] { display: none !important; }
.details-section.is-planning .details-intro { display: none; }
.details-section.is-planning .details-layout { grid-template-columns: minmax(0, 1fr); max-width: 1100px; gap: 0; }
.planner-app .planner-shell {
  position: relative;
  padding: clamp(24px, 4cqw, 42px);
  border: 1px solid #494154;
  border-radius: 25px;
  background: radial-gradient(ellipse at 98% 0, #7967b318, transparent 48%), linear-gradient(145deg, #211c2b9c, #13121c 70%);
  box-shadow: 0 26px 75px #00000026, inset 0 1px 0 #ffffff04;
}
.planner-app .planner-shell::before { content: ''; position: absolute; top: -1px; left: 32px; right: 32px; height: 1px; background: linear-gradient(90deg, transparent, #b39bdd75, transparent); pointer-events: none; }
.planner-app .planner-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 29px; }
.planner-app .planner-eyebrow { display: block; color: #b4a4cf; font-size: 9px; line-height: 1.6; font-weight: 550; letter-spacing: .16em; text-transform: uppercase; }
.planner-app button, .planner-app a { -webkit-tap-highlight-color: transparent; }
.planner-app button { font: inherit; }
.planner-app button:focus-visible, .planner-app a:focus-visible, .planner-app summary:focus-visible { outline: 2px solid #c5b6ff; outline-offset: 4px; }
.planner-app button:disabled { opacity: .36; cursor: not-allowed; transform: none; box-shadow: none; }
.planner-app .planner-close, .planner-app .planner-text-button, .planner-app .planner-skip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 9px 0 9px 12px; border: 0; background: transparent;
  color: #a99bbd; font-size: 11px; line-height: 1.5; text-align: center;
  transition: color .2s;
}
.planner-app .planner-close:hover, .planner-app .planner-text-button:hover, .planner-app .planner-skip:hover { color: #f0e5ff; }
.planner-app .planner-close { white-space: nowrap; }
.planner-app .planner-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 15px; }
.planner-app .planner-step {
  display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 6px 3px;
  border: 0; border-radius: 8px; color: #8f839f; background: transparent; text-align: left;
  transition: color .2s, background .2s;
}
.planner-app .planner-step:not(:disabled):hover { color: #d7c9eb; background: #a88aff0a; }
.planner-app .planner-step-number { display: flex; flex: none; justify-content: center; align-items: center; width: 27px; height: 27px; border: 1px solid #50445e; border-radius: 50%; font-size: 10px; font-weight: 550; }
.planner-app .planner-step-label { font-size: 10px; line-height: 1.4; }
.planner-app .planner-step.is-current { color: #ece2ff; }
.planner-app .planner-step.is-current .planner-step-number { border-color: #c7b2ff; color: #211b30; background: #c8b4f3; box-shadow: 0 0 17px #b48aff20; }
.planner-app .planner-step.is-complete { color: #b9a7d2; }
.planner-app .planner-step.is-complete .planner-step-number { border-color: #8b72b0; background: #67508c33; }
.planner-app .planner-progress-track { width: 100%; height: 3px; margin-bottom: 35px; overflow: hidden; border-radius: 50px; background: #393143; }
.planner-app .planner-progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7866c8, #c2adf8); transition: width .35s ease; }
.planner-app .planner-question h3, .planner-app h3.planner-question {
  max-width: 760px; margin: 0 0 12px; outline: none;
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(25px, 4.1cqw, 40px);
  line-height: 1.18; letter-spacing: -.045em; font-weight: 500;
}
.planner-app .planner-hint { max-width: 720px; margin: 0 0 25px; color: var(--plan-muted); font-size: 13px; line-height: 1.8; }
.planner-app .planner-choices { display: grid; gap: 15px; min-width: 0; border: 0; padding: 0; margin: 0; }
.planner-app .planner-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.planner-app .planner-type-main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.planner-app .planner-type-extra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.planner-app .planner-choice {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 94px;
  margin: 0; padding: 0; border: 1px solid #463c53; border-radius: 14px;
  background: #15121f9c; cursor: pointer; overflow: hidden;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.planner-app .planner-choice:hover { border-color: #87709f; background: #262031; transform: translateY(-2px); }
.planner-app .planner-choice.is-selected, .planner-app .planner-choice:has(input:checked) { border-color: #baa2e5; background: #4130526b; box-shadow: 0 0 0 1px #b79be418, inset 0 0 35px #a374d509; }
.planner-app .planner-choice:has(input:focus-visible) { outline: 2px solid #d1bbff; outline-offset: 4px; }
.planner-app .planner-choice input {
  position: absolute; top: 18px; right: 17px; z-index: 2;
  width: 17px; height: 17px; margin: 0; accent-color: #b39af0; cursor: pointer;
}
.planner-app .planner-choice:has(.planner-mini) input { top: 12px; right: 12px; filter: drop-shadow(0 1px 3px #0005); }
.planner-app .planner-choice-copy { min-width: 0; padding: 18px 44px 18px 18px; }
.planner-app .planner-choice:has(.planner-mini) .planner-choice-copy { flex: 1; padding: 16px 15px 18px; }
.planner-app .planner-choice-copy strong { display: block; font-size: 13px; line-height: 1.5; font-weight: 550; color: #e4dcec; }
.planner-app .planner-choice-copy small { display: block; margin-top: 5px; color: #a093af; font-size: 11px; line-height: 1.7; }
.planner-app .planner-choice.is-compact { min-height: 78px; border-radius: 11px; }
.planner-app .planner-choice.is-compact .planner-choice-copy { padding: 15px 38px 15px 14px; }
.planner-app .planner-choice.is-compact input { top: 18px; right: 13px; width: 15px; height: 15px; }
.planner-app .planner-choice.is-compact strong { font-size: 12px; }
.planner-app .planner-choice.is-compact small { font-size: 10px; margin-top: 3px; }
.planner-app .planner-goal-rank { display: inline-flex; align-items: center; min-height: 20px; margin-top: 9px; padding: 2px 7px; border: 1px solid #9e83be60; border-radius: 5px; background: #9e75cf1c; color: #d6bafa; font-size: 9px; line-height: 1.5; font-weight: 550; letter-spacing: .025em; }

/* Tiny, deliberately distinct example websites. These are decorative previews. */
.planner-app .planner-mini { position: relative; isolation: isolate; height: 143px; min-width: 0; overflow: hidden; border-bottom: 1px solid #ffffff0c; color: #1b2334; background: #edf1f7; user-select: none; }
.planner-app .planner-choice-grid .planner-mini { height: 163px; }
.planner-app .mini-nav { display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 12px; border-bottom: 1px solid #00000012; }
.planner-app .mini-brand { font-family: 'Space Grotesk', sans-serif; font-size: 7px; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.planner-app .mini-dots { display: flex; align-items: center; gap: 4px; padding-right: 20px; }
.planner-app .mini-dots i { display: block; width: 10px; height: 2px; border-radius: 10px; background: currentColor; opacity: .45; }
.planner-app .mini-body { position: relative; display: flex; align-items: center; height: calc(100% - 28px); padding: 15px 12px; gap: 7px; }
.planner-app .mini-copy { position: relative; z-index: 2; width: 62%; min-width: 0; }
.planner-app .mini-eyebrow { display: block; margin-bottom: 5px; font-size: 4px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.planner-app .mini-title { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.05; letter-spacing: -.06em; }
.planner-app .mini-lines { display: grid; gap: 3px; margin-top: 8px; }
.planner-app .mini-lines > span { height: 2px; width: 76%; max-width: 66px; background: currentColor; opacity: .22; border-radius: 4px; }
.planner-app .mini-lines > span:last-child { width: 55%; }
.planner-app .mini-cta { display: inline-block; margin-top: 8px; min-width: 30px; padding: 4px 6px; border-radius: 4px; background: #315fcb; color: white; font-size: 4px; line-height: 1.2; font-weight: 600; }
.planner-app .mini-art { position: relative; z-index: 1; width: 43%; height: 90%; min-width: 30px; }
.planner-app .mini-art > span { position: absolute; display: block; }
.planner-app .mini-art > span:nth-child(1) { width: 78%; height: 75%; left: 7%; top: 15%; border-radius: 11px 11px 6px 6px; background: linear-gradient(135deg, #d0ddfc, #7394d9); box-shadow: 5px 9px 13px #293b5b18; transform: rotate(-8deg); }
.planner-app .mini-art > span:nth-child(2) { width: 38%; height: 36%; right: 0; top: 2%; border-radius: 50%; background: #6f8dd6; box-shadow: inset -5px -5px 10px #223f7226; }
.planner-app .mini-art > span:nth-child(3) { width: 57%; height: 7%; left: 0; bottom: 0; border-radius: 50%; background: #172d5b12; filter: blur(3px); }
.planner-app .planner-mini[data-preview='portfolio'] { color: #252026; background: #ebe6e2; }
.planner-app .planner-mini[data-preview='portfolio'] .mini-nav { border-bottom-color: #342b2425; }
.planner-app .planner-mini[data-preview='portfolio'] .mini-title { font-family: Georgia, serif; font-size: 19px; font-weight: 400; letter-spacing: -.065em; }
.planner-app .planner-mini[data-preview='portfolio'] .mini-cta { background: transparent; color: inherit; border-radius: 0; border-bottom: 1px solid #53463a; padding: 3px 0; }
.planner-app .planner-mini[data-preview='portfolio'] .mini-art > span:nth-child(1) { width: 69%; height: 83%; top: 6%; left: 10%; border-radius: 0; background: linear-gradient(135deg, #b2a494 0 48%, #e5dacb 49% 66%, #4e5a50 67%); transform: rotate(5deg); }
.planner-app .planner-mini[data-preview='portfolio'] .mini-art > span:nth-child(2) { width: 48%; height: 40%; right: 0; top: 48%; border-radius: 0; background: #7d5a46; border: 4px solid #ebe6e2; transform: rotate(-8deg); }
.planner-app .planner-mini[data-preview='store'] { color: #463129; background: #f6eee1; }
.planner-app .planner-mini[data-preview='store'] .mini-title { font-family: Georgia, serif; font-size: 18px; font-weight: 400; letter-spacing: -.05em; }
.planner-app .planner-mini[data-preview='store'] .mini-cta { background: #77513c; border-radius: 20px; }
.planner-app .planner-mini[data-preview='store'] .mini-art > span:nth-child(1) { width: 58%; height: 64%; top: 25%; left: 15%; border-radius: 8px 8px 20px 20px; background: linear-gradient(100deg, #d09a73, #edc6a1 50%, #b97b54); transform: rotate(-9deg); box-shadow: 4px 8px 10px #70462825; }
.planner-app .planner-mini[data-preview='store'] .mini-art > span:nth-child(2) { width: 51%; height: 16%; right: 27%; top: 18%; border-radius: 3px; background: #805a40; transform: rotate(-9deg); box-shadow: none; }
.planner-app .planner-mini[data-preview='store'] .mini-art > span:nth-child(3) { width: 43%; height: 32%; bottom: 19%; left: 24%; border-radius: 4px; filter: none; background: #f1dbc1; transform: rotate(-9deg); }
.planner-app .planner-mini[data-preview='landing'] { color: #f1eaff; background: #36215b; }
.planner-app .planner-mini[data-preview='landing'] .mini-nav { border-bottom-color: #ffffff1a; }
.planner-app .planner-mini[data-preview='landing'] .mini-cta { color: #2d1b49; background: #d3beff; border-radius: 20px; }
.planner-app .planner-mini[data-preview='landing'] .mini-art > span:nth-child(1) { width: 76%; height: 72%; border-radius: 18px; background: linear-gradient(135deg, #ad83ff, #6a4cbb); border: 1px solid #d2b3ff7a; transform: rotate(-16deg); box-shadow: 0 6px 18px #120b3e40; }
.planner-app .planner-mini[data-preview='landing'] .mini-art > span:nth-child(2) { background: #e7d3ff; width: 36%; height: 36%; top: 29%; right: 25%; border-radius: 9px; transform: rotate(24deg); }
.planner-app .planner-mini[data-preview='minimal'] { color: #262625; background: #f2f0e9; }
.planner-app .planner-mini[data-preview='minimal'] .mini-body { padding: 18px 22px; }
.planner-app .planner-mini[data-preview='minimal'] .mini-title { font-size: 24px; font-weight: 400; letter-spacing: -.07em; }
.planner-app .planner-mini[data-preview='minimal'] .mini-cta { border-radius: 0; background: #252725; padding: 5px 9px; }
.planner-app .planner-mini[data-preview='minimal'] .mini-art > span:nth-child(1) { width: 67%; height: 87%; top: 4%; left: 19%; border-radius: 50% 50% 0 0; background: #d5d8d1; box-shadow: none; transform: none; }
.planner-app .planner-mini[data-preview='minimal'] .mini-art > span:nth-child(2) { width: 53%; height: 58%; right: 8%; top: 33%; border-radius: 50% 50% 0 0; background: #9ca89a; box-shadow: none; }
.planner-app .planner-mini[data-preview='minimal'] .mini-art > span:nth-child(3) { display: none; }
.planner-app .planner-mini[data-preview='bold'] { color: #3b1b63; background: #ffb56c; }
.planner-app .planner-mini[data-preview='bold'] .mini-nav { background: #fb9950; border-color: #3e1a4c22; }
.planner-app .planner-mini[data-preview='bold'] .mini-title { font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 32px; text-transform: uppercase; font-weight: 700; letter-spacing: -.03em; line-height: .92; }
.planner-app .planner-mini[data-preview='bold'] .mini-eyebrow, .planner-app .planner-mini[data-preview='bold'] .mini-lines { display: none; }
.planner-app .planner-mini[data-preview='bold'] .mini-cta { background: #4a2379; color: #ffc38c; border-radius: 20px; padding: 5px 10px; }
.planner-app .planner-mini[data-preview='bold'] .mini-art > span:nth-child(1) { width: 75%; height: 74%; left: 6%; top: 8%; border-radius: 28% 70% 30% 65%; background: #7543b7; transform: rotate(20deg); box-shadow: 6px 8px 0 #d37739; }
.planner-app .planner-mini[data-preview='bold'] .mini-art > span:nth-child(2) { width: 31%; height: 30%; right: 20%; top: 31%; border-radius: 50%; background: #ffcd8a; box-shadow: none; }
.planner-app .planner-mini[data-preview='bold'] .mini-art > span:nth-child(3) { display: none; }
.planner-app .planner-mini[data-preview='premium'] { color: #e7d7b6; background: #342821; }
.planner-app .planner-mini[data-preview='premium'] .mini-nav { border-color: #bc9f6e3d; }
.planner-app .planner-mini[data-preview='premium'] .mini-brand { font-family: Georgia, serif; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.planner-app .planner-mini[data-preview='premium'] .mini-title { font-family: Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.02; letter-spacing: -.055em; }
.planner-app .planner-mini[data-preview='premium'] .mini-cta { background: transparent; border: 1px solid #b99a65; border-radius: 0; color: #e9d8b3; padding: 4px 9px; }
.planner-app .planner-mini[data-preview='premium'] .mini-art > span:nth-child(1) { width: 75%; height: 95%; left: 12%; top: 0; border: 1px solid #c7aa74; border-radius: 50% 50% 0 0; background: linear-gradient(115deg, #b08b5224, #b3925e12 70%); transform: none; box-shadow: none; }
.planner-app .planner-mini[data-preview='premium'] .mini-art > span:nth-child(2) { width: 51%; height: 65%; right: 24%; top: 30%; border-radius: 50% 50% 0 0; background: linear-gradient(110deg, #ba9a65, #6d5334); box-shadow: -6px 1px 20px #e5ba7120; }
.planner-app .planner-mini[data-preview='premium'] .mini-art > span:nth-child(3) { display: none; }
.planner-app .planner-mini[data-preview='immersive'] { color: #e1e4ff; background: radial-gradient(ellipse at 80% 60%, #3d3b7d88, transparent 65%), #101422; }
.planner-app .planner-mini[data-preview='immersive'] .mini-nav { border-color: #b2a8ff26; }
.planner-app .planner-mini[data-preview='immersive'] .mini-title { font-size: 23px; font-weight: 500; }
.planner-app .planner-mini[data-preview='immersive'] .mini-eyebrow { color: #b9abfa; }
.planner-app .planner-mini[data-preview='immersive'] .mini-cta { border: 1px solid #b7acff70; border-radius: 20px; background: #9588df; color: #151325; }
.planner-app .planner-mini[data-preview='immersive'] .mini-art { width: 48%; height: 125%; margin-right: -12px; background: url('assets/portal-frame.webp') center / 155% auto no-repeat; transform: rotate(-12deg); filter: drop-shadow(0 5px 13px #9382ef36); }
.planner-app .planner-mini[data-preview='immersive'] .mini-art > span { display: none; }

.planner-app .planner-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 23px; border-top: 1px solid #40344d; }
.planner-app .planner-navigation > div { display: flex; align-items: center; gap: 16px; }
.planner-app .planner-back, .planner-app .planner-next, .planner-app .planner-start,
.planner-app .planner-start-project, .planner-app .planner-copy, .planner-app .planner-edit,
.planner-app .planner-composer-actions button, .planner-app .planner-direct-contact {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 12px 21px; border: 1px solid #615071; border-radius: 999px;
  background: #211b2c; color: #ded1ed; font-size: 12px; font-weight: 500; line-height: 1.5; text-align: center;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.planner-app .planner-back:hover, .planner-app .planner-copy:hover, .planner-app .planner-edit:hover, .planner-app .planner-composer-actions button:hover, .planner-app .planner-direct-contact:hover { background: #332640; border-color: #9c80b7; transform: translateY(-1px); }
.planner-app .planner-next, .planner-app .planner-start, .planner-app .planner-start-project { border-color: #c9b9f3; background: #c9b9f0; color: #20192e; font-weight: 600; box-shadow: 0 5px 22px #956bdb12; }
.planner-app .planner-next:hover, .planner-app .planner-start:hover, .planner-app .planner-start-project:hover { background: #e1cffd; border-color: #e1cffd; box-shadow: 0 6px 27px #a478e72a; transform: translateY(-2px); }
.planner-app .planner-feedback { min-height: 20px; margin: 13px 0 0; color: #c6afd9; font-size: 11px; line-height: 1.7; }
.planner-app .planner-bottom-note { margin: 9px 0 0; color: #8c7d9c; font-size: 10px; line-height: 1.8; }
.planner-app .planner-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 16px; }
.planner-app .planner-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.planner-app .planner-field.is-wide { grid-column: 1 / -1; }
.planner-app .planner-field > span { color: #d8cbe5; font-size: 12px; line-height: 1.5; }
.planner-app .planner-field input, .planner-app .planner-field textarea, .planner-app .planner-request-preview, .planner-app textarea.planner-copy-fallback {
  width: 100%; min-width: 0; min-height: 47px; padding: 12px 14px;
  border: 1px solid #554460; border-radius: 10px; outline: none;
  background: #100e18a8; color: #ece0f6; font: inherit; font-size: 13px; line-height: 1.7;
  transition: border-color .2s, box-shadow .2s;
}
.planner-app .planner-field input:hover, .planner-app .planner-field textarea:hover { border-color: #806492; }
.planner-app .planner-field input:focus, .planner-app .planner-field textarea:focus, .planner-app .planner-request-preview:focus, .planner-app textarea.planner-copy-fallback:focus { border-color: #b99de0; box-shadow: 0 0 0 3px #a984d31a; outline: 1px solid #b99de0; outline-offset: 0; }
.planner-app .planner-field input::placeholder, .planner-app .planner-field textarea::placeholder { color: #82728f; opacity: 1; }
.planner-app .planner-field textarea { min-height: 116px; resize: vertical; }
.planner-app .field-help { color: #8f819f; font-size: 10px; line-height: 1.7; }
.planner-app .planner-details-toggle { margin: 22px 0 0; padding: 15px 18px; border: 1px solid #493850; border-radius: 11px; background: #17111e66; }
.planner-app .planner-details-toggle > summary, .planner-app .planner-summary-answers > summary { padding: 2px 0; min-height: 32px; align-content: center; color: #bdabce; font-size: 12px; line-height: 1.7; cursor: pointer; }
.planner-app .planner-details-toggle > summary:hover, .planner-app .planner-summary-answers > summary:hover { color: #e7d8f8; }
.planner-app .planner-details-toggle[open] > summary { margin-bottom: 17px; }
.planner-app .planner-intro { position: relative; }
.planner-app .planner-intro > small { display: inline-block; margin-bottom: 18px; color: #b6a2d0; font-size: 9px; line-height: 1.6; letter-spacing: .15em; text-transform: uppercase; }
.planner-app .planner-intro h3 { max-width: 470px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(29px, 5.7cqw, 43px); font-weight: 500; line-height: 1.12; letter-spacing: -.055em; margin: 0 0 18px; }
.planner-app .planner-intro p { max-width: 480px; color: #aaa0b9; font-size: 13px; line-height: 1.85; margin: 0 0 20px; }
.planner-app .planner-benefits { list-style: none; display: grid; gap: 12px; padding: 22px 0; margin: 21px 0 25px; border-top: 1px solid #413449; border-bottom: 1px solid #413449; }
.planner-app .planner-benefits li { display: flex; align-items: baseline; gap: 12px; color: #c4b6d3; font-size: 12px; line-height: 1.7; }
.planner-app .planner-benefits li::before { content: '↗'; color: #bba2e4; font-size: 14px; flex: none; }
.planner-app .planner-intro-art { position: relative; height: 97px; margin-bottom: 26px; overflow: hidden; border: 1px solid #6c578344; border-radius: 12px; background: radial-gradient(ellipse at 70% 100%, #8a6bc02b, transparent 62%), #15121e; }
.planner-app .planner-intro-art::before { content: ''; position: absolute; width: 45%; height: 66px; left: 14%; top: 20px; border: 1px solid #9575bf73; border-radius: 8px; background: linear-gradient(145deg, #41304e, #201a30); transform: rotate(-7deg); box-shadow: 0 10px 22px #0003; }
.planner-app .planner-intro-art::after { content: ''; position: absolute; width: 40%; height: 67px; right: 13%; top: 12px; border: 1px solid #c2a4e075; border-radius: 8px; background: linear-gradient(145deg, #7c629155, #2a203b); transform: rotate(6deg); box-shadow: 0 10px 22px #0003; }

.planner-app .planner-result-header { max-width: 820px; margin-bottom: 30px; }
.planner-app .planner-result-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.planner-app .planner-result-tags span { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border: 1px solid #81639f55; border-radius: 6px; background: #8c64ae14; color: #c8b0df; font-size: 9px; line-height: 1.5; letter-spacing: .025em; }
.planner-app h3.planner-result-title { margin: 0 0 14px; color: #efe8fa; font-family: 'Space Grotesk', sans-serif; font-size: clamp(29px, 4.5cqw, 45px); line-height: 1.12; font-weight: 500; letter-spacing: -.05em; outline: none; }
.planner-app .planner-result-subtitle { margin: 0; color: #b1a2bf; font-size: 14px; line-height: 1.85; }
.planner-app .planner-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.planner-app .planner-result-block { min-width: 0; padding: 24px; border: 1px solid #51405e; border-radius: 14px; background: #15111d80; }
.planner-app .planner-result-block.is-wide { grid-column: 1 / -1; }
.planner-app .planner-result-block h4, .planner-app .planner-composer h4 { margin: 0 0 13px; color: #e8dcf2; font-family: 'Space Grotesk', sans-serif; font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -.025em; }
.planner-app .planner-result-block p { margin: 0; color: #a99ab8; font-size: 12px; line-height: 1.85; }
.planner-app .planner-result-block p + p { margin-top: 12px; }
.planner-app .planner-structure { padding: 0; margin: 0; list-style: none; counter-reset: plan-structure; }
.planner-app .planner-structure li { position: relative; min-height: 45px; padding: 13px 0 13px 37px; border-bottom: 1px solid #423149; counter-increment: plan-structure; }
.planner-app .planner-structure li:first-child { padding-top: 0; }
.planner-app .planner-structure li:last-child { padding-bottom: 0; border-bottom: 0; }
.planner-app .planner-structure li::before { content: counter(plan-structure, decimal-leading-zero); position: absolute; top: 15px; left: 0; color: #9d7eb9; font-size: 10px; font-variant-numeric: tabular-nums; }
.planner-app .planner-structure li:first-child::before { top: 3px; }
.planner-app .planner-structure li > strong, .planner-app .planner-feature-list li strong { display: block; margin-bottom: 5px; color: #d9c8e5; font-size: 12px; font-weight: 550; line-height: 1.6; }
.planner-app .planner-structure li > p, .planner-app .planner-feature-list li p { font-size: 11px; line-height: 1.8; }
.planner-app .planner-feature-list { list-style: none; padding: 0; margin: 0; }
.planner-app .planner-feature-list li { position: relative; padding: 13px 0 13px 21px; border-bottom: 1px solid #423149; }
.planner-app .planner-feature-list li:first-child { padding-top: 0; }
.planner-app .planner-feature-list li:last-child { padding-bottom: 0; border: 0; }
.planner-app .planner-feature-list li::before { content: '+'; position: absolute; top: 12px; left: 0; color: #b393d1; font-size: 13px; }
.planner-app .planner-feature-list li:first-child::before { top: -1px; }
.planner-app .planner-question-list ul { margin: 0; padding-left: 18px; color: #b7a4c6; font-size: 12px; line-height: 1.85; }
.planner-app .planner-question-list li + li { margin-top: 9px; }
.planner-app .planner-question-list li::marker { color: #9a79b6; }
.planner-app .planner-alternatives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.planner-app .planner-alternatives > * { min-width: 0; padding: 16px; border: 1px solid #594367; border-radius: 10px; background: #8b5ead09; }
.planner-app .planner-alternatives strong { display: block; margin-bottom: 7px; color: #d9c4e8; font-size: 12px; font-weight: 550; line-height: 1.5; }
.planner-app .planner-alternatives p { color: #a891b9; font-size: 11px; }
.planner-app .planner-scope-note { padding: 16px 18px; margin: 20px 0 0; border-left: 2px solid #8f70af; border-radius: 0 8px 8px 0; background: #71518d12; color: #bba6cc; font-size: 11px; line-height: 1.85; }
.planner-app .planner-result-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.planner-app .planner-direct-contact { color: #bca5d0; background: transparent; border-color: transparent; padding-left: 9px; padding-right: 9px; }
.planner-app .planner-next-step-callout { margin: 25px 0 0; padding: 20px 22px; border: 1px solid #8f70b058; border-radius: 12px; background: linear-gradient(110deg, #8157ad20, #6c5bad08); }
.planner-app .planner-next-step-callout strong { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 550; line-height: 1.5; color: #dfc8f0; }
.planner-app .planner-next-step-callout p { margin: 0; color: #ad95bd; font-size: 12px; line-height: 1.85; }
.planner-app .planner-composer { margin-top: 27px; padding: 28px; border: 1px solid #8262948c; border-radius: 16px; background: radial-gradient(ellipse at 100% 0, #9b66c414, transparent 60%), #18121f; }
.planner-app .planner-composer > p { margin: 0 0 23px; color: #ad98bc; font-size: 12px; line-height: 1.85; }
.planner-app .planner-request-preview { display: block; min-height: 250px; margin-top: 22px; resize: vertical; color: #c6b1d6; background: #100c15; font-size: 11px; line-height: 1.9; }
.planner-app .planner-composer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
.planner-app .planner-composer-actions button { min-height: 44px; padding: 10px 18px; font-size: 11px; }
.planner-app .planner-status-note { margin: 15px 0 0; color: #9d85ad; font-size: 10px; line-height: 1.85; }
.planner-app .planner-copy-fallback { margin-top: 18px; }
.planner-app textarea.planner-copy-fallback { min-height: 210px; resize: vertical; font-size: 11px; line-height: 1.85; }
.planner-app .planner-summary-answers { margin-top: 23px; border-top: 1px solid #46334f; padding-top: 12px; }
.planner-app .planner-summary-answers dl { display: grid; grid-template-columns: minmax(100px, .6fr) minmax(0, 1fr); gap: 0 20px; padding: 0; margin: 17px 0 0; }
.planner-app .planner-summary-answers dt, .planner-app .planner-summary-answers dd { padding: 12px 0; border-bottom: 1px solid #413047; font-size: 11px; line-height: 1.8; }
.planner-app .planner-summary-answers dt { color: #a18ab3; }
.planner-app .planner-summary-answers dd { margin: 0; color: #d3bddf; overflow-wrap: anywhere; }
.planner-app .planner-summary-answers dl > div { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(100px, .6fr) minmax(0, 1fr); gap: 20px; }

@container planner (max-width: 800px) {
  .planner-app .planner-type-main, .planner-app .planner-type-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-app .planner-step { flex-direction: column; justify-content: flex-start; gap: 7px; text-align: center; }
  .planner-app .planner-step-label { font-size: 9px; }
  .planner-app .planner-step-number { width: 25px; height: 25px; }
  .planner-app .planner-progress { gap: 4px; }
  .planner-app .planner-result-block { padding: 20px; }
}
@container planner (max-width: 560px) {
  .planner-app .planner-shell { padding: 23px 19px; border-radius: 19px; }
  .planner-app .planner-topline { margin-bottom: 23px; gap: 13px; }
  .planner-app .planner-eyebrow { font-size: 8px; letter-spacing: .12em; }
  .planner-app .planner-close { font-size: 10px; }
  .planner-app .planner-progress-track { margin-bottom: 28px; }
  .planner-app .planner-step-label { font-size: 8px; }
  .planner-app .planner-question h3, .planner-app h3.planner-question { font-size: 28px; }
  .planner-app .planner-hint { font-size: 12px; margin-bottom: 22px; }
  .planner-app .planner-choice-grid { gap: 10px; }
  .planner-app .planner-choice-copy { padding: 16px 36px 16px 14px; }
  .planner-app .planner-choice-copy strong { font-size: 12px; }
  .planner-app .planner-choice-copy small { font-size: 10px; }
  .planner-app .planner-choice input { right: 13px; top: 16px; width: 15px; height: 15px; }
  .planner-app .planner-choice:has(.planner-mini) .planner-choice-copy { padding: 13px 12px 15px; }
  .planner-app .planner-mini { height: 130px; }
  .planner-app .planner-choice-grid .planner-mini { height: 145px; }
  .planner-app .mini-body { padding: 12px 10px; }
  .planner-app .mini-nav { padding: 0 10px; }
  .planner-app .mini-title { font-size: 15px; }
  .planner-app .planner-mini[data-preview='minimal'] .mini-body { padding: 14px 12px; }
  .planner-app .planner-mini[data-preview='minimal'] .mini-title { font-size: 20px; }
  .planner-app .planner-mini[data-preview='bold'] .mini-title { font-size: 28px; }
  .planner-app .planner-mini[data-preview='premium'] .mini-title { font-size: 22px; }
  .planner-app .planner-mini[data-preview='immersive'] .mini-title { font-size: 20px; }
  .planner-app .planner-navigation { gap: 8px; margin-top: 25px; padding-top: 19px; }
  .planner-app .planner-navigation > div { gap: 9px; }
  .planner-app .planner-back, .planner-app .planner-next { padding: 12px 18px; font-size: 11px; }
  .planner-app .planner-skip { font-size: 10px; padding-left: 3px; }
  .planner-app .planner-result-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .planner-app .planner-result-title { font-size: 30px; }
  .planner-app .planner-result-subtitle { font-size: 12px; }
  .planner-app .planner-result-actions { gap: 9px; }
  .planner-app .planner-start-project { flex-basis: 100%; }
  .planner-app .planner-result-actions .planner-copy, .planner-app .planner-result-actions .planner-edit { flex: 1; }
  .planner-app .planner-composer { padding: 22px 18px; }
  .planner-app .planner-fields { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .planner-app .planner-field input, .planner-app .planner-field textarea { font-size: 16px; }
  .planner-app .planner-alternatives { grid-template-columns: minmax(0, 1fr); }
  .planner-app .planner-summary-answers dl { grid-template-columns: minmax(85px, .6fr) minmax(0, 1fr); gap: 0 13px; }
  .planner-app .planner-summary-answers dl > div { grid-template-columns: minmax(85px, .6fr) minmax(0, 1fr); gap: 13px; }
}
@container planner (max-width: 370px) {
  .planner-app .planner-choice-grid, .planner-app .planner-type-main { grid-template-columns: minmax(0, 1fr); }
  .planner-app .planner-type-extra { gap: 8px; }
  .planner-app .planner-choice-grid .planner-mini, .planner-app .planner-type-main .planner-mini { height: 154px; }
  .planner-app .planner-step-label { font-size: 7px; }
  .planner-app .planner-step-number { width: 23px; height: 23px; font-size: 9px; }
  .planner-app .planner-navigation { flex-wrap: wrap; }
  .planner-app .planner-navigation > div { margin-left: auto; }
  .planner-app .planner-intro h3 { font-size: 29px; }
  .planner-app .planner-result-actions .planner-copy, .planner-app .planner-result-actions .planner-edit { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .planner-app *, .planner-app *::before, .planner-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.planner-app .planner-honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.planner-app .planner-privacy-link{display:inline-block;margin:0 0 17px;font-size:10px;line-height:1.7;color:#a497bb;text-decoration:underline;text-underline-offset:3px}

.planner-app .planner-benefits li::before{content:none}.planner-app .planner-benefit-icon{display:inline-block;flex:none;width:16px;color:#b7a3ed;text-align:center}

/* Give the marked overview note more space below its action. */
.planner-app .planner-intro>.planner-bottom-note{margin-top:24px}