/* V4 — porcelain, deep ink, and a quiet petrol accent.
   This layer changes the palette; v3's composition and breakpoints stay intact. */
:root {
  color-scheme: light;
  --ink: #203531;
  --muted: #5f716b;
  --line: #d4ded7;
  --paper: #fafbf7;
  --accent: #245e54;
  --accent-dark: #174a41;
  --surface: #ffffff;
  --soft: #edf2eb;
}
::selection { background: #c6ddd2; color: #163c33; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: #397869;
}
.eyebrow { color: var(--muted); }
.site-header { color: var(--ink); }
.desktop-nav a { color: #4b6058; }
.desktop-nav a:hover { color: #163e33; }
.button-primary, .button-header, .button-dark {
  color: #fffefa;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 3px 9px #244d3710;
}
.button-primary:hover, .button-header:hover, .button-dark:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.button > span, .button-dark > span { background: #ffffff18; color: #fffefa; }
.button-outline { color: var(--ink); border-color: #a9bfb3; background: transparent; }
#mobile-nav { background: #fafcf7f5; color: var(--ink); border-color: #c6d6cd; box-shadow: 0 12px 25px #314f3612; }

/* Static lightfield artwork, rendered as translucent threads in daylight. */
.hero { background: #f5f7f2; color: var(--ink); }
#lightfield { opacity: .85; }
.hero:before {
  background:
    radial-gradient(ellipse at 77% 12%, #f1d6b738, transparent 57%),
    radial-gradient(ellipse at 22% 72%, #d6e8e252, transparent 50%),
    radial-gradient(ellipse at 50% 29%, #fafbf6d9, #fafbf625 57%),
    linear-gradient(#fafbf540, #fafbf500 63%, #f8faf5b3);
}
.hero-grain { opacity: .027; mix-blend-mode: multiply; }
.hero-copy > .eyebrow { color: #526c60; }
.hero-copy > .eyebrow i { background: #3c7b67; box-shadow: 0 0 12px #8eae8340; }
.hero h1 { color: #203831; }
.hero h1 > span { color: #53786b; }
.hero-bottom, .hero-bottom > a, .hero-bottom > button { color: #53695e; }

/* Each preview keeps its individual frame and its existing tilt. */
.preview-service, .preview-service + .preview-service {
  border-color: #bfcfc4;
  background: linear-gradient(145deg, #fffffff2, #f5f8f2f5);
  box-shadow: 0 15px 35px #355c3c0f, 0 2px 5px #355c3c08, inset 0 1px 0 #ffffff;
}
.preview-service:hover { border-color: #91ad9e; box-shadow: 0 20px 40px #355c3c17, inset 0 1px 0 white; }
.preview-conversation {
  background: linear-gradient(140deg, #fffffff7, #edf3edf5);
  border-color: #b2c8ba;
  box-shadow: 0 23px 55px #315c3f14, inset 0 1px 0 white;
}
.preview-service-label, .preview-service-label > .icon,
.preview-service-label > .baela-mark { color: #536c60; }
.preview-service-caption { color: #586d62; }
.preview-service-caption > button { color: var(--accent); }
.preview-service-caption > button:hover { color: #102e24; }
.preview-selector { border-color: #bccdc0; }
.preview-selector > button { color: #5b7065; }
.preview-selector > button[aria-pressed=true] { color: #244e40; border-color: #3d7260; }

/* Warm stone and ink give the miniature barbershop its own quiet identity. */
.barber-preview { background: #eeede7; color: #353b35; border-color: #cecec2; box-shadow: inset 0 1px 0 #ffffffa6; }
.barber-nav { background: #e8e7de; color: #3c453b; border-color: #cecec2; }
.barber-nav > span { color: #5c6657; }
.barber-intro > span { color: #353e34; }
.barber-intro small { color: #5d6659; }
.barber-intro > img { filter: saturate(.6) brightness(1.03); border-color: #c9c9bc; }
.barber-booking { background: #e2e3d9; border-color: #c9cdbf; color: #3a4436; }
.barber-booking small { color: #5d6658; }
.barber-book-link { background: #d4d9cb; color: #334332; border-color: #b7c0aa; }
.barber-preview:hover { border-color: #87997f; }
.barber-preview:hover .barber-book-link { background: #c7d2bc; color: #253e29; }
.owner-conversation { color: var(--ink); }
.owner-request { background: #e4ece2; border-color: #cad9cc; }
.owner-request > span { color: #4f6756; }
.owner-conversation:hover .owner-request { background: #dce8da; }
.baela-reply > .baela-mark { color: var(--accent); }
.baela-reply strong { color: #29473a; }
.baela-reply > span > span, .conversation-state { color: #566d60; }
.metrics-preview { color: #2d493b; }
.metrics-preview-top, .hero-sales small, .hero-mini-metrics small { color: #596e61; }
.hero-sales strong, .metrics-preview:hover .hero-sales strong { color: #234d3b; }
.metric-change { color: #36724e; }
.hero-sparkline { border-color: #cfdcd0; }
.hero-sparkline > i { background: linear-gradient(#8ba892, #b8cdb861); }
.hero-sparkline > i:nth-last-child(2) { background: linear-gradient(#39785d, #7fac8b); }
.hero-mini-metrics > span + span { border-color: #cdd9cc; }

/* Clearer type, soft surfaces, and color used only where it carries meaning. */
.operations-section { background: #fafbf7; }
.operations-intro h2 > span { color: #607b6f; }
.operations-intro > p, .example-label,
.demo-response p, .demo-task-note, .demo-actions > span, .workspace-foot,
.old-value, .change-heading > span, .change-column-labels, .workspace-label,
.workspace-top div > span, .hello-tag > span, .demo-request > .eyebrow { color: var(--muted); }
.task-tabs, .task-tab { border-color: var(--line); }
.task-tab, .task-tab > span, .task-tab > b { color: #66796c; }
.task-tab.active, .task-tab.active > span, .task-tab.active > b { color: var(--accent-dark); }
.workspace { border-color: #ccd9ce; background: white; box-shadow: 0 20px 55px #23482708; }
.workspace-top { background: #f0f4ec; border-color: var(--line); }
.business-mark { color: #46624e; background: #e0e8d9; }
.change-preview, .change-heading, .tool-icon, .workspace-foot { border-color: var(--line); }
.change-heading { background: #f5f7f1; }
.change-row { border-color: #edf1e8; }
.change-tool, .tool-icon { color: #5a7261; }
.new-value { color: #3e6349; background: #eaf1e4; }
.change-row.processing { background: #f0f6ec; }
.change-row.completed .new-value { color: #2d6040; background: #e1efdc; }
.workspace-foot > button { color: var(--accent); }
.metrics-toolbar label { color: var(--muted); }
.metrics-toolbar select { background: #f6f8f2; color: #405b48; border-color: #c6d7c8; }
.metrics-view-switch { border-color: var(--line); }
.metrics-view-switch button { color: #647869; }
.metrics-view-switch button[aria-pressed=true] { color: var(--accent-dark); border-color: var(--accent); }
.metric-card { background: #f8faf5; border-color: #d5dfd2; }
.metric-card[aria-pressed=true] { background: #eaf2e6; border-color: #8eae91; }
.metric-card:hover { border-color: #809f85; }
.metric-card > span, .metric-comparison, .metric-source { color: #506952; }
.metric-card > strong { color: #2b5138; }
.metrics-chart, .metrics-chart-detail { border-color: #dce5d7; }
.metrics-chart figcaption > strong { color: #3c5743; }
.metrics-chart figcaption > span, .chart-legend, .chart-day, .metrics-chart-detail { color: #657962; }
.chart-legend i { background: #4d8060; }
.chart-legend > span + span i { background: #d0dec9; }
.chart-current { background: #7a9c7b; }
.chart-before { background: #d7e3ce; }
.chart-day[aria-pressed=true] .chart-current, .chart-day:hover .chart-current { background: #30644a; }
.chart-day[aria-pressed=true] > span:last-child { color: #2c5940; }
.metric-observation { background: #eff5e9; }
.metric-observation > .baela-mark, .brief-heading > .baela-mark, .metrics-answer > .baela-mark { color: #5c8261; }
.metric-observation p, .metrics-data-note, .brief-heading p, .metrics-definition,
.metrics-question-intro, .metrics-answer small { color: #5e745e; }
.brief-heading, #weekly-brief-lines > li { border-color: #dce5d7; }
.brief-heading h3, #metrics-ask h3 { color: #37523d; }
#weekly-brief-lines > li { color: #52684f; }
.metrics-questions button { background: #f4f7ee; border-color: #cfdcc7; color: #56704f; }
.metrics-questions button[aria-pressed=true] { background: #e5efdc; border-color: #9eb58f; color: #365832; }
.metrics-answer { background: #f0f5e8; border-color: #d4e0c9; }
.metrics-answer p { color: #4d6646; }

/* A bright service constellation for larger screens. */
.connections-section { background: #eef3eb; color: var(--ink); }
.connections-heading > .eyebrow { color: #5e7564; }
.connections-heading h2 { color: #284133; }
.connections-heading h2 > span { color: #64806c; }
.connections-copy > p, .service-readout > p { color: #53684f; }
.service-readout > span { color: #56745b; }
.service-readout h3 { color: #304d38; }
.inline-cta { color: #2d6248; }
.service-map:before { background: radial-gradient(ellipse, #abc8a624, transparent 65%); }
.service-map:after { background-image: radial-gradient(#58755428 .8px, transparent .8px); }
.service-map > svg { stroke: #8da788a6; }
.map-center { background: radial-gradient(ellipse, #e3eddd 25%, #eef3eb 75%); color: #34523c; }
.map-center > .baela-mark { color: #3b6c4f; }
.map-center small { color: #4e694e; }
.service-point { background: #fbfdf8e6; border-color: #c4d5be; color: #4b684b; box-shadow: 0 10px 25px #32532707; }
.service-point > span, .service-point > .icon { color: #6a8164; }
.service-point:hover { border-color: #91ad87; }
.service-point.selected { background: #37644c; color: #fafdf5; border-color: #37644c; box-shadow: 0 8px 22px #315d3d16; }
.service-point.selected > span, .service-point.selected > .icon { color: #e1eddc; }
.connections-bottom { border-color: #ccd9c5; color: #61765c; }
.connections-bottom > span:last-child, .connection-sources > span:first-child { color: #53674f; }
.connection-sources { color: #405f46; }

/* The later chapters stay warm and open, without a dark closing block. */
.starting-section { background: #f7f7ef; }
.starting-top > .eyebrow, .path-story > span, .industry-line > span { color: #5c694f; }
.starting-top h2 { color: #354330; }
.starting-top h2 > span { color: #79846a; }
.path-selector, .path-choice + button, .industry-line { border-color: #d5dbca; }
.path-choice, .path-choice > span, .path-choice > b { color: #707e64; }
.path-choice.active, .path-choice.active > b { color: #385638; }
.path-choice.active { border-bottom-color: #436344; }
.path-story > p, .path-roadmap p, .industry-line > p { color: #65745a; }
.path-roadmap > li:before { background: #cad6bd; }
.path-roadmap > li > span { background: #f7f7ef; color: #657d57; border-color: #c6d2b9; }
.path-roadmap strong { color: #4c6342; }
.industry-line i { color: #9cae8b; }
.trust-symbol { border-color: #ccd9c1; color: #68835c; }
.trust-section h2 > span { color: #758769; }
.trust-section > p, .faq-list p { color: #62735b; }
.questions-section > .eyebrow { color: #65765e; }
.faq-list summary { color: #405437; }
.faq-list summary > .icon { color: #788f68; }
.closing-section { background: #eef2e8; color: #2e4735; }
.closing-section:before {
  background: radial-gradient(ellipse at 20% 100%, #d6e7d455, transparent 60%),
    radial-gradient(ellipse at 84% 115%, #eadab05c, transparent 64%);
}
.closing-section > .baela-mark { color: #4f7657; }
.closing-section > .eyebrow { color: #50664b; }
.closing-section h2 { color: #314d37; }
.site-footer, .site-footer button { color: #64785d; }
.site-footer > .brand { color: #345c3f; }

/* Forms use the same palette and retain all local-plan behavior. */
.dialog { border-color: #c6d5c9; background: #fbfcf7; color: var(--ink); box-shadow: 0 30px 100px #19362635; }
.dialog::backdrop { background: #20352b59; }
.dialog-close:hover { background: #e8efdf; }
.dialog-brand, .brand-mark, .result-label { color: #5a785e; }
.dialog h2 em { color: #6b8269; }
.dialog-description, .form-note, .forget-draft, .setup-steps p,
.result-note, .about-dialog > p { color: #61735b; }
.stage-options input { accent-color: var(--accent); }
.stage-options label > span { border-color: #cad9c4; }
.stage-options input:checked + span { background: #e9f0e1; border-color: #91ad87; color: #395831; }
.stage-options input:focus-visible + span { outline-color: #54804c; }
.form-fields input, .form-fields select, .form-fields textarea { background: white; color: var(--ink); border-color: #bdceb8; }
.form-fields input::placeholder, .form-fields textarea::placeholder { color: #6f7c68; }
.setup-steps li::marker { color: #5e7f51; }
.result-help { background: #edf2e4; }
.toast { background: #34563d; color: #fbfcf5; border-color: #69805b; box-shadow: 0 10px 30px #1e3d2d22; }
@media (max-width:800px) {
  .task-tab.active { border-bottom-color: var(--accent); }
}
@media (max-width:600px) {
  .path-choice { border-color: #d5dbca; }
  .path-choice.active { border-bottom-color: #436344; }
}

/* Give each service its own tap target on phones, followed by its details. */
@media (max-width:600px) {
  .connections-world { gap: 24px; }
  .connections-copy { display: contents; }
  .connections-copy > p { order: 0; }
  .service-map {
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    height: auto;
    max-width: none;
    margin: 0;
  }
  .service-map::before, .service-map::after, .service-map > svg { display: none; }
  .service-map .map-center {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 0 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid #ccd9c5;
    background: none;
    text-align: left;
  }
  .service-map .map-center > .baela-mark { width: 30px; height: 30px; }
  .service-map .map-center strong { font-size: 26px; margin: 0; letter-spacing: -1px; }
  .service-map .map-center small {
    max-width: 105px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: normal;
    text-align: right;
  }
  .service-map .service-point {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr 16px;
    align-content: start;
    align-items: center;
    gap: 10px 8px;
    min-width: 0;
    min-height: 98px;
    padding: 14px;
    border-radius: 10px;
    backdrop-filter: none;
    box-shadow: none;
    text-align: left;
    transform: none;
  }
  .service-map .service-point > span { grid-column: 1; grid-row: 1; font-size: 12px; }
  .service-map .service-point > .icon {
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: 15px;
    height: 15px;
  }
  .service-map .service-point strong {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 15px;
    font-weight: 450;
    line-height: 1.35;
    white-space: normal;
  }
  .service-readout {
    order: 2;
    width: 100%;
    min-height: 310px;
    margin: 0 0 28px;
    padding: 22px;
    border: 1px solid #ccd9c5;
    border-radius: 12px;
    background: #fbfdf8;
  }
  .service-readout > span { line-height: 1.6; }
  .service-readout h3 { font-size: 26px; margin-top: 12px; }
  .service-readout > p { margin-top: 12px; }
  .service-readout .inline-cta { min-height: 44px; margin-top: 12px; }
}