/* Appearly homepage: the palette and type exactly as start.mjs dealt them (white-mint-tiles; instrument-serif, the second pairing, because zilla failed hero-lines), then page CSS
   only inside visuals and for the React form, as references/system.md allows. Kit files live in /tk, unedited. */
:root {
  --p-bg: #ffffff; --p-surface: #f3f3f3; --p-ink: #232323; --p-muted: #686868;
  --p-accent: #a1ffcb; --p-accent-ink: #232323; --p-action: #232323; --p-action-ink: #ffffff;
  --p-inv-bg: #232323; --p-inv-surface: #303030; --p-inv-ink: #ffffff; --p-inv-muted: #a4a4a4;
  --p-inv-accent: #a1ffcb; --p-inv-accent-ink: #232323; --p-inv-action: #a1ffcb; --p-inv-action-ink: #232323;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-text: "Instrument Sans Variable", "Instrument Sans", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.012em;
  --display-tracking-xl: -0.016em;
  --ly-scale: 1.12;
}

/* the client's own mark beside the name */
.nav__logo .kit-mark { width: 22px; height: 22px; color: var(--ink); flex: none; }

/* nav-mega menu card: the real marks of the tools we connect, on the panel */
.menu-card__panel { display: grid; place-items: center; aspect-ratio: 16 / 10; }
.menu-icons { display: flex; gap: var(--s-4); align-items: center; }
.menu-icons img { height: 28px; width: auto; }

/* hero: one assistant window on the surface, the approval card at its lower left */
.hero-chat { display: flex; align-items: flex-start; justify-content: center; padding: var(--s-7) var(--s-7) 0; }
.hero-chat > .ui-chat { width: min(460px, 100%); }
.ui-brand { height: 10px; width: auto; }
@media (max-width: 639px) { .hero-chat { padding: var(--s-5) var(--s-5) 0; } .hero-chat .ui-chat__day { display: none; } }

#services .panel { --p-h: 280px; }
@media (max-width: 639px) { #services .panel { --p-h: 150px; } }
.faq-note { margin-top: var(--s-5); }

/* steps: drawn windows of each stage */
.step-ui { width: min(440px, 100%); margin: auto; }
.step-rows { list-style: none; margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); display: grid; gap: var(--s-2); }
.step-rows li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.step-rows li span { color: var(--muted); }
.step-rows li b { font-weight: 500; text-align: right; }
.step-text { margin: 0; padding: var(--s-3) var(--s-4) 0; font-size: 14px; }
.step-actions { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); }
.mo-pc__visual { display: grid; place-items: center; background: var(--surface); border-radius: var(--r-lg); padding: var(--s-6); }

/* migration band */
.migration-copy .btn-row { margin-top: var(--s-6); }
.migration-side { display: grid; gap: var(--s-5); align-content: start; }
.clinic-rows { margin: 0; }
.clinic-links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); }
.migration-visual { display: grid; place-items: center; background: var(--surface); border-radius: var(--r-lg); padding: var(--s-6); min-height: 300px; }
.map-ui { width: min(480px, 100%); }
.map-rows { list-style: none; margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); display: grid; }
.map-rows li { display: grid; grid-template-columns: 9.5rem 1.5rem 1fr; align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.map-from { color: var(--muted); }
.map-arrow { color: var(--muted); }
.map-to { font-weight: 500; }

/* contact: the React form uses the kit's field look; it is not .form, so system.js leaves its submit alone */
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--gutter); }
.contact-form .field--full { grid-column: 1 / -1; }
.contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form legend { padding: 0; margin-bottom: var(--s-2); }
.contact-form .quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
.contact-form .quote-option { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: var(--s-3); align-items: flex-start; border-bottom: 1px solid var(--line); padding: var(--s-2) 0; cursor: pointer; font-weight: 400; min-height: 44px; }
.contact-form .quote-option:has(input:checked) { border-color: var(--ink); }
.contact-form .quote-option input { accent-color: var(--ink); margin-top: 3px; width: 16px; height: 16px; flex: none; }
.contact-form .quote-option__name { display: block; font-weight: 500; font-size: 14px; }
.contact-form .quote-option__price { display: block; font-size: 13px; color: var(--muted); }
.hidden-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote-panel { margin-top: var(--s-7); padding: var(--s-6); background: var(--surface); border-radius: var(--r-lg); display: grid; gap: var(--s-3); }
.quote-panel__head { font: var(--display-weight) var(--t-h3)/1.25 var(--font-display); margin: 0; }
.sent-note { padding: var(--s-6); background: var(--surface); border-radius: var(--r-lg); }
@media (max-width: 639px) { .contact-form, .contact-form .quote-grid { grid-template-columns: minmax(0, 1fr); } .contact-form > * { grid-column: 1 / -1; } }

.footer__fine { flex-basis: 100%; max-width: 110ch; }
@media (min-width: 1024px) {
  .footer__col--two ul { columns: 2; column-gap: var(--s-5); }
  .footer__col--two li { break-inside: avoid; }
}
.contact-form textarea { min-height: 56px; }

.faq-visual { margin-bottom: var(--s-5); display: grid; place-items: center; background: var(--surface); border-radius: var(--r-lg); padding: var(--s-5); }
.access-ui, .price-ui { width: min(400px, 100%); }
#questions .faq-visual { margin: var(--s-5) 0 0; }
.migration-visual { background: var(--p-surface); }
@media (min-width: 1024px) { .migration-visual { min-height: 480px; } }
.access-ui .ui-head { gap: var(--s-2); }
@media (max-width: 639px) {
  .map-rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .map-arrow { display: none; }
  .map-ui .ui-head, .step-ui .ui-head { flex-wrap: wrap; }
  .map-ui .ui-meta { display: none; }
  .faq-visual { padding: var(--s-3); }
}

/* the app's shadcn tokens share three names with the kit (--muted, --accent, --card): on this page the kit's win */
:root:root { --muted: var(--p-muted); --accent: var(--p-accent); --accent-ink: var(--p-accent-ink); --card: var(--p-surface); }
@media (max-width: 639px) {
  .mo-pc__visual { padding: var(--s-4); }
  #questions .faq-visual { margin-top: var(--s-4); }
  .access-ui .step-rows li:nth-child(2) { display: none; }
}
.contact-form .quote-option { background: none; border-radius: 0; font-size: 14px; }
.tool-icons { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; list-style: none; padding: 0; margin: var(--s-5) 0 0; }
.tool-icons img { height: 28px; width: auto; display: block; }
/* a phone: a stacked section is at most 1.5 screens, or a full two (check.mjs frames the second screen) */
@media (max-width: 639px) {
  #how .mo-pc__step:nth-child(3) .mo-pc__visual { display: none; }
  .map-rows li:nth-child(2), .map-rows li:nth-child(4) { display: none; }
  .clinic-rows .rows__name { display: none; }
  .migration-visual { padding: var(--s-3); }
}