/* Brand refinement: a focused enterprise presentation system.
   Original page content, interactions and accessible structure are retained. */
:root {
  --ink: #142a4b;
  --muted: #53677f;
  --blue: #285be4;
  --blue-deep: #1744bb;
  --paper: #ffffff;
  --canvas: #f5f8fd;
  --line: #e2e9f3;
  --lime: #d9f9a9;
  --ref-shadow: 0 24px 64px rgba(22, 56, 111, .11), 0 5px 16px rgba(22, 56, 111, .04);
  --ref-shadow-soft: 0 14px 38px rgba(22, 56, 111, .085), 0 2px 9px rgba(22, 56, 111, .035);
}

body {font-size: 16px; letter-spacing: -.005em;}
/* The full-bleed hero color field can extend half a scrollbar past the viewport. */
main {overflow-x: clip;}
p {color: var(--muted);}
h1, h2, h3, h4 {letter-spacing: -.055em;}
.wrap {width: min(1300px, calc(100% - 112px));}
.text-muted {color: #6e7f91;}
.text-blue {color: var(--blue);}

/* Navigation: quieter, better scaled, with one unmistakable action. */
.site-header {
  border-bottom: 1px solid #e7edf5;
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 20px rgba(29, 56, 97, .035);
}
.header-inner {height: 86px;}
.brand {gap: 15px;}
.brand-mark {font-size: 36px; letter-spacing: -.125em;}
.brand-name {font-size: 18px; line-height: 1.35; letter-spacing: -.035em;}
.brand-name>span {font-size: 9px; line-height: 1.4; letter-spacing: .075em; margin-top: 5px;}
.header-inner nav {gap: 38px; font-size: 14px; font-weight: 600;}
.header-inner nav a {color: #324a66;}
.header-inner nav a:hover {color: var(--blue);}
.header-actions {gap: 25px;}
.language, .language-switch {font-size: 12px;}
.button {
  min-height: 55px;
  padding: 16px 26px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.015em;
  box-shadow: 0 7px 16px rgba(40,91,228,.15);
}
.button:hover {box-shadow: 0 13px 26px rgba(40,91,228,.22); transform: translateY(-2px);}
.button-small {min-height: 46px; padding: 13px 20px; font-size: 13px; border-radius: 10px;}
.button .arrow-diagonal {width: 16px; height: 16px;}
.button .arrow-diagonal:before {right: 1px; top: 0; width: 9px; height: 9px;}
.button .arrow-diagonal:after {top: 8px; width: 15px;}

/* Editorial hero, using a soft branded color field instead of an empty canvas. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: 105px 115px;
  gap: 68px;
  grid-template-columns: 1.03fr .97fr;
}
.hero:before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background:
    radial-gradient(ellipse 57% 94% at 87% 42%, #dceafe 0%, #edf4ff 42%, transparent 80%),
    linear-gradient(112deg, #ffffff 5%, #f8fbff 68%, #edf5ff 100%);
}
.hero .eyebrow {
  display: inline-flex;
  gap: 12px;
  padding: 10px 17px 10px 13px;
  border-radius: 50px;
  background: white;
  border: 1px solid #d9e7f7;
  box-shadow: 0 4px 12px rgba(21,59,113,.04);
  color: #315079;
  font-size: 11px;
  letter-spacing: .075em;
  margin-bottom: 29px;
}
.hero .tiny-star {color: var(--blue); font-size: 21px;}
.hero h1 {
  font-size: clamp(57px, 5.9vw, 89px);
  line-height: 1.045;
  letter-spacing: -.065em;
  font-weight: 700;
  color: #112c4e;
  max-width: 660px;
}
.hero-description {
  font-size: 18px;
  line-height: 1.75;
  max-width: 505px;
  color: #465d79;
  margin-top: 31px;
}
.hero-actions {gap: 25px; margin-top: 34px;}
.hero-actions .button {font-size: 14px; gap: 23px; padding: 18px 24px;}
.text-link {font-size: 13px; font-weight: 700; color: #244a91; gap: 11px;}
.hero-signoff {margin-top: 45px; gap: 14px;}
.mini-avatar {width: 43px; height: 43px; background: #e0eafd; font-size: 12px;}
.hero-signoff strong {font-size: 12px; color: #1d3657;}
.hero-signoff p {font-size: 12px; line-height: 1.6;}

/* One cohesive workflow canvas rather than a pile of floating cards. */
.workflow-art {
  min-height: 565px;
  padding: 29px;
  border-radius: 28px;
  border: 1px solid #dbe6f5;
  background: linear-gradient(147deg, #e1edff 0%, #f2f7ff 58%, #eaf3ff 100%);
  box-shadow: 0 34px 67px rgba(43, 87, 160, .17), 0 7px 18px rgba(43, 87, 160, .07);
}
.workflow-art:before {display: none;}
.workflow-art:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 390px;
  height: 390px;
  right: -160px;
  top: -160px;
  border: 1px solid rgba(67,124,216,.17);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255,255,255,.14), 0 0 0 86px rgba(255,255,255,.11);
}
.art-kicker {color: #4a648b; font-size: 11px; letter-spacing: .1em;}
.art-chip {background: #fff; color: #264780; font-size: 11px; padding: 8px 12px; box-shadow: 0 3px 10px rgba(28,70,135,.06);}
.flow-stack {
  width: 100%;
  max-width: 455px;
  padding: 10px 12px;
  margin: 26px auto 30px;
  background: rgba(255,255,255,.96);
  border: 1px solid #dfe7f2;
  border-radius: 20px;
  box-shadow: var(--ref-shadow);
}
.flow-card {
  margin: 0;
  max-width: none;
  padding: 20px 15px;
  gap: 16px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.flow-card strong {font-size: 14px; font-weight: 700; line-height: 1.4; color: #233b59;}
.flow-label {font-size: 9px; letter-spacing: .095em; color: #6a7f97; margin-bottom: 5px;}
.step-number {font-size: 10px; color: #7f90a7;}
.flow-icon {width: 43px; height: 43px; border-radius: 12px; background: #f0f5fd; border: 0; color: #3269ce;}
.flow-ai {
  margin: 0;
  border: 1px solid #d7e5ff;
  border-radius: 13px;
  padding: 22px 17px;
  background: linear-gradient(105deg, #edf4ff 0%, #f8fbff 100%);
  color: #1b396e;
  box-shadow: none;
}
.flow-ai .flow-label {color: #285be4;}
.flow-ai .step-number {color: #6b8cb7;}
.ai-emblem {width: 35px; color: var(--blue);}
.ai-pills {margin-top: 11px; gap: 7px;}
.ai-pills span {background: #fff; border: 1px solid #dae6f8; border-radius: 6px; padding: 4px 8px; font-size: 9px; color: #35619b;}
.flow-person .flow-icon {background: #eefaec; color: #598446;}
.flow-connector {display: none;}
.art-bottom {gap: 16px;}
.human-check {font-size: 11px; color: #456183; font-weight: 600;}
.human-check>span:first-child {width: 20px; height: 20px;}
.sample-label {font-size: 8px; color: #617b99;}

/* A meaningful transition from the hero into the service offer. */
.principles {
  position: relative;
  z-index: 2;
  margin-top: -38px;
  padding: 24px 29px;
  background: white;
  border: 1px solid #e7edf5;
  border-radius: 17px;
  box-shadow: var(--ref-shadow-soft);
  gap: 32px;
}
.principles>p {font-size: 15px; color: #2a4365; font-weight: 700; max-width: 365px; line-height: 1.45;}
.principles>div {gap: 24px;}
.principles>div>span {font-size: 12px; gap: 9px; font-weight: 600; color: #425b78;}
.principles i {font-size: 13px; color: #285be4;}

/* Clear conversion storytelling, more breathing room and fewer decorative boxes. */
.section {padding-block: 116px;}
.section-intro {margin-bottom: 50px; gap: 65px; align-items: end;}
.section-intro h2, .about-copy h2 {font-size: clamp(39px, 3.5vw, 51px); line-height: 1.16; font-weight: 700; letter-spacing: -.055em;}
.section-intro>p {font-size: 16px; line-height: 1.7; max-width: 345px; margin-bottom: 6px;}
.section-intro .eyebrow, .about-copy .eyebrow, .faq-intro .eyebrow {margin-bottom: 23px; font-size: 12px; letter-spacing: .08em;}
.use-case-tabs {background: #edf3fb; padding: 7px; gap: 7px; border-radius: 16px; border: 0; margin-bottom: 20px;}
.use-case-tab {min-height: 65px; font-size: 15px; font-weight: 600; gap: 12px; color: #526985; border-radius: 12px;}
.use-case-tab.active {border: 1px solid #dce8f7; color: #2454c9; box-shadow: 0 5px 16px rgba(29,64,125,.09);}
.use-case-tab:not(.active):hover {background: #f9fbff;}
.tab-icon {font-size: 21px;}
.use-case-panel {border: 1px solid #e4ebf6; border-radius: 22px; box-shadow: var(--ref-shadow-soft); min-height: 465px;}
.use-case-copy {padding: 54px 52px;}
.small-label {font-size: 11px; letter-spacing: .09em;}
.use-case-copy h3 {font-size: 39px; margin-top: 17px; max-width: 410px;}
.use-case-copy>p {font-size: 15px; max-width: 430px; margin-top: 23px; line-height: 1.8;}
.check-list {gap: 13px; margin: 26px 0 30px;}
.check-list li {font-size: 13px; gap: 12px;}
.use-case-copy .text-link {font-size: 13px;}
.demo-surface {background: #f5f8fe; padding: 37px 40px 30px; border-left: 1px solid #e0eaf6;}
.demo-title {font-size: 11px;}
.demo-count {font-size: 12px;}
.demo-track {margin: 25px 0 27px; gap: 8px;}
.demo-track span {height: 5px; background: #dfe8f7;}
.demo-body {border: 1px solid #e2e9f4; padding: 32px; border-radius: 16px; box-shadow: 0 5px 15px rgba(27,66,125,.04);}
.demo-stage {font-size: 10px;}
.demo-body h4 {font-size: 27px; margin: 16px 0 17px;}
.demo-body>p {font-size: 13px; line-height: 1.75;}
.demo-note {font-size: 12px; margin-top: 23px; padding-top: 17px;}
.demo-controls {margin-top: 22px;}
.button-demo {font-size: 12px; border-radius: 9px; min-height: 47px; box-shadow: none;}
.reset-button {font-size: 12px;}
.demo-disclaimer {font-size: 10px; line-height: 1.6;}

/* Open editorial process: not three more cookie-cutter feature cards. */
.approach-section {background: linear-gradient(180deg, #f5f9ff, #f8fbff); border-color: #e8eff9;}
.approach-grid {gap: 37px; margin-top: 62px;}
.approach-card {
  background: transparent;
  border: 0;
  border-top: 2px solid #cbdaf0;
  border-radius: 0;
  padding: 29px 14px 0 0;
  box-shadow: none;
}
.approach-number {font-size: 46px; color: var(--blue); margin-bottom: 37px; font-weight: 500;}
.approach-number>.arrow-diagonal {color: #5480c1;}
.approach-card h3 {font-size: 28px; min-height: auto; line-height: 1.2;}
.approach-card>p {font-size: 15px; line-height: 1.75; margin-top: 18px;}
.deliverable {border-top: 1px solid #d6e3f3; padding-top: 20px; margin-top: 35px; gap: 10px;}
.deliverable>span {font-size: 10px; letter-spacing: .08em; color: #597aaf;}
.deliverable strong {font-size: 13px; line-height: 1.5; color: #243e65;}
.approach-footer {margin-top: 60px; gap: 15px;}
.approach-footer p {font-size: 16px; font-weight: 600; color: #274870;}
.outline-star svg {width: 26px; height: 26px;}

/* Credibility through a clear, honest explanation of the approach. */
.about-section {gap: 100px; grid-template-columns: .9fr 1fr;}
.about-visual {
  min-height: 510px;
  border-radius: 25px;
  padding: 38px;
  border: 1px solid #283d66;
  background: linear-gradient(142deg, #172b4e, #234c94 100%);
  box-shadow: 0 31px 65px rgba(21,53,102,.18);
}
.about-visual:before {border-color: #c1d4ff25; width: 510px; height: 510px; top: 16px; right: -150px;}
.about-visual:after {border-color: #c1d4ff20; width: 700px; height: 700px; top: -78px; right: -248px;}
.large-monogram {font-size: 173px; font-weight: 500;}
.about-card-top {font-size: 10px; color: #c7d8f4; letter-spacing: .12em;}
.about-card-bottom strong {font-size: 26px;}
.about-card-bottom>div>span {font-size: 12px; color: #cbddf6;}
.language-pill {font-size: 11px; padding: 9px 12px; border-color: #a8bee64a;}
.about-copy>p:not(.eyebrow) {font-size: 16px; line-height: 1.85; max-width: 560px; margin-top: 24px;}
.about-details {gap: 17px; margin-top: 33px;}
.about-details>span {font-size: 14px; gap: 14px; font-weight: 600;}
.about-details>span>span[aria-hidden] {font-size: 20px;}

/* Less visual noise in the questions area; big-company clarity. */
.faq-section {padding-top: 18px; padding-bottom: 123px; gap: 90px;}
.faq-intro h2 {font-size: 43px;}
.faq-intro>p:last-child {font-size: 15px; line-height: 1.75; max-width: 335px; margin-top: 22px;}
.faq-list {border-top: 1px solid #d7e2ef;}
.faq-list details {border-bottom: 1px solid #d7e2ef;}
.faq-list summary {font-size: 16px; padding: 27px 0;}
.faq-list details>p {font-size: 14px; line-height: 1.8; margin-bottom: 28px;}

/* Conversion area: the premium shadow and contrast are purposeful. */
.contact-section {
  padding-block: 112px;
  background: linear-gradient(115deg, #0f2b67 0%, #2353d4 65%, #3f68e5 100%);
}
.contact-grid {gap: 120px; align-items: center;}
.contact-copy .eyebrow {font-size: 12px; color: #cbddff; margin-bottom: 28px;}
.contact-copy h2 {font-size: clamp(41px, 4.5vw, 62px); font-weight: 700; line-height: 1.12;}
.contact-copy>p:not(.eyebrow) {font-size: 17px; color: #e1eaff; line-height: 1.8; margin-top: 29px; max-width: 470px;}
.contact-expectations {gap: 22px; margin-top: 45px;}
.contact-expectations>span {font-size: 14px; color: #f0f5ff; gap: 18px;}
.contact-expectations i {height: 29px; width: 29px; border-color: #b9cdfb6b; color: #d6e4ff; font-size: 10px;}
.contact-signature {font-size: 31px; margin-top: 59px;}
.contact-form-panel {
  color: #192e4e;
  background: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  padding: 38px;
  box-shadow: 0 30px 72px rgba(3,20,66,.28), 0 8px 19px rgba(4,21,65,.12);
}
.preview-notice {background: #f2f7ff; border: 1px solid #dce8fa; padding: 14px; border-radius: 10px; margin-bottom: 29px;}
.preview-notice p {font-size: 11px; line-height: 1.65; color: #5d708a;}
.preview-notice strong {color: #2d518b; font-size: 11px;}
.notice-icon {color: #285be4;}
.field {gap: 9px; margin-bottom: 22px;}
.field label {font-size: 13px; font-weight: 700; color: #294362;}
.field input,.field textarea,.field select {
  background: #f8faff;
  color: #223a5e;
  border: 1px solid #dce5f0;
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 14px;
  min-height: 50px;
  box-shadow: inset 0 1px 2px rgba(22,45,84,.02);
}
.field select {color-scheme: light;}
.field input::placeholder, .field textarea::placeholder {color: #8b9aaf;}
.field input:autofill {box-shadow: 0 0 0 1000px #f8faff inset; -webkit-text-fill-color: #223a5e;}
.field textarea {min-height: 116px;}
.form-row {gap: 17px;}
.button-lime {background: var(--blue); color: white; min-height: 54px; font-size: 14px; box-shadow: 0 6px 18px rgba(40,91,228,.17);}
.button-lime:hover {background: var(--blue-deep); box-shadow: 0 13px 26px rgba(40,91,228,.2);}
.button-lime:focus-visible {outline-color: var(--blue);}
.form-privacy {font-size: 11px; color: #64748d; margin-top: 16px; line-height: 1.65;}
.site-footer {padding-block: 40px;}
.footer-brand {font-size: 17px;}
.footer-brand span {font-size: 11px; margin-top: 4px;}
.site-footer>p, .site-footer>div, .footer-link {font-size: 12px;}

/* Tablet layouts hold the hierarchy without compressing everything. */
@media (max-width: 1200px) {
  .wrap {width: calc(100% - 78px);}
  .hero {gap: 36px; padding-block: 84px 101px;}
  .hero h1 {font-size: clamp(52px, 5.5vw, 72px);}
  .hero-description {font-size: 16px;}
  .hero-actions .button {font-size: 12px;}
  .workflow-art {min-height: 535px; padding: 24px;}
  .flow-stack {padding: 8px;}
  .principles {padding: 21px 24px;}
  .principles>p {font-size: 13px; max-width: 260px;}
  .principles>div {gap: 17px;}
  .principles>div>span {font-size: 11px;}
  .section-intro h2, .about-copy h2 {font-size: 40px;}
  .use-case-copy {padding: 43px 37px;}
  .use-case-copy h3 {font-size: 34px;}
  .use-case-copy>p {font-size: 14px;}
  .demo-surface {padding: 32px;}
  .about-section {gap: 66px;}
  .about-visual {min-height: 460px;}
  .large-monogram {font-size: 153px;}
  .contact-grid {gap: 68px;}
  .contact-form-panel {padding: 30px;}
}

@media (max-width: 1000px) {
  .wrap {width: calc(100% - 58px);}
  .header-inner {height: 80px; gap: 14px;}
  .header-inner nav {gap: 20px; font-size: 12px;}
  .header-actions {gap: 15px;}
  .brand-name {font-size: 16px;}
  .brand-name>span {font-size: 7px;}
  .hero {gap: 28px;}
  .hero h1 {font-size: 53px;}
  .hero .eyebrow {font-size: 9px;}
  .hero-description {font-size: 15px;}
  .hero-actions {flex-direction: column; align-items: flex-start;}
  .workflow-art {min-height: 475px; padding: 17px;}
  .art-kicker, .art-chip {font-size: 9px;}
  .flow-stack {margin-block: 20px;}
  .flow-card {padding: 17px 11px; gap: 9px;}
  .flow-ai {padding: 19px 13px;}
  .flow-card strong {font-size: 12px;}
  .flow-label {font-size: 8px;}
  .flow-icon {width: 34px; height: 34px;}
  .ai-emblem {width: 30px;}
  .section {padding-block: 87px;}
  .section-intro h2, .about-copy h2 {font-size: 36px;}
  .section-intro>p {font-size: 14px; max-width: 280px;}
  .use-case-tab {font-size: 13px; min-height: 59px;}
  .use-case-copy h3 {font-size: 30px;}
  .use-case-copy {padding: 34px 28px;}
  .demo-surface {padding: 26px;}
  .demo-body {padding: 25px;}
  .demo-body h4 {font-size: 24px;}
  .approach-grid {gap: 21px;}
  .approach-card h3 {font-size: 24px;}
  .approach-card>p {font-size: 13px;}
  .about-section {gap: 40px;}
  .about-visual {min-height: 400px; padding: 28px;}
  .about-copy>p:not(.eyebrow) {font-size: 14px;}
  .large-monogram {font-size: 132px;}
  .faq-section {gap: 46px;}
  .faq-list summary {font-size: 14px;}
  .contact-copy h2 {font-size: 43px;}
  .contact-copy>p:not(.eyebrow) {font-size: 14px;}
  .contact-expectations>span {font-size: 12px;}
  .contact-form-panel {padding: 25px;}
  .field label {font-size: 12px;}
}

/* Mobile: a full-width story and properly sized controls. */
@media (max-width: 780px) {
  html {scroll-padding-top: 88px;}
  .wrap {width: calc(100% - 42px);}
  .header-inner {height: 76px;}
  .brand {gap: 10px;}
  .brand-mark {font-size: 29px;}
  .brand-name {font-size: 15px;}
  .brand-name>span {font-size: 7px;}
  .language, .language-switch {font-size: 11px;}
  .menu-toggle {display: flex; border-radius: 10px;}
  .header-inner nav {top: 76px; padding: 23px; box-shadow: 0 12px 24px rgba(20,43,78,.12); font-size: 15px;}
  .hero {grid-template-columns: 1fr; gap: 51px; padding-block: 64px 86px;}
  .hero h1 {font-size: clamp(49px, 8.6vw, 69px); max-width: 680px;}
  .hero-description {font-size: 16px; max-width: 550px; margin-top: 24px;}
  .hero-actions {flex-direction: row; align-items: center; gap: 22px;}
  .hero-actions .button {font-size: 13px;}
  .hero-signoff {margin-top: 31px;}
  .workflow-art {width: 100%; min-height: 490px; padding: 24px;}
  .flow-stack {max-width: 560px; margin-block: 26px;}
  .flow-card {padding: 20px 17px; gap: 15px;}
  .flow-ai {padding: 22px 17px;}
  .flow-card strong {font-size: 14px;}
  .flow-label {font-size: 9px;}
  .flow-icon {width: 43px; height: 43px;}
  .ai-emblem {width: 35px;}
  .art-kicker, .art-chip {font-size: 10px;}
  .art-bottom {flex-direction: row; align-items: center;}
  .sample-label {font-size: 8px;}
  .principles {margin-top: -35px; padding: 24px; gap: 18px; align-items: start;}
  .principles>p {font-size: 14px; max-width: none;}
  .principles>div {gap: 10px 18px; justify-content: start;}
  .principles>div>span {font-size: 11px;}
  .section {padding-block: 78px;}
  .section-intro {margin-bottom: 36px;}
  .section-intro h2, .about-copy h2 {font-size: clamp(34px, 5.9vw, 43px);}
  .section-intro>p {font-size: 15px; max-width: 560px;}
  .section-intro .eyebrow, .about-copy .eyebrow, .faq-intro .eyebrow {font-size: 11px;}
  .use-case-tabs {padding: 5px; gap: 5px;}
  .use-case-tab {min-height: 69px; font-size: 12px;}
  .use-case-copy {padding: 36px;}
  .use-case-copy h3 {font-size: 37px;}
  .use-case-copy>p {font-size: 15px;}
  .check-list li {font-size: 13px;}
  .demo-surface {padding: 32px;}
  .demo-body {padding: 29px;}
  .demo-body h4 {font-size: 27px;}
  .demo-body>p, .demo-note {font-size: 13px;}
  .approach-grid {gap: 20px;}
  .approach-card {grid-template-columns: 51px 1fr; padding: 22px 0 2px; border-top-width: 1px;}
  .approach-number {font-size: 37px;}
  .approach-card h3 {font-size: 26px;}
  .approach-card>p {font-size: 14px; margin-top: 13px;}
  .deliverable {margin-top: 20px;}
  .deliverable strong {font-size: 13px;}
  .approach-footer {margin-top: 39px;}
  .approach-footer p {font-size: 13px;}
  .about-section {grid-template-columns: 1fr; gap: 43px;}
  .about-visual {min-height: 420px; padding: 33px;}
  .large-monogram {font-size: 155px;}
  .about-card-top {font-size: 10px;}
  .about-card-bottom strong {font-size: 23px;}
  .about-card-bottom>div>span {font-size: 11px;}
  .about-copy>p:not(.eyebrow) {font-size: 15px;}
  .about-details>span {font-size: 13px;}
  .faq-section {grid-template-columns: 1fr; gap: 28px; padding-block: 8px 85px;}
  .faq-intro h2 {font-size: 40px;}
  .faq-intro>p:last-child {font-size: 15px; max-width: 460px;}
  .faq-list summary {font-size: 15px; padding: 23px 0;}
  .faq-list details>p {font-size: 14px;}
  .contact-section {padding-block: 78px;}
  .contact-grid {grid-template-columns: 1fr; gap: 46px;}
  .contact-copy h2 {font-size: 48px;}
  .contact-copy>p:not(.eyebrow) {font-size: 16px;}
  .contact-expectations>span {font-size: 14px;}
  .contact-signature {font-size: 26px; margin-top: 38px;}
  .contact-form-panel {padding: 32px;}
  .preview-notice p {font-size: 11px;}
  .field input, .field textarea, .field select {font-size: 16px;}
  .button-lime {font-size: 14px;}
  .form-privacy {font-size: 11px;}
  .site-footer {padding-block: 35px;}
  .footer-brand {font-size: 16px;}
  .footer-brand>span {font-size: 10px;}
}

@media (max-width: 440px) {
  .wrap {width: calc(100% - 36px);}
  .brand {gap: 8px;}
  .brand-mark {font-size: 27px;}
  .brand-name {font-size: 14px;}
  .brand-name>span {font-size: 6px;}
  .header-actions {gap: 11px;}
  .language, .language-switch {font-size: 10px;}
  .menu-toggle {width: 38px; height: 40px;}
  .hero {padding-block: 50px 71px; gap: 40px;}
  .hero .eyebrow {font-size: 8px; padding: 8px 10px; gap: 9px; max-width: 100%;}
  .hero .tiny-star svg {width: 18px; height: 18px;}
  .hero h1 {font-size: clamp(46px, 11.6vw, 52px);}
  .hero-description {font-size: 15px; line-height: 1.68;}
  .hero-actions {gap: 17px; align-items: flex-start; flex-direction: column;}
  .hero-actions .button {font-size: 12px; padding: 17px 20px;}
  .text-link {font-size: 12px;}
  .hero-signoff {margin-top: 32px;}
  .hero-signoff p, .hero-signoff strong {font-size: 11px;}
  .workflow-art {padding: 17px; min-height: 435px; border-radius: 21px;}
  .art-kicker {font-size: 8px;}
  .art-chip {font-size: 8px; padding: 6px 8px;}
  .flow-stack {padding: 7px; border-radius: 15px; margin-block: 22px;}
  .flow-card {padding: 15px 10px; gap: 10px;}
  .flow-ai {padding: 16px 10px; border-radius: 9px;}
  .flow-card strong {font-size: 11px;}
  .flow-label {font-size: 7px;}
  .flow-icon {width: 30px; height: 30px; border-radius: 9px;}
  .ai-emblem {width: 29px;}
  .ai-pills span {font-size: 7px; padding: 3px 5px;}
  .sample-label {font-size: 6px;}
  .human-check {font-size: 9px;}
  .principles {margin-top: -27px; padding: 21px;}
  .principles>p {font-size: 13px;}
  .principles>div>span {font-size: 10px;}
  .section {padding-block: 65px;}
  .section-intro h2, .about-copy h2 {font-size: 33px;}
  .section-intro>p {font-size: 13px; margin-top: 17px;}
  .use-case-tab {font-size: 11px; min-height: 64px;}
  .use-case-copy {padding: 27px;}
  .use-case-copy h3 {font-size: 31px;}
  .use-case-copy>p {font-size: 13px;}
  .check-list li {font-size: 12px;}
  .demo-surface {padding: 24px;}
  .demo-body {padding: 21px;}
  .demo-body h4 {font-size: 23px;}
  .demo-body>p, .demo-note {font-size: 11px;}
  .approach-card {grid-template-columns: 38px 1fr; gap: 0 16px; padding: 21px 0 3px;}
  .approach-number {font-size: 29px;}
  .approach-card h3 {font-size: 22px;}
  .approach-card>p {font-size: 12px;}
  .deliverable strong {font-size: 12px;}
  .approach-footer p {font-size: 12px;}
  .about-visual {min-height: 350px; padding: 24px;}
  .large-monogram {font-size: 135px;}
  .about-card-top {font-size: 8px;}
  .about-card-bottom strong {font-size: 19px;}
  .about-card-bottom>div>span {font-size: 9px;}
  .about-copy>p:not(.eyebrow) {font-size: 14px;}
  .about-details>span {font-size: 12px;}
  .faq-intro h2 {font-size: 33px;}
  .faq-list summary {font-size: 13px;}
  .contact-section {padding-block: 62px;}
  .contact-copy h2 {font-size: 39px;}
  .contact-copy>p:not(.eyebrow) {font-size: 14px;}
  .contact-expectations>span {font-size: 12px;}
  .contact-form-panel {padding: 22px; border-radius: 17px;}
  .preview-notice p, .preview-notice strong {font-size: 10px;}
  .field label {font-size: 12px;}
  .field input, .field textarea, .field select {font-size: 16px;}
  .form-privacy {font-size: 10px;}
}

@media (prefers-reduced-motion: reduce) {
  .button, .use-case-tab {transition: none; transform: none;}
}

/* QA refinement: deliberate section boundaries and readable supporting detail.
   Keep the established palette, proportions and elevation language. */
:root {--section-space: 104px; --readable-muted: #4f6580;}
.section {padding-block: var(--section-space);}
.possibilities {border-top: 1px solid #dce5f1;}
.approach-section {background: #fff; border-block: 1px solid #dce5f1;}
.about-section {padding-bottom: var(--section-space);}
.faq-section {border-top: 1px solid #dce5f1; padding-block: var(--section-space);}
.language {display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 6px; border-radius: 7px;}
.language-switch {gap: 3px;}
.language:hover {background: #edf3fd;}
.header-inner nav a {display: inline-flex; align-items: center; min-height: 44px;}
.menu-toggle {min-width: 44px; min-height: 44px;}
.text-link, .reset-button {min-height: 44px;}
.reset-button {min-width: 44px;}
.flow-label, .step-number, .flow-ai .step-number, .sample-label, .demo-count {color: var(--readable-muted);}
.flow-label {font-size: 11px; letter-spacing: .065em;}
.step-number {font-size: 12px;}
.flow-card {min-width: 0;}
.flow-card strong {font-size: 14px;}
.sample-label {font-size: 11px; letter-spacing: .045em; line-height: 1.5;}
.art-bottom {flex-wrap: wrap; gap: 12px;}
.art-kicker, .art-chip, .ai-pills span {font-size: 11px;}
.human-check {font-size: 12px;}
.demo-stage, .demo-title {font-size: 12px;}
.demo-disclaimer {font-size: 12px; color: var(--readable-muted); line-height: 1.7;}
.demo-body>p, .demo-note {font-size: 14px;}
.deliverable>span {font-size: 11px; color: #3f608f;}
.field input, .field textarea, .field select {border-color: #8292aa;}
.field input::placeholder, .field textarea::placeholder {color: #586d87; opacity: 1;}
.form-privacy, .preview-notice p {font-size: 12px; color: var(--readable-muted);}
.footer-brand>span {font-size: 11px;}

@media (max-width: 1000px) {
  :root {--section-space: 84px;}
  .header-inner {gap: 12px;}
  .header-actions {gap: 12px;}
}
@media (max-width: 780px) {
  :root {--section-space: 72px;}
  .header-inner nav.open {gap: 8px;}
  .demo-surface {border-left: 0;}
}
@media (max-width: 440px) {
  :root {--section-space: 64px;}
  .brand-name>span {display: none;}
  .brand-mark {font-size: 27px;}
  .brand {gap: 7px;}
  .header-inner {gap: 8px;}
  .header-actions {gap: 6px;}
  .language, .language-switch {font-size: 12px;}
  .flow-card {padding-inline: 8px; gap: 9px;}
  .flow-ai, .flow-person {margin-left: 0;}
  .flow-incoming {max-width: none;}
  .flow-card strong {font-size: 13px;}
  .flow-label {font-size: 10px;}
  .hero .eyebrow {font-size: 10px;}
  .hero-signoff p, .hero-signoff strong {font-size: 12px;}
  .principles>div>span {font-size: 12px;}
  .use-case-copy>p, .section-intro>p, .approach-card>p {font-size: 14px;}
  .check-list li, .deliverable strong, .approach-footer p {font-size: 13px;}
  .faq-list summary {font-size: 15px;}
  .about-card-top, .about-card-bottom>div>span {font-size: 11px;}
  .contact-expectations>span {font-size: 13px;}
}
@media (max-width: 360px) {
  .site-header:not(.sample-header) .brand-name {font-size: 12px;}
  .site-header:not(.sample-header) .brand {gap: 4px;}
}