/* Quiet, role-based colors layered over the existing layout. */
:root{
  --color-bg-main:#FAFAFA;
  --color-bg-warm:#F6F3ED;
  --color-bg-neutral:#F4F2EE;
  --color-bg-green:#EEF2EC;
  --color-text:#101010;
  --color-text-secondary:#6F6B64;
  --color-border:#DEDAD3;
  --color-cta:#101010;
  --color-cta-text:#FAFAFA;
  --color-line-green:#06C755;
  --edge-sand:var(--color-border);
  --edge-olive:var(--color-border);
  --stage-booking:#F2F2F0;
  --stage-visit:var(--color-bg-warm);
  --stage-revisit:var(--color-bg-green);
  --ink:var(--color-text);
  --muted:var(--color-text-secondary);
  --line:var(--color-border);
}

/* Keep the comparison table's row and category dividers visible on warm cells. */
.automation-comparison-table thead th {
  border-bottom:1px solid var(--color-border);
}
.automation-comparison-table tbody tr:not(:last-child)>td:last-child,
.automation-comparison-table tbody .automation-category {
  border-bottom:1px solid var(--color-border);
}

body,.site-header{background:var(--color-bg-main);color:var(--color-text)}
.site-footer .footer-bottom #clarity-settings{color:var(--muted)}
.hero h1{color:var(--color-text)}
.hero .body-copy,.hero-intro>p:first-child{color:var(--color-text-secondary)}
.header-cta,.button-dark,.mobile-bottom-cta a{background:var(--color-cta);color:var(--color-cta-text)}
.button-outline{border-color:var(--color-cta);color:var(--color-cta)}

/* Current challenges remain neutral rather than green. */
.concern-navigation{background:var(--color-bg-warm);border-color:var(--edge-sand);color:var(--color-text)}
.concern-label{background:var(--color-bg-neutral);color:var(--color-text-secondary)}
.concern-links a{background:var(--color-bg-main);border-color:var(--color-border);color:var(--color-text);box-shadow:0 3px 12px rgba(65,56,44,.045)}
.concern-icon,.concern-arrow{background:var(--color-bg-neutral);color:var(--color-text)}

/* A flat neutral / soft-green comparison reads instantly as before / after. */
.before-after-section{background:var(--color-bg-main)}
.before-panel{background:var(--color-bg-neutral);color:var(--color-text)}
.after-panel{border-color:var(--edge-olive);background:var(--color-bg-green);color:var(--color-text)}
.before-panel>header h3,.after-panel>header h3,.after-panel .before-after-points strong{color:var(--color-text)}
.before-panel>header p,.before-panel .before-after-points small,.after-panel>header p,.after-panel .before-after-points small{color:var(--color-text-secondary)}
.before-panel .before-after-icon{background:var(--color-bg-main);color:var(--color-text-secondary)}
.after-panel .before-after-icon{background:var(--color-bg-main);color:var(--color-text)}
.after-phone-check{background:var(--color-line-green);color:var(--color-text)}
.before-after-arrow{color:var(--color-text)}

/* Black text in both comparison cards; typography and icon colors stay unchanged. */
#before-after .before-after-panel,
#before-after .before-after-panel :is(h3,p,strong,small),
#before-after .before-after-phone,
#before-after .before-phone-unread,
#before-after .after-phone-outline{color:#101010}

/* The connection diagram sits on white; color only marks the improved state. */
#concept{background:var(--color-bg-main);--line:var(--color-border)}
.journey-stages li:nth-child(1){background:var(--color-bg-main);box-shadow:inset 0 0 0 1px var(--color-border)}
.journey-stages li:nth-child(2){background:var(--color-bg-main);box-shadow:inset 0 0 0 1px var(--color-border)}
.journey-stages li:nth-child(3){background:var(--color-bg-main);box-shadow:inset 0 0 0 1px var(--color-border)}
.journey-stages li .flow-icon{color:var(--color-text)}

/* Feature blocks keep their existing photos, mockups, and dimensions. */
.outcomes-duo>#experience{background:var(--stage-booking)}
.outcomes-duo>#follow{background:var(--stage-visit)}
.outcomes-duo{padding-bottom:12px}
.automation-section{background:var(--stage-revisit)}
.fit-section{background:var(--color-bg-main)}
.fit-section .scene-strip figure{background:var(--color-bg-main);border-color:var(--color-border);box-shadow:0 5px 18px rgba(72,75,59,.045)}
.fit-section .scene-strip figcaption strong{color:var(--color-text)}
.plans-section{background:var(--color-bg-main)}
.plan-comparison{border-color:var(--color-border)}
.plan-comparison tr>:first-child{background:var(--color-bg-main)}
.plan-comparison tr>:not(:first-child){background:var(--color-bg-main)}
.plan-comparison .comparison-price td,.plan-comparison .comparison-scope td{background:var(--color-bg-warm)}
.plan-comparison th,.plan-comparison td{border-color:var(--color-border)}
.comparison-price strong{color:var(--color-text)}
.comparison-actions .button-dark{background:var(--color-cta);color:var(--color-cta-text)}
.faq{position:relative;isolation:isolate;background:var(--color-bg-main);--line:var(--color-border)}
.faq::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--color-bg-main);box-shadow:0 0 0 100vmax var(--color-bg-main);clip-path:inset(0 -100vmax)}
.faq-list details{background:var(--color-bg-main);border-color:var(--color-border)}
.faq-plus::before,.faq-plus::after{background:var(--color-text)}
.support{position:relative;isolation:isolate;background:transparent;--line:var(--color-border)}
.support::before{content:"";position:absolute;z-index:-2;inset:0;background:var(--color-bg-main);box-shadow:0 0 0 100vmax var(--color-bg-main);clip-path:inset(0 -100vmax)}
.contact-section{position:relative;isolation:isolate;background:transparent}
.contact-section::before{content:"";position:absolute;z-index:-1;inset:0 clamp(8px,2vw,24px);border-radius:20px;background:var(--stage-booking)}
@media(max-width:650px){.contact-section::before{border-radius:13px}}
.inquiry-form input:not([type=checkbox]),.inquiry-form select,.inquiry-form textarea{background:var(--color-bg-main);border-color:#CFCAC2;color:var(--color-text)}
.inquiry-form .button{background:var(--color-cta);color:var(--color-cta-text)}

/* Keep the industry-to-pricing transition and the two-line photo caption compact. */
@media(min-width:1181px){
  .fit-section .section-space{padding-bottom:60px}
  .plans-section .section-space{padding-top:60px}
}
@media(min-width:768px){
  .hero-visual .photo-caption p{line-height:1.32}
}

@media(max-width:767px){
  :root{--stage-visit:var(--color-bg-warm);--stage-revisit:var(--color-bg-green)}
  .concern-navigation{background:var(--color-bg-warm)}
  .outcomes-duo{padding-bottom:10px}
  .fit-section{background:var(--color-bg-main)}
  .fit-section .scene-strip figure{background:var(--color-bg-main)}
  .plans-section{background:var(--color-bg-main)}
}

/* Typography roles; only text sizing changes, not section geometry. */
:root{--type-lead:18px;--type-body:16px;--type-card-title:16px;--type-compact:14px;--type-small:13px;--type-price:60px}
@media(max-width:1024px){:root{--type-lead:17px;--type-body:15px;--type-compact:14px;--type-price:48px}}
@media(max-width:650px){:root{--type-lead:16px;--type-body:15px;--type-card-title:15px;--type-compact:13px;--type-small:12px;--type-price:36px}}

body,.hero-kicker,.concern-intro,.journey-stages .desktop-step-copy,.features-intro,.feature-category li,.plan-operating-note{font-size:var(--type-body)}
.before-after-heading>p,.journey-intro{font-size:var(--type-lead)}
.photo-caption-detail,.support-life-photo figcaption strong{font-size:var(--type-body)}
.hero-benefits strong,.concern-copy strong,.before-after-points strong,.outcome-points strong,.scene-strip figcaption strong,.automation-flow-copy strong,#support .support-steps h3,.automation-comparison-disclosure>summary strong,.automation-comparison-heading,.full-features>summary{font-size:var(--type-card-title)}
.before-after-panel>header p,.before-after-points small,.outcomes-duo .outcome-summary,.automation-story>.body-copy,.outcomes-duo .outcome-points li>span,.scene-strip figcaption span,#support .support-steps li p,.comparison-shared td>span{font-size:var(--type-compact)}
.section-category,.concern-label,.concern-copy small,.automation-flow-copy small,.scene-strip figcaption small,.outcome-visual figcaption small,.inquiry-privacy,.automation-comparison-disclosure>summary small,.automation-comparison-table small,.automation-comparison-note{font-size:var(--type-small)}
.journey-stages .mobile-step-copy{font-size:var(--type-compact)}
.plan-comparison .comparison-price strong{font-size:var(--type-price)}
#support .support-title .body-copy,.plans-heading .body-copy{font-size:16px}
.faq-list summary{font-size:16px}
.faq-answer{font-size:15px}
#contact .contact-bottom>p{font-size:16px}
#contact .inquiry-fields label{font-size:14px}
#contact .inquiry-fields input,#contact .inquiry-fields select,#contact .inquiry-fields textarea{font-size:16px}

/* Three-level Japanese headline scale. Section labels are managed separately. */
.hero h1{font-size:64px;line-height:1.15;letter-spacing:-.02em}
.before-after-heading h2,#concept>.story-title,.automation-story h2,.fit-heading h2,.plans-section .plans-heading h2,#support .support-title h2{font-size:44px;line-height:1.25;letter-spacing:-.015em}
.concern-navigation h2,.booking-outcome .outcome-copy h2,.follow-outcome .outcome-copy h2,.faq-layout h2,#contact .contact-heading h2{font-size:36px;line-height:1.3;letter-spacing:-.01em}
.section-top .eyebrow,.story-eyebrow,.outcomes-duo .story-eyebrow,.before-after-heading>.eyebrow,.automation-story>.eyebrow,.contact-section .eyebrow,.photo-caption-label{font-size:12px;letter-spacing:.16em}

@media(max-width:1024px){
  #support .support-title .body-copy,.plans-heading .body-copy{font-size:15px}
  #contact .contact-bottom>p{font-size:15px}
  .hero h1{font-size:44px}
  .before-after-heading h2,#concept>.story-title,.automation-story h2,.fit-heading h2,.plans-section .plans-heading h2,#support .support-title h2{font-size:32px}
  .concern-navigation h2,.booking-outcome .outcome-copy h2,.follow-outcome .outcome-copy h2,.faq-layout h2,#contact .contact-heading h2{font-size:28px}
  .section-top .eyebrow,.story-eyebrow,.outcomes-duo .story-eyebrow,.before-after-heading>.eyebrow,.automation-story>.eyebrow,.contact-section .eyebrow,.photo-caption-label{font-size:11px}
}

@media(max-width:650px){
  .faq-list summary{font-size:15px}
  .hero h1{font-size:32px}
  .before-after-heading h2,#concept>.story-title,.automation-story h2,.fit-heading h2,.plans-section .plans-heading h2,#support .support-title h2{font-size:28px}
  .concern-navigation h2,.booking-outcome .outcome-copy h2,.follow-outcome .outcome-copy h2,.faq-layout h2,#contact .contact-heading h2{font-size:24px}
  .section-top .eyebrow,.story-eyebrow,.outcomes-duo .story-eyebrow,.before-after-heading>.eyebrow,.automation-story>.eyebrow,.contact-section .eyebrow,.photo-caption-label{font-size:10px}
}