:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  color: #f5faff;
  background: #142d43;
  --muted: #b6ccdf;
  --mint: #a2f1db;
}

* { box-sizing: border-box; }
html { min-width: 0; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 78% 28%, #4e66816b, transparent 49%),
    radial-gradient(ellipse at 37% 92%, #49698855, transparent 57%),
    linear-gradient(120deg, #142c40, #293f56 53%, #132e44);
  line-height: 1.55;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid #a2f1db; outline-offset: 6px; }
button:active, .hero-button:active { transform: translateY(1px); }
p, h1, figure { margin: 0; }
.hero-page-shell { max-width: 1392px; padding: 0 64px; margin: auto; }
.hero-skip-link { position: absolute; top: -80px; left: 20px; z-index: 20; padding: 12px 20px; background: #f7fbff; color: #12285b; border-radius: 9px; }
.hero-skip-link:focus { top: 16px; }
.hero-header { height: 108px; display: flex; align-items: center; gap: 40px; border-bottom: 1px solid #b6d7f21a; }
.hero-brand { display: block; position: relative; width: 184px; height: 62px; flex: 0 0 184px; overflow: hidden; }
.hero-brand img { position: absolute; width: 192px; height: auto; left: -4px; top: -34px; }
.hero-navigation { display: flex; align-items: center; justify-content: center; gap: 32px; margin-left: auto; }
.hero-navigation button, .hero-navigation a { border: 0; background: none; color: #c7d9e9; font-size: 14px; padding: 12px 0; }
.hero-navigation button:hover, .hero-navigation a:hover { color: white; }
.hero-login { margin-left: 14px; display: flex; align-items: center; justify-content: center; gap: 26px; min-height: 43px; padding: 9px 20px; background: #b4dcff08; border: 1px solid #91b9f34d; color: #e5f3ff; border-radius: 9px; font-size: 14px; font-weight: 600; }
.hero-login:hover { background: #b4dcff18; }
.hero-hero { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, 1fr); column-gap: 28px; align-items: center; padding: 38px 0 48px; min-height: calc(100svh - 108px); }
.hero-hero-copy { position: relative; z-index: 2; padding: 28px 0 38px; }
.hero-eyebrow { display: flex; gap: 10px; align-items: center; color: #b8d6ef; font-size: 10px; font-weight: 650; letter-spacing: 1.9px; margin-bottom: 25px; }
.hero-eyebrow>span { width: 6px; height: 6px; flex-shrink: 0; background: var(--mint); border-radius: 50%; box-shadow: 0 0 15px #a2f1db50; }
h1 { font-size: clamp(48px, 4.6vw, 66px); line-height: 1.075; letter-spacing: -2.8px; font-weight: 650; }
h1 em { font-style: normal; color: var(--mint); }
.hero-intro { max-width: 473px; color: #c3d7e8; font-size: 17px; line-height: 1.75; margin-top: 26px; }
.hero-hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.hero-button { display: inline-flex; justify-content: center; align-items: center; gap: 25px; min-height: 53px; padding: 13px 21px; border-radius: 9px; font-size: 14px; line-height: 1.4; font-weight: 600; transition: background .18s, box-shadow .18s, transform .18s; }
.hero-primary { border: 1px solid #499aff; background: linear-gradient(145deg, #1381ff, #0750dc); color: white; box-shadow: inset 0 1px 0 #ffffff30, 0 6px 22px #073d8540; }
.hero-primary:hover { box-shadow: inset 0 1px 0 #ffffff50, 0 8px 28px #0865f550; filter: brightness(1.08); }
.hero-button span, .hero-login span { font-size: 19px; font-weight: 400; }
.hero-secondary { border: 1px solid #7699bb70; background: linear-gradient(135deg, #647e9825, #062e5b26); color: #e2f1ff; }
.hero-secondary:hover { background: #8bbfe51f; }
.hero-channels { margin-top: 29px; }
.hero-channels-label { color: #afc4d8; font-size: 11px; }
.hero-channel-list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 11px; color: #deedfa; font-size: 13px; font-weight: 600; }
.hero-channel-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border: 1px solid #a9d7ff29; border-radius: 12px; background: linear-gradient(130deg, #a9d7ff12, #7dc3fa05); box-shadow: inset 0 1px 0 #ffffff08; }
.hero-channel-badge img { display: block; flex-shrink: 0; }
.hero-web-channel { font-weight: 400; font-size: 11px; color: #afc4d8; padding-left: 4px; }
.hero-web-channel span { margin-left: 4px; }
.hero-free-note { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 13px; color: #b6ccdf; font-size: 11px; }
.hero-free-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; color: #a2f1db; background: #a2f1db0d; border: 1px solid #a2f1db38; border-radius: 20px; font-weight: 600; }
.hero-free-badge::before { content: '✦'; font-size: 10px; }
.hero-hero-visual { position: relative; height: 590px; min-width: 0; isolation: isolate; }
.hero-phone-wrap { position: absolute; width: 295px; left: 50%; top: 10px; transform: translateX(-49%) rotate(5deg); z-index: 2; }
.hero-phone { display: block; width: 100%; height: auto; filter: drop-shadow(12px 25px 22px #06192680); }
.hero-phone-halo {
  position: absolute;
  inset: 10px 0 25px;
  z-index: -1;
  pointer-events: none;
  /* Each glow reaches zero alpha before its own box edge. */
  background:
    radial-gradient(ellipse closest-side at 48% 43%, #2589d92b 0%, #2589d918 42%, #2589d908 70%, #2589d900 100%),
    radial-gradient(ellipse closest-side at 70% 72%, #5aeac515 0%, #5aeac508 50%, #5aeac500 100%);
}
.hero-orbit { position: absolute; border: 1px solid #9ccfe219; width: 440px; height: 440px; border-radius: 50%; top: 78px; left: 50%; transform: translateX(-50%); z-index: -1; }
.hero-orbit-two { width: 530px; height: 530px; top: 33px; border-style: dashed; border-color: #9ccfe210; }
.hero-orbit-dot { position: absolute; right: 4%; top: 197px; width: 7px; height: 7px; border-radius: 50%; background: #87b9d7; box-shadow: 0 0 0 7px #87b9d70a; }
.hero-review-note { display: flex; align-items: flex-start; gap: 9px; position: absolute; z-index: 3; left: -12px; top: 122px; padding: 12px 15px; color: #c4ddef; font-size: 11px; line-height: 1.7; border: 1px solid #89b6d43d; background: linear-gradient(130deg, #38576bee, #203d53f5); box-shadow: 0 8px 30px #0a213333; border-radius: 12px; transform: rotate(-3deg); }
.hero-review-note strong { color: #f0f8ff; font-weight: 600; }
.hero-note-dot { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; margin-top: 4px; background: #a2f1db13; color: var(--mint); border: 1px solid #a2f1db40; font-size: 13px; }
.hero-signal-card { position: absolute; z-index: 4; width: 280px; bottom: 54px; right: -4px; color: #12285b; padding: 18px 20px 14px; border: 1px solid #ffffffaa; border-radius: 15px; background: linear-gradient(120deg, #fbfdff, #f1f8ff 55%, #e7f3ff); box-shadow: 0 16px 40px #041a2c40, inset 0 1px 0 white; transform: rotate(-3deg); }
.hero-signal-heading { display: flex; gap: 9px; align-items: center; color: #08745d; font-size: 13px; font-weight: 650; }
.hero-checkmark { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: #ccf1e6; font-size: 16px; }
.hero-signal-dot { width: 5px; height: 5px; background: #168369; margin-left: auto; border-radius: 50%; }
.hero-signal-route { display: flex; align-items: center; gap: 12px; margin: 12px 0 15px; }
.hero-route-line { align-self: stretch; width: 1px; margin-left: 12px; background: #99c9ba; position: relative; }
.hero-route-line::after { content: ""; position: absolute; width: 5px; height: 5px; border-right: 1px solid #399e82; border-bottom: 1px solid #399e82; bottom: 0; left: -2px; transform: rotate(45deg); }
.hero-signal-caption { display: block; font-size: 10px; color: #526d91; }
.hero-signal-route strong { display: block; font-size: 14px; font-weight: 650; margin-top: 2px; }
.hero-signal-route strong span { margin-left: 5px; color: #0865f5; }
.hero-chart { display: flex; gap: 3px; align-items: flex-end; margin-left: auto; height: 25px; }
.hero-chart i { width: 5px; height: 10px; border-radius: 2px; background: #f4aa39; }
.hero-chart i:nth-child(2) { height: 17px; }.hero-chart i:nth-child(3) { height: 25px; }
.hero-signal-card>p { border-top: 1px solid #ccdded; padding-top: 10px; font-size: 10px; color: #526d91; }
figcaption { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 10px; color: #a9c3d9; letter-spacing: .25px; }

@media (min-width: 1500px) { .hero-page-shell { padding-top: 10px; }.hero-hero { padding-top: 55px; } }
@media (max-width: 1150px) {
  .hero-page-shell { padding: 0 40px; }
  .hero-header { gap: 25px; }.hero-navigation { gap: 23px; }
  .hero-hero { column-gap: 8px; }.hero-hero-visual { height: 565px; }
  h1 { font-size: 52px; }.hero-eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  .hero-intro { font-size: 16px; max-width: 405px; }.hero-desktop-break { display: none; }
  .hero-button { padding: 13px 16px; gap: 15px; font-size: 13px; }
  .hero-phone-wrap { width: 275px; }.hero-review-note { left: -8px; top: 107px; font-size: 10px; padding: 10px 12px; }
  .hero-signal-card { width: 260px; right: 0; bottom: 55px; }
  .hero-orbit { width: 350px; height: 350px; top: 110px; }.hero-orbit-two { width: 405px; height: 405px; top: 83px; }

}
@media (max-width: 900px) and (min-width: 681px) {
  .hero-page-shell { padding: 0 28px; }.hero-header { height: 95px; gap: 20px; }.hero-brand { width: 155px; flex-basis: 155px; }.hero-brand img { width: 165px; top: -23px; }
  .hero-navigation { gap: 18px; }.hero-navigation a, .hero-navigation button { font-size: 12px; }.hero-login { gap: 14px; padding: 9px 15px; margin-left: 0; }
  .hero-hero { padding-top: 30px; grid-template-columns: 1.1fr 1fr; }.hero-hero-copy { padding-top: 10px; } h1 { font-size: 43px; letter-spacing: -1.9px; }
  .hero-eyebrow { max-width: 290px; letter-spacing: 1.2px; font-size: 8px; }
  .hero-hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }.hero-button { min-width: 205px; justify-content: space-between; }
  .hero-hero-visual { height: 515px; }.hero-phone-wrap { width: 248px; top: 0; left: 53%; }.hero-review-note { top: 70px; left: -18px; font-size: 9px; }
  .hero-signal-card { width: 240px; bottom: 38px; right: -6px; padding: 15px; }.hero-signal-card>p { font-size: 9px; }.hero-orbit { width: 285px; height: 285px; }.hero-orbit-two { width: 310px; height: 310px; top: 96px; }

}
@media (max-width: 680px) {
  .hero-page-shell { padding: 0 23px; }
  .hero-header { height: 82px; justify-content: space-between; gap: 15px; }
  .hero-brand { width: 146px; flex-basis: 146px; height: 58px; }.hero-brand img { width: 157px; top: -21px; }
  .hero-navigation { display: none; }.hero-login { min-height: 42px; padding: 8px 15px; font-size: 12px; gap: 17px; margin: 0; }
  .hero-hero { display: flex; flex-direction: column; padding: 29px 0 30px; gap: 0; align-items: stretch; min-height: 0; }
  .hero-hero-copy { padding: 0; }.hero-eyebrow { margin-bottom: 19px; font-size: 8px; letter-spacing: 1.35px; gap: 8px; }
  h1 { font-size: clamp(38px, 8.8vw, 57px); letter-spacing: -1.8px; line-height: 1.08; }
  h1 br:first-of-type { display: none; }
  .hero-intro { margin-top: 21px; max-width: 460px; font-size: 15px; line-height: 1.7; }
  .hero-hero-actions { margin-top: 23px; gap: 10px; }.hero-button { min-height: 51px; padding: 12px 13px; gap: 12px; font-size: 12px; flex: 1; white-space: nowrap; }.hero-button span { font-size: 17px; }
  .hero-channels { margin-top: 22px; }.hero-channels-label { font-size: 10px; }.hero-channel-list { font-size: 11px; gap: 8px; margin-top: 9px; }.hero-channel-badge { gap: 7px; padding: 6px 10px 6px 6px; }.hero-channel-badge img { width: 25px; height: 25px; }.hero-web-channel { font-size: 10px; }.hero-free-note { font-size: 10px; gap: 7px; }
  .hero-hero-visual { margin: 28px auto 0; width: 100%; max-width: 410px; height: 487px; }
  .hero-phone-wrap { width: 236px; top: 0; left: 46%; transform: translateX(-50%) rotate(5deg); }
  .hero-review-note { left: auto; right: 0; top: 42px; font-size: 9px; padding: 10px 12px; transform: rotate(3deg); }
  .hero-signal-card { width: 249px; right: 0; bottom: 39px; padding: 15px 17px 12px; transform: rotate(-3deg); }
  .hero-orbit { width: 280px; height: 280px; top: 85px; }.hero-orbit-two { width: 325px; height: 325px; top: 62px; }.hero-orbit-dot { top: 230px; right: 1%; }
  figcaption { bottom: 0; font-size: 9px; }

}
@media (max-width: 359px) {
  .hero-page-shell { padding: 0 17px; }.hero-eyebrow { font-size: 7px; letter-spacing: 1px; }h1 { font-size: 35px; }
  .hero-hero-actions { flex-direction: column; }.hero-button { flex: auto; justify-content: space-between; font-size: 13px; }.hero-orbit-two { width: 280px; height: 280px; top: 80px; }
}
/* Mobile composition: keep the lead's review buttons unobstructed. */
@media (max-width: 680px) {
  .hero-page-shell { padding-inline: 22px; }
  .hero-hero { padding-top: 30px; }
  .hero-hero-copy { max-width: 490px; width: 100%; margin-inline: auto; }
  h1 { font-size: clamp(36px, 9.2vw, 54px); line-height: 1.12; letter-spacing: -1.6px; text-wrap: balance; }
  h1 br { display: none; }
  .hero-eyebrow { font-size: 9px; letter-spacing: 1px; line-height: 1.6; }
  .hero-hero-actions { flex-wrap: wrap; }
  .hero-button { min-width: 0; min-height: 52px; font-size: 13px; white-space: normal; }
  .hero-login { min-height: 44px; }
  .hero-channels-label, .hero-free-note { font-size: 11px; }
  .hero-channel-list { gap: 10px; font-size: 12px; }
  .hero-web-channel { font-size: 11px; }
  .hero-hero-visual { display: grid; justify-items: center; height: auto; margin-top: 32px; padding: 0 0 8px; }
  .hero-review-note { position: relative; grid-row: 1; inset: auto; transform: none; margin: 0 0 22px; padding: 10px 15px; font-size: 11px; background: linear-gradient(130deg, #38576b80, #203d5366); }
  .hero-phone-wrap { position: relative; grid-row: 2; inset: auto; width: min(270px, 78%); transform: rotate(3deg); }
  .hero-signal-card { position: relative; grid-row: 3; inset: auto; width: min(290px, 94%); transform: none; margin-top: -24px; padding: 17px 19px 14px; }
  .hero-signal-card>p { font-size: 11px; }
  .hero-signal-caption { font-size: 11px; }
  figcaption { position: static; grid-row: 4; margin-top: 18px; font-size: 10px; }
  .hero-phone-halo { inset: 45px 0 100px; }
  .hero-orbit { top: 150px; width: min(280px, 90%); height: auto; aspect-ratio: 1; }
  .hero-orbit-two { top: 125px; width: min(330px, 100%); height: auto; }
  .hero-orbit-dot { top: 260px; right: 2%; }
}
@media (max-width: 420px) {
  .hero-hero-actions { flex-direction: column; gap: 10px; }
  .hero-button { flex: auto; width: 100%; justify-content: space-between; padding-inline: 18px; }
  .hero-free-note { align-items: flex-start; font-size: 10px; }
}
@media (max-width: 359px) {
  .hero-page-shell { padding-inline: 18px; }
  .hero-eyebrow { font-size: 8px; letter-spacing: .7px; }
  h1 { font-size: 35px; }
  .hero-intro { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }*, *::before, *::after { transition: none !important; }
}



*{box-sizing:border-box}p,.how-title,.how-step h3{margin:0}.how-how-it-works{max-width:1392px;width:100%;margin:auto;padding:76px 64px 56px}.how-section-heading{text-align:center}.how-eyebrow{display:flex;justify-content:center;align-items:center;gap:10px;color:#b8d6ef;font-size:10px;font-weight:650;letter-spacing:1.9px}.how-eyebrow>span{width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 15px #a2f1db50}.how-title{font-size:clamp(36px,4vw,54px);line-height:1.15;letter-spacing:-1.9px;font-weight:650;margin-top:18px}.how-intro{font-size:17px;color:#c3d7e8;line-height:1.7;margin-top:18px}.how-intro em{font-style:normal;color:var(--mint)}
.how-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;list-style:none;padding:0;margin:48px 0 0}.how-step{min-width:0}.how-step-marker{display:flex;align-items:center;gap:16px;margin-bottom:20px;color:#88a7bd}.how-step-marker>span{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border:1px solid #a2f1db45;border-radius:50%;font-size:11px;letter-spacing:1px;color:var(--mint);background:#a2f1db07}.how-step-marker:after{content:"";height:1px;background:linear-gradient(90deg,#9fbfd43d,#9fbfd417);flex:1;order:1}.how-step-marker>i{order:2;font-size:19px;font-style:normal;line-height:1}.how-step-marker>.how-finish{color:var(--mint);font-size:14px}.how-illustration{height:235px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,#8cb8d517,transparent 72%);margin-bottom:25px}.how-step h3{font-size:23px;line-height:1.28;letter-spacing:-.55px;font-weight:600}.how-step>p{color:var(--muted);font-size:14px;line-height:1.8;margin-top:13px;max-width:280px}
.how-phone{width:158px;height:219px;border:3px solid #71899a;border-radius:23px;background:#12283b;box-shadow:8px 12px 25px #07172540,inset 0 0 0 2px #071a2c;transform:rotate(-5deg);padding:15px 9px 9px;position:relative}.how-phone-speaker{position:absolute;width:43px;height:5px;border-radius:9px;background:#071b29;top:5px;left:calc(50% - 21px)}.how-chat-header{display:flex;align-items:center;gap:7px;font-size:10px;line-height:1.3}.how-chat-header small{display:block;color:#9cb7ca;font-size:7px}.how-avatar{display:grid;place-items:center;background:#397491;color:#d0fff0;width:25px;height:25px;border-radius:50%;font-weight:700}.how-chat-header>b{margin-left:auto;font-size:9px}.how-message{margin-top:12px;background:#355269;border:1px solid #54758b;border-radius:2px 11px 11px;padding:9px 10px;font-size:9px}.how-message>small{font-size:6px;letter-spacing:1px;color:var(--mint)}.how-message>strong{display:block;font-size:12px;margin:4px 0}.how-message>span{color:#d0dfeb;line-height:1.5}.how-message-line{height:3px;background:#89a8bd55;width:82%;margin-top:8px;border-radius:4px}.how-message-line.how-short{width:60%;margin-top:5px}.how-message time{display:block;text-align:right;font-size:7px;color:#acc7d7;margin-top:6px}.how-phone-input{font-size:8px;color:#88a4b9;margin:9px 4px;display:flex;justify-content:space-between}.how-phone-input span{color:var(--mint)}.how-messengers{position:absolute;bottom:0;display:flex;gap:7px;transform:rotate(2deg)}.how-messengers>span{display:flex;align-items:center;gap:5px;font-size:10px;padding:7px 9px 7px 6px;border:1px solid #7ca8c566;border-radius:10px;background:#29485e;box-shadow:0 6px 16px #07172535}.how-messengers img{display:block}
.how-quality-panel{width:218px;padding:18px 16px;background:linear-gradient(135deg,#3c586c,#253e52);border:1px solid #7b9aaf66;border-radius:14px;box-shadow:0 12px 25px #07172525;transform:rotate(2deg)}.how-panel-label{font-size:7px;color:#b6ccdf;letter-spacing:1px;font-weight:600}.how-quality-panel>strong{display:block;font-size:16px;margin:6px 0 13px;font-weight:600}.how-quality{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;border:1px solid #a9c3d62b;margin-top:6px;font-size:11px;color:#c2d2df}.how-quality>span{font-size:15px;line-height:1}.how-quality.how-good{background:#a2f1db;color:#143e3d;border-color:#c3ffed;font-weight:650;box-shadow:0 3px 12px #9aedcf12}.how-quality>b{margin-left:auto}.how-quality.how-bad>span{color:#e9b8b4}.how-quality.how-spam>span{color:#aac0d2}.how-decision-tag{position:absolute;bottom:0;right:12px;border:1px solid #a2f1db42;background:#234c51;border-radius:20px;padding:5px 12px;font-size:9px;color:#baf9e6;transform:rotate(-4deg)}
.how-signal-scene{flex-direction:column}.how-signal-pill{display:flex;align-items:center;gap:10px;background:#294f52;border:1px solid #a2f1db55;color:var(--mint);border-radius:9px;padding:10px 15px;font-size:12px}.how-signal-pill>span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#a2f1db18}.how-signal-path{height:62px;position:relative;width:100%;padding-left:50%;display:flex;align-items:center}.how-signal-path>span{position:absolute;width:1px;height:44px;top:0;background:linear-gradient(#a2f1db99,#a2f1db55)}.how-signal-path>b{position:absolute;left:calc(50% - 5px);bottom:5px;color:var(--mint);font-size:17px;font-weight:400}.how-signal-path>small{margin-left:12px;font-size:8px;color:#abc3d5}.how-metrika-panel{width:223px;max-width:100%;border:1px solid #fff9;border-radius:12px;background:linear-gradient(120deg,#fbfdff,#e7f3ff);padding:16px;color:#213b50;box-shadow:0 14px 24px #07172530;transform:rotate(-2deg)}.how-metrika-name{display:flex;align-items:center;gap:10px;font-size:14px}.how-metrika-icon{display:flex;height:24px;gap:3px;align-items:flex-end}.how-metrika-icon>i{width:5px;height:10px;background:#f4aa39;border-radius:2px}.how-metrika-icon>i:nth-child(2){height:17px}.how-metrika-icon>i:nth-child(3){height:24px}.how-conversion{display:flex;justify-content:space-between;gap:6px;border-top:1px solid #c7d9e6;margin-top:13px;padding-top:10px;font-size:9px;color:#516d82}.how-conversion b{color:#17715d;font-weight:600}.how-conversion i{font-style:normal;margin-left:4px}
.how-learning-panel{width:218px;max-width:100%;padding:17px 14px 12px;border:1px solid #80b0b954;border-radius:14px;background:linear-gradient(130deg,#36546699,#23404e99);text-align:center}.how-learning-panel>strong{display:block;margin-top:4px;font-size:15px;font-weight:600;color:#dffaf1}.how-target{width:128px;height:128px;border:1px dashed #a2f1db40;border-radius:50%;margin:11px auto;display:grid;place-items:center;position:relative}.how-target>div{width:92px;height:92px;border:1px solid #a2f1db40;border-radius:50%;display:grid;place-items:center;background:#a2f1db05}.how-target>div>div{width:55px;height:55px;border:1px solid #a2f1db80;border-radius:50%;display:grid;place-items:center;background:#a2f1db15;box-shadow:0 0 25px #a2f1db15}.how-target span{font-size:25px;color:var(--mint)}.how-lead{position:absolute;display:grid;place-items:center;width:24px;height:24px;background:#a2f1db;border:3px solid #315161;border-radius:50%;color:#17493e;font-style:normal;font-size:11px;box-shadow:0 0 0 1px #a2f1db40}.how-lead-one{left:2px;top:17px}.how-lead-two{right:-5px;top:55px}.how-lead-three{left:31px;bottom:0}.how-learning-caption{font-size:8px;color:#b9d5d7;display:flex;justify-content:center;align-items:center;gap:5px}.how-learning-caption>span{width:4px;height:4px;background:var(--mint);border-radius:50%}
.how-takeaway{border-top:1px solid #b6d7f125;margin-top:42px;padding-top:26px;display:flex;justify-content:center;align-items:center;gap:12px;color:#b6ccdf;font-size:13px}.how-takeaway-icon{display:grid;place-items:center;width:27px;height:27px;border:1px solid #a2f1db35;background:#a2f1db0a;border-radius:50%;color:var(--mint);flex-shrink:0}.how-takeaway strong{font-weight:500;color:#e3f5ef}.how-mobile-break{display:none}
@media(min-width:1500px){.how-how-it-works{padding-block:90px}.how-steps{margin-top:58px}.how-illustration{margin-bottom:30px}}
@media(max-width:1100px){.how-how-it-works{padding-inline:36px}.how-steps{gap:22px}.how-step h3{font-size:20px}.how-step>p{font-size:13px}.how-quality-panel{padding:15px 12px}.how-panel-label{font-size:6px}.how-metrika-panel{padding:13px 10px}.how-metrika-name{font-size:12px}}
@media(max-width:900px){.how-how-it-works{max-width:760px;padding:56px 32px 40px}.how-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}.how-step h3{font-size:24px}.how-step>p{font-size:14px;max-width:none}.how-illustration{height:242px;margin-bottom:22px}.how-quality-panel{padding:18px 16px}.how-panel-label{font-size:7px}.how-metrika-panel{padding:16px}.how-metrika-name{font-size:14px}.how-takeaway{font-size:12px;align-items:flex-start}.how-mobile-break{display:block}}
@media(max-width:520px){.how-how-it-works{padding:42px 24px 32px;max-width:390px}.how-section-heading{text-align:left}.how-eyebrow{justify-content:flex-start;font-size:8px;letter-spacing:1.1px}.how-title{font-size:36px;letter-spacing:-1.3px;margin-top:16px}.how-intro{font-size:15px;margin-top:16px}.how-intro br{display:none}.how-steps{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:32px}.how-step-marker{margin-bottom:10px}.how-illustration{height:236px;margin-bottom:20px}.how-step h3{font-size:25px;line-height:1.25}.how-step h3 br{display:none}.how-step>p{margin-top:10px;font-size:14px}.how-decision-tag{right:25px;bottom:3px}.how-takeaway{margin-top:32px;padding-top:22px;font-size:12px;line-height:1.8;gap:10px}.how-mobile-break{display:none}}



* { box-sizing: border-box; }

p, .feat-title,.feat-feature-copy h3 { margin: 0; }
.feat-features { max-width: 1392px; margin: auto; padding: 76px 64px 44px; }
.feat-section-heading { text-align: center; }
.feat-eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; color: #b8d6ef; font-size: 10px; font-weight: 650; letter-spacing: 1.9px; }
.feat-eyebrow>span { width: 6px; height: 6px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 15px #a2f1db50; }
.feat-title { font-size: clamp(36px, 4vw, 54px); line-height: 1.15; letter-spacing: -1.9px; font-weight: 650; margin-top: 18px; }
.feat-intro { font-size: 17px; color: #c3d7e8; line-height: 1.7; margin-top: 18px; }
.feat-intro em { font-style: normal; color: var(--mint); }
.feat-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.feat-feature-card { min-width: 0; border: 1px solid #a3c9e32b; border-radius: 20px; background: linear-gradient(130deg, #a7cce908, #0e263c24); overflow: hidden; }
.feat-scene { height: 246px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 22px 28px 12px; background: radial-gradient(ellipse at 50% 60%, #8cb8d515, transparent 70%); }
.feat-feature-copy { padding: 22px 32px 30px; }
.feat-feature-label { display: block; font-size: 9px; letter-spacing: 1.5px; color: #abc8dc; margin-bottom: 12px; }.feat-feature-copy h3 { font-size: 28px; line-height: 1.23; letter-spacing: -.7px; font-weight: 600; }
.feat-feature-copy>p { color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 14px; max-width: 470px; }
.feat-channel-route { display: flex; justify-content: space-between; width: 340px; max-width: 100%; }
.feat-channel-route>span { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 72px; font-size: 10px; color: #daebf7; }
.feat-web-icon { font-style: normal; display: grid; place-items: center; width: 32px; height: 32px; background: #a2f1db15; color: var(--mint); border: 1px solid #a2f1db55; border-radius: 10px; font-size: 21px; font-weight: 600; }
.feat-connection-lines { display: flex; justify-content: space-between; height: 30px; width: 268px; max-width: calc(100% - 72px); border: 1px solid #a2f1db45; border-top: 0; border-radius: 0 0 14px 14px; margin-top: 10px; position: relative; }
.feat-connection-lines:after { content: ""; position: absolute; width: 1px; height: 13px; background: #a2f1db70; top: 100%; left: 50%; }
.feat-connection-lines i:nth-child(2) { height: 100%; width: 1px; background: #a2f1db45; }
.feat-synced-lead { width: 238px; max-width: 100%; display: flex; gap: 12px; align-items: center; margin-top: 13px; border: 1px solid #a2f1db65; background: linear-gradient(120deg, #355c60, #24464f); border-radius: 11px; padding: 10px 15px; box-shadow: 0 10px 24px #07172525; }
.feat-check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #a2f1db16; color: var(--mint); flex-shrink: 0; }
.feat-synced-lead small { display: block; font-size: 7px; letter-spacing: 1px; color: #c0dcd9; }
.feat-synced-lead strong { display: block; font-size: 14px; font-weight: 600; color: var(--mint); }
.feat-sync-symbol { margin-left: auto; color: var(--mint); font-size: 25px; }
.feat-scene-caption { font-size: 9px; color: #b5d2d7; margin-top: 11px; display: flex; align-items: center; gap: 6px; }
.feat-scene-caption>span { width: 4px; height: 4px; border-radius: 50%; background: var(--mint); }
.feat-activity-panel, .feat-fields-panel { width: 350px; max-width: 100%; padding: 15px 19px; border: 1px solid #89abc24d; border-radius: 13px; background: linear-gradient(135deg, #3c586ce6, #253e52e6); box-shadow: 0 12px 25px #07172525; }
.feat-panel-heading { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #dfedf8; padding-bottom: 9px; }
.feat-people-symbol { color: #a2f1db99; font-size: 9px; letter-spacing: -2px; }
.feat-activity-row { display: flex; align-items: center; gap: 9px; border-top: 1px solid #b6d7f11a; padding: 10px 0; }
.feat-activity-row:last-child { padding-bottom: 0; }
.feat-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; font-size: 9px; font-weight: 600; }
.feat-mint { background: #a2f1db25; color: #bdf8e8; }.feat-blue { background: #7dbbfa25; color: #c7e4ff; }.feat-lilac { background: #c3b4f525; color: #e4dcff; }
.feat-activity-row strong { display: block; font-size: 10px; font-weight: 600; }.feat-activity-row small { display: block; font-size: 8px; color: #b6ccdf; }
.feat-activity-result { margin-left: auto; text-align: right; }.feat-status { font-size: 9px; padding: 3px 7px; border-radius: 5px; }.feat-good { background: #a2f1db16; color: #b2f6de; }.feat-bad { background: #ecada910; color: #f1c4c0; }.feat-spam { background: #b7c5de12; color: #c6d5e8; }.feat-activity-result time { display: block; font-size: 8px; color: #adc5d8; margin-top: 4px; }
.feat-flow { display: flex; align-items: flex-start; justify-content: center; width: 100%; }.feat-flow-node { text-align: center; flex-shrink: 0; }.feat-flow-node>span { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #8daec34d; border-radius: 14px; background: #678da61a; color: #c7dfef; margin: auto; font-size: 20px; }.feat-flow-node strong { display: block; font-size: 10px; font-weight: 500; margin-top: 9px; color: #c5dcea; }.feat-valead-node>span { background: #a2f1db15; color: var(--mint); border-color: #a2f1db55; font-size: 32px; }.feat-flow-node .feat-bubble-icon { font-size: 29px; line-height: 1; }.feat-flow-link { flex: 1; max-width: 85px; min-width: 28px; text-align: center; position: relative; padding-top: 14px; }.feat-flow-link>span { display: block; color: #a2f1db99; font-size: 24px; }.feat-flow-link small { position: absolute; top: 1px; left: 0; width: 100%; font-size: 7px; letter-spacing: .7px; color: #adcbdc; }.feat-last-link { max-width: 65px; }
.feat-delivery { display: flex; align-items: center; gap: 10px; width: 325px; max-width: 100%; margin-top: 26px; padding: 12px 14px; background: #eaf6ff; color: #29465b; border: 1px solid #ffffffaa; border-radius: 10px; box-shadow: 0 10px 24px #07172530; font-size: 11px; }.feat-delivery .feat-check { background: #c9ebdf; color: #21775d; }.feat-delivery small { display: block; color: #526f82; font-size: 8px; margin-top: 2px; }.feat-delivery-code { margin-left: auto; color: #21775d; font: 9px Consolas, monospace; white-space: nowrap; }
.feat-fields-panel { transform: rotate(-2deg); }.feat-fields-braces { color: var(--mint); font: 14px Consolas, monospace; }.feat-field-row { display: flex; gap: 12px; border-top: 1px solid #b6d7f11a; padding: 9px 0; font-size: 10px; }.feat-field-row>span { color: #b6ccdf; width: 85px; flex-shrink: 0; }.feat-field-row>strong { font-weight: 500; color: #e6f1fa; }.feat-field-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }.feat-field-chips>span { border: 1px solid #a7c9df40; background: #a7c9df0a; color: #c5daea; padding: 4px 8px; font-size: 8px; border-radius: 5px; }.feat-field-chips>span:last-child { color: var(--mint); border: 1px dashed #a2f1db60; background: #a2f1db09; }
.feat-takeaway { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; font-size: 13px; color: var(--muted); }.feat-takeaway>span { color: var(--mint); font-size: 20px; }.feat-takeaway strong { color: #e3f5ef; font-weight: 500; }
@media (min-width: 1500px) { .feat-features { padding-top: 90px; } }
@media (max-width: 1000px) { .feat-features { padding: 56px 32px 36px; }.feat-feature-copy { padding: 20px 25px 28px; }.feat-feature-copy h3 { font-size: 25px; }.feat-scene { padding-inline: 22px; } }
@media (max-width: 720px) { .feat-features { max-width: 550px; padding: 42px 24px 32px; }.feat-section-heading { text-align: left; }.feat-eyebrow { justify-content: flex-start; font-size: 8px; letter-spacing: 1.1px; }.feat-title { font-size: 36px; letter-spacing: -1.3px; margin-top: 16px; }.feat-intro { font-size: 15px; margin-top: 16px; }.feat-feature-grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 20px; }.feat-feature-card { border-radius: 16px; }.feat-feature-copy { padding: 20px 24px 27px; }.feat-feature-copy>p { font-size: 14px; margin-top: 12px; }.feat-feature-copy h3 { font-size: 27px; }.feat-scene { height: 234px; padding-inline: 24px; }.feat-takeaway { align-items: flex-start; justify-content: flex-start; font-size: 12px; }.feat-takeaway>span { line-height: 1.2; }.feat-takeaway strong { display: block; } }
@media (max-width: 380px) { .feat-features { padding-inline: 18px; }.feat-scene { padding-inline: 16px; }.feat-feature-copy { padding-inline: 20px; }.feat-feature-copy h3 { font-size: 24px; }.feat-activity-panel, .feat-fields-panel { padding-inline: 11px; }.feat-activity-row { gap: 6px; }.feat-avatar { width: 25px; height: 25px; font-size: 8px; }.feat-flow-node>span { width: 45px; height: 45px; border-radius: 12px; }.feat-flow-node strong { font-size: 9px; }.feat-flow-link { min-width: 22px; padding-top: 9px; }.feat-flow-link small { font-size: 6px; top: -4px; }.feat-delivery { padding-inline: 10px; gap: 7px; }.feat-delivery-code { font-size: 8px; }.feat-field-row>span { width: 72px; }.feat-channel-route>span { min-width: 62px; }.feat-connection-lines { max-width: calc(100% - 62px); } }

/* Shared page integration. */
.how-title, .feat-title { margin-bottom: 0; }
.how-intro, .feat-intro { max-width: none; }
.how-how-it-works, .feat-features { scroll-margin-top: 28px; }
.feat-features { padding-bottom: 72px; }