:root {
  --ink:#14181d;
  --muted:#5b6572;
  --dim:#8b95a3;
  --blue:#1f6feb;
  --blue-dark:#1854b4;
  --line:#e2e6eb;
  --subtle:#fbfcfd;
  --green:#12855a;
  --red:#c8382f;
  --yellow:#a86a00;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after {
  box-sizing:border-box;
}

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

body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a {
  color:var(--blue);
  text-decoration:none;
}

a:hover {
  color:var(--blue-dark);
}

button,input {
  font:inherit;
}

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

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
  opacity:.55;
}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #8cb9ff;
  outline-offset:4px;
}

[hidden] {
  display:none!important;
}

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

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  text-wrap:pretty;
}

h2 {
  font-size:34px;
  line-height:1.25;
  letter-spacing:-.4px;
  font-weight:600;
}

h3 {
  font-size:19px;
  line-height:1.4;
  font-weight:600;
}

p {
  color:var(--muted);
}

.mono {
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

.wrap {
  max-width:1260px;
  padding:0 40px;
  margin:0 auto;
}

.eyebrow {
  font:600 10px/1.4 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:14px;
}

.lead {
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
  margin-top:16px;
  text-wrap:pretty;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:14px 23px;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--blue);
  color:#fff;
  font-size:15px;
  font-weight:600;
  line-height:1.25;
  text-align:center;
  transition:background .16s,border-color .16s;
}

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

.button-secondary {
  background:#fff;
  border-color:#d6dbe1;
  color:var(--ink);
  font-weight:500;
}

.button-secondary:hover {
  background:#f7f9fc;
  border-color:#a6aeb9;
  color:var(--ink);
}

.button-small {
  padding:10px 17px;
  font-size:14px;
}

.button-full {
  width:100%;
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:6px;
  font-size:11.5px;
  font-weight:600;
  line-height:1.4;
}

.pill-blue {
  background:#eaf1fe;
  color:var(--blue-dark);
}

.pill-green {
  background:#e6f4ee;
  color:#0e6a48;
}

.pill-red {
  background:#fdecea;
  color:#96322b;
}

.pill-gray {
  background:#f1f3f6;
  color:var(--muted);
}

.card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  padding:10px 20px;
  background:var(--blue);
  color:#fff;
}

.skip-link:focus {
  top:12px;
  color:#fff;
}

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #eef0f3;
}

.header-inner {
  height:66px;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand {
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.brand img {
  display:block;
  width:138px;
  height:auto;
}

.header-nav {
  display:flex;
  align-items:center;
  gap:22px;
}

.header-nav a,.header-login,.header-account {
  font-size:14px;
  font-weight:500;
  color:var(--muted);
}

.header-nav a:hover,.header-login:hover,.header-account:hover {
  color:var(--blue);
}

.header-actions {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:20px;
}

.header-account {
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.menu-toggle {
  display:none;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
}

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

.mobile-menu {
  padding:10px 24px 20px;
  border-top:1px solid var(--line);
  background:white;
}

.mobile-menu a {
  display:block;
  width:100%;
  padding:10px 0;
  font-weight:500;
  color:var(--muted);
  text-align:left;
}

.mobile-account {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hero {
  background:var(--subtle);
  border-bottom:1px solid #eef0f3;
  overflow:hidden;
}

.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;
  padding-top:66px;
  align-items:end;
}

.hero-copy {
  padding-bottom:60px;
}

.hero h1 {
  font-size:46px;
  line-height:1.15;
  letter-spacing:-1px;
  font-weight:700;
  margin-top:18px;
}

.hero .lead {
  font-size:17px;
  margin-top:19px;
}

.hero-actions {
  display:flex;
  gap:12px;
  margin-top:27px;
  flex-wrap:wrap;
}

.demo-link {
  display:inline-flex;
  gap:8px;
  margin-top:16px;
  font-size:13px;
  font-weight:500;
}

.hero-stats {
  display:grid;
  grid-template-columns:1fr 1.35fr 1fr;
  gap:20px;
  border-top:1px solid #e8ebef;
  margin-top:30px;
  padding-top:24px;
}

.hero-stats strong {
  display:block;
  font-size:24px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}

.hero-stats div:nth-child(-n+2) strong {
  font-size:18px;
  line-height:1.6;
}

.hero-stats span {
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}

.hero-preview {
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:14px 14px 0 0;
  box-shadow:0 -1px 24px #14181d0c;
  overflow:hidden;
  background:#fff;
  align-self:center;
  margin-top:58px;
  transform:translateY(24px);
  width:calc(100% + 65px);
}

.browser-bar {
  height:30px;
  background:#f5f6f8;
  border-bottom:1px solid #eef0f3;
  display:flex;
  align-items:center;
  padding:0 12px;
  gap:6px;
}

.browser-bar i {
  width:8px;
  height:8px;
  background:#dfe3e8;
  border-radius:50%;
}

.browser-bar .mono {
  font-size:9px;
  color:var(--dim);
  margin-left:8px;
}

.preview-top {
  display:flex;
  gap:7px;
  align-items:center;
  padding:11px 13px;
  border-bottom:1px solid var(--line);
  font-size:11px;
}

.preview-logo {
  display:inline-flex;
  width:20px;
  height:20px;
  border-radius:5px;
  background:var(--blue);
  color:#fff;
  font-weight:700;
  align-items:center;
  justify-content:center;
}

.preview-top-label {
  color:var(--dim);
  margin-left:8px;
  font-size:9px;
}

.preview-avatar {
  margin-left:auto;
  font-size:8px;
  padding:4px;
  border-radius:50%;
  background:#eaf1fe;
  color:var(--blue);
}

.preview-body {
  display:flex;
  min-height:342px;
}

.preview-sidebar {
  width:128px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 8px;
  border-right:1px solid var(--line);
  background:#fbfcfd;
  font-size:9px;
  color:var(--muted);
}

.preview-sidebar span {
  padding:7px 5px;
  white-space:nowrap;
}

.preview-sidebar .preview-nav-selected {
  background:#eaf1fe;
  color:var(--blue-dark);
  border-radius:5px;
  font-weight:600;
}

.preview-workspace {
  padding:16px 16px 22px;
  flex:1;
  min-width:0;
}

.preview-breadcrumb {
  font-size:8px;
  color:var(--dim);
  margin-bottom:10px;
}

.preview-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
}

.preview-heading h2 {
  font-size:20px;
  letter-spacing:-.2px;
}

.preview-heading .pill {
  font-size:7px;
  padding:3px 5px;
}

.preview-metrics {
  display:flex;
  gap:7px;
  margin:14px 0;
}

.preview-metrics>div {
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px;
  background:#fff;
}

.preview-metrics span {
  display:block;
  font-size:6.5px;
  color:var(--muted);
  white-space:nowrap;
}

.preview-metrics strong {
  display:block;
  margin-top:3px;
  font:600 16px var(--mono);
}

.text-warning {
  color:var(--yellow);
}

.preview-tabs {
  display:flex;
  gap:12px;
  border-bottom:1px solid var(--line);
  font-size:8px;
  color:var(--muted);
}

.preview-tabs b {
  padding-bottom:7px;
  border-bottom:2px solid var(--blue);
  color:var(--blue);
}

.preview-tabs small {
  padding:1px 4px;
  background:#f1f3f6;
  border-radius:3px;
  font-size:7px;
}

.preview-table>div {
  display:grid;
  grid-template-columns:minmax(0,1fr) 62px 39px;
  gap:5px;
  align-items:center;
  border-bottom:1px solid #eef0f3;
  padding:9px 0;
  font-size:7.5px;
}

.preview-table>div.preview-table-head {
  font:500 6.5px var(--mono);
  color:var(--dim);
  padding:9px 0 6px;
}

.preview-table b {
  display:block;
  font-size:8px;
  font-weight:500;
  white-space:nowrap;
}

.preview-table small {
  display:block;
  font-size:6.5px;
  color:var(--dim);
  margin-top:2px;
}

.status-dot {
  color:var(--green);
}

.status-dot::before {
  content:'';
  display:inline-block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--green);
  margin-right:3px;
}

.preview-rule {
  font-family:var(--mono);
  font-size:7px;
  color:var(--blue);
}

.preview-notice {
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px;
  background:#fff8ea;
  border:1px solid #f4e2c0;
  border-radius:5px;
  font-size:7px;
  color:#7d5100;
  margin-top:12px;
}

.preview-notice span:last-child {
  margin-left:auto;
}

.section {
  padding:76px 0;
  border-top:1px solid #eef0f3;
}

.section-pains {
  border-top:0;
}

.section-tinted {
  background:var(--subtle);
}

.section-heading {
  max-width:700px;
}

.pain-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:34px;
}

.pain-card {
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfcfd;
  padding:23px;
  display:flex;
  flex-direction:column;
}

.pain-card h3 {
  font-size:18px;
  margin:13px 0 9px;
}

.pain-card p {
  font-size:14px;
  line-height:1.7;
  flex:1;
}

.pain-tag {
  font-size:14px;
  font-weight:600;
  color:var(--muted);
}

.pain-red {
  border-color:#f6d5d1;
  background:#fffafa;
}

.pain-red .pain-tag,.pain-red .pain-fix b {
  color:var(--red);
}

.pain-yellow {
  border-color:#f4e2c0;
  background:#fffdf7;
}

.pain-yellow .pain-tag,.pain-yellow .pain-fix b {
  color:var(--yellow);
}

.pain-fix {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #14181d12;
  font-size:12.5px;
  line-height:1.6;
}

.pain-fix b {
  font-size:12px;
  flex-shrink:0;
}

.feature-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.feature-copy h2 {
  max-width:500px;
}

.check-list {
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:13px;
}

.check-list li {
  position:relative;
  padding-left:28px;
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
}

.check-list li::before {
  content:'✓';
  position:absolute;
  left:0;
  top:3px;
  background:#eaf1fe;
  color:var(--blue);
  width:17px;
  height:17px;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:600;
}

.check-list strong {
  color:var(--ink);
  font-weight:500;
}

.rule-card {
  padding:26px;
  box-shadow:0 2px 20px #14181d08;
}

.card-eyebrow {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.card-eyebrow .eyebrow {
  margin:0;
}

.rule-sentence {
  font-size:19px;
  line-height:2;
  color:var(--ink);
  margin-top:18px;
}

.rule-sentence em {
  font-style:normal;
  font-weight:600;
  color:var(--blue);
  border-bottom:1px dashed var(--blue);
}

.rule-details {
  border-top:1px solid #eef0f3;
  padding-top:17px;
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:12px;
}

.rule-details>div {
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.rule-details span {
  color:var(--muted);
}

.rule-details strong {
  font-weight:500;
  text-align:right;
}

.rule-note {
  font-size:12px;
  line-height:1.6;
  background:#f4f8ff;
  color:var(--blue-dark);
  border:1px solid #dce9fc;
  border-radius:8px;
  padding:12px 14px;
  margin:20px 0;
}

.check-card {
  overflow:hidden;
  box-shadow:0 2px 20px #14181d05;
}

.check-card-head {
  padding:19px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

.check-card-head .pill {
  font-size:10px;
}

.check-result {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:21px 20px;
  border-bottom:1px solid #eef0f3;
}

.check-result>div {
  flex:1;
  min-width:0;
}

.check-result h3 {
  font-size:13px;
  margin-bottom:3px;
}

.check-result p {
  font-size:11.5px;
  line-height:1.7;
  margin-top:5px;
}

.check-result .pill {
  font-size:9px;
  padding:3px 6px;
  flex-shrink:0;
}

.check-icon {
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  flex-shrink:0;
  font-size:14px;
  font-weight:600;
}

.check-icon-red {
  background:#fdecea;
  color:var(--red);
}

.check-icon-green {
  background:#e6f4ee;
  color:var(--green);
}

.sample-url {
  font-size:10px;
  color:var(--dim);
  overflow-wrap:anywhere;
}

.check-card-foot {
  padding:15px 20px;
  background:var(--subtle);
  font-size:11.5px;
  color:var(--muted);
}

.text-link {
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin-top:24px;
  font-weight:500;
  font-size:14px;
}

.tools-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px 24px;
  margin-top:36px;
}

.tool-card {
  padding-top:21px;
  border-top:1px solid var(--line);
}

.tool-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  background:#eaf1fe;
  border-radius:9px;
  font-size:21px;
  color:var(--blue);
  line-height:1;
}

.tool-card h3 {
  font-size:16px;
  margin-top:13px;
}

.tool-card p {
  font-size:13px;
  line-height:1.7;
  margin-top:7px;
}

.pricing-section {
  background:var(--ink);
  border-top:0;
  color:#fff;
}

.pricing-section .lead {
  color:#a6aeb9;
}

.pricing-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr;
  gap:16px;
  margin-top:36px;
}

.price-card {
  border:1px solid #2d343c;
  border-radius:14px;
  background:#1a1f25;
  padding:26px;
  position:relative;
}

.price-card .eyebrow {
  font-size:9px;
  color:#a6aeb9;
}

.price {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:14px;
}

.price strong {
  font-size:35px;
  font-weight:600;
  line-height:1;
}

.price span {
  font-size:13px;
  color:#a6aeb9;
}

.price-card p {
  font-size:13px;
  line-height:1.75;
  color:#a6aeb9;
  margin-top:15px;
}

.price-featured {
  border-color:var(--blue);
}

.price-featured>.pill {
  position:absolute;
  top:-12px;
  left:25px;
  background:var(--blue);
  color:#fff;
  font-size:10px;
}

.price-example {
  background:#1f262d;
}

.price-example dl {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:16px 0 0;
}

.price-example dl>div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}

.price-example dt {
  color:#a6aeb9;
}

.price-example dd {
  margin:0;
  text-align:right;
  white-space:nowrap;
}

.price-example .price-total {
  padding-top:13px;
  margin-top:3px;
  border-top:1px solid #36404a;
  font-size:17px;
  font-weight:600;
}

.price-total dt {
  color:#fff;
}

.price-example p {
  font-size:11px;
}

.pricing-actions {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:28px;
}

.pricing-actions p {
  font-size:12px;
  color:#a6aeb9;
}

.pricing-actions p a {
  color:#c6ccd4;
  text-decoration:underline;
  text-underline-offset:3px;
}

.steps-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:25px;
  margin-top:36px;
}

.step-number {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:15px;
}

.step-number span {
  display:flex;
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--ink);
  color:#fff;
  font-size:12px;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.step-number::after {
  content:'';
  height:1px;
  background:var(--line);
  flex:1;
}

.steps-grid h3 {
  font-size:16px;
}

.steps-grid p {
  font-size:13.5px;
  line-height:1.7;
  margin-top:8px;
}

.faq-grid {
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:65px;
}

.faq-grid h2 {
  font-size:29px;
}

.faq-grid .lead {
  font-size:15px;
}

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

.faq-list details:first-child {
  padding-top:0;
}

.faq-list summary {
  display:flex;
  list-style:none;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

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

.faq-list summary span {
  font-size:20px;
  font-weight:400;
  line-height:1;
  color:var(--dim);
}

.faq-list details[open] summary span {
  transform:rotate(45deg);
}

.faq-list details p {
  font-size:14px;
  line-height:1.75;
  margin-top:11px;
  padding-right:22px;
}

.cta-section {
  background:var(--blue);
  color:white;
}

.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  padding-top:62px;
  padding-bottom:62px;
}

.cta-inner>div:first-child {
  max-width:680px;
}

.cta-inner h2 {
  font-size:30px;
}

.cta-inner p {
  color:#d5e4fd;
  font-size:15px;
  margin-top:15px;
}

.cta-actions {
  display:flex;
  flex-direction:column;
  gap:11px;
  flex-shrink:0;
}

.button-white {
  background:#fff;
  color:var(--ink);
}

.button-white:hover {
  background:#eef4ff;
  color:var(--ink);
}

.button-outline {
  background:transparent;
  border-color:#ffffff66;
  color:#fff;
  font-size:13px;
}

.button-outline:hover {
  background:#ffffff14;
  border-color:#ffffffb3;
}

.site-footer {
  background:var(--ink);
  padding:45px 0 39px;
}

.footer-grid {
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1.25fr;
  gap:30px;
}

.footer-grid .brand img {
  filter:brightness(0) invert(1);
  width:132px;
}

.footer-brand p {
  font-size:12px;
  line-height:1.75;
  color:var(--dim);
  margin-top:15px;
}

.footer-copyright {
  display:block;
  color:var(--dim);
  font-size:11px;
  margin-top:15px;
}

.footer-grid>div>a:not(.brand) {
  display:block;
  margin-top:9px;
  font-size:12px;
  color:#c6ccd4;
}

.footer-grid>div>a:hover {
  color:#fff;
}

.footer-grid .eyebrow {
  font-size:9px;
}

.auth-page {
  background:#f4f6f8;
}

.auth-stage {
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:38px 24px;
}

.auth-home {
  font-size:12px;
  color:var(--muted);
  margin-bottom:20px;
}

.auth-card {
  width:min(100%,440px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 32px #14181d05;
}

.auth-card-login {
  width:min(100%,840px);
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  min-height:530px;
}

.auth-aside {
  background:var(--ink);
  color:#fff;
  padding:34px 30px;
  display:flex;
  flex-direction:column;
}

.auth-brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1;
}

.auth-brand:hover {
  color:inherit;
}

.brand-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  background:var(--blue);
  border-radius:8px;
  color:white;
  font-size:17px;
  font-weight:700;
}

.auth-aside h2 {
  font-size:23px;
  line-height:1.4;
  letter-spacing:0;
  margin-top:37px;
}

.auth-aside .check-list {
  margin-top:20px;
  gap:13px;
}

.auth-aside .check-list li {
  color:#c6ccd4;
  font-size:13px;
  padding-left:22px;
  line-height:1.7;
}

.auth-aside .check-list li::before {
  background:transparent;
  font-size:11px;
  left:-2px;
  top:3px;
}

.auth-aside-foot {
  border-top:1px solid #ffffff1a;
  padding-top:23px;
  margin-top:auto;
}

.auth-aside-foot .mono {
  font-size:16px;
  font-weight:500;
  color:#fff;
}

.auth-aside-foot p {
  color:#8b95a3;
  font-size:12px;
  line-height:1.6;
  margin-top:7px;
}

.auth-form-panel {
  padding:32px;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.auth-form-panel>.auth-brand {
  margin-bottom:27px;
}

.auth-form-panel h1 {
  font-size:23px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.2px;
}

.auth-intro {
  font-size:13px;
  line-height:1.7;
  margin:7px 0 24px;
}

.form-field {
  margin-bottom:17px;
}

.field-label-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:15px;
  margin-bottom:6px;
}

.field-label-row label {
  font-size:12px;
  font-weight:500;
  color:var(--muted);
}

.field-label-row a {
  font-size:12px;
}

.field-input {
  display:flex;
  align-items:center;
  border:1px solid #cbd2da;
  border-radius:7px;
  background:#fff;
  min-height:43px;
}

.field-input:focus-within {
  border-color:var(--blue);
  box-shadow:0 0 0 3px #1f6feb14;
}

.field-input input {
  width:100%;
  min-width:0;
  padding:10px 12px;
  background:transparent;
  border:0;
  border-radius:7px;
  font-size:14px;
  color:var(--ink);
  line-height:1.4;
}

.field-input input:focus {
  outline:none;
}

.field-input input::placeholder {
  color:#a6aeb9;
}

.password-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:40px;
  height:40px;
  border:0;
  border-radius:6px;
  color:var(--dim);
  background:transparent;
}

.password-toggle:hover {
  background:#f1f5fb;
  color:var(--blue);
}

.field-input.field-invalid {
  border-color:var(--red);
}

.field-error,.field-hint {
  font-size:11px;
  line-height:1.5;
  margin-top:5px;
}

.field-error {
  color:var(--red);
}

.field-hint {
  color:var(--dim);
}

.field-input.is-valid {
  border-color:#228452;
}

.checkbox-row {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  margin:14px 0;
  cursor:pointer;
}

.checkbox-row input {
  margin:3px 0 0;
  accent-color:var(--blue);
  width:15px;
  height:15px;
  flex-shrink:0;
}

.remember-row {
  min-height:32px;
  margin:0 0 18px;
  align-items:center;
}

.remember-row input {
  margin:0;
  width:18px;
  height:18px;
}

.auth-form-panel .button {
  font-size:14px;
  padding:12px 18px;
  border-radius:7px;
}

.auth-legal {
  font-size:11px;
  line-height:1.75;
  color:var(--dim);
  margin-top:auto;
  padding-top:30px;
}

.auth-support {
  font-size:12px;
  margin-top:22px;
}

.oauth-card {
  width:min(100%,620px);
}

.oauth-eyebrow {
  margin-bottom:7px;
  color:var(--dim);
  font:600 10px/1.4 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.oauth-scopes {
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--subtle);
}

.oauth-scopes h2 {
  font-size:14px;
  letter-spacing:0;
}

.oauth-scopes ul {
  display:grid;
  gap:9px;
  margin:13px 0 0;
  padding:0;
  list-style:none;
}

.oauth-scopes li {
  position:relative;
  padding-left:20px;
  color:var(--muted);
  font-size:12px;
}

.oauth-scopes li::before {
  position:absolute;
  top:1px;
  left:0;
  color:var(--green);
  content:'✓';
  font-weight:600;
}

.oauth-no-scopes,
.oauth-note {
  padding:12px 14px;
  border-radius:8px;
  background:#f4f8ff;
  color:var(--muted);
  font-size:12px;
}

.oauth-note {
  margin-top:14px;
}

.oauth-actions {
  display:flex;
  gap:9px;
  margin-top:22px;
}

.oauth-actions form {
  flex:1;
}

.oauth-actions .button {
  width:100%;
  min-height:44px;
}

.auth-back {
  display:inline-block;
  margin-top:23px;
  font-size:13px;
  font-weight:500;
}

.notice {
  font-size:12px;
  line-height:1.65;
  padding:12px 14px;
  border:1px solid;
  border-radius:8px;
  margin-bottom:18px;
}

.notice-info {
  color:var(--blue-dark);
  background:#f4f8ff;
  border-color:#cfe0fb;
}

.notice-error {
  color:#96322b;
  background:#fff5f4;
  border-color:#f6d5d1;
}

.notice-success {
  color:#0e6a48;
  background:#e6f4ee;
  border-color:#b8e4d1;
}

.smart-captcha {
  margin:20px 0;
  min-height:100px;
}

@media(min-width:1440px) {
  .hero-grid {
    padding-top:72px;
  }
  .hero-copy {
    padding-bottom:70px;
  }
  .hero-preview {
    width:calc(100% + 95px);
  }
}

@media(max-width:1100px) {
  .wrap {
    padding-left:28px;
    padding-right:28px;
  }
  .header-inner {
    gap:22px;
  }
  .header-nav {
    gap:16px;
  }
  .header-nav a {
    font-size:13px;
  }
  .header-actions {
    gap:14px;
  }
  .hero-grid {
    gap:28px;
  }
  .hero h1 {
    font-size:40px;
  }
  .hero-preview {
    width:calc(100% + 40px);
  }
  .hero-stats {
    gap:14px;
  }
  .hero-stats strong {
    font-size:21px;
  }
  .hero-stats div:nth-child(-n+2) strong {
    font-size:15px;
    line-height:1.7;
  }
  .hero-actions .button {
    padding-left:15px;
    padding-right:15px;
    font-size:13px;
  }
  .feature-split {
    gap:35px;
  }
  .faq-grid {
    grid-template-columns:300px minmax(0,1fr);
    gap:40px;
  }
  .price-card {
    padding:22px;
  }
  .pricing-grid {
    gap:12px;
  }
  .footer-grid {
    gap:20px;
  }
  .preview-sidebar {
    width:106px;
    font-size:8px;
  }
  .preview-workspace {
    padding:13px 10px;
  }
  .preview-table>div {
    grid-template-columns:minmax(0,1fr) 50px 25px;
  }
  .preview-table b {
    font-size:7px;
  }
  .preview-metrics span {
    font-size:6px;
  }
}

@media(max-width:900px) {
  .header-nav {
    display:none;
  }
  .menu-toggle {
    display:flex;
  }
  .header-actions {
    margin-left:auto;
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:0;
    padding-top:45px;
  }
  .hero-copy {
    padding-bottom:30px;
    max-width:680px;
  }
  .hero h1 {
    font-size:46px;
    max-width:650px;
  }
  .hero .lead {
    max-width:620px;
  }
  .hero-actions .button {
    font-size:15px;
    padding:14px 22px;
  }
  .hero-stats {
    max-width:600px;
    grid-template-columns:1fr 1.3fr 1fr;
    margin-top:28px;
  }
  .hero-stats strong {
    font-size:24px;
  }
  .hero-stats div:nth-child(-n+2) strong {
    font-size:19px;
    line-height:1.5;
  }
  .hero-preview {
    width:100%;
    max-width:650px;
    justify-self:center;
    margin-top:15px;
    transform:none;
  }
  .preview-sidebar {
    width:142px;
    font-size:10px;
  }
  .preview-workspace {
    padding:18px 20px;
  }
  .preview-table>div {
    grid-template-columns:minmax(0,1fr) 72px 45px;
    font-size:8px;
    padding:10px 0;
  }
  .preview-table b {
    font-size:9px;
  }
  .preview-table small {
    font-size:8px;
  }
  .preview-table>div.preview-table-head {
    font-size:8px;
  }
  .preview-metrics span {
    font-size:8px;
  }
  .preview-heading .pill {
    font-size:9px;
  }
  .preview-notice {
    font-size:9px;
  }
  .preview-breadcrumb {
    font-size:9px;
  }
  .section {
    padding:58px 0;
  }
  .pain-card {
    padding:19px;
  }
  .pain-card h3 {
    font-size:16px;
  }
  .pain-card p {
    font-size:13px;
  }
  .pain-fix {
    flex-direction:column;
    gap:3px;
  }
  .feature-split {
    gap:26px;
  }
  .feature-copy h2 {
    font-size:29px;
  }
  .rule-card {
    padding:20px;
  }
  .rule-sentence {
    font-size:16px;
  }
  .check-card-head {
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .check-result {
    padding:16px 13px;
    gap:9px;
    flex-wrap:wrap;
  }
  .check-result>.pill {
    margin-left:35px;
  }
  .tools-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
  }
  .pricing-grid {
    grid-template-columns:1fr 1fr;
  }
  .price-example {
    grid-column:span 2;
  }
  .price-example dl {
    max-width:420px;
  }
  .price-example p {
    max-width:420px;
  }
  .steps-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
  }
  .faq-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .cta-inner {
    gap:26px;
  }
  .cta-inner h2 {
    font-size:27px;
  }
  .cta-actions .button {
    font-size:13px;
    padding:13px 15px;
  }
  .footer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
  }
  .auth-card-login {
    grid-template-columns:310px minmax(0,1fr);
  }
  .auth-aside {
    padding:30px 25px;
  }
  .auth-form-panel {
    padding:30px 26px;
  }
  .auth-aside h2 {
    font-size:21px;
  }
}

@media(max-width:620px) {
  html {
    scroll-padding-top:76px;
  }
  .wrap {
    padding-left:22px;
    padding-right:22px;
  }
  .header-inner {
    height:62px;
    gap:12px;
  }
  .brand img {
    width:116px;
  }
  .header-actions {
    gap:14px;
  }
  .header-actions>.button {
    display:none;
  }
  .header-logout {
    display:none;
  }
  .header-login,.header-account {
    font-size:13px;
  }
  .header-account {
    max-width:125px;
  }
  .menu-toggle {
    width:35px;
    height:35px;
  }
  .hero-grid {
    padding-top:33px;
  }
  .hero .pill {
    font-size:9px;
    padding:5px 7px;
  }
  .hero h1 {
    font-size:35px;
    line-height:1.16;
    letter-spacing:-.7px;
    margin-top:16px;
  }
  .hero .lead {
    font-size:15px;
    line-height:1.7;
    margin-top:17px;
  }
  .hero-actions {
    gap:9px;
    margin-top:23px;
  }
  .hero-actions .button {
    font-size:12px;
    padding:13px 14px;
    flex:1;
    white-space:nowrap;
  }
  .hero-stats {
    margin-top:25px;
    gap:12px;
    padding-top:20px;
  }
  .hero-stats strong {
    font-size:21px;
  }
  .hero-stats div:nth-child(-n+2) strong {
    font-size:14px;
    line-height:1.8;
    white-space:normal;
  }
  .hero-stats span {
    font-size:10px;
    line-height:1.6;
  }
  .hero-preview {
    max-width:none;
    margin-top:5px;
    border-radius:10px 10px 0 0;
  }
  .browser-bar {
    height:26px;
  }
  .browser-bar .mono {
    font-size:7px;
  }
  .preview-sidebar {
    display:none;
  }
  .preview-workspace {
    padding:15px 13px;
  }
  .preview-top {
    padding:9px 12px;
  }
  .preview-body {
    min-height:290px;
  }
  .preview-table>div {
    grid-template-columns:minmax(0,1fr) 65px 30px;
  }
  .preview-table b {
    font-size:8px;
  }
  .preview-metrics span {
    font-size:7px;
  }
  .preview-heading h2 {
    font-size:18px;
  }
  .preview-metrics {
    margin:11px 0;
  }
  .preview-metrics strong {
    font-size:16px;
  }
  .preview-table>div {
    padding:8px 0;
  }
  .section {
    padding:44px 0;
  }
  .section-heading h2,h2 {
    font-size:27px;
    letter-spacing:-.3px;
  }
  .eyebrow {
    font-size:9px;
    margin-bottom:11px;
  }
  .lead {
    font-size:15px;
    line-height:1.75;
  }
  .pain-grid {
    grid-template-columns:1fr;
    gap:12px;
    margin-top:25px;
  }
  .pain-card {
    padding:21px;
  }
  .pain-card h3 {
    font-size:18px;
  }
  .pain-card h3 br {
    display:none;
  }
  .pain-card p {
    font-size:14px;
  }
  .pain-fix {
    flex-direction:row;
    gap:8px;
    font-size:12px;
  }
  .feature-split {
    grid-template-columns:1fr;
    gap:28px;
  }
  .feature-split-reverse .feature-copy {
    grid-row:1;
  }
  .feature-copy h2 {
    font-size:28px;
  }
  .check-list {
    gap:12px;
    margin-top:21px;
  }
  .check-list li {
    font-size:13px;
  }
  .rule-card {
    padding:22px;
  }
  .rule-sentence {
    font-size:17px;
    line-height:2;
  }
  .rule-details {
    font-size:11px;
  }
  .check-card-head {
    flex-direction:row;
    align-items:center;
    padding:16px;
    font-size:12px;
    gap:8px;
  }
  .check-card-head .pill {
    font-size:8px;
  }
  .check-result {
    padding:18px 15px;
    gap:10px;
    flex-wrap:nowrap;
  }
  .check-result>.pill {
    margin-left:0;
  }
  .check-result h3 {
    font-size:12px;
  }
  .sample-url {
    font-size:9px;
  }
  .check-result p {
    font-size:11px;
  }
  .check-result .pill {
    font-size:8px;
  }
  .tools-grid {
    gap:23px 17px;
    margin-top:25px;
  }
  .tool-card {
    padding-top:17px;
  }
  .tool-card h3 {
    font-size:15px;
  }
  .tool-card p {
    font-size:12px;
  }
  .pricing-grid {
    grid-template-columns:1fr;
    gap:19px;
    margin-top:26px;
  }
  .price-example {
    grid-column:auto;
  }
  .price-card {
    padding:24px;
  }
  .price-card .eyebrow {
    font-size:10px;
  }
  .price {
    margin-top:13px;
  }
  .price strong {
    font-size:34px;
  }
  .pricing-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
    margin-top:24px;
  }
  .pricing-actions .button {
    width:100%;
  }
  .steps-grid {
    gap:24px 18px;
    margin-top:26px;
  }
  .steps-grid h3 {
    font-size:15px;
  }
  .steps-grid p {
    font-size:12px;
  }
  .faq-grid {
    gap:29px;
  }
  .faq-grid h2 {
    font-size:27px;
  }
  .faq-list details {
    padding:17px 0;
  }
  .faq-list summary {
    font-size:14px;
    gap:13px;
  }
  .faq-list details p {
    font-size:13px;
    padding-right:0;
  }
  .cta-inner {
    padding-top:42px;
    padding-bottom:42px;
    align-items:flex-start;
    flex-direction:column;
    gap:24px;
  }
  .cta-inner h2 {
    font-size:26px;
  }
  .cta-inner p {
    font-size:14px;
  }
  .cta-actions {
    width:100%;
  }
  .cta-actions .button {
    font-size:14px;
  }
  .site-footer {
    padding:34px 0;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:26px 16px;
  }
  .footer-brand {
    grid-column:span 2;
  }
  .footer-grid .brand img {
    width:124px;
  }
  .footer-grid>div>a:not(.brand) {
    font-size:11px;
    overflow-wrap:anywhere;
  }
  .footer-grid>div:last-child {
    grid-column:span 2;
  }
  .auth-stage {
    padding:24px 16px;
    justify-content:flex-start;
  }
  .auth-home {
    align-self:flex-start;
    margin-left:5px;
    margin-bottom:18px;
  }
  .auth-card-login {
    display:block;
    min-height:0;
    max-width:440px;
  }
  .auth-aside {
    padding:21px 24px;
  }
  .auth-aside h2 {
    font-size:18px;
    margin-top:15px;
    line-height:1.45;
  }
  .auth-aside .check-list,.auth-aside-foot {
    display:none;
  }
  .auth-form-panel {
    padding:25px 24px 28px;
  }
  .auth-form-panel h1 {
    font-size:23px;
  }
  .auth-intro {
    margin-bottom:23px;
  }
  .auth-card {
    border-radius:10px;
  }
  .auth-legal {
    padding-top:25px;
  }
  .auth-support {
    font-size:11px;
    margin-top:20px;
  }
  .oauth-actions {
    flex-direction:column;
  }
  .auth-brand {
    font-size:15px;
  }
  .brand-mark {
    width:27px;
    height:27px;
    font-size:15px;
  }
  .field-input input {
    font-size:16px;
  }
  .checkbox-row {
    font-size:11.5px;
  }
  .auth-form-panel>.auth-brand {
    margin-bottom:23px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .button {
    transition:none;
  }
}

.help-page .wrapper {
  max-width:1060px;
  margin:auto;
  padding:0 36px;
}

.help-page #inner {
  padding:54px 0;
  background:var(--subtle);
  border-bottom:1px solid var(--line);
  margin-bottom:36px;
}

.help-page h1 {
  font-size:38px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.5px;
}

.help-page #inner .text-container {
  margin-top:10px;
  font-size:16px;
}

.help-page .help-item {
  display:block;
  padding:25px 0;
  border-bottom:1px solid var(--line);
}

.help-page .help-item-title,.help-page .h3 {
  font-size:19px;
  line-height:1.45;
  font-weight:600;
  color:var(--ink);
}

.help-page summary.help-item-title {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
}

.help-page summary.help-item-title::-webkit-details-marker {
  display:none;
}

.help-page summary.help-item-title::after {
  content:'+';
  font-size:22px;
  font-weight:400;
  color:var(--dim);
}

.help-page details[open]>summary.help-item-title::after {
  content:'−';
}

.help-page .text-container {
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
  display:flow-root;
  overflow-wrap:anywhere;
}

.help-page .help-item .text-container {
  margin-top:17px;
}

.help-page p+p {
  margin-top:14px;
}

.help-page ul,.help-page ol {
  padding-left:23px;
}

.help-page li+li {
  margin-top:6px;
}

.help-page .image-responsive {
  max-width:100%;
  height:auto;
}

.help-page .image-bordered {
  border:1px solid var(--line);
  border-radius:8px;
  padding:3px;
}

.help-page .pull-right {
  float:right;
  margin:0 0 20px 25px;
}

.help-page .pull-left {
  float:left;
  margin:0 25px 20px 0;
}

.help-page .h3 {
  margin:34px 0 17px;
  clear:both;
}

.help-page .m15 {
  margin-bottom:45px;
}

.help-page main>.wrapper:last-child {
  padding-bottom:45px;
}

.error-stage {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100svh;
  padding:30px 20px;
  background:#f4f6f8;
}

.error-card {
  width:min(100%,510px);
  padding:34px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
}

.error-card .auth-brand {
  margin-bottom:30px;
}

.error-message {
  display:flex;
  gap:18px;
  align-items:flex-start;
}

.error-code {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:56px;
  height:56px;
  border-radius:12px;
  background:#eaf1fe;
  color:var(--blue);
  font:600 17px var(--mono);
}

.error-code.is-success {
  background:#e6f4ee;
  color:#0e6a48;
}

.error-code.is-warning {
  background:#fff5e6;
  color:#925c09;
}

.error-card h1 {
  font-size:24px;
  font-weight:600;
  line-height:1.3;
}

.error-card p {
  font-size:14px;
  margin-top:10px;
  line-height:1.7;
}

.error-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:26px;
}

.error-actions .button {
  font-size:13px;
  padding:11px 15px;
}

.confirm-card {
  width:min(100%,560px);
}

.confirm-details {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px 18px;
  margin-top:24px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#f8f9fb;
  font-size:13px;
}

.confirm-details.is-warning {
  border-color:#efd6a4;
  background:#fffaf0;
}

.confirm-details span {
  color:var(--dim);
}

.confirm-details strong {
  min-width:0;
  overflow-wrap:anywhere;
  font-weight:500;
}

.confirm-notice {
  margin:16px 0 0;
}

.confirm-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.confirm-actions form {
  margin:0;
}

.confirm-actions .button {
  min-height:44px;
  padding:11px 16px;
  font-size:13px;
}

.cookie-notice {
  position:fixed;
  bottom:18px;
  left:20px;
  max-width:500px;
  z-index:70;
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:18px 20px;
  border:1px solid #d8e0eb;
  border-radius:10px;
  background:#fff;
  box-shadow:0 5px 30px #14181d18;
  font-size:12px;
  line-height:1.6;
}

.cookie-notice p {
  margin:0;
}

.cookie-notice button {
  border:0;
  background:#f1f3f6;
  border-radius:5px;
  color:var(--muted);
  width:26px;
  height:26px;
  flex-shrink:0;
  font-size:18px;
  line-height:1;
}

@media(max-width:620px) {
  .help-page .wrapper {
    padding:0 22px;
  }
  .help-page #inner {
    padding:32px 0;
    margin-bottom:18px;
  }
  .help-page h1 {
    font-size:29px;
  }
  .help-page #inner .text-container {
    font-size:14px;
  }
  .help-page .help-item-title,.help-page .h3 {
    font-size:17px;
  }
  .help-page .help-item {
    padding:21px 0;
  }
  .help-page .text-container {
    font-size:13px;
  }
  .help-page .pull-left,.help-page .pull-right {
    float:none;
    display:block;
    width:100%!important;
    max-width:100%;
    margin:18px 0;
  }
  .error-card {
    padding:26px 23px;
  }
  .error-card h1 {
    font-size:21px;
  }
  .error-message {
    gap:14px;
  }
  .error-code {
    width:45px;
    height:45px;
    font-size:14px;
  }
  .error-actions .button {
    flex:1;
    white-space:nowrap;
    font-size:12px;
  }
  .confirm-details {
    grid-template-columns:1fr;
    gap:3px;
  }
  .confirm-details strong + span {
    margin-top:8px;
  }
  .confirm-actions,
  .confirm-actions form,
  .confirm-actions .button {
    width:100%;
  }
  .cookie-notice {
    left:14px;
    right:14px;
    bottom:14px;
    max-width:none;
    padding:15px;
    gap:12px;
    font-size:11px;
  }
}