/* AlgoTailor light website theme. The separately styled private inbox is unchanged. */
:root {
  --bg: #fbfcfa;
  --surface: #ffffff;
  --ink: #20271f;
  --muted: #535e53;
  --line: #d6ddcf;
  --accent: #d9f58b;
  --dark: #17210d;
  --accent-ink: #3e5916;
  color-scheme: light;
}
body { background: var(--bg); color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: #587a24; }
.logo-lockup { background: transparent; padding-left: 0; }
.brand > span:not(.brand-mark) { color: var(--accent-ink); }
.brand-mark i, .brand-mark i::before { background: #72932f; }
.button { border-color: #78972f; color: var(--dark); }
.button:hover { background: #cdec77; border-color: #637f24; }
.button.secondary { background: #fff; color: var(--ink); border-color: #859477; }
.button.secondary:hover { background: #f0f5e9; }
.text-link { border-color: #708063; }
.text-link:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.tiny-cross, .hero h1 .serif, .contact h2 .serif { color: var(--accent-ink); }
.hero .eyebrow, .hero-note, .hero-footer, .hero-footer > span:nth-child(2),
.platform-inner > p, .platform-inner > p strong, .platform-inner small,
.service-footnote, .section-heading .eyebrow, .principle .eyebrow,
.faq .eyebrow, .contact .eyebrow, .footer-top > p, .footer-bottom,
.footer-bottom button { color: #56654c; }
.bracket { color: #77866b; }
.hero-art { background: radial-gradient(ellipse at 62% 53%, #c9e99540 0, transparent 64%); }
.scene-top, .scene-bottom, .motion-toggle { color: #56654c; }
.scene-top span:first-child::before { background: #5c7d29; }
.motion-toggle:hover, .hero-footer a:hover { color: #334e11; }
.art-orbit { border-color: #77935425; }
.code-label { color: #2e3d24; background: #ffffffed; border-color: #c6d2b9; box-shadow: 0 12px 32px #3a4e2312; }
.code-purple { color: #73488c; }
.code-green { color: #46651c; }
.code-comment { color: #586b48; }
.platform-strip { background: #f2f5ee; }
.platform-inner > div strong span { color: #56654c; }
.service-grid { background: #fff; box-shadow: 0 12px 40px #2b411206; }
.service-card:hover { background: #f5f9ef; }
.number, .step-no { color: #4e682d; }
.card-top svg { stroke: #4c662d; }
.service-card ul { color: #43513b; }
.service-card li::before { color: #57772b; }
.service-card .text-link, .principle .text-link, .contact-chat .text-link { color: var(--accent-ink); }
.principle::before { background: #edf3e6; border: 1px solid #dae4cf; }
/* The code sample keeps its deliberate dark editor surface for clear syntax contrast. */
.logic-panel { color: #f0f1e9; background: #172010; border-color: #34472a; box-shadow: 0 15px 35px #1d301014; }
.logic-panel .code-comment { color: #a7b796; }
.logic-panel .editor-bar, .logic-panel .editor-footer { color: #b2c2a2; }
.logic-panel .code-block em { color: #a0b18f; }
.logic-panel .editor-tag { color: #b2c2a2; }
.steps li { border-color: #a8ba95; }
.steps li::before { background: #607e30; }
summary > span { color: #4a6625; }
.contact { background: radial-gradient(ellipse at 0 40%, #d7ebbb22, transparent 70%); }
.chat-symbol { color: #42611e; background: #edf5df; border-color: #bacda0; }
.brief-form { background: #fff; border-color: #cbd7be; box-shadow: 0 20px 50px #253a1010; }
.form-heading, .form-heading span:last-child, label { color: #43533a; }
input, select, textarea { color: var(--ink); background: #fff; border-color: #819075; }
input::placeholder, textarea::placeholder { color: #637058; }
.form-disclosure { color: #415334; background: #edf4e2; border-left-color: #6a873d; }
.form-privacy, .chat-privacy-note { color: #59694d !important; }
#form-status, #copy-status, #chat-status, #email-direct { color: #365814; }
.footer-bottom { border-top-color: var(--line); }
.footer-bottom button:hover { color: var(--accent-ink); }
dialog { color: var(--ink); background: #fff; border-color: #a9ba98; box-shadow: 0 24px 90px #1a2c2040; }
dialog::backdrop { background: #1d291b80; }
dialog .eyebrow, dialog > p:not(.eyebrow) { color: #4d5f41; }
.dialog-close { color: #435a2e; }
.chat-connection { color: #4e682e; }
.visitor-message > p { color: var(--ink); background: #f0f5e9; border-color: #c2d1b1; }
.visitor-message.visitor > p { color: #1c290f; background: #d9f58b; border-color: #9fba65; }
.visitor-message > small { color: #526843; }
#visitor-reply-form { border-top-color: #c6d3ba; }
#chat-setup-notice { color: #40542f; background: #edf4e2; border-color: #b0c694; }
.no-js { color: #334928; background: #e7f0dc; }
#scene-fallback, #scene-fallback i { color: #4a6625; }
::selection { background: #d9f58b; color: #17210d; }
@media (max-width: 440px) {
  .logo-lockup { width: 162px; padding-left: 0; }
}

/* Crisp typographic identity for AlgoTailor. */
.logo-lockup { display: inline-flex; flex-direction: column; justify-content: center; padding: 5px 0; line-height: 1.1; }
.wordmark { color: #20271f; font-size: 31px; font-weight: 650; letter-spacing: -1.65px; white-space: nowrap; }
.wordmark > span:first-child { font-weight: 450; }
.wordmark-dot { color: #567923; }
.wordmark-caption { color: #536348; font: 12px var(--mono); letter-spacing: -.25px; margin-top: 6px; white-space: nowrap; }
.optional-label { font-weight: 400; color: #637058; }
@media (max-width: 800px) { .wordmark { font-size: 28px; } .wordmark-caption { display: none; } }
@media (max-width: 440px) { .wordmark { font-size: 27px; } }

/* Algorithm Atelier: a perspective scene with an accessible three-stage control. */
.algorithm-stage { min-width: 0; min-height: 500px; margin: -15px -22px 0 -16px; border-radius: 20px; background: radial-gradient(ellipse at 52% 36%, #ddf2b36b, transparent 62%); }
.algorithm-stage #chart-scene { inset: 30px 0 128px; height: calc(100% - 158px); cursor: crosshair; touch-action: pan-y; }
.algorithm-stage .scene-top { left: 26px; right: 26px; top: 8px; font-size: 12px; letter-spacing: .7px; }
.algorithm-stage .scene-top span:first-child::before { display: none; }
.scene-code { position: absolute; z-index: 2; top: 65px; right: 20px; padding: 13px 16px; background: #ffffffde; border: 1px solid #d3dec9; border-radius: 8px; font: 12px/1.7 var(--mono); color: #36462c; box-shadow: 0 8px 32px #1a351009; pointer-events: none; }
.scene-controls { position: absolute; z-index: 3; bottom: 0; left: 20px; right: 20px; }
.scene-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 5px; background: #f1f5eccc; border: 1px solid #d4dfc9; border-radius: 10px; }
.scene-steps button { color: #435438; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 12px 4px; min-height: 46px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.scene-steps button > span { font: 11px var(--mono); margin-right: 5px; color: #5d704e; }
.scene-steps button[aria-pressed="true"] { color: #202c16; background: #d9f58b; border-color: #a9c775; box-shadow: 0 2px 8px #3343190c; }
.scene-caption-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 3px 0; }
.scene-caption-row p { margin: 0; font-size: 13px; line-height: 1.4; color: #506044; max-width: 250px; }
.scene-caption-row .motion-toggle { min-height: 44px; padding: 8px 2px; white-space: nowrap; font: 12px var(--mono); }
.scene-hint { font-size: 12px; line-height: 1.5; color: #617056; margin: 2px 3px 0; }
.algorithm-stage #scene-fallback { position: absolute; inset: 80px 22px 140px; font: 36px/1.2 var(--sans); color: #334b1d; padding: 20px; z-index: 2; }
.algorithm-stage #scene-fallback strong { font-weight: 500; }
@media (max-width: 1100px) { .algorithm-stage { margin-left: 0; margin-right: 0; } .scene-code { right: 8px; font-size: 11px; } .scene-steps button { font-size: 12px; } .scene-steps button > span { display: none; } }
@media (max-width: 800px) { .algorithm-stage { min-height: 500px; margin: 35px auto 0; width: min(580px,100%); } .scene-steps button { font-size: 14px; } .scene-steps button > span { display: inline; } }
@media (max-width: 440px) { .algorithm-stage { min-height: 440px; margin-top: 25px; } .algorithm-stage .scene-top { left: 6px; right: 6px; font-size: 11px; letter-spacing: .2px; } .scene-code { top: 48px; right: 0; padding: 9px 10px; font-size: 10px; } .scene-controls { left: 0; right: 0; } .scene-steps button { font-size: 12px; } .scene-steps button > span { display: none; } .scene-caption-row p { font-size: 12px; max-width: 190px; } .scene-hint { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .scene-steps button { transition: none; } }

.logo-lockup { width: 245px; padding: 0; line-height: 0; }
.logo-lockup img { display: block; width: 100%; height: auto; }
@media (max-width: 800px) { .logo-lockup { width: 210px; } }
@media (max-width: 440px) { .logo-lockup { width: 177px; } }

.scene-steps button { font-size: 14px; }
@media (max-width: 440px) { .scene-steps button { font-size: 13px; } }

/* Business-facing clarity, resilient reflow and accessible small-screen navigation. */
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
.header { flex-wrap: wrap; }
.mobile-nav { display: none; }
.header .desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.hero, .section-heading, .contact, .principle, .faq, .platform-inner { min-width: 0; }
.hero > *, .contact > *, .principle > *, .faq > *, .form-row > * { min-width: 0; }
h1, h2, h3, .brand { overflow-wrap: anywhere; }
.hero h1 { font-size: clamp(2.625rem, 5.9vw, 5.55rem); letter-spacing: -.05em; }
.hero-description, .contact-copy > p { font-size: 1.125rem; }
.hero-actions { flex-wrap: wrap; }
.hero-note { flex-wrap: wrap; font-size: .8125rem; }
.hero-note > span:nth-child(2) { overflow-wrap: anywhere; }
.examples { padding-top: 40px; }
.example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; margin-top: 45px; }
.example-grid article { border-top: 2px solid #a7be7e; padding-top: 24px; min-width: 0; }
.example-platform { font: .75rem/1.5 var(--mono); color: #536547; margin-bottom: 16px; }
.example-grid h3 { font-size: 1.25rem; line-height: 1.4; margin-bottom: 16px; }
.example-grid article > p:not(.example-platform) { color: #535e53; font-size: 1rem; line-height: 1.75; }
.example-grid .example-delivery { margin-top: 18px; padding-top: 18px; border-top: 1px solid #d6ddcf; }
.delivery { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; padding-top: 40px; padding-bottom: 110px; }
.delivery h2 { margin-top: 18px; }
.delivery-grid { display: grid; gap: 26px; }
.delivery-grid article { padding-bottom: 24px; border-bottom: 1px solid #d6ddcf; }
.delivery-grid h3 { font-size: 1.125rem; margin-bottom: 9px; }
.delivery-grid p { color: #535e53; font-size: 1rem; line-height: 1.75; }
.service-card { display: flex; flex-direction: column; min-width: 0; }
.service-card p { min-height: 0; }
.service-card .service-select { margin-top: auto; padding-top: 14px; min-height: 44px; }
.service-card ul { margin-bottom: 22px; }
.form-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
label { font-size: .875rem; }
input, select, textarea { font-size: 1rem; min-height: 48px; }
textarea { min-height: 128px; }
.form-heading, .form-disclosure, .form-privacy { font-size: .875rem; }
.form-heading, .footer-top, .footer-bottom { flex-wrap: wrap; }
.form-heading span:last-child { display: none; }
.form-disclosure { line-height: 1.6; }
.form-submit, .dialog-actions .button { min-height: 48px; white-space: normal; }
.dialog-close { min-width: 44px; min-height: 44px; }
dialog { width: min(600px,calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.dialog-actions { flex-wrap: wrap; }
#brief-output { min-height: 240px; }
.scene-steps button { white-space: normal; min-height: 48px; font-size: .875rem; }
.scene-steps button > span { display: none; }
.scene-caption-row { flex-wrap: wrap; }
.scene-caption-row p { max-width: none; flex: 1 1 140px; font-size: .8125rem; }
.scene-caption-row .motion-toggle { font-size: .75rem; }
.scene-hint { font-size: .75rem; }
.algorithm-stage { min-height: 31.25rem; }
.algorithm-stage #chart-scene { height: calc(100% - 11rem); bottom: 9rem; }
.scene-controls { bottom: 8px; }
.code-block { max-width: 100%; }
.footer-bottom button { min-height: 44px; }
@media (max-width: 900px) {
 .header { gap: 16px; }
 .example-grid { gap: 22px; }
 .delivery { gap: 40px; }
}
@media (max-width: 720px) {
 .header { padding: 14px 20px; justify-content: space-between; }
 .header .desktop-nav, .header-cta { display: none; }
 .header .logo-lockup { width: min(210px,65%); }
 .mobile-nav { display: block; position: relative; margin: 0; border: 0; z-index: 20; }
 .mobile-nav summary { display: flex; align-items: center; justify-content: center; padding: 10px 14px; min-width: 64px; min-height: 44px; border: 1px solid #a9b69d; border-radius: 6px; color: #283621; font-size: .875rem; cursor: pointer; }
 .mobile-nav summary::marker, .mobile-nav summary::-webkit-details-marker { display: none; content: ''; }
 .mobile-nav[open] summary { background: #e8f3d6; }
 .header .mobile-nav nav { display: flex; position: absolute; top: calc(100% + 8px); right: 0; width: min(16rem,calc(100vw - 40px)); flex-direction: column; gap: 0; padding: 8px; border: 1px solid #c5d2b7; border-radius: 8px; background: #fff; box-shadow: 0 14px 35px #283d1d20; }
 .mobile-nav nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; font-size: 1rem; color: #33452b; }
 .mobile-nav nav a:hover { background: #edf4e4; }
 .section-shell { padding-left: 20px; padding-right: 20px; }
 .hero { padding-top: 35px; }
 .hero h1 { font-size: clamp(2.625rem,10.8vw,4.5rem); }
 .hero-description { font-size: 1rem; }
 .hero-actions { align-items: stretch; gap: 16px; }
 .hero-actions .button, .hero-actions .text-link { min-height: 48px; display: inline-flex; align-items: center; font-size: .875rem; }
 .example-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
 .examples { padding-top: 26px; }
 .delivery { grid-template-columns: 1fr; gap: 28px; padding-top: 10px; padding-bottom: 70px; }
 .form-row { grid-template-columns: 1fr; gap: 0; }
 .brief-form { padding: 22px; }
 .scene-top > span:last-child { display: none; }
 .algorithm-stage { margin-top: 25px; min-height: 28rem; }
 .algorithm-stage .scene-top { font-size: .75rem; left: 0; right: 0; }
 .scene-code { font-size: .625rem; }
 .scene-controls { left: 0; right: 0; }
 .scene-hint { line-height: 1.5; }
 .platform-inner { grid-template-columns: 1fr; gap: 22px; }
 .platform-inner > p { grid-column: auto; }
 .platform-inner > div { align-items: flex-start; flex-direction: row; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid #d6ddcf; padding-bottom: 18px; }
 .platform-inner > div:last-child { border-bottom: 0; padding-bottom: 0; }
 .platform-inner > div strong { font-size: 1.125rem; }
 .platform-inner small { font-size: .8125rem; align-self: center; }
 .footer-top { gap: 20px; }
 .footer-top > p { font-size: .75rem; }
}
@media (max-width: 380px) {
 .section-shell { padding-left: 16px; padding-right: 16px; }
 .header { padding-left: 16px; padding-right: 16px; }
 .hero-actions { flex-direction: column; align-items: flex-start; }
 .hero h1 { font-size: 2.625rem; }
 .brief-form { padding: 18px; }
 .scene-caption-row { gap: 0; }
 .scene-steps { gap: 3px; padding: 4px; }
 .scene-steps button { font-size: .8125rem; }
}

.profile-proof { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: 30px; padding-bottom: 60px; }
.profile-proof > div { max-width: 660px; }
.profile-proof h2 { font-size: clamp(1.5rem,2.5vw,2rem); letter-spacing: -.035em; line-height: 1.25; margin: 13px 0; }
.profile-proof > div > p:last-child { font-size: 1rem; color: #535e53; line-height: 1.65; }
.profile-proof .button { flex-shrink: 0; white-space: normal; }
@media (max-width: 720px) { .profile-proof { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 0; padding-bottom: 45px; } }

/* Hero title scale retained from the previous responsive refinement. */
.hero h1 { font-size: clamp(2.625rem,5.2vw,4.8rem); }

/* Contact channels: explicit no-fill SVGs and independent recognizable accents. */
.contact-whatsapp, .contact-email { display: flex; align-items: center; gap: 15px; padding: 20px 0; border-top: 1px solid #d6ddcf; }
.contact-whatsapp { margin-top: 25px; }
.contact-whatsapp > div, .contact-email > div { min-width: 0; }
.contact-icon { display: block; width: 44px; height: 44px; flex: 0 0 44px; padding: 9px; fill: none; stroke: currentColor; stroke-width: 1.7; border: 1px solid; border-radius: 11px; transition: color .18s ease, background-color .18s ease; }
.contact-whatsapp > svg { color: #128c4a; background: #eaf8ee; border-color: #c5e4ce; }
.contact-email > svg { color: #2463c9; background: #edf4ff; border-color: #ceddf5; }
.contact-whatsapp:hover > svg, .contact-whatsapp:focus-within > svg { color: #0b6a38; background: #ddf2e4; }
.contact-email:hover > svg, .contact-email:focus-within > svg { color: #174da8; background: #e3edfc; }
.contact-whatsapp a, .contact-email a { color: #283621; font-size: .875rem; overflow-wrap: anywhere; min-height: 44px; align-items: center; }
.contact-whatsapp a:hover { color: #0b6a38; border-color: #0b6a38; }
.contact-email a:hover { color: #174da8; border-color: #174da8; }
.contact-whatsapp a:focus-visible { outline-color: #0b6a38; }
.contact-email a:focus-visible, .footer-email-link:focus-visible { outline-color: #2463c9; }
.contact-whatsapp p, .contact-email p { font-size: .8125rem; color: #58654e; margin: 3px 0 0; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 22px; }
.footer-links a { font-size: .8125rem; overflow-wrap: anywhere; }
.footer-email-link { gap: 9px; min-height: 44px; align-items: center; }
.footer-email-link > svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; color: #2463c9; }
.footer-email-link:hover > svg, .footer-email-link:focus-visible > svg { color: #174da8; }
@media(max-width:600px) { .footer-links { align-items: flex-start; flex-direction: column; gap: 12px; } }
@media(prefers-reduced-motion:reduce) { .contact-icon { transition: none; } }