/* Shared surface and motion values, based on better-ui. */
:root {
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-panel: 24px;
  --radius-capsule: 999px;
  --shadow-surface: 0 0 0 1px oklch(0 0 0 / .06), 0 1px 2px -1px oklch(0 0 0 / .06), 0 2px 4px 0 oklch(0 0 0 / .04);
  --shadow-surface-hover: 0 0 0 1px oklch(0 0 0 / .08), 0 1px 2px -1px oklch(0 0 0 / .08), 0 2px 4px 0 oklch(0 0 0 / .06);
  --shadow-floating: 0 0 0 1px oklch(0 0 0 / .06), 0 4px 8px -2px oklch(0 0 0 / .08), 0 12px 28px -8px oklch(0 0 0 / .16);
  --ui-duration: 150ms;
  --ui-swap-duration: 300ms;
  --ui-ease: cubic-bezier(.2, 0, 0, 1);
}
.ui-icon { display: inline-block; width: 1.2em; height: 1.2em; flex-shrink: 0; vertical-align: -.18em; }
.ui-icon * { vector-effect: non-scaling-stroke; }
.pill .ui-icon { stroke-width: 2.5; }
.pill:has(.ui-icon) { padding-inline-end: 14px; }
.menu .ui-icon, .close .ui-icon, #close-quote-expert .ui-icon, #close-sensei .ui-icon { width: 22px; height: 22px; }
.menu, .close, #close-quote-expert, #close-sensei { display: inline-grid; place-items: center; }
.menu { display: none; }
.package-card, .box { border: 1px solid transparent; box-shadow: var(--shadow-surface); border-radius: var(--radius-card); }
.quote-disclosure { border-radius: var(--radius-card); }
.workspace, .modal, .quote-expert-dialog { border-radius: var(--radius-panel); }
.box input, .box select, .location-input, .location-picker { border-radius: var(--radius-control); }
.primary, .outline, button.pill { border-radius: var(--radius-control); }
.package-filter, .floating-expert, .nav .pill { border-radius: var(--radius-capsule); }
.modal, .quote-expert-dialog, .floating-expert { box-shadow: var(--shadow-floating); }
.modal, .quote-expert-dialog, #sensei-dialog, .links.open { overscroll-behavior: contain; }
.campaign-photo, .house-scene > img, .modal-art > img { outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px; }
button, a.pill, .floating-expert {
  -webkit-tap-highlight-color: transparent;
  transition-property: background-color, color, opacity, box-shadow;
  transition-duration: var(--ui-duration);
  transition-timing-function: ease-out;
}
.package-filter { transition-duration: 100ms; }
.quote-disclosure > summary::after { display: none; }
.quote-disclosure > summary > .plus-icon { width: 20px; height: 20px; }
.quote-disclosure[open] > summary > .plus-icon { rotate: 45deg; }
.faq-column summary, .quote-row summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
.disclosure-icon { width: 16px; height: 16px; }
details[open] > summary > .disclosure-icon { rotate: 90deg; }
.motion-toggle { display: grid; place-items: center; }
.motion-toggle .ui-icon { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity var(--ui-swap-duration) var(--ui-ease); }
.motion-toggle .play-icon { opacity: 0; translate: 2px 0; }
.motion-toggle[aria-pressed="true"] .pause-icon { opacity: 0; }
.motion-toggle[aria-pressed="true"] .play-icon { opacity: 1; }
.quote-dialog-head { padding: 8px; }
.quote-dialog-head button { border-radius: 16px; }
@media (prefers-reduced-motion: no-preference) {
  button, a.pill, .floating-expert { transition-property: scale, background-color, color, opacity, box-shadow; }
  button:not(:disabled):not([aria-disabled="true"]):active,
  a.pill:not([aria-disabled="true"]):active,
  .floating-expert:active { scale: .96; }
  .plus-icon, .disclosure-icon { transition: rotate var(--ui-duration) var(--ui-ease); }
  .motion-toggle .ui-icon { transition-property: opacity, scale, filter; }
  .motion-toggle .play-icon, .motion-toggle[aria-pressed="true"] .pause-icon { scale: .25; filter: blur(4px); }
  .motion-toggle[aria-pressed="true"] .play-icon { scale: 1; filter: blur(0); }
}
@media (hover: hover) and (pointer: fine) {
  .primary:hover { background-color: #114c7c; }
  .outline:hover, .call:hover { background-color: #dcefee; }
  .line:hover { background-color: #076738; }
  .links a:hover, .arrow:hover, .package-bottom a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .package-card:hover { box-shadow: var(--shadow-surface-hover); }
  .floating-expert:hover { box-shadow: var(--shadow-floating); }
  @media (prefers-reduced-motion: no-preference) {
    .audience:hover, .package-card:hover { translate: 0 -2px; }
    .audience, .package-card { transition: translate var(--ui-duration) ease-out, box-shadow var(--ui-duration) ease-out; }
  }
}
@media(max-width:950px) { .menu { display: inline-grid; } }
@media (forced-colors: active) {
  .package-card, .box, .modal, .quote-expert-dialog, .floating-expert { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .plus-icon, .disclosure-icon { transition: none; }
  .motion-toggle .ui-icon { scale: 1; filter: none; transition: opacity 150ms var(--ui-ease) !important; }
  button, a.pill, .floating-expert { scale: 1; }
}
.modal, .quote-expert-dialog { border: 1px solid transparent; }
.model-view-controls button, .usage-options span { border-radius: var(--radius-control); }
.model-view-controls button, .tabs button, [data-demand] { transition: background-color 100ms ease-out, color 100ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .secondary:hover, .model-view-controls button:hover, [data-demand]:hover { background-color: #dcefee; }
  .text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* The illustration explains one checklist topic at a time; only user input marks completion. */
.quote-art { margin-top: 24px; padding: 22px 0; border-top: 1px solid #cbdfe3; }
.quote-art-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #4c6779; font-size: 13px; }
#quote-art-pause { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #cbdfe3; border-radius: 50%; background: white; color: #073668; }
.quote-art-content { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 24px; align-items: center; min-height: 160px; }
.quote-art-drawing { width: 110px; height: 110px; color: #087e80; }
.quote-art-scene[hidden], .quote-art [hidden] { display: none; }
.quote-art-content h4 { margin: 0 0 8px; color: #073668; font-size: 18px; font-weight: 600; }
.quote-art-content p { font-size: 14px; line-height: 1.8; color: #4c6779; margin: 0 0 8px; }
.quote-art-content small { color: #496b68; font-size: 12px; }
.quote-art-topics { display: flex; gap: 10px; margin-top: 12px; }
.quote-art-topic { width: 44px; height: 44px; border: 1px solid #cbdfe3; border-radius: 12px; background: white; color: #073668; font-weight: 600; }
.quote-art-topic[aria-pressed="true"] { background: #073668; color: white; border-color: #073668; }
@media (prefers-reduced-motion: no-preference) {
  .quote-art-scene:not([hidden]) { animation: checklist-draw 300ms ease-out; }
  @keyframes checklist-draw { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media(max-width:650px) {
  .quote-art { margin-top: 20px; padding-block: 16px; }
  .quote-art-content { grid-template-columns: 76px minmax(0,1fr); gap: 16px; min-height: 180px; }
  .quote-art-drawing { width: 76px; height: 90px; }
  .quote-art-content h4 { font-size: 16px; }
}