:root {
   --navy: #111b38;
   --muted: #667083;
   --lime: #2563eb;
   --blue: #2563eb;
   --blue-light: #60a5fa;
   --blue-dark: #1d4ed8;
   --paper: #fff;
   --line: #e1e5eb;
   --pale: #f4f6fa;
   --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 105px;
}

body {
   margin: 0;
   background: var(--paper);
   color: var(--navy);
   font-family: var(--font);
   font-size: 16px;
   line-height: 1.6;
}

button,
input,
select,
textarea {
   font-family: var(--font);
}

button,
input,
select {
   font: inherit;
}

button,
a,
input,
select,
summary {
   -webkit-tap-highlight-color: transparent;
}

button,
a {
   touch-action: manipulation;
}

a {
   color: inherit;
   text-decoration: none;
}

button {
   cursor: pointer;
}

button:disabled {
   cursor: default;
}

button {
   border: 0;
}

img {
   max-width: 100%;
   height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
   margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--display);
   font-weight: 600;
   line-height: 1.15;
}

h1,
h2 {
   letter-spacing: -.03em;
}

h2 {
   font-size: clamp(2.15rem, 3.8vw, 3.35rem);
}

h2 em {
   font-style: normal;
   color: #727e94;
}

h3 {
   letter-spacing: -.02em;
}

.wrap {
   width: min(1260px, calc(100% - 96px));
   margin-inline: auto;
}

.section {
   padding-block: 110px;
}

.eyebrow {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .13em;
   display: block;
   line-height: 1.7;
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 26px;
   padding: 17px 23px;
   border-radius: 7px;
   line-height: 1.3;
   font-size: 14px;
   font-weight: 650;
   transition: background .2s, transform .2s;
   min-height: 50px;
   text-align: center;
}

.button span {
   font-size: 22px;
   font-weight: 400;
}

.button:hover {
   transform: translateY(-2px);
}

.button-dark {
   color: #fff;
   background: var(--navy);
}

.button-dark:hover {
   background: #293959;
}

.button-lime {
   background: var(--blue);
   color: #ffffff;
}

.button-lime:hover {
   background: var(--blue-dark);
}

.text-link {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   font-size: 14px;
   font-weight: 650;
   background: none;
   padding: 10px 0
}

.text-link:hover {
   text-decoration: underline;
   text-underline-offset: 5px
}

.text-link span {
   font-size: 21px
}

:focus-visible {
   outline: 3px solid #5a82de;
   outline-offset: 5px
}

.skip {
   position: fixed;
   top: -90px;
   left: 15px;
   background: white;
   padding: 10px;
   z-index: 100
}

.skip:focus {
   top: 10px
}

.header {
   position: sticky;
   top: 0;
   background: rgba(255, 255, 255, .95);
   backdrop-filter: blur(14px);
   z-index: 20;
   border-bottom: 1px solid var(--line)
}

.nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 88px;
   gap: 30px
}

.brand {
   display: block;
   width: 170px;
   flex-shrink: 0;
   line-height: 1
}

.brand img {
   width: 100%;
   object-fit: contain;
   max-height: 48px
}

.desktop-nav {
   display: flex;
   gap: 32px;
   font-size: 14px;
   font-weight: 500
}

.desktop-nav a:hover {
   color: #657687
}

.nav-cta {
   padding: 12px 18px;
   min-height: 44px
}

.menu-toggle,
.mobile-nav {
   display: none
}

.hero {
   display: grid;
   grid-template-columns: 1.14fr 1fr;
   gap: 70px;
   align-items: center;
   padding-top: 70px;
   padding-bottom: 80px
}

.hero .eyebrow {
   display: flex;
   align-items: center;
   gap: 9px;
   letter-spacing: .09em;
   font-size: 11px
}

.tiny-star {
   font-size: 23px;
   color: #557333
}

h1 {
   font-size: clamp(2.75rem, 4.4vw, 4.3rem);
   line-height: 1.11;
   margin: 22px 0 24px;
   font-weight: 750
}

h1>span {
   color: #748097
}

.hero-intro {
   font-size: 17px;
   max-width: 455px;
   color: #596478;
   line-height: 1.8
}

.hero-actions {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
   margin-top: 30px
}

.hero-assurance {
   display: flex;
   gap: 16px;
   margin-top: 22px;
   font-size: 12px;
   color: #647085
}

.hero-assurance span+span:before {
   content: '·';
   margin-right: 16px
}

.hero-visual {
   background: var(--navy);
   border-radius: 16px;
   color: white;
   padding: 25px 24px 22px;
   position: relative;
   box-shadow: 0 20px 60px -25px #18295266;
   transform: rotate(1deg)
}

.visual-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 35px
}

.mono {
   font-size: 10px;
   letter-spacing: .13em;
   color: #cad2e0
}

.corner-mark {
   font-size: 24px;
   color: var(--lime)
}

.conversation {
   background: white;
   color: var(--navy);
   border-radius: 10px;
   padding: 22px 20px 0;
   transform: rotate(-1deg);
   box-shadow: 0 14px 30px #02081d44
}

.conversation-head {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 600;
   font-size: 12px;
   margin-bottom: 24px
}

.conversation-icon {
   font-size: 22px
}

.demo-pill {
   border: 1px solid #dce1e9;
   background: #f5f6f9;
   color: #697385;
   font-size: 10px;
   padding: 3px 7px;
   border-radius: 4px;
   margin-left: auto;
   white-space: nowrap
}

.user-message {
   margin-left: 35px;
   padding: 16px 18px;
   border-radius: 13px 13px 3px 13px;
   background: #eef1f6;
   font-size: 15px;
   line-height: 1.65;
   min-height: 107px
}

.response {
   display: flex;
   gap: 10px;
   margin-block: 24px 22px;
   font-size: 12px;
   color: #627085
}

.response-icon {
   font-size: 21px;
   color: #1f2940
}

.response-lines {
   margin-top: 12px
}

.response-lines i {
   display: block;
   height: 5px;
   background: #e9edf2;
   width: 95%;
   border-radius: 4px;
   margin: 8px 0
}

.response-lines i:last-child {
   width: 68%
}

.sponsored-card {
   border: 1px solid #c2d79d;
   background: #f4f9ec;
   border-radius: 8px;
   padding: 15px 16px;
   position: relative
}

.ad-overline {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 9px;
   font-weight: 650;
   letter-spacing: .08em;
   color: #506733
}

.ad-overline>span:last-child {
   font-size: 19px
}

.ad-content {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-top: 9px
}

.ad-initial {
   display: grid;
   place-items: center;
   flex-shrink: 0;
   width: 42px;
   height: 46px;
   border-radius: 6px;
   background: var(--navy);
   font-family: var(--display);
   font-size: 22px;
   color: var(--lime)
}

.ad-content h3 {
   font-size: 15px;
   margin-bottom: 6px
}

.ad-content p {
   font-size: 12px;
   color: #62714f;
   line-height: 1.5
}

.conversation-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 10px;
   color: #6c7689;
   padding: 17px 0
}

.scenario-controls {
   display: flex;
   gap: 6px;
   margin-top: 23px;
   justify-content: center
}

.scenario-controls button {
   font-size: 12px;
   padding: 8px 19px;
   background: #ffffff0b;
   color: #c0c8db;
   border: 1px solid #ffffff1a;
   border-radius: 5px
}

.scenario-controls button.selected {
   background: var(--lime);
   border-color: var(--lime);
   color: var(--navy)
}

.visual-disclaimer {
   text-align: center;
   font-size: 10px;
   line-height: 1.6;
   color: #a7b2c8;
   margin-top: 14px
}

.visual-bottom {
   display: flex;
   align-items: center;
   gap: 13px;
   margin-top: 24px;
   font-size: 9px;
   letter-spacing: .1em;
   color: #afbad0
}

.visual-rule {
   height: 1px;
   background: #45516b;
   flex: 1
}

.channel-strip {
   border-block: 1px solid var(--line);
   background: #fafbfc
}

.channel-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-block: 29px;
   gap: 45px
}

.channel-inner p {
   font-size: 12px;
   color: #7b8494;
   line-height: 1.65
}

.channel-inner strong {
   color: #4b5770;
   font-weight: 500
}

.channels {
   display: flex;
   gap: 75px;
   align-items: center
}

.channels>span {
   font-family: var(--display);
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.04em;
   color: #738093
}

.channels>.channel-active {
   color: var(--navy);
   display: flex;
   gap: 14px;
   align-items: center
}

.channel-active small {
   font-size: 8px;
   font-family: var(--font);
   letter-spacing: .06em;
   font-weight: 650;
   background: var(--lime);
   padding: 5px 7px;
   border-radius: 3px
}

.section-heading {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 70px;
   margin-bottom: 44px
}

.section-heading .eyebrow,
.follow-copy .eyebrow,
.faq .eyebrow {
   margin-bottom: 19px;
   color: #6f7b90
}

.section-heading>p {
   max-width: 340px;
   color: var(--muted);
   font-size: 15px;
   line-height: 1.8
}

.contrast-grid {
   display: grid;
   grid-template-columns: 1fr 1.3fr;
   border: 1px solid var(--line);
   border-radius: 12px;
   overflow: hidden
}

.before,
.after {
   padding: 36px 40px
}

.before {
   background: #f7f8fa;
   border-right: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   justify-content: center
}

.caps {
   font-size: 10px;
   letter-spacing: .13em;
   font-weight: 700;
   color: #778297
}

.search-example {
   display: flex;
   gap: 16px;
   align-items: center;
   margin: 22px 0 15px;
   padding: 14px 18px;
   border: 1px solid #dfe4ec;
   background: white;
   border-radius: 8px;
   font-size: 20px;
   color: #8390a1
}

.search-example>span:first-child {
   font-size: 27px
}

.before>p {
   font-size: 13px;
   color: #8590a1
}

.quote {
   font-family: var(--display);
   font-size: 24px;
   line-height: 1.5;
   font-weight: 500;
   letter-spacing: -.035em;
   margin: 20px 0
}

.quote strong {
   font-weight: 700
}

.intent-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.intent-chips span {
   font-size: 10px;
   background: #edf3e6;
   color: #50633c;
   padding: 6px 10px;
   border-radius: 4px
}

.bottom-line {
   font-size: 20px;
   text-align: center;
   margin-top: 34px;
   color: #7e8899;
   letter-spacing: -.02em
}

.bottom-line strong {
   font-weight: 550;
   color: var(--navy)
}

.dark-section {
   background: var(--navy);
   color: white
}

.dark-section .eyebrow {
   color: #bcc7dd
}

.dark-section h2 em {
   color: var(--lime)
}

.dark-section .section-heading>p {
   color: #a9b5ce
}

.service-grid {
   display: grid;
   grid-template-columns: 1.12fr 1fr 1fr;
   gap: 18px
}

.service-card {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background: #1b2643;
   border: 1px solid #34415c;
   border-radius: 10px;
   padding: 24px;
   min-width: 0
}

.service-number {
   font-family: var(--display);
   color: #8291ac;
   font-size: 12px
}

.service-visual {
   height: 160px;
   margin: 20px 0 25px
}

.service-card h3 {
   font-size: 23px;
   line-height: 1.3;
   margin-bottom: 13px
}

.service-card p {
   font-size: 14px;
   line-height: 1.8;
   color: #b6c1d6
}

.service-tag {
   display: block;
   font-size: 9px;
   letter-spacing: .1em;
   margin-top: 25px;
   color: #93a4c2
}

.intent-map {
   display: flex;
   flex-direction: column;
   gap: 7px;
   align-items: center;
   justify-content: center;
   font-size: 12px
}

.intent-map>span {
   border: 1px solid #43516b;
   border-radius: 5px;
   padding: 6px 12px
}

.intent-map i {
   font-style: normal;
   color: #8291a9;
   line-height: 1
}

.intent-map strong {
   font-weight: 600;
   color: #172535;
   background: var(--lime);
   padding: 9px 14px;
   border-radius: 5px
}

.page-preview {
   max-width: 210px;
   margin-inline: auto;
   width: 100%;
   padding: 0 17px 16px;
   background: #edf1f7;
   color: var(--navy);
   border-radius: 7px;
   transform: rotate(-3deg)
}

.mini-browser {
   display: flex;
   gap: 4px;
   border-bottom: 1px solid #d3dae6;
   padding: 9px 0;
   margin-bottom: 13px
}

.mini-browser i {
   width: 4px;
   height: 4px;
   background: #a7b1c2;
   border-radius: 50%
}

.page-preview strong {
   font-size: 20px;
   line-height: 1.25;
   display: block;
   font-family: var(--display);
   letter-spacing: -.03em
}

.mini-cta {
   display: block;
   width: fit-content;
   background: var(--navy);
   color: var(--lime);
   font-size: 8px;
   padding: 7px 10px;
   margin-top: 13px;
   border-radius: 3px
}

.optimize-visual {
   padding-top: 19px;
   display: flex;
   flex-direction: column;
   gap: 14px;
   justify-content: center
}

.optimize-visual>div {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 10px;
   white-space: nowrap
}

.test-bar {
   width: 45%;
   height: 16px;
   background: #697b9c;
   border-radius: 0 3px 3px 0
}

.test-bar.second {
   width: 67%;
   background: var(--lime)
}

.optimize-visual small {
   font-size: 9px;
   letter-spacing: .1em;
   color: #8d9fbd;
   margin-top: 7px
}

.dark-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 35px;
   margin-top: 40px
}

.dark-bottom p {
   font-size: 13px;
   line-height: 1.85;
   color: #98a8c4
}

.dark-bottom strong {
   font-weight: 450;
   color: #e3e8f2
}

.follow-up {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 100px;
   align-items: center
}

.follow-copy>p {
   margin-top: 24px;
   color: var(--muted);
   max-width: 450px;
   font-size: 16px;
   line-height: 1.8
}

.check-list {
   list-style: none;
   padding: 0;
   margin: 24px 0
}

.check-list li {
   font-size: 14px;
   margin: 14px 0;
   display: flex;
   gap: 12px;
   align-items: center
}

.check-list li:before {
   content: '✓';
   border: 1px solid #d6deca;
   color: #526938;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   font-size: 10px;
   display: grid;
   place-items: center;
   flex-shrink: 0
}

.fine-print {
   font-size: 11px !important;
   color: #7a8699 !important;
   line-height: 1.65
}

.follow-copy>.fine-print {
   margin-top: 10px
}

.handoff {
   padding: 28px 26px;
   border: 1px solid #dfe5ee;
   border-radius: 12px;
   background: #f4f6fa;
   box-shadow: 0 20px 45px -32px #18284e66
}

.handoff-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   margin-bottom: 29px;
   font-size: 10px;
   letter-spacing: .07em;
   color: #65738b
}

.journey-step {
   background: white;
   border: 1px solid #e0e5ed;
   border-radius: 8px;
   padding: 21px 17px;
   display: flex;
   gap: 13px;
   align-items: flex-start
}

.step-icon {
   font-size: 10px;
   font-weight: 700;
   flex-shrink: 0;
   background: #edf1f7;
   border-radius: 5px;
   padding: 5px 7px
}

.journey-step h3 {
   font-size: 15px;
   margin-top: 4px
}

.journey-step p {
   font-size: 12px;
   line-height: 1.7;
   color: #748096;
   margin-top: 5px
}

.step-check {
   font-size: 14px;
   color: #667d43;
   margin-left: auto
}

.journey-connector {
   width: 1px;
   height: 25px;
   background: #bcc8da;
   margin-left: 32px
}

.voice-step {
   border-color: #becfa7;
   background: #f6faef
}

.waveform {
   height: 30px;
   display: flex;
   gap: 4px;
   align-items: center;
   margin-top: 17px
}

.waveform i {
   width: 3px;
   border-radius: 4px;
   background: #6f8c47;
   height: 10px
}

.waveform i:nth-child(3n) {
   height: 25px
}

.waveform i:nth-child(4n) {
   height: 17px
}

.waveform i:nth-child(5n) {
   height: 30px
}

.start-section {
   background: #f5f7fa;
   border-block: 1px solid #e4e8ee
}

.process-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 45px;
   margin-top: 56px
}

.process-grid article {
   border-top: 1px solid #cdd6e2;
   padding-top: 24px;
   position: relative
}

.process-grid article:before {
   content: '';
   width: 30px;
   height: 3px;
   background: var(--navy);
   position: absolute;
   top: -2px;
   left: 0
}

.process-grid article>span {
   font-size: 10px;
   letter-spacing: .1em;
   font-weight: 650;
   color: #79869b
}

.process-grid h3 {
   font-size: 24px;
   margin: 19px 0 11px
}

.process-grid p {
   font-size: 14px;
   line-height: 1.8;
   color: var(--muted);
   max-width: 290px
}

.faq {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 90px
}

.faq-list details {
   border-bottom: 1px solid var(--line)
}

.faq-list details:first-child {
   border-top: 1px solid var(--line)
}

summary {
   list-style: none;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 25px;
   padding: 22px 0;
   font-size: 15px;
   font-weight: 600
}

summary::-webkit-details-marker {
   display: none
}

details:not(.faq-item) summary>span {
   font-size: 25px;
   font-weight: 400;
   color: #748299;
   transition: transform .2s
}

details:not(.faq-item)[open] summary>span {
   transform: rotate(45deg)
}

details>p {
   font-size: 14px;
   color: var(--muted);
   line-height: 1.85;
   padding: 0 35px 25px 0
}

.closing {
   background: var(--lime);
   border-radius: 14px;
   padding: 45px 54px 49px;
   margin-bottom: 65px
}

.closing-top {
   display: flex;
   justify-content: space-between;
   align-items: center
}

.closing-star {
   font-size: 50px;
   line-height: 1
}

.closing h2 {
   font-size: clamp(2.2rem, 4.3vw, 4rem);
   margin-top: 24px
}

.closing h2 em {
   color: #647b40
}

.closing-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 35px;
   margin-top: 28px
}

.closing-bottom p {
   font-size: 14px;
   line-height: 1.8;
   color: #51683a
}

.footer {
   padding-bottom: 28px
}

.footer-top,
.footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px
}

.footer-top {
   padding-bottom: 30px;
   border-bottom: 1px solid var(--line);
   font-size: 13px
}

.footer-top>span {
   color: #7a8597
}

.footer-bottom {
   padding-top: 24px;
   font-size: 10px;
   color: #8690a2;
   line-height: 1.8
}

.footer-bottom a {
   font-size: 12px;
   color: #586680
}

.mobile-cta {
   display: none
}

.reveal {
   opacity: 1
}

.js-motion .reveal {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity .7s, transform .7s
}

.js-motion .reveal.visible {
   opacity: 1;
   transform: translateY(0)
}

dialog {
   border: none;
   padding: 40px;
   width: min(490px, calc(100% - 32px));
   border-radius: 15px;
   color: var(--navy);
   max-height: 90dvh;
   box-shadow: 0 30px 100px #06112d55
}

dialog::backdrop {
   background: #07132bac;
   backdrop-filter: blur(5px)
}

body.modal-open {
   overflow: hidden
}

.close-dialog {
   position: absolute;
   right: 19px;
   top: 12px;
   font-size: 29px;
   color: #6a778c;
   background: transparent;
   width: 38px;
   height: 38px
}

.close-dialog:hover {
   color: var(--navy)
}

dialog .eyebrow {
   font-size: 10px;
   margin-top: 10px
}

dialog h2 {
   font-size: 35px;
   margin-top: 15px
}

dialog>p {
   font-size: 14px;
   color: var(--muted);
   margin: 14px 0 20px
}

form {
   display: grid;
   gap: 14px
}

label {
   font-size: 12px;
   font-weight: 600;
   display: grid;
   gap: 6px
}

input,
select {
   width: 100%;
   min-width: 0;
   max-width: 100%;
   background: #f7f8fb;
   border: 1px solid #dce2eb;
   border-radius: 6px;
   padding: 12px;
   font-size: 16px;
   color: var(--navy);
   outline-offset: 1px
}

form .button {
   margin-top: 7px
}

form .fine-print {
   text-align: center
}

.email-fallback p {
   font-size: 14px;
   color: var(--muted);
   margin: 18px 0
}

.email-fallback .text-link {
   margin-left: 15px
}

@media(min-width:1500px) {
   .hero {
      gap: 85px
   }

   .hero h1 {
      font-size: 4.5rem
   }
}

@media(max-width:1150px) {
   .wrap {
      width: calc(100% - 64px)
   }

   .hero {
      gap: 40px
   }

   h1 {
      font-size: 3.2rem
   }

   .hero-visual {
      padding: 21px 18px
   }

   .hero-intro {
      font-size: 16px
   }

   .channels {
      gap: 35px
   }

   .channel-active small {
      display: none
   }

   .follow-up {
      gap: 50px
   }

   .section-heading {
      gap: 40px
   }

   .service-card {
      padding: 20px
   }

   .service-card h3 {
      font-size: 21px
   }

   .faq {
      gap: 50px
   }

   .hero-assurance {
      gap: 10px;
      font-size: 11px
   }

   .hero-assurance span+span:before {
      margin-right: 10px
   }
}

@media(max-width:900px) {
   .wrap {
      width: calc(100% - 48px)
   }

   .nav {
      height: 76px
   }

   .desktop-nav {
      gap: 20px;
      font-size: 12px
   }

   .brand {
      width: 147px
   }

   .nav-cta {
      font-size: 12px;
      gap: 14px
   }

   .hero {
      gap: 30px;
      padding-top: 50px;
      padding-bottom: 55px;
      grid-template-columns: 1fr 1fr
   }

   .hero .eyebrow {
      font-size: 9px
   }

   .hero h1 {
      font-size: 2.65rem
   }

   .hero-intro {
      font-size: 15px
   }

   .hero-actions .button {
      font-size: 12px;
      padding: 15px;
      gap: 13px
   }

   .hero-assurance {
      flex-wrap: wrap;
      gap: 7px
   }

   .hero-visual {
      padding: 18px 13px
   }

   .conversation {
      padding: 18px 14px 0
   }

   .visual-top {
      margin-bottom: 22px
   }

   .mono {
      font-size: 8px
   }

   .user-message {
      margin-left: 10px;
      font-size: 13px;
      padding: 12px;
      min-height: 108px
   }

   .conversation-head {
      font-size: 10px;
      gap: 6px
   }

   .response {
      font-size: 11px;
      margin-block: 17px
   }

   .ad-content h3 {
      font-size: 13px
   }

   .ad-content p {
      font-size: 10px
   }

   .ad-initial {
      width: 32px;
      height: 38px;
      font-size: 18px
   }

   .sponsored-card {
      padding: 12px
   }

   .conversation-bottom {
      font-size: 8px
   }

   .visual-bottom {
      font-size: 7px
   }

   .scenario-controls button {
      padding: 7px 14px
   }

   .section {
      padding-block: 80px
   }

   .section-heading {
      gap: 28px
   }

   .section-heading>p {
      max-width: 270px;
      font-size: 14px
   }

   .before,
   .after {
      padding: 28px
   }

   .quote {
      font-size: 21px
   }

   .channels {
      gap: 27px
   }

   .channels>span {
      font-size: 19px
   }

   .service-grid {
      gap: 12px
   }

   .service-card {
      padding: 18px
   }

   .service-card h3 {
      font-size: 19px
   }

   .service-card p {
      font-size: 13px
   }

   .service-visual {
      height: 150px
   }

   .service-tag {
      font-size: 8px
   }

   .dark-bottom p {
      font-size: 12px
   }

   .dark-bottom .button {
      font-size: 12px
   }

   .follow-up {
      gap: 35px
   }

   .handoff {
      padding: 22px 15px
   }

   .journey-step {
      padding: 17px 12px;
      gap: 10px
   }

   .journey-step p {
      font-size: 11px
   }

   .journey-step h3 {
      font-size: 13px
   }

   .follow-copy>p {
      font-size: 14px
   }

   .check-list li {
      font-size: 12px
   }

   .faq {
      gap: 35px
   }

   .closing {
      padding: 35px
   }

   .closing-bottom .button {
      font-size: 12px
   }

   .closing-bottom p {
      font-size: 12px
   }

   .footer-top {
      font-size: 12px
   }
}

@media(max-width:700px) {
   .wrap {
      width: calc(100% - 40px)
   }

   .nav {
      height: 72px;
      gap: 15px
   }

   .brand {
      width: 145px
   }

   .desktop-nav,
   .nav-cta {
      display: none
   }

   .menu-toggle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      width: 44px;
      height: 44px;
      background: #f3f5f9;
      border-radius: 7px;
      padding: 12px
   }

   .menu-toggle span {
      height: 1.5px;
      width: 20px;
      background: var(--navy)
   }

   .mobile-nav:not([hidden]) {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 6px 20px 18px
   }

   .mobile-nav a,
   .mobile-nav button {
      padding: 13px 8px;
      font-size: 15px;
      text-align: left;
      border-bottom: 1px solid var(--line);
      background: transparent
   }

   .hero {
      grid-template-columns: 1fr;
      padding-top: 35px;
      gap: 40px;
      padding-bottom: 44px
   }

   .hero .eyebrow {
      font-size: 9px;
      letter-spacing: .075em
   }

   .hero h1 {
      font-size: clamp(2.65rem, 9.7vw, 4rem);
      margin: 19px 0 20px;
      line-height: 1.1
   }

   .hero-intro {
      max-width: 470px;
      font-size: 16px;
      line-height: 1.75
   }

   .hero-actions {
      margin-top: 25px;
      gap: 10px
   }

   .hero-actions .button {
      font-size: 14px;
      padding: 17px 19px;
      gap: 20px
   }

   .hero-assurance {
      font-size: 11px;
      gap: 12px;
      margin-top: 14px
   }

   .hero-assurance span+span:before {
      margin-right: 12px
   }

   .hero-visual {
      max-width: 470px;
      width: 100%;
      margin-inline: auto;
      padding: 22px 20px;
      transform: none;
      border-radius: 12px
   }

   .conversation {
      transform: none;
      padding: 22px 19px 0
   }

   .mono {
      font-size: 9px
   }

   .visual-top {
      margin-bottom: 23px
   }

   .conversation-head {
      font-size: 12px;
      gap: 9px
   }

   .user-message {
      font-size: 14px;
      padding: 16px;
      margin-left: 25px;
      min-height: 100px
   }

   .response {
      font-size: 12px;
      margin-block: 20px
   }

   .sponsored-card {
      padding: 14px
   }

   .ad-content h3 {
      font-size: 14px
   }

   .ad-content p {
      font-size: 12px
   }

   .ad-initial {
      width: 38px;
      height: 44px;
      font-size: 22px
   }

   .conversation-bottom {
      font-size: 9px
   }

   .visual-bottom {
      font-size: 8px
   }

   .scenario-controls button {
      font-size: 12px;
      padding: 8px 20px
   }

   .channel-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding-block: 23px
   }

   .channel-inner p br {
      display: none
   }

   .channel-inner p strong {
      margin-left: 5px
   }

   .channels {
      width: 100%;
      gap: 20px;
      justify-content: space-between
   }

   .channels>span {
      font-size: 19px
   }

   .section {
      padding-block: 66px
   }

   h2 {
      font-size: clamp(2.15rem, 7.7vw, 3rem)
   }

   .section-heading {
      display: block;
      margin-bottom: 29px
   }

   .section-heading .eyebrow,
   .follow-copy .eyebrow,
   .faq .eyebrow {
      font-size: 10px;
      margin-bottom: 15px
   }

   .section-heading>p {
      max-width: 100%;
      font-size: 15px;
      margin-top: 21px
   }

   .contrast-grid {
      grid-template-columns: 1fr
   }

   .before,
   .after {
      padding: 27px
   }

   .before {
      border-right: 0;
      border-bottom: 1px solid var(--line)
   }

   .search-example {
      margin: 16px 0 12px;
      font-size: 20px
   }

   .quote {
      font-size: 23px
   }

   .bottom-line {
      font-size: 18px;
      max-width: 290px;
      margin: 25px auto 0;
      line-height: 1.5
   }

   .service-grid {
      grid-template-columns: 1fr;
      gap: 15px
   }

   .service-card {
      padding: 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 22px
   }

   .service-number {
      grid-column: 1/-1
   }

   .service-card>div:last-child {
      align-self: center
   }

   .service-visual {
      margin: 10px 0;
      height: 160px
   }

   .service-card h3 {
      font-size: 21px
   }

   .service-card p {
      font-size: 13px
   }

   .service-tag {
      font-size: 8px;
      line-height: 1.8;
      margin-top: 16px
   }

   .page-preview {
      height: 150px;
      max-width: 160px;
      padding-inline: 12px
   }

   .page-preview strong {
      font-size: 17px
   }

   .intent-map {
      font-size: 10px
   }

   .intent-map strong {
      padding: 8px 9px
   }

   .intent-map>span {
      padding: 6px 9px
   }

   .optimize-visual>div {
      font-size: 8px;
      gap: 8px
   }

   .optimize-visual small {
      font-size: 8px;
      letter-spacing: 0
   }

   .dark-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 23px;
      margin-top: 29px
   }

   .dark-bottom p {
      font-size: 13px
   }

   .dark-bottom .button {
      font-size: 14px
   }

   .follow-up {
      grid-template-columns: 1fr;
      gap: 35px
   }

   .follow-copy>p {
      font-size: 15px
   }

   .check-list li {
      font-size: 14px
   }

   .handoff {
      padding: 25px 20px
   }

   .journey-step {
      padding: 21px 16px
   }

   .journey-step h3 {
      font-size: 15px
   }

   .journey-step p {
      font-size: 12px
   }

   .process-grid {
      grid-template-columns: 1fr;
      gap: 28px;
      margin-top: 35px
   }

   .process-grid h3 {
      font-size: 23px;
      margin-top: 12px
   }

   .process-grid p {
      max-width: 100%;
      font-size: 14px
   }

   .faq {
      grid-template-columns: 1fr;
      gap: 29px
   }

   .faq summary {
      font-size: 14px;
      padding-block: 21px
   }

   .closing {
      padding: 28px 25px 30px;
      margin-bottom: 40px;
      border-radius: 10px
   }

   .closing .eyebrow {
      font-size: 9px;
      max-width: 230px
   }

   .closing-star {
      font-size: 35px
   }

   .closing h2 {
      font-size: clamp(2rem, 7.5vw, 3rem);
      margin-top: 23px
   }

   .closing h2 br {
      display: none
   }

   .closing-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 22px;
      margin-top: 22px
   }

   .closing-bottom p {
      font-size: 14px
   }

   .closing-bottom .button {
      font-size: 13px;
      gap: 20px;
      width: 100%
   }

   .footer-top {
      flex-wrap: wrap;
      gap: 23px
   }

   .footer-top>span {
      display: none
   }

   .footer-top>a:nth-child(2) {
      font-size: 12px
   }

   .footer-bottom {
      align-items: flex-start;
      flex-direction: column;
      gap: 16px
   }

   .footer {
      padding-bottom: 108px
   }

   .mobile-cta {
      display: block;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 20px max(12px, env(safe-area-inset-bottom));
      background: #ffffffed;
      border-top: 1px solid var(--line);
      z-index: 15;
      backdrop-filter: blur(10px)
   }

   .mobile-cta .button {
      width: 100%;
      font-size: 13px;
      min-height: 47px;
      padding: 12px 18px
   }

   .modal-open .mobile-cta {
      visibility: hidden
   }

   dialog {
      padding: 29px 24px
   }

   dialog h2 {
      font-size: 32px
   }
}

@media(max-width:370px) {
   .wrap {
      width: calc(100% - 32px)
   }

   .hero h1 {
      font-size: 2.5rem
   }

   .hero .eyebrow {
      font-size: 8px
   }

   .hero-actions .button {
      font-size: 12px;
      gap: 12px
   }

   .hero-visual {
      padding: 18px 13px
   }

   .conversation {
      padding: 18px 13px 0
   }

   .conversation-head {
      font-size: 10px
   }

   .service-card {
      grid-template-columns: 1fr
   }

   .service-visual {
      max-width: 210px;
      width: 100%;
      margin-inline: auto
   }

   .service-card h3 {
      font-size: 22px
   }

   .service-card p {
      font-size: 14px
   }

   .service-tag {
      font-size: 9px
   }

   .channels>span {
      font-size: 16px
   }

   .hero-assurance {
      font-size: 10px;
      gap: 8px
   }

   .hero-assurance span+span:before {
      margin-right: 8px
   }
}

.brand {
   background: transparent;
   padding: 0px;
   border-radius: 5px;
   width: 280px
}

.brand img {
   display: block;
   width: 200px;
   max-height: none
}

.hero .eyebrow,
.eyebrow,
.section-heading .eyebrow,
.follow-copy .eyebrow,
.faq .eyebrow,
.closing .eyebrow,
dialog .eyebrow {
   font-size: 12px
}

.mono,
.demo-pill,
.ad-overline,
.visual-disclaimer,
.visual-bottom,
.caps,
.intent-chips span,
.service-number,
.service-tag,
.optimize-visual small,
.handoff-head,
.process-grid article>span,
.footer-bottom,
.step-icon,
.conversation-bottom,
.hero-assurance,
.mini-cta {
   font-size: 12px
}

.fine-print {
   font-size: 12px !important
}

.ad-content p,
.journey-step p,
.response,
.conversation-head {
   font-size: 12px
}

.optimize-visual>div {
   font-size: 12px
}

.visual-bottom {
   letter-spacing: 0
}

.service-tag {
   letter-spacing: .04em
}

.hero .eyebrow {
   letter-spacing: .05em
}

.ad-overline {
   letter-spacing: .02em;
   font-size: 11px
}

.mono {
   font-size: 11px
}

.visual-disclaimer {
   font-size: 11px
}

.conversation-bottom {
   font-size: 11px
}

.channel-active small {
   font-size: 10px
}

.step-icon {
   font-size: 11px
}

.hero-assurance {
   font-size: 12px
}

.intent-map {
   font-size: 12px
}

.service-visual.optimize-visual {
   overflow: hidden
}

.test-bar {
   flex-shrink: 1
}

.hero-assurance {
   gap: 9px
}

.hero-assurance span+span:before {
   margin-right: 9px
}

@media(max-width:900px) and (min-width:701px) {
   .hero {
      grid-template-columns: 1fr
   }

   .hero-copy {
      max-width: 640px
   }

   .hero h1 {
      font-size: 3.7rem
   }

   .hero-visual {
      max-width: 530px;
      width: 100%;
      justify-self: center;
      padding: 26px
   }

   .hero-intro {
      max-width: 500px;
      font-size: 17px
   }

   .service-grid {
      grid-template-columns: 1fr
   }

   .service-card {
      display: grid;
      grid-template-columns: .75fr 1fr;
      gap: 15px
   }

   .service-number {
      grid-column: 1/-1
   }

   .service-visual {
      max-width: 240px;
      width: 100%;
      margin-inline: auto
   }

   .service-card>div:last-child {
      align-self: center
   }

   .service-card h3 {
      font-size: 26px
   }

   .service-card p {
      font-size: 15px
   }
}

@media(max-width:700px) {
   .hero .eyebrow {
      font-size: 10px
   }

   .brand {
      width: 154px
   }

   .hero-assurance {
      font-size: 11px;
      gap: 8px
   }

   .hero-assurance span+span:before {
      margin-right: 8px
   }

   .visual-bottom {
      font-size: 10px
   }

   .service-card {
      grid-template-columns: 1fr
   }

   .service-visual {
      max-width: 240px;
      width: 100%;
      margin-inline: auto;
      margin-block: 12px 20px
   }

   .service-card h3 {
      font-size: 24px
   }

   .service-card p {
      font-size: 15px
   }

   .service-tag {
      font-size: 11px
   }

   .intent-map {
      font-size: 13px
   }

   .page-preview {
      max-width: 215px
   }

   .page-preview strong {
      font-size: 21px
   }

   .mini-cta {
      font-size: 10px
   }

   .closing .eyebrow {
      font-size: 10px
   }

   .footer-bottom {
      font-size: 11px
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *:before,
   *:after {
      animation: none !important;
      transition: none !important
   }

   .js-motion .reveal {
      opacity: 1;
      transform: none
   }
}

/* ============================================================
   HERO SECTION & NAVBAR ENHANCEMENTS
   ============================================================ */
.nav {
   height: 80px
}

.desktop-nav a {
   font-size: 15px;
   font-weight: 500;
   color: #1a2238;
   transition: color .2s ease
}

.desktop-nav a:hover {
   color: #0062ff
}

.nav-cta {
   padding: 11px 24px !important;
   border-radius: 9999px !important;
   font-size: 14px !important;
   font-weight: 600 !important;
   gap: 8px !important;
   min-height: 42px !important;
   box-shadow: 0 2px 8px rgba(11, 19, 43, .12)
}

.nav-cta span {
   font-size: 16px !important;
   transition: transform .2s ease;
   display: inline-block
}

.nav-cta:hover span {
   transform: translateX(3px)
}

.hero {
   display: grid;
   grid-template-columns: 1.06fr 1fr;
   gap: 36px;
   align-items: center;
   padding-top: 28px;
   padding-bottom: 48px;
   position: relative
}

.hero-copy {
   position: relative;
   z-index: 2
}

.hero .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   letter-spacing: .12em;
   font-size: 11.5px;
   font-weight: 750;
   color: #0f172a;
   margin-bottom: 16px;
   text-transform: uppercase
}

.hero .tiny-star {
   font-size: 18px;
   color: #2563eb;
   line-height: 1;
   display: inline-block
}

.hero h1 {
   font-family: var(--display);
   font-size: clamp(2.5rem, 3.8vw, 4.1rem);
   line-height: 1.12;
   letter-spacing: -.03em;
   font-weight: 600;
   color: #0b132b;
   margin: 0 0 18px
}

.hero-subline {
   color: #718096;
   font-weight: 550;
   display: inline-block;
   margin-top: 2px;
   font-size: 38px;
}

/* Bold Animated Shining ChatGPT Word */
.chatgpt-shine {
   display: inline-block;
   font-weight: 600;
   color: #0062ff;
   background: linear-gradient(108deg, #0052d4 0%, #0062ff 22%, #60a5fa 36%, #ffffff 48%, #e0f2fe 52%, #60a5fa 64%, #0062ff 80%, #0052d4 100%);
   background-size: 260% 100%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: bold-shine-sweep 3.2s cubic-bezier(.2, .8, .4, 1) infinite;
   filter: drop-shadow(0 2px 14px rgba(0, 98, 255, .32));
   position: relative;
   white-space: nowrap
}

.chatgpt-shine::after {
   content: '';
   position: absolute;
   top: 4px;
   right: -8px;
   width: 16px;
   height: 16px;
   background: radial-gradient(circle, #ffffff 20%, #38bdf8 55%, transparent 75%);
   border-radius: 50%;
   opacity: 0;
   transform: scale(.2) rotate(0deg);
   animation: sparkle-glint 3.2s cubic-bezier(.2, .8, .4, 1) infinite;
   pointer-events: none
}

@keyframes bold-shine-sweep {
   0% {
      background-position: 130% 0
   }

   56% {
      background-position: -30% 0
   }

   100% {
      background-position: -30% 0
   }
}

@keyframes sparkle-glint {

   0%,
   34% {
      opacity: 0;
      transform: scale(.2) rotate(0deg)
   }

   48% {
      opacity: 1;
      transform: scale(1.5) rotate(45deg)
   }

   58% {
      opacity: 0;
      transform: scale(.2) rotate(90deg)
   }

   100% {
      opacity: 0;
      transform: scale(.2) rotate(90deg)
   }
}

.hero-desc {
   margin-bottom: 24px
}

.hero-lead {
   font-size: 18px;
   font-weight: 600;
   color: #1e293b;
   margin-bottom: 6px;
   line-height: 1.4;
   letter-spacing: -.015em
}

.hero-intro {
   font-size: 15.5px;
   color: #64748b;
   line-height: 1.7;
   max-width: 485px;
   margin: 0
}

.hero-actions {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
   margin-bottom: 26px
}

.hero-primary-btn {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   gap: 10px !important;
   background: #0b132b !important;
   color: #fff !important;
   padding: 13px 25px !important;
   border-radius: 9999px !important;
   font-size: 14.5px !important;
   font-weight: 650 !important;
   min-height: 48px !important;
   box-shadow: 0 4px 14px rgba(11, 19, 43, .18) !important;
   transition: all .25s cubic-bezier(.16, 1, .3, 1) !important;
   border: none;
   cursor: pointer
}

.hero-primary-btn:hover {
   background: #192545 !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 8px 22px rgba(11, 19, 43, .26) !important
}

.hero-primary-btn .btn-arrow {
   font-size: 17px;
   font-weight: 400;
   transition: transform .2s ease;
   display: inline-block
}

.hero-primary-btn:hover .btn-arrow {
   transform: translateX(4px)
}

.hero-secondary-btn {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   gap: 9px !important;
   background: #fff !important;
   color: #0b132b !important;
   padding: 12px 22px !important;
   border-radius: 9999px !important;
   font-size: 14.5px !important;
   font-weight: 650 !important;
   min-height: 48px !important;
   border: 1.5px solid #d5dce6 !important;
   box-shadow: 0 2px 6px rgba(11, 19, 43, .04) !important;
   transition: all .25s cubic-bezier(.16, 1, .3, 1) !important;
   text-decoration: none;
   cursor: pointer
}

.hero-secondary-btn:hover {
   border-color: #0b132b !important;
   background: #f8fafc !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 6px 16px rgba(11, 19, 43, .08) !important
}

.play-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #0b132b
}

.hero-benefits {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   align-items: center
}

.benefit-badge {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: #f8fafc;
   border: 1px solid #e7ecf3;
   padding: 6px 14px 6px 8px;
   border-radius: 9999px;
   font-size: 13px;
   font-weight: 600;
   color: #334155;
   box-shadow: 0 2px 5px rgba(15, 23, 42, .03);
   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
   user-select: none
}

.benefit-badge:hover {
   transform: translateY(-2px);
   box-shadow: 0 5px 12px rgba(15, 23, 42, .08);
   border-color: #cbd5e1;
   background: #fff
}

.badge-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.icon-green {
   background: #dbeafe;
   color: #2563eb
}

.icon-purple {
   background: #ede9fe;
   color: #6366f1
}

.icon-coral {
   background: #ffe4e6;
   color: #e11d48
}

.hero-visual-area {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%
}

.hero-ambient-glow {
   position: absolute;
   width: 130%;
   height: 130%;
   top: -15%;
   left: -12%;
   background: radial-gradient(circle at 65% 42%, rgba(59, 130, 246, .16) 0%, rgba(139, 92, 246, .09) 38%, transparent 68%);
   pointer-events: none;
   z-index: 0;
   filter: blur(40px)
}

.hero-illustration {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 610px;
   height: auto;
   display: block;
   object-fit: contain;
   filter: drop-shadow(0 20px 45px rgba(15, 23, 42, .08));
   animation: hero-gentle-float 6.5s ease-in-out infinite
}

@keyframes hero-gentle-float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-8px)
   }
}

@media(max-width:1150px) {
   .hero {
      gap: 28px
   }

   .hero h1 {
      font-size: clamp(2.3rem, 3.6vw, 3.5rem)
   }

   .hero-illustration {
      max-width: 510px
   }
}

@media(max-width:900px) {
   .hero {
      grid-template-columns: 1fr !important;
      gap: 35px !important;
      padding-top: 35px !important;
      padding-bottom: 50px !important
   }

   .hero-visual-area {
      max-width: 500px;
      margin-inline: auto
   }
}

@media(max-width:700px) {
   .hero {
      padding-top: 25px !important;
      padding-bottom: 35px !important
   }

   .hero h1 {
      font-size: clamp(2.2rem, 8.8vw, 3.2rem) !important
   }

   .hero-actions {
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100% !important;
      gap: 10px !important
   }

   .hero-primary-btn,
   .hero-secondary-btn {
      width: 100% !important;
      justify-content: center !important
   }

   .hero-benefits {
      gap: 8px !important
   }

   .benefit-badge {
      font-size: 12px !important;
      padding: 5px 12px 5px 6px !important
   }
}

/* ============================================================
   CHANNEL STRIP REFINEMENTS
   ============================================================ */
.channel-strip {
   border-block: 1px solid #edf1f7;
   background: #fafbfc
}

.channel-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-block: 22px;
   gap: 40px
}

.channel-label {
   display: flex;
   flex-direction: column;
   font-size: 13px;
   color: #64748b;
   line-height: 1.5;
   font-weight: 500
}

.channels {
   display: flex;
   gap: 48px;
   align-items: center
}

.channel-item {
   font-family: var(--display);
   font-size: 19px;
   font-weight: 550;
   color: #718096;
   letter-spacing: -.025em;
   transition: color .2s ease
}

.channel-item:hover {
   color: #0b132b
}

.channel-active {
   color: #0b132b !important;
   font-weight: 750 !important;
   display: inline-flex;
   align-items: center;
   gap: 12px
}

.tag-next-move {
   background: #dbeafe;
   color: #1e40af;
   font-size: 9px;
   font-weight: 800;
   letter-spacing: .06em;
   padding: 4px 7px;
   border-radius: 4px;
   line-height: 1;
   font-family: var(--font);
   display: inline-block
}

/* ============================================================
   SECTION 2: THE BUYER SHIFT (OPPORTUNITY)
   ============================================================ */
.opportunity-section {
   padding-block: 75px 85px
}

.buyer-shift-header {
   display: grid;
   grid-template-columns: 1.15fr .9fr;
   gap: 48px;
   align-items: flex-start;
   margin-bottom: 42px
}

.shift-eyebrow {
   display: inline-flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 14px
}

.eyebrow-accent-bar {
   width: 28px;
   height: 3px;
   background: #2563eb;
   border-radius: 2px;
   display: inline-block
}

.eyebrow-text {
   font-size: 11.5px;
   font-weight: 750;
   letter-spacing: .12em;
   color: #64748b;
   text-transform: uppercase
}

.buyer-shift-heading-left h2 {
   font-size: clamp(2.3rem, 3.6vw, 3.35rem);
   line-height: 1.14;
   font-weight: 600;
   color: #0b132b;
   letter-spacing: -.03em;
   margin: 0 0 16px
}

.shortlisting-text {
   color: #718096;
   font-weight: 600
}

.journey-pill {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   padding: 6px 14px 6px 8px;
   border-radius: 9999px;
   font-size: 13px;
   font-weight: 600;
   color: #1e293b;
   margin-top: 4px
}

.journey-pill-icon {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: #dbeafe;
   color: #2563eb;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.buyer-shift-heading-right {
   border-left: 1px solid #e2e8f0;
   padding-left: 36px;
   margin-top: 24px
}

.buyer-shift-heading-right p {
   font-size: 16px;
   line-height: 1.75;
   color: #64748b;
   margin: 0
}

.buyer-shift-heading-right strong {
   color: #0b132b;
   font-weight: 700
}

/* Comparison Grid Cards */
.comparison-grid-wrapper {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1.15fr;
   gap: 24px;
   align-items: stretch
}

.comparison-card {
   border-radius: 16px;
   padding: 28px;
   display: flex;
   flex-direction: column;
   justify-content: space-between
}

/* Left Card: Old Search */
.card-old {
   background: #f8fafc;
   border: 1px solid #e2e8f0
}

.comp-card-header {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 20px
}

.comp-icon-box {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.icon-search-box {
   background: #fff;
   border: 1px solid #e2e8f0;
   color: #334155
}

.comp-title {
   font-size: 11.5px;
   font-weight: 750;
   letter-spacing: .08em;
   color: #334155;
   margin: 0;
   text-transform: uppercase
}

.comp-subtitle {
   font-size: 12px;
   color: #64748b;
   margin-top: 2px;
   display: block
}

.search-bar-mock {
   background: #fff;
   border: 1.5px solid #e2e8f0;
   border-radius: 10px;
   padding: 13px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 14px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .02)
}

.search-bar-content {
   display: flex;
   align-items: center;
   gap: 12px
}

.search-bar-icon {
   color: #64748b;
   flex-shrink: 0
}

.search-query-text {
   color: #0f172a;
   font-size: 14.5px;
   font-weight: 550
}

.search-clear-icon {
   color: #94a3b8;
   font-size: 13px;
   font-weight: 600;
   cursor: default
}

.comp-caption {
   font-size: 13.5px;
   color: #64748b;
   line-height: 1.55;
   margin: 0 0 24px
}

.old-behavior-steps {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   margin-top: auto;
   padding-top: 18px;
   border-top: 1px solid #eef2f6
}

.behavior-step {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 550;
   color: #64748b
}

.step-arrow {
   color: #cbd5e1;
   font-size: 13px
}

/* Center Arrow Connector */
.comparison-connector {
   position: absolute;
   left: calc(100% * 1 / 2.15);
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 5;
   pointer-events: none
}

.connector-circle {
   width: 44px;
   height: 44px;
   background: #fff;
   border: 1.5px solid #e2e8f0;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
   color: #0b132b;
   font-size: 18px;
   font-weight: 600
}

/* Right Card: New Buying Conversation */
.card-new {
   background: #fff;
   border: 1.5px solid #bfdbfe;
   position: relative;
   box-shadow: 0 10px 32px -12px rgba(37, 99, 235, .14)
}

.card-sparkles {
   position: absolute;
   top: 22px;
   right: 26px;
   pointer-events: none
}

.icon-chat-box {
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   color: #2563eb
}

.prompt-box-mock {
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 16px 18px;
   margin-bottom: 14px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .02)
}

.prompt-query-text {
   font-size: 14.5px;
   font-weight: 650;
   color: #0f172a;
   line-height: 1.5;
   margin: 0 0 14px
}

.intent-tags-row {
   display: flex;
   flex-wrap: wrap;
   gap: 7px
}

.intent-tag {
   background: #eff6ff;
   border: 1px solid #dbeafe;
   color: #1e40af;
   font-size: 11px;
   font-weight: 600;
   padding: 3px 8px;
   border-radius: 5px;
   display: inline-flex;
   align-items: center;
   gap: 4px
}

.tag-check {
   color: #2563eb;
   font-weight: 700
}

/* Recommended Product Card */
.recommended-product-card {
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   padding: 12px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .02);
   margin-top: auto
}

.product-left {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0
}

.product-image {
   width: 54px;
   height: 54px;
   object-fit: contain;
   border-radius: 6px;
   flex-shrink: 0;
   border: 1px solid #f1f5f9;
   background: #fff
}

.product-details {
   min-width: 0
}

.recommended-pill {
   background: #dbeafe;
   color: #1e40af;
   font-size: 9.5px;
   font-weight: 750;
   padding: 2px 7px;
   border-radius: 4px;
   display: inline-block;
   margin-bottom: 2px;
   text-transform: capitalize;
   line-height: 1.3
}

.product-name {
   font-size: 14px;
   font-weight: 750;
   color: #0f172a;
   margin: 0;
   line-height: 1.2
}

.product-model {
   font-size: 11.5px;
   color: #475569;
   font-weight: 550;
   display: block
}

.product-tagline {
   font-size: 11px;
   color: #64748b;
   margin: 2px 0 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 250px
}

.product-right {
   text-align: right;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 2px
}

.sponsored-badge {
   font-size: 10px;
   color: #94a3b8;
   font-weight: 500
}

.product-stars {
   color: #f59e0b;
   font-size: 11px;
   letter-spacing: 1.5px;
   margin: 2px 0
}

.view-details-link {
   color: #0066ff;
   font-size: 12px;
   font-weight: 650;
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 3px;
   transition: gap .2s ease
}

.view-details-link:hover {
   text-decoration: underline;
   gap: 5px
}

/* Bottom Banner */
.buyer-shift-bottom-banner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin-top: 44px;
   text-align: left
}

.banner-target-icon {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #2563eb;
   flex-shrink: 0
}

.banner-text-content h4 {
   font-size: 16.5px;
   font-weight: 750;
   color: #0b132b;
   margin: 0 0 2px
}

.banner-text-content p {
   font-size: 14px;
   color: #64748b;
   margin: 0
}

.highlight-growth {
   color: #2563eb;
   font-weight: 700
}

/* Responsive adjustments for Section 2 */
@media(max-width:1050px) {
   .buyer-shift-header {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .buyer-shift-heading-right {
      border-left: none;
      padding-left: 0;
      margin-top: 0
   }

   .comparison-grid-wrapper {
      grid-template-columns: 1fr;
      gap: 36px
   }

   .comparison-connector {
      display: none
   }

   .channels {
      gap: 28px
   }
}

@media(max-width:768px) {
   .channel-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px
   }

   .channels {
      width: 100%;
      justify-content: space-between;
      gap: 16px
   }

   .channel-item {
      font-size: 16px
   }

   .comparison-card {
      padding: 20px
   }

   .recommended-product-card {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px
   }

   .product-right {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-top: 10px;
      border-top: 1px solid #f1f5f9
   }

   .buyer-shift-bottom-banner {
      flex-direction: column;
      text-align: center;
      gap: 12px
   }
}

/* ============================================================
   SECTION 3: OUR APPROACH (DARK SECTION)
   ============================================================ */
.dark-section {
   background: #081022;
   color: #ffffff;
   padding-block: 85px 95px;
}

.approach-section {
   padding-block: 0;
}

.approach-eyebrow {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11.5px;
   font-weight: 750;
   letter-spacing: 0.12em;
   margin-bottom: 16px;
   text-transform: uppercase;
}

.eyebrow-accent-num {
   color: #60a5fa;
}

.eyebrow-rest {
   color: #7d8ea7;
}

.dark-section h2 {
   font-size: clamp(2.4rem, 4vw, 3.5rem);
   line-height: 1.15;
   font-weight: 600;
   letter-spacing: -0.03em;
   color: #ffffff;
   margin: 0;
}

.lime-highlight {
   color: #60a5fa;
}

.dark-section .section-heading>p {
   color: #8e9cb5;
   font-size: 15.5px;
   line-height: 1.75;
   max-width: 360px;
}

/* 3-Cards Process Grid with Connectors */
.approach-process-container {
   display: grid;
   grid-template-columns: 1fr auto 1fr auto 1fr;
   align-items: center;
   gap: 16px;
   margin-top: 50px;
}

.approach-card {
   background: #0e172e;
   border: 1px solid #1e2c4c;
   border-radius: 16px;
   padding: 26px 22px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 440px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
   transition: transform 0.25s ease, border-color 0.25s ease;
}

.approach-card:hover {
   transform: translateY(-4px);
   border-color: #2e4370;
}

/* Step Badges (01, 02, 03) */
.card-step-badge {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 750;
   line-height: 1;
   margin-bottom: 16px;
}

.badge-lime {
   border: 1.5px solid #60a5fa;
   color: #60a5fa;
   background: rgba(96, 165, 250, 0.12);
}

.badge-white {
   border: 1.5px solid rgba(255, 255, 255, 0.35);
   color: #ffffff;
   background: rgba(255, 255, 255, 0.05);
}

/* Process Connectors (Between Cards) */
.process-connector {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   width: 40px;
}

.process-connector::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   height: 1px;
   border-top: 1.5px dashed rgba(96, 165, 250, 0.45);
   z-index: 1;
}

.connector-circle-dark {
   position: relative;
   z-index: 2;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.25);
   background: #081022;
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 600;
}

/* Visual Mock: Card 1 (Flow Pills) */
.approach-visual {
   height: 185px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 22px;
}

.visual-intent {
   flex-direction: column;
   gap: 6px;
}

.flow-pill {
   width: 100%;
   max-width: 205px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 10px;
   padding: 8px 12px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.flow-icon {
   width: 28px;
   height: 28px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #a0aec0;
   flex-shrink: 0;
}

.flow-icon.icon-lime {
   background: rgba(37, 99, 235, 0.25);
   color: #60a5fa;
}

.flow-text {
   display: flex;
   flex-direction: column;
}

.flow-title {
   font-size: 11.5px;
   font-weight: 650;
   color: #ffffff;
   line-height: 1.25;
}

.flow-title.text-lime {
   color: #93c5fd;
}

.flow-sub {
   font-size: 9.5px;
   color: #7d8ea7;
}

.flow-dots {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
   height: 10px;
}

.flow-dots span {
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background: #3b4d70;
}

.flow-pill-glow {
   border: 1.5px solid #38bdf8;
   background: rgba(56, 189, 248, 0.12);
   box-shadow: 0 0 22px rgba(56, 189, 248, 0.35);
}

/* Visual Mock: Card 2 (Layered Browser) */
.visual-landing {
   position: relative;
   width: 100%;
}

.browser-card-bg {
   position: absolute;
   width: 185px;
   height: 145px;
   background: #182442;
   border: 1px solid #28395f;
   border-radius: 12px;
   top: 15px;
   right: 10px;
   z-index: 1;
}

.browser-card-front {
   position: relative;
   z-index: 2;
   width: 195px;
   background: #ffffff;
   border-radius: 11px;
   padding: 12px 14px;
   box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
   margin-right: auto;
   margin-left: 6px;
}

.browser-card-dots {
   display: flex;
   gap: 4px;
   margin-bottom: 8px;
}

.browser-card-dots i {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: #cbd5e1;
}

.browser-brand-row {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 6px;
}

.browser-brand-icon {
   width: 16px;
   height: 16px;
   border-radius: 3px;
   background: #0b132b;
   color: #60a5fa;
   font-size: 9px;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
}

.browser-brand-name {
   font-size: 9.5px;
   font-weight: 750;
   color: #0b132b;
}

.browser-heading {
   font-size: 13px;
   font-weight: 600;
   color: #0b132b;
   line-height: 1.25;
   margin: 0 0 8px;
}

.browser-features {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-bottom: 10px;
}

.browser-features span {
   font-size: 9.5px;
   color: #475569;
   font-weight: 550;
   display: flex;
   align-items: center;
   gap: 5px;
}

.check-green {
   font-style: normal;
   color: #2563eb;
   font-weight: 800;
}

.browser-mini-btn {
   background: #0b132b;
   color: #ffffff;
   font-size: 9px;
   font-weight: 700;
   padding: 6px 10px;
   border-radius: 5px;
   border: none;
   cursor: pointer;
   display: inline-block;
   width: 100%;
   text-align: center;
}

/* Visual Mock: Card 3 (Metrics & Qualified Leads) */
.visual-metrics {
   flex-direction: column;
   gap: 12px;
   width: 100%;
   padding-inline: 4px;
}

.ab-test-widget {
   width: 100%;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 8px;
   padding: 8px 10px;
}

.ab-test-label {
   font-size: 9.5px;
   color: #7d8ea7;
   margin-bottom: 6px;
   font-weight: 500;
}

.ab-bar-row {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 5px;
}

.ab-bar-row:last-child {
   margin-bottom: 0;
}

.ab-name {
   font-size: 9.5px;
   color: #8e9cb5;
   width: 54px;
   flex-shrink: 0;
}

.ab-bar-track {
   flex: 1;
   height: 9px;
   background: rgba(255, 255, 255, 0.07);
   border-radius: 4px;
   overflow: hidden;
}

.ab-bar-fill.fill-blue {
   height: 100%;
   background: #3b4d70;
   border-radius: 4px;
}

.ab-bar-fill.fill-lime {
   height: 100%;
   background: #3b82f6;
   border-radius: 4px;
}

.ab-val {
   font-size: 10px;
   color: #8e9cb5;
   width: 24px;
   text-align: right;
   font-weight: 600;
}

.ab-val.val-lime {
   color: #60a5fa;
   font-weight: 750;
}

.leads-growth-card {
   width: 100%;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   padding: 10px 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.leads-label {
   font-size: 9.5px;
   color: #8e9cb5;
   display: block;
}

.leads-stat {
   font-size: 18px;
   font-weight: 800;
   color: #ffffff;
   line-height: 1.2;
}

.leads-arrow {
   color: #60a5fa;
   font-size: 15px;
}

.growth-bars-group {
   display: flex;
   align-items: flex-end;
   gap: 3.5px;
   height: 28px;
}

.growth-bars-group span {
   width: 4.5px;
   background: #3b82f6;
   border-radius: 2px;
   display: block;
}

/* Card Content Area */
.card-content h3 {
   font-size: 19px;
   font-weight: 600;
   color: #ffffff;
   margin: 0 0 10px;
   letter-spacing: -0.01em;
}

.card-content p {
   font-size: 13.5px;
   color: #8e9cb5;
   line-height: 1.65;
   margin: 0;
   min-height: 48px;
}

.approach-tag {
   display: block;
   font-size: 9.5px;
   letter-spacing: 0.12em;
   font-weight: 750;
   color: #60a5fa;
   margin-top: 22px;
   text-transform: uppercase;
}

/* Bottom Bar */
.dark-bottom-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   margin-top: 48px;
   padding-top: 30px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.shield-guarantee {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #ffffff;
   font-size: 14.5px;
   font-weight: 550;
}

.shield-icon {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid rgba(96, 165, 250, 0.35);
   background: rgba(37, 99, 235, 0.15);
   color: #60a5fa;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.approach-cta-btn {
   background: #2563eb !important;
   color: #ffffff !important;
   border-radius: 9999px !important;
   padding: 14px 28px !important;
   font-size: 14.5px !important;
   font-weight: 750 !important;
   gap: 10px !important;
   min-height: 48px !important;
   box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
   transition: all 0.25s ease !important;
   border: none;
   cursor: pointer;
   white-space: nowrap;
}

.approach-cta-btn:hover {
   background: #1d4ed8 !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5) !important;
}

.approach-cta-btn .btn-arrow {
   transition: transform 0.2s ease;
   display: inline-block;
   font-size: 16px;
}

.approach-cta-btn:hover .btn-arrow {
   transform: translateX(4px);
}

/* Responsive adjustments for Section 3 */
@media (max-width: 1050px) {
   .approach-process-container {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .process-connector {
      display: none;
   }

   .approach-card {
      min-height: auto;
   }

   .card-content p {
      min-height: auto;
   }
}

@media (max-width: 768px) {
   .dark-bottom-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
   }

   .approach-cta-btn {
      width: 100% !important;
      justify-content: center !important;
   }
}

/* =========================================================
   SECTION 03: DON'T LOSE THE NEXT STEP (AI Voice Follow-up)
   ========================================================= */
.follow-up-section {
   padding: 65px 0 70px 0;
   display: grid;
   grid-template-columns: 1.02fr 1.18fr;
   gap: 80px;
   align-items: center;
   position: relative;
   overflow: visible;
}

.follow-copy {
   max-width: 530px;
}

.follow-eyebrow {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11.5px;
   font-weight: 750;
   letter-spacing: 0.15em;
   color: #334155;
   margin-bottom: 24px;
   text-transform: uppercase;
}

.eyebrow-num {
   color: #2563eb;
   font-weight: 850;
}

.eyebrow-slash {
   color: #94a3b8;
   margin: 0 1px;
}

.follow-title {
   font-size: clamp(36px, 4.4vw, 54px);
   font-weight: 600;
   line-height: 1.12;
   color: #0b132b;
   letter-spacing: -0.02em;
   margin: 0 0 24px 0;
}

.cold-word {
   color: #5d6e87;
   font-weight: 600;
   font-style: normal;
}

.follow-desc {
   font-size: 16px;
   line-height: 1.7;
   color: #475569;
   margin: 0 0 34px 0;
   max-width: 470px;
}

.follow-checklist {
   display: flex;
   flex-direction: column;
   gap: 18px;
   margin-bottom: 40px;
}

.follow-check-item {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 15px;
   font-weight: 600;
   color: #1e293b;
}

.check-circle {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   border: 1.5px solid #2563eb;
   background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.follow-cta-wrap {
   margin-top: 10px;
}

.follow-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 16px;
   font-weight: 750;
   color: #0b132b;
   text-decoration: none;
   border-bottom: 2.5px solid #2563eb;
   padding-bottom: 4px;
   transition: all 0.2s ease;
}

.follow-link:hover {
   color: #1d4ed8;
   border-bottom-color: #1d4ed8;
   transform: translateY(-1px);
}

.follow-link .link-arrow {
   font-size: 16px;
   display: inline-block;
   transition: transform 0.2s ease;
}

.follow-link:hover .link-arrow {
   transform: translate(3px, -3px);
}

/* Workflow Visual Area */
.workflow-visual-area {
   position: relative;
   width: 100%;
   max-width: 580px;
   margin-left: auto;
}

/* Orbit background decoration */
.orbit-bg {
   position: absolute;
   right: -80px;
   top: 50%;
   transform: translateY(-50%);
   width: 520px;
   height: 520px;
   pointer-events: none;
   z-index: 1;
}

.orbit-circle {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   border: 1.5px dashed rgba(59, 130, 246, 0.35);
}

.orbit-dot {
   position: absolute;
   border-radius: 50%;
   background: #3b82f6;
   box-shadow: 0 0 12px rgba(59, 130, 246, 0.65);
}

.orbit-dot-1 {
   width: 9px;
   height: 9px;
   right: -4px;
   top: 50%;
}

.orbit-dot-2 {
   width: 7px;
   height: 7px;
   top: 60px;
   right: 90px;
   opacity: 0.7;
}

/* Main Workflow Card Container */
.workflow-card {
   position: relative;
   z-index: 2;
   background: #f8fafc;
   border-radius: 32px;
   border: 1.5px solid #eef2f6;
   box-shadow: 0 24px 60px -15px rgba(15, 23, 42, 0.08), 0 0 0 8px rgba(248, 250, 252, 0.8);
   padding: 32px 34px 36px 34px;
}

.workflow-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
}

.workflow-heading {
   font-size: 19px;
   font-weight: 600;
   color: #0b132b;
   margin: 0;
   letter-spacing: -0.01em;
}

.workflow-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #eff6ff;
   border: 1px solid #dbeafe;
   padding: 5px 13px;
   border-radius: 9999px;
   font-size: 11.5px;
   font-weight: 650;
   color: #1e40af;
}

.sparkle-svg {
   color: #2563eb;
}

/* Timeline Layout */
.workflow-timeline {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.timeline-track {
   position: absolute;
   left: 17px;
   top: 36px;
   bottom: 36px;
   width: 1.5px;
   background: #e2e8f0;
   z-index: 1;
}

.timeline-step {
   position: relative;
   display: flex;
   align-items: center;
   gap: 15px;
   z-index: 2;
}

.step-node {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #2563eb;
   border: 2px solid #ffffff;
   box-shadow: 0 0 0 1px #2563eb;
   flex-shrink: 0;
   margin-left: 13px;
   z-index: 3;
}

.step-card {
   flex: 1;
   background: #ffffff;
   border: 1px solid #eef2f6;
   border-radius: 16px;
   padding: 16px 20px;
   display: flex;
   align-items: center;
   gap: 15px;
   box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
   transition: all 0.25s ease;
}

.step-icon-wrap {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
}

.step-tiny-num {
   position: absolute;
   top: 3px;
   font-size: 8px;
   font-weight: 750;
   color: #94a3b8;
}

.step-text {
   flex: 1;
   min-width: 0;
}

.step-text h4 {
   font-size: 15.5px;
   font-weight: 600;
   color: #0f172a;
   margin: 0 0 4px 0;
}

.step-text p {
   font-size: 12.5px;
   line-height: 1.5;
   color: #64748b;
   margin: 0;
}

.step-status {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Active Highlight Card (Step 2) */
.step-card.active-card {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 15px;
   background: #f8faff;
   border: 1.5px solid #60a5fa;
   border-radius: 18px;
   padding: 18px 22px;
   box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
}

.active-card-top {
   display: flex;
   align-items: center;
   gap: 15px;
   width: 100%;
}

.step-icon-wrap.icon-phone {
   background: #eff6ff;
   border-color: #bfdbfe;
}

.phone-step-badge {
   position: absolute;
   right: -2px;
   top: -2px;
   font-size: 8px;
   font-weight: 800;
   background: #1e40af;
   color: #ffffff;
   padding: 1px 4px;
   border-radius: 9999px;
   line-height: 1.2;
}

/* Equalizer Waveform */
.voice-waveform {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3.5px;
   height: 30px;
   padding: 2px 0;
   width: 100%;
}

.voice-waveform span {
   width: 2.8px;
   border-radius: 3px;
   background: #2563eb;
   display: inline-block;
   opacity: 0.9;
}

/* Floating Context Summary Card */
.floating-context-card {
   position: absolute;
   right: -42px;
   bottom: 40px;
   width: 282px;
   background: #ffffff;
   border-radius: 18px;
   border: 1px solid rgba(226, 232, 240, 0.9);
   box-shadow: 0 20px 40px -6px rgba(15, 23, 42, 0.15), 0 4px 12px rgba(15, 23, 42, 0.04);
   padding: 18px 20px;
   z-index: 10;
   display: flex;
   flex-direction: column;
   gap: 13px;
}

.floating-sparkle-badge {
   position: absolute;
   top: -11px;
   right: -11px;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: #ffffff;
   border: 1px solid #bfdbfe;
   box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
   display: flex;
   align-items: center;
   justify-content: center;
}

.context-item {
   display: flex;
   align-items: center;
   gap: 11px;
}

.context-icon-wrap {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: #eff6ff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: #2563eb;
}

.rupee-sym {
   font-weight: 750;
   font-size: 13px;
   color: #2563eb;
   line-height: 1;
}

.context-text {
   font-size: 12.5px;
   line-height: 1.4;
   color: #64748b;
   white-space: nowrap;
}

.context-label {
   color: #64748b;
   font-weight: 450;
   margin-right: 4px;
}

.context-value {
   color: #0f172a;
   font-weight: 700;
}

/* Responsive adjustments for Section 03 */
@media (max-width: 1080px) {
   .follow-up-section {
      grid-template-columns: 1fr;
      gap: 55px;
   }

   .workflow-visual-area {
      max-width: 540px;
      margin: 0 auto;
   }

   .floating-context-card {
      right: 0;
   }
}

@media (max-width: 640px) {
   .follow-up-section {
      padding: 70px 0 80px 0;
   }

   .workflow-card {
      padding: 22px 18px;
      border-radius: 22px;
   }

   .orbit-bg {
      display: none;
   }

   .floating-context-card {
      position: relative;
      right: auto;
      bottom: auto;
      width: 100%;
      margin-top: 16px;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
   }

   .voice-waveform {
      gap: 2.5px;
   }

   .voice-waveform span {
      width: 2.2px;
   }
}

/* =========================================================
   SECTION 04: A SMART FIRST MOVE (Pilot Testing Flow)
   ========================================================= */
.smart-move-section {
   position: relative;
   background: #ffffff;
   padding: 65px 0 75px 0;
   overflow: hidden;
   border-top: 1px solid #f1f5f9;
}

.smart-move-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 1;
}

.dot-matrix-grid {
   position: absolute;
   top: 25px;
   left: 25px;
   width: 140px;
   height: 160px;
   background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
   background-size: 14px 14px;
   opacity: 0.65;
}

.ambient-swoosh {
   position: absolute;
   right: -50px;
   top: 20px;
   width: 620px;
   height: 360px;
   pointer-events: none;
   opacity: 0.85;
}

/* Header Row */
.smart-move-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 60px;
   margin-bottom: 34px;
   position: relative;
   z-index: 2;
}

.smart-move-title-wrap {
   max-width: 620px;
}

.smart-move-eyebrow {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11.5px;
   font-weight: 750;
   letter-spacing: 0.15em;
   color: #334155;
   margin-bottom: 14px;
   text-transform: uppercase;
}

.smart-move-title {
   font-size: clamp(36px, 4.3vw, 54px);
   font-weight: 600;
   line-height: 1.1;
   color: #0b132b;
   letter-spacing: -0.02em;
   margin: 0;
}

.patience-word {
   color: #5d6e87;
   font-weight: 600;
}

.smart-move-intro {
   max-width: 430px;
   border-left: 2.5px solid #2563eb;
   padding-left: 24px;
   padding-block: 4px;
   margin-bottom: 4px;
}

.smart-move-intro p {
   font-size: 15.5px;
   line-height: 1.68;
   color: #475569;
   margin: 0;
}

/* Process Cards Flow */
.smart-process-flow {
   display: flex;
   align-items: stretch;
   justify-content: space-between;
   gap: 16px;
   position: relative;
   z-index: 2;
   margin-bottom: 40px;
}

.smart-process-card {
   flex: 1;
   background: #ffffff;
   border: 1.5px solid #eef2f6;
   border-radius: 24px;
   box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.07);
   padding: 26px 24px 24px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 310px;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.smart-process-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 22px 48px -12px rgba(15, 23, 42, 0.12);
}

.smart-process-arrow {
   align-self: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #ffffff;
   border: 1.5px solid #bfdbfe;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #2563eb;
   box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
   flex-shrink: 0;
   z-index: 3;
}

.card-top-content {
   display: flex;
   flex-direction: column;
}

.card-header-row {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 14px;
}

.card-icon-box {
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.card-title-group {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.card-eyebrow {
   font-size: 11px;
   font-weight: 750;
   letter-spacing: 0.1em;
   color: #475569;
   text-transform: uppercase;
}

.card-num {
   color: #2563eb;
   font-weight: 850;
}

.card-title {
   font-size: 18px;
   font-weight: 600;
   color: #0b132b;
   margin: 0;
   letter-spacing: -0.01em;
}

.card-desc {
   font-size: 13.5px;
   line-height: 1.58;
   color: #64748b;
   margin: 0 0 20px 0;
}

.card-bottom-content {
   margin-top: auto;
}

.card-divider-dotted {
   width: 100%;
   height: 1px;
   border-top: 1.5px dashed #edf2f7;
   margin-bottom: 16px;
}

/* Card 1: Align Pills */
.align-pills-row {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}

.align-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #eff6ff;
   border: 1px solid #dbeafe;
   padding: 6px 12px;
   border-radius: 9999px;
   font-size: 12px;
   font-weight: 650;
   color: #1e40af;
}

/* Card 2: Campaign Status Mini-Card */
.campaign-status-mini-card {
   background: #ffffff;
   border: 1px solid #eef2f6;
   border-radius: 14px;
   padding: 12px 14px;
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.mini-card-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
}

.campaign-name {
   font-size: 12px;
   font-weight: 700;
   color: #0b132b;
}

.campaign-badge {
   font-size: 10.5px;
   font-weight: 700;
   color: #1e40af;
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   border-radius: 9999px;
   padding: 2px 8px;
}

.mini-card-stats {
   display: grid;
   grid-template-columns: 1fr 1fr 1.15fr;
   gap: 8px;
}

.stat-col {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.stat-label {
   font-size: 10px;
   color: #94a3b8;
   font-weight: 500;
}

.stat-val {
   font-size: 12px;
   font-weight: 750;
   color: #0f172a;
}

.stat-progress {
   width: 50px;
   height: 3px;
   background: #e2e8f0;
   border-radius: 2px;
   overflow: hidden;
   margin-top: 3px;
}

.stat-progress-bar {
   width: 75%;
   height: 100%;
   background: #3b82f6;
   border-radius: 2px;
}

.status-active {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 11px;
   font-weight: 650;
   color: #0f172a;
}

.pulse-green-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #2563eb;
   box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
   display: inline-block;
}

/* Card 3: Analytics Mini-Card */
.analytics-mini-card {
   background: #ffffff;
   border: 1px solid #eef2f6;
   border-radius: 14px;
   padding: 10px 14px;
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
}

.analytics-chart-side {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.analytics-sub {
   font-size: 10.5px;
   color: #64748b;
   font-weight: 500;
}

.mini-trend-graph {
   display: flex;
   align-items: center;
}

.analytics-metrics-side {
   display: flex;
   flex-direction: column;
   gap: 4px;
   border-left: 1px solid #f1f5f9;
   padding-left: 12px;
}

.metric-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   font-size: 11px;
}

.m-label {
   color: #64748b;
   font-weight: 500;
}

.m-val.val-green {
   color: #2563eb;
   font-weight: 750;
}

.m-val.val-dark {
   color: #0f172a;
   font-weight: 750;
}

/* Bottom Full-Width Guarantee Banner */
.smart-move-bottom-banner {
   background: #ffffff;
   border: 1.5px solid #eef2f6;
   border-radius: 9999px;
   box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.08);
   padding: 12px 18px 12px 22px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   position: relative;
   z-index: 2;
}

.banner-left {
   display: flex;
   align-items: center;
   gap: 14px;
}

.banner-shield-icon {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #2563eb;
   flex-shrink: 0;
}

.banner-text {
   display: flex;
   flex-direction: column;
}

.banner-sub {
   font-size: 12.5px;
   color: #64748b;
   font-weight: 500;
   line-height: 1.3;
}

.banner-main {
   font-size: 15px;
   color: #0b132b;
   font-weight: 650;
   line-height: 1.3;
}

.banner-divider {
   width: 1px;
   height: 32px;
   background: #e2e8f0;
}

.banner-checks {
   display: flex;
   align-items: center;
   gap: 22px;
}

.b-check-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   font-weight: 600;
   color: #334155;
}

.b-check-icon {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 1.2px solid #2563eb;
   background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.pilot-cta-btn {
   background: #0b132b !important;
   color: #ffffff !important;
   border-radius: 9999px !important;
   padding: 13px 26px !important;
   font-size: 14px !important;
   font-weight: 750 !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 10px !important;
   border: none !important;
   cursor: pointer !important;
   box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25) !important;
   transition: all 0.25s ease !important;
   white-space: nowrap !important;
}

.pilot-cta-btn:hover {
   background: #152243 !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 10px 26px rgba(37, 99, 235, 0.35) !important;
}

.pilot-cta-btn .btn-arrow {
   transition: transform 0.2s ease;
   display: inline-block;
   font-size: 16px;
}

.pilot-cta-btn:hover .btn-arrow {
   transform: translateX(4px);
}

/* Responsive Breakpoints for Section 04 */
@media (max-width: 1100px) {
   .banner-checks {
      gap: 14px;
   }

   .b-check-item {
      font-size: 12.5px;
   }
}

@media (max-width: 980px) {
   .smart-move-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 25px;
   }

   .smart-move-intro {
      max-width: 100%;
   }

   .smart-process-flow {
      flex-direction: column;
      gap: 20px;
   }

   .smart-process-arrow {
      transform: rotate(90deg);
      margin: -6px auto;
   }

   .smart-move-bottom-banner {
      border-radius: 24px;
      flex-direction: column;
      align-items: flex-start;
      padding: 22px;
      gap: 20px;
   }

   .banner-divider {
      display: none;
   }

   .banner-checks {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
   }

   .banner-right {
      width: 100%;
   }

   .pilot-cta-btn {
      width: 100% !important;
      justify-content: center !important;
   }
}

@media (max-width: 640px) {
   .smart-move-section {
      padding: 70px 0 80px 0;
   }

   .dot-matrix-grid,
   .ambient-swoosh {
      display: none;
   }
}

/* ==========================================================================
   REFERENCE-MATCHED FAQ SECTION (WITH VECTOR & NUMBERED ACCORDION)
   ========================================================================== */
.faq-stage-section {
   position: relative;
   padding-block: 100px 70px;
   overflow: hidden;
}

.faq-ambient-glow {
   position: absolute;
   top: -40px;
   right: -80px;
   width: 480px;
   height: 480px;
   background: radial-gradient(circle, rgba(219, 234, 254, 0.45) 0%, rgba(239, 246, 255, 0.15) 50%, transparent 70%);
   pointer-events: none;
   z-index: 1;
}

.faq-clarity-watermark {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%) rotate(90deg);
   transform-origin: center right;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 10px;
   font-weight: 750;
   letter-spacing: 0.35em;
   color: #cbd5e1;
   pointer-events: none;
   opacity: 0.65;
   z-index: 2;
   white-space: nowrap;
}

.faq-columns-grid {
   display: grid;
   grid-template-columns: 440px 1fr;
   gap: 65px;
   align-items: flex-start;
   position: relative;
   z-index: 2;
}

/* Left Column */
.faq-left-col {
   display: flex;
   flex-direction: column;
}

.faq-badge-tag {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11.5px;
   font-weight: 750;
   letter-spacing: 0.15em;
   color: #2563eb;
   margin-bottom: 16px;
   text-transform: uppercase;
}

.faq-badge-tag .tag-num {
   color: #1d4ed8;
   font-weight: 850;
}

.faq-badge-tag .tag-slash {
   color: #93c5fd;
}

.faq-hero-heading {
   font-size: clamp(38px, 4.4vw, 52px);
   font-weight: 600;
   line-height: 1.12;
   letter-spacing: -0.02em;
   color: #0b132b;
   margin: 0 0 16px;
}

.faq-blue-highlight {
   color: #2563eb;
   font-weight: 600;
}

.faq-hero-sub {
   font-size: 15px;
   line-height: 1.65;
   color: #475569;
   margin: 0 0 28px;
   max-width: 390px;
}

/* Vector Graphic Stage with Floating Search Pill */
.faq-vector-stage {
   position: relative;
   width: 100%;
   max-width: 440px;
   margin-bottom: 24px;
}

.faq-vector-image {
   display: block;
   width: 100%;
   height: auto;
   object-fit: contain;
   filter: drop-shadow(0 14px 28px rgba(37, 99, 235, 0.08));
   user-select: none;
   pointer-events: none;
}

.faq-floating-pill {
   position: absolute;
   top: 42%;
   left: 14%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1.5px solid rgba(255, 255, 255, 0.95);
   box-shadow: 0 16px 36px -8px rgba(37, 99, 235, 0.16), 0 4px 12px rgba(15, 23, 42, 0.04);
   border-radius: 9999px;
   padding: 9px 14px 9px 14px;
   display: flex;
   align-items: center;
   gap: 12px;
   z-index: 3;
   max-width: 310px;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.faq-floating-pill:hover {
   transform: translateY(calc(-50% - 2px));
   box-shadow: 0 20px 44px -8px rgba(37, 99, 235, 0.22);
}

.pill-chatgpt-icon {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: #0b132b;
}

.pill-text {
   display: flex;
   flex-direction: column;
   gap: 1px;
}

.pill-headline {
   font-size: 12.5px;
   font-weight: 750;
   color: #0b132b;
   line-height: 1.25;
}

.pill-subtext {
   font-size: 10px;
   color: #64748b;
   line-height: 1.3;
   white-space: nowrap;
}

.pill-arrow-btn {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   flex-shrink: 0;
   margin-left: 2px;
   transition: all 0.2s ease;
}

.pill-arrow-btn:hover {
   background: #2563eb;
   border-color: #2563eb;
}

.pill-arrow-btn:hover svg {
   stroke: #ffffff;
}

/* Handwritten Note Annotation */
.faq-handwritten-note {
   position: absolute;
   bottom: 12%;
   left: 2%;
   z-index: 3;
   display: flex;
   align-items: flex-end;
   gap: 6px;
}

.handwritten-script {
   font-family: 'Caveat', cursive, sans-serif;
   font-size: 21px;
   font-weight: 700;
   line-height: 1.1;
   color: #334155;
   transform: rotate(-5deg);
   display: inline-block;
}

.handwritten-sketch-arrow {
   transform: translateY(-8px);
}

/* Team Avatar Meta Contact */
.faq-team-contact {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-top: 4px;
}

.faq-avatar-strip {
   display: flex;
   align-items: center;
}

.avatar-circle {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 2px solid #ffffff;
   background-image: url('assets/team-avatars.jpg');
   background-size: 320% auto;
   background-repeat: no-repeat;
   box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
   display: inline-block;
}

.avatar-1 {
   background-position: 8% 50%;
   z-index: 3;
}

.avatar-2 {
   background-position: 50% 50%;
   margin-left: -9px;
   z-index: 2;
}

.avatar-3 {
   background-position: 92% 50%;
   margin-left: -9px;
   z-index: 1;
}

.faq-team-copy {
   display: flex;
   flex-direction: column;
   gap: 1px;
}

.team-copy-label {
   font-size: 11.5px;
   color: #64748b;
   font-weight: 500;
}

.team-copy-link {
   background: transparent;
   border: none;
   color: #2563eb;
   font-size: 13px;
   font-weight: 750;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 0;
   cursor: pointer;
   transition: gap 0.2s ease, color 0.2s ease;
}

.team-copy-link:hover {
   color: #1d4ed8;
   gap: 8px;
}

/* Right Column: Line-Divided Accordion */
.faq-accordion-container {
   border-top: 1px solid #edf2f7;
}

.faq-line-item {
   border-bottom: 1px solid #edf2f7;
   transition: background-color 0.2s ease;
}

.faq-line-summary {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 26px 4px;
   cursor: pointer;
   user-select: none;
   list-style: none;
   gap: 20px;
}

.faq-line-summary::-webkit-details-marker,
.faq-line-summary::marker {
   display: none;
}

.faq-line-left {
   display: flex;
   align-items: baseline;
   gap: 22px;
   flex: 1;
}

.faq-num {
   font-size: 24px;
   font-weight: 500;
   color: #94a3b8;
   letter-spacing: -0.02em;
   min-width: 32px;
   line-height: 1;
   flex-shrink: 0;
}

.faq-line-title {
   font-size: 17px;
   font-weight: 600;
   color: #0b132b;
   line-height: 1.35;
   margin: 0;
   letter-spacing: -0.01em;
   transform: none !important;
   transition: color 0.2s ease;
}

.faq-line-item:hover .faq-line-title {
   color: #2563eb;
}

.faq-line-item[open] .faq-line-title {
   color: #0b132b;
}

.faq-line-toggle {
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #0f172a;
   font-size: 22px;
   font-weight: 350;
   flex-shrink: 0;
}

.faq-line-item .toggle-icon-minus {
   display: none;
}

.faq-line-item .toggle-icon-plus {
   display: block;
}

.faq-line-item[open] .toggle-icon-minus {
   display: block;
}

.faq-line-item[open] .toggle-icon-plus {
   display: none;
}

.faq-line-content {
   padding: 0 40px 26px 54px;
   animation: faqFadeIn 0.25s ease-out;
}

.faq-line-content p {
   font-size: 14.5px;
   line-height: 1.7;
   color: #475569;
   margin: 0 0 16px 0;
   max-width: 580px;
}

.faq-more-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 13.5px;
   font-weight: 750;
   color: #2563eb;
   text-decoration: none;
   transition: gap 0.2s ease, color 0.2s ease;
}

.faq-more-link:hover {
   color: #1d4ed8;
   gap: 10px;
}

/* Bottom More Questions Bar */
.faq-bottom-more-bar {
   display: flex;
   justify-content: flex-end;
   padding-top: 24px;
}

.more-text-group {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 2px;
}

.more-sub {
   font-size: 10.5px;
   font-weight: 750;
   letter-spacing: 0.12em;
   color: #94a3b8;
   text-transform: uppercase;
}

.more-action-btn {
   background: transparent;
   border: none;
   color: #2563eb;
   font-size: 13.5px;
   font-weight: 750;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 0;
   cursor: pointer;
   transition: gap 0.2s ease, color 0.2s ease;
}

.more-action-btn:hover {
   color: #1d4ed8;
   gap: 10px;
}

/* ==========================================================================
   TECH BLUE CLOSING CTA SECTION (MATCHING REFERENCE DESIGN)
   ========================================================================== */
.closing-section {
   margin-block: 40px 70px;
}

.closing-container {
   position: relative;
   background: linear-gradient(135deg, #071438 0%, #0d215e 45%, #153c9e 100%);
   border-radius: 28px;
   padding: 48px 52px;
   overflow: hidden;
   box-shadow: 0 24px 60px -15px rgba(10, 25, 75, 0.55), 0 0 0 1px rgba(96, 165, 250, 0.22);
}

.closing-ambient-glow {
   position: absolute;
   top: -80px;
   right: -60px;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(96, 165, 250, 0.2) 0%, rgba(37, 99, 235, 0.05) 50%, transparent 70%);
   pointer-events: none;
   z-index: 1;
}

.closing-layout-grid {
   display: grid;
   grid-template-columns: 1.45fr 0.85fr 1fr;
   gap: 32px;
   align-items: center;
   position: relative;
   z-index: 2;
}

/* Col 1: Left CTA Block */
.closing-left-block {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.closing-eyebrow-row {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 16px;
}

.eyebrow-dash {
   color: #60a5fa;
   font-weight: 800;
   font-size: 16px;
   line-height: 1;
}

.closing-eyebrow-text {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: #93c5fd;
}

.closing-heading {
   font-size: clamp(30px, 3.2vw, 42px);
   font-weight: 600;
   line-height: 1.15;
   letter-spacing: -0.02em;
   color: #ffffff;
   margin: 0 0 16px 0;
}

.cta-blue-text {
   color: #38bdf8;
   background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.closing-desc {
   font-size: 14.5px;
   line-height: 1.65;
   color: #cbd5e1;
   margin: 0 0 28px 0;
   max-width: 440px;
}

.closing-buttons-row {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: nowrap;
}

.cta-white-btn {
   background: #ffffff !important;
   color: #0b132b !important;
   border-radius: 9999px !important;
   padding: 13px 26px !important;
   font-size: 14px !important;
   font-weight: 750 !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 8px !important;
   border: 1px solid rgba(255, 255, 255, 0.9) !important;
   cursor: pointer !important;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
   transition: all 0.25s ease !important;
   text-decoration: none !important;
   white-space: nowrap !important;
   flex-shrink: 0 !important;
}

.cta-white-btn:hover {
   background: #f8fafc !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

.cta-white-btn .btn-arrow {
   transition: transform 0.2s ease;
   font-size: 15px;
}

.cta-white-btn:hover .btn-arrow {
   transform: translateX(3px);
}

.cta-talk-link {
   background: transparent !important;
   color: #ffffff !important;
   border: none !important;
   padding: 10px 14px !important;
   font-size: 14px !important;
   font-weight: 650 !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 8px !important;
   cursor: pointer !important;
   transition: all 0.2s ease !important;
   text-decoration: none !important;
   opacity: 0.95;
   white-space: nowrap !important;
}

.cta-talk-link:hover {
   opacity: 1;
   color: #93c5fd !important;
}

.cta-talk-link .btn-arrow {
   transition: transform 0.2s ease;
   font-size: 15px;
}

.cta-talk-link:hover .btn-arrow {
   transform: translateX(3px);
}

/* Col 2: Features Middle Column */
.closing-features-col {
   display: flex;
   flex-direction: column;
   gap: 24px;
   border-left: 1px solid rgba(255, 255, 255, 0.12);
   padding-left: 32px;
}

.closing-feature-item {
   display: flex;
   align-items: center;
   gap: 16px;
}

.feature-icon-box {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: rgba(30, 58, 138, 0.65);
   border: 1px solid rgba(96, 165, 250, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
}

.feature-text-block {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.feature-title {
   font-size: 14.5px;
   font-weight: 750;
   color: #ffffff;
   margin: 0;
   line-height: 1.3;
}

.feature-subtitle {
   font-size: 12.5px;
   color: #94a3b8;
   margin: 0;
   line-height: 1.3;
}

/* Col 3: Planetary Orb Graphic */
.closing-graphic-col {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   justify-content: center;
   min-height: 250px;
}

.cta-planet-stage {
   width: 100%;
   max-width: 320px;
   height: 250px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   position: relative;
}

.cta-planet-svg {
   width: 100%;
   height: 100%;
   overflow: visible;
   filter: drop-shadow(0 15px 35px rgba(15, 23, 42, 0.55));
}

.cta-corner-tag {
   font-size: 9.5px;
   font-weight: 800;
   letter-spacing: 0.24em;
   color: rgba(148, 163, 184, 0.65);
   text-transform: uppercase;
   margin-top: 8px;
   padding-right: 4px;
}

/* ==========================================================================
   MODERN ENTERPRISE FOOTER (MATCHING REFERENCE DESIGN)
   ========================================================================== */
.footer-enterprise {
   background: #060b18;
   color: #8da2c0;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   padding: 70px 0 36px 0;
   position: relative;
   overflow: hidden;
}

.footer-container {
   width: min(1260px, calc(100% - 96px));
   margin: 0 auto;
   padding-inline: 24px;
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.35fr 1fr 1fr 1.3fr;
   gap: 48px;
   margin-bottom: 50px;
}

/* Col 1: Brand & Social Row */
.footer-col-brand {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.footer-brand {
   display: inline-block;
   margin-bottom: 20px;
   text-decoration: none;
}

.footer-brand img {
   display: block;
   max-width: 165px;
   height: auto;
}

.footer-brand-bio {
   font-size: 13.5px;
   line-height: 1.68;
   color: #8da2c0;
   margin: 0 0 24px 0;
   max-width: 320px;
}

.footer-social-row {
   display: flex;
   align-items: center;
   gap: 12px;
}

.social-icon-btn {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.14);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #cbd5e1;
   text-decoration: none;
   transition: all 0.22s ease;
}

.social-icon-btn:hover {
   background: #2563eb;
   color: #ffffff;
   border-color: #2563eb;
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}

/* Col 2 & 3: Navigation & Capabilities */
.footer-col-title {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #ffffff;
   margin: 0 0 20px 0;
}

.footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 11px;
}

.footer-links a {
   font-size: 13.5px;
   color: #8da2c0;
   text-decoration: none;
   transition: color 0.2s ease, transform 0.2s ease;
   display: inline-block;
}

.footer-links a:hover {
   color: #60a5fa;
   transform: translateX(3px);
}

/* Col 4: Newsletter */
.footer-col-newsletter {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.footer-newsletter-desc {
   font-size: 13.5px;
   line-height: 1.6;
   color: #8da2c0;
   margin: 0 0 18px 0;
   max-width: 310px;
}

.footer-newsletter-form {
   display: flex;
   align-items: center;
   background: rgba(15, 23, 42, 0.85);
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 9999px;
   padding: 5px 6px 5px 18px;
   width: 100%;
   max-width: 320px;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-newsletter-form:focus-within {
   border-color: #3b82f6;
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.newsletter-input {
   background: transparent;
   border: none;
   outline: none;
   color: #ffffff;
   font-size: 13.5px;
   font-family: inherit;
   flex: 1;
   min-width: 0;
   padding: 6px 0;
}

.newsletter-input::placeholder {
   color: #64748b;
}

.newsletter-submit {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: #2563eb;
   color: #ffffff;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   flex-shrink: 0;
   transition: background 0.2s ease, transform 0.2s ease;
}

.newsletter-submit:hover {
   background: #1d4ed8;
   transform: scale(1.05);
}

.newsletter-fineprint {
   font-size: 11.5px;
   color: #64748b;
   margin-top: 10px;
   display: block;
}

/* Bottom Bar */
.footer-bottom-bar {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   padding-top: 26px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
}

.footer-bottom-legal {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.legal-line-1 {
   font-size: 12.5px;
   color: #64748b;
   margin: 0;
}

.legal-line-2 {
   font-size: 12px;
   color: #475569;
   margin: 0;
}

.footer-bottom-actions {
   display: flex;
   align-items: center;
   gap: 28px;
   flex-wrap: wrap;
}

.legal-links {
   display: flex;
   align-items: center;
   gap: 12px;
}

.legal-links a {
   font-size: 12.5px;
   color: #8da2c0;
   text-decoration: none;
   transition: color 0.2s ease;
}

.legal-links a:hover {
   color: #60a5fa;
}

.legal-divider {
   color: rgba(255, 255, 255, 0.15);
   font-size: 12px;
}

.footer-back-to-top {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 12.5px;
   font-weight: 650;
   color: #94a3b8;
   text-decoration: none;
   transition: all 0.2s ease;
   cursor: pointer;
}

.back-to-top-circle {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.12);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #cbd5e1;
   font-size: 13px;
   transition: all 0.2s ease;
}

.footer-back-to-top:hover {
   color: #ffffff;
}

.footer-back-to-top:hover .back-to-top-circle {
   background: rgba(37, 99, 235, 0.25);
   border-color: #60a5fa;
   color: #ffffff;
   transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (FAQ, CLOSING CTA, FOOTER)
   ========================================================================== */
@media (max-width: 1080px) {
   .faq-columns-grid {
      grid-template-columns: 1fr;
      gap: 48px;
   }

   .faq-clarity-watermark {
      display: none;
   }

   .closing-layout-grid {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
   }

   .closing-graphic-col {
      grid-column: span 2;
      align-items: center;
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 40px;
   }
}

@media (max-width: 768px) {
   .faq-stage-section {
      padding-block: 70px 40px;
   }

   .faq-line-summary {
      padding: 20px 0;
   }

   .faq-line-left {
      gap: 14px;
   }

   .faq-num {
      font-size: 19px;
      min-width: 26px;
   }

   .faq-line-title {
      font-size: 15.5px;
   }

   .faq-line-content {
      padding: 0 0 20px 40px;
   }

   .faq-floating-pill {
      left: 4%;
      max-width: 290px;
      padding: 8px 12px;
   }

   .faq-handwritten-note {
      bottom: 5%;
      left: 0;
   }

   .handwritten-script {
      font-size: 17px;
   }

   .faq-bottom-more-bar {
      justify-content: flex-start;
   }

   .more-text-group {
      align-items: flex-start;
   }

   /* Closing CTA mobile */
   .closing-container {
      padding: 36px 24px;
      border-radius: 20px;
   }

   .closing-layout-grid {
      grid-template-columns: 1fr;
      gap: 28px;
   }

   .closing-features-col {
      border-left: none;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      padding-left: 0;
      padding-top: 24px;
   }

   .closing-graphic-col {
      grid-column: span 1;
      align-items: center;
   }

   .cta-corner-tag {
      padding-right: 0;
      text-align: center;
   }

   .cta-white-btn {
      width: 100% !important;
      justify-content: center !important;
   }

   .cta-talk-link {
      width: 100% !important;
      justify-content: center !important;
   }

   /* Footer mobile */
   .footer-enterprise {
      padding: 50px 0 30px 0;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 36px;
   }

   .footer-newsletter-form {
      max-width: 100%;
   }

   .footer-bottom-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
   }

   .footer-bottom-actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      width: 100%;
   }

   .legal-links {
      flex-wrap: wrap;
      gap: 10px;
   }
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY & MOBILE FIT POLISH
   ========================================================================== */
html {
   overflow-x: hidden;
}

body {
   overflow-x: clip;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   letter-spacing: -0.006em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.faq-line-title,
.banner-main,
.channel-item {
   overflow-wrap: normal;
   word-break: normal;
   hyphens: none;
}

h1,
h2,
.faq-hero-heading,
.closing-heading {
   text-wrap: balance;
}

p,
li,
.card-desc,
.follow-check-item,
.faq-line-title {
   text-wrap: pretty;
}

.nowrap-desktop {
   display: inline-block;
   white-space: nowrap;
}

.button > span:not(.btn-arrow),
.pilot-cta-btn > span:not(.btn-arrow) {
   font-size: inherit;
   font-weight: inherit;
}

.hero-copy,
.buyer-shift-heading-left,
.buyer-shift-heading-right,
.section-heading > *,
.approach-card,
.follow-copy,
.workflow-visual-area,
.smart-move-title-wrap,
.smart-move-intro,
.smart-process-card,
.faq-left-col,
.faq-accordion-container,
.closing-layout-grid > *,
.footer-grid > * {
   min-width: 0;
}

@media (max-width: 900px) {
   .wrap,
   .footer-container {
      width: calc(100% - 48px);
   }

   .footer-container {
      padding-inline: 0;
   }

   .section-heading,
   .smart-move-header {
      align-items: flex-start;
   }

   .buyer-shift-heading-right,
   .smart-move-intro {
      max-width: 680px;
   }
}

@media (max-width: 700px) {
   .wrap,
   .footer-container {
      width: calc(100% - 32px);
   }

   .section,
   .opportunity-section {
      padding-block: 58px;
   }

   .nav {
      height: 68px;
   }

   .brand,
   .brand img {
      width: 146px;
   }

   .menu-toggle {
      flex: 0 0 44px;
      align-items: center;
   }

   .mobile-nav:not([hidden]) {
      padding: 4px 16px 16px;
      box-shadow: 0 16px 28px rgba(15, 23, 42, .08);
   }

   .mobile-nav a,
   .mobile-nav button {
      min-height: 48px;
      display: flex;
      align-items: center;
   }

   .nowrap-desktop {
      display: inline;
      white-space: normal;
   }

   .hero {
      gap: 28px !important;
      padding-top: 30px !important;
      padding-bottom: 42px !important;
   }

   .hero .eyebrow {
      line-height: 1.45;
      margin-bottom: 14px;
   }

   .hero h1 {
      font-size: clamp(1.92rem, 9.2vw, 2.7rem) !important;
      line-height: 1.08;
      letter-spacing: -.035em;
      margin-bottom: 18px;
   }

   .hero-lead {
      font-size: 16.5px;
   }

   .hero-intro {
      font-size: 14.5px;
      line-height: 1.68;
   }

   .hero-actions {
      margin-top: 22px;
      margin-bottom: 22px;
   }

   .hero-primary-btn,
   .hero-secondary-btn {
      min-height: 50px !important;
      padding-inline: 18px !important;
      white-space: normal;
   }

   .hero-benefits {
      align-items: stretch;
   }

   .benefit-badge {
      flex: 1 1 calc(50% - 8px);
      min-width: 0;
   }

   .hero-visual-area {
      width: min(100%, 460px);
   }

   .hero-illustration {
      animation: none;
   }

   .channel-inner {
      gap: 14px;
   }

   .channel-label {
      font-size: 12.5px;
   }

   .channels {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
   }

   .channel-item,
   .channels > span {
      display: flex;
      justify-content: center;
      text-align: center;
      font-size: clamp(11px, 3.4vw, 14px);
      line-height: 1.25;
      padding: 9px 5px;
      border: 1px solid #e7ecf3;
      border-radius: 9px;
      background: #fff;
   }

   .channel-active {
      gap: 0;
      background: #eff6ff !important;
      border-color: #bfdbfe !important;
   }

   .tag-next-move {
      display: none;
   }

   .buyer-shift-header {
      gap: 22px;
      margin-bottom: 30px;
   }

   .buyer-shift-heading-left h2,
   .dark-section h2,
   .follow-title,
   .smart-move-title,
   .faq-hero-heading {
      font-size: clamp(2rem, 9vw, 2.65rem);
      line-height: 1.1;
      letter-spacing: -.03em;
   }

   .journey-pill {
      width: 100%;
      align-items: flex-start;
      border-radius: 14px;
      padding: 9px 12px 9px 9px;
      line-height: 1.45;
   }

   .buyer-shift-heading-right {
      padding: 18px 0 0;
      border-top: 1px solid #e2e8f0;
   }

   .buyer-shift-heading-right p {
      font-size: 14.5px;
      line-height: 1.7;
   }

   .comparison-grid-wrapper {
      gap: 18px;
   }

   .comparison-card,
   .approach-card,
   .smart-process-card {
      padding: 20px 18px;
      border-radius: 16px;
   }

   .old-behavior-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
   }

   .behavior-step {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      gap: 5px;
      font-size: 10.5px;
      line-height: 1.3;
   }

   .step-arrow {
      display: none;
   }

   .search-bar-mock,
   .prompt-box-mock {
      padding: 13px;
   }

   .search-query-text,
   .prompt-query-text {
      font-size: 13.5px;
   }

   .recommended-product-card {
      padding: 14px;
   }

   .product-left {
      align-items: flex-start;
   }

   .product-tagline {
      white-space: normal;
      overflow: visible;
   }

   .buyer-shift-bottom-banner {
      margin-top: 30px;
   }

   .banner-text-content h4 {
      font-size: 15px;
      line-height: 1.45;
   }

   .dark-section {
      padding-block: 64px 68px;
   }

   .approach-process-container {
      margin-top: 32px;
      gap: 16px;
   }

   .approach-card {
      min-height: 0;
   }

   .approach-visual {
      height: 165px;
      margin-bottom: 18px;
   }

   .browser-card-front {
      margin-inline: auto;
   }

   .browser-card-bg {
      left: 50%;
      right: auto;
      transform: translateX(-42%);
   }

   .card-content h3,
   .card-title {
      font-size: 18px;
   }

   .dark-bottom-bar {
      margin-top: 32px;
      padding-top: 24px;
   }

   .shield-guarantee {
      align-items: flex-start;
      font-size: 13.5px;
      line-height: 1.55;
   }

   .approach-cta-btn,
   .pilot-cta-btn {
      white-space: normal !important;
      padding-inline: 18px !important;
      text-align: center;
   }

   .follow-up-section {
      padding-block: 58px 64px;
      gap: 38px;
   }

   .follow-eyebrow,
   .smart-move-eyebrow,
   .faq-badge-tag,
   .closing-eyebrow-text {
      line-height: 1.45;
   }

   .follow-desc {
      margin-bottom: 26px;
      font-size: 14.5px;
   }

   .follow-checklist {
      gap: 14px;
      margin-bottom: 30px;
   }

   .follow-check-item {
      align-items: flex-start;
      font-size: 13.5px;
      line-height: 1.5;
   }

   .workflow-card {
      padding: 20px 16px;
      border-radius: 20px;
      box-shadow: 0 14px 32px -14px rgba(15, 23, 42, .16);
   }

   .workflow-header {
      flex-wrap: wrap;
      gap: 10px;
   }

   .step-card,
   .step-card.active-card {
      padding: 14px;
      gap: 11px;
   }

   .context-text {
      white-space: normal;
   }

   .smart-move-section {
      padding-block: 60px 64px;
   }

   .smart-move-header {
      margin-bottom: 28px;
   }

   .smart-move-intro {
      padding-left: 16px;
   }

   .smart-move-intro p,
   .card-desc {
      font-size: 14px;
   }

   .smart-process-card {
      min-height: 0;
   }

   .smart-move-bottom-banner {
      padding: 19px 17px;
      border-radius: 18px;
   }

   .banner-left {
      align-items: flex-start;
   }

   .banner-checks {
      width: 100%;
   }

   .faq-stage-section {
      padding-block: 64px 54px;
   }

   .faq-columns-grid {
      gap: 42px;
   }

   .faq-hero-sub {
      font-size: 14px;
   }

   .faq-vector-stage {
      display: flex;
      flex-direction: column;
      max-width: 390px;
      margin-inline: auto;
   }

   .faq-floating-pill {
      position: relative;
      inset: auto;
      transform: none;
      width: min(100%, 310px);
      max-width: 100%;
      margin: -20px auto 0;
   }

   .faq-floating-pill:hover {
      transform: translateY(-2px);
   }

   .faq-handwritten-note {
      display: none;
   }

   .faq-team-contact {
      justify-content: center;
   }

   .faq-line-summary {
      align-items: flex-start;
      gap: 10px;
   }

   .faq-line-left {
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
   }

   .faq-line-title {
      min-width: 0;
      font-size: 15px;
      line-height: 1.42;
   }

   .faq-line-content {
      padding: 0 0 20px 36px;
   }

   .closing-section {
      margin-block: 20px 54px;
   }

   .closing-container {
      padding: 32px 20px;
      border-radius: 18px;
   }

   .closing-heading {
      font-size: clamp(1.95rem, 8.7vw, 2.55rem);
   }

   .closing-heading br,
   .closing-desc br,
   .footer-brand-bio br {
      display: none;
   }

   .closing-buttons-row {
      width: 100%;
      flex-wrap: wrap;
   }

   .closing-features-col {
      gap: 18px;
   }

   .closing-graphic-col {
      min-height: 200px;
   }

   .cta-planet-stage {
      height: 200px;
      max-width: 270px;
      justify-content: center;
   }

   .cta-corner-tag {
      font-size: 8px;
      letter-spacing: .16em;
   }

   .footer-enterprise {
      padding-top: 48px;
      padding-bottom: 110px;
   }

   .footer-container {
      padding-inline: 0;
   }

   .footer-grid {
      gap: 30px;
      margin-bottom: 36px;
   }

   .footer-brand-bio,
   .footer-newsletter-desc {
      max-width: 100%;
   }

   .footer-bottom-bar,
   .footer-bottom-actions {
      align-items: stretch;
   }

   .legal-line-1,
   .legal-line-2 {
      line-height: 1.6;
   }

   .mobile-cta {
      padding-inline: 16px;
   }

   .mobile-cta .button {
      min-height: 50px;
      border-radius: 9999px;
      box-shadow: 0 8px 22px rgba(11, 19, 43, .2);
   }

   dialog {
      width: calc(100% - 24px);
      padding: 28px 20px;
      border-radius: 16px;
   }

   dialog h2 {
      font-size: clamp(1.85rem, 9vw, 2.25rem);
      line-height: 1.12;
   }
}

/* ChatGPT Ads clarity and balance pass */
.follow-up-section[hidden] {
   display: none !important;
}

.comparison-grid-wrapper[hidden] {
   display: none !important;
}

.ads-showcase-section,
.ads-why-section {
   padding-block: 68px;
}

.ads-showcase-grid {
   grid-template-columns: minmax(420px, .92fr) minmax(540px, 1.08fr);
   gap: clamp(42px, 5vw, 78px);
}

.ads-showcase-copy h2,
.ads-section-heading h2 {
   max-width: 690px;
   font-size: clamp(2.35rem, 3.15vw, 3.45rem);
}

.ads-showcase-copy h2 span,
.ads-section-heading h2 span {
   display: inline;
}

.ads-showcase-copy > p {
   max-width: 540px;
}

.ads-process-section {
   padding-block: 72px;
}

.ads-section-heading {
   grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
   gap: clamp(40px, 6vw, 90px);
   margin-bottom: 34px;
}

.ads-section-heading > p {
   max-width: 460px;
   padding-block: 8px;
}

.ads-process-grid .ads-process-card {
   position: relative;
   min-height: 250px;
   padding: 24px;
   color: inherit;
   text-align: left;
   background: #fff;
   border: 0;
   border-right: 1px solid #e1e8f1;
   cursor: pointer;
   transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.ads-process-grid .ads-process-card:last-child {
   border-right: 0;
}

.ads-process-grid .ads-process-card:hover,
.ads-process-grid .ads-process-card:focus-visible,
.ads-process-grid .ads-process-card.is-active {
   z-index: 1;
   background: linear-gradient(150deg, #f8fbff 0%, #eaf3ff 100%);
   box-shadow: inset 0 -3px 0 #2563eb;
   outline: 0;
}

.ads-process-grid .ads-process-card:hover {
   transform: translateY(-3px);
}

.ads-process-card > span {
   color: #2563eb;
   font-size: 10px;
   font-weight: 750;
   letter-spacing: .08em;
}

.ads-process-card > svg {
   width: 46px;
   height: 46px;
   display: block;
   margin-top: 30px;
   padding: 11px;
   color: #2563eb;
   background: #edf5ff;
   border: 1px solid #d6e5f9;
   border-radius: 12px;
   transition: transform .25s ease, background .25s ease;
}

.ads-process-card:hover > svg,
.ads-process-card.is-active > svg {
   color: #fff;
   background: #2563eb;
   transform: translateY(-3px) rotate(-3deg);
}

.ads-process-card h3 {
   margin-top: 19px;
}

.ads-process-card p {
   max-width: 245px;
}

.ads-why-grid {
   align-items: start;
}

.ads-why-card {
   overflow: hidden;
   background: #fff;
   border: 1px solid #dde6f1;
   border-radius: 15px;
   transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.ads-why-card:hover,
.ads-why-card[open] {
   border-color: #a9c9f7;
   box-shadow: 0 18px 35px -28px rgba(37, 99, 235, .7);
   transform: translateY(-2px);
}

.ads-why-card summary {
   display: grid;
   grid-template-columns: 46px minmax(0, 1fr) 28px;
   gap: 14px;
   align-items: center;
   padding: 19px 21px;
   color: #17233e;
   font-size: 16px;
   font-weight: 650;
   list-style: none;
   cursor: pointer;
}

.ads-why-card summary::-webkit-details-marker {
   display: none;
}

.ads-why-card summary > svg {
   width: 46px;
   height: 46px;
   padding: 12px;
   color: #2563eb;
   background: linear-gradient(145deg, #f8fbff, #eaf3ff);
   border: 1px solid #d8e6f9;
   border-radius: 12px;
}

.ads-why-card summary b {
   width: 28px;
   height: 28px;
   display: grid;
   place-items: center;
   color: #2563eb;
   border: 1px solid #cfe0f6;
   border-radius: 50%;
   font-size: 18px;
   font-weight: 400;
   transition: transform .25s ease, background .25s ease;
}

.ads-why-card[open] summary b {
   color: #fff;
   background: #2563eb;
   transform: rotate(45deg);
}

.ads-why-card > p {
   max-width: 520px;
   margin: -2px 21px 20px 81px;
   color: #64718a;
   font-size: 13px;
   line-height: 1.6;
}

.buyer-shift-header {
   align-items: end;
}

.buyer-shift-heading-left h2 {
   font-size: clamp(2.6rem, 4vw, 4.1rem);
}

.buyer-shift-heading-right p {
   max-width: 580px;
}

.buyer-simple-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 38px;
   align-items: stretch;
   margin-top: 46px;
}

.buyer-simple-card {
   position: relative;
   min-height: 240px;
   padding: 28px;
   color: #17233e;
   text-align: left;
   background: #fff;
   border: 1px solid #dbe5f2;
   border-radius: 18px;
   box-shadow: 0 20px 45px -38px rgba(21, 47, 93, .65);
   cursor: pointer;
   transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.buyer-simple-card:hover,
.buyer-simple-card:focus-visible,
.buyer-simple-card.is-active {
   background: linear-gradient(145deg, #fff, #edf5ff);
   border-color: #83b4fa;
   outline: 0;
   transform: translateY(-5px);
}

.buyer-simple-card > svg {
   width: 50px;
   height: 50px;
   display: block;
   margin-top: 26px;
   padding: 13px;
   color: #2563eb;
   background: #edf5ff;
   border: 1px solid #d2e3fa;
   border-radius: 14px;
}

.buyer-simple-card.is-active > svg {
   color: #fff;
   background: #2563eb;
}

.buyer-step {
   color: #2563eb;
   font-size: 10px;
   font-weight: 750;
   letter-spacing: .1em;
}

.buyer-simple-card h3 {
   margin-top: 20px;
   font-size: 18px;
   font-weight: 650;
}

.buyer-simple-card p {
   margin-top: 8px;
   color: #66738a;
   font-size: 13px;
   line-height: 1.55;
}

.buyer-simple-arrow {
   position: absolute;
   width: 34px;
   height: 34px;
   display: none;
   place-items: center;
   color: #2563eb;
   background: #fff;
   border: 1px solid #cfe0f6;
   border-radius: 50%;
}

.buyer-shift-bottom-banner {
   width: min(100%, 760px);
   justify-content: flex-start;
   margin: 28px auto 0;
}

.buyer-shift-bottom-banner h4 {
   font-size: 16px;
}

.buyer-shift-bottom-banner p {
   margin-top: 3px;
}

.closing-desc {
   max-width: 630px;
   text-wrap: balance;
}

.ads-footer-lead__copy h2 {
   max-width: 650px;
   font-size: clamp(2.5rem, 3.5vw, 3.7rem);
}

.ads-footer-lead__copy h2 > span {
   display: block;
   white-space: nowrap;
}

.ads-footer-lead__copy > p {
   max-width: 520px;
   text-wrap: pretty;
}

@media (max-width: 1100px) {
   .ads-showcase-grid {
      grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr);
      gap: 38px;
   }
}

@media (max-width: 1020px) {
   .ads-showcase-grid {
      grid-template-columns: 1fr;
   }

   .ads-showcase-copy {
      max-width: 720px;
   }

   .ads-process-grid .ads-process-card:nth-child(2) {
      border-right: 0;
   }

   .ads-process-grid .ads-process-card:nth-child(-n + 2) {
      border-bottom: 1px solid #e1e8f1;
   }
}

@media (max-width: 820px) {
   .buyer-simple-grid {
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 30px;
   }

   .buyer-simple-card {
      min-height: 0;
   }
}

@media (max-width: 700px) {
   .ads-showcase-section,
   .ads-why-section,
   .ads-process-section {
      padding-block: 52px;
   }

   .ads-showcase-copy h2 span,
   .ads-section-heading h2 span {
      display: inline;
   }

   .ads-process-grid .ads-process-card {
      min-height: 0;
      border-right: 0;
      border-bottom: 1px solid #e1e8f1;
   }

   .ads-process-grid .ads-process-card:last-child {
      border-bottom: 0;
   }

   .ads-process-card > svg {
      margin-top: 20px;
   }

   .ads-why-card > p {
      margin-left: 21px;
   }

   .buyer-shift-heading-left h2 {
      font-size: clamp(2.15rem, 10vw, 3rem);
   }

   .buyer-shift-heading-left .nowrap-desktop,
   .ads-footer-lead__copy h2 > span {
      white-space: normal;
   }

   .ads-footer-lead__copy h2 > span {
      display: inline;
   }
}

@media (max-width: 480px) {
   .benefit-badge {
      flex-basis: 100%;
   }

   .comp-card-header {
      align-items: flex-start;
   }

   .product-image {
      width: 46px;
      height: 46px;
   }

   .workflow-header {
      align-items: flex-start;
   }

   .timeline-track,
   .step-node {
      display: none;
   }

   .timeline-step {
      gap: 0;
   }

   .step-icon-wrap {
      width: 38px;
      height: 38px;
   }

   .step-text h4 {
      font-size: 14px;
   }

   .step-text p {
      font-size: 11.5px;
   }

   .active-card-top {
      gap: 10px;
   }

   .campaign-status-mini-card,
   .analytics-mini-card {
      padding: 12px;
   }

   .mini-card-head {
      align-items: flex-start;
      gap: 8px;
   }

   .campaign-badge {
      text-align: center;
   }

   .mini-card-stats {
      grid-template-columns: 1fr 1fr;
      gap: 12px;
   }

   .mini-card-stats .stat-col:last-child {
      grid-column: 1 / -1;
      padding-top: 9px;
      border-top: 1px solid #eef2f6;
   }

   .analytics-mini-card {
      align-items: stretch;
      flex-direction: column;
   }

   .analytics-metrics-side {
      border-left: 0;
      border-top: 1px solid #f1f5f9;
      padding: 10px 0 0;
   }

   .pill-subtext {
      white-space: normal;
   }

   .pill-arrow-btn {
      display: none;
   }

   .faq-team-contact {
      justify-content: flex-start;
   }

   .footer-bottom-actions,
   .legal-links {
      gap: 12px;
   }
}

@media (max-width: 360px) {
   .wrap,
   .footer-container {
      width: calc(100% - 24px);
   }

   .hero h1 {
      font-size: 1.82rem !important;
   }

   .buyer-shift-heading-left h2,
   .dark-section h2,
   .follow-title,
   .smart-move-title,
   .faq-hero-heading {
      font-size: 1.9rem;
   }

   .comparison-card,
   .approach-card,
   .smart-process-card,
   .workflow-card,
   .closing-container {
      padding-inline: 15px;
   }

   .faq-num {
      display: none;
   }

   .faq-line-content {
      padding-left: 0;
   }
}

/* ==========================================================================
   HIGH-CONTRAST BRAND POLISH
   ========================================================================== */
:root {
   --navy: #090909;
   --muted: #3f4a5a;
}

body {
   color: #111827;
}

.header {
   background: rgba(255, 255, 255, .96);
   isolation: isolate;
}

.brand {
   background: transparent !important;
   box-shadow: none !important;
}

.brand img {
   background: transparent !important;
   mix-blend-mode: multiply;
   filter: contrast(1.08) saturate(1.04);
}

.desktop-nav a,
.mobile-nav a,
.mobile-nav button,
.hero-lead,
.benefit-badge,
.buyer-shift-heading-left h2,
.banner-text-content h4,
.follow-title,
.follow-check-item,
.smart-move-title,
.card-title,
.banner-main,
.faq-hero-heading,
.faq-line-title {
   color: #111111;
}

.hero h1 > span {
   color: #111111;
}

.shortlisting-text,
.cold-word,
.patience-word {
   color: #2563eb;
}

.hero-intro,
.channel-label,
.buyer-shift-heading-right p,
.comp-caption,
.comp-subtitle,
.product-model,
.product-tagline,
.banner-text-content p,
.follow-desc,
.step-text p,
.context-text,
.smart-move-intro p,
.card-desc,
.banner-sub,
.faq-hero-sub,
.faq-line-content p {
   color: #3f4a5a;
}

.closing-desc {
   color: #d7e1ef;
}

.button-dark,
.nav-cta,
.hero-primary-btn,
.pilot-cta-btn,
.mobile-cta .button,
.browser-mini-btn {
   background: #050505 !important;
   color: #ffffff !important;
   border-color: #050505 !important;
}

.button-dark:hover,
.nav-cta:hover,
.hero-primary-btn:hover,
.pilot-cta-btn:hover,
.mobile-cta .button:hover,
.browser-mini-btn:hover {
   background: #1a1a1a !important;
   border-color: #1a1a1a !important;
}

.button-secondary,
.hero-secondary-btn {
   color: #111111 !important;
   border-color: #cbd5e1 !important;
}

/* ==========================================================================
   SECTION ALIGNMENT, CHANNEL BAND & CTA REFINEMENT
   ========================================================================== */
.header {
   border-bottom-color: transparent;
   box-shadow: none;
   transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.header.is-scrolled {
   border-bottom-color: #e5e7eb;
   box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
   background: rgba(255, 255, 255, .98);
}

.channel-strip {
   position: relative;
   overflow: hidden;
   border: 0;
   background:
      radial-gradient(circle at 82% 10%, rgba(37, 99, 235, .24), transparent 30%),
      linear-gradient(110deg, #050505 0%, #101521 58%, #081a45 100%);
   color: #ffffff;
}

.channel-strip::before {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .22;
   background-image: linear-gradient(90deg, transparent 49.8%, rgba(255, 255, 255, .12) 50%, transparent 50.2%);
   background-size: 72px 100%;
}

.channel-inner {
   position: relative;
   z-index: 1;
   min-height: 112px;
   padding-block: 22px;
}

.channel-label {
   gap: 4px;
   color: #d7deea;
}

.channel-label span:first-child {
   color: #7fb0ff;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .16em;
}

.channel-label span:last-child {
   color: #ffffff;
   font-size: 15px;
   font-weight: 650;
   letter-spacing: -.01em;
}

.channels {
   gap: 10px;
}

.channel-item,
.channels > span {
   min-height: 50px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 11px 18px;
   border: 1px solid rgba(255, 255, 255, .13);
   border-radius: 999px;
   background: rgba(255, 255, 255, .06);
   color: #c7d0df;
   font-size: 15px;
   letter-spacing: -.015em;
}

.channel-item:hover {
   color: #ffffff;
   border-color: rgba(255, 255, 255, .3);
   background: rgba(255, 255, 255, .1);
}

.channel-active,
.channels > .channel-active {
   color: #ffffff !important;
   border-color: #397cff;
   background: #2563eb;
   box-shadow: 0 10px 24px rgba(37, 99, 235, .3);
}

.tag-next-move {
   color: #dbeafe;
   background: rgba(0, 0, 0, .2);
   border: 1px solid rgba(255, 255, 255, .2);
   padding: 5px 8px;
}

.buyer-shift-header {
   grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
   column-gap: clamp(48px, 6vw, 88px);
   align-items: start;
}

.buyer-shift-heading-left h2 {
   margin-bottom: 0;
}

.buyer-shift-heading-right {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
   margin-top: 0;
   padding-left: 38px;
}

.buyer-shift-heading-right .journey-pill {
   margin-top: 0;
}

.faq-stage-section {
   padding-top: 56px;
}

.smart-move-section {
   padding-bottom: 38px;
}

.nav-cta,
.hero-primary-btn,
.pilot-cta-btn,
.approach-cta-btn,
.mobile-cta .button {
   position: relative;
   overflow: hidden;
   border: 1px solid #050505 !important;
   background: #050505 !important;
   color: #ffffff !important;
   font-weight: 700 !important;
   letter-spacing: -.01em;
   box-shadow: 0 8px 22px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.nav-cta:hover,
.hero-primary-btn:hover,
.pilot-cta-btn:hover,
.approach-cta-btn:hover,
.mobile-cta .button:hover {
   background: #171717 !important;
   border-color: #171717 !important;
   box-shadow: 0 12px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

.nav-cta span,
.hero-primary-btn .btn-arrow,
.pilot-cta-btn .btn-arrow,
.approach-cta-btn .btn-arrow,
.mobile-cta .button span {
   width: 24px;
   height: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 24px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
   font-size: 14px !important;
}

.hero-secondary-btn {
   border-width: 1px !important;
   box-shadow: 0 5px 16px rgba(15, 23, 42, .07) !important;
}

.cta-white-btn {
   padding: 14px 24px !important;
   box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important;
}

.approach-cta-btn {
   box-shadow: 0 0 0 1px rgba(96, 165, 250, .5), 0 12px 28px rgba(0, 0, 0, .35) !important;
}

@media (max-width: 1050px) {
   .buyer-shift-header {
      grid-template-columns: 1fr;
      gap: 22px;
   }

   .buyer-shift-heading-right {
      margin-top: 0;
      padding: 22px 0 0;
      border-left: 0;
      border-top: 1px solid #e2e8f0;
   }
}

@media (max-width: 700px) {
   .channel-inner {
      min-height: 0;
      padding-block: 20px;
   }

   .channel-label span:last-child {
      font-size: 14px;
   }

   .channels {
      gap: 7px;
   }

   .channel-item,
   .channels > span {
      min-height: 44px;
      padding: 8px 6px;
      border-color: rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .06);
      color: #c7d0df;
   }

   .channel-active,
   .channels > .channel-active {
      color: #ffffff !important;
      border-color: #397cff !important;
      background: #2563eb !important;
   }

   .buyer-shift-heading-right {
      gap: 14px;
   }

   .buyer-shift-heading-right .journey-pill {
      order: 0;
   }

   .faq-stage-section {
      padding-top: 48px;
   }

   .smart-move-section {
      padding-bottom: 28px;
   }
}

/* Shared corporate navigation and reduced-capsule refinement */
.wrap,
.footer-container {
   width: 100%;
   max-width: none;
   margin-inline: auto;
   padding-inline: clamp(28px, 6vw, 120px);
}

.nav {
   height: 78px;
}

.brand {
   width: 190px;
}

.desktop-nav {
   margin-left: auto;
   font-weight: 600;
}

.desktop-nav a {
   position: relative;
   padding-block: 27px 25px;
}

.desktop-nav a::after {
   content: '';
   position: absolute;
   left: 0;
   right: 100%;
   bottom: 19px;
   height: 2px;
   background: #2563eb;
   transition: right .2s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
   right: 0;
}

.mobile-nav .active {
   color: #2563eb;
}

.button,
.nav-cta,
.hero-primary-btn,
.hero-secondary-btn,
.benefit-badge,
.journey-pill,
.approach-cta-btn,
.workflow-badge,
.align-pill,
.campaign-badge,
.smart-move-bottom-banner,
.pilot-cta-btn,
.faq-floating-pill,
.cta-white-btn,
.footer-newsletter-form,
.mobile-cta .button,
.channel-item,
.channels > span {
   border-radius: 7px !important;
}

@media (max-width: 700px) {
   .wrap,
   .footer-container {
      width: 100%;
      padding-inline: 16px;
   }

   .nav {
      height: 68px;
   }

   .brand {
      width: 148px;
   }
}

@media (max-width: 400px) {
   .wrap,
   .footer-container {
      width: 100%;
      padding-inline: 12px;
   }
}

/* Conversion-focused ChatGPT Ads refinements */
.hero.wrap {
   min-height: 0;
   grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr);
   gap: clamp(34px, 4vw, 72px);
   padding-top: 22px;
   padding-bottom: 30px;
}

.hero-visual-area {
   height: 530px;
}

.hero-illustration {
   width: auto;
   max-width: 100%;
   height: 100%;
}

.hero-actions {
   margin-bottom: 20px;
}

.ads-showcase-section,
.ads-why-section {
   padding-block: 82px;
}

.ads-showcase-grid {
   display: grid;
   grid-template-columns: minmax(360px, .8fr) minmax(560px, 1.2fr);
   gap: clamp(44px, 6vw, 96px);
   align-items: center;
}

.ads-showcase-copy h2,
.ads-section-heading h2,
.ads-footer-lead__copy h2 {
   margin-top: 18px;
   color: #0b132b;
   font-family: var(--display);
   font-size: clamp(2.3rem, 3.5vw, 3.75rem);
   font-weight: 600;
   line-height: 1.12;
   letter-spacing: -.04em;
}

.ads-showcase-copy h2 span,
.ads-section-heading h2 span {
   display: block;
   color: #2563eb;
}

.ads-showcase-copy > p {
   max-width: 590px;
   margin-top: 23px;
   color: #536079;
   font-size: 15.5px;
   line-height: 1.72;
}

.ads-showcase-copy ul {
   display: grid;
   gap: 14px;
   margin: 25px 0 28px;
   padding: 0;
   list-style: none;
}

.ads-showcase-copy li {
   display: grid;
   grid-template-columns: 42px minmax(0, 1fr);
   gap: 13px;
   align-items: center;
}

.ads-showcase-copy li > svg {
   width: 42px;
   height: 42px;
   padding: 10px;
   color: #2563eb;
   background: #edf5ff;
   border: 1px solid #d7e6fa;
   border-radius: 11px;
}

.ads-showcase-copy li span {
   display: grid;
   gap: 3px;
   color: #65718a;
   font-size: 12.5px;
   line-height: 1.45;
}

.ads-showcase-copy li strong {
   color: #1a2741;
   font-size: 14px;
}

.ads-showcase-visual {
   overflow: hidden;
   margin: 0;
   background: #eef3ff;
   border: 1px solid #dce5f4;
   border-radius: 24px;
   box-shadow: 0 32px 70px -46px rgba(36, 76, 157, .48);
}

.ads-showcase-visual img {
   width: 100%;
   height: auto;
   display: block;
}

.ads-showcase-visual figcaption {
   padding: 12px 18px 15px;
   color: #70809a;
   background: #fff;
   font-size: 10.5px;
   line-height: 1.5;
}

.ads-process-section {
   padding-block: 84px;
   background: linear-gradient(180deg, #f5f8fd, #fff);
   border-block: 1px solid #e6edf6;
}

.ads-section-heading {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
   gap: 70px;
   align-items: end;
   margin-bottom: 44px;
}

.ads-section-heading > p {
   padding-left: 27px;
   color: #59667d;
   border-left: 1px solid #cfd9e7;
   font-size: 14.5px;
   line-height: 1.72;
}

.ads-process-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   overflow: hidden;
   background: #fff;
   border: 1px solid #dce5f1;
   border-radius: 18px;
}

.ads-process-grid article {
   min-height: 285px;
   padding: 25px;
   border-right: 1px solid #e1e8f1;
}

.ads-process-grid article:last-child {
   border-right: 0;
}

.ads-process-grid article > span {
   color: #2563eb;
   font-size: 10px;
   font-weight: 750;
}

.ads-process-grid article > svg {
   width: 46px;
   height: 46px;
   display: block;
   margin-top: 36px;
   padding: 11px;
   color: #2563eb;
   background: #edf5ff;
   border: 1px solid #d6e5f9;
   border-radius: 12px;
}

.ads-process-grid h3 {
   margin-top: 22px;
   color: #15213b;
   font-size: 18px;
   font-weight: 600;
}

.ads-process-grid p {
   margin-top: 9px;
   color: #65718a;
   font-size: 12.5px;
   line-height: 1.62;
}

.ads-inline-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   margin-top: 22px;
   padding: 21px 24px;
   background: #fff;
   border: 1px solid #dbe5f2;
   border-radius: 14px;
}

.ads-inline-cta > div {
   display: grid;
   gap: 3px;
}

.ads-inline-cta strong {
   color: #13203b;
   font-size: 15px;
}

.ads-inline-cta > div span {
   color: #67748b;
   font-size: 12.5px;
}

.ads-why-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
}

.ads-why-grid article {
   display: grid;
   grid-template-columns: 50px minmax(0, 1fr);
   gap: 16px;
   align-items: start;
   padding: 24px;
   background: #fff;
   border: 1px solid #dde6f1;
   border-radius: 14px;
}

.ads-why-grid article > svg {
   width: 50px;
   height: 50px;
   padding: 13px;
   color: #2563eb;
   background: linear-gradient(145deg, #f8fbff, #eaf3ff);
   border: 1px solid #d8e6f9;
   border-radius: 13px;
}

.ads-why-grid h3 {
   color: #17233e;
   font-size: 17px;
   font-weight: 600;
}

.ads-why-grid p {
   margin-top: 6px;
   color: #64718a;
   font-size: 13px;
   line-height: 1.6;
}

.ads-footer-lead {
   padding-block: 72px;
   color: #fff;
   background: radial-gradient(circle at 18% 25%, rgba(37, 99, 235, .28), transparent 28%), #071020;
}

.ads-footer-lead__grid {
   display: grid;
   grid-template-columns: minmax(0, .84fr) minmax(520px, 1.16fr);
   gap: clamp(48px, 7vw, 110px);
   align-items: center;
}

.ads-footer-lead__copy > span {
   color: #7eb2ff;
   font-size: 10px;
   font-weight: 750;
   letter-spacing: .16em;
}

.ads-footer-lead__copy h2 {
   max-width: 610px;
   color: #fff;
}

.ads-footer-lead__copy > p {
   max-width: 560px;
   margin-top: 19px;
   color: #aab8cb;
   font-size: 14.5px;
   line-height: 1.7;
}

.ads-footer-lead__copy > div {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 25px;
   color: #dce8f8;
   font-size: 13px;
}

.ads-footer-lead__copy > div svg {
   width: 18px;
   height: 18px;
   color: #60a5fa;
}

.ads-footer-form {
   display: grid;
   gap: 13px;
   padding: 28px;
   color: #1b2841;
   background: #fff;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 18px;
   box-shadow: 0 28px 60px rgba(0, 0, 0, .2);
}

.ads-footer-form > div:first-child {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
}

.ads-footer-form label {
   display: grid;
   gap: 6px;
   font-size: 11.5px;
   font-weight: 650;
}

.ads-footer-form input,
.ads-footer-form select,
.ads-footer-form textarea {
   width: 100%;
   min-height: 45px;
   padding: 11px 12px;
   color: #1f2c44;
   background: #f7f9fc;
   border: 1px solid #dce4ef;
   border-radius: 8px;
   font: inherit;
   font-size: 13px;
}

.ads-footer-form textarea {
   min-height: 78px;
   resize: vertical;
}

.ads-footer-form input:focus,
.ads-footer-form select:focus,
.ads-footer-form textarea:focus {
   background: #fff;
   border-color: #7da8eb;
   outline: 0;
   box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.ads-footer-form .button {
   justify-self: start;
   margin-top: 2px;
}

.form-honeypot {
   position: fixed !important;
   left: -9999px !important;
   width: 1px !important;
   height: 1px !important;
   opacity: 0 !important;
   pointer-events: none !important;
}

.ads-footer-form__status {
   min-height: 19px;
   margin: 0;
   color: #17653a;
   font-size: 12px;
}

.ads-footer-form__status.is-error {
   color: #b42318;
}

@media (max-width: 1020px) {
   .hero.wrap {
      grid-template-columns: 1fr;
      gap: 18px;
   }

   .hero-copy {
      max-width: 820px;
   }

   .hero-visual-area {
      width: min(100%, 620px);
      height: 470px;
      margin-inline: auto;
   }

   .ads-showcase-grid,
   .ads-footer-lead__grid {
      grid-template-columns: 1fr;
   }

   .ads-showcase-copy {
      max-width: 760px;
   }

   .ads-process-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .ads-process-grid article:nth-child(2) {
      border-right: 0;
   }

   .ads-process-grid article:nth-child(-n + 2) {
      border-bottom: 1px solid #e1e8f1;
   }
}

@media (max-width: 700px) {
   .hero.wrap {
      gap: 12px !important;
      padding-top: 22px !important;
      padding-bottom: 26px !important;
   }

   .hero-visual-area {
      height: 360px;
   }

   .ads-showcase-section,
   .ads-why-section,
   .ads-process-section,
   .ads-footer-lead {
      padding-block: 58px;
   }

   .ads-showcase-grid {
      grid-template-columns: 1fr;
      gap: 34px;
   }

   .ads-showcase-copy h2,
   .ads-section-heading h2,
   .ads-footer-lead__copy h2 {
      font-size: clamp(2rem, 9.5vw, 2.65rem);
   }

   .ads-section-heading {
      grid-template-columns: 1fr;
      gap: 22px;
      margin-bottom: 30px;
   }

   .ads-section-heading > p {
      padding: 18px 0 0;
      border-top: 1px solid #cfd9e7;
      border-left: 0;
   }

   .ads-process-grid,
   .ads-why-grid {
      grid-template-columns: 1fr;
   }

   .ads-process-grid article {
      min-height: 0;
      border-right: 0;
      border-bottom: 1px solid #e1e8f1;
   }

   .ads-process-grid article:last-child {
      border-bottom: 0;
   }

   .ads-inline-cta {
      align-items: stretch;
      flex-direction: column;
   }

   .ads-inline-cta .button,
   .ads-footer-form .button {
      width: 100%;
   }

   .ads-footer-form {
      padding: 21px 17px;
   }

   .ads-footer-form > div:first-child {
      grid-template-columns: 1fr;
   }
}

/* Final small-screen guardrails for the campaign page */
@media (max-width: 700px) {
   .hero h1 {
      max-width: 100%;
      font-size: clamp(1.9rem, 8.35vw, 2.2rem) !important;
      line-height: 1.08;
   }

   .hero h1 .nowrap-desktop,
   .buyer-shift-heading-left .nowrap-desktop,
   .dark-section .nowrap-desktop,
   .smart-move-title .nowrap-desktop,
   .ads-footer-lead__copy h2 > span {
      display: inline;
      white-space: normal;
   }

   .hero-copy,
   .ads-showcase-copy,
   .ads-section-heading,
   .buyer-shift-heading-left,
   .buyer-shift-heading-right,
   .ads-footer-lead__copy {
      width: 100%;
      max-width: 100%;
      min-width: 0;
   }

   .hero-actions {
      align-items: stretch;
      flex-direction: column;
   }

   .hero-actions .button {
      width: 100%;
   }

   .ads-showcase-copy h2,
   .ads-section-heading h2,
   .buyer-shift-heading-left h2,
   .ads-footer-lead__copy h2 {
      max-width: 100%;
      font-size: clamp(1.9rem, 8.35vw, 2.2rem);
      line-height: 1.12;
      text-wrap: balance;
   }

   .ads-showcase-visual {
      width: 100%;
      border-radius: 16px;
   }

   .ads-showcase-visual figcaption {
      font-size: 9.5px;
   }

   .ads-process-card p,
   .buyer-simple-card p,
   .ads-footer-lead__copy > p {
      max-width: none;
   }

   .buyer-shift-bottom-banner {
      width: 100%;
   }

   .ads-footer-lead__copy h2 > span {
      display: block;
   }
}

/* Reference-led ChatGPT Ads process section */
.ads-process-section {
   position: relative;
   overflow: hidden;
   background:
      radial-gradient(circle at 82% 9%, rgba(120, 171, 255, .17), transparent 29%),
      linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.ads-process-section .ads-section-heading {
   grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr);
   gap: clamp(25px, 4vw, 64px);
   align-items: center;
   min-height: 300px;
   margin-bottom: 18px;
}

.ads-process-heading-copy {
   position: relative;
   z-index: 2;
}

.ads-process-heading-copy h2 {
   max-width: 760px;
   margin-top: 18px;
   font-size: clamp(2.65rem, 4.2vw, 4.3rem);
   line-height: 1.08;
}

.ads-process-heading-copy h2 > span {
   display: block;
}

.ads-process-heading-copy > p {
   max-width: 690px;
   margin-top: 20px;
   color: #536079;
   font-size: 15.5px;
   line-height: 1.65;
}

.ads-process-vector {
   position: relative;
   height: 300px;
   isolation: isolate;
}

.ads-process-vector::before {
   content: '';
   position: absolute;
   inset: -70px -80px -35px -35px;
   z-index: -1;
   background: radial-gradient(circle, rgba(219, 234, 255, .82), rgba(245, 249, 255, .35) 56%, transparent 74%);
   border-radius: 50%;
}

.ads-process-vector img {
   position: absolute;
   width: min(660px, 48vw);
   max-width: none;
   height: auto;
   top: 50%;
   left: 50%;
   display: block;
   mix-blend-mode: screen;
   transform: translate(-49%, -50%);
}

.ads-process-section .ads-process-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: clamp(26px, 3vw, 48px);
   overflow: visible;
   background: transparent;
   border: 0;
   border-radius: 0;
}

.ads-process-grid .ads-process-card {
   min-height: 292px;
   overflow: visible;
   padding: 26px 25px 50px;
   background: rgba(255, 255, 255, .88);
   border: 1px solid #d6e4f5;
   border-radius: 18px;
   box-shadow: 0 24px 50px -42px rgba(29, 78, 155, .55);
   isolation: isolate;
}

.ads-process-grid .ads-process-card:last-child {
   border-right: 1px solid #d6e4f5;
}

.ads-process-grid .ads-process-card::before {
   content: '';
   position: absolute;
   inset: auto 0 0;
   z-index: -1;
   height: 57px;
   background: linear-gradient(135deg, rgba(219, 234, 254, .32), rgba(191, 219, 254, .75));
   border-radius: 0 0 17px 17px;
   clip-path: polygon(0 58%, 23% 71%, 52% 68%, 76% 40%, 100% 28%, 100% 100%, 0 100%);
}

.ads-process-grid .ads-process-card--violet::before {
   background: linear-gradient(135deg, rgba(237, 233, 254, .32), rgba(221, 214, 254, .85));
}

.ads-process-grid .ads-process-card--green::before {
   background: linear-gradient(135deg, rgba(204, 251, 241, .35), rgba(153, 246, 228, .72));
}

.ads-process-grid .ads-process-card:not(:last-child)::after {
   content: '→';
   position: absolute;
   width: 42px;
   height: 42px;
   top: 50%;
   right: calc(clamp(26px, 3vw, 48px) * -.5 - 21px);
   z-index: 4;
   display: grid;
   place-items: center;
   color: #2563eb;
   background: #fff;
   border: 1px solid #d4e4f8;
   border-radius: 50%;
   box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
   font-size: 20px;
   pointer-events: none;
   transform: translateY(-50%);
}

.ads-process-card > svg {
   margin-top: 0;
   background: linear-gradient(145deg, #edf6ff, #dceaff);
}

.ads-process-card--violet > svg {
   color: #5b5ce2;
   background: linear-gradient(145deg, #f4f2ff, #e9e5ff);
}

.ads-process-card--green > svg {
   color: #0ca678;
   background: linear-gradient(145deg, #e9fff9, #d6f8ef);
}

.ads-process-card > span {
   display: block;
   margin-top: 17px;
   font-size: 12px;
}

.ads-process-card h3 {
   margin-top: 10px;
   font-size: 18px;
}

.ads-process-card p {
   max-width: 250px;
   margin-top: 10px;
   font-size: 13px;
   line-height: 1.55;
}

.ads-process-grid .ads-process-card:hover,
.ads-process-grid .ads-process-card:focus-visible,
.ads-process-grid .ads-process-card.is-active {
   background: #fff;
   border-color: #9bc1f5;
   box-shadow: 0 24px 50px -35px rgba(37, 99, 235, .62);
}

.ads-process-grid .ads-process-card:hover {
   transform: translateY(-7px);
}

.ads-process-section .ads-inline-cta {
   display: grid;
   grid-template-columns: 72px minmax(0, 1fr) auto;
   gap: 23px;
   margin-top: 30px;
   padding: 24px 28px;
   border-color: #d4e4f7;
   border-radius: 18px;
   box-shadow: 0 22px 45px -42px rgba(20, 62, 130, .7);
}

.ads-inline-cta__icon {
   width: 58px;
   height: 58px;
   display: grid;
   place-items: center;
   color: #fff;
   background: linear-gradient(145deg, #68a8ff, #1762e8);
   border: 6px solid #dcecff;
   border-radius: 50%;
   box-shadow: 0 8px 20px rgba(37, 99, 235, .22);
}

.ads-inline-cta__icon svg {
   width: 21px;
   height: 21px;
}

.ads-inline-cta__copy {
   gap: 4px !important;
}

.ads-inline-cta__copy small {
   color: #2f7cf5;
   font-size: 10px;
   font-weight: 750;
   letter-spacing: .12em;
}

.ads-inline-cta__copy strong {
   font-size: 21px;
}

.ads-inline-cta__copy > span {
   color: #68758c;
   font-size: 13px;
}

.ads-inline-cta__action {
   justify-items: center;
   gap: 7px !important;
}

.ads-inline-cta__action .button {
   min-width: 260px;
}

.ads-inline-cta__action small {
   color: #7b879b;
   font-size: 10px;
}

@media (max-width: 1020px) {
   .ads-process-section .ads-section-heading {
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
   }

   .ads-process-section .ads-process-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
   }

   .ads-process-grid .ads-process-card:not(:last-child)::after {
      display: none;
   }

   .ads-process-grid .ads-process-card:nth-child(-n + 2) {
      border-bottom: 1px solid #d6e4f5;
   }
}

@media (max-width: 760px) {
   .ads-process-section .ads-section-heading {
      grid-template-columns: 1fr;
      gap: 10px;
      min-height: 0;
   }

   .ads-process-heading-copy h2 {
      font-size: clamp(2rem, 9vw, 2.65rem);
   }

   .ads-process-vector {
      height: 240px;
   }

   .ads-process-vector img {
      width: min(650px, 145vw);
      left: 48%;
   }

   .ads-process-section .ads-process-grid {
      grid-template-columns: 1fr;
   }

   .ads-process-grid .ads-process-card {
      min-height: 240px;
      padding-bottom: 46px;
   }

   .ads-process-card p {
      max-width: none;
   }

   .ads-process-section .ads-inline-cta {
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 16px;
      padding: 20px;
   }

   .ads-inline-cta__icon {
      width: 50px;
      height: 50px;
      border-width: 5px;
   }

   .ads-inline-cta__copy strong {
      font-size: 18px;
   }

   .ads-inline-cta__action {
      grid-column: 1 / -1;
      width: 100%;
   }

   .ads-inline-cta__action .button {
      width: 100%;
      min-width: 0;
   }
}

/* Reference-matched buyer journey */
.opportunity-section {
   padding-top: 92px;
   padding-bottom: 88px;
}

.buyer-story-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1.13fr);
   gap: 10px;
   align-items: center;
   margin-top: 48px;
}

.buyer-story-card {
   min-width: 0;
   min-height: 330px;
   align-self: stretch;
   padding: 25px 25px 28px;
   background: rgba(255, 255, 255, .92);
   border: 1px solid #cfe1f8;
   border-radius: 18px;
   box-shadow: 0 20px 46px -42px rgba(27, 74, 151, .58);
   transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.buyer-story-card:hover {
   border-color: #8dbaf5;
   box-shadow: 0 24px 48px -35px rgba(37, 99, 235, .5);
   transform: translateY(-5px);
}

.buyer-story-card > header {
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr);
   gap: 15px;
   align-items: start;
}

.buyer-story-card > header > span {
   width: 48px;
   height: 48px;
   display: grid;
   place-items: center;
   color: #1164ef;
   background: #edf5ff;
   border: 1px solid #d8e8fb;
   border-radius: 50%;
   font-size: 12px;
   font-weight: 800;
}

.buyer-story-card > header h3 {
   color: #101828;
   font-size: 17px;
   font-weight: 700;
   line-height: 1.35;
}

.buyer-story-card > header p {
   margin-top: 7px;
   color: #8290a8;
   font-size: 12.5px;
   line-height: 1.45;
}

.buyer-stage-arrow {
   display: grid;
   place-items: center;
   color: #6c86ac;
   font-size: 35px;
   font-weight: 300;
}

.buyer-story-body {
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr);
   gap: 15px;
   align-items: center;
   margin-top: 38px;
}

.buyer-story-icon {
   width: 48px;
   height: 48px;
   display: grid;
   place-items: center;
   color: #1468f2;
   background: #edf5ff;
   border: 1px solid #d9e8fb;
   border-radius: 50%;
}

.buyer-story-icon svg {
   width: 20px;
   height: 20px;
}

.buyer-story-icon.chatgpt-mark {
   color: #111827;
   line-height: 1;
}

.buyer-story-icon.chatgpt-mark img {
   width: 24px;
   height: 24px;
   display: block;
}

.buyer-question-bubble,
.buyer-answer-bubble {
   color: #18243a;
   background: linear-gradient(145deg, #fafcff, #f0f4f9);
   border: 1px solid #e1e8f1;
   border-radius: 16px;
}

.buyer-question-bubble {
   padding: 20px 18px;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.45;
}

.buyer-answer-bubble {
   padding: 18px;
}

.buyer-answer-bubble p {
   min-height: 60px;
   font-size: 13px;
   line-height: 1.5;
}

.buyer-answer-bubble > span {
   width: 92%;
   height: 9px;
   display: block;
   margin-top: 9px;
   background: #dfe5ee;
   border-radius: 999px;
}

.buyer-answer-bubble > span:nth-of-type(2) {
   width: 80%;
}

.buyer-answer-bubble > span:nth-of-type(3) {
   width: 54%;
}

.buyer-product-ad {
   margin-top: 25px;
   padding: 17px;
   background: #fff;
   border: 1px solid #d8e4f2;
   border-radius: 16px;
   box-shadow: 0 12px 25px -24px rgba(15, 43, 90, .65);
}

.buyer-product-ad > small {
   display: block;
   margin-bottom: 12px;
   color: #7d8aa1;
   font-size: 10px;
}

.buyer-product-row {
   display: grid;
   grid-template-columns: 104px minmax(118px, 1fr) auto;
   gap: 14px;
   align-items: center;
}

.buyer-product-image {
   width: 104px;
   height: 92px;
   overflow: hidden;
   display: grid;
   place-items: center;
   background: #f1f4f8;
   border-radius: 12px;
}

.buyer-product-image img {
   width: 112%;
   height: 112%;
   display: block;
   object-fit: contain;
}

.buyer-product-copy h4 {
   color: #101828;
   font-size: 14px;
   font-weight: 750;
}

.buyer-product-copy > p {
   margin-top: 6px;
   color: #6d7c95;
   font-size: 11px;
   line-height: 1.45;
}

.buyer-product-copy > div {
   display: flex;
   align-items: center;
   gap: 7px;
   margin-top: 10px;
}

.buyer-product-copy > div > span {
   color: #f59e0b;
   font-size: 11px;
   letter-spacing: .03em;
}

.buyer-product-copy > div > small {
   color: #7c899e;
   font-size: 9.5px;
}

.buyer-product-row > button {
   min-height: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 10px 15px;
   color: #075bdc;
   background: #edf5ff;
   border: 1px solid #bcd8fc;
   border-radius: 11px;
   font-size: 11px;
   font-weight: 700;
   white-space: nowrap;
   cursor: pointer;
   transition: color .2s ease, background .2s ease, transform .2s ease;
}

.buyer-product-row > button:hover {
   color: #fff;
   background: #1768ed;
   transform: translateY(-2px);
}

.buyer-shift-bottom-banner {
   margin-top: 48px;
   background: transparent;
   border: 0;
   box-shadow: none;
}

@media (max-width: 1100px) {
   .buyer-story-grid {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .buyer-story-card {
      min-height: 0;
   }

   .buyer-stage-arrow {
      height: 28px;
      transform: rotate(90deg);
   }

   .buyer-product-row {
      grid-template-columns: 112px minmax(0, 1fr) auto;
   }
}

@media (max-width: 700px) {
   .opportunity-section {
      padding-top: 58px;
      padding-bottom: 56px;
   }

   .buyer-story-grid {
      margin-top: 30px;
   }

   .buyer-story-card {
      padding: 20px;
      border-radius: 15px;
   }

   .buyer-story-body {
      margin-top: 26px;
   }

   .buyer-product-row {
      grid-template-columns: 88px minmax(0, 1fr);
   }

   .buyer-product-image {
      width: 88px;
      height: 78px;
   }

   .buyer-product-row > button {
      grid-column: 1 / -1;
      width: 100%;
   }

   .buyer-shift-bottom-banner {
      margin-top: 30px;
   }
}

/* Buyer-shift alignment corrections */
@media (min-width: 1101px) {
   .buyer-shift-header {
      grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
      gap: 58px;
      align-items: center;
      margin-bottom: 0;
   }

   .buyer-shift-heading-left h2 {
      max-width: 940px;
      font-size: clamp(3rem, 4.05vw, 4.15rem);
      line-height: 1.08;
   }

   .buyer-shift-heading-right {
      align-self: center;
      margin-top: 34px;
      padding-left: 38px;
   }

   .buyer-shift-heading-right p {
      max-width: 520px;
      margin-top: 16px;
      line-height: 1.55;
   }

   .buyer-story-card > header {
      min-height: 75px;
   }

   .ads-process-heading-copy > p {
      max-width: 760px;
      white-space: nowrap;
   }
}

/* Direct WhatsApp contact actions */
.hero-actions .button-whatsapp,
.button-whatsapp {
   color: #ffffff !important;
   background: #20b858 !important;
   border-color: #20b858 !important;
   box-shadow: 0 10px 24px rgba(32, 184, 88, .2);
}

.hero-actions .button-whatsapp:hover,
.button-whatsapp:hover {
   color: #ffffff !important;
   background: #169b49 !important;
   border-color: #169b49 !important;
   box-shadow: 0 12px 28px rgba(22, 155, 73, .27);
}

.button-whatsapp img {
   width: 19px;
   height: 19px;
   display: block;
   flex: 0 0 19px;
}

.ads-footer-lead__copy > .ads-footer-lead__contacts {
   display: grid;
   align-items: start;
   gap: 12px;
   margin-top: 25px;
}

.ads-footer-lead__contacts a {
   width: fit-content;
   display: flex;
   align-items: center;
   gap: 10px;
   color: #dce8f8;
   font-size: 13.5px;
   line-height: 1.5;
   text-decoration: none;
}

.ads-footer-lead__contacts a:hover { color: #ffffff; }

.ads-footer-lead__contacts a > svg {
   width: 18px;
   height: 18px;
   color: #60a5fa;
}

.ads-footer-lead__contacts a > span {
   width: 22px;
   height: 22px;
   display: grid;
   place-items: center;
   flex: 0 0 22px;
   background: #25d366;
   border-radius: 50%;
}

.ads-footer-lead__contacts img {
   width: 13px;
   height: 13px;
   display: block;
}

.global-brand {
    width: 200px!important;
    display: block;
    flex: 0 0 auto;
    line-height: 1;
}