.seo-tools-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: start;
  margin-bottom: clamp(56px, 8vw, 110px);
}

.seo-tools-intro h2,
.seo-tools-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.045em;
}

.seo-tools-intro p,
.seo-tools-copy p {
  max-width: 70ch;
  margin: 0 0 18px;
  color: var(--n800);
  font-size: 17px;
  line-height: 1.7;
}

.seo-tools-principles {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--text);
  list-style: none;
}

.seo-tools-principles li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--n300);
  color: var(--n800);
}

.seo-tools-principles strong {
  color: #cf2a12;
  font-feature-settings: "tnum" 1;
}

.seo-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 0 0 clamp(70px, 9vw, 130px);
  border: 2px solid var(--text);
  background: var(--text);
}

.seo-tool-card {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 4vw, 48px);
  background: var(--bg);
  color: var(--text);
}

.seo-tool-card:hover,
.seo-tool-card:focus-visible {
  background: #cf2a12;
  color: #fff !important;
}

.seo-tool-card:hover h2,
.seo-tool-card:focus-visible h2,
.seo-tool-card:hover p,
.seo-tool-card:focus-visible p,
.seo-tool-card:hover .seo-tool-card-kicker,
.seo-tool-card:focus-visible .seo-tool-card-kicker,
.seo-tool-card:hover .seo-tool-card-arrow,
.seo-tool-card:focus-visible .seo-tool-card-arrow {
  color: #fff;
}

.seo-tool-card-kicker {
  color: var(--a700);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.seo-tool-card h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(34px, 4vw, 60px);
  line-height: .98;
  letter-spacing: -.045em;
}

.seo-tool-card p {
  max-width: 55ch;
  margin: 0;
  color: var(--n800);
  font-size: 17px;
  line-height: 1.6;
}

.seo-tool-card-arrow {
  margin-top: auto;
  font-size: 28px;
  font-weight: 800;
}

.seo-tool-placeholder {
  justify-content: flex-end;
  background: var(--text);
  color: #fff;
}

.seo-tool-placeholder p,
.seo-tool-placeholder .seo-tool-card-kicker {
  color: #fff;
}

.psc-panel {
  margin-bottom: clamp(54px, 8vw, 108px);
  border: 2px solid var(--text);
  background: var(--text);
  color: #fff;
}

.psc-form-wrap {
  padding: clamp(28px, 5vw, 64px);
}

.psc-form-wrap h2 {
  max-width: 16ch;
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(31px, 4.5vw, 64px);
  line-height: .98;
  letter-spacing: -.045em;
}

.psc-form-wrap > p {
  max-width: 66ch;
  margin: 0 0 28px;
  color: #fff;
  font-size: 17px;
  line-height: 1.65;
}

.psc-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.psc-field {
  display: grid;
  gap: 9px;
}

.psc-field label {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.psc-field input {
  width: 100%;
  min-height: 58px;
  padding: 0 16px;
  border: 2px solid #fff;
  border-radius: 0;
  background: #fff;
  color: var(--text);
  font: 400 17px/1.2 var(--font);
}

.psc-field input:focus {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.psc-submit {
  min-height: 58px;
  padding: 0 24px;
  border: 2px solid #cf2a12;
  border-radius: 0;
  background: #cf2a12;
  color: #fff;
  font: 800 16px/1.2 var(--font);
  cursor: pointer;
}

/* Compact CTA labels need AA contrast while retaining the brand-red treatment. */
.wissen-cta {
  border-color: #cf2a12;
  background: #cf2a12;
}

.psc-submit:hover,
.psc-submit:focus-visible {
  border-color: #fff;
  background: #fff;
  color: var(--text);
}

.psc-submit:disabled {
  cursor: wait;
  opacity: .7;
}

.psc-status {
  min-height: 25px;
  margin: 16px 0 0;
  color: #fff;
  font-size: 15px;
}

.psc-status.is-error {
  padding: 12px 14px;
  border: 2px solid #fff;
  background: var(--accent);
  font-weight: 700;
}

.psc-progress {
  display: none;
  margin-top: 28px;
}

.psc-progress.is-active {
  display: block;
}

.psc-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 10px;
}

.psc-progress-label {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.psc-progress-percent {
  color: #fff;
  font-feature-settings: "tnum" 1;
  font-size: 22px;
  font-weight: 800;
}

.psc-progress-track {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 3px;
  padding: 5px;
  border: 2px solid #fff;
  background: #38231f;
}

.psc-progress-segment {
  display: block;
  height: 28px;
  background: #5c3a33;
  transition: background-color 160ms ease;
}

.psc-progress-segment.is-active {
  background: var(--accent);
}

.psc-results {
  border-top: 2px solid #fff;
  background: var(--bg);
  color: var(--text);
}

.psc-results[hidden] {
  display: none;
}

.psc-results-head {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-end;
  padding: clamp(26px, 4vw, 48px);
  border-bottom: 2px solid var(--text);
}

.psc-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
  border-bottom: 2px solid var(--text);
}

.psc-preview-copy,
.psc-preview {
  min-width: 0;
  padding: clamp(24px, 4vw, 48px);
}

.psc-preview-copy {
  border-right: 2px solid var(--text);
}

.psc-preview-copy h3,
.psc-preview h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
}

.psc-preview-copy p,
.psc-preview-note {
  margin: 0;
  color: var(--n800);
  font-size: 15px;
  line-height: 1.55;
}

.psc-preview-frame {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 2px solid var(--text);
  background: var(--surface);
}

.psc-preview-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  object-fit: contain;
  object-position: center;
}

.psc-preview-note {
  margin-top: 10px;
  font-size: 13px;
}

.psc-assessment {
  margin: 0 clamp(26px, 4vw, 48px) 28px;
  padding: 20px 22px 20px 24px;
  border-left: 8px solid #176b3a;
  background: #eaf5ee;
}

.psc-assessment.is-attention {
  border-left-color: #b95d00;
  background: #fff3e3;
}

.psc-assessment.is-alert {
  border-left-color: var(--accent);
  background: #ffe8e2;
}

.psc-assessment h3 {
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1.1;
}

.psc-assessment p {
  margin: 0;
  color: var(--n800);
  font-size: 15px;
  line-height: 1.6;
}

.psc-results-head p {
  margin: 0 0 8px;
  color: var(--a700);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.psc-results-head h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -.04em;
}

.psc-final-url {
  max-width: 54ch;
  color: var(--n800);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.psc-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 2px solid var(--text);
}

.psc-metric {
  min-width: 0;
  padding: clamp(24px, 3.4vw, 44px);
  border-right: 2px solid var(--text);
}

.psc-metric:last-child {
  border-right: 0;
}

.psc-metric-label {
  display: block;
  margin-bottom: 12px;
  color: var(--n800);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.psc-metric-value {
  display: block;
  font-size: clamp(34px, 4.3vw, 64px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.psc-metric-note {
  display: block;
  margin-top: 12px;
  color: var(--n800);
  font-size: 14px;
  line-height: 1.45;
}

.psc-google-status {
  display: inline-flex;
  margin-top: 15px;
  padding: 7px 9px;
  background: #176b3a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.psc-google-status.is-over {
  background: var(--accent);
}

.psc-details {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 0;
}

.psc-section {
  min-width: 0;
  padding: clamp(26px, 4vw, 48px);
  border-bottom: 2px solid var(--text);
}

.psc-section:nth-child(odd) {
  border-right: 2px solid var(--text);
}

.psc-section h3 {
  margin: 0 0 22px;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
}

.psc-section-intro {
  margin: -8px 0 22px;
  color: var(--n800);
  font-size: 14px;
  line-height: 1.55;
}

.psc-breakdown {
  display: grid;
  gap: 14px;
}

.psc-breakdown-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: var(--n800);
  font-size: 14px;
}

.psc-breakdown-track {
  height: 12px;
  background: var(--n300);
}

.psc-breakdown-bar {
  display: block;
  min-width: 2px;
  height: 100%;
  background: var(--accent);
}

.psc-resource-wrap {
  overflow-x: auto;
}

.psc-resource-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.psc-resource-table th,
.psc-resource-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--n300);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

.psc-resource-table th {
  color: var(--n800);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.psc-resource-url {
  max-width: 440px;
  overflow-wrap: anywhere;
}

.psc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.psc-list li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--n300);
  color: var(--n800);
  line-height: 1.55;
}

.psc-list li::before {
  width: 9px;
  height: 9px;
  margin-top: 7px;
  background: var(--accent);
  content: "";
}

.psc-warnings {
  grid-column: 1 / -1;
  border-right: 0 !important;
  background: var(--surface);
}

.seo-tools-copy {
  max-width: 980px;
  margin: 0 auto;
}

.seo-tools-copy h2 {
  margin-top: clamp(48px, 7vw, 86px);
  padding-top: 22px;
  border-top: 2px solid var(--text);
}

.seo-tools-copy h2:first-child {
  margin-top: 0;
}

.seo-tools-copy h3 {
  margin: 34px 0 12px;
  font-size: clamp(22px, 2.5vw, 31px);
  line-height: 1.12;
}

.seo-tools-copy a {
  color: var(--a700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.seo-tools-copy a:hover,
.seo-tools-copy a:focus-visible {
  color: var(--accent);
}

.seo-tools-note {
  margin: 28px 0;
  padding: 20px 22px;
  border-left: 7px solid var(--accent);
  background: var(--surface);
}

.seo-tools-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .seo-tools-intro,
  .seo-tools-grid,
  .psc-details,
  .psc-preview-grid {
    grid-template-columns: 1fr;
  }

  .psc-preview-copy {
    border-right: 0;
    border-bottom: 2px solid var(--text);
  }

  .seo-tool-placeholder {
    min-height: 220px;
  }

  .psc-metrics {
    grid-template-columns: 1fr;
  }

  .psc-metric,
  .psc-section,
  .psc-section:nth-child(odd) {
    border-right: 0;
  }

  .psc-metric {
    border-bottom: 2px solid var(--text);
  }

  .psc-metric:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .psc-form {
    grid-template-columns: 1fr;
  }

  .psc-submit {
    width: 100%;
  }

  .psc-results-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .psc-breakdown-row {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .psc-breakdown-row strong {
    grid-column: 2;
  }

  .psc-progress-track {
    gap: 2px;
    padding: 4px;
  }

  .psc-progress-segment {
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .psc-submit {
    transition: none;
  }
}

/* Shared SEO-tool result interface. The animated progress strip is deliberately
   deterministic: it communicates work in progress without inventing a score. */
.st-shell {
  display: grid;
  gap: 2px;
  margin: 0 0 clamp(70px, 9vw, 130px);
  border: 2px solid var(--text);
  background: var(--text);
}
.st-form-panel,
.st-result-panel,
.st-copy-panel { background: var(--bg); }
.st-form-panel { padding: clamp(28px, 5vw, 68px); }
.st-form-panel h2 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 58px); line-height: 1; letter-spacing: -.045em; }
.st-form-panel > p { max-width: 68ch; color: var(--n800); font-size: 18px; line-height: 1.65; }
.st-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; margin-top: 30px; }
.st-field { display: grid; gap: 8px; }
.st-field label { font-weight: 700; }
.st-field input { min-height: 54px; border: 2px solid var(--text); padding: 12px 14px; background: var(--bg); color: var(--text); font: inherit; }
.st-field input:focus { outline: 3px solid #ef321d; outline-offset: 2px; }
.st-submit { min-height: 54px; border: 2px solid #ef321d; padding: 12px 22px; background: #ef321d; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.st-submit:hover, .st-submit:focus-visible { background: #c92312; color: #fff; }
.st-status { min-height: 1.5em; margin: 18px 0 0; color: var(--n800); }
.st-progress { margin-top: 22px; padding: 18px; border: 2px solid var(--text); background: var(--text); color: #fff; }
.st-progress-head { display: flex; justify-content: space-between; gap: 18px; font-weight: 700; }
.st-progress-track { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin-top: 14px; }
.st-progress-segment { min-height: 21px; background: #3a3534; transition: background-color .22s ease; }
.st-progress-segment.is-filled { background: #ef321d; }
.st-result-panel { padding: clamp(28px, 5vw, 68px); }
.st-result-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; padding-bottom: 26px; border-bottom: 2px solid var(--text); }
.st-result-head p, .st-kicker { margin: 0 0 12px; color: #cf2a12; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.st-result-head h2 { margin: 0; font-size: clamp(30px, 4vw, 60px); line-height: .98; letter-spacing: -.045em; }
.st-target { max-width: 34ch; overflow-wrap: anywhere; color: var(--n800); font-size: 14px; }
.st-assessment { margin: 26px 0; border: 2px solid var(--text); padding: 22px 24px; }
.st-assessment.is-good { border-color: #16834e; background: #edf9f1; }
.st-assessment.is-attention { border-color: #c57d00; background: #fff8e8; }
.st-assessment.is-alert { border-color: #d42b18; background: #fff0ed; }
.st-assessment h3 { margin: 0 0 8px; font-size: 26px; }
.st-assessment p { margin: 0; color: var(--n800); line-height: 1.6; }
.st-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--text); border-left: 2px solid var(--text); }
.st-metric { min-height: 130px; display: grid; align-content: start; gap: 9px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); padding: 20px; }
.st-metric-label { color: var(--n700); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.st-metric-value { font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -.04em; }
.st-metric-note { color: var(--n700); font-size: 14px; line-height: 1.4; }
.st-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: 28px; border: 2px solid var(--text); background: var(--text); }
.st-section { padding: 28px; background: var(--bg); }
.st-section h3 { margin: 0 0 14px; font-size: 27px; letter-spacing: -.03em; }
.st-section-intro { color: var(--n800); line-height: 1.55; }
.st-bars { display: grid; gap: 13px; }
.st-bar-row { display: grid; grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.st-bar-label { font-weight: 700; }
.st-bar-track { height: 16px; border: 1px solid var(--text); background: #ddd9d7; }
.st-bar-fill { height: 100%; background: #ef321d; }
.st-findings, .st-recommendations { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.st-finding, .st-recommendation { border: 1px solid var(--n400); padding: 14px 16px; }
.st-finding { display: grid; gap: 5px; }
.st-finding strong { font-size: 17px; }
.st-finding span, .st-recommendation { color: var(--n800); line-height: 1.5; }
.st-finding.is-good { border-left: 5px solid #16834e; }
.st-finding.is-attention { border-left: 5px solid #c57d00; }
.st-finding.is-alert { border-left: 5px solid #d42b18; }
.st-copy-panel { padding: clamp(28px, 5vw, 68px); }
.st-copy-panel h2 { margin: 0 0 18px; font-size: clamp(28px, 3.5vw, 52px); line-height: 1; letter-spacing: -.04em; }
.st-copy-panel h3 { margin: 30px 0 9px; font-size: 24px; }
.st-copy-panel p, .st-copy-panel li { max-width: 72ch; color: var(--n800); font-size: 17px; line-height: 1.7; }
.st-copy-panel ul { padding-left: 1.3em; }

@media (max-width: 760px) {
  .st-form { grid-template-columns: 1fr; }
  .st-submit { width: 100%; }
  .st-result-head { display: grid; align-items: start; }
  .st-metrics, .st-columns { grid-template-columns: 1fr; }
  .st-bar-row { grid-template-columns: 1fr auto; }
  .st-bar-track { grid-column: 1 / -1; }
  .st-progress-track { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-progress-segment { transition: none; }
}