@font-face {
  font-family: 'Alibaba PuHuiTi';
  src: url('https://zero-public-resources.oss-cn-hangzhou.aliyuncs.com/assets/fonts/files/font-335ede4a86830443/AlibabaPuHuiTi-2-55-Regular.ttf')
    format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi';
  src: url('https://zero-public-resources.oss-cn-hangzhou.aliyuncs.com/assets/fonts/files/font-335ede4a86830443/AlibabaPuHuiTi-2-65-Medium.ttf')
    format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi';
  src: url('https://zero-public-resources.oss-cn-hangzhou.aliyuncs.com/assets/fonts/files/font-335ede4a86830443/AlibabaPuHuiTi-2-75-SemiBold.ttf')
    format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* G-Flight guided quote — official forest green and lime palette.
   Guide: 1fr + 64px + 1fr within 1232px; planner: 1fr + 24px + 336px.
   System type stays local. Touch targets remain 44px; the viewport may zoom. */
:root {
  font-family: "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #0b2518;
  background: #f5f8f5;
  font-synthesis: none;
  color-scheme: light;
  --ink: #0b2518;
  --muted: #4f6357;
  --faint: #627165;
  --blue: #0d4a2e;
  --blue-hover: #0b2518;
  --blue-soft: #f2f8e9;
  --line: #dfe7e2;
  --control: #aebfb4;
  --surface: #ffffff;
  --soft: #f5f8f6;
  --green: var(--blue);
  --deep: #0b2518;
  --cream: #f5f8f5;
  --amber: #875400;
  --error: #b4232c;
  --radius-card: 22px;
  --radius-control: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --motion-press: 140ms;
  --motion-panel: 260ms;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block: 24px 110px; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; color: inherit; background: none; touch-action: manipulation; }
button:disabled { cursor: not-allowed; color: #4f6357; background-color: #e9efeb; box-shadow: none; opacity: 1; }
a { color: var(--blue); text-underline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
strong, b { font-weight: 600; }
svg { vertical-align: middle; flex-shrink: 0; }
button, a, input, select, textarea, summary { outline-offset: 4px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #2f8a3d; }
input, select, textarea {
  min-width: 0; min-height: 48px; border: 1px solid var(--control);
  border-radius: var(--radius-control); padding: 12px 15px;
  background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.5;
  transition: border-color var(--motion-press), box-shadow var(--motion-press);
}
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: 3px solid #0d4a2e24; border-color: var(--blue); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { appearance: none; margin: 0; }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; padding: 0; accent-color: var(--blue); flex-shrink: 0; margin: 0; }
textarea { resize: vertical; }
.shell { min-height: 100svh; position: relative; overflow: clip; }
.topbar {
  max-width: 1408px; margin: auto; padding: 24px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative; z-index: 1;
}
.brand { display: flex; align-items: center; gap: 20px; min-width: 0; }
.brand img { width: 126px; height: 36px; object-fit: contain; }
.brand span { padding-left: 20px; border-left: 1px solid #cdd8d1; color: #4d5e53; font-size: 12px; letter-spacing: .08em; line-height: 1.5; }
.preview-badge { border: 1px solid #d5e0d9; border-radius: 6px; color: #5b6d61; padding: 6px 9px; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.main { max-width: 1328px; margin: auto; position: relative; padding: 26px 48px 22px; }
.onboard { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: center; min-height: 650px; }
.stage-content { order: 1; min-width: 0; padding: 32px 0; animation: panel-arrive var(--motion-panel) var(--ease) both; }
.companion { order: 2; position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-self: stretch; padding: 24px 0; }
.overline { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .16em; color: #5b6d61; }
.overline::before { content: ""; width: 20px; height: 2px; background: var(--blue); }
h1 { color: var(--ink); font-size: clamp(32px, 3.2vw, 44px); line-height: 1.25; font-weight: 400; letter-spacing: -.045em; overflow-wrap: anywhere; text-wrap: balance; }
.stage-welcome h1 { font-size: clamp(40px, 4.3vw, 60px); line-height: 1.16; letter-spacing: -.055em; }
.warm { color: var(--blue); }
.welcome-key { display: inline-block; }
.lede { margin-top: 22px; max-width: 540px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.fee-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 0; gap: 0; border-top: 1px solid #d5dfd8; border-bottom: 1px solid #d5dfd8; }
.fee-card { min-width: 0; padding: 22px 14px 22px 0; }
.fee-card + .fee-card { padding-left: 18px; border-left: 1px solid #d5dfd8; }
.fee-icon { color: #3c5444; height: 24px; margin-bottom: 14px; }
.fee-card h3 { font-size: 14px; line-height: 1.6; font-weight: 600; }
.fee-card p { margin-top: 7px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.fee-card small { font-size: 10px; font-weight: 400; margin-left: 3px; color: #4f6357; }
.actions { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 32px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 50px; padding: 13px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1.6; text-decoration: none;
  transition: background var(--motion-press), color var(--motion-press), border-color var(--motion-press), box-shadow var(--motion-press);
}
.button.primary { background: var(--blue); color: white; }
.button.primary:hover:not(:disabled) { background: var(--blue-hover); }
.button.primary:active:not(:disabled) { background: #0b2518; }
.button.secondary { background: #fff; border: 1px solid var(--control); color: var(--ink); }
.button.secondary:hover:not(:disabled) { background: #f2f5f3; border-color: #879d8e; }
.button:disabled { color: #4f6357; background: #e9efeb; border-color: #e0e8e3; }
.button.small { min-height: 44px; padding: 10px 16px; font-size: 13px; gap: 8px; }
.button.full { width: 100%; }
.text-button, .back, .welcome-resume { min-height: 44px; color: var(--blue); font-size: 13px; line-height: 1.7; padding: 10px 0; text-decoration: none; }
.text-button:hover, .welcome-resume:hover { text-decoration: underline; text-underline-offset: 4px; }
.back { display: inline-flex; align-items: center; gap: 8px; color: #55685b; padding-inline: 4px; }
.helper { color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 18px; }
.welcome-resume { margin-top: 9px; text-align: left; }
.progress { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 20px 22px; color: #4f6357; font-size: 11px; line-height: 1.6; }
.progress span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.progress b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #bac9bf; border-radius: 50%; font-size: 10px; font-weight: 500; }
.progress i { width: 36px; height: 1px; background: #cbd8cf; }
.progress .active { color: var(--blue); }
.progress .active b { border-color: var(--blue); background: #99db31; color: #0b2518; }
.footline { text-align: center; font-size: 11px; line-height: 1.8; color: #4f6357; padding: 12px 20px 25px; }

/* A schematic platform screen carries the product's own map, rather than a mascot. */
.product-scene { position: relative; min-height: 380px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 1400px; isolation: isolate; }
.platform-device { width: 100%; max-width: 480px; border: 1px solid #cbd9d0; padding: 9px; background: #e8eeea; border-radius: 22px; transform: rotateY(-12deg) rotateX(5deg) rotateZ(-2deg); box-shadow: 18px 22px 42px #30423616, inset 0 1px 0 #fff; z-index: 2; overflow: hidden; }
.device-toolbar { display: flex; align-items: center; gap: 7px; min-height: 43px; padding: 8px 13px; background: #f2f8e9; border: 1px solid #e0e9e3; border-bottom: 0; border-radius: 13px 13px 0 0; font-size: 10px; color: #596e60; }
.device-toolbar > i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #abbfb2; flex-shrink: 0; }
.device-toolbar > span { margin-left: 5px; font-size: 10px; letter-spacing: .08em; font-weight: 600; }
.device-toolbar > small { margin-left: auto; font-size: 9px; color: #627b6a; }
.device-toolbar img { width: 76px; height: 24px; object-fit: contain; }
.device-map { position: relative; min-height: 270px; background: #edf2ef; border: 1px solid #dae5de; overflow: hidden; }
.map-course { display: block; width: 100%; height: auto; min-height: 270px; }
.flight-line { fill: none; stroke: #2f8a3d; stroke-width: 1.7; stroke-dasharray: 5 6; animation: flight-route 12s linear 2; }
.scan-line { position: absolute; z-index: 2; pointer-events: none; inset: 0 0 auto; width: 100%; height: 1px; background: #2f8a3d; opacity: .55; animation: map-scan 4s var(--ease) 2; }
.map-target { color: #0d4a2e; stroke: #0d4a2e; fill: none; }
.device-toolbar > b { color: #2d3d32; font-size: 12px; letter-spacing: -.01em; }
.device-toolbar > i:first-of-type { margin-left: auto; }
.device-caption { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e0e9e3; border-top: 0; border-radius: 0 0 13px 13px; padding: 12px 14px; background: #fff; color: #354a3c; font-size: 10px; line-height: 1.6; }
.device-caption > span { display: inline-flex; align-items: center; gap: 6px; }
.device-caption svg { width: 14px; height: 14px; }
.device-caption b { font-size: 10px; color: #0d4a2e; font-weight: 500; white-space: nowrap; }
.product-orbit { position: absolute; z-index: -1; top: 22%; width: 108%; height: 220px; border: 1px solid #dae5de; border-radius: 50%; transform: rotate(-14deg); }
.product-orbit::after { content: ""; position: absolute; inset: 24px; border: 1px solid #e1e9e4; border-radius: 50%; }
.orbit-mark { position: absolute; z-index: 3; top: -34px; right: 13%; width: 48px; height: 48px; border: 1px solid #dae5de; background: #fff; border-radius: 14px; display: grid; place-items: center; color: #2f8a3d; transform: rotate(14deg); box-shadow: 0 8px 20px #0d4a2e0b; }
.orbit-mark svg { width: 24px; height: 24px; }
.orbit-mark img { width: 28px; height: 28px; object-fit: contain; }
.scene-caption > span { display: block; margin-top: 3px; font-size: 10px; color: #4f6357; }
.scene-caption, .companion-line { text-align: center; margin: 16px auto 0; max-width: 360px; font-size: 12px; color: #4f6357; line-height: 1.9; }
.scene-caption b, .companion-line b { color: #3e5345; font-weight: 500; }
.answers { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 24px 8px 0; }
.answer-chip { color: #546d5c; border: 1px solid #d6e2da; background: #f9fbfa; font-size: 11px; line-height: 1.5; padding: 6px 10px; border-radius: 7px; max-width: 100%; overflow-wrap: anywhere; }
.landscape { position: relative; width: 100%; min-height: 280px; }
.orb, .orb-shine, .smile, .halo, .field-art, .orbit-dot { display: none; }

/* One question per step. Visible labels, generous controls, no decorative form tiles. */
.name-field { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
.name-field label, .field-label { font-size: 13px; font-weight: 500; color: #415247; }
.name-field input { max-width: 520px; min-height: 64px; font-size: 24px; letter-spacing: -.025em; padding: 15px 18px; }
.choices { display: grid; gap: 12px; margin-top: 30px; }
.choice { display: flex; align-items: center; gap: 16px; text-align: left; min-width: 0; padding: 21px 20px; border: 1px solid #c8d5cc; border-radius: 16px; background: #fff; transition: border-color var(--motion-press), background var(--motion-press); }
.choice:hover { border-color: #7e9887; background: #fcfdfc; }
.choice.selected { background: #f2f8e9; border: 2px solid var(--blue); padding: 20px 19px; }
.choice-icon { width: 26px; min-width: 26px; color: #53725d; display: grid; place-items: center; }
.choice.selected .choice-icon { color: var(--blue); }
.choice strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.6; }
.choice p { margin-top: 4px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.choice-arrow { color: #6b8072; margin-left: auto; flex-shrink: 0; }
.choice-radio { margin-left: auto; width: 20px; height: 20px; border: 1px solid #8aa091; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; }
.selected .choice-radio { border-color: var(--blue); }
.selected .choice-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.photo-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 30px; }
.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.field label, .field > span { font-size: 13px; line-height: 1.6; font-weight: 500; color: #44584b; }
.field input, .field select { width: 100%; min-height: 50px; }
.input-unit { position: relative; }
.input-unit input { padding-right: 46px; width: 100%; }
.input-unit > span { position: absolute; right: 16px; top: 15px; font-size: 13px; color: #4f6357; pointer-events: none; }
.note { margin-top: 23px; border-left: 2px solid #b9ccbf; padding-left: 13px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.area-fields { display: grid; grid-template-columns: minmax(0, 1fr) 126px; gap: 14px; max-width: 500px; margin-top: 30px; }
.area-fields input { width: 100%; min-height: 64px; font-size: 25px; }
.area-fields select { width: 100%; min-height: 64px; font-size: 15px; }
.area-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.area-presets button { min-height: 44px; border: 1px solid #d6e2da; padding: 8px 12px; border-radius: 8px; color: #4e6b58; font-size: 12px; }
.area-presets button:hover { background: #f2f8e9; }
.error { margin-top: 13px; color: var(--error); font-size: 13px; line-height: 1.8; }
.error:empty { display: none; }
.loading-circle { display: flex; align-items: center; gap: 20px; margin: 32px 0 26px; }
.spinner { flex-shrink: 0; width: 45px; height: 45px; border-radius: 50%; border: 2px solid #e0e8e3; border-top-color: var(--blue); animation: spin 1.1s linear infinite; }
.loading-caption { color: #54745f; font-size: 13px; line-height: 1.9; }
.calc-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: #4f6357; font-size: 13px; }
.calc-step i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #b5c8bb; border-radius: 50%; font-size: 11px; font-style: normal; }
.calc-step.done { color: #0d4a2e; }
.calc-step.done i { background: #f2f8e9; border-color: #b5cabc; }
.loading-track { margin-top: 24px; width: 100%; height: 3px; border-radius: 5px; background: #dfe8e2; overflow: hidden; }
.loading-track i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--blue); transition: width .3s var(--ease); }
.estimates { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.estimates span { border: 1px solid #dfe7e2; border-radius: 7px; background: #fff; padding: 8px 11px; font-size: 12px; color: #4f6c59; }

/* Planner: the money stays quiet, legible and aligned to the same right edge. */
.workspace { max-width: 1328px; margin: auto; padding: 28px 48px 64px; position: relative; }
.workspace-intro { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.mini-orb { width: 42px; height: 42px; display: grid; place-items: center; color: #2f8a3d; position: relative; border: 1px solid #c6d6cb; border-radius: 12px; background: #f2f8e9; flex-shrink: 0; }
.mini-orb::before { content: ""; position: absolute; inset: 11px; border: 1.5px solid #2f8a3d; border-radius: 50%; }
.mini-orb::after { content: ""; position: absolute; inset: 6px 19px; background: #2f8a3d; transform: rotate(45deg); width: 1px; }
.mini-orb:has(svg)::before, .mini-orb:has(svg)::after { display: none; }
.mini-orb svg { width: 21px; height: 21px; }
.workspace-intro h1 { font-size: 26px; line-height: 1.45; letter-spacing: -.035em; font-weight: 400; }
.workspace-intro p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.edit-link { margin-left: auto; min-height: 44px; font-size: 12px; color: var(--blue); line-height: 1.6; text-align: right; flex-shrink: 0; }
.edit-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 24px; align-items: start; }
.editor { min-width: 0; }
.panel { margin-bottom: 24px; border: 1px solid #e1e9e4; border-radius: var(--radius-card); padding: 26px; background: #fff; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 23px; }
.panel-top h2 { font-size: 18px; line-height: 1.5; font-weight: 400; letter-spacing: -.025em; }
.panel-top h2 > span { display: inline-flex; justify-content: center; width: 25px; margin-right: 7px; color: #607768; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.segmented { display: flex; flex-shrink: 0; gap: 3px; padding: 3px; background: #eff3f0; border-radius: 11px; }
.segmented button { min-height: 44px; padding: 9px 15px; border: 1px solid transparent; border-radius: 8px; color: #5c6e62; font-size: 12px; font-weight: 500; line-height: 1.6; }
.segmented button.selected { background: #fff; color: #25332a; border-color: #d6e0d9; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pack { min-width: 0; padding: 20px 15px 14px; text-align: left; background: #fff; border: 1px solid #becec3; border-radius: 15px; transition: border-color var(--motion-press), background var(--motion-press); }
.pack:hover { border-color: #7f9a88; }
.pack.selected { border: 2px solid var(--blue); padding: 19px 14px 13px; background: #f2f8e9; }
.pack > small { display: block; margin-bottom: 14px; color: #4d6455; font-size: 12px; line-height: 1.5; }
.pack strong { display: block; font-size: 27px; line-height: 1.35; letter-spacing: -.045em; font-variant-numeric: tabular-nums; font-weight: 600; color: #243128; white-space: nowrap; }
.pack strong small { font-size: 14px; margin-right: 2px; font-weight: 400; }
.pack .pack-days { margin-top: 14px; color: #4e6857; font-size: 11px; line-height: 1.8; }
.pack .pack-credits { margin-top: 3px; color: #4f6357; font-size: 11px; line-height: 1.7; }
.pack-selected { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid #e1eae4; padding-top: 12px; margin-top: 17px; color: #4c6a56; font-size: 11px; line-height: 1.7; }
.pack.selected .pack-selected { color: var(--blue); }
.pack-note { font-size: 12px; line-height: 1.9; color: var(--muted); margin-top: 17px; }
.price-compact { display: none; }
.suggestion { padding: 17px 18px; border: 1px solid #dce6df; border-radius: 13px; background: #f2f8e9; margin-bottom: 22px; }
.suggestion-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.suggestion b { font-size: 13px; line-height: 1.6; font-weight: 600; color: #0d4a2e; }
.suggestion p { margin-top: 7px; font-size: 12px; line-height: 1.9; color: #54745f; }
.suggestion button { font-size: 12px; color: var(--blue); min-height: 44px; padding: 5px 0; flex-shrink: 0; }
.suggestion button:hover { text-decoration: underline; text-underline-offset: 4px; }
.suggestion.warn { border-color: #ddcdb4; background: #fcf8f0; }
.suggestion.warn b, .suggestion.warn p { color: #77541c; }
.service-tools { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; color: #4f6357; font-size: 12px; line-height: 1.8; }
.service-tools button { min-height: 44px; padding: 5px 0; font-size: 12px; color: var(--blue); }
.service-tools button:hover { text-decoration: underline; text-underline-offset: 4px; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.service { overflow: hidden; min-width: 0; border: 1px solid #dae4dd; border-radius: 16px; background: #fff; }
.service-heading { display: flex; align-items: center; gap: 10px; padding: 17px 18px 14px; }
.service-icon { display: grid; place-items: center; width: 24px; height: 32px; color: #587863; flex-shrink: 0; }
.service-heading > div { min-width: 0; }
.service-heading button { min-height: 44px; padding: 3px 0; display: flex; align-items: center; gap: 7px; text-align: left; font-size: 15px; line-height: 1.6; font-weight: 600; }
.info-dot { display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1px solid #8da695; border-radius: 50%; color: #587461; font-family: inherit; font-style: normal; font-weight: 400; font-size: 10px; }
.service-heading p { color: #4f6357; font-size: 12px; line-height: 1.7; }
.service-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 240ms var(--ease), opacity 180ms; }
.service-more > div { overflow: hidden; min-height: 0; }
.service-more p { background: #f2f8e9; color: #506f5a; padding: 0 18px; font-size: 12px; line-height: 1.9; transition: padding 240ms var(--ease); }
.service.peek .service-more, .service.pinned .service-more { grid-template-rows: 1fr; opacity: 1; }
.service.peek .service-more p, .service.pinned .service-more p { padding: 14px 18px; }
.service-body { padding: 5px 18px 18px; }
.count-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #4f6357; font-size: 11px; line-height: 1.8; }
.stepper { display: flex; align-items: center; min-height: 46px; margin-top: 8px; border: 1px solid #b8cbbe; border-radius: 11px; overflow: hidden; }
.stepper button { width: 44px; align-self: stretch; min-height: 44px; color: #0d4a2e; font-size: 21px; flex-shrink: 0; }
.stepper button:hover { background: #f2f8e9; }
.stepper button:active { background: #e5ede8; }
.stepper input { width: 100%; border: 0; min-height: 44px; height: 44px; padding: 7px 2px; text-align: center; font-size: 17px; font-weight: 500; border-radius: 0; background: transparent; }
.stepper input:focus { outline: 0; box-shadow: inset 0 -2px var(--blue); }
.stepper input[aria-invalid="true"] { box-shadow: inset 0 -2px var(--error); background: #fff7f8; }
.frequency { font-size: 12px; line-height: 1.7; color: #577762; margin-top: 10px; min-height: 21px; }
.single-cost { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 1px solid #e8efea; padding-top: 12px; margin-top: 14px; color: #4f6357; font-size: 11px; line-height: 1.7; }
.single-cost b { color: #374b3e; font-size: 12px; font-weight: 500; text-align: right; white-space: nowrap; }
.photo-count { display: flex; justify-content: space-between; align-items: center; gap: 9px; margin-top: 12px; color: #4f6357; font-size: 11px; line-height: 1.8; }
.photo-count b { color: #4c6a56; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.photo-count input { max-width: 118px; min-height: 44px; height: 44px; padding: 8px 10px; text-align: right; border-radius: 8px; font-size: 14px; }
.service-foot { margin-top: 17px; font-size: 12px; line-height: 1.9; color: #4f6357; }
.extras { margin-top: 18px; padding: 17px 18px; border: 1px solid #e0e9e3; border-radius: 13px; background: #f2f8e9; }
.extra-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.extra-line label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; line-height: 1.7; cursor: pointer; }
.extras p { margin-top: 6px; color: #4f6357; font-size: 12px; line-height: 1.9; }
.extra-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.extra-fields label { display: flex; flex-direction: column; gap: 8px; color: #445c4c; font-size: 12px; line-height: 1.6; }
.extra-fields input, .extra-fields select { min-height: 46px; width: 100%; padding: 9px 12px; font-size: 15px; border-radius: 10px; }
.read-more { margin-top: 22px; border-top: 1px solid #e4ece7; padding-top: 8px; color: #4f6357; font-size: 12px; line-height: 1.9; }
.read-more summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: #476250; font-size: 12px; }
.read-more p { margin-top: 10px; }
.workspace-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #4f6357; font-size: 11px; line-height: 1.8; padding: 0 3px 12px; }
.workspace-bottom button { min-height: 44px; padding: 8px 0; font-size: 12px; color: var(--blue); text-align: right; }
.summary { position: sticky; top: 24px; border-radius: var(--radius-card); background: #fff; border: 1px solid #d8e3dc; overflow: hidden; }
.summary-top { padding: 26px 24px 24px; background: #f2f8e9; border-bottom: 1px solid #e3eae5; }
.summary-top .label { font-size: 10px; line-height: 1.7; letter-spacing: .09em; color: #4f6357; }
.summary-top h2 { margin-top: 11px; font-size: 15px; line-height: 1.8; font-weight: 500; color: #3b5243; overflow-wrap: anywhere; }
.total { display: flex; align-items: baseline; gap: 3px; margin-top: 12px; font-variant-numeric: tabular-nums; color: #0b2518; }
.total span { font-size: 20px; font-weight: 400; }
.total strong { font-size: 35px; line-height: 1.3; letter-spacing: -.04em; font-weight: 600; }
.summary-top > p { margin-top: 9px; color: #4f6357; font-size: 12px; line-height: 1.8; }
.summary-body { padding: 24px; }
.fact { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 13px; color: #4f6357; font-size: 12px; line-height: 1.8; }
.fact b { color: #34483b; font-size: 12px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.credits-meter { padding: 18px 0 5px; margin: 20px 0; border-block: 1px solid #e4ece7; }
.meter { height: 5px; margin: 14px 0; border-radius: 5px; background: #e4ece7; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: #99db31; transition: width 240ms var(--ease); }
.budget-status { margin-bottom: 18px; color: #0d4a2e; font-size: 12px; line-height: 1.9; }
.budget-status.warn { color: #875400; }
.summary .button { min-height: 46px; border-radius: 999px; padding: 11px 15px; font-size: 13px; gap: 8px; }
.summary .button + .button { margin-top: 11px; }
.summary-copy { width: 100%; min-height: 44px; padding: 10px 0; margin-top: 7px; color: var(--blue); font-size: 12px; }
.summary-copy:hover { text-decoration: underline; text-underline-offset: 4px; }
.summary-fine { margin-top: 13px; font-size: 11px; line-height: 1.9; color: #4f6357; }
.waiver { margin-bottom: 18px; padding: 12px 13px; border: 1px solid #dfd2bb; border-radius: 10px; background: #fcf8f0; color: #79531c; font-size: 12px; line-height: 1.9; }
.mobile-budget { display: none; }

/* The platform subscription is a distinct scope, not an empty inspection package. */
.scope-switch { display: flex; gap: 0; margin: 0 0 24px; border-bottom: 1px solid #dbe5de; }
.scope-switch button { flex: 1; display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 54px; padding: 13px 10px; border-bottom: 2px solid transparent; color: #4f6357; font-size: 13px; line-height: 1.7; }
.scope-switch button.selected, .scope-switch button[aria-pressed="true"] { border-bottom-color: var(--blue); color: var(--blue); font-weight: 600; }
.scope-switch button:hover { background: #f2f8e9; }
.scope-switch button > div { display: flex; flex-direction: column; align-items: flex-start; }
.scope-switch button small { font-size: 11px; color: #4f6357; font-weight: 400; }
.scope-note { color: #4f6357; font-size: 12px; line-height: 1.9; margin-top: 16px; }
.platform-workspace { min-width: 0; }
.panel.platform-hero { padding: 30px; }
.platform-hero .product-scene { max-width: 260px; margin: 22px auto 0; min-height: 0; }
.platform-hero .platform-device { width: 100%; max-width: 260px; padding: 6px; border-radius: 16px; }
.platform-hero .device-map, .platform-hero .map-course { min-height: 160px; }
.platform-hero .scene-caption { display: none; }
.platform-hero .device-toolbar { min-height: 32px; padding: 6px 9px; }
.platform-hero .device-caption { padding: 7px 9px; font-size: 8px; }
.platform-hero .device-caption b { font-size: 8px; }
.platform-hero .device-caption svg { width: 11px; height: 11px; }
.platform-hero > svg { color: #2f8a3d; margin-bottom: 22px; width: 30px; height: 30px; }
.platform-hero h2, .platform-hero h3 { font-size: 28px; line-height: 1.4; letter-spacing: -.04em; color: #26342b; font-weight: 400; text-wrap: balance; }
.platform-hero p { margin-top: 13px; max-width: 540px; color: #4f6357; font-size: 14px; line-height: 1.9; }
.platform-term { color: #597a64; font-size: 12px; line-height: 1.8; margin-top: 18px; display: flex; gap: 9px; align-items: center; }
.platform-term > span, .platform-term > b { font-size: 12px; font-weight: 500; }
.platform-features { display: flex; flex-direction: column; padding: 0; }
.platform-feature { display: flex; align-items: flex-start; gap: 15px; padding: 21px 0; border-bottom: 1px solid #e4ece7; min-width: 0; }
.platform-feature:last-child { padding-bottom: 0; border-bottom: 0; }
.platform-feature:first-child { padding-top: 0; }
.platform-feature > svg { width: 20px; height: 20px; color: #557660; margin-top: 4px; margin-bottom: 0; }
.platform-feature h3, .platform-feature h4, .platform-feature strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.7; color: #33473a; }
.platform-feature p { font-size: 12px; line-height: 1.9; color: #4f6357; margin-top: 5px; }
.platform-selection { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 21px; color: #2f8a3d; font-size: 12px; line-height: 1.8; }
.platform-selection h3, .platform-selection strong { font-size: 16px; font-weight: 600; line-height: 1.6; }
.platform-selection p { color: #4f6357; font-size: 12px; line-height: 1.9; margin-top: 7px; }
.platform-price { margin-top: 22px; color: #0b2518; font-variant-numeric: tabular-nums; white-space: nowrap; }
.platform-price strong, .platform-price b { font-size: 35px; line-height: 1.4; letter-spacing: -.04em; font-weight: 600; }
.platform-price small { font-size: 12px; font-weight: 400; color: #4f6357; }
.platform-price > span { font-size: 14px; color: #4f6357; }
.platform-selection > svg { color: var(--blue); }

/* Dialogs float; ordinary planner panels do not. */
dialog { max-width: 680px; width: calc(100% - 32px); max-height: calc(100dvh - 36px); border: 1px solid #d1ddd5; border-radius: 24px; padding: 0; background: #fff; color: var(--ink); box-shadow: 0 28px 100px #1c261f33; }
dialog::backdrop { background: #212d256b; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 3; min-height: 72px; border-bottom: 1px solid #e4ebe6; padding: 14px 24px; background: #fff; }
.dialog-head h2 { font-size: 16px; line-height: 1.7; font-weight: 400; }
.close-dialog { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-radius: 50%; color: #607667; font-size: 26px; line-height: 1; background: #f2f5f3; }
.close-dialog:hover { background: #e5ece7; }
.dialog-body { padding: 28px; }
.dialog-body > p { margin-bottom: 22px; color: #4f6357; font-size: 14px; line-height: 1.9; }
.dialog-body .field { margin-bottom: 18px; }
.dialog-body .field label { font-size: 13px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 15px 0; padding-block: 6px; min-height: 44px; font-size: 12px; color: #556e5d; line-height: 1.9; cursor: pointer; }
.consent input { margin-top: 2px; }
.dialog-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; padding: 18px 24px; border-top: 1px solid #e4ebe6; background: #fff; }
.dialog-actions .button { min-height: 46px; font-size: 13px; }
.quote-total { padding: 24px; border-radius: 14px; background: #f2f8e9; margin-bottom: 22px; }
.quote-total small { color: #597462; font-size: 12px; line-height: 1.8; }
.quote-total strong { display: block; margin-top: 9px; color: #212e25; font-size: 34px; font-weight: 600; line-height: 1.4; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.quote-row { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid #e5ede8; color: #3e5646; font-size: 13px; line-height: 1.7; }
.quote-row p { margin-top: 5px; color: #4f6357; font-size: 12px; line-height: 1.8; }
.quote-row b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.quote-facts { margin-top: 22px; }
.copy-text { width: 100%; min-height: 320px; font-size: 13px; line-height: 1.9; }
.quote-notes { margin-top: 22px; border-radius: 12px; padding: 17px; background: #f2f8e9; color: #597462; font-size: 12px; line-height: 1.9; }
.quote-notes li { margin-block: 5px; }
.success { text-align: center; padding: 21px 8px; }
.success-mark { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid #c6d5cb; background: #f2f8e9; border-radius: 50%; color: var(--blue); margin: 0 auto 24px; font-size: 25px; }
.success h3 { font-size: 25px; line-height: 1.5; font-weight: 600; letter-spacing: -.025em; margin-bottom: 17px; text-wrap: balance; }
.success p { color: #4f6357; font-size: 14px; line-height: 2; }
.receipt { display: flex; flex-direction: column; align-items: center; gap: 9px; color: #4f6357; font-size: 12px; margin-top: 24px; }
.receipt b { color: #3e5646; font-size: 15px; letter-spacing: .06em; font-weight: 500; font-variant-numeric: tabular-nums; }
#toast { position: fixed; z-index: 500; bottom: 28px; left: 50%; max-width: calc(100% - 32px); border-radius: 13px; background: #25342a; color: #fff; padding: 13px 21px; font-size: 13px; line-height: 1.8; text-align: center; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity 180ms, transform 180ms var(--ease); box-shadow: 0 8px 28px #0d4a2e20; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes panel-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flight-route { to { stroke-dashoffset: -132; } }
@keyframes map-scan { 0% { transform: translateY(18px); opacity: 0; } 15% { opacity: .5; } 85% { opacity: .5; } 100% { transform: translateY(270px); opacity: 0; } }

@media (min-width: 1440px) {
  .main { padding-top: 38px; }
  .onboard { min-height: 680px; }
}
@media (max-width: 1140px) {
  .topbar { padding-inline: 32px; }
  .main, .workspace { padding-inline: 32px; }
  .onboard { gap: 36px; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 640px; }
  h1 { font-size: 37px; }
  .stage-welcome h1 { font-size: 48px; }
  .product-scene { min-height: 330px; }
  .platform-device { padding: 7px; border-radius: 19px; }
  .device-map, .map-course { min-height: 230px; }
  .device-toolbar { padding-inline: 9px; }
  .device-toolbar > small { display: none; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 306px; gap: 20px; }
  .panel { padding: 22px; }
  .summary-top, .summary-body { padding: 22px; }
  .pack { padding-inline: 12px; }
  .pack.selected { padding-inline: 11px; }
  .pack strong { font-size: 24px; }
  .panel-top { flex-wrap: wrap; }
  .service-grid { gap: 12px; }
  .service-heading { padding-inline: 14px; gap: 8px; }
  .service-heading button { font-size: 14px; }
  .service-body { padding-inline: 14px; }
  .single-cost { flex-wrap: wrap; gap: 3px 8px; }
}
@media (max-width: 900px) {
  .device-caption { min-height: 32px; font-size: 9px; padding: 6px 9px; border-radius: 0 0 10px 10px; }
  .device-caption b { font-size: 9px; }
  .device-caption svg { width: 11px; height: 11px; }
  .topbar { padding: 22px 28px; }
  .main { padding: 12px 28px 24px; }
  .onboard { display: flex; flex-direction: column; gap: 0; align-items: stretch; min-height: auto; }
  .stage-content { order: 2; max-width: 610px; width: 100%; margin: auto; padding: 24px 0 30px; }
  .companion { order: 1; padding: 8px 0; align-items: center; }
  .product-scene { max-width: 400px; min-height: 240px; margin: 0 auto; }
  .platform-device { width: 285px; border-radius: 17px; transform: rotateY(-9deg) rotateX(4deg) rotateZ(-2deg); }
  .device-map, .map-course { min-height: 157px; }
  .device-toolbar { min-height: 30px; padding-block: 4px; border-radius: 10px 10px 0 0; }
  .device-toolbar > span { font-size: 8px; }

  .orbit-mark { width: 37px; height: 37px; border-radius: 10px; top: -26px; right: 12%; }
  .orbit-mark svg { width: 20px; height: 20px; }
  .product-orbit { width: 330px; height: 150px; }
  .scene-caption, .companion-line { margin-top: 3px; font-size: 11px; }
  .answers { margin-top: 10px; }
  .answer-chip { font-size: 11px; padding: 4px 8px; }
  .onboard:not(:has(.fee-cards)) .companion { display: none; }
  h1 { font-size: 37px; }
  .stage-welcome h1 { font-size: 46px; }
  .workspace { padding: 20px 28px 116px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .summary { position: relative; top: auto; max-width: none; }
  .summary-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 20px; align-items: center; }
  .summary-top .label { grid-column: 1 / -1; }
  .summary-top h2 { margin: 5px 0 0; }
  .summary-top .total { grid-column: 2; grid-row: 2 / 4; margin: 0; }
  .summary-top > p { grid-column: 1; margin-top: 2px; }
  .summary-body { display: block; }
  .summary-body .button { min-height: 48px; }
  .summary-copy { min-height: 44px; }
  .mobile-budget { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; min-height: 86px; padding: 14px 28px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #d9e4dd; background: #fff; }
  .mobile-budget small { display: block; font-size: 11px; color: #4f6357; line-height: 1.7; }
  .mobile-budget strong { display: block; font-size: 22px; font-weight: 600; line-height: 1.45; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
  .mobile-budget .button { min-height: 46px; font-size: 13px; padding: 11px 18px; gap: 10px; }
  .workspace-intro { gap: 12px; flex-wrap: wrap; }
  .workspace-intro > div { flex: 1; min-width: 0; }
  .workspace-intro h1 { font-size: 25px; }
  .edit-link { margin-left: 54px; flex-basis: calc(100% - 54px); min-height: 44px; text-align: left; font-size: 12px; }
  .panel-top { flex-wrap: nowrap; }
  .panel { padding: 25px; }
  .service-heading { padding-inline: 18px; }
  .service-body { padding-inline: 18px; }
  .pack strong { font-size: 28px; }
  .single-cost { flex-wrap: nowrap; }
  #toast { bottom: 108px; }
}
@media (max-width: 600px) {
  .brand span { white-space: nowrap; }
  .stage-welcome .companion { padding: 0; }
  .stage-welcome .product-scene { min-height: 0; }
  .stage-welcome .platform-device { width: 208px; }
  .stage-welcome .device-map, .stage-welcome .map-course { min-height: 0; }
  .stage-welcome .device-caption { display: none; }
  .stage-welcome .scene-caption { font-size: 0; margin-top: 6px; }
  .stage-welcome .scene-caption > span { font-size: 10px; }
  .device-caption { font-size: 8px; padding: 6px 8px; }
  .device-caption b { font-size: 8px; }
  .device-caption svg { width: 10px; height: 10px; }
  .topbar { padding: 20px; gap: 10px; }
  .brand { gap: 12px; }
  .brand img { width: 104px; height: 30px; }
  .brand span { padding-left: 12px; font-size: 11px; letter-spacing: .02em; max-width: 106px; }
  .preview-badge { font-size: 10px; padding: 5px 7px; }
  .main { padding: 0 24px 20px; }
  .companion { padding-top: 4px; }
  .product-scene { max-width: 330px; min-height: 215px; }
  .platform-device { width: 255px; padding: 6px; border-radius: 15px; transform: rotateY(-7deg) rotateX(4deg) rotateZ(-2deg); }
  .device-map, .map-course { min-height: 137px; }
  .device-toolbar { min-height: 27px; padding: 4px 8px; }
  .device-toolbar > span { font-size: 8px; }

  .product-orbit { width: 280px; height: 130px; }
  .orbit-mark { width: 34px; height: 34px; top: -24px; right: 12%; border-radius: 10px; }
  .orbit-mark svg { width: 18px; height: 18px; }
  .scene-caption { font-size: 11px; }
  .stage-content { padding: 23px 0 27px; }
  .overline { font-size: 10px; letter-spacing: .13em; margin-bottom: 17px; }
  h1 { font-size: 32px; line-height: 1.3; letter-spacing: -.045em; }
  .stage-welcome h1 { font-size: 37px; line-height: 1.19; letter-spacing: -.055em; }
  .lede { font-size: 14px; line-height: 1.9; margin-top: 17px; }
  .fee-cards { margin-top: 25px; }
  .fee-card { padding: 18px 9px 18px 0; }
  .fee-card + .fee-card { padding-left: 12px; }
  .fee-card h3 { font-size: 12px; }
  .fee-card p { font-size: 11px; line-height: 1.8; }
  .fee-card small { display: inline; margin-left: 0; font-size: 9px; }
  .fee-icon { margin-bottom: 12px; }
  .fee-icon svg { width: 21px; height: 21px; }
  .actions { margin-top: 25px; gap: 9px 18px; }
  .actions > .button.primary { width: 100%; min-height: 50px; }
  .button { font-size: 14px; }
  .helper { font-size: 12px; margin-top: 14px; }
  .progress { gap: 7px; padding: 9px 16px 18px; font-size: 10px; }
  .progress span { gap: 5px; }
  .progress i { width: 16px; }
  .progress b { width: 18px; height: 18px; font-size: 9px; }
  .footline { font-size: 10px; padding-bottom: 22px; }
  .name-field { margin-top: 27px; }
  .name-field input { font-size: 21px; min-height: 60px; }
  .choice { padding: 18px 15px; gap: 12px; border-radius: 14px; }
  .choice.selected { padding: 17px 14px; }
  .choice strong { font-size: 15px; }
  .choice p { font-size: 12px; }
  .choice-icon { width: 23px; min-width: 23px; }
  .area-fields { grid-template-columns: minmax(0, 1fr) 104px; gap: 11px; margin-top: 26px; }
  .area-fields input { font-size: 23px; min-height: 60px; }
  .area-fields select { font-size: 15px; min-height: 60px; padding-inline: 11px; }
  .field > span, .field label { font-size: 12px; }
  .photo-inputs { gap: 18px 12px; }
  .note { font-size: 12px; }
  .loading-caption { font-size: 12px; }
  .workspace { padding: 18px 16px 118px; }
  .workspace-intro { padding-inline: 4px; gap: 11px; margin-bottom: 21px; }
  .workspace-intro h1 { font-size: 22px; line-height: 1.5; }
  .workspace-intro p { font-size: 12px; margin-top: 5px; }
  .mini-orb { width: 36px; height: 36px; border-radius: 11px; }
  .mini-orb::before { inset: 9px; }
  .mini-orb::after { inset: 5px 16px; }
  .edit-link { margin-left: 47px; min-height: 44px; }
  .panel { padding: 21px 16px; border-radius: 18px; margin-bottom: 20px; }
  .panel-top { gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; }
  .panel-top h2 { font-size: 17px; line-height: 1.6; }
  .panel-top h2 > span { width: 22px; font-size: 11px; margin-right: 5px; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; min-height: 44px; font-size: 13px; }
  .packs { gap: 8px; }
  .pack { padding: 16px 10px 12px; border-radius: 12px; }
  .pack.selected { padding: 15px 9px 11px; }
  .pack > small { font-size: 11px; margin-bottom: 11px; }
  .pack strong { font-size: 25px; letter-spacing: -.04em; }
  .pack strong small { font-size: 12px; }
  .price-full { display: none; }
  .price-compact { display: inline; }
  .pack .pack-days { font-size: 10px; margin-top: 10px; }
  .pack .pack-credits { font-size: 10px; }
  .pack-selected { padding-top: 10px; margin-top: 12px; font-size: 10px; gap: 4px; }
  .pack-selected svg { width: 11px; height: 11px; }
  .pack-note { font-size: 12px; margin-top: 15px; }
  .suggestion { padding: 15px; }
  .suggestion-top { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
  .suggestion button { min-height: 44px; padding-block: 8px; }
  .suggestion p { font-size: 12px; }
  .service-tools { font-size: 11px; margin-bottom: 14px; }
  .service-tools button { font-size: 12px; }
  .service-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .service-heading { gap: 10px; padding: 15px 17px 11px; }
  .service-heading button { font-size: 15px; min-height: 44px; }
  .service-heading p { font-size: 12px; }
  .service-body { padding: 5px 17px 17px; }
  .count-label { font-size: 12px; }
  .stepper { min-height: 48px; }
  .stepper input, .stepper button { min-height: 46px; height: 46px; }
  .stepper button { width: 48px; }
  .stepper input { font-size: 18px; }
  .frequency, .single-cost, .photo-count, .photo-count b { font-size: 12px; }
  .single-cost b { font-size: 13px; }
  .photo-count input { max-width: 145px; font-size: 16px; }
  .service.peek .service-more p, .service.pinned .service-more p { padding: 14px 17px; font-size: 12px; }
  .extra-line label { font-size: 13px; }
  .extras { padding: 14px 15px; }
  .extra-fields { gap: 12px; }
  .extra-fields input, .extra-fields select { min-height: 48px; font-size: 16px; padding-inline: 10px; }
  .workspace-bottom { font-size: 11px; flex-wrap: wrap; align-items: flex-start; padding-inline: 4px; }
  .workspace-bottom button { text-align: left; }
  .summary { border-radius: 18px; }
  .summary-top { display: block; padding: 24px 21px; }
  .summary-top h2 { margin-top: 10px; }
  .summary-top .total { margin-top: 13px; }
  .summary-top > p { margin-top: 9px; }
  .summary-body { padding: 22px 21px; }
  .fact, .fact b { font-size: 12px; }
  .summary-fine { font-size: 12px; }
  .total strong { font-size: 36px; }
  .mobile-budget { min-height: 86px; padding: 13px 20px calc(13px + env(safe-area-inset-bottom)); }
  .mobile-budget strong { font-size: 21px; }
  .scope-switch { margin-bottom: 22px; }
  .scope-switch button { min-height: 60px; padding: 11px 8px; font-size: 12px; gap: 7px; }
  .scope-switch button svg { width: 17px; height: 17px; }
  .scope-switch button small { font-size: 11px; }
  .panel.platform-hero { padding: 23px 19px; }
  .platform-hero .product-scene { display: none; }
  .platform-hero h2, .platform-hero h3 { font-size: 26px; }
  .platform-hero p { font-size: 13px; }
  .platform-features { gap: 0 18px; }
  .platform-feature { padding-block: 18px; }
  .platform-feature h3, .platform-feature h4, .platform-feature strong { font-size: 13px; }
  .platform-feature p { font-size: 12px; }
  .platform-selection { font-size: 12px; margin-bottom: 18px; gap: 7px; }
  .platform-selection h3, .platform-selection strong { font-size: 15px; }
  .platform-price strong, .platform-price b { font-size: 32px; }
  .platform-price { margin-top: 22px; }
  dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 21px; }
  .dialog-head { min-height: 66px; padding: 11px 17px; }
  .dialog-head h2 { font-size: 15px; }
  .dialog-body { padding: 22px 20px; }
  .dialog-body > p { font-size: 13px; }
  .contact-grid { grid-template-columns: 1fr; gap: 0; }
  .consent { font-size: 12px; }
  .dialog-actions { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); gap: 10px; }
  .dialog-actions .button { min-height: 46px; padding: 11px 16px; font-size: 13px; }
  .quote-total { padding: 20px; }
  .quote-total strong { font-size: 31px; }
  .quote-row { font-size: 12px; gap: 12px; }
  .quote-row p { font-size: 12px; }
  .success { padding: 15px 1px; }
  .success h3 { font-size: 22px; }
  .success p { font-size: 13px; }
}
@media (max-width: 370px) {
  .topbar { padding-inline: 16px; }
  .brand { gap: 9px; }
  .brand img { width: 96px; }
  .brand span { padding-left: 9px; max-width: 87px; font-size: 10px; }
  .preview-badge { font-size: 9px; }
  .main { padding-inline: 20px; }
  .stage-welcome h1 { font-size: 34px; }
  .fee-card h3 { font-size: 11px; }
  .fee-card p { font-size: 11px; }
  .workspace { padding-inline: 12px; }
  .panel { padding-inline: 14px; }
  .packs { gap: 6px; }
  .pack { padding-inline: 8px; }
  .pack.selected { padding-inline: 7px; }
  .pack > small { font-size: 10px; }
  .pack strong { font-size: 23px; }
  .pack .pack-days, .pack .pack-credits, .pack-selected { font-size: 10px; }
  .extra-fields { grid-template-columns: 1fr; }
}
/* Keep Chinese short copy balanced and avoid isolated one-character final lines. */
p, .quote-notes li, .consent span {
  text-wrap: balance;
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}
h1, h2, h3, .choice strong, .fee-card p, .choice p, .service-heading p,
.pack-days, .pack-credits, .pack-selected span, .frequency,
.button, .text-button, .welcome-resume, .edit-link {
  text-wrap: balance;
}
.choice > div, .platform-feature > div, .quote-row > div, .workspace-intro > div,
.consent span, .fact > span, .fact > b {
  min-inline-size: 0;
}
.fact > span, .fact > b { text-wrap: balance; }
@media (max-width: 600px) {
  .fee-card p br { display: none; }
}
@media (max-width: 370px) {
  .stage-content h1 br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .stage-content { opacity: 1; transform: none; }
  .scan-line { display: none; }
  .platform-device { transform: none; }
}
/* V1.2 quote palette follows the course homepage. Only surface, colour and type
   weight change here; the existing geometry, breakpoints and workflows stay intact.
   Scoped roots keep the independent homepage and printable quotation untouched. */
@media screen {
  .shell, #dialog {
    --ink: #0b2518;
    --muted: #466252;
    --faint: #5d7163;
    --blue: #0d4a2e;
    --blue-hover: #0b2518;
    --blue-soft: #eaf4e2;
    --line: #d4e1d6;
    --control: #a4b9aa;
    --surface: #ffffff;
    --soft: #eff5ef;
    font-family: "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--ink);
  }
  .shell { background: #eff5ef; }
  .shell h1, .shell .panel-top h2,
  .shell .platform-hero h2, .shell .platform-hero h3,
  #dialog .dialog-head h2 { color: var(--ink); font-weight: 500; }
  .shell .overline, .shell .brand span,
  .shell .back, .shell .footline { color: var(--muted); }
  .shell .brand span { border-color: #bdcec0; }
  .shell .preview-badge { color: #466252; background: #ffffff9e; border-color: #c8d9cc; }
  .shell .overline::before { background: #99db31; }

  .shell .panel, .shell .summary {
    background: #ffffffeb;
    border-color: #d0dfd3;
    box-shadow: inset 0 1px 0 #ffffff;
  }
  .shell .choice, .shell .pack, .shell .service {
    background: #ffffff;
    border-color: #c2d4c7;
  }
  .shell .choice:hover, .shell .pack:hover {
    border-color: #5f856b;
    background: #f6faf2;
  }
  .shell .choice.selected, .shell .pack.selected {
    background: #eaf4e2;
    border-color: #0d4a2e;
    box-shadow: inset 0 1px 0 #ffffffb3;
  }
  .shell .choice.selected .choice-icon,
  .shell .choice.selected .choice-arrow,
  .shell .pack.selected .pack-selected { color: #0d4a2e; }
  .shell .pack strong, .shell .single-cost b,
  .shell .platform-feature h3, .shell .platform-feature h4,
  .shell .platform-feature strong { color: #0b2518; }
  .shell .pack-selected, .shell .single-cost,
  .shell .read-more, .shell .platform-feature { border-color: #dbe6dd; }
  .shell .segmented { background: #e7efe8; }
  .shell .segmented button { color: #466252; }
  .shell .segmented button.selected {
    color: #0b2518;
    background: #ffffff;
    border-color: #a8c0ae;
    box-shadow: inset 0 1px 0 #ffffff;
  }
  .shell .scope-switch { border-color: #cbdccf; }
  .shell .scope-switch button.selected,
  .shell .scope-switch button[aria-pressed="true"] {
    color: #0d4a2e;
    border-bottom-color: #0d4a2e;
    background: #eaf4e2;
  }
  .shell .scope-switch button:hover { background: #eaf4e2; }
  .shell .suggestion:not(.warn), .shell .extras {
    background: #f1f7ec;
    border-color: #d0dfc9;
  }
  .shell .suggestion:not(.warn) p, .shell .service-more p { color: #466252; }
  .shell .service-more p { background: #f1f7ec; }
  .shell .service-icon, .shell .fee-icon,
  .shell .choice-icon, .shell .platform-feature > svg { color: #3f6a4d; }
  .shell .mini-orb, .shell .success-mark {
    color: #0d4a2e;
    background: #eaf4e2;
    border-color: #bed4c2;
  }

  .shell .button.primary, #dialog .button.primary {
    color: #ffffff;
    background: #0d4a2e;
    box-shadow: inset 0 1px 0 #ffffff38;
  }
  .shell .button.primary:hover:not(:disabled), #dialog .button.primary:hover:not(:disabled) {
    background: #0b2518;
  }
  .shell .button.secondary, #dialog .button.secondary {
    color: #0d4a2e;
    background: #ffffff;
    border-color: #abc0b0;
    box-shadow: inset 0 1px 0 #ffffff;
  }
  .shell .button.secondary:hover:not(:disabled), #dialog .button.secondary:hover:not(:disabled) {
    background: #edf5e8;
    border-color: #698b73;
  }
  .shell .button:disabled, #dialog .button:disabled {
    color: #617066;
    background: #e4ece5;
    border-color: #d2ddd4;
    box-shadow: none;
  }
  .shell :is(button, a, summary):focus-visible,
  #dialog :is(button, a, summary):focus-visible { outline-color: #3c7b46; }
  .shell :is(input, select, textarea):focus,
  #dialog :is(input, select, textarea):focus { outline-color: #0d4a2e30; }
  .shell .stepper { background: #fcfefb; border-color: #a4b9aa; }
  .shell .stepper button:hover { background: #eaf4e2; }
  .shell .stepper button:active { background: #daeacb; }
  .shell .area-presets button { color: #0d4a2e; background: #ffffffa8; border-color: #bed0c2; }
  .shell .area-presets button:hover { background: #eaf4e2; }

  .shell .summary-top, #dialog .quote-total {
    color: #ffffff;
    background: #0b2518;
    border-color: #244c35;
    box-shadow: inset 0 1px 0 #ffffff26;
  }
  .shell .summary-top .total, .shell .summary-top h2,
  #dialog .quote-total strong { color: #ffffff; }
  .shell .summary-top .label, .shell .summary-top > p,
  #dialog .quote-total small { color: #d6e6d4; }
  .shell .credits-meter { border-color: #d4e1d6; }
  .shell .meter { background: #e0eadc; }
  .shell .meter i { background: #72b920; }
  .shell .progress b { border-color: #aec4b4; }
  .shell .progress .active { color: #0d4a2e; }
  .shell .progress .active b { color: #0b2518; background: #99db31; border-color: #0d4a2e; }
  .shell .progress i { background: #bed0c2; }
  .shell .mobile-budget { background: #f7faf6; border-color: #c4d7ca; box-shadow: 0 -5px 24px #0b251808; }

  .shell .platform-device { background: #e0e9e0; border-color: #b4cbb9; box-shadow: 18px 22px 42px #0b251812, inset 0 1px 0 #ffffff; }
  .shell .device-toolbar { background: #eaf4e2; color: #466252; border-color: #cfdfd1; }
  .shell .device-caption { background: #ffffff; color: #0b2518; border-color: #cfdfd1; }
  .shell .orbit-mark { background: #f7faf5; border-color: #c4d7ca; }
  .shell .answer-chip { background: #ffffffc7; color: #466252; border-color: #ccdccf; }

  #dialog { background: #fafcf8; border-color: #cfdfd1; box-shadow: 0 28px 100px #0b251833; }
  #dialog::backdrop { background: #0b25185c; }
  #dialog .dialog-head, #dialog .dialog-actions { background: #f5f8f5; border-color: #d4e1d6; }
  #dialog .close-dialog { color: #466252; background: #e6eee7; }
  #dialog .close-dialog:hover { background: #dce8dd; }
  #dialog .quote-row { color: #0b2518; border-color: #dce7df; }
  #dialog .quote-notes, #dialog .success-mark { background: #eaf4e2; color: #466252; border-color: #bed4c2; }
}
/* V1.4: the course homepage's forest ink, mint ground and calm controls continue
   into the existing guide. This screen-only layer changes no quote data or flow.
   Desktop planner: remaining editor + 24px + 336px summary; below 1080px it
   becomes one column. At 600px, each package owns a full readable row. */
@media screen {
  .shell, #dialog {
    --ink: #0b2518;
    --muted: #466252;
    --faint: #5d7163;
    --line: #d5e3da;
    --control: #9bb2a3;
    --surface: #ffffff;
    --soft: #f0f7f2;
    --selected: #edf7e6;
    --accent: #99db31;
    --radius-card: 22px;
    --radius-control: 12px;
    font-size: 14px;
    line-height: 1.7;
  }
  .shell { background: #eef6f1; }
  .shell .main, .shell .workspace, .shell .topbar { max-width: 1328px; }
  .shell h1 { font-weight: 500; letter-spacing: -.035em; }
  .shell .stage-content h1 { font-size: clamp(30px, 2.7vw, 38px); line-height: 1.4; }
  .shell .stage-content { animation: none; }
  .shell .lede { font-size: 15px; line-height: 1.9; }
  .shell .overline { font-size: 12px; letter-spacing: .08em; }
  .shell :is(.helper, .note, .choice p, .field label, .field > span,
    .name-field label, .scope-note, .platform-feature p, .platform-term,
    .service-foot, .workspace-intro p, .summary-fine, .waiver) {
    font-size: 13px;
    line-height: 1.85;
  }
  .shell :is(.panel, .summary) { background: var(--surface); border-color: var(--line); box-shadow: none; }
  .shell .panel { padding: 26px; margin-bottom: 24px; }
  .shell .panel-top { gap: 16px; margin-bottom: 24px; }
  .shell .panel-top h2 { font-size: 19px; font-weight: 500; line-height: 1.6; }
  .shell .workspace-intro h1 { font-size: 28px; line-height: 1.45; }
  .shell .workspace-intro p { margin-top: 8px; }
  .shell .button, #dialog .button {
    min-height: 48px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.6;
    gap: 10px;
    box-shadow: none;
  }
  .shell .button.primary, #dialog .button.primary { background: var(--blue); box-shadow: none; }
  .shell .button.secondary, #dialog .button.secondary { border-color: var(--control); box-shadow: none; }
  .shell .button:disabled, #dialog .button:disabled {
    color: #617066;
    background: #e4ece5;
    border-color: #d2ddd4;
    box-shadow: none;
  }
  .shell :is(button, a, summary):focus-visible,
  #dialog :is(button, a, summary):focus-visible {
    outline: 3px solid #286c3e;
    outline-offset: 3px;
  }
  .shell :is(input, select, textarea), #dialog :is(input, select, textarea) {
    scroll-margin-block: 24px 140px;
    font-variant-numeric: tabular-nums;
  }
  .shell .choice { border-width: 2px; padding: 20px 19px; border-radius: 16px; }
  .shell .choice.selected { padding: 20px 19px; background: var(--selected); box-shadow: none; }
  .shell .choice-radio { width: 22px; height: 22px; }
  .shell .selected .choice-radio { background: var(--accent); border-color: var(--blue); }
  .shell .selected .choice-radio::after { background: var(--blue); }
  .shell .scope-switch { border: 1px solid var(--line); border-radius: 16px; padding: 4px; background: #fff; gap: 4px; }
  .shell .scope-switch button { border-radius: 12px; border: 1px solid transparent; font-size: 14px; min-height: 52px; }
  .shell .scope-switch button.selected, .shell .scope-switch button[aria-pressed="true"] {
    border-color: #b6cea4;
    background: var(--selected);
    color: var(--ink);
  }
  .shell .segmented { background: #edf3ef; padding: 4px; gap: 4px; }
  .shell .segmented button { font-size: 13px; }
  .shell .segmented button.selected { border-color: #a6c194; background: var(--selected); box-shadow: none; }
  .shell .packs { gap: 12px; }
  .shell .pack { border-width: 2px; border-radius: 16px; padding: 20px 14px 16px; }
  .shell .pack.selected { padding: 20px 14px 16px; background: var(--selected); box-shadow: none; }
  .shell .pack > small { font-size: 13px; margin-bottom: 12px; color: var(--muted); }
  .shell .pack strong { font-size: 28px; letter-spacing: -.035em; }
  .shell .pack .pack-days { font-size: 12px; margin-top: 14px; }
  .shell .pack .pack-credits { font-size: 12px; margin-top: 5px; }
  .shell .pack-selected { font-size: 12px; padding-top: 12px; margin-top: 16px; }
  .shell .pack-selected svg { width: 16px; height: 16px; }
  .shell .pack.selected .pack-selected { font-weight: 500; }
  .shell .pack-note { font-size: 13px; line-height: 1.85; margin-top: 20px; }
  .shell .suggestion { padding: 18px; border-radius: 16px; margin-bottom: 24px; }
  .shell .suggestion b { font-size: 14px; }
  .shell .suggestion p { font-size: 13px; line-height: 1.85; }
  .shell .suggestion button { font-size: 13px; }
  .shell .service-tools { gap: 8px 16px; font-size: 12px; }
  .shell .service-tools button { font-size: 13px; }
  .shell .service { border-radius: 16px; border-color: var(--line); }
  .shell .service-heading { padding: 16px 18px 12px; }
  .shell .service-heading button { font-size: 16px; font-weight: 500; }
  .shell .service-heading p, .shell .service-more p { font-size: 13px; line-height: 1.8; }
  .shell .service-body { padding: 4px 18px 18px; }
  .shell .count-label, .shell .single-cost, .shell .photo-count,
  .shell .photo-count b, .shell .frequency { font-size: 13px; line-height: 1.8; }
  .shell .single-cost b { font-size: 13px; }
  .shell .stepper { min-height: 48px; border-radius: var(--radius-control); }
  .shell .stepper button { width: 48px; min-height: 46px; }
  .shell .stepper input { min-height: 46px; height: 46px; font-size: 18px; }
  .shell .photo-count input { min-height: 46px; height: 46px; font-size: 16px; border-radius: 10px; }
  .shell .service-foot { margin-top: 20px; }
  .shell .extras { padding: 18px; margin-top: 20px; border-radius: 16px; background: var(--soft); border-color: var(--line); }
  .shell .extra-line label { font-size: 14px; }
  .shell .extras p, .shell .extra-fields label { font-size: 13px; line-height: 1.85; }
  .shell .extra-fields :is(input, select) { font-size: 16px; min-height: 48px; }
  .shell .read-more { margin-top: 24px; font-size: 13px; }
  .shell .read-more summary { font-size: 14px; font-weight: 500; }
  .shell .summary-top, #dialog .quote-total {
    background: #e9f3ec;
    color: var(--ink);
    border-color: var(--line);
    box-shadow: none;
  }
  .shell .summary-top .total, .shell .summary-top h2,
  #dialog .quote-total strong { color: var(--ink); }
  .shell .summary-top .label, .shell .summary-top > p,
  #dialog .quote-total small { color: var(--muted); }
  .shell .summary-top .label { font-size: 12px; letter-spacing: .04em; }
  .shell .summary-top h2 { font-size: 16px; }
  .shell .total strong { font-size: 36px; }
  .shell .fact, .shell .fact b, #dialog .fact, #dialog .fact b { font-size: 13px; line-height: 1.85; }
  .shell .fact b, #dialog .fact b { flex-shrink: 0; max-width: 65%; overflow-wrap: anywhere; }
  .shell .budget-status { font-size: 13px; line-height: 1.85; }
  .shell .summary-copy { font-size: 13px; }
  .shell .meter { height: 6px; }
  .shell .meter i { transition: none; }
  .shell .platform-hero h2, .shell .platform-hero h3 { font-size: 28px; line-height: 1.5; letter-spacing: -.035em; }
  .shell .platform-selection { font-size: 13px; }
  .shell .platform-feature h3 { font-size: 15px; font-weight: 500; }
  .shell .platform-price strong, .shell .platform-price b { font-size: 36px; }
  .shell .platform-device { transform: none; box-shadow: none; }
  .shell .flight-line, .shell .scan-line { animation: none; }
  .shell .scan-line { display: none; }
  .shell .progress { gap: 16px; font-size: 12px; }
  .shell .progress b { width: 26px; height: 26px; font-size: 12px; }
  .shell .progress i { flex: 0 1 32px; }
  .shell .context-note, .shell .billing-intro, #dialog .fee-breakdown,
  .shell .fee-breakdown {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.85;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  .shell .context-note { padding: 16px 18px; margin-top: 20px; border-radius: 16px; background: var(--soft); }
  .shell .context-note strong, .shell .billing-intro strong, .shell .fee-breakdown strong,
  #dialog .fee-breakdown strong { color: var(--ink); font-weight: 500; }
  .shell .context-note p + p, .shell .billing-intro p + p { margin-top: 8px; }
  .shell .billing-intro { margin: -8px 0 20px; }
  .shell .fee-breakdown, #dialog .fee-breakdown { margin: 16px 0; }
  .shell .fee-breakdown p + p, #dialog .fee-breakdown p + p { margin-top: 8px; }
  .shell :is(p, .note, .helper), #dialog :is(p, .note, .consent span) { text-wrap: pretty; }
  .shell :is(h1, h2, h3, .button), #dialog :is(h2, h3, .button) { text-wrap: balance; }

  /* Native dialogs retain focus trapping. Only the content row scrolls, so the
     close button and final actions never sit on top of quote or contact fields. */
  #dialog {
    max-width: 720px;
    width: calc(100% - 40px);
    max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 24px;
    background: var(--surface);
    overflow: hidden;
  }
  #dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  #dialog .dialog-head, #dialog .dialog-actions {
    position: relative;
    inset: auto;
    background: var(--surface);
    border-color: var(--line);
    flex-shrink: 0;
  }
  #dialog .dialog-head { padding: 16px 24px; min-height: 76px; }
  #dialog .dialog-head h2 { font-size: 18px; font-weight: 500; line-height: 1.6; }
  #dialog > .dialog-body, #dialog > form {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 24px;
    scrollbar-gutter: stable;
  }
  #dialog .dialog-body { padding: 28px; }
  #dialog .dialog-body > p { font-size: 14px; line-height: 1.85; }
  #dialog .dialog-actions { padding: 16px 24px; gap: 12px; }
  #dialog .quote-total { padding: 24px; border-radius: 16px; }
  #dialog .quote-total strong { font-size: 36px; }
  #dialog .quote-row { font-size: 14px; gap: 16px; }
  #dialog .quote-row p, #dialog .quote-notes, #dialog .note,
  #dialog .consent, #dialog .dialog-body .field label { font-size: 13px; line-height: 1.85; }
  #dialog .quote-notes { background: var(--soft); border-radius: 16px; }
  #dialog .close-dialog { background: var(--soft); color: var(--muted); }
  #dialog .copy-text { min-height: min(320px, 48dvh); }
}
@media screen and (max-width: 1080px) {
  .shell .workspace-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .shell .summary { position: static; }
  .shell .panel { padding: 24px; }
  .shell .pack strong { font-size: 30px; }
}
@media screen and (max-width: 900px) {
  html:has(.mobile-budget) { scroll-padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  .shell .workspace { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  .shell .mobile-budget {
    min-height: 88px;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
    gap: 16px;
    background: #f8fcf9;
    border-color: var(--line);
  }
  .shell .mobile-budget > div { min-width: 0; }
  .shell .mobile-budget small { font-size: 12px; }
  .shell .mobile-budget strong { font-size: 23px; }
  .shell .mobile-budget .button { flex-shrink: 0; min-height: 48px; font-size: 14px; }
  #toast { bottom: calc(112px + env(safe-area-inset-bottom)); }
}
@media screen and (max-width: 600px) {
  .shell .topbar { padding: 20px; }
  .shell .main { padding: 4px 20px 24px; }
  .shell .stage-content { padding: 24px 0; }
  .shell .stage-content h1 { font-size: 30px; line-height: 1.45; letter-spacing: -.035em; }
  .shell .lede { font-size: 14px; margin-top: 18px; }
  .shell .choice strong { font-size: 16px; }
  .shell .choice { padding: 18px 14px; gap: 12px; }
  .shell .choice.selected { padding: 18px 14px; }
  .shell .field label, .shell .field > span { font-size: 13px; }
  .shell .workspace { padding: 20px 16px calc(140px + env(safe-area-inset-bottom)); }
  .shell .workspace-intro { padding: 0 4px; margin-bottom: 24px; }
  .shell .workspace-intro h1 { font-size: 24px; }
  .shell .panel { padding: 22px 16px; border-radius: 20px; margin-bottom: 20px; }
  .shell .panel-top { margin-bottom: 20px; gap: 16px; }
  .shell .panel-top h2 { font-size: 18px; }
  .shell .scope-switch { margin-bottom: 24px; }
  .shell .scope-switch button { min-height: 64px; padding: 10px 6px; gap: 6px; font-size: 13px; line-height: 1.7; }
  .shell .segmented button { font-size: 14px; }
  .shell .packs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .shell .pack, .shell .pack.selected {
    display: grid;
    grid-template-columns: minmax(112px, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    padding: 18px 16px;
    border-radius: 16px;
  }
  .shell .pack > small { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 500; }
  .shell .pack strong { grid-column: 1; grid-row: 2; font-size: 28px; letter-spacing: -.035em; }
  .shell .pack strong small { font-size: 16px; }
  .shell .price-full { display: inline; }
  .shell .price-compact { display: none; }
  .shell .pack .pack-days { grid-column: 2; grid-row: 2; margin: 0; font-size: 13px; line-height: 1.7; text-align: right; }
  .shell .pack .pack-credits { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.8; }
  .shell .pack-selected { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 12px; font-size: 13px; line-height: 1.8; }
  .shell .suggestion { padding: 16px; margin-bottom: 20px; }
  .shell .suggestion-top { gap: 6px 12px; }
  .shell .service-tools { font-size: 13px; }
  .shell .service-grid { gap: 16px; }
  .shell .service-heading { padding: 16px 16px 10px; }
  .shell .service-body { padding: 4px 16px 18px; }
  .shell .service.peek .service-more p, .shell .service.pinned .service-more p { padding: 14px 16px; }
  .shell .single-cost { flex-wrap: wrap; gap: 4px 12px; }
  .shell .photo-count input { max-width: 132px; }
  .shell .extras { padding: 16px; }
  .shell .summary { border-radius: 20px; }
  .shell .summary-top { padding: 24px 20px; }
  .shell .summary-body { padding: 24px 20px; }
  .shell .total strong { font-size: 36px; }
  .shell .fact, .shell .fact b { font-size: 13px; gap: 12px; }
  .shell .platform-hero h2, .shell .platform-hero h3 { font-size: 26px; }
  .shell .platform-feature h3 { font-size: 14px; }
  .shell .platform-feature p { font-size: 13px; }
  .shell .context-note { padding: 14px 16px; }
  .shell .billing-intro { margin: -4px 0 20px; }
  .shell .progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 20px 24px; }
  .shell .progress span { flex-direction: column; justify-content: center; gap: 8px; min-width: 0; white-space: normal; text-align: center; font-size: 12px; }
  .shell .progress i { display: none; }
  .shell .progress b { width: 26px; height: 26px; font-size: 12px; }
  .shell .mobile-budget { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
  .shell .mobile-budget strong { font-size: 21px; }
  .shell .mobile-budget .button { padding: 11px 16px; font-size: 13px; }
  #dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 20px; }
  #dialog .dialog-head { min-height: 72px; padding: 14px 16px; gap: 12px; }
  #dialog .dialog-head h2 { font-size: 16px; }
  #dialog .dialog-body { padding: 22px 18px; }
  #dialog .dialog-actions { padding: 14px 16px; gap: 10px; }
  #dialog .dialog-actions .button { flex: 1 1 100%; padding: 12px 16px; }
  #dialog .quote-total { padding: 20px; }
  #dialog .quote-total strong { font-size: 32px; }
  #dialog .quote-row { font-size: 13px; gap: 12px; }
  #dialog .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 370px) {
  .shell .topbar, .shell .main { padding-inline: 16px; }
  .shell .workspace { padding-inline: 12px; }
  .shell .panel { padding-inline: 14px; }
  .shell .pack, .shell .pack.selected { grid-template-columns: minmax(108px, 1fr) minmax(0, 1fr); padding: 16px 14px; }
  .shell .pack strong { font-size: 26px; }
  .shell .pack .pack-days { font-size: 12px; }
  .shell .mobile-budget { gap: 8px; padding-inline: 12px; }
  .shell .mobile-budget strong { font-size: 19px; }
  .shell .mobile-budget .button { padding-inline: 13px; }
}
@media screen and (max-height: 500px) {
  #dialog .dialog-head { min-height: 60px; padding-block: 8px; }
  #dialog .dialog-actions { padding-block: 10px; }
  #dialog .dialog-actions .button { flex-basis: auto; }
}
/* V1.5: introduce the inspection services first, explain fee components below
   them, then introduce the company. These selectors do not restyle the planner. */
@media screen {
  .shell .topbar-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
  .shell .topbar [data-action="home"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 6px; white-space: nowrap; }
  .shell:is(.stage-welcome, .stage-company) .onboard { grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr); gap: 64px; align-items: start; min-height: 620px; }
  .shell:is(.stage-welcome, .stage-company) .stage-content { padding-top: 24px; }
  .shell:is(.stage-welcome, .stage-company) .stage-content h1 { max-width: 20em; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.4; }
  .shell:is(.stage-welcome, .stage-company) .lede { max-width: 44em; }
  .shell:is(.stage-welcome, .stage-company) .companion { padding-top: 128px; padding-bottom: 32px; align-self: start; }
  .shell:is(.stage-welcome, .stage-company) .product-scene { min-height: 300px; }
  .shell:is(.stage-welcome, .stage-company) .platform-device { max-width: 370px; }
  .shell:is(.stage-welcome, .stage-company) .device-map,
  .shell:is(.stage-welcome, .stage-company) .map-course { min-height: 205px; }
  .shell:is(.stage-welcome, .stage-company) .product-orbit { width: 100%; height: 180px; }
  .shell:is(.stage-welcome, .stage-company) .scene-caption { max-width: 28em; font-size: 12px; }
  .shell:is(.stage-welcome, .stage-company) .actions { margin-top: 28px; gap: 12px 24px; }
  .shell .service-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
  .shell .service-intro { min-width: 0; border-radius: 16px; background: var(--surface); color: var(--ink); }
  .shell .service-intro > summary { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 18px 20px; cursor: pointer; list-style: none; border-radius: inherit; touch-action: manipulation; transition: background var(--motion-press); }
  .shell .service-intro > summary::-webkit-details-marker { display: none; }
  .shell .service-intro > summary::marker { content: ""; }
  .shell .service-intro > summary:hover { background: var(--selected); }
  .shell .service-intro > summary:active { background: var(--soft); }
  .shell .service-intro-icon { display: grid; place-items: center; flex: 0 0 26px; color: var(--blue); }
  .shell .service-intro-icon svg { width: 25px; height: 25px; }
  .shell .service-intro-title { display: block; flex: 1; min-width: 0; }
  .shell .service-intro-title strong { display: block; font-size: 16px; font-weight: 500; line-height: 1.6; }
  .shell .service-intro-title small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.8; color: var(--muted); text-wrap: pretty; }
  .shell .service-intro-toggle { display: grid; place-items: center; flex: 0 0 24px; color: var(--blue); transform: rotate(90deg); transition: transform var(--motion-press) var(--ease); }
  .shell .service-intro-toggle svg { width: 18px; height: 18px; }
  .shell .service-intro[open] { background: var(--surface); }
  .shell .service-intro[open] > summary { background: var(--selected); border-radius: 16px 16px 0 0; }
  .shell .service-intro[open] .service-intro-toggle { transform: rotate(-90deg); }
  .shell .service-intro-detail { padding: 16px 22px 22px 62px; }
  .shell .service-intro-detail p { max-width: 42em; color: var(--muted); font-size: 14px; line-height: 1.9; text-wrap: pretty; overflow-wrap: break-word; }
  .shell .fee-overview { margin-top: 36px; padding-top: 4px; }
  .shell .fee-overview .section-heading h2 { font-size: 21px; line-height: 1.5; font-weight: 500; letter-spacing: -.02em; }
  .shell .fee-overview .section-heading p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.85; }
  .shell .fee-overview .fee-cards { margin-top: 20px; border: 0; gap: 20px; }
  .shell .fee-overview .fee-card { padding: 0; border: 0; }
  .shell .fee-overview .fee-icon { margin-bottom: 10px; color: var(--muted); }
  .shell .fee-overview .fee-card h3 { font-size: 14px; line-height: 1.7; font-weight: 500; }
  .shell .fee-overview .fee-card p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.8; text-wrap: pretty; }
  .shell .fee-overview .fee-card small { font-size: 12px; white-space: nowrap; }
  .shell .fee-overview .fee-card .text-button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-top: 4px; padding-block: 8px; font-size: 12px; text-align: left; }
  .shell .company-story { margin-top: 28px; padding: 28px; border-radius: 22px; background: var(--surface); }
  .shell .company-kicker { display: block; margin-bottom: 14px; color: var(--blue); font-size: 13px; font-weight: 500; line-height: 1.7; }
  .shell .company-story h2 { max-width: 22em; font-size: 23px; font-weight: 500; line-height: 1.55; letter-spacing: -.025em; }
  .shell .company-story p { margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.9; text-wrap: pretty; }
  .shell .company-values { display: grid; gap: 22px; margin-top: 28px; }
  .shell .company-values article { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px; align-items: start; }
  .shell .company-values h3 { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.85; }
  .shell .company-values p { color: var(--muted); font-size: 14px; line-height: 1.9; text-wrap: pretty; }
  .shell .company-bridge { margin-top: 28px; color: var(--ink); font-size: 14px; line-height: 1.9; text-wrap: pretty; }
}
@media screen and (max-width: 1140px) {
  .shell:is(.stage-welcome, .stage-company) .onboard { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); gap: 36px; }
  .shell:is(.stage-welcome, .stage-company) .device-caption { padding-inline: 10px; gap: 8px; }
  .shell:is(.stage-welcome, .stage-company) .device-caption b { white-space: normal; }
}
@media screen and (max-width: 900px) {
  .shell:is(.stage-welcome, .stage-company) .onboard { min-height: 0; }
  .shell:is(.stage-welcome, .stage-company) .stage-content { max-width: 680px; padding-block: 24px 32px; }
  .shell:is(.stage-welcome, .stage-company) .companion { display: none; }
}
@media screen and (max-width: 600px) {
  .shell .topbar:has([data-action="home"]) { gap: 12px; }
  .shell .topbar:has([data-action="home"]) .brand span { display: none; }
  .shell .topbar-actions { gap: 12px; }
  .shell .topbar [data-action="home"] { padding-inline: 0; font-size: 12px; gap: 5px; }
  .shell:is(.stage-welcome, .stage-company) .stage-content { padding-top: 18px; }
  .shell:is(.stage-welcome, .stage-company) .stage-content h1 { font-size: 30px; line-height: 1.45; }
  .shell .service-overview { margin-top: 24px; gap: 10px; }
  .shell .service-intro > summary { min-height: 88px; padding: 17px 16px; gap: 12px; }
  .shell .service-intro-icon { flex-basis: 22px; }
  .shell .service-intro-icon svg { width: 22px; height: 22px; }
  .shell .service-intro-title small { font-size: 13px; }
  .shell .service-intro-toggle { flex-basis: 18px; }
  .shell .service-intro-detail { padding: 16px 18px 20px; }
  .shell .fee-overview { margin-top: 32px; }
  .shell .fee-overview .section-heading h2 { font-size: 20px; }
  .shell .fee-overview .fee-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
  .shell .fee-overview .fee-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 3px 12px; }
  .shell .fee-overview .fee-icon { grid-row: 1 / 3; height: auto; margin: 2px 0 0; }
  .shell .fee-overview .fee-icon svg { width: 21px; height: 21px; }
  .shell .fee-overview .fee-card h3 { font-size: 15px; }
  .shell .fee-overview .fee-card p { grid-column: 2; margin-top: 0; font-size: 13px; }
  .shell .fee-overview .fee-card .text-button { grid-column: 2; justify-self: start; margin-top: 2px; font-size: 13px; }
  .shell .company-story { margin-top: 24px; padding: 22px 20px; border-radius: 20px; }
  .shell .company-story h2 { font-size: 21px; }
  .shell .company-values { gap: 22px; margin-top: 24px; }
  .shell .company-values article { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .shell .company-values h3 { font-size: 15px; }
  .shell .company-bridge { margin-top: 24px; }
  .shell:is(.stage-welcome, .stage-company) .actions { margin-top: 28px; gap: 8px; }
  .shell:is(.stage-welcome, .stage-company) .actions > .text-button { width: 100%; text-align: center; }
  .shell .progress { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-inline: 20px; }
  .shell .progress span { font-size: 11px; gap: 7px; }
}
@media screen and (max-width: 370px) {
  .shell .topbar-actions { gap: 8px; }
  .shell .topbar:has([data-action="home"]) .preview-badge { padding-inline: 5px; font-size: 9px; }
  .shell .service-intro > summary { gap: 10px; padding-inline: 14px; }
  .shell .service-intro-title small { font-size: 12px; }
  .shell .progress { gap: 6px; padding-inline: 16px; }
  .shell .progress span { font-size: 11px; }
}
@media screen and (prefers-reduced-motion: reduce) {
  .shell .service-intro > summary, .shell .service-intro-toggle { transition: none; }
}
@media print {
  .topbar, .workspace, .main, .progress, .footline, #toast { display: none; }
  dialog[open] { position: static; width: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .dialog-head, .dialog-actions { display: none; }
  .dialog-body { padding: 0; }
  body { background: white; }
  .quote-total { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}


/* The quick calculator follows the original website. Screen overrides leave V7 print intact. */
@media screen {
  :root { background: #f5f7f4; }
  .quick-shell, #dialog.quick-dialog {
    --ink: #20382b; --muted: #53665a; --faint: #65776a;
    --blue: #286647; --blue-hover: #20382b; --blue-soft: #edf5e8;
    --line: #dce5de; --control: #c4d0c6; --surface: #fff;
    --soft: #f9fafb; --selected: #edf5e8; --accent: #2c7043;
  }
  .shell.quick-shell { background: #f5f7f4; color: var(--ink); }
  .quick-shell .topbar { padding-block: 24px; }
  .quick-shell .brand span { color: #3c5746; border-color: #d4dfd5; font-size: 14px; letter-spacing: .04em; }
  .quick-header-actions { display: flex; align-items: center; gap: 24px; }
  .quick-header-note { color: #c4d0c6; font-size: 12px; }
  .quick-site-link { color: #286647; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
  .quick-site-link:hover { color: #2c7043; }
  .quick-shell .workspace { padding-top: 16px; }
  .quick-shell .workspace-intro { margin-bottom: 24px; min-height: 0; }
  .quick-shell .workspace-intro h1 { color: #173c26; font-size: 28px; }
  .quick-shell .workspace-intro p { color: #52665a; font-size: 14px; }
  .quick-shell .workspace-intro h1::after { content: ''; display: block; width: 40px; height: 3px; margin-top: 16px; background: #2c7043; }
  .quick-shell .scope-switch { background: #fff; border-color: #dce5de; }
  .quick-shell .scope-switch button { color: #53665a; }
  .quick-shell .scope-switch button.selected, .quick-shell .scope-switch button[aria-pressed="true"] { color: #20382b; background: #edf5e8; border-color: #2c7043; }
  .quick-shell .scope-switch button:hover { background: #edf5e8; }
  .quick-shell .panel { color: #20382b; background: #fff; border-color: #dce5de; }
  .quick-shell .panel-top h2 { font-size: 18px; }
  .quick-shell .panel-top h2 span { color: #65776a; }
  .quick-shell .quick-profile .panel-top { margin-bottom: 18px; }
  .quick-name { display: block; margin-bottom: 22px; }
  .quick-name > span { display: block; margin-bottom: 8px; }
  .quick-name > span small { color: #65776a; font-size: 12px; font-weight: 400; margin-left: 5px; }
  .quick-name > input { width: 100%; }
  .quick-source { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .quick-source > span { font-size: 13px; font-weight: 500; }
  .quick-shell .segmented { background: #f3f4f6; }
  .quick-shell .segmented button { color: #53665a; }
  .quick-shell .segmented button.selected { background: #edf5e8; border-color: #2c7043; color: #20382b; }
  .quick-photo-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .quick-photo-inputs .field > span { display: block; margin-bottom: 8px; }
  .quick-photo-inputs .input-unit input { width: 100%; }
  .quick-shell .quick-preserve-note { font-size: 12px; color: #65776a; line-height: 1.85; margin-top: 14px; }
  .quick-shell .quick-profile .error:empty { display: none; }
  .quick-shell .pack { background: #fff; border-color: #c4d0c6; }
  .quick-shell .pack.selected { border-color: #2c7043; background: #edf5e8; }
  .quick-shell .pack.selected .pack-selected { color: #20382b; }
  .quick-shell .suggestion:not(.warn), .quick-shell .extras { background: #f9fafb; border-color: #dce5de; }
  .quick-shell .suggestion:not(.warn) p, .quick-shell .service-more p { color: #53665a; }
  .quick-shell .service { border-color: #dce5de; background: #fff; }
  .quick-shell .service-icon { color: #cbd1d7; }
  .quick-shell .service-more { background: #f9fafb; }
  .quick-shell .button.primary, #dialog.quick-dialog .button.primary, .quick-shell .retained-summary .button.primary { background: #2c7043; border-color: #2c7043; color: #fff; }
  .quick-shell .button.primary:hover:not(:disabled), #dialog.quick-dialog .button.primary:hover:not(:disabled), .quick-shell .retained-summary .button.primary:hover:not(:disabled) { background: #225a36; border-color: #225a36; color: #fff; }
  .quick-shell .button:disabled, #dialog.quick-dialog .button:disabled { background: #dce5de; border-color: #c4d0c6; color: #65776a; }
  .quick-shell .workspace-bottom { color: #c4d0c6; }
  .quick-shell .workspace-bottom button { color: #286647; min-height: 44px; }
  .quick-shell .mobile-budget { background: #fff; color: #20382b; border-color: #dce5de; }
  .quick-shell .quick-platform .platform-price { margin-top: 24px; color: #20382b; }
  #dialog.quick-dialog { color: #20382b; background: #fff; }
  #dialog.quick-dialog .dialog-head, #dialog.quick-dialog .dialog-actions { background: #fff; border-color: #dce5de; }
  #dialog.quick-dialog .dialog-head h2 { color: #20382b; }
}
@media screen and (max-width: 600px) {
  .quick-shell .topbar { gap: 12px; padding-block: 20px; }
  .quick-shell .brand { gap: 12px; }
  .quick-shell .brand img { width: 108px; }
  .quick-shell .brand span { padding-left: 12px; font-size: 12px; white-space: nowrap; }
  .quick-header-note { display: none; }
  .quick-header-actions { gap: 0; }
  .quick-shell .workspace-intro h1 { font-size: 25px; }
  .quick-shell .workspace-intro p { font-size: 13px; }
  .quick-source { display: block; }
  .quick-source > span { display: block; margin-bottom: 10px; }
  .quick-photo-inputs { grid-template-columns: minmax(0,1fr); gap: 14px; }
}

/* Quick editor: white surfaces with restrained forest-green emphasis.
   Tokens stay on the editor/scope switch; the retained summary and dialogs keep theirs. */
@media screen {
  .quick-shell .editor,
  .quick-shell .scope-switch {
    --ink: #20382b;
    --muted: #52645a;
    --faint: #65766d;
    --blue: #286647;
    --blue-hover: #174d31;
    --blue-soft: #eff6ee;
    --line: #dce4de;
    --control: #7c8c80;
    --surface: #ffffff;
    --soft: #f4f6f4;
    --selected: #edf5e8;
    --accent: #2c7043;
    --error: #ae3440;
    --amber: #805e2d;
    color: var(--ink);
  }
  .quick-shell .editor .panel {
    color: #20382b;
    background: #ffffff;
    border: 1px solid #dce4de;
    border-radius: 12px;
    box-shadow: none;
  }
  .quick-shell .editor :is(.panel-top h2, .quick-name > span, .quick-source > span, .field > label, .field > span, .service-heading button, .extra-line label, .platform-hero h2, .platform-hero h3, .platform-price, .platform-price strong, .platform-feature h3, .platform-feature h4, .platform-feature strong) { color: #20382b; }
  .quick-shell .editor :is(.panel-top h2 > span, .quick-name > span small, .quick-preserve-note, .helper, .note, .billing-intro, .pack-note, .service-tools, .service-heading p, .count-label, .frequency, .photo-count, .photo-count b, .service-foot, .extras p, .extra-fields label, .platform-term, .scope-note, .platform-feature p, .platform-feature, .input-unit > span, .input-unit > b) { color: #52645a; }

  .quick-shell .scope-switch {
    background: #ffffff;
    border: 1px solid #dce4de;
    border-radius: 10px;
    box-shadow: none;
  }
  .quick-shell .scope-switch button { color: #52645a; background: transparent; border-color: transparent; }
  .quick-shell .scope-switch button.selected,
  .quick-shell .scope-switch button[aria-pressed="true"] { color: #20382b; background: #eaf3e5; border-color: #5b8b61; box-shadow: none; }
  .quick-shell .scope-switch button:hover { color: #20382b; background: #eaf3e5; }
  .quick-shell .editor .segmented { background: #f5f7f5; border: 1px solid #dce4de; border-radius: 9px; box-shadow: none; }
  .quick-shell .editor .segmented button { color: #52645a; background: transparent; border-color: transparent; }
  .quick-shell .editor .segmented button.selected { color: #20382b; background: #eaf3e5; border-color: #5b8b61; box-shadow: none; }
  .quick-shell .editor .segmented button:hover { color: #20382b; background: #edf5e8; }

  .quick-shell .editor :is(input, select, textarea) { color: #20382b; background: #f5f7f5; border-color: #7c8c80; caret-color: #20382b; color-scheme: light; box-shadow: none; }
  .quick-shell .editor :is(input, textarea)::placeholder { color: #5e7165; opacity: 1; }
  .quick-shell .editor :is(input, select, textarea):focus { border-color: #2c7043; outline-color: #2c704326; box-shadow: none; }
  .quick-shell .editor select option { background: #f5f7f5; color: #20382b; }
  .quick-shell .editor :is(.field label, .field-label, .name-field label) { color: #52645a; }
  .quick-shell .editor .area-presets button { color: #3e704c; background: #f4f6f4; border-color: #7c8c80; }
  .quick-shell .editor .area-presets button:hover { color: #20382b; background: #e8eee8; }
  .quick-shell .editor :is(input, select, textarea):disabled,
  .quick-shell .editor input[readonly] { color: #62766a; background: #f1f4f1; border-color: #7c8c80; opacity: 1; }
  .quick-shell .editor input:-webkit-autofill { -webkit-text-fill-color: #20382b; -webkit-box-shadow: 0 0 0 1000px #f5f7f5 inset; caret-color: #20382b; }
  .quick-shell .editor input:is([type="checkbox"], [type="radio"]) { accent-color: #2c7043; }
  .quick-shell .editor :is(button, a, summary):focus-visible,
  .quick-shell .scope-switch button:focus-visible { outline-color: #2c7043; }

  .quick-shell .editor .pack,
  .quick-shell .editor .pack.selected {
    color: #20382b;
    background: #ffffff;
    border: 1px solid #7c8c80;
    border-radius: 10px;
    box-shadow: none;
  }
  .quick-shell .editor .pack:hover { background: #f2f6f2; border-color: #78917e; }
  .quick-shell .editor .pack.selected { background: #edf5e8; border-color: #2c7043; }
  .quick-shell .editor .pack :is(strong, strong small) { color: #20382b; }
  .quick-shell .editor .pack > small { color: #3f5d49; }
  .quick-shell .editor .pack :is(.pack-days, .pack-credits) { color: #52645a; }
  .quick-shell .editor .pack .pack-selected { color: #62766a; border-color: #dce4de; }
  .quick-shell .editor .pack.selected .pack-selected { color: #286647; }
  .quick-shell .editor .package-waiver-badge { color: #2b633d; background: #eaf3e5; border-color: #bfd0bc; box-shadow: none; }

  .quick-shell .editor .service { color: #20382b; background: #ffffff; border: 1px solid #dce4de; border-radius: 10px; box-shadow: none; }
  .quick-shell .editor :is(.service-icon, .fee-icon, .platform-feature > svg) { color: #487050; }
  .quick-shell .editor .platform-selection { color: #286647; }
  .quick-shell .editor .platform-selection p { color: #52645a; }
  .quick-shell .editor .info-dot { color: #52645a; border-color: #839688; }
  .quick-shell .editor .service-more,
  .quick-shell .editor .service-more p { color: #4e6b56; background: #f2f6f2; }
  .quick-shell .editor .single-cost { color: #52645a; border-color: #dce4de; }
  .quick-shell .editor .single-cost b { color: #20382b; }
  .quick-shell .editor .stepper { background: #f5f7f5; border-color: #7c8c80; border-radius: 9px; box-shadow: none; }
  .quick-shell .editor .stepper input { color: #20382b; background: #f5f7f5; border: 0; }
  .quick-shell .editor .stepper button { color: #3e704c; background: #edf2eb; }
  .quick-shell .editor .stepper button:hover { color: #20382b; background: #e8eee8; }
  .quick-shell .editor .stepper button:active { color: #174d31; background: #dce8d6; }
  .quick-shell .editor .stepper input:focus { box-shadow: inset 0 -2px #2c7043; }

  .quick-shell .editor .suggestion,
  .quick-shell .editor .suggestion:not(.warn),
  .quick-shell .editor .extras,
  .quick-shell .editor .context-note { color: #52645a; background: #f1f4f1; border-color: #dce4de; border-radius: 10px; box-shadow: none; }
  .quick-shell .editor .suggestion b { color: #23462f; }
  .quick-shell .editor .suggestion p,
  .quick-shell .editor .suggestion:not(.warn) p { color: #52645a; }
  .quick-shell .editor .suggestion.warn { background: #fbf7ed; border-color: #c8b481; }
  .quick-shell .editor .suggestion.warn b,
  .quick-shell .editor .suggestion.warn p { color: #765b27; }
  .quick-shell .editor :is(.suggestion button, .service-tools button, .text-button, .edit-link, .context-note summary) { color: #286647; }
  .quick-shell .editor .read-more { color: #52645a; border-color: #dce4de; }
  .quick-shell .editor .read-more summary { color: #355e40; }
  .quick-shell .editor .read-more p { color: #52645a; }
  .quick-shell .editor .button.secondary { color: #23462f; background: #f1f4f1; border-color: #9db39f; box-shadow: none; }
  .quick-shell .editor .button.secondary:hover:not(:disabled) { color: #20382b; background: #eaf1e6; border-color: #819d82; }
  .quick-shell .editor .button:disabled { color: #65766d; background: #f0f5eb; border-color: #7c8c80; box-shadow: none; opacity: 1; }
  .quick-shell .editor :is(.error, .field-error) { color: #ae3440; }
  .quick-shell .editor :is(input, select, textarea)[aria-invalid="true"] { color: #92313a; background: #fff1f1; border-color: #bc6470; }
  .quick-shell .editor .stepper input[aria-invalid="true"] { background: #fff1f1; box-shadow: inset 0 -2px #ae3440; }


  .quick-shell .editor .platform-service-description {
    max-width: 70ch; margin-top: 12px; color: var(--muted);
    font-size: 14px; line-height: 1.85; overflow-wrap: anywhere;
  }
  .quick-shell .editor .platform-service-scope {
    margin: 24px 0 12px; color: var(--ink);
    font-size: 14px; font-weight: 500; line-height: 1.8;
  }
  .quick-shell .editor dl.platform-service-inclusions {
    display: grid; grid-template-columns: minmax(0, 136px) minmax(0, 1fr);
    gap: 12px 20px; margin: 0; padding: 0;
  }
  .quick-shell .editor dl.platform-service-inclusions > div { display: contents; }
  .quick-shell .editor .platform-service-description + dl.platform-service-inclusions { margin-top: 20px; }
  .quick-shell .editor dl.platform-service-inclusions dt {
    margin: 0; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.85;
  }
  .quick-shell .editor dl.platform-service-inclusions dd {
    min-width: 0; margin: 0; color: var(--muted); font-size: 14px;
    line-height: 1.85; overflow-wrap: anywhere;
  }
  .quick-shell .editor :is(.platform-flight-note, .platform-service-exclusions) {
    margin-top: 14px; color: #52645a; font-size: 12px; line-height: 1.85;
    overflow-wrap: anywhere;
  }
  .quick-shell .editor details.platform-service-details {
    margin: 20px 0 0; padding: 10px 18px; color: var(--muted);
    background: #f2f6f2; border: 1px solid #dce4de; border-radius: 12px;
  }
  .quick-shell .editor details.platform-service-details > summary {
    min-height: 44px; padding-block: 10px; color: #28563a;
    font-size: 14px; font-weight: 500; line-height: 1.7; cursor: pointer;
  }
  .quick-shell .editor details.platform-service-details[open] { padding-bottom: 18px; }
  .quick-shell .editor details.platform-service-details .platform-service-scope { margin-top: 18px; }
}

@media screen and (max-width: 600px) {
  .quick-shell .editor dl.platform-service-inclusions { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .quick-shell .editor dl.platform-service-inclusions dt:not(:first-child),
  .quick-shell .editor dl.platform-service-inclusions > div + div > dt { margin-top: 12px; }
  .quick-shell .editor details.platform-service-details { padding-inline: 14px; }
}

/* The product and company marks stay paired without crowding phone controls. */
@media screen {
  .quick-shell .quick-company-brand { display:flex; align-items:center; gap:20px; }
  .quick-shell .quick-company-logo { width:112px; height:40px; object-fit:contain; flex-shrink:0; }
  .quick-shell .quick-header-note { display:block; color:#5a6d5f; line-height:1.65; white-space:nowrap; }
}
@media screen and (max-width:600px) {
  .quick-shell .topbar { align-items:center; }
  .quick-shell .brand span { display:none; }
  .quick-shell .quick-header-actions { gap:12px; }
  .quick-shell .quick-company-brand { flex-direction:column; align-items:flex-end; gap:5px; }
  .quick-shell .quick-company-logo { width:84px; height:30px; }
  .quick-shell .quick-header-note { font-size:10px; text-align:right; line-height:1.5; }
}


/* Light glass: screen-only surfaces around the unchanged quotation paper.
   Opaque control wells and solid fallbacks keep every number readable. */
@media screen {
  body:has(.quick-shell) { min-width: 0; background: #f5f7f4; color: #20382b; color-scheme: light; }
  .shell.quick-shell {
    isolation: isolate;
    background: #f5f7f4;
    background-image:
      radial-gradient(ellipse 780px 640px at 4% 3%, #d7e9c81f, transparent 75%),
      radial-gradient(ellipse 760px 800px at 96% 22%, #e2e9e226, transparent 75%);
  }
  .quick-shell::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: -190px; right: -270px; width: 1000px; height: 1000px;
    border-radius: 50%; opacity: .48;
    background: repeating-radial-gradient(ellipse at center,
      transparent 0 87px, #b7ccb01c 88px 89px, transparent 90px 135px);
    transform: rotate(-18deg) scaleX(1.25);
  }
  .quick-shell .topbar {
    width: calc(100% - 96px); max-width: 1232px;
    margin: 24px auto 28px; padding: 18px 24px;
    border: 1px solid #dbe4dd; border-radius: 20px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 #ffffff0c, 0 14px 44px #314d3610;
  }
  .quick-shell .brand img { width: 126px; height: 40px; }
  .quick-shell .brand span { color: #3c5746; font-size: 13px; }
  .quick-shell .quick-company-brand { gap: 22px; }
  .quick-shell .quick-company-logo { width: 116px; height: 40px; }
  .quick-shell .quick-header-note { color: #52665a; font-size: 11px; line-height: 1.8; }
  .quick-shell .quick-site-link {
    border: 1px solid #d7e1d9; border-radius: 10px;
    padding: 9px 13px; color: #28563a; text-decoration: none;
  }
  .quick-shell .workspace { padding-top: 4px; }
  .quick-shell .workspace-intro { margin-bottom: 28px; }
  .quick-shell .workspace-intro h1 { font-size: clamp(28px, 2.6vw, 34px); font-weight: 500; letter-spacing: -.025em; }
  .quick-shell .workspace-intro h1::after {
    width: 36px; height: 3px; border-radius: 2px;
    margin-top: 14px; background: #2c7043;
  }
  .quick-shell .workspace-intro p { color: #52665a; margin-top: 12px; }
  .quick-shell .scope-switch {
    padding: 5px; gap: 6px; border-color: #dbe4dd; border-radius: 16px;
    background: #ffffff; box-shadow: inset 0 1px 0 #ffffff08;
  }
  .quick-shell .scope-switch button {
    border: 1px solid transparent; border-radius: 11px; min-height: 50px;
    transition: background 160ms, border-color 160ms, box-shadow 160ms;
  }
  .quick-shell .scope-switch button.selected,
  .quick-shell .scope-switch button[aria-pressed="true"] {
    background: #edf5e8; border-color: #53845c; color: #234b30;
    box-shadow: inset 0 1px 0 #ffffffb3, 0 3px 12px #314d3608;
  }
  .quick-shell .scope-switch button:hover { background: #f0f5eb; }
  .quick-shell .editor .panel {
    padding: 28px; border-color: #dbe4dd; border-radius: 20px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 #ffffff0a, 0 14px 40px #314d3608;
  }
  .quick-shell .editor .panel-top { margin-bottom: 24px; }
  .quick-shell .editor .panel-top h2 { font-size: 18px; font-weight: 500; }
  .quick-shell .editor .panel-top h2 > span {
    width: 28px; height: 28px; align-items: center; margin-right: 10px;
    border: 1px solid #d8e3d9; border-radius: 8px;
    background: #edf4e9; color: #466d4c; font-size: 11px;
  }
  .quick-shell .quick-name > span,
  .quick-shell .quick-source > span { font-size: 13px; }
  .quick-shell .quick-name > span small {
    display: inline-block; padding: 1px 6px; border-radius: 5px;
    color: #62736a; background: #f2f5f1; font-size: 10px;
  }
  .quick-shell .editor :is(input, select, textarea) {
    background: #f5f7f5; border-color: #7c8c80; border-radius: 10px;
    box-shadow: inset 0 1px 3px #0000000a;
  }
  .quick-shell .editor :is(input, select, textarea):focus {
    border-color: #2c7043; outline: 3px solid #2c704326; box-shadow: none;
  }
  .quick-shell .editor .area-fields { max-width: none; grid-template-columns: minmax(0,1fr) 140px; }
  .quick-shell .editor .area-fields input { font-size: 26px; letter-spacing: -.02em; }
  .quick-shell .editor .segmented {
    padding: 4px; gap: 3px; border-color: #dce5de; border-radius: 12px;
    background: #f2f5f2;
  }
  .quick-shell .editor .segmented button { border-radius: 8px; }
  .quick-shell .editor .segmented button.selected {
    background: #e5efdf; border-color: #5d8b64; color: #173c26;
    box-shadow: inset 0 1px 0 #ffffffb3;
  }
  .quick-shell .editor .pack,
  .quick-shell .editor .pack.selected {
    padding: 20px 15px 15px; border-radius: 14px;
    background: #ffffff; border-color: #dce5de;
    transition: background 160ms, border-color 160ms, box-shadow 160ms, transform 160ms;
  }
  .quick-shell .editor .pack.selected {
    background: linear-gradient(145deg, #f1f7ec, #edf5e8);
    border-color: #2c7043; box-shadow: inset 0 0 0 1px #2c704312, 0 6px 22px #314d360a;
  }
  .quick-shell .editor .pack > small { font-size: 12px; }
  .quick-shell .editor .pack .pack-selected { border-color: #dde6df; }
  .quick-shell .editor .pack.selected .pack-selected { color: #286647; }
  .quick-shell .editor .service {
    border-radius: 14px; background: #ffffff; border-color: #dce5de;
  }
  .quick-shell .editor .service-icon {
    width: 34px; height: 34px; border: 1px solid #dce7d9;
    border-radius: 10px; background: #eef4e9; color: #3e704c;
  }
  .quick-shell .editor .stepper { overflow: hidden; border-color: #7c8c80; border-radius: 10px; }
  .quick-shell .editor .stepper :is(input, button) { border-radius: 0; }
  .quick-shell .editor .stepper button { background: #eaf0e8; }
  .quick-shell .editor .stepper input { background: #f5f7f5; }
  .quick-shell .editor :is(.suggestion, .extras, .context-note) {
    border-radius: 12px; background: #f2f6f2; border-color: #dde6df;
  }
  .quick-shell .editor .suggestion:not(.warn) { background: #f2f6f2; border-color: #dde6df; }
  .quick-shell .editor .suggestion.warn { background: #fbf7ed; border-color: #e5d7b8; }
  .quick-shell .editor :is(.quick-preserve-note, .pack-note, .service-foot, .read-more p) { color: #596d61; }
  .quick-shell .editor .context-note summary { color: #2b633d; }
  .quick-shell .editor .suggestion-top { align-items: center; gap: 12px; flex-wrap: wrap; }
  .quick-shell .editor .suggestion [data-action="reset-rec"] {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: auto; min-height: 44px; padding: 10px 15px;
    border: 1px solid #819b88; border-radius: 8px;
    background: #ffffff; color: #203e2b; font-size: 13px; font-weight: 500;
    line-height: 1.6; white-space: nowrap; text-decoration: none;
    box-shadow: inset 0 1px 0 #ffffff0a;
  }
  .quick-shell .editor .suggestion [data-action="reset-rec"]:hover:not(:disabled) {
    background: #edf4e9; border-color: #789c7e; color: #1f4c31; text-decoration: none;
  }
  .quick-shell .editor .suggestion [data-action="reset-rec"]:disabled {
    background: #eef1ed; border-color: #bdcdbd; color: #5d7064;
    box-shadow: none; opacity: 1; text-decoration: none;
  }
  /* The on-screen budget uses white and soft gray; the V7 document stays white. */
  .quick-shell .retained-summary {
    --ink: #203e2b; --muted: #566c5e; --deep: #203e2b;
    --green: #2d6b42; --amber: #805d2a; --line: #dce5de;
    background: transparent; color: var(--ink); color-scheme: light;
  }
  .quick-shell .retained-summary .summary-card {
    background: #ffffff; border-color: #d9e3da; border-radius: 18px;
    box-shadow: inset 0 1px 0 #ffffff0c, 0 18px 48px #314d3610;
  }
  .quick-shell .retained-summary .summary-heading > span { color: #405b48; }
  .quick-shell .retained-summary .payable { background: #f7faf5; }
  .quick-shell .retained-summary .payable > strong { color: #173c26; }
  .quick-shell .retained-summary .result-line b { color: #23462f; }
  .quick-shell .retained-summary .result-line.saving b { color: #2d6b42; }
  .quick-shell .retained-summary .credit-box {
    background: #f0f5eb; border: 1px solid #dde7d8; border-radius: 12px;
  }
  .quick-shell .retained-summary .credit-box > span,
  .quick-shell .retained-summary .credit-box small { color: #5c705f; }
  .quick-shell .retained-summary .credit-box > strong { color: #23462f; }
  .quick-shell .retained-summary :is(.estimate-summary, .waiver-box, .input-warning) {
    background: #faf7ef; border-color: #e5dcc4; color: #745b2d;
  }
  .quick-shell .retained-summary .waiver-box small,
  .quick-shell .retained-summary .coverage p { color: #756343; }
  .quick-shell .retained-summary .button.secondary {
    background: #f5f8f2; border-color: #adc1aa; color: #23462f;
  }
  .quick-shell .retained-summary .button.secondary:hover { background: #eaf1e4; border-color: #8ca784; }
  .quick-shell .retained-summary :is(.button, summary):focus-visible { outline-color: #2c7043; }
  .quick-shell .button.primary,
  .quick-shell .retained-summary .button.primary,
  #dialog.quick-dialog .button.primary {
    background: #2c7043; border-color: #2c7043; color: #ffffff;
    box-shadow: inset 0 1px 0 #ffffff14;
  }
  .quick-shell .button.primary:hover:not(:disabled),
  .quick-shell .retained-summary .button.primary:hover:not(:disabled),
  #dialog.quick-dialog .button.primary:hover:not(:disabled) { background: #225a36; border-color: #225a36; }
  .quick-shell .button.primary:disabled, #dialog.quick-dialog .button.primary:disabled {
    background: #e5ebe5; border-color: #c8d3c8; color: #627367; box-shadow: none;
  }
  .quick-shell .workspace-bottom { color: #62736a; }
  .quick-shell .mobile-budget {
    border-color: #d9e3da; background: #ffffff; color: #203e2b;
    box-shadow: 0 -8px 32px #314d3610;
  }
  .quick-shell .mobile-budget small { color: #566c5e; }
  .quick-shell .mobile-budget strong { color: #203e2b; }
  .quick-shell .mobile-budget .button { border-radius: 12px; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media screen {
    .quick-shell .topbar {
      background: linear-gradient(115deg, #e8f2df33, #ffffff00), #ffffffed;
      -webkit-backdrop-filter: blur(20px) saturate(100%);
      backdrop-filter: blur(20px) saturate(100%);
    }
    .quick-shell .scope-switch {
      background: #fffffff0;
      -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    }
    .quick-shell .editor .panel {
      background: linear-gradient(135deg, #ffffff00, #ffffff00), #ffffffed;
      -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    }
    .quick-shell .retained-summary .summary-card {
      background: linear-gradient(145deg, #ffffff00, #ffffff00), #fffffff5;
      -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    }
    .quick-shell .mobile-budget {
      background: #fffffff2;
      -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    }
  }
}
@media screen and (hover: hover) and (pointer: fine) {
  .quick-shell .editor .pack:hover { border-color: #8ea494; background-color: #f0f5eb; transform: translateY(-2px); }
  .quick-shell .editor .pack.selected:hover { border-color: #245f38; }
  .quick-shell .editor :is(input, select, textarea):hover:not(:focus) { border-color: #78917e; }
}
@media screen and (max-width: 1000px) {
  .quick-shell .topbar { width: calc(100% - 56px); }
}
@media screen and (max-width: 760px) {
  .quick-shell .editor .panel {
    background: linear-gradient(135deg, #ffffff00, #ffffff00), #ffffff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media screen and (max-width: 600px) {
  .quick-shell::before { right: -430px; top: -220px; opacity: .35; }
  .quick-shell .topbar { width: calc(100% - 32px); margin: 16px auto 24px; padding: 14px 16px; border-radius: 16px; }
  .quick-shell .brand img { width: 104px; height: 34px; }
  .quick-shell .quick-company-logo { width: 84px; height: 28px; }
  .quick-shell .quick-header-note { font-size: 10px; line-height: 1.6; }
  .quick-shell .quick-company-brand { gap: 5px; }
  .quick-shell .quick-header-actions { gap: 9px; }
  .quick-shell .quick-site-link { font-size: 11px; padding-inline: 8px; }
  .quick-shell .quick-header-actions:has(.quick-site-link) { flex-direction: column; align-items: flex-end; gap: 8px; }
  .quick-shell .workspace-intro { margin-bottom: 22px; }
  .quick-shell .workspace-intro h1 { font-size: 26px; }
  .quick-shell .workspace-intro p { font-size: 13px; line-height: 1.9; }
  .quick-shell .scope-switch { border-radius: 14px; }
  .quick-shell .scope-switch button { min-height: 52px; padding-inline: 6px; font-size: 12px; }
  .quick-shell .editor .panel { padding: 22px 18px; border-radius: 17px; }
  .quick-shell .editor .panel-top { margin-bottom: 22px; gap: 10px; }
  .quick-shell .editor .panel-top h2 { font-size: 17px; }
  .quick-shell .editor .panel-top h2 > span { width: 24px; height: 26px; margin-right: 7px; }
  .quick-shell .editor .area-fields { grid-template-columns: minmax(0,1fr) 104px; gap: 12px; }
  .quick-shell .editor .pack, .quick-shell .editor .pack.selected { padding: 17px 10px 12px; }
  .quick-shell .editor .pack > small { font-size: 11px; }
  .quick-shell .editor .pack strong { font-size: 24px; }
  .quick-shell .editor .pack .pack-days, .quick-shell .editor .pack .pack-credits { font-size: 11px; }
  .quick-shell .mobile-budget { padding-inline: 20px; }
}
@media screen and (max-width: 370px) {
  .quick-shell .editor .pack, .quick-shell .editor .pack.selected { padding-inline: 8px; }
  .quick-shell .editor .pack strong { font-size: 22px; }
  .quick-shell .quick-header-note { font-size: 9px; }
}
@media screen and (prefers-reduced-transparency: reduce) {
  .quick-shell .topbar, .quick-shell .scope-switch, .quick-shell .editor .panel { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .quick-shell .mobile-budget, .quick-shell .retained-summary .summary-card { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media screen and (forced-colors: active) {
  .quick-shell::before { display: none; }
  .quick-shell .topbar, .quick-shell .scope-switch, .quick-shell .editor .panel,
  .quick-shell .editor :is(.pack, .service, .segmented, input, select, textarea), .quick-shell .mobile-budget,
  .quick-shell .retained-summary .summary-card, .quick-shell .editor .suggestion [data-action="reset-rec"] {
    background: Canvas; color: CanvasText; border-color: ButtonText;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .quick-shell .editor .pack.selected, .quick-shell .scope-switch button.selected { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* Required course identity errors stay local to the name field. */
@media screen {
  .quick-shell .editor .quick-name > .name-error {
    margin: 8px 0 0; color: #ae3440; font-size: 12px;
    font-weight: 400; line-height: 1.8;
  }
  .quick-shell .editor .quick-name > .name-error:empty { display: none; }
}

/* Direct staff contact stays beside plan guidance in both service modes. */
@media screen {
  .quick-shell .quote-support {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px;
    margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #dce5de;
    font-style: normal;
  }
  .quick-shell .quote-support a {
    display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0;
    color: #174d31; text-decoration: none; border-radius: 4px;
  }
  .quick-shell .quote-support a span { color: #566c5e; font-size: 12px; flex: 0 0 auto; }
  .quick-shell .quote-support a strong {
    font-size: 13px; font-weight: 500; overflow-wrap: anywhere;
    text-decoration: underline; text-underline-offset: 4px;
  }
  .quick-shell .quote-support a:hover { color: #194e2d; }
  .quick-shell .quote-support a:focus-visible { outline: 2px solid #174d31; outline-offset: 4px; }
}
@media screen and (max-width: 680px) {
  .quick-shell .quote-support { grid-template-columns: minmax(0, 1fr); }
  .quick-shell .quote-support a span { min-width: 48px; }
}
@media screen and (forced-colors: active) {
  .quick-shell .quote-support { border-color: CanvasText; }
  .quick-shell .quote-support a, .quick-shell .quote-support a span { color: LinkText; }
  .quick-shell .quote-support a:focus-visible { outline-color: Highlight; }
}