/* Sunward Marketing: the free marketing audit page.
   Built on base.css tokens. Phone layout first; wider screens add columns. */

/* ---------- Page states: search, run, report ---------- */
main[data-state="search"] .a-run,
main[data-state="search"] .a-report,
main[data-state="run"] .a-hero,
main[data-state="run"] .a-report,
main[data-state="run"] .a-intro,
main[data-state="report"] .a-hero,
main[data-state="report"] .a-run,
main[data-state="report"] .a-intro { display: none; }
.a-run:focus, .a-report:focus { outline: none; }

/* ---------- Hero and the search tool ---------- */
.a-hero {
  padding: 22px 0 clamp(48px, 7vw, 96px);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: -1px -1px;
  border-bottom: 3px solid var(--ink);
}
.a-hero-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.a-hero-meta .label:first-child { color: var(--ink); }
.a-hero-grid { display: grid; gap: 32px; padding-top: 28px; }
.a-h1 {
  font-size: clamp(2.35rem, 6.2vw, 5.6rem);
  line-height: 0.94;
  font-variation-settings: "wdth" 114;
  letter-spacing: -0.04em;
}
.a-hero .lede { margin: 22px 0 0; }

.a-tool { position: relative; background: var(--paper); padding: 18px 0 0; border-top: 3px solid var(--ink); }
.a-tool > .label { display: block; margin-bottom: 10px; color: var(--ink); }
.a-combo { position: relative; }
.a-combo input {
  width: 100%;
  height: 60px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: #fff;
  font: 500 18px/1 var(--f-display);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.a-combo input::placeholder { color: var(--ink-3); opacity: 1; }
.a-combo input:focus { outline: 3px solid var(--cobalt); outline-offset: 0; }
.a-ac {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-top: 0;
  max-height: 360px;
  overflow-y: auto;
}
.a-ac li { display: block; padding: 13px 16px; border-top: 1px solid var(--hair); cursor: pointer; }
.a-ac li:first-child { border-top: 0; }
.a-ac li b { display: block; font: 700 17px/1.25 var(--f-display); color: var(--ink); }
.a-ac li span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--ink-3); }
.a-ac li:hover, .a-ac li[aria-selected="true"] { background: var(--paper-2); }
.a-ac li[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--sun); }
.a-ac .a-ac-site b { font-weight: 600; color: var(--cobalt); text-decoration: underline; text-underline-offset: 4px; }
.a-tool .btn { width: 100%; justify-content: center; margin-top: 12px; min-height: 60px; font-size: 17px; }
.a-msg { margin: 14px 0 0; padding: 10px 14px; background: var(--ink); color: var(--paper); font: 600 16px/1.4 var(--f-display); }
.a-tool .small { margin: 12px 0 0; }

@media (min-width: 900px) {
  .a-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; padding-top: 44px; }
  .a-h1 { font-size: clamp(2.6rem, 4.7vw, 4.9rem); }
  .a-tool { padding: 22px 0 0; }
}

/* ---------- The run ---------- */
.a-run { --a: -150deg; padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 110px); }
.a-run .masthead { margin-bottom: 28px; }
.a-run .h2 { overflow-wrap: anywhere; }
.a-run-grid { display: grid; gap: 28px; }
.a-steps { width: 100%; border-collapse: collapse; border-top: 3px solid var(--ink); }
.a-steps th, .a-steps td { padding: 14px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.a-steps th { font: 700 17px/1.25 var(--f-display); color: var(--ink); padding-right: 14px; }
.a-steps td { font: 600 14px/1.35 var(--f-display); font-variation-settings: "wdth" 80; letter-spacing: 0.02em; color: var(--ink-3); text-align: right; width: 44%; }
.a-steps tr.is-on td { color: var(--cobalt); }
.a-steps tr.is-done td { color: var(--ink); }
.a-steps tr.is-done th { box-shadow: inset 4px 0 0 var(--sun); padding-left: 12px; transition: padding 0.4s var(--ease); }
.a-steps tr.is-miss td { color: var(--ink-3); }
.a-notes { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.a-notes li { display: flex; gap: 10px; align-items: baseline; font-size: 17px; line-height: 1.45; color: var(--ink-2); animation: a-in 0.5s var(--ease) both; }
.a-notes .needle-ico { color: var(--cobalt); transform: rotate(90deg); position: relative; top: 2px; }
@keyframes a-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.a-run .wrap { position: relative; }
.a-rose { position: absolute; top: 34px; right: var(--gutter); width: 96px; }
.a-run .masthead { padding-right: 112px; }
.a-rose-needle { transform-origin: 200px 200px; transform: rotate(var(--a)); transition: transform 1.1s cubic-bezier(0.34, 1.4, 0.5, 1); }
.a-rose-sun { transform-origin: 296.4px 85.1px; transition: transform 0.6s var(--ease); }
.a-run.is-complete .a-rose-sun { transform: scale(1.25); }

@media (min-width: 900px) {
  .a-run-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 6vw, 96px); align-items: start; }
  .a-rose { position: static; width: 100%; }
  .a-run .masthead { padding-right: 0; }
}

/* ---------- The report ---------- */
.a-report { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 110px); }
.a-report .masthead { margin-bottom: 28px; }
.a-r-name { overflow-wrap: anywhere; }
.a-r-meta { margin: 12px 0 0; }
.a-demo { display: inline-block; margin: 14px 0 0; padding: 6px 10px; background: var(--sun); color: var(--ink); font: 700 14px/1.3 var(--f-display); }

.a-score-grid { display: grid; gap: 28px; padding-top: 18px; border-top: 3px solid var(--ink); }
.a-score-num { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.a-score-num b {
  font: 800 clamp(5.4rem, 22vw, 9.5rem)/0.82 var(--f-display);
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.a-score-num span { font: 650 15px/1.2 var(--f-display); font-variation-settings: "wdth" 70; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.a-grade { display: inline-block; margin: 14px 0 0; padding: 6px 12px; font: 750 18px/1.2 var(--f-display); background: var(--ink); color: var(--paper); }
.a-score.t-strong .a-grade, .a-score.t-good .a-grade { background: var(--cobalt); }
.a-score.t-fair .a-grade { background: var(--sun); color: var(--ink); }
.a-summary { margin: 16px 0 0; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }

.a-areas, .a-areas tbody { display: block; width: 100%; }
.a-areas tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name num" "bar bar" "verdict verdict"; column-gap: 12px; padding: 12px 0 14px; border-bottom: 1px solid var(--hair); }
.a-areas tr:first-child { padding-top: 0; }
.a-areas th { grid-area: name; text-align: left; font: 700 17px/1.25 var(--f-display); color: var(--ink); }
.a-areas .a-num { grid-area: num; font: 800 24px/1 var(--f-display); font-variation-settings: "wdth" 110; color: var(--ink); font-variant-numeric: tabular-nums; }
.a-areas .a-bar { grid-area: bar; display: block; height: 10px; margin-top: 10px; background: var(--paper-2); }
.a-areas .a-bar span { display: block; height: 100%; width: var(--w); background: var(--ink); transform-origin: 0 50%; animation: a-bar 1s var(--ease) both; }
.a-areas .a-verdict { grid-area: verdict; margin-top: 6px; font: 650 13px/1.2 var(--f-display); font-variation-settings: "wdth" 70; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.a-areas .t-strong .a-bar span, .a-areas .t-good .a-bar span { background: var(--cobalt); }
.a-areas .t-fair .a-bar span { background: var(--sun); }
.a-areas .t-none .a-num { color: var(--ink-3); }
@keyframes a-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (min-width: 900px) {
  .a-score-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); padding-top: 28px; }
  .a-areas tr { grid-template-columns: minmax(0, 15em) 3em minmax(0, 1fr) 8.5em; grid-template-areas: "name num bar verdict"; align-items: center; padding: 14px 0; }
  .a-areas .a-bar { margin-top: 0; }
  .a-areas .a-verdict { margin-top: 0; text-align: right; }
  .a-areas .a-num { text-align: right; }
}

.a-tip { margin: 14px 0 0; }

/* The single biggest fix */
.a-fix { margin-top: clamp(36px, 5vw, 64px); padding: 22px 20px 26px; background: var(--ink); color: var(--paper); border-top: 6px solid var(--sun); }
.a-fix .label { color: var(--sun); }
.a-fix-why { margin: 10px 0 0; font: 750 clamp(1.35rem, 3.2vw, 2.1rem)/1.15 var(--f-display); font-variation-settings: "wdth" 104; letter-spacing: -0.015em; color: var(--paper); max-width: 34em; }
.a-fix-ctas { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 22px; }
.a-fix-ctas .btn { justify-content: center; }
.a-fix .textlink { color: var(--paper); text-align: center; }
.a-fix .textlink:hover { color: var(--sun); }
@media (min-width: 700px) {
  .a-fix { padding: 32px 36px 36px; }
  .a-fix-ctas { flex-direction: row; align-items: center; gap: 26px; }
}

/* Contact step */
.a-gate { margin-top: clamp(28px, 4vw, 48px); padding-top: 20px; border-top: 3px solid var(--ink); display: grid; gap: 22px; }
.a-teaser { margin: 0 0 10px; font: 700 15px/1.3 var(--f-display); color: var(--cobalt); }
.a-gate .h3 { margin-bottom: 8px; }
.a-gate-head p:last-child { margin: 0; max-width: 32em; }
.a-gate-fields { display: grid; gap: 14px; }
.a-fl { display: grid; gap: 6px; }
.a-fl .label { color: var(--ink); }
.a-fl input { width: 100%; height: 58px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; background: #fff; font: 500 18px/1 var(--f-display); color: var(--ink); -webkit-appearance: none; appearance: none; }
.a-fl input:focus { outline: 3px solid var(--cobalt); outline-offset: 0; }
.a-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.a-ts:empty { display: none; }
.a-gate .btn { justify-content: center; min-height: 60px; font-size: 17px; }
.a-err { margin: 0; padding: 10px 14px; background: var(--sun); color: var(--ink); font: 650 16px/1.4 var(--f-display); }
.a-consent { margin: 0; font-size: 14px; }
@media (min-width: 900px) {
  .a-gate { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); padding-top: 28px; }
  .a-gate-fields { grid-template-columns: 1fr 1fr; align-items: end; }
  .a-gate-fields .btn, .a-gate-fields .a-err, .a-gate-fields .a-consent, .a-ts { grid-column: 1 / -1; }
}
.a-thanks { margin: clamp(28px, 4vw, 48px) 0 0; padding: 16px 18px; border-left: 6px solid var(--sun); background: var(--paper-2); font: 650 18px/1.45 var(--f-display); color: var(--ink); }

/* Details after the contact step */
.a-details[hidden] { display: none; }
.a-details { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: clamp(44px, 6vw, 80px); }
.a-block > .h3 { padding-top: 16px; border-top: 3px solid var(--ink); }
.a-block > .small { margin: 8px 0 18px; }
.a-issues { margin: 0; padding: 0; list-style: none; counter-reset: fix; }
.a-issues li { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--hair); counter-increment: fix; }
.a-issues li[hidden] { display: none; }
.a-issues li .label { color: var(--cobalt); }
.a-issues li .label::before { content: counter(fix) ". "; color: var(--ink); }
.a-issues h4 { margin: 0; font: 700 18px/1.3 var(--f-display); color: var(--ink); letter-spacing: -0.01em; }
.a-issues p { margin: 4px 0 0; font-size: 17px; line-height: 1.5; }
.a-more { margin-top: 18px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 16px/1.3 var(--f-display); color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.a-more:hover { color: var(--cobalt); }
@media (min-width: 900px) {
  .a-issues li { grid-template-columns: 15em minmax(0, 1fr); gap: 24px; }
  .a-issues li .label { padding-top: 4px; }
}

.a-sees { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.a-sees li { padding: 16px 0 16px 18px; border-bottom: 1px solid var(--hair); box-shadow: inset 4px 0 0 var(--sun); }
.a-sees h4 { margin: 0; font: 700 18px/1.3 var(--f-display); color: var(--ink); }
.a-sees p { margin: 6px 0 0; font-size: 17px; line-height: 1.5; }
@media (min-width: 900px) { .a-sees { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

.a-ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.a-ledger th, .a-ledger td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--hair); text-align: right; font-size: 16px; line-height: 1.3; }
.a-ledger th:first-child { text-align: left; }
.a-ledger thead th { font: 650 12px/1.2 var(--f-display); font-variation-settings: "wdth" 70; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--ink); }
.a-ledger tbody th { font: 650 16px/1.3 var(--f-display); color: var(--ink); }
.a-ledger td { font-family: var(--f-display); font-weight: 600; color: var(--ink); white-space: nowrap; }
.a-ledger .is-you th, .a-ledger .is-you td { background: var(--paper-2); }
.a-ledger .is-you th { box-shadow: inset 4px 0 0 var(--sun); padding-left: 12px; }
.a-ledger .is-median th, .a-ledger .is-median td { color: var(--ink-3); border-bottom: 0; border-top: 1px solid var(--ink); }
.a-ledger-2 td { width: 6em; }
.a-ledger .is-low td::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--sun); vertical-align: 2px; }
@media (max-width: 520px) {
  .a-ledger th, .a-ledger td { font-size: 15px; padding-right: 6px; }
  .a-ledger thead th:last-child, .a-ledger tbody td:last-child { display: none; }
  .a-ledger-2 tbody td:last-child { display: table-cell; }
}

.a-checks { display: grid; gap: 26px; margin-top: 18px; }
.a-check-group .label { color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.a-check-group ul { margin: 0; padding: 0; list-style: none; }
.a-check-group li { display: grid; grid-template-columns: 4.8em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.4; }
.a-mark { font: 650 12px/1.6 var(--f-display); font-variation-settings: "wdth" 70; letter-spacing: 0.08em; text-transform: uppercase; }
.is-pass .a-mark { color: var(--ink-3); }
.is-fail .a-mark { color: var(--ink); }
.is-fail .a-mark::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: var(--sun); }
.is-pass span:last-child { color: var(--ink-3); }
@media (min-width: 900px) { .a-checks { grid-template-columns: 1fr 1fr; gap: 32px 56px; } }

.a-talk { padding: 22px 20px 26px; border: 2px solid var(--ink); }
.a-talk .h3 { margin: 8px 0 10px; }
.a-talk p { max-width: 34em; }
.a-talk-ctas { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin: 20px 0 12px; }
.a-talk-ctas .btn { justify-content: center; }
.a-talk-ctas .textlink { text-align: center; }
.a-talk .small { margin: 0; }
@media (min-width: 700px) {
  .a-talk { padding: 32px 36px; }
  .a-talk-ctas { flex-direction: row; align-items: center; gap: 26px; }
}

.a-again { margin: clamp(36px, 5vw, 56px) 0 0; }
.a-fail { padding: 24px 0; border-top: 3px solid var(--ink); max-width: 36em; }
.a-fail .h3 { margin-bottom: 10px; }

/* ---------- Landing sections ---------- */
.a-rows { border-top: 1px solid var(--ink); }
.a-row { display: grid; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.a-row p { margin: 0; max-width: 38em; }
.a-rows-steps .label { color: var(--cobalt); }
@media (min-width: 900px) {
  .a-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); padding: 26px 0; }
  .a-rows-steps .a-row { grid-template-columns: 220px minmax(0, 1fr); }
  .a-rows-steps .label { padding-top: 6px; }
}

.a-qa { display: grid; gap: 0 clamp(28px, 5vw, 72px); }
.a-qa div { padding: 22px 0 10px; border-top: 1px solid var(--hair); }
.a-qa div:first-child { border-top: 1px solid var(--ink); }
.a-qa h3 { margin-bottom: 10px; }
.a-qa p { font-size: 18px; max-width: 32em; }
@media (min-width: 761px) { .a-qa { grid-template-columns: 1fr 1fr; } .a-qa div:nth-child(2) { border-top: 1px solid var(--ink); } }

.a-final { background: var(--cobalt); color: rgba(243, 238, 228, 0.88); padding-block: clamp(64px, 9vw, 120px); }
.a-final .h2 { color: var(--paper); }
.a-final .lede { color: rgba(243, 238, 228, 0.9); margin: 20px 0 0; }
.a-final-ctas { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin: 28px 0 14px; }
.a-final-ctas .btn { justify-content: center; }
.a-final .textlink { color: var(--paper); text-align: center; }
.a-final .textlink:hover { color: var(--sun); }
.a-final .small { color: rgba(243, 238, 228, 0.75); margin: 0; }
@media (min-width: 700px) {
  .a-final-ctas { flex-direction: row; align-items: center; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .a-rose-needle, .a-rose-sun { transition: none; }
}