:root {
  --ink: #132c2a;
  --ink-deep: #0c2421;
  --ink-soft: #4d6561;
  --paper: #f5f2ea;
  --paper-deep: #ece9df;
  --white: #fffefb;
  --mint: #b8f1d6;
  --mint-strong: #54d6a9;
  --lime: #d9f99d;
  --line: #d4dad4;
  --max-width: 1180px;
  --side-space: max(20px, calc((100vw - var(--max-width)) / 2));
  --shadow: 0 28px 70px rgba(19, 44, 42, .13);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.dialog-open { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { overflow-wrap: break-word; }
.skip-link {
  position: fixed;
  left: 1rem;
  top: -6rem;
  z-index: 1000;
  padding: .8rem 1rem;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-weight: 750;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid #16876d; outline-offset: 4px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: relative;
  z-index: 10;
  padding-inline: var(--side-space);
}
.header-inner {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(19, 44, 42, .15);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .14em;
}
.brand b { color: #1a886d; }
.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50% 50% 50% 10px;
  background: var(--ink);
  color: var(--mint);
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: 0;
}
.header-cta {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  padding: 5px 0 5px 5px;
  border: 0;
  background: transparent;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
}
.header-cta > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.header-cta:hover > span { background: var(--ink); color: #fff; transform: rotate(8deg); }

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 88px);
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 8rem) var(--side-space) clamp(5.5rem, 9vw, 8.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 540px;
  height: 540px;
  right: -110px;
  top: -130px;
  border: 1px solid rgba(19, 44, 42, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(184, 241, 214, .18), 0 0 0 140px rgba(184, 241, 214, .09);
}
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .kicker {
  margin: 0 0 1.35rem;
  color: #226f5d;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow { display: flex; gap: .7rem; align-items: center; }
.eyebrow > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1baa81;
  box-shadow: 0 0 0 5px rgba(27, 170, 129, .13);
}
h1, h2 { text-wrap: balance; }
h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.4rem, 6.5vw, 6.25rem);
  line-height: .95;
  letter-spacing: -.067em;
  font-weight: 760;
}
h1 em, .final-inner h2 em {
  position: relative;
  display: inline-block;
  color: #187a64;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}
h1 em::after {
  content: "";
  position: absolute;
  height: 4px;
  left: 2%;
  right: 0;
  bottom: -.08em;
  background: #187a64;
  transform: rotate(-1deg);
}
.hero-lead {
  max-width: 650px;
  margin: 2rem 0 2.3rem;
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 1.45vw, 1.22rem);
  line-height: 1.7;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.5rem; }
.button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .95rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 7px;
  font-weight: 820;
  line-height: 1.25;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.button span { font-size: 1.2rem; line-height: 1; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: #fff; box-shadow: 0 12px 28px rgba(19, 44, 42, .16); }
.button-primary:hover { background: #1d4742; box-shadow: 0 16px 34px rgba(19, 44, 42, .2); }
.hero-actions p, .cta-note {
  margin: 0;
  color: #647975;
  font-size: .76rem;
}
.hero-actions p > span { color: #13845f; margin-right: .35rem; }

.assistant-preview {
  position: relative;
  width: 100%;
  align-self: center;
  padding: 1.4rem;
  border: 1px solid rgba(19, 44, 42, .16);
  border-radius: 20px;
  background: rgba(255, 254, 251, .96);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-align: left;
  transform: rotate(1.2deg);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.assistant-preview:hover { transform: rotate(.2deg) translateY(-5px); box-shadow: 0 36px 85px rgba(19, 44, 42, .17); }
.preview-label {
  position: absolute;
  right: 18px;
  top: -13px;
  padding: .42rem .66rem;
  border-radius: 4px;
  background: var(--lime);
  color: var(--ink);
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .13em;
  transform: rotate(2deg);
}
.preview-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink);
  color: var(--mint);
  font-size: .68rem;
  font-weight: 900;
}
.preview-person strong { display: block; font-size: .9rem; }
.preview-person > span {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  color: #627772;
  font-size: .68rem;
}
.preview-person i { width: 6px; height: 6px; border-radius: 50%; background: #0a966a; }
.preview-time { color: #71837f; font-size: .68rem; }
.message {
  display: block;
  width: max-content;
  max-width: 88%;
  margin-top: 1.1rem;
  padding: .85rem 1rem;
  border-radius: 13px;
  font-size: .87rem;
  line-height: 1.5;
}
.message-assistant { background: #e9eee9; border-bottom-left-radius: 3px; }
.message-user { margin-left: auto; background: var(--ink); color: #fff; border-bottom-right-radius: 3px; }
.typing {
  display: flex;
  width: max-content;
  gap: 4px;
  margin-top: .8rem;
  padding: .7rem .85rem;
  border-radius: 12px 12px 12px 3px;
  background: #e9eee9;
}
.typing > span { width: 5px; height: 5px; border-radius: 50%; background: #6d817c; animation: blink 1.3s infinite; }
.typing > span:nth-child(2) { animation-delay: .18s; }
.typing > span:nth-child(3) { animation-delay: .36s; }
.preview-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: #116d57;
  font-size: .8rem;
  font-weight: 850;
}
.voice-visual { min-height: 155px; display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.phone-symbol { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 50%; background: var(--ink); color: var(--mint); font-size: 1.5rem; box-shadow: 0 0 0 12px rgba(184, 241, 214, .3); }
.voice-wave { height: 62px; display: flex; align-items: center; gap: 5px; }
.voice-wave i { width: 5px; height: 18px; border-radius: 2px; background: #169072; animation: voice-wave 1.15s ease-in-out infinite; }
.voice-wave i:nth-child(2), .voice-wave i:nth-child(6) { height: 30px; animation-delay: .1s; }
.voice-wave i:nth-child(3), .voice-wave i:nth-child(5) { height: 48px; animation-delay: .2s; }
.voice-wave i:nth-child(4) { height: 60px; animation-delay: .3s; }
.voice-wave i:nth-child(7) { animation-delay: .4s; }
.voice-preview-copy { display: block; margin-bottom: 1rem; text-align: center; }
.voice-preview-copy strong { display: block; font-size: .98rem; }
.voice-preview-copy small { display: block; margin-top: .3rem; color: #627772; font-size: .7rem; }

.section { padding: clamp(5.5rem, 10vw, 9rem) var(--side-space); }
.section-inner { max-width: var(--max-width); margin: 0 auto; }
.section-heading { max-width: 760px; }
.section-heading h2 {
  margin: 0;
  font-size: clamp(2.45rem, 4.6vw, 4.45rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 760;
}
.section-heading > p:last-child:not(.kicker) { margin: 1.5rem 0 0; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; }
.problem-section { background: var(--white); }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: clamp(3.5rem, 6vw, 5.8rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}
.problem-card { position: relative; min-height: 275px; padding: 2.2rem; background: var(--white); }
.problem-card::after {
  content: "";
  position: absolute;
  left: 2.2rem;
  bottom: 0;
  width: 0;
  height: 4px;
  background: #1c9575;
  transition: width .3s ease;
}
.problem-card:hover::after { width: calc(100% - 4.4rem); }
.card-number { color: #138267; font-size: .69rem; font-weight: 900; letter-spacing: .12em; }
.problem-card h3 { margin: 4.5rem 0 .8rem; font-size: 1.25rem; letter-spacing: -.025em; }
.problem-card p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.65; }

.solution-section { position: relative; background: var(--paper); }
.solution-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.solution-layout .section-heading { position: sticky; top: 120px; }
.solution-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.solution-step {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid rgba(19, 44, 42, .14);
  border-radius: 14px;
  background: rgba(255, 254, 251, .54);
}
.solution-step:nth-child(2), .solution-step:nth-child(3) { background: var(--ink); color: #fff; }
.solution-step > span { align-self: flex-end; color: #21836d; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.solution-step:nth-child(2) > span, .solution-step:nth-child(3) > span { color: var(--mint); }
.solution-step strong { margin-top: auto; font-size: clamp(1.35rem, 2.2vw, 1.8rem); letter-spacing: -.035em; }
.solution-step small { margin-top: .25rem; color: #667d77; font-size: .76rem; }
.solution-step:nth-child(2) small, .solution-step:nth-child(3) small { color: #b4c7c2; }

.experience-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(6.5rem, 12vw, 11rem) var(--side-space);
  background: var(--ink-deep);
  color: #fff;
}
.experience-inner { position: relative; z-index: 2; max-width: 930px; margin: 0 auto; text-align: center; }
.kicker-light { color: var(--mint-strong); }
.experience-inner h2 { margin: 0; font-size: clamp(2.3rem, 4.6vw, 4.5rem); line-height: 1.06; letter-spacing: -.05em; }
.experience-turn {
  margin: 1.4rem 0 0;
  color: var(--mint);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-style: italic;
}
.experience-copy { max-width: 590px; margin: 2rem auto 2.25rem; color: #c6d4d0; font-size: 1.06rem; line-height: 1.7; }
.button-accent { background: var(--lime); color: var(--ink-deep); box-shadow: 0 14px 35px rgba(0, 0, 0, .2); }
.button-accent:hover { background: #e5ffb4; box-shadow: 0 18px 42px rgba(0, 0, 0, .24); }
.safe-note { margin: 1rem 0 0; color: #aebfba; font-size: .74rem; }
.safe-note span { color: var(--mint-strong); margin-right: .3rem; }
.experience-orbit { position: absolute; z-index: 0; border: 1px solid rgba(184, 241, 214, .15); border-radius: 50%; }
.orbit-one { width: 560px; height: 560px; top: -280px; left: -180px; box-shadow: 0 0 0 85px rgba(184, 241, 214, .025), 0 0 0 170px rgba(184, 241, 214, .018); }
.orbit-two { width: 390px; height: 390px; right: -120px; bottom: -230px; box-shadow: 0 0 0 65px rgba(184, 241, 214, .025); }

.difference-section { background: var(--white); }
.difference-layout { display: grid; grid-template-columns: .6fr 1.2fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.difference-stamp {
  width: min(100%, 330px);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 14px var(--white), inset 0 0 0 15px var(--line);
  transform: rotate(-6deg);
}
.difference-stamp span { font-size: .68rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.difference-stamp strong { margin: .2rem 0; color: #167b63; font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -.08em; }

.final-section { padding: clamp(6.5rem, 12vw, 11rem) var(--side-space); background: var(--mint); }
.final-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.final-inner h2 { margin: 0; font-size: clamp(3.2rem, 7vw, 6.8rem); line-height: .9; letter-spacing: -.07em; }
.final-inner h2 em { color: #155f4f; }
.final-inner > p:not(.kicker):not(.cta-note) { max-width: 680px; margin: 2.25rem auto; color: #345d55; font-size: 1.07rem; line-height: 1.72; }
.final-inner .cta-note { margin-top: 1rem; color: #3e665e; }
.final-inner .cta-note span { padding-inline: .25rem; }

.site-footer { padding: 2.2rem var(--side-space); background: var(--ink-deep); color: #fff; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.brand-footer .brand-mark { background: var(--mint); color: var(--ink); }
.footer-inner > p { margin: 0; color: #9db3ae; font-size: .78rem; text-align: center; }
.footer-inner nav { display: flex; gap: 1.3rem; }
.footer-inner nav a { color: #c5d3d0; font-size: .76rem; text-decoration: underline; text-underline-offset: 4px; }
.footer-inner nav a:hover { color: #fff; }

.chat-dialog {
  width: min(540px, calc(100% - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(19, 44, 42, .22);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 40px 120px rgba(3, 20, 17, .42);
}
.chat-dialog::backdrop { background: rgba(5, 22, 19, .72); backdrop-filter: blur(6px); }
.chat-dialog[open] { animation: dialog-in .25s ease-out; }
.chat-shell { display: flex; max-height: inherit; overflow-y: auto; flex-direction: column; }
.chat-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.chat-header h2 { margin: 0; font-size: .98rem; letter-spacing: -.015em; }
.chat-header p { display: flex; gap: .4rem; align-items: center; margin: .2rem 0 0; color: #667a75; font-size: .69rem; }
.chat-header p > span { width: 6px; height: 6px; border-radius: 50%; background: #0a966a; }
.chat-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #edf0ec;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.chat-close:hover { background: #dfe6e1; }
.chat-progress { height: 3px; background: #e9eee9; }
.chat-progress > span { display: block; width: 100%; height: 100%; background: #15906f; }
.call-content { padding: 1.3rem 1.3rem .65rem; }
.call-step { margin: 0 0 .5rem; color: #14745d; font-size: .65rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.call-content h3 { margin: 0; font-size: clamp(1.4rem, 4vw, 1.8rem); letter-spacing: -.035em; }
.call-content > p:not(.call-step) { margin: .75rem 0 1rem; color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.call-benefits { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.call-benefits li { color: #405e58; font-size: .74rem; }
.call-benefits span { margin-right: .4rem; color: #087c58; font-weight: 900; }
.call-form { position: relative; display: grid; gap: .65rem; padding: .85rem 1.3rem 1rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.form-field { display: grid; gap: .35rem; }
.call-form > label:not(.consent), .form-field label { font-size: .72rem; font-weight: 800; }
.call-form input, .call-form select { width: 100%; height: 44px; min-width: 0; padding: 0 .8rem; border: 1px solid #aebdb8; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: .8rem; }
.call-form input::placeholder { color: #758681; opacity: 1; }
.call-form input:focus, .call-form select:focus { border-color: #16775f; }
.form-field label span { color: #667b76; font-weight: 600; }
.call-timing { min-width: 0; margin: .1rem 0; padding: 0; border: 0; }
.call-timing legend { margin-bottom: .45rem; color: var(--ink); font-size: .72rem; font-weight: 850; }
.timing-options { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.timing-option { position: relative; cursor: pointer; }
.timing-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.timing-option span { display: grid; min-height: 44px; place-items: center; padding: .65rem .8rem; border: 1px solid #aebdb8; border-radius: 6px; background: #fff; color: #405e58; font-size: .75rem; font-weight: 800; text-align: center; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.timing-option input:checked + span { border-color: #16775f; background: #e1f6ec; color: #124d3e; box-shadow: inset 0 0 0 1px #16775f; }
.timing-option input:focus-visible + span { outline: 3px solid rgba(22, 119, 95, .24); outline-offset: 2px; }
.schedule-fields { min-width: 0; margin: .1rem 0; padding: .75rem; border: 1px solid #d0dad6; border-radius: 7px; }
.schedule-fields[hidden] { display: none; }
.schedule-fields legend { padding: 0 .3rem; color: var(--ink); font-size: .72rem; font-weight: 850; }
.schedule-fields legend span { color: #667b76; font-weight: 600; }
.schedule-fields > small { display: block; margin-top: .55rem; color: #667b76; font-size: .62rem; line-height: 1.45; }
.phone-field { display: grid; grid-template-columns: 42px 1fr; border: 1px solid #aebdb8; border-radius: 6px; background: #fff; }
.phone-field > span { display: grid; place-items: center; border-right: 1px solid var(--line); color: #176d59; }
.phone-field input { border: 0; }
.call-form > small { margin-top: -.35rem; color: #667b76; font-size: .62rem; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; margin: .25rem 0; color: #4e6661; font-size: .68rem; line-height: 1.45; }
.consent input { width: 17px; height: 17px; margin: .05rem 0 0; accent-color: var(--ink); }
.consent a { color: #0d6d55; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.call-form .button { width: 100%; }
.call-form .button:disabled { cursor: wait; opacity: .72; transform: none; }
.call-content[hidden], .call-form[hidden], .call-success[hidden], .chat-disclaimer[hidden] { display: none; }
.call-success { display: grid; justify-items: center; padding: clamp(2.5rem, 8vw, 4.5rem) 1.5rem 2rem; text-align: center; }
.call-success-mark { display: grid; width: 64px; height: 64px; margin-bottom: 1.1rem; place-items: center; border-radius: 50%; background: #e1f6ec; color: #087b58; font-size: 1.8rem; font-weight: 900; box-shadow: 0 0 0 8px rgba(225, 246, 236, .58); }
.call-success .call-step { margin-bottom: .65rem; }
.call-success h3 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.3rem); letter-spacing: -.035em; }
.call-success > p:not(.call-step) { max-width: 430px; margin: .85rem 0 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.65; }
.call-success .call-success-reference { margin-top: .65rem; color: #71837f; font-size: .62rem; overflow-wrap: anywhere; }
.call-success .button { width: min(100%, 300px); margin-top: 1.5rem; }
.call-status { margin: .15rem 0 0; padding: .7rem .8rem; border-left: 3px solid #9a6b00; background: #fff2bd; color: #4a3500; font-size: .72rem; line-height: 1.45; }
.call-status[data-state="success"] { border-color: #087b58; background: #e1f6ec; color: #124d3e; }
.call-status[data-state="error"] { border-color: #a12a2a; background: #fff0ef; color: #671919; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.chat-log { min-height: 230px; overflow-y: auto; padding: 1.2rem; scroll-behavior: smooth; }
.chat-message { display: flex; gap: .6rem; align-items: flex-end; margin-bottom: .85rem; }
.chat-message.is-user { flex-direction: row-reverse; }
.chat-avatar { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--ink); color: var(--mint); font-size: .5rem; font-weight: 900; }
.chat-message > div { max-width: 78%; }
.chat-message p { margin: 0; padding: .72rem .85rem; border-radius: 12px 12px 12px 3px; background: #e9eee9; font-size: .82rem; line-height: 1.5; }
.chat-message.is-user p { border-radius: 12px 12px 3px 12px; background: var(--ink); color: #fff; }
.chat-message time { display: block; margin-top: .25rem; color: #71837f; font-size: .58rem; }
.chat-message.is-user time { text-align: right; }
.quick-replies { display: flex; flex-wrap: wrap; gap: .5rem; padding: .2rem 1.2rem 1rem; }
.quick-replies button {
  padding: .55rem .7rem;
  border: 1px solid #9eb5ae;
  border-radius: 6px;
  background: transparent;
  color: #176a57;
  font-size: .72rem;
  font-weight: 750;
  cursor: pointer;
}
.quick-replies button:hover { border-color: var(--ink); background: #edf2ee; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: .55rem; padding: .8rem 1rem; border-top: 1px solid var(--line); background: #f4f4ef; }
.chat-form input { min-width: 0; height: 45px; padding: 0 .9rem; border: 1px solid #b9c5c0; border-radius: 7px; background: var(--white); color: var(--ink); font-size: .8rem; }
.chat-form input::placeholder { color: #667b76; }
.chat-form button { width: 45px; height: 45px; border: 0; border-radius: 7px; background: var(--ink); color: #fff; cursor: pointer; }
.chat-form button:hover { background: #1d4742; }
.chat-disclaimer { margin: 0; padding: .2rem 1rem .7rem; background: #f4f4ef; color: #687b76; font-size: .59rem; text-align: center; }
.noscript { position: fixed; z-index: 50; inset: auto 1rem 1rem; margin: 0; padding: 1rem; background: #fff4ca; color: #3a2c00; border: 1px solid #806600; text-align: center; }

.legal-back { font-size: .8rem; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.legal-main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: clamp(4.5rem, 9vw, 7rem) 0; }
.legal-main > h1 { margin-bottom: 2rem; font-size: clamp(3.2rem, 8vw, 5.7rem); }
.legal-main section { padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.legal-main section h2 { margin: 0 0 .8rem; font-size: 1.25rem; letter-spacing: -.02em; }
.legal-main section p { margin: 0; color: var(--ink-soft); line-height: 1.75; }
.legal-notice { margin-bottom: 2rem; padding: 1rem 1.15rem; border-left: 4px solid #9b7500; background: #fff4ca; color: #3a2c00; font-size: .88rem; line-height: 1.55; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes blink { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes voice-wave { 0%, 100% { transform: scaleY(.55); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 4.8rem; }
  .assistant-preview { width: min(100%, 520px); transform: none; }
  .assistant-preview:hover { transform: translateY(-4px); }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-card { min-height: auto; }
  .problem-card h3 { margin-top: 2.5rem; }
  .solution-layout { grid-template-columns: 1fr; }
  .solution-layout .section-heading { position: static; }
  .difference-layout { grid-template-columns: 1fr; }
  .difference-stamp { width: 250px; }
}
@media (max-width: 650px) {
  :root { --side-space: 20px; }
  .header-inner { height: 76px; }
  .header-cta { font-size: 0; }
  .header-cta > span { font-size: .9rem; }
  .hero { min-height: auto; padding-top: 3.8rem; }
  h1 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .hero-actions .button { width: 100%; }
  .solution-steps { grid-template-columns: 1fr; }
  .solution-step { min-height: 160px; }
  .footer-inner { grid-template-columns: 1fr; justify-items: start; }
  .footer-inner > p { text-align: left; }
  .chat-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .chat-log { min-height: 190px; }
  .field-grid { grid-template-columns: 1fr; }
  .timing-options { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html, .chat-log { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .brand-mark, .avatar, .chat-avatar, .button, .chat-form button { border: 1px solid ButtonText; }
  .eyebrow > span, .preview-person i, .chat-header p > span { border: 1px solid CanvasText; }
  .experience-section { border-block: 2px solid CanvasText; }
}