/* SerpToday visual identity. The rankings page is the reference for shared UI. */
.st-site {
  --st-ink: #182b43;
  --st-muted: #60738a;
  --st-blue: #2368b1;
  --st-blue-dark: #164e91;
  --st-teal: #17825e;
  --st-line: #dce7f0;
  --st-surface: #fff;
  --st-canvas: #f5f9fc;
  --st-lime: #caff79;
  --st-shadow: 0 16px 42px rgba(23, 51, 83, .07);
  background: var(--st-canvas);
  color: var(--st-ink);
}
.st-site :focus-visible { outline: 3px solid #45a6bf; outline-offset: 3px; }
.st-site a { text-underline-offset: 3px; }
.st-site .button {
  border-radius: 11px;
  background: var(--st-lime);
  color: #173b33;
  box-shadow: 0 8px 19px rgba(20, 52, 56, .10);
  font-weight: 800;
}
.st-site .button:hover, .st-site .st-card .button:hover { background: #b9f468; color: #12362e; }
.st-site .section-label { color: var(--st-teal); font-weight: 800; letter-spacing: .15em; }
.st-site .section-label:before { background: #38b794; }

/* Navigation and shared workspace shell */
.st-top { background: #101f31; }
.st-top header { height: 82px; }
.st-topnav a { color: #d8e8f3; font-weight: 600; transition: color .18s ease; }
.st-topnav a:hover { color: var(--st-lime); }
.st-header-cta { box-shadow: 0 8px 22px rgba(10, 30, 40, .22) !important; }
.st-workspace { grid-template-columns: 236px minmax(0, 1fr); }
.st-sidebar { padding: 30px 18px; border-color: var(--st-line); background: #fff; }
.st-workspace-label { color: #718399; font-size: 10px; }
.st-chip { border-color: #cce8dc; border-radius: 999px; background: #eaf7ef; color: #236445; font-weight: 800; }
.st-sidebar nav a { min-height: 47px; border-radius: 11px; color: #536a80; font-size: 13px; font-weight: 650; }
.st-sidebar nav a:hover { background: #edf5fb; color: var(--st-blue-dark); }
.st-sidebar nav a[aria-current=page] { background: #e9f4fb; color: #174c7b; box-shadow: inset 3px 0 #2d86ba; font-weight: 800; }
.st-sidebar nav a>span { color: #4389a7; }
.st-side-note { border-top: 1px solid var(--st-line); color: var(--st-muted); }
.st-side-note strong { color: var(--st-ink); }
.st-side-note a { color: var(--st-blue); }
.st-side-note .status-dot { background: #21a67c; }
.st-app { min-width: 0; background: linear-gradient(180deg, #f4f8fc 0, #f8fbfd 430px, #f6f9fc 100%); }
.st-appbar { min-height: 66px; border-color: var(--st-line); color: var(--st-muted); }
.st-user { width: 36px; height: 36px; background: #eaf4f8; color: #175e84; }
.st-appbody { max-width: 1510px; padding: 36px; }

/* Page introductions follow the same visual treatment as keyword rankings. */
.st-appbody > .st-page-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 185px;
  margin-bottom: 25px;
  padding: 31px 38px;
  border: 1px solid #234e77;
  border-radius: 22px;
  background: radial-gradient(circle at 83% 4%, rgba(91, 194, 205, .30), transparent 24%),
    radial-gradient(circle at 70% 115%, rgba(125, 231, 178, .20), transparent 29%),
    linear-gradient(118deg, #122945 0%, #16426c 55%, #156878 100%);
  box-shadow: 0 18px 38px rgba(23, 61, 101, .18);
  color: #fff;
}
.st-appbody > .st-page-heading::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -44px;
  bottom: -188px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(195, 255, 226, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(195, 255, 226, .045), 0 0 0 53px rgba(195, 255, 226, .10), 0 0 0 104px rgba(195, 255, 226, .025);
  pointer-events: none;
}
.st-appbody > .st-page-heading .section-label { color: #b9f4dd; font-size: 10px; }
.st-appbody > .st-page-heading h1 { margin: 12px 0 8px; color: #fff; font-size: clamp(34px, 3vw, 47px); letter-spacing: -.055em; }
.st-appbody > .st-page-heading p { max-width: 55ch; color: #d3e8f3; font-size: 14px; line-height: 1.6; }
.st-appbody > .st-page-heading > .button { position: relative; z-index: 1; min-height: 46px; }
.st-appbody > .st-notice { border: 1px solid #cce8dc; border-radius: 13px; background: #eef9f3; color: #345f52; box-shadow: 0 4px 12px rgba(23, 86, 68, .035); }
.st-appbody > .st-notice strong { color: #155940; }

/* Surfaces, statistics, links and empty states */
.st-site .st-card { border: 1px solid var(--st-line); border-radius: 18px; background: var(--st-surface); box-shadow: var(--st-shadow); }
.st-site .st-card h2, .st-site .st-card h3 { color: var(--st-ink); }
.st-site .st-card h2 { font-weight: 800; letter-spacing: -.04em; }
.st-site .st-card p, .st-site .st-subtle { color: var(--st-muted); }
.st-card-title { border-bottom-color: var(--st-line); }
.st-card-title h2 { font-size: 19px; }
.st-card-title > a:not(.button), .st-card > a:not(.button), .st-prose a { color: var(--st-blue); font-weight: 700; }
.st-card-title > a:not(.button):hover, .st-card > a:not(.button):hover { color: var(--st-blue-dark); }
.st-metrics { gap: 15px; margin-bottom: 24px; }
.st-metrics article { position: relative; overflow: hidden; min-height: 153px; padding: 22px 23px; transition: transform .2s ease, box-shadow .2s ease; }
.st-metrics article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(#2b83bd, #22a97e); }
.st-metrics article:hover { transform: translateY(-3px); box-shadow: 0 20px 45px rgba(23, 51, 83, .11); }
.st-metrics article > span { color: var(--st-muted); font-size: 12px; font-weight: 700; }
.st-metrics strong { color: var(--st-ink); font-size: clamp(30px, 3vw, 40px); font-variant-numeric: tabular-nums; }
.st-metrics small { color: var(--st-muted); font-size: 11px; }
.st-metrics .sta-metric-up strong, .st-metrics .sta-metric-up .sta-metric-change { color: #138461; }
.st-metrics .sta-metric-down strong, .st-metrics .sta-metric-down .sta-metric-change { color: #c4534d; }
.st-empty { padding: 48px 20px; }
.st-empty-icon { border: 1px solid #cfe4e9; background: #e9f5f9; color: var(--st-blue); }
.st-empty h2 { color: var(--st-ink); }
.st-quicklinks a { border-color: var(--st-line); }
.st-quicklinks a > span { color: var(--st-blue); }
.st-contact-link { border-color: var(--st-line); transition: padding .2s ease, background .2s ease; }
.st-contact-link:hover { padding-left: 10px; background: #f5fbfe; }
.st-contact-link strong { color: var(--st-ink); }
.st-contact-link span { color: var(--st-muted); }
.st-step { border-color: var(--st-line); }
.st-step > span { color: var(--st-teal); font-weight: 800; }
.st-getting-started { background: #eaf5f8; }
.st-site .st-card .st-notice { border-color: #cce8dc; border-radius: 12px; background: #eef9f3; color: #345f52; }

/* Forms and secondary actions */
.st-site .sta-form label, .st-site .sta-filters label, .st-preview-form label { color: #405a70; font-size: 13px; font-weight: 700; }
.st-site .sta-form input:not([type=checkbox]), .st-site .sta-form select, .st-site .sta-form textarea,
.st-site .sta-filters input, .st-site .sta-filters select,
.st-preview-form input, .st-preview-form select, .st-preview-form textarea {
  border: 1px solid #cfdfea;
  border-radius: 10px;
  background: #fbfdff;
  color: var(--st-ink);
  box-shadow: inset 0 1px 2px rgba(20, 48, 74, .025);
  font-size: 14px;
}
.st-site .sta-form input:focus, .st-site .sta-form select:focus, .st-site .sta-form textarea:focus,
.st-site .sta-filters input:focus, .st-site .sta-filters select:focus,
.st-preview-form input:focus, .st-preview-form select:focus, .st-preview-form textarea:focus {
  border-color: #4398be;
  outline: 3px solid #d7eff8;
  outline-offset: 0;
}
.st-site .sta-form input[type=checkbox], .st-site .st-table-wrap input[type=checkbox] { accent-color: var(--st-blue); }
.st-site .sta-action:not(.sta-icon-action):not(.sta-bulk-icon) { border: 1px solid #c9dfef; border-radius: 9px; background: #eff7fc; color: var(--st-blue-dark); font-weight: 750; }
.st-site .sta-action:not(.sta-icon-action):not(.sta-bulk-icon):hover { border-color: #9fc7dd; background: #e1f1fa; color: #123f6b; }
.st-site .sta-form .button { min-height: 47px; }
.st-form-card { max-width: 900px; }
.st-form-card h2 { padding-bottom: 14px; border-bottom: 1px solid var(--st-line); }
.st-form-card h3 { margin-top: 27px; }
.st-site .sta-error { border-color: #f0c9c5; background: #fff4f2; color: #9d3c37; }

/* Workspace tables. The keyword table keeps its dedicated premium styling. */
.st-appbody .st-card:not(.sta-keyword-panel) .st-table-wrap { border: 1px solid var(--st-line); border-radius: 13px; }
.st-appbody .st-card:not(.sta-keyword-panel) .st-table-wrap table { margin: 0; border-collapse: separate; border-spacing: 0; }
.st-appbody .st-card:not(.sta-keyword-panel) .st-table-wrap th { background: #eaf2f8; color: #34526e; font-size: 12px; font-weight: 800; letter-spacing: .025em; }
.st-appbody .st-card:not(.sta-keyword-panel) .st-table-wrap td { border-color: #e7eef4; color: #304963; font-size: 13px; }
.st-appbody .st-card:not(.sta-keyword-panel) .st-table-wrap tbody tr:hover td { background: #f7fbfe; }
.st-appbody .st-card:not(.sta-keyword-panel) .st-table-wrap td:first-child a { color: var(--st-blue-dark); font-weight: 800; }
.st-appbody .st-card:not(.sta-keyword-panel) .st-table-wrap td small { display: block; color: var(--st-muted); line-height: 1.5; }

/* Plans, account, billing and support */
.st-site .sta-pricing { max-width: 1160px; border-color: var(--st-line); border-radius: 22px; box-shadow: var(--st-shadow); }
.st-site .sta-price-eyebrow, .st-site .sta-billing-eyebrow { color: var(--st-teal); }
.st-site .sta-pricing-intro h2 { color: var(--st-ink); }
.st-site .sta-pricing-intro p { color: var(--st-muted); }
.st-site .sta-price-summary { border-color: var(--st-line); }
.st-site .sta-price-summary strong { color: var(--st-ink); }
.st-site .sta-price-caption { color: var(--st-muted); }
.st-site .sta-price-control input[type=range] { accent-color: var(--st-blue); }
.st-site .sta-price-control input::-webkit-slider-thumb { border-color: #fff; background: var(--st-blue); box-shadow: 0 0 0 1px var(--st-blue), 0 3px 9px #0002; }
.st-site .sta-price-control input::-moz-range-thumb { border-color: #fff; background: var(--st-blue); box-shadow: 0 0 0 1px var(--st-blue); }
.st-site .sta-price-stops button { color: #587086; }
.st-site .sta-price-stops button[aria-pressed=true] { background: #e5f2fa; color: var(--st-blue-dark); }
.st-site .sta-price-bottom { border: 1px solid #cce8dc; background: #eaf8f2; }
.st-site .sta-price-bottom > span { color: #236445; }
.st-site .sta-price-rules { border-color: var(--st-line); color: var(--st-muted); }
.st-site .sta-price-features { color: #456275; }
.st-site .sta-settings-tabs { border: 1px solid var(--st-line); background: #eaf2f8; }
.st-site .sta-settings-tabs button { color: #536b81; }
.st-site .sta-settings-tabs button[aria-selected=true] { background: #fff; color: var(--st-blue-dark); box-shadow: 0 4px 12px rgba(23, 51, 83, .09); }
.st-site .sta-account-details > div, .st-site .sta-billing-grid > div { padding: 17px; border: 1px solid var(--st-line); border-radius: 12px; background: #f8fbfe; }
.st-site .sta-account-details dt, .st-site .sta-billing-grid dt { color: var(--st-muted); }
.st-site .sta-account-details dd, .st-site .sta-billing-grid dd { color: var(--st-ink); }

/* Public pages and authentication */
.st-public { min-width: 0; }
.st-page-hero { padding: 70px 0 78px; background: radial-gradient(circle at 81% 11%, rgba(91,194,205,.25), transparent 22%), linear-gradient(118deg, #122945, #16426c 58%, #156878); }
.st-page-hero h1 { font-size: clamp(38px, 4.4vw, 64px); letter-spacing: -.055em; line-height: 1.12; }
.st-page-hero p { color: #d3e8f3; font-size: 16px; }
.st-page-hero .section-label { color: #b9f4dd; }
.st-hero-orbit { border-color: rgba(195,255,226,.2); box-shadow: 0 0 0 52px rgba(195,255,226,.04), 0 0 0 53px rgba(195,255,226,.1), 0 0 0 104px rgba(195,255,226,.025); }
.st-content-wrap { padding: 52px 0 72px; }
.st-product-lead h2 { color: var(--st-ink); letter-spacing: -.055em; }
.st-auth-story em, .st-product-lead em { color: var(--st-teal); }
.st-auth-story p, .st-product-lead p { color: var(--st-muted); }
.st-product-art { border: 1px solid #2e6d86; border-radius: 22px; background: radial-gradient(circle at 75% 5%, rgba(91,194,205,.3), transparent 35%), linear-gradient(135deg, #122945, #156878); color: var(--st-lime); box-shadow: 0 20px 45px rgba(23,61,101,.18); }
.st-product-art > span { color: var(--st-blue); }
.st-ring { border-color: rgba(195,255,226,.35); box-shadow: 0 0 0 24px rgba(195,255,226,.04), 0 0 0 25px rgba(195,255,226,.1), 0 0 0 50px rgba(195,255,226,.03), 0 0 0 51px rgba(195,255,226,.08); }
.st-feature-grid .st-card { min-height: 208px; transition: transform .2s ease, box-shadow .2s ease; }
.st-feature-grid .st-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(23,51,83,.12); }
.st-feature-symbol { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; border: 1px solid #cfe4e9; border-radius: 15px; background: #e9f5f9; color: var(--st-blue); font-size: 28px; }
.st-auth-story h2 { color: var(--st-ink); letter-spacing: -.055em; }
.st-auth-visual { border: 1px solid #cfe4e9; border-radius: 17px; background: linear-gradient(120deg, #eaf5fb, #e7f8f2); }
.st-auth-visual > span { color: var(--st-blue-dark); }
.st-auth-visual > div { color: var(--st-teal); }
.st-auth-visual small { color: var(--st-muted); }
.st-auth-card { border-top: 4px solid #258db6 !important; }
.st-auth-links { color: var(--st-blue); }
.st-guide-layout aside { background: linear-gradient(160deg, #fff 65%, #eef8fa); }
.st-guide-layout .st-step h3 { color: var(--st-ink); }
.st-faq details { border-bottom: 1px solid var(--st-line); }
.st-faq summary { cursor: pointer; color: var(--st-ink); font-weight: 800; }
.st-faq summary:hover { color: var(--st-blue); }
.st-faq details[open] { padding-bottom: 8px; }
.st-faq details p { color: var(--st-muted); }
.st-prose a { color: var(--st-blue); }
.st-footer { border-top-color: var(--st-line); background: #f8fbfe; }
.st-footer .brand-dot { color: var(--st-teal); }

@media (max-width: 1100px) {
  .st-workspace { grid-template-columns: 190px minmax(0, 1fr); }
  .st-appbody { padding: 26px; }
}
@media (max-width: 760px) {
  .st-top header { height: 76px; }
  .st-topnav { top: 76px; border: 1px solid #3d6581; border-radius: 15px; background: #17344f; }
  .st-menu { border-color: #688aa2; border-radius: 9px; }
  .st-workspace { display: block; }
  .st-sidebar { padding: 10px 14px; border-bottom: 1px solid var(--st-line); }
  .st-sidebar nav a { min-height: 40px; }
  .st-sidebar nav a[aria-current=page] { box-shadow: inset 0 -3px #2d86ba; }
  .st-appbody { padding: 20px 16px; }
  .st-appbody > .st-page-heading { min-height: 0; padding: 27px 22px; border-radius: 18px; }
  .st-appbody > .st-page-heading h1 { font-size: clamp(30px, 8vw, 40px); }
  .st-appbody > .st-page-heading p { font-size: 13px; }
  .st-appbody > .st-page-heading > .button { min-height: 42px; }
  .st-metrics article { min-height: 132px; padding: 17px; }
  .st-metrics strong { font-size: 30px; }
  .st-site .st-card { border-radius: 15px; }
  .st-page-hero { padding: 46px 0 52px; }
  .st-page-hero h1 { font-size: clamp(34px, 9vw, 47px); }
  .st-content-wrap { padding: 30px 0 48px; }
  .st-feature-grid .st-card { min-height: 0; }
  .st-site .sta-pricing { padding: 26px 20px; }
  .st-site .sta-price-stops button { background: #eff6fb; }
}
@media (max-width: 430px) {
  .st-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-metrics article > span { font-size: 11px; }
  .st-metrics strong { font-size: 27px; }
  .st-site .sta-price-summary strong { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-site .st-card, .st-site .st-contact-link, .st-site .st-feature-grid .st-card { transition: none; }
  .st-metrics article:hover, .st-feature-grid .st-card:hover { transform: none; }
}