:root {
  color-scheme: light;
  --ink: #0b1c38;
  --muted: #465975;
  --blue: #0753df;
  --blue-deep: #063db7;
  --pale: #eef5ff;
  --line: #d9e4f1;
  --surface: #f7faff;
  --green: #087755;
  --red: #a82d3d;
  --radius: 16px;
  --shadow: 0 16px 42px rgb(12 52 116 / 8%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.55; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 3px solid #0064e7; outline-offset: 4px; }
[id] { scroll-margin-top: 24px; }

.shell { width: min(100% - 2 * clamp(20px, 5.45vw, 84px), 1380px); margin-inline: auto; }
.section { padding-block: clamp(64px, 7.1vw, 108px); }
.section-heading { margin-bottom: clamp(26px, 3vw, 42px); }
.centered { text-align: center; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.033em; }
h2 { font-size: clamp(30px, 3.5vw, 50px); font-weight: 730; text-wrap: balance; }
h3 { font-size: clamp(18px, 1.55vw, 23px); font-weight: 700; }
p { color: var(--muted); }
.eyebrow {
  margin-bottom: 13px;
  color: var(--blue);
  font-size: .75rem;
  font-weight: 760;
  letter-spacing: .145em;
  text-transform: uppercase;
}
.section-lead { margin-top: 18px; max-width: 54ch; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.sr-only, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.button {
  display: inline-flex;
  min-height: 46px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-size: .9rem;
  font-weight: 660;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button .icon { width: 18px; height: 18px; }
.button-primary {
  border-color: #0649ce;
  color: white;
  background: linear-gradient(180deg, #0969f2, #0646d8);
  box-shadow: 0 3px 5px rgb(5 65 175 / 8%);
}
.button-primary:hover { background: linear-gradient(180deg, #0859d4, #053bb8); }
.button-secondary { border-color: #b9cbe1; color: var(--ink); background: rgb(255 255 255 / 67%); }
.button-secondary:hover { border-color: #799ed2; background: #edf5ff; }
.button-inverse { color: #073898; background: #fff; }
.button-inverse:hover { background: #e9f3ff; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.cta-notes { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 15px; color: var(--muted); list-style: none; font-size: .86rem; }
.cta-notes li + li::before { content: "·"; margin-right: 10px; }

.site-header { background: linear-gradient(105deg, #f9fbff 23%, #f2f7fe 71%, #e2efff); }
.header-inner { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { flex: none; display: inline-block; border-radius: 4px; }
.brand img { height: auto; width: clamp(225px, 22.4vw, 344px); }
.desktop-nav, .header-actions { display: flex; align-items: center; }
.desktop-nav { gap: clamp(18px, 2.25vw, 36px); }
.desktop-nav a, .mobile-nav nav a:not(.button) { font-size: .96rem; font-weight: 550; text-decoration: none; }
.desktop-nav a:hover, .mobile-nav nav a:not(.button):hover, .footer-nav a:hover { color: var(--blue); }
.header-actions { gap: 12px; }
.header-actions .button { padding-inline: 18px; white-space: nowrap; }
.mobile-nav, .menu-trial { display: none; }

.hero-backdrop {
  overflow: clip;
  background:
    radial-gradient(ellipse at 82% 49%, #cfe5ff 2%, transparent 52%),
    linear-gradient(108deg, #f9fbff 23%, #f2f7fe 69%, #e5f1ff);
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 2vw, 31px);
  padding-top: clamp(54px, 4.8vw, 75px);
  padding-bottom: clamp(66px, 6vw, 92px);
}
.hero h1 { font-size: clamp(32px, 3.5vw, 55px); font-weight: 740; letter-spacing: -.047em; line-height: 1.055; }
.hero h1 span { display: block; color: var(--blue); }
.hero-lead { margin-top: 24px; max-width: 56ch; font-size: clamp(1.07rem, 1.44vw, 1.34rem); line-height: 1.48; }
.proof-list { display: grid; gap: 7px; margin-top: 25px; font-size: clamp(.94rem, 1.16vw, 1.1rem); list-style: none; }
.proof-list li { display: flex; gap: 11px; align-items: flex-start; }
.proof-list .icon { width: 21px; height: 21px; margin-top: 2px; stroke-width: 3; color: var(--green); }
.hero .button-row { margin-top: 32px; }
.hero .button { min-height: 56px; padding-inline: clamp(16px, 2.25vw, 36px); font-size: 1rem; }
.hero .play-icon { width: 21px; height: 21px; color: #0969e7; }
.hero-visual { position: relative; isolation: isolate; min-width: 0; }
.hero-shield {
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  width: min(103%, 660px);
  transform: translate(-50%, -50%);
  overflow: visible;
}
.dashboard {
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 21px;
  outline: 1px solid #cfdef0;
  background: #eef2f6;
  box-shadow: 9px 22px 55px rgb(16 85 174 / 24%), 0 5px 10px rgb(16 85 174 / 12%);
  transform: translateY(-8px) perspective(1100px) rotateY(-9deg) rotateZ(-2.9deg);
}
.dash-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px clamp(10px, 1.55vw, 24px);
  color: #fff;
  background: linear-gradient(105deg, #2f3e56, #495d78);
}
.dash-brand { display: flex; align-items: center; gap: 6px; font-size: clamp(.88rem, 1.27vw, 1.22rem); font-weight: 730; letter-spacing: -.035em; }
.dash-brand img { width: 23px; height: auto; }
.dash-domain { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid #ffffff45; border-radius: 6px; background: #ffffff16; font-size: clamp(.71rem, .87vw, .83rem); }
.dash-domain .icon { width: 13px; height: 13px; }
.dash-content { padding: clamp(11px, 1.55vw, 24px); }
.dash-card, .signals-card { overflow: hidden; border: 1px solid #dbe4ee; border-radius: 11px; background: #fff; box-shadow: 0 2px 5px rgb(20 41 69 / 4%); }
.dash-card-header, .signals-card h3 { padding: 13px; border-bottom: 1px solid #e4ebf3; background: #f7f9fc; font-size: clamp(.91rem, 1.2vw, 1.13rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.dash-card-header span, .signals-card h3 span { color: var(--muted); font-size: .83em; font-weight: 550; white-space: nowrap; }
.dash-table { width: 100%; border-spacing: 0; font-size: clamp(.72rem, .93vw, .89rem); line-height: 1.25; text-align: left; }
.dash-table th, .dash-table td { padding: clamp(9px, 1.35vw, 20px) clamp(5px, .9vw, 13px); }
.dash-table thead { color: var(--muted); background: #f7f9fc; font-size: .76em; text-transform: uppercase; letter-spacing: .03em; }
.dash-table tbody :is(th, td) { border-top: 1px solid #e4ebf3; }
.dash-table tbody th { font-weight: 620; overflow-wrap: anywhere; }
.dash-table td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 690; }
.status { display: inline-block; padding: 4px 8px; border-radius: 20px; color: #fff; font-size: .73em; font-weight: 730; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.status.allow { background: #15803d; }
.status.review { background: #334155; }
.status.block { background: #b91c1c; }
.preview-caption { margin: 11px 2px 0; color: var(--muted); font-size: .73rem; font-weight: 550; }

.audience { padding-block: 15px 21px; border-block: 1px solid #e9f1fc; background: #edf4fd; text-align: center; }
.audience h2 { color: #425976; font-size: .73rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.audience ul { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; margin-top: 13px; list-style: none; }
.audience li { display: flex; align-items: center; justify-content: center; gap: 10px; padding-inline: 8px; font-size: .92rem; font-weight: 550; }
.audience li + li { border-left: 1px solid #dee9f7; }
.audience .icon { color: #526a87; }
.three-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.benefits { padding-block: clamp(39px, 4.25vw, 66px); }
.benefit { display: flex; align-items: flex-start; gap: clamp(13px, 1.6vw, 25px); }
.benefit h3 { margin-top: 2px; }
.benefit p, .step-card p, .cases-grid p { margin-top: 8px; font-size: .98rem; }
.icon-tile { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 13px; color: var(--blue); background: #eaf2ff; }
.benefit .icon-tile { width: clamp(49px, 4.2vw, 64px); height: clamp(49px, 4.2vw, 64px); border-radius: 15px; }
.benefit .icon { width: 29px; height: 29px; }

.problem { border-block: 1px solid #e9eff9; background: var(--surface); }
.problem-layout, .product-layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(30px, 5vw, 78px); }
.problem h2, .product h2, .integration h2, .price-card h2 { text-wrap: pretty; }
.impact-list { display: grid; gap: 7px; margin-top: 15px; list-style: none; }
.impact-list li { display: flex; gap: 11px; align-items: baseline; color: var(--muted); }
.impact-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #79a7e8; }
.flow-board { padding: clamp(20px, 2.4vw, 36px); border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: var(--shadow); }
.flow-board figcaption { color: var(--ink); font-size: clamp(1.12rem, 1.7vw, 1.55rem); font-weight: 710; line-height: 1.24; letter-spacing: -.025em; }
.flow {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(18px, .2fr) minmax(0, .82fr) minmax(18px, .2fr) minmax(0, 1.32fr) minmax(42px, .44fr) minmax(0, 1fr);
  grid-template-rows: auto 34px auto;
  grid-template-areas: "visitor first form second shield pass systems" ". . . . branch . ." ". . . . stop . .";
  align-items: center;
  justify-items: center;
  gap: 0 4px;
  margin-top: 24px;
}
.flow-node { display: grid; width: 100%; min-height: 83px; place-content: center; justify-items: center; gap: 8px; padding: 8px 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; font-size: clamp(.66rem, .9vw, .88rem); font-weight: 670; line-height: 1.2; }
.flow-node > .icon { color: #526e93; }
.flow-shield { grid-area: shield; border-color: #a1c7fe; color: #0645ba; background: #edf5ff; }
.flow-visitor { grid-area: visitor; }
.flow-form { grid-area: form; }
.flow-first { grid-area: first; }
.flow-second { grid-area: second; }
.flow-systems { grid-area: systems; }
.connector { width: 19px; height: 19px; color: #6784aa; }
.flow-pass { grid-area: pass; display: grid; justify-items: center; gap: 1px; color: var(--green); font-size: .65rem; font-weight: 720; line-height: 1; }
.flow-pass .connector { color: var(--green); }
.flow-branch { grid-area: branch; width: 0; height: 100%; border-left: 2px dashed #ce6372; }
.flow-stop { grid-area: stop; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 9px; min-width: max-content; border: 1px solid #f1c5cc; border-radius: 7px; color: var(--red); background: #fff2f5; font-size: .74rem; font-weight: 670; }
.flow-stop .icon { width: 15px; height: 15px; stroke-width: 2.2; }

.step-list { list-style: none; }
.step-card, .cases-grid article { padding: clamp(19px, 2vw, 30px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.step-number { color: var(--blue); font-size: .74rem; font-weight: 740; letter-spacing: .09em; text-transform: uppercase; }
.explain-callout { display: flex; gap: 17px; align-items: flex-start; margin-top: 22px; padding: 22px clamp(18px, 2vw, 28px); border: 1px solid #d4e4fc; border-radius: 12px; background: #f2f7ff; }
.explain-callout .icon { margin-top: 2px; color: var(--blue); }
.explain-callout h3 { font-size: 1.07rem; }
.explain-callout p { margin-top: 6px; }

.product { border-block: 1px solid #e2edfc; background: radial-gradient(ellipse at 77% 48%, #e2efff, transparent 64%), #f1f7ff; }
.in-control { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--ink); font-weight: 720; }
.in-control .icon { width: 22px; height: 22px; color: var(--blue); stroke-width: 2.5; }
.review-panel { padding: clamp(12px, 2vw, 26px); border: 1px solid #cfdeef; border-radius: 19px; background: #eef2f6; box-shadow: 0 21px 55px rgb(18 70 144 / 12%); }
.review-composition { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: start; gap: 12px; }
.signals-card h3 { font-size: .96rem; }
.signals-card ul, .review-actions { list-style: none; }
.signals-card li { display: flex; align-items: center; gap: 7px; padding: 10px; }
.signals-card li + li { border-top: 1px solid #e4ebf3; }
.signals-card li .icon { width: 17px; height: 17px; padding: 3px; border-radius: 50%; color: #15803d; background: #e1f5e7; stroke-width: 2.6; }
.signals-card li code { font-size: clamp(.63rem, .75vw, .71rem); font-family: inherit; font-weight: 690; letter-spacing: .02em; overflow-wrap: anywhere; }
.signals-card li span { margin-left: auto; font-size: .8rem; font-weight: 700; }
.submission-actions { padding: 15px; border: 1px solid #dbe4ee; border-radius: 13px; background: #fff; box-shadow: 0 7px 18px rgb(20 41 69 / 10%); }
.submission-actions h3 { font-size: 1rem; }
.submission-actions p { margin-top: 3px; font-size: .81rem; }
.review-actions { display: grid; gap: 7px; margin-top: 14px; }
.review-actions li { padding: 8px 6px; border-radius: 7px; color: #fff; background: #2364ac; font-size: .74rem; font-weight: 690; text-align: center; line-height: 1.3; }
.review-actions li:last-child { background: #334155; }

.principles, .cases-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.75vw, 26px); }
.principles > div { padding: 18px 10px 0 0; border-top: 2px solid #d5e6ff; }
.principles dt { display: flex; align-items: center; gap: 9px; line-height: 1.2; font-size: 1.03rem; font-weight: 720; }
.principles .icon { width: 20px; height: 20px; color: var(--blue); }
.principles dd { margin-top: 9px; color: var(--muted); font-size: .95rem; }

.use-cases { border-block: 1px solid #e9f0fa; background: var(--surface); }
.cases-grid .icon-tile { margin-bottom: 16px; }
.cases-grid h3 { font-size: clamp(1.08rem, 1.48vw, 1.36rem); }
.conversion { padding-block: clamp(36px, 5.3vw, 82px); border-bottom: 1px solid #e1ecfa; background: linear-gradient(180deg, #fff, #eef5ff); }
.conversion-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: clamp(13px, 2vw, 30px); }
.integration, .price-card { height: 100%; padding: clamp(23px, 3.4vw, 50px); border-radius: 19px; }
.integration { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; border: 1px solid var(--line); background: #fff; }
.integration h2, .price-card h2 { font-size: clamp(29px, 3vw, 46px); }
.integration .section-lead { margin-top: 14px; font-size: 1rem; }
.integration .button, .price-card .button { margin-top: auto; }
.integration-paths { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.integration-paths li { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #e0eafa; border-radius: 7px; color: #274569; background: #f5f9ff; font-weight: 640; font-size: .82rem; }
.integration-paths .icon { width: 17px; height: 17px; color: var(--blue); }
.price-card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; border: 1px solid #c4dbfb; background: radial-gradient(ellipse at 100% 8%, #d6e9ff, transparent 69%), #e8f2ff; }
.price-card .button { min-height: 51px; }

.faq { display: grid; grid-template-columns: minmax(0, .63fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 72px); padding-block: clamp(50px, 5.5vw, 82px); }
.faq .section-heading { margin: 0; }
.faq h2 { text-wrap: pretty; }
.faq-list { padding-inline: clamp(16px, 2vw, 26px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.faq-list details + details { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 0; font-weight: 680; line-height: 1.35; }
.faq-list summary:hover { color: var(--blue); }
.faq-list .icon { width: 19px; height: 19px; color: var(--blue); stroke-width: 2; }
.faq-list details[open] .icon { transform: rotate(45deg); }
.faq-list p { max-width: 66ch; padding-bottom: 18px; }

.final-cta { position: relative; isolation: isolate; overflow: clip; color: #fff; background: linear-gradient(115deg, #073591, #064acb 63%, #0658df); }
.final-cta::before {
  position: absolute;
  z-index: -1;
  inset: 50% 0 auto;
  height: 680px;
  transform: translateY(-46%);
  background: url("assets/shield.svg") center / contain no-repeat;
  opacity: .13;
  content: "";
}
.final-inner { padding-block: clamp(65px, 6.2vw, 94px); text-align: center; }
.final-inner h2 { max-width: 22ch; margin-inline: auto; }
.final-inner p { max-width: 54ch; margin: 16px auto 0; color: #e7f1ff; font-size: 1.05rem; }
.final-inner .button { min-height: 51px; margin-top: 24px; }
.final-inner .cta-notes { justify-content: center; color: #f1f6ff; }
.final-inner :focus-visible { outline-color: #fff; }

.site-footer { padding-block: 39px 20px; background: #f7faff; }
.footer-main { display: grid; grid-template-columns: minmax(245px, .8fr) minmax(0, 1.2fr); align-items: start; gap: 30px; padding-bottom: 26px; }
.footer-main .brand { width: fit-content; }
.footer-main .brand img { width: 226px; }
.footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.footer-nav h2 { margin-bottom: 8px; font-size: .88rem; letter-spacing: 0; }
.footer-nav ul { list-style: none; }
.footer-nav li + li { margin-top: 5px; }
.footer-nav a { color: var(--muted); font-size: .87rem; text-decoration: none; }
.copyright, .draft-note { padding-top: 15px; border-top: 1px solid var(--line); font-size: .82rem; }

.draft-dialog { width: min(calc(100% - 36px), 440px); padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.draft-dialog::backdrop { background: rgb(9 26 52 / 54%); }
.draft-dialog h2 { font-size: 1.6rem; }
.draft-dialog p { margin-block: 10px 18px; }

@media (max-width: 1199px) {
  .brand img { width: clamp(205px, 23vw, 290px); }
  .desktop-nav { gap: 16px; }
  .header-inner { min-height: 78px; }
  .header-actions { gap: 9px; }
  .header-actions .button { padding-inline: 13px; }
  .problem-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 29px; }
}

@media (max-width: 1000px) {
  .desktop-nav, .header-actions .login { display: none; }
  .mobile-nav { position: relative; z-index: 2; display: block; }
  .mobile-nav summary { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #b9cbe1; border-radius: 9px; background: #fff9; }
  .mobile-nav .menu-close, .mobile-nav[open] .menu-open { display: none; }
  .mobile-nav[open] .menu-close { display: block; }
  .mobile-nav nav {
    position: absolute;
    inset: calc(100% + 10px) 0 auto auto;
    display: grid;
    min-width: 195px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: var(--shadow);
  }
  .mobile-nav nav a:not(.button) { padding: 9px 12px; border-radius: 5px; }
  .mobile-nav nav a:not(.button):hover { background: #f0f6ff; }
  .benefit { gap: 12px; }
  .benefit h3 { line-height: 1.19; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 47px; padding-top: 46px; padding-bottom: 62px; }
  .hero h1 { font-size: clamp(37px, 6.9vw, 58px); }
  .hero-visual { width: min(100%, 565px); margin-inline: auto; }
  .hero-shield { width: min(104%, 575px); }
  .dashboard { transform: perspective(1050px) rotateY(-5deg) rotateZ(-1.5deg); }
  .audience ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
  .audience li { padding-inline: 0; font-size: .84rem; }
  .audience li + li { border-left: 0; }
  .audience .icon { width: 21px; height: 21px; }
  .benefit { display: grid; }
  .problem-layout, .product-layout { grid-template-columns: minmax(0, 1fr); }
  .principles, .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 15px; }
  .footer-main { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 600px) {
  .section { padding-block: 57px; }
  .header-inner { min-height: 65px; gap: 11px; }
  .brand img { width: clamp(188px, 52vw, 234px); }
  .header-actions .header-trial { display: none; }
  .mobile-nav .menu-trial { display: inline-flex; margin: 5px 0 1px; width: 100%; }
  .hero { padding-top: 30px; padding-bottom: 49px; gap: 29px; }
  .hero h1 { font-size: clamp(33px, 8.75vw, 50px); }
  .hero-lead { margin-top: 16px; font-size: 1.02rem; }
  .proof-list { margin-top: 19px; gap: 8px; font-size: .92rem; }
  .proof-list .icon { width: 18px; height: 18px; }
  .hero .button-row { margin-top: 22px; gap: 8px; }
  .hero .button { min-height: 47px; padding-inline: 10px; gap: 6px; font-size: .82rem; }
  .hero .button .icon { width: 17px; height: 17px; }
  .cta-notes { gap: 3px 6px; font-size: .73rem; }
  .cta-notes li + li::before { margin-right: 6px; }
  .hero-shield { opacity: .72; }
  .dashboard { transform: none; border-width: 3px; border-radius: 14px; }
  .dash-topline { padding-block: 9px; }
  .dash-brand img { width: 18px; }
  .dash-card-header { padding: 9px 7px; }
  .dash-table :is(th, td) { padding: 9px 4px; }
  .status { padding-inline: 5px; }
  .audience { padding-block: 16px; }
  .audience ul { gap: 9px 14px; }
  .three-columns, .conversion-grid, .faq { grid-template-columns: minmax(0, 1fr); }
  .benefit { display: flex; gap: 14px; }
  .benefit h3 { margin-top: 0; }
  .benefit p { margin-top: 5px; }
  .cases-grid article { padding: 14px; }
  .cases-grid .icon-tile { width: 44px; height: 44px; margin-bottom: 11px; }
  .cases-grid p, .principles dd { font-size: .88rem; }
  .principles dt { align-items: flex-start; gap: 6px; font-size: .96rem; }
  .principles .icon { width: 17px; height: 17px; }
  .faq { gap: 22px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 510px) {
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 22px auto 22px auto 38px auto;
    grid-template-areas: "visitor visitor" "first first" "form form" "second second" "shield shield" "pass branch" "systems stop";
    gap: 0 10px;
    justify-items: stretch;
  }
  .flow-node { min-height: 47px; grid-auto-flow: column; align-items: center; gap: 7px; padding: 4px 6px; font-size: .77rem; }
  .flow-shield img { width: 22px; height: 24px; }
  .flow-node > .icon { width: 20px; height: 20px; }
  .flow-first, .flow-second { justify-self: center; transform: rotate(90deg); }
  .flow-pass { gap: 2px; justify-self: center; }
  .flow-pass .icon { transform: rotate(90deg); }
  .flow-branch { justify-self: center; }
  .flow-stop { align-self: stretch; min-width: 0; }
}

@media (max-width: 470px) {
  .review-composition { grid-template-columns: minmax(0, 1fr); }
}

.draft-note:not(:target) { display: none; }